/* ============================================================
   GIRAE - Sistema de diseño
   Bootstrap 5.3 vestido con Material Design 3 y los tokens de tokens.css.
   Orden: variables de Bootstrap, base, armazón, componentes, utilidades.
   ============================================================ */

/* ------------------------------------------------------------
   1. Puente con Bootstrap
   Se reasignan las variables de Bootstrap para no pelear con !important
   en cada componente.
   ------------------------------------------------------------ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary:            var(--girae-primary);
    --bs-primary-rgb:        21, 94, 239;
    --bs-body-bg:            var(--girae-background);
    --bs-body-color:         var(--girae-text);
    --bs-secondary-color:    var(--girae-text-secondary);
    --bs-border-color:       var(--girae-border);
    --bs-border-radius:      var(--girae-radio-md);
    --bs-border-radius-sm:   var(--girae-radio-sm);
    --bs-border-radius-lg:   var(--girae-radio-lg);
    --bs-body-font-family:   var(--girae-fuente);
    --bs-link-color:         var(--girae-primary-text);
    --bs-link-hover-color:   var(--girae-primary-dark);
    --bs-emphasis-color:     var(--girae-text);
    --bs-tertiary-bg:        var(--girae-surface-2);
    --bs-focus-ring-color:   var(--girae-focus-ring);
}

/* ------------------------------------------------------------
   2. Base
   ------------------------------------------------------------ */
html {
    /* Nada de scroll horizontal, ni con zoom al 200 % ni a 320 px. */
    overflow-x: hidden;
}

body {
    font: var(--girae-body-large);
    background-color: var(--girae-background);
    color: var(--girae-text);
    min-height: 100vh;
    overflow-x: hidden;
}

h1, .girae-headline-large   { font: var(--girae-headline-large); }
h2, .girae-headline-medium  { font: var(--girae-headline-medium); }
h3, .girae-headline-small   { font: var(--girae-headline-small); }
h4, .girae-title-large      { font: var(--girae-title-large); }
h5, .girae-title-medium     { font: var(--girae-title-medium); }
h6, .girae-title-small      { font: var(--girae-title-small); }

.girae-display-large  { font: var(--girae-display-large); }
.girae-display-medium { font: var(--girae-display-medium); }
.girae-display-small  { font: var(--girae-display-small); }
.girae-body-medium    { font: var(--girae-body-medium); }
.girae-body-small     { font: var(--girae-body-small); }
.girae-label-large    { font: var(--girae-label-large);  letter-spacing: var(--girae-tracking-label); }
.girae-label-medium   { font: var(--girae-label-medium); letter-spacing: var(--girae-tracking-label); }
.girae-label-small    { font: var(--girae-label-small);  letter-spacing: var(--girae-tracking-label); }

.girae-texto-secundario { color: var(--girae-text-secondary); }

/* Foco visible de alto contraste. Se ve siempre, en cualquier tema.
   Nunca se elimina un outline sin poner otro en su lugar. */
:focus-visible {
    outline: 2px solid var(--girae-focus-ring);
    outline-offset: 2px;
    border-radius: var(--girae-radio-sm);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: none;
}

/* Borde de un control de formulario: necesita 3:1 contra su superficie
   (WCAG 1.4.11) para que se note dónde está el campo sin necesidad de
   enfocarlo. --girae-border (heredado de --bs-border-color) es un divisor
   de 1.2:1, pensado para tarjetas y tablas, no para esto. */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--girae-border-control);
}

/* Enlace de salto al contenido: invisible hasta que recibe foco */
.girae-skip {
    position: absolute;
    left: var(--girae-espacio-4);
    top: -100px;
    z-index: 2000;
    padding: var(--girae-espacio-3) var(--girae-espacio-4);
    background: var(--girae-primary);
    color: #FFFFFF;
    border-radius: 0 0 var(--girae-radio-md) var(--girae-radio-md);
    font: var(--girae-label-large);
    transition: top var(--girae-transicion);
}
.girae-skip:focus { top: 0; color: #FFFFFF; }

/* Iconos: tamaño coherente y alineados con el texto */
.material-symbols-rounded {
    font-size: 1.5rem;
    vertical-align: middle;
    user-select: none;
}
.material-symbols-rounded.girae-icono-sm { font-size: 1.125rem; }
.material-symbols-rounded.girae-icono-lg { font-size: 2.5rem; }

/* ------------------------------------------------------------
   3. Armazón: barra superior + barra lateral + contenido
   ------------------------------------------------------------ */
.girae-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--girae-topbar-alto);
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-2);
    padding: 0 var(--girae-espacio-4);
    background: var(--girae-surface);
    border-bottom: 1px solid var(--girae-border);
}

.girae-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--girae-espacio-2);
    font: var(--girae-title-large);
    color: var(--girae-primary-text);
    text-decoration: none;
    white-space: nowrap;
}
.girae-marca:hover { color: var(--girae-primary-dark); }
.girae-marca__sigla { font-weight: 700; letter-spacing: 0.02em; }
.girae-marca__logo { height: 28px; width: auto; max-width: 140px; object-fit: contain; }

/* Botón circular de la barra superior (menú, tema, notificaciones) */
.girae-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;                 /* objetivo táctil cómodo en móvil */
    min-width: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--girae-text-secondary);
    position: relative;
    transition: background var(--girae-transicion), color var(--girae-transicion);
}
.girae-icon-btn:hover  { background: var(--girae-hover); color: var(--girae-text); }
.girae-icon-btn:active { background: var(--girae-active); }

/* Punto de notificaciones: nunca es el único indicador, va con texto oculto */
.girae-punto {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--girae-danger);
    border: 2px solid var(--girae-surface);
}

.girae-buscador {
    flex: 1 1 auto;
    max-width: 520px;
}
.girae-buscador .form-control {
    background: var(--girae-surface-2);
    border-radius: var(--girae-radio-full);
    border-color: transparent;
    padding-left: 2.75rem;
}
.girae-buscador .material-symbols-rounded {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--girae-text-secondary);
    pointer-events: none;
}

.girae-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--girae-primary-light);
    color: var(--girae-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: var(--girae-label-large);
}

.girae-cuerpo {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--girae-topbar-alto));
}

.girae-main {
    flex: 1 1 auto;
    min-width: 0;                 /* sin esto, una tabla ancha desborda el flex */
    padding: var(--girae-espacio-6) var(--girae-espacio-4) var(--girae-espacio-12);
}

/* --- Barra lateral --- */
.girae-sidebar__cuerpo {
    background: var(--girae-surface) !important;
    padding: var(--girae-espacio-3) !important;
}

.girae-nav { width: 100%; }

.girae-nav__seccion {
    font: var(--girae-label-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--girae-text-secondary);
    padding: var(--girae-espacio-4) var(--girae-espacio-3) var(--girae-espacio-1);
    margin: 0;
}

.girae-nav__enlace {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-3);
    min-height: 48px;
    padding: var(--girae-espacio-2) var(--girae-espacio-3);
    margin-bottom: 2px;
    border-radius: var(--girae-radio-full);
    color: var(--girae-text);
    text-decoration: none;
    font: var(--girae-label-large);
    transition: background var(--girae-transicion), color var(--girae-transicion);
}
.girae-nav__enlace:hover { background: var(--girae-hover); color: var(--girae-text); }

/* Sección activa: fondo tonal + color + peso. Color solo, nunca. */
.girae-nav__enlace[aria-current="page"] {
    background: var(--girae-primary-light);
    color: var(--girae-primary-dark);
    font-weight: 700;
}
[data-bs-theme="dark"] .girae-nav__enlace[aria-current="page"] {
    background: var(--girae-primary-container);
    color: #FFFFFF;
}

/* Módulo aún no construido: se muestra, pero no engaña con un enlace roto */
.girae-nav__enlace[aria-disabled="true"] {
    color: var(--girae-text-secondary);
    pointer-events: none;
}
.girae-nav__pendiente {
    margin-left: auto;
    font: var(--girae-label-small);
    color: var(--girae-text-secondary);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-full);
    padding: 0 var(--girae-espacio-2);
}

@media (min-width: 992px) {
    .girae-sidebar {
        position: sticky;
        top: var(--girae-topbar-alto);
        flex: 0 0 auto;
        width: var(--girae-sidebar-ancho);
        height: calc(100vh - var(--girae-topbar-alto));
        overflow-y: auto;
        border-right: 1px solid var(--girae-border);
        transition: width var(--girae-transicion);
    }

    /* Colapsada a solo iconos. El texto sigue en el DOM para lectores de
       pantalla: se oculta visualmente, no se elimina. */
    .girae-app.is-colapsado .girae-sidebar { width: var(--girae-sidebar-colapsado); }
    .girae-app.is-colapsado .girae-nav__enlace { justify-content: center; padding-inline: 0; }
    .girae-app.is-colapsado .girae-nav__texto,
    .girae-app.is-colapsado .girae-nav__pendiente,
    .girae-app.is-colapsado .girae-nav__seccion-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .girae-app.is-colapsado .girae-nav__seccion {
        text-align: center;
        padding-inline: 0;
    }
    .girae-app.is-colapsado .girae-nav__seccion::after {
        content: "";
        display: block;
        height: 1px;
        background: var(--girae-border);
        margin: var(--girae-espacio-2) var(--girae-espacio-3) 0;
    }

    .girae-main { padding-inline: var(--girae-espacio-6); }
}

/* ------------------------------------------------------------
   4. Botones Material Design 3
   ------------------------------------------------------------ */
.btn-m3-filled,
.btn-m3-tonal,
.btn-m3-outlined,
.btn-m3-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--girae-espacio-2);
    min-height: 40px;
    padding: var(--girae-espacio-2) var(--girae-espacio-6);
    border-radius: var(--girae-radio-full);
    font: var(--girae-label-large);
    letter-spacing: var(--girae-tracking-label);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background var(--girae-transicion), box-shadow var(--girae-transicion), color var(--girae-transicion);
}

.btn-m3-filled {
    background: var(--girae-primary);
    color: #FFFFFF;
}
.btn-m3-filled:hover  { background: var(--girae-primary-dark); color: #FFFFFF; box-shadow: var(--girae-elevacion-1); }
.btn-m3-filled:active { background: var(--girae-primary-dark); box-shadow: none; }
[data-bs-theme="dark"] .btn-m3-filled { background: var(--girae-primary); color: #0B1220; }
[data-bs-theme="dark"] .btn-m3-filled:hover { background: #C6DAFF; color: #0B1220; }

.btn-m3-tonal {
    background: var(--girae-primary-light);
    color: var(--girae-primary-dark);
}
.btn-m3-tonal:hover { background: #C7DBFF; color: var(--girae-primary-dark); }
[data-bs-theme="dark"] .btn-m3-tonal { background: var(--girae-primary-container); color: #FFFFFF; }
[data-bs-theme="dark"] .btn-m3-tonal:hover { background: #14479F; color: #FFFFFF; }

.btn-m3-outlined {
    background: transparent;
    color: var(--girae-primary-text);
    border-color: var(--girae-border);
}
.btn-m3-outlined:hover { background: var(--girae-hover); color: var(--girae-primary-text); border-color: var(--girae-primary); }

.btn-m3-text {
    background: transparent;
    color: var(--girae-primary-text);
    padding-inline: var(--girae-espacio-3);
}
.btn-m3-text:hover { background: var(--girae-hover); color: var(--girae-primary-text); }

/* Variante destructiva, para eliminar o anular */
.btn-m3-filled.btn-m3-peligro { background: var(--girae-danger); color: #FFFFFF; }
.btn-m3-filled.btn-m3-peligro:hover { background: #B91C1C; color: #FFFFFF; }
.btn-m3-outlined.btn-m3-peligro { color: var(--girae-danger-text); border-color: var(--girae-danger); }

.btn-m3-filled:disabled,
.btn-m3-tonal:disabled,
.btn-m3-outlined:disabled,
.btn-m3-text:disabled,
.btn-m3-filled[aria-disabled="true"] {
    background: var(--girae-surface-2);
    color: var(--girae-text-secondary);
    border-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
}

/* ------------------------------------------------------------
   5. Tarjetas
   ------------------------------------------------------------ */
.girae-card {
    background: var(--girae-surface);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-lg);
    padding: var(--girae-espacio-6);
    box-shadow: var(--girae-elevacion-1);
}
.girae-card--plana { box-shadow: none; }
.girae-card--elevada { box-shadow: var(--girae-elevacion-2); border-color: transparent; }
.girae-card__titulo {
    font: var(--girae-title-medium);
    margin: 0 0 var(--girae-espacio-2);
}
.girae-card__pie {
    margin-top: var(--girae-espacio-4);
    padding-top: var(--girae-espacio-4);
    border-top: 1px solid var(--girae-border);
}

/* Tarjeta de indicador para paneles */
.girae-metrica__valor { font: var(--girae-display-small); line-height: 1.1; }
.girae-metrica__etiqueta { font: var(--girae-label-large); color: var(--girae-text-secondary); }

/* ------------------------------------------------------------
   6. Chips
   ------------------------------------------------------------ */
.girae-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--girae-espacio-1);
    min-height: 32px;
    padding: 0 var(--girae-espacio-3);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-sm);
    background: var(--girae-surface);
    color: var(--girae-text);
    font: var(--girae-label-large);
    text-decoration: none;
}
.girae-chip:hover { background: var(--girae-hover); color: var(--girae-text); }
.girae-chip--activo,
.girae-chip[aria-pressed="true"] {
    background: var(--girae-primary-light);
    border-color: var(--girae-primary);
    color: var(--girae-primary-dark);
}
[data-bs-theme="dark"] .girae-chip--activo,
[data-bs-theme="dark"] .girae-chip[aria-pressed="true"] {
    background: var(--girae-primary-container);
    color: #FFFFFF;
}
.girae-chip--inactivo {
    background: transparent;
    color: var(--girae-text-secondary);
    border-style: dashed;
}
.girae-chip .material-symbols-rounded { font-size: 1.125rem; }

/* ------------------------------------------------------------
   7. Campos de texto outlined con label flotante
   ------------------------------------------------------------ */
.girae-field {
    position: relative;
    margin-bottom: var(--girae-espacio-6);
}

/* Fila de una sola línea: campos y botón parejos.
   Dos cosas desalinean por su cuenta y hay que apagarlas juntas. La primera es
   el margen inferior de arriba: existe para separar un campo del siguiente en
   un formulario vertical, pero en una fila horizontal hace que la columna mida
   80 px mientras el campo mide 56 — y cualquier cosa que se estire a la altura
   de la fila queda más alta que el campo. La segunda es el botón, que mide 40 y
   necesita igualar los 56 del campo. Alinear la fila por abajo no alcanza: lo
   que alinearía son los bordes del margen, no los de los controles. */
.girae-fila-campos .girae-field { margin-bottom: 0; }
.girae-fila-campos .btn-m3-filled,
.girae-fila-campos .btn-m3-tonal,
.girae-fila-campos .btn-m3-outlined { min-height: 56px; }
.girae-field > .form-control,
.girae-field > .form-select {
    min-height: 56px;
    padding: 1.25rem var(--girae-espacio-4) 0.5rem;
    background: var(--girae-surface);
    color: var(--girae-text);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-sm);
    font: var(--girae-body-large);
}
.girae-field > textarea.form-control { min-height: 120px; }

.girae-field > .form-control:focus,
.girae-field > .form-select:focus {
    border-color: var(--girae-primary);
    box-shadow: inset 0 0 0 1px var(--girae-primary);
}

.girae-field > label {
    position: absolute;
    top: 1rem;
    left: var(--girae-espacio-4);
    color: var(--girae-text-secondary);
    font: var(--girae-body-large);
    pointer-events: none;
    transform-origin: left top;
    transition: transform var(--girae-transicion), color var(--girae-transicion);
}

/* El label sube cuando el campo tiene foco o contenido.
   El input necesita placeholder=" " para que :placeholder-shown funcione. */
.girae-field > .form-control:focus ~ label,
.girae-field > .form-control:not(:placeholder-shown) ~ label,
.girae-field > .form-select ~ label,
.girae-field--flotado > label {
    transform: translateY(-0.65rem) scale(0.75);
    color: var(--girae-primary-text);
}
.girae-field > .form-control:not(:focus):not(:placeholder-shown) ~ label,
.girae-field > .form-select:not(:focus) ~ label {
    color: var(--girae-text-secondary);
}

.girae-field .form-text {
    font: var(--girae-body-small);
    color: var(--girae-text-secondary);
    padding: var(--girae-espacio-1) var(--girae-espacio-4) 0;
}

/* Error: borde, icono y texto. Tres señales, no solo el color. */
.girae-field .girae-error {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-1);
    font: var(--girae-body-small);
    color: var(--girae-danger-text);
    padding: var(--girae-espacio-1) var(--girae-espacio-4) 0;
}
.girae-field .girae-error .material-symbols-rounded { font-size: 1rem; }
.girae-field > .form-control.is-invalid,
.girae-field > .form-select.is-invalid {
    border-color: var(--girae-danger);
    box-shadow: inset 0 0 0 1px var(--girae-danger);
    background-image: none;      /* el icono lo pone el mensaje, no el campo */
}

/* ------------------------------------------------------------
   8. Botón de acción principal flotante (FAB)
   ------------------------------------------------------------ */
.girae-fab {
    position: fixed;
    right: var(--girae-espacio-4);
    bottom: var(--girae-espacio-4);
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    gap: var(--girae-espacio-2);
    min-height: 56px;
    padding: 0 var(--girae-espacio-6);
    border: 0;
    border-radius: var(--girae-radio-lg);
    background: var(--girae-primary);
    color: #FFFFFF;
    font: var(--girae-label-large);
    box-shadow: var(--girae-elevacion-3);
    text-decoration: none;
}
.girae-fab:hover { background: var(--girae-primary-dark); color: #FFFFFF; }
[data-bs-theme="dark"] .girae-fab { background: var(--girae-primary); color: #0B1220; }

/* En escritorio la acción principal vive en el encabezado, no flotando */
@media (min-width: 768px) {
    .girae-fab { display: none; }
}
@media (max-width: 767.98px) {
    .girae-fab--solo-escritorio { display: none; }
}

/* ------------------------------------------------------------
   9. Tablas
   ------------------------------------------------------------ */
.girae-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--girae-surface);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-lg);
    overflow: hidden;
}
.girae-table caption {
    caption-side: top;
    padding: var(--girae-espacio-4) var(--girae-espacio-4) var(--girae-espacio-2);
    font: var(--girae-label-large);
    color: var(--girae-text-secondary);
    text-align: left;
}
.girae-table th,
.girae-table td {
    padding: var(--girae-espacio-3) var(--girae-espacio-4);
    border-bottom: 1px solid var(--girae-border);
    text-align: left;
    vertical-align: middle;
}
.girae-table thead th {
    background: var(--girae-surface-2);
    font: var(--girae-label-large);
    color: var(--girae-text-secondary);
    white-space: nowrap;
}
.girae-table tbody tr:last-child td { border-bottom: 0; }
.girae-table tbody tr:hover { background: var(--girae-hover); }
.girae-table .girae-numero { text-align: right; font-variant-numeric: tabular-nums; }

/* En móvil cada fila se vuelve una tarjeta: sin scroll horizontal.
   app.js copia el encabezado de cada columna a data-etiqueta. */
@media (max-width: 767.98px) {
    .girae-table--tarjetas,
    .girae-table--tarjetas thead,
    .girae-table--tarjetas tbody,
    .girae-table--tarjetas tr,
    .girae-table--tarjetas td { display: block; width: 100%; }

    .girae-table--tarjetas { border: 0; background: transparent; }
    .girae-table--tarjetas thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .girae-table--tarjetas tr {
        background: var(--girae-surface);
        border: 1px solid var(--girae-border);
        border-radius: var(--girae-radio-md);
        margin-bottom: var(--girae-espacio-3);
        padding: var(--girae-espacio-2) var(--girae-espacio-3);
    }
    .girae-table--tarjetas td {
        display: flex;
        justify-content: space-between;
        gap: var(--girae-espacio-4);
        border-bottom: 1px solid var(--girae-border);
        padding: var(--girae-espacio-2) 0;
        text-align: right;
    }
    .girae-table--tarjetas td:last-child { border-bottom: 0; }
    .girae-table--tarjetas td::before {
        content: attr(data-etiqueta);
        font: var(--girae-label-large);
        color: var(--girae-text-secondary);
        text-align: left;
    }
}

/* ------------------------------------------------------------
   10. Estado vacío
   ------------------------------------------------------------ */
.girae-empty {
    text-align: center;
    padding: var(--girae-espacio-12) var(--girae-espacio-4);
    background: var(--girae-surface);
    border: 1px dashed var(--girae-border);
    border-radius: var(--girae-radio-lg);
}
.girae-empty .material-symbols-rounded {
    font-size: 3rem;
    color: var(--girae-text-secondary);
}
.girae-empty__titulo { font: var(--girae-title-large); margin: var(--girae-espacio-3) 0 var(--girae-espacio-1); }
.girae-empty__texto  { color: var(--girae-text-secondary); margin-bottom: var(--girae-espacio-6); }

/* ------------------------------------------------------------
   11. Distintivos de nivel de existencias
   El nivel se lee por texto e icono; el color solo acompaña.
   ------------------------------------------------------------ */
.girae-badge-nivel {
    display: inline-flex;
    align-items: center;
    gap: var(--girae-espacio-1);
    padding: var(--girae-espacio-1) var(--girae-espacio-3);
    border-radius: var(--girae-radio-full);
    font: var(--girae-label-large);
    border: 1px solid transparent;
    white-space: nowrap;
}
.girae-badge-nivel .material-symbols-rounded { font-size: 1.125rem; }

.girae-badge-nivel--muy-bueno { background: var(--girae-secondary-light); color: var(--girae-secondary-text); border-color: var(--girae-secondary); }
.girae-badge-nivel--bueno     { background: var(--girae-success-bg);  color: var(--girae-success-text);  border-color: var(--girae-success); }
.girae-badge-nivel--regular   { background: var(--girae-warning-bg);  color: var(--girae-warning-text);  border-color: var(--girae-warning); }
.girae-badge-nivel--escaso    { background: var(--girae-priority-bg); color: var(--girae-priority-text); border-color: var(--girae-priority); }
.girae-badge-nivel--nulo      { background: var(--girae-danger-bg);   color: var(--girae-danger-text);   border-color: var(--girae-danger); }

.girae-badge-estado {
    display: inline-flex;
    align-items: center;
    gap: var(--girae-espacio-1);
    padding: 2px var(--girae-espacio-2);
    border-radius: var(--girae-radio-sm);
    font: var(--girae-label-medium);
    background: var(--girae-surface-2);
    color: var(--girae-text-secondary);
}
.girae-badge-estado--activo   { background: var(--girae-success-bg); color: var(--girae-success-text); }
.girae-badge-estado--inactivo { background: var(--girae-danger-bg);  color: var(--girae-danger-text); }

/* ------------------------------------------------------------
   12. Alertas y avisos
   ------------------------------------------------------------ */
.girae-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--girae-espacio-3);
    padding: var(--girae-espacio-4);
    border-radius: var(--girae-radio-md);
    border: 1px solid transparent;
    margin-bottom: var(--girae-espacio-4);
}
.girae-alert__titulo { font: var(--girae-title-small); margin: 0 0 2px; }
.girae-alert__texto  { margin: 0; font: var(--girae-body-medium); }

.girae-alert-exito       { background: var(--girae-success-bg);  color: var(--girae-success-text);  border-color: var(--girae-success); }
.girae-alert-error       { background: var(--girae-danger-bg);   color: var(--girae-danger-text);   border-color: var(--girae-danger); }
.girae-alert-advertencia { background: var(--girae-warning-bg);  color: var(--girae-warning-text);  border-color: var(--girae-warning); }
.girae-alert-info        { background: var(--girae-info-bg);     color: var(--girae-primary-dark);  border-color: var(--girae-primary); }
[data-bs-theme="dark"] .girae-alert-info { color: #FFFFFF; }

/* ------------------------------------------------------------
   13. Migas de pan
   ------------------------------------------------------------ */
.girae-migas {
    font: var(--girae-body-small);
    margin-bottom: var(--girae-espacio-2);
}
.girae-migas ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--girae-espacio-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.girae-migas li + li::before {
    content: "/";
    margin-right: var(--girae-espacio-1);
    color: var(--girae-text-secondary);
}
.girae-migas a { color: var(--girae-text-secondary); text-decoration: none; }
.girae-migas a:hover { text-decoration: underline; }
.girae-migas [aria-current="page"] { color: var(--girae-text); }

/* Encabezado de página: título a la izquierda, acciones a la derecha */
.girae-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--girae-espacio-4);
    margin-bottom: var(--girae-espacio-6);
}

/* ------------------------------------------------------------
   14. Diálogos, toasts y menús
   ------------------------------------------------------------ */
.modal-content,
.dropdown-menu,
.toast {
    background: var(--girae-surface);
    color: var(--girae-text);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-lg);
    box-shadow: var(--girae-elevacion-3);
}
.dropdown-item { color: var(--girae-text); border-radius: var(--girae-radio-sm); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--girae-hover); color: var(--girae-text); }
.dropdown-item.active { background: var(--girae-primary-light); color: var(--girae-primary-dark); }
[data-bs-theme="dark"] .dropdown-item.active { background: var(--girae-primary-container); color: #FFFFFF; }

.girae-toasts {
    position: fixed;
    left: 50%;
    bottom: var(--girae-espacio-6);
    transform: translateX(-50%);
    z-index: 1090;
    width: min(92vw, 480px);
}
.girae-toasts .toast { width: 100%; }

.offcanvas { background: var(--girae-surface); color: var(--girae-text); }

/* ------------------------------------------------------------
   15. Utilidades
   ------------------------------------------------------------ */
.girae-superficie   { background: var(--girae-surface); }
.girae-superficie-2 { background: var(--girae-surface-2); }
.girae-borde        { border: 1px solid var(--girae-border); }
.girae-radio-md     { border-radius: var(--girae-radio-md); }
.girae-elevacion-1  { box-shadow: var(--girae-elevacion-1); }
.girae-elevacion-2  { box-shadow: var(--girae-elevacion-2); }
.girae-elevacion-3  { box-shadow: var(--girae-elevacion-3); }

/* Muestra de color para la página de componentes */
.girae-muestra {
    height: 56px;
    border-radius: var(--girae-radio-md);
    border: 1px solid var(--girae-border);
}

/* ------------------------------------------------------------
   16. Página pública
   Móvil primero. La restricción que manda: en 360×640 los dos botones de
   acción del hero se ven sin desplazarse.
   ------------------------------------------------------------ */
.girae-seccion { padding: var(--girae-espacio-12) 0; }

/* En pantallas angostas la barra superior se aprieta: menos relleno y los
   botones reducidos a su icono, sin perder los 44 px de objetivo táctil. */
@media (max-width: 575.98px) {
    .girae-topbar { padding-inline: var(--girae-espacio-3); gap: var(--girae-espacio-1); }
    .girae-marca { font: var(--girae-title-medium); }
    .girae-marca__sigla { font-weight: 700; }
    .girae-entrar { padding-inline: var(--girae-espacio-4); }
    .girae-secciones > summary { padding-inline: var(--girae-espacio-2); }
}

/* --- Menú de secciones en móvil: <details>, sin JavaScript --- */
.girae-secciones { position: relative; }
.girae-secciones > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--girae-espacio-1);
    min-height: 44px;
}
.girae-secciones > summary::-webkit-details-marker { display: none; }
.girae-secciones__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1040;
    min-width: 220px;
    padding: var(--girae-espacio-2);
    background: var(--girae-surface);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-md);
    box-shadow: var(--girae-elevacion-3);
}
.girae-secciones__panel a {
    display: block;
    padding: var(--girae-espacio-3);
    min-height: 44px;
    border-radius: var(--girae-radio-sm);
    color: var(--girae-text);
    text-decoration: none;
}
.girae-secciones__panel a:hover { background: var(--girae-hover); }

/* --- Hero --- */
.girae-hero {
    padding: var(--girae-espacio-6) 0 var(--girae-espacio-8);
    background:
        radial-gradient(1200px 400px at 50% -10%, var(--girae-primary-light), transparent 70%),
        var(--girae-background);
}
.girae-hero__antetitulo {
    font: var(--girae-label-large);
    letter-spacing: var(--girae-tracking-label);
    color: var(--girae-secondary-text);
    margin-bottom: var(--girae-espacio-2);
}
.girae-hero__titulo {
    font: var(--girae-headline-small);           /* 24/32 en móvil */
    margin-bottom: var(--girae-espacio-3);
    text-wrap: balance;
}
.girae-hero__texto {
    font: var(--girae-body-medium);
    color: var(--girae-text-secondary);
    max-width: 62ch;
    margin: 0 auto var(--girae-espacio-6);
}
.girae-hero__pie {
    margin: var(--girae-espacio-4) 0 0;
    font: var(--girae-body-medium);
    color: var(--girae-text-secondary);
}

.girae-hero__acciones {
    display: grid;
    gap: var(--girae-espacio-3);
}

/* Botón de acción grande. Los dos pesan igual: quien ayuda y quien pide
   ayuda entran por la misma puerta. */
.girae-cta {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-3);
    min-height: 72px;                 /* objetivo táctil de sobra */
    padding: var(--girae-espacio-3) var(--girae-espacio-4);
    border-radius: var(--girae-radio-lg);
    text-align: left;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform var(--girae-transicion), box-shadow var(--girae-transicion);
}
.girae-cta span { display: block; min-width: 0; }
.girae-cta strong { display: block; font: var(--girae-title-medium); }
/* Sin opacidad: al 85% sobre el azul relleno esta línea quedaba en 4,35:1 y
   sobre el verde en 4,25:1 — por debajo del 4,5:1 que pide la §4.6 para texto
   normal. El contraste del botón se había verificado con el texto blanco puro
   (5,4:1) y esta segunda línea se coló. La jerarquía dentro del botón la dan el
   tamaño y el grosor, no un texto lavado. */
.girae-cta small  { display: block; font: var(--girae-body-small); }
.girae-cta:hover  { box-shadow: var(--girae-elevacion-2); transform: translateY(-2px); }

.girae-cta--primaria {
    background: var(--girae-primary);
    color: #FFFFFF;
}
.girae-cta--primaria:hover { background: var(--girae-primary-dark); color: #FFFFFF; }
[data-bs-theme="dark"] .girae-cta--primaria { background: var(--girae-primary); color: #0B1220; }

/* Las dos puertas usan .girae-cta--primaria: mismo relleno y mismo color, por
   decisión del cliente (18/08/2026). La variante outlined que existía antes se
   retiró porque contradecía el comentario de arriba —outlined al lado de relleno
   es una jerarquía explícita en Material Design—, y la variante verde que la
   reemplazó duró lo que tardó en verse. Lo que distingue una puerta de la otra
   es el icono y el texto, no el color. */

/* Puerta cerrada. Ocupa el mismo lugar y el mismo alto que el botón para que
   la página no parezca rota, pero no invita a nada: borde punteado, sin
   elevación y sin movimiento al pasar el puntero. El estado se dice en texto
   —nunca solo con el color— como pide CLAUDE.md §5. */
.girae-cta--cerrada {
    background: var(--girae-surface);
    color: var(--girae-text);
    /* El borde no usa --girae-border-control: ese token está reservado a los
       controles de formulario (ver tokens.css). Y --girae-border (1.2:1) es un
       divisor entre tarjetas: sobre el fondo casi blanco del hero no dibujaría
       la caja. El color de texto secundario sí se ve en claro y en oscuro, y
       aquí el borde es decorativo — el candado y el texto son los que
       comunican el estado. */
    border: 2px dashed var(--girae-text-secondary);
    cursor: default;
    margin: 0;
}
.girae-cta--cerrada small { color: var(--girae-text-secondary); opacity: 1; }
.girae-cta--cerrada:hover { box-shadow: none; transform: none; }

.girae-indicadores { margin-top: calc(var(--girae-espacio-6) * -1); }

/* --- Necesidades --- */
.girae-necesidades { background: var(--girae-surface-2); }

.girae-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--girae-espacio-2);
    justify-content: center;
}
.girae-filtros .girae-chip { min-height: 40px; }

.girae-necesidades__grupo { margin-bottom: var(--girae-espacio-8); }
.girae-necesidades__grupo h3 {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-2);
    padding-bottom: var(--girae-espacio-2);
    border-bottom: 1px solid var(--girae-border);
}

.girae-necesidades__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--girae-espacio-2);
    list-style: none;
    padding: 0;
    margin: 0;
}
.girae-necesidad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--girae-espacio-3);
    padding: var(--girae-espacio-3);
    background: var(--girae-surface);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-md);
}
.girae-necesidad__nombre {
    font: var(--girae-body-large);
    /* Primera letra en mayúscula sin tocar el dato guardado */
    text-transform: none;
}
.girae-necesidad__nombre::first-letter { text-transform: uppercase; }

/* --- Punto de acopio --- */
.girae-acopio__datos dt {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-1);
    font: var(--girae-label-large);
    color: var(--girae-text-secondary);
    margin-top: var(--girae-espacio-4);
}
.girae-acopio__datos dd {
    font: var(--girae-body-large);
    margin: var(--girae-espacio-1) 0 0;
}

/* --- Cómo donar --- */
.girae-como-donar { background: var(--girae-surface-2); }
.girae-paso {
    position: relative;
    padding: var(--girae-espacio-6);
    background: var(--girae-surface);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-lg);
}
.girae-paso__numero {
    position: absolute;
    top: var(--girae-espacio-4);
    right: var(--girae-espacio-4);
    font: var(--girae-display-small);
    line-height: 1;
    color: var(--girae-border);
}

/* --- Pie --- */
.girae-pie {
    background: var(--girae-surface);
    border-top: 1px solid var(--girae-border);
}
.girae-pie a { color: var(--girae-primary-text); text-decoration: none; }
.girae-pie a:hover { text-decoration: underline; }

/* --- De 576 px hacia arriba hay sitio para respirar --- */
@media (min-width: 576px) {
    .girae-hero { padding: var(--girae-espacio-12) 0; }
    .girae-hero__titulo { font: var(--girae-headline-large); }
    .girae-hero__texto  { font: var(--girae-body-large); }
    .girae-hero__acciones { grid-template-columns: 1fr 1fr; }
    .girae-necesidades__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .girae-hero__titulo { font: var(--girae-display-small); }
    .girae-necesidades__lista { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   17. Formularios por pasos (registro de voluntarios)
   Sin JavaScript los tres <fieldset> quedan visibles y apilados: es un
   formulario largo y ya está. Con JavaScript, app.js agrega la barra de
   progreso y muestra un paso a la vez. Por eso ningún estilo de aquí oculta
   nada por sí solo: el atributo `hidden` lo pone el script, nunca el CSS.
   ------------------------------------------------------------ */
.girae-paso-form + .girae-paso-form {
    margin-top: var(--girae-espacio-8);
    padding-top: var(--girae-espacio-8);
    border-top: 1px solid var(--girae-border);
}
.girae-paso-form__titulo {
    font: var(--girae-title-large);
    margin-bottom: var(--girae-espacio-4);
}
.girae-paso-form__titulo:focus-visible { outline: none; } /* recibe foco por programa, no por teclado */

.girae-paso-form__nav {
    display: flex;
    justify-content: space-between;
    gap: var(--girae-espacio-3);
    margin-top: var(--girae-espacio-6);
}
.girae-paso-form__nav:first-child { justify-content: flex-end; }

/* Barra de progreso, generada por JavaScript */
.girae-progreso {
    display: flex;
    gap: var(--girae-espacio-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--girae-espacio-8);
}
.girae-progreso li {
    flex: 1 1 0;
    padding: var(--girae-espacio-2) var(--girae-espacio-1);
    text-align: center;
    font: var(--girae-label-medium);
    color: var(--girae-text-secondary);
    border-top: 3px solid var(--girae-border);
}
.girae-progreso li.is-activo   { color: var(--girae-primary-text); border-top-color: var(--girae-primary); font-weight: 700; }
.girae-progreso li.is-completo { color: var(--girae-text); border-top-color: var(--girae-secondary); }

/* Grupos de casillas (tipos de voluntariado, días disponibles) */
.girae-grupo-casillas legend {
    font: var(--girae-title-small);
    margin-bottom: var(--girae-espacio-1);
    padding: 0;
}
.girae-grupo-casillas__ayuda {
    font: var(--girae-body-small);
    color: var(--girae-text-secondary);
    margin: 0 0 var(--girae-espacio-3);
}
.girae-grupo-casillas__categoria {
    font: var(--girae-label-large);
    color: var(--girae-text-secondary);
    margin: var(--girae-espacio-4) 0 var(--girae-espacio-2);
}
.girae-grupo-casillas__categoria:first-child { margin-top: 0; }

/* Aviso de tratamiento de datos: <details> nativo, sin JavaScript */
.girae-detalles {
    margin-top: var(--girae-espacio-3);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-md);
    padding: var(--girae-espacio-3) var(--girae-espacio-4);
}
.girae-detalles summary {
    cursor: pointer;
    font: var(--girae-label-large);
    color: var(--girae-primary-text);
}
.girae-detalles__cuerpo {
    margin-top: var(--girae-espacio-3);
    font: var(--girae-body-medium);
    color: var(--girae-text-secondary);
}
.girae-detalles__cuerpo p + p { margin-top: var(--girae-espacio-2); }

/* ------------------------------------------------------------
   18. Listados con filtros (voluntarios y similares)
   ------------------------------------------------------------ */
.girae-barra-filtros {
    background: var(--girae-surface);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-lg);
    padding: var(--girae-espacio-4);
    margin-bottom: var(--girae-espacio-4);
}
.girae-barra-filtros .girae-field { margin-bottom: 0; }

/* Chips de solo lectura dentro de una celda (tipos de voluntariado, máx. 2 + …) */
.girae-chips-celda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--girae-espacio-1);
}
.girae-chips-celda .girae-chip {
    min-height: 28px;
    padding: 0 var(--girae-espacio-2);
    font: var(--girae-label-medium);
}

th[aria-sort] { white-space: nowrap; }
.girae-orden {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: inherit;
    text-decoration: none;
}
.girae-orden:hover { text-decoration: underline; }
.girae-orden .material-symbols-rounded { font-size: 1rem; }

/* ------------------------------------------------------------
   19. Ficha con pestañas
   ------------------------------------------------------------ */
.girae-ficha__resumen dt {
    font: var(--girae-label-medium);
    color: var(--girae-text-secondary);
    margin-top: var(--girae-espacio-3);
}
.girae-ficha__resumen dt:first-child { margin-top: 0; }
.girae-ficha__resumen dd {
    font: var(--girae-title-medium);
    margin: 2px 0 0;
}

.girae-avatar--grande {
    width: 64px;
    height: 64px;
    font: var(--girae-headline-small);
}

.nav-tabs .nav-link { color: var(--girae-text-secondary); }
.nav-tabs .nav-link.active {
    color: var(--girae-primary-text);
    background: transparent;
    border-color: var(--girae-border) var(--girae-border) var(--girae-surface);
}

/* ------------------------------------------------------------
   20. Necesidades y bitácora (damnificados)
   ------------------------------------------------------------ */

/* Casillas grandes del registro público: "casillas grandes, iconos y
   descripción de una línea", pensadas para un teléfono y un dedo, no un
   mouse. Todo el <label> es el objetivo táctil, no solo la casilla. */
.girae-necesidad-opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--girae-espacio-3);
    padding: var(--girae-espacio-4);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-md);
    margin-bottom: var(--girae-espacio-2);
    cursor: pointer;
    transition: background var(--girae-transicion), border-color var(--girae-transicion);
}
.girae-necesidad-opcion:hover { background: var(--girae-hover); }
.girae-necesidad-opcion:has(:checked) {
    border-color: var(--girae-primary);
    background: var(--girae-primary-light);
}
[data-bs-theme="dark"] .girae-necesidad-opcion:has(:checked) { background: var(--girae-primary-container); }
.girae-necesidad-opcion input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}
.girae-necesidad-opcion__icono { color: var(--girae-primary-text); flex-shrink: 0; }
.girae-necesidad-opcion__texto strong { display: block; font: var(--girae-title-small); }
.girae-necesidad-opcion__texto small { display: block; color: var(--girae-text-secondary); font: var(--girae-body-small); }

/* Distintivos de prioridad: reutilizan la forma de girae-badge-nivel, con
   los colores propios de cada nivel de urgencia. Color + icono + texto. */
.girae-badge-nivel.girae-badge-prioridad--alta  { background: var(--girae-danger-bg);       color: var(--girae-danger-text);    border-color: var(--girae-danger); }
.girae-badge-nivel.girae-badge-prioridad--media { background: var(--girae-warning-bg);      color: var(--girae-warning-text);   border-color: var(--girae-warning); }
.girae-badge-nivel.girae-badge-prioridad--baja  { background: var(--girae-secondary-light); color: var(--girae-secondary-text); border-color: var(--girae-secondary); }

/* Estados de una necesidad puntual y del caso general: mismas clases porque
   comparten las mismas claves (pendiente, en_gestion/en_proceso, atendid@). */
.girae-badge-estado--pendiente  { background: var(--girae-surface-2); color: var(--girae-text-secondary); }
.girae-badge-estado--en-proceso,
.girae-badge-estado--en-gestion { background: var(--girae-info-bg);   color: var(--girae-primary-dark); }
[data-bs-theme="dark"] .girae-badge-estado--en-proceso,
[data-bs-theme="dark"] .girae-badge-estado--en-gestion { color: var(--girae-primary-text); }
.girae-badge-estado--atendida,
.girae-badge-estado--atendido   { background: var(--girae-success-bg); color: var(--girae-success-text); }
.girae-badge-estado--cancelada  { background: var(--girae-surface-2); color: var(--girae-text-secondary); }

/* Tarjeta de necesidad en el tablero de la ficha */
.girae-necesidad-tarjeta__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--girae-espacio-3);
    margin-bottom: var(--girae-espacio-3);
}
.girae-necesidad-tarjeta__titulo {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-2);
    font: var(--girae-title-medium);
}

/* Bitácora: más reciente primero, cada nota con su autor y su fecha */
.girae-bitacora {
    list-style: none;
    padding: 0;
    margin: 0;
}
.girae-bitacora__item {
    padding: var(--girae-espacio-3) 0;
    border-bottom: 1px solid var(--girae-border);
}
.girae-bitacora__item:last-child { border-bottom: 0; }
.girae-bitacora__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--girae-espacio-2);
    font: var(--girae-label-medium);
    color: var(--girae-text-secondary);
    margin-bottom: 2px;
}
.girae-bitacora__nota { margin: 0; }

/* ------------------------------------------------------------
   21. Banco de ayudas humanitarias
   ------------------------------------------------------------ */

/* Catálogo en tarjetas: alterna con la tabla, mismo contenido. */
.girae-catalogo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--girae-espacio-3);
}
@media (min-width: 576px) {
    .girae-catalogo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .girae-catalogo-grid { grid-template-columns: repeat(3, 1fr); }
}

.girae-articulo-card {
    display: flex;
    flex-direction: column;
    gap: var(--girae-espacio-2);
    padding: var(--girae-espacio-4);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-md);
    background: var(--girae-surface);
}
.girae-articulo-card--inactivo { opacity: 0.7; }
.girae-articulo-card__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--girae-espacio-2);
}
.girae-articulo-card__nombre { font: var(--girae-title-medium); }
.girae-articulo-card__existencia {
    font: var(--girae-body-medium);
    color: var(--girae-text-secondary);
}
.girae-articulo-card__sugerido {
    font: var(--girae-body-small);
    color: var(--girae-text-secondary);
    font-style: italic;
}
.girae-articulo-card__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--girae-espacio-2);
    margin-top: auto;
    padding-top: var(--girae-espacio-2);
    border-top: 1px solid var(--girae-border);
}

/* Indicador de bajo mínimo: no depende solo del color, lleva icono y texto. */
.girae-badge-bajo-minimo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: var(--girae-label-medium);
    color: var(--girae-danger-text);
}
.girae-badge-bajo-minimo .material-symbols-rounded { font-size: 1.125rem; }

/* Barra de edición masiva: siempre visible, funciona sin JavaScript
   (se manda a que aplique un nivel a lo que esté marcado). El contador y el
   des/habilitado del botón son mejora progresiva, ver app.js. */
.girae-toolbar-masiva {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--girae-espacio-3);
    padding: var(--girae-espacio-3) var(--girae-espacio-4);
    margin-bottom: var(--girae-espacio-4);
    border: 1px dashed var(--girae-border);
    border-radius: var(--girae-radio-md);
    background: var(--girae-surface-2);
}
.girae-toolbar-masiva__contador {
    font: var(--girae-label-medium);
    color: var(--girae-text-secondary);
    min-width: 9ch;
}

.girae-nivel-inline {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-2);
}
.girae-nivel-inline .form-select { min-width: 11rem; }

/* Kardex: tipo de movimiento. Mismo patrón que girae-badge-nivel, icono +
   texto, para que se distinga sin depender del color. */
.girae-badge-movimiento {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--girae-radio-pill, 999px);
    border: 1px solid transparent;
    font: var(--girae-label-medium);
}
.girae-badge-movimiento .material-symbols-rounded { font-size: 1.125rem; }
.girae-badge-movimiento--entrada { background: var(--girae-success-bg); color: var(--girae-success-text); border-color: var(--girae-success); }
.girae-badge-movimiento--salida  { background: var(--girae-warning-bg); color: var(--girae-warning-text); border-color: var(--girae-warning); }
.girae-badge-movimiento--ajuste  { background: var(--girae-surface-2);  color: var(--girae-text-secondary); border-color: var(--girae-border); }

/* ------------------------------------------------------------
   22. Movimiento reducido
   Quien pidió menos animación recibe menos animación.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   23. Impresión
   ------------------------------------------------------------ */
@media print {
    .girae-topbar,
    .girae-sidebar,
    .girae-fab,
    .girae-toasts { display: none !important; }

    .girae-main { padding: 0; }
    .girae-card { box-shadow: none; border-color: #999; }
}

/* ------------------------------------------------------------
   24. Donaciones
   ------------------------------------------------------------ */

/* Buscador de donante existente */
.girae-resultado-donante {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--girae-espacio-3);
    padding: var(--girae-espacio-3);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-md);
    margin-bottom: var(--girae-espacio-2);
}

/* Detalle de artículos: una fila en grilla, se apila en móvil */
.girae-linea {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--girae-espacio-2);
    align-items: start;
    padding: var(--girae-espacio-3);
    border: 1px solid var(--girae-border);
    border-radius: var(--girae-radio-md);
    margin-bottom: var(--girae-espacio-2);
    position: relative;
}
@media (min-width: 768px) {
    .girae-linea {
        grid-template-columns: 2fr 0.8fr 0.9fr 1.6fr auto;
    }
}
.girae-linea__campo { margin-bottom: 0; }
.girae-linea__quitar {
    justify-self: end;
    color: var(--girae-danger-text);
}

/* ------------------------------------------------------------
   25. Comprobante imprimible
   ------------------------------------------------------------ */
.girae-imprimir-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--girae-espacio-3);
    padding: var(--girae-espacio-3) var(--girae-espacio-5);
    border-bottom: 1px solid var(--girae-border);
    background: var(--girae-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.girae-comprobante {
    max-width: 21.59cm;         /* carta */
    margin: var(--girae-espacio-6) auto;
    padding: 2cm;
    background: var(--girae-surface);
    color: var(--girae-text);
}
.girae-comprobante__encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--girae-espacio-4);
    border-bottom: 2px solid var(--girae-border);
    padding-bottom: var(--girae-espacio-4);
    margin-bottom: var(--girae-espacio-4);
}
.girae-comprobante__marca {
    display: flex;
    align-items: center;
    gap: var(--girae-espacio-2);
    font: var(--girae-title-large);
}
.girae-comprobante__consecutivo {
    text-align: right;
    font: var(--girae-title-medium);
}
.girae-comprobante h2 {
    font: var(--girae-title-medium);
    margin: var(--girae-espacio-5) 0 var(--girae-espacio-2);
}
.girae-comprobante dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--girae-espacio-3);
    margin: 0;
}
.girae-comprobante dt { color: var(--girae-text-secondary); }
.girae-comprobante dd { margin: 0; }
.girae-comprobante table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--girae-espacio-2);
}
.girae-comprobante th,
.girae-comprobante td {
    text-align: left;
    padding: var(--girae-espacio-2);
    border-bottom: 1px solid var(--girae-border);
}
.girae-comprobante__firmas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--girae-espacio-6);
    margin-top: var(--girae-espacio-8);
}
.girae-comprobante__firma {
    border-top: 1px solid var(--girae-text);
    padding-top: var(--girae-espacio-2);
    text-align: center;
    font: var(--girae-body-small);
}
.girae-comprobante__agradecimiento {
    margin-top: var(--girae-espacio-6);
    text-align: center;
    font-style: italic;
    color: var(--girae-text-secondary);
}

@media print {
    .girae-no-imprimir { display: none !important; }
    .girae-comprobante {
        margin: 0;
        padding: 0;
        max-width: none;
    }
    body.girae-imprimir-body { background: #FFFFFF; }
    /* Legible en blanco y negro: el nivel/estado no depende del color aquí. */
    .girae-comprobante * { color: #000 !important; }
    .girae-comprobante th,
    .girae-comprobante td,
    .girae-comprobante dl,
    .girae-comprobante__encabezado,
    .girae-comprobante__firma { border-color: #000 !important; }
    @page { size: letter; margin: 1.5cm; }
}