/* Generado por `php artisan ongs:css` — no editar a mano.
   La fuente es css/ongs/app.css y los archivos que importa. */

/* === css/ongs/tokens.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — tokens

   La paleta y la tipografía del portal de las organizaciones. Es el ÚNICO
   archivo del portal con colores literales: todo lo demás consume var().

   ── Por qué no se parece a Cannis Health ──────────────────────────
   No son el mismo producto ni se usan igual. Cannis Health es el consultorio
   de UNA persona: pantalla oscura, vidrio, menta sobre casi negro, silencio.
   Esto es el MOSTRADOR de una asociación civil: se usa de día, con luz, con
   gente esperando del otro lado, y lo miran varias personas distintas en el
   mismo turno. Por eso:

     · claro por defecto, oscuro disponible   (Health es al revés)
     · papel y no vidrio: superficies opacas, borde de 1px, cero blur
     · verde hondo y ocre: el verde de la organización, el ocre del dinero y
       el stock. Nada de menta ni aqua, que son de Health.
     · Agrandir para los títulos y las cifras, Inter para leer. Health es
       Inter y nada más; Agrandir es la tipografía del manual de marca y ya
       vive en public/fonts/.
     · esquinas más cerradas (10px la tarjeta, 6px el control): esto es una
       planilla, no una app de salud.

   ── Cómo funciona el tema ─────────────────────────────────────────
   La paleta clara va en :root y la oscura en :root[data-tema="oscuro"].
   Ninguna otra hoja sabe en qué tema está: si una regla necesita saberlo, el
   token está mal declarado.

   ⚠️ Cada relleno tiene su tinta: --og-sobre-*. No uses una tinta fija sobre
   un fondo que se invierte — es la deuda #31/#32 del repo, y ahí está por
   haberlo hecho mal dos veces.

   ── Contraste (PD-48) ─────────────────────────────────────────────
   Todo texto contra papel, superficie y superficie-2, cada tinta contra su
   relleno y la barra contra sus ítems están medidos: ≥ 4,5:1, 43 pares en
   cada tema. La paleta clara anterior tenía diez por debajo —el texto
   tenue, el ocre y la alerta sobre papel— y los rótulos de la barra, con
   tinta translúcida, 3,8:1. Si tocás un valor, volvé a medir.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca ──────────────────────────────────────────────────────
       El verde de una asociación civil, no el de una app: saturado pero
       terroso, legible sobre papel. */
    --og-verde:        #1B6E45;
    --og-verde-hondo:  #11492E;
    --og-verde-claro:  #3FA36C;
    --og-verde-suave:  #D3E6D9;
    --og-sobre-verde:  #FFFFFF;

    /* El ocre es de la plata y del stock: caja, costos, existencias.
       Tiene que competir con el verde sin pelearse. */
    --og-ocre:         #8E5410;
    --og-ocre-suave:   #EDE0CC;
    --og-sobre-ocre:   #FFFFFF;

    /* ── Papel y tinta ──────────────────────────────────────────────
       Gris y no blanco (PD-48): el papel cálido con tarjetas en blanco puro
       encandilaba en un turno largo. Ahora nada es #FFFFFF: el fondo es un gris
       con un dejo del verde de la barra, y la tarjeta se separa de él por un
       escalón de luz y su borde, no por brillo. */
    --og-papel:        #E3E6E2;
    --og-superficie:   #F1F3F0;
    --og-superficie-2: #E9ECE8;
    --og-barra:        #12291F;   /* la barra es oscura en los dos temas */
    --og-sobre-barra:  #E8EFE9;
    /* Las tintas secundarias de la barra, sólidas: con opacidad el
       contraste dependía del fondo y los rótulos quedaban en 3,8:1. */
    --og-sobre-barra-suave: #C1CBC5;
    --og-sobre-barra-tenue: #92A098;

    --og-tinta:        #13241C;
    --og-tinta-suave:  #364740;
    --og-tinta-tenue:  #56655E;
    --og-tinta-invertida: #FFFFFF;

    --og-borde:        #CDD3CC;
    --og-borde-fuerte: #B3BBB3;

    /* ── Estados ────────────────────────────────────────────────────
       Cada uno con su relleno suave y su tinta: el par viaja junto y se
       invierte junto. */
    --og-ok:           #186C42;
    --og-ok-suave:     #D3E8DA;
    --og-sobre-ok:     #0D3A23;

    --og-alerta:       #8A5405;
    --og-alerta-suave: #F0E0C4;
    --og-sobre-alerta: #4A2D02;

    --og-riesgo:       #A2211B;
    --og-riesgo-suave: #F1D7D4;
    --og-sobre-riesgo: #58110E;
    /* La tinta del riesgo LLENO (el botón de dar de baja): blanco en claro,
       casi negro en oscuro, donde el rojo se aclara. */
    --og-sobre-riesgo-solido: #FFFFFF;

    --og-info:         #1A5582;
    --og-info-suave:   #D4E3EF;
    --og-sobre-info:   #0E3150;

    /* ── Tipografía ─────────────────────────────────────────────────
       Agrandir titula y cuenta; Inter se lee. Esa división es la diferencia
       tipográfica con Health, que es Inter para todo. */
    --og-tipo-display: 'Agrandir', 'Trebuchet MS', sans-serif;
    --og-tipo-texto:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --og-tipo-numero:  'Agrandir', 'Inter', sans-serif;

    --og-t-h1:       clamp(1.75rem, 1.2rem + 1.6vw, 2.35rem);
    --og-t-h2:       1.2rem;
    --og-t-h3:       1rem;
    --og-t-body:     0.9375rem;
    --og-t-body-sm:  0.8125rem;
    --og-t-dato:     0.9375rem;
    --og-t-cifra:    clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem);
    --og-t-rotulo:   0.6875rem;   /* los ROTULOS en versalita */

    /* ── Espacio ────────────────────────────────────────────────────
       Escala de 4, sin saltos raros: los listados de este portal son densos
       y el ritmo tiene que ser previsible. */
    --og-sp-1: 4px;
    --og-sp-2: 8px;
    --og-sp-3: 12px;
    --og-sp-4: 16px;
    --og-sp-5: 24px;
    --og-sp-6: 32px;
    --og-sp-7: 48px;

    /* ── Forma ──────────────────────────────────────────────────────
       Más cerrado que Health a propósito: planilla, no app de salud. */
    --og-r-sm:   6px;
    --og-r-md:   10px;
    --og-r-lg:   14px;
    --og-r-pill: 999px;

    /* Sombras de papel: cortas y bajas. Nada de halos de colores. */
    --og-sombra-1: 0 1px 2px rgba(18, 41, 31, 0.07);
    --og-sombra-2: 0 2px 8px rgba(18, 41, 31, 0.09);
    --og-sombra-3: 0 12px 32px rgba(18, 41, 31, 0.18);
    /* La de una barra pegada abajo, que tapa lo que pasa por detrás. */
    --og-sombra-arriba: 0 -8px 24px rgba(18, 41, 31, 0.10);

    /* La hoja del ingreso: la única pieza del portal que flota. Dos capas,
       el contacto y la sombra larga, para que se despegue sin halo. */
    --og-sombra-hoja: 0 1px 2px rgba(18, 41, 31, 0.08), 0 28px 56px -18px rgba(18, 41, 31, 0.30);

    /* ── Acceso (PD-48, vuelta 4) ───────────────────────────────────
       La banda de marca del ingreso es negra y dorada en los DOS temas, como
       el isotipo de Cannis OS (images/logo/cannis_os.png), del que salen los
       dorados: negro con un punto de calidez, luz de oro arriba, de ámbar
       abajo y los anillos del isotipo apenas marcados. Estos valores se
       declaran sólo acá porque no cambian con el tema. Los textos de la
       banda están medidos contra el punto MÁS claro que les queda debajo. */
    --og-acceso-fondo-alto:  #1C1B20;
    --og-acceso-fondo-bajo:  #0A0A0D;
    --og-acceso-luz-oro:     rgba(245, 184, 46, 0.20);
    --og-acceso-luz-ambar:   rgba(224, 138, 13, 0.13);
    --og-acceso-trama:       rgba(252, 210, 107, 0.045);
    --og-acceso-anillo:      rgba(252, 210, 107, 0.10);
    --og-acceso-linea:       rgba(252, 210, 107, 0.30);
    --og-acceso-tinta:       #F7F2E8;
    --og-acceso-tinta-suave: #CEC5B3;
    --og-acceso-acento:      #FCD26B;
    --og-acceso-tilde-fondo: rgba(252, 210, 107, 0.13);
    --og-acceso-oro-claro:   #FFE49E;
    --og-acceso-oro:         #F5B82E;
    --og-acceso-oro-hondo:   #E08A0D;
    --og-acceso-sobre-oro:   #17140E;

    /* Del lado del formulario, lo que sigue al tema: el papel tibio, la hoja
       y el dorado que se lee sobre ella. En claro es un bronce: el oro sobre
       papel claro no llega a 4,5:1. */
    --og-acceso-papel:       #E7E3DA;
    --og-acceso-hoja:        #F8F6F1;
    --og-acceso-campo:       #FFFEFB;
    --og-acceso-marca:       #7C4F00;

    /* ── Medidas del layout ─────────────────────────────────────────*/
    --og-ancho-barra:   268px;
    --og-alto-topbar:   64px;
    --og-ancho-lectura: 1320px;
}

/* ═══════════════════════════════════════════════════════════════════
   Tema oscuro — grafito, jade y oro (PD-48)

   El anterior era verde-negro: el verde de la barra bajado a fondo, con los
   acentos también verdes. Todo sabía a lo mismo. Éste es grafito neutro, con
   una tibieza apenas en la tinta, y el color queda para lo que importa: el
   jade de la organización en los botones y lo que está bien, el oro en la
   plata y el stock. Es la combinación de las pantallas de noche que no
   cansan: fondo sin tinte, texto marfil y no blanco, acentos desaturados.

   La barra se hunde un tono POR DEBAJO del papel: así sigue leyéndose como
   una pieza aparte y no como parte del fondo.

   Sólo en PANTALLA: al imprimir —un comprobante de la Caja, la ficha de un
   turno— manda la paleta clara aunque la persona trabaje en oscuro. Si no,
   la tinta clara del tema oscuro salía casi invisible sobre el papel.
   ═══════════════════════════════════════════════════════════════════ */
@media screen {
:root[data-tema="oscuro"] {
    --og-verde:        #5CC08F;
    --og-verde-hondo:  #95D9B6;
    --og-verde-claro:  #3E9A6E;
    --og-verde-suave:  #15261E;
    --og-sobre-verde:  #06140D;

    --og-ocre:         #D6A55A;
    --og-ocre-suave:   #2B2317;
    --og-sobre-ocre:   #1A1206;

    --og-papel:        #0E1011;
    --og-superficie:   #151819;
    --og-superficie-2: #1B1F20;
    --og-barra:        #0A0C0C;
    --og-sobre-barra:  #E7E4DD;
    --og-sobre-barra-suave: #BFBDB7;
    --og-sobre-barra-tenue: #8F8E89;

    --og-tinta:        #EDEAE3;
    --og-tinta-suave:  #BDB8AE;
    --og-tinta-tenue:  #949086;
    --og-tinta-invertida: #0E1011;

    --og-borde:        #262B2C;
    --og-borde-fuerte: #383E3F;

    --og-ok:           #5CC08F;
    --og-ok-suave:     #13261C;
    --og-sobre-ok:     #CDEEDC;

    --og-alerta:       #E0AA50;
    --og-alerta-suave: #2E2514;
    --og-sobre-alerta: #F4E1BC;

    --og-riesgo:       #EE7B70;
    --og-riesgo-suave: #331A18;
    --og-sobre-riesgo: #F9D5D0;
    --og-sobre-riesgo-solido: #1C0B09;

    --og-info:         #7EB6E4;
    --og-info-suave:   #15222E;
    --og-sobre-info:   #D3E6F6;

    --og-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --og-sombra-2: 0 2px 8px rgba(0, 0, 0, 0.5);
    --og-sombra-3: 0 12px 32px rgba(0, 0, 0, 0.6);
    --og-sombra-arriba: 0 -8px 24px rgba(0, 0, 0, 0.5);
    --og-sombra-hoja: 0 1px 2px rgba(0, 0, 0, 0.5), 0 32px 64px -20px rgba(0, 0, 0, 0.75);

    /* El lado del formulario del ingreso: negro tibio y el oro del isotipo. */
    --og-acceso-papel:       #0E0E11;
    --og-acceso-hoja:        #18181C;
    --og-acceso-campo:       #111114;
    --og-acceso-marca:       #FCD26B;
}
} /* @media screen */

/* === css/ongs/base.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — base

   Reset, tipografías y los elementos sueltos. Cero colores literales: todo
   sale de tokens.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Agrandir ───────────────────────────────────────────────────────
   Los .otf viven en public/fonts/ y se declaran con ruta ABSOLUTA: la hoja se
   sirve concatenada desde css/ongs/bundle.css y una ruta relativa cambiaría
   de significado según desde dónde se importe.
   `format('opentype')` y no `format('otf')`, que es un valor inválido y hace
   que el navegador descarte la fuente en silencio — así estuvo años el
   @font-face de public/css/Cannis/app.css. */
@font-face {
    font-family: 'Agrandir';
    src: url('/fonts/Agrandir-Regular.otf') format('opentype');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agrandir';
    src: url('/fonts/Agrandir-TextBold.otf') format('opentype');
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--og-papel);
    color: var(--og-tinta);
    font-family: var(--og-tipo-texto);
    font-size: var(--og-t-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--og-tipo-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

p {
    margin: 0;
}

a {
    color: var(--og-verde);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

/* Los controles no heredan la tipografía solos. */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* ── Foco ───────────────────────────────────────────────────────────
   Un anillo propio y visible: el portal se opera mucho con teclado desde el
   mostrador, y el outline del navegador se pierde sobre papel. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--og-verde);
    outline-offset: 2px;
    border-radius: var(--og-r-sm);
}

/* ── `hidden` gana siempre ─────────────────────────────────────────
   El navegador trae `[hidden] { display: none }` en su hoja de usuario, que
   es de MENOR prioridad que cualquier regla nuestra. Basta con que un
   componente declare `display: grid` —como el panel de filtros— para que
   esconderlo desde JavaScript deje de hacer efecto: el atributo queda puesto
   y el elemento se sigue viendo.

   Pasó con el panel de filtros y con el botón que lo abre, y habría pasado
   con cualquier cosa que el portal esconda de acá en adelante. Se declara una
   vez, acá, y se termina el problema. */
[hidden] {
    display: none !important;
}

/* ── Sólo para lectores de pantalla ────────────────────────────────*/
.og-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Barras de scroll ──────────────────────────────────────────────
   Finas y del color del borde: en una tabla ancha la barra gorda del sistema
   se come una fila. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--og-borde-fuerte) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--og-borde-fuerte);
    border: 3px solid transparent;
    border-radius: var(--og-r-pill);
    background-clip: content-box;
}

/* ── Impresión ─────────────────────────────────────────────────────
   Del mostrador sale papel: rendiciones, listados de socios, comprobantes.
   Sin esto se imprime la barra de navegación en la primera hoja. */
@media print {
    .og-barra,
    .og-topbar,
    .og-acciones,
    .og-filtros {
        display: none !important;
    }

    .og-columna {
        margin-left: 0 !important;
    }

    body {
        background: #FFFFFF;
    }
}

/* === css/ongs/componentes.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — componentes

   Las piezas que se repiten en todas las pantallas. Cero colores literales.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ Botones ══════════════════════════════════════════════════════ */
.og-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--og-sp-2);
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    color: var(--og-tinta);
    font-size: var(--og-t-body);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.og-btn:hover {
    background: var(--og-superficie-2);
    border-color: var(--og-tinta-tenue);
    text-decoration: none;
}

.og-btn--principal {
    background: var(--og-verde);
    border-color: var(--og-verde);
    color: var(--og-sobre-verde);
}

.og-btn--principal:hover {
    background: var(--og-verde-hondo);
    border-color: var(--og-verde-hondo);
}

.og-btn--fantasma {
    background: transparent;
    border-color: transparent;
    color: var(--og-tinta-suave);
}

.og-btn--fantasma:hover {
    background: var(--og-superficie-2);
    border-color: var(--og-borde);
}

/* Dos rojos, y no son lo mismo.

   `--riesgo` es el contorno: para la acción destructiva EN UNA FILA, donde
   hay diez botones y uno relleno de rojo por fila sería una pantalla en
   llamas.

   `--peligro` es el relleno: para el botón que CONFIRMA la destrucción en el
   modal, que es único en pantalla y tiene que gritar lo que va a pasar. */
.og-btn--riesgo {
    border-color: var(--og-riesgo);
    color: var(--og-riesgo);
}

.og-btn--riesgo:hover {
    background: var(--og-riesgo-suave);
    border-color: var(--og-riesgo);
}

.og-btn--peligro {
    background: var(--og-riesgo);
    border-color: var(--og-riesgo);
    /* Su tinta, no blanco fijo: en oscuro el rojo se aclara y el blanco
       quedaba en 2,5:1. */
    color: var(--og-sobre-riesgo-solido);
}

.og-btn--peligro:hover {
    /* Un punto más oscuro, sin inventar un token nuevo para un solo hover. */
    background: var(--og-riesgo);
    border-color: var(--og-riesgo);
    filter: brightness(0.9);
}

.og-btn--chico {
    padding: 0.3rem 0.6rem;
    font-size: var(--og-t-body-sm);
}

.og-btn[disabled],
.og-btn.es-inhabilitada {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.og-btn__icono {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ══ Pastillas ════════════════════════════════════════════════════
   Cuadradas y no píldoras: es una planilla. Cada variante trae SU tinta
   (--og-sobre-*) porque el relleno se invierte con el tema y una tinta fija
   encima deja de contrastar. */
.og-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie-2);
    color: var(--og-tinta-suave);
    font-size: var(--og-t-body-sm);
    font-weight: 650;
    line-height: 1.4;
    white-space: nowrap;
}

.og-pastilla--ok     { background: var(--og-ok-suave);     border-color: transparent; color: var(--og-sobre-ok); }
.og-pastilla--alerta { background: var(--og-alerta-suave); border-color: transparent; color: var(--og-sobre-alerta); }
.og-pastilla--riesgo { background: var(--og-riesgo-suave); border-color: transparent; color: var(--og-sobre-riesgo); }
.og-pastilla--info   { background: var(--og-info-suave);   border-color: transparent; color: var(--og-sobre-info); }
.og-pastilla--marca  { background: var(--og-verde-suave);  border-color: transparent; color: var(--og-verde-hondo); }
.og-pastilla--plata  { background: var(--og-ocre-suave);   border-color: transparent; color: var(--og-ocre); }

/* ══ Tarjeta ══════════════════════════════════════════════════════ */
.og-tarjeta {
    background: var(--og-superficie);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    box-shadow: var(--og-sombra-1);
    overflow: hidden;
}

.og-tarjeta__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--og-sp-4);
    padding: var(--og-sp-4) var(--og-sp-5);
    border-bottom: 1px solid var(--og-borde);
    background: var(--og-superficie-2);
}

.og-tarjeta__titulo {
    font-size: var(--og-t-h3);
    font-weight: 700;
}

.og-tarjeta__ayuda {
    margin-top: 2px;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-tarjeta__cuerpo {
    padding: var(--og-sp-5);
}

.og-tarjeta__pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--og-sp-2);
    padding: var(--og-sp-3) var(--og-sp-5);
    border-top: 1px solid var(--og-borde);
    background: var(--og-superficie-2);
}

/* ══ Datos ════════════════════════════════════════════════════════
   Etiqueta arriba en versalita, valor abajo. */
.og-grilla {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--og-sp-4);
}

.og-grilla > .og-col-3  { grid-column: span 3; }
.og-grilla > .og-col-4  { grid-column: span 4; }
.og-grilla > .og-col-6  { grid-column: span 6; }
/* El par 4+8: una columna angosta al lado de una ancha. Sin esta regla el
   .og-col-8 caía al default de una sola columna de doce y el campo quedaba
   de 50px, con el texto partido letra por letra. */
.og-grilla > .og-col-8  { grid-column: span 8; }
.og-grilla > .og-col-12 { grid-column: 1 / -1; }

@media (max-width: 1080px) {
    .og-grilla > .og-col-3,
    .og-grilla > .og-col-4 {
        grid-column: span 6;
    }

    .og-grilla > .og-col-8 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .og-grilla > .og-col-3,
    .og-grilla > .og-col-4,
    .og-grilla > .og-col-6 {
        grid-column: 1 / -1;
    }
}

.og-dato {
    min-width: 0;
}

.og-dato__etiqueta {
    display: block;
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

.og-dato__valor {
    display: block;
    margin-top: 2px;
    font-family: var(--og-tipo-numero);
    font-size: var(--og-t-dato);
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Un texto largo vuelve al peso normal y a la tipografía de lectura: ahí se
   lee de corrido, no se escanea. */
.og-dato__valor--texto {
    font-family: var(--og-tipo-texto);
    font-weight: 400;
    color: var(--og-tinta-suave);
}

/* El siguiente paso, debajo de un dato: «Creá una para el paciente…» debajo
   de «Cuenta en Cannis: No tiene». Verde de marca y subrayado sólo al pasar,
   para que se lea como invitación y no como otro dato. */
.og-dato__siguiente {
    display: inline-block;
    margin-top: var(--og-sp-1);
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--og-verde);
    text-decoration: none;
}

.og-dato__siguiente:hover,
.og-dato__siguiente:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ══ Cifras del tablero ═══════════════════════════════════════════ */
.og-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--og-sp-4);
}

.og-cifra {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-1);
    padding: var(--og-sp-4) var(--og-sp-5);
    background: var(--og-superficie);
    border: 1px solid var(--og-borde);
    border-left: 3px solid var(--og-verde);
    border-radius: var(--og-r-md);
    box-shadow: var(--og-sombra-1);
}

/* El acento del borde dice de qué habla la cifra sin leer la etiqueta:
   verde las personas, ocre la plata y el stock, rojo lo que está mal. */
.og-cifra--plata  { border-left-color: var(--og-ocre); }
.og-cifra--alerta { border-left-color: var(--og-alerta); }

.og-cifra__rotulo {
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

.og-cifra__numero {
    font-family: var(--og-tipo-numero);
    font-size: var(--og-t-cifra);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.og-cifra__nota {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-cifra__enlace {
    margin-top: var(--og-sp-2);
    font-size: var(--og-t-body-sm);
    font-weight: 650;
}

/* ══ Tabla ════════════════════════════════════════════════════════
   Planilla: líneas horizontales, sin bordes verticales, cabecera en
   versalita y números tabulares. */
.og-tabla-scroll {
    overflow-x: auto;
}

.og-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--og-t-body);
}

.og-tabla th {
    padding: var(--og-sp-3) var(--og-sp-4);
    border-bottom: 1px solid var(--og-borde-fuerte);
    background: var(--og-superficie-2);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
    text-align: left;
    white-space: nowrap;
}

.og-tabla td {
    padding: var(--og-sp-3) var(--og-sp-4);
    border-bottom: 1px solid var(--og-borde);
    vertical-align: middle;
}

.og-tabla tbody tr:hover {
    background: var(--og-superficie-2);
}

.og-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.og-tabla__principal {
    display: inline-block;
    font-weight: 650;
    color: var(--og-tinta);
    line-height: 1.3;
}

a.og-tabla__principal:hover {
    color: var(--og-verde);
    text-decoration: none;
}

.og-tabla__secundario {
    display: block;
    margin-top: 1px;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

/* Plata y cantidades: alineadas a la derecha y con cifras de ancho fijo, para
   poder leer la columna de un vistazo. */
.og-tabla__numero {
    text-align: right;
    font-family: var(--og-tipo-numero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

th.og-tabla__numero {
    text-align: right;
}

/* ── En el teléfono cada fila es una ficha ─────────────────────────
   Una tabla de seis columnas no se lee aunque scrollee. */
@media (max-width: 760px) {
    .og-tabla--apilable thead {
        display: none;
    }

    .og-tabla--apilable tr {
        display: block;
        padding: var(--og-sp-3) var(--og-sp-4);
        border: 1px solid var(--og-borde);
        border-radius: var(--og-r-md);
        background: var(--og-superficie);
    }

    .og-tabla--apilable tr + tr {
        margin-top: var(--og-sp-3);
    }

    .og-tabla--apilable td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--og-sp-4);
        padding: var(--og-sp-2) 0;
        border-bottom: 1px dotted var(--og-borde);
        text-align: right;
    }

    .og-tabla--apilable td:last-child {
        border-bottom: 0;
        justify-content: flex-end;
    }

    .og-tabla--apilable td::before {
        content: attr(data-titulo);
        flex-shrink: 0;
        font-size: var(--og-t-rotulo);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--og-tinta-tenue);
        text-align: left;
    }

    /* La primera celda es el nombre: ocupa la fila entera, sin rótulo. */
    .og-tabla--apilable td:first-child {
        display: block;
        text-align: left;
        padding-top: 0;
    }

    .og-tabla--apilable td:first-child::before {
        content: none;
    }

    .og-tabla__numero {
        text-align: right;
    }
}

/* ══ Acciones de fila ═════════════════════════════════════════════
   Una a la vista, el resto en un menú. En una celda dos botones con texto no
   entran: envuelven y parten la etiqueta en dos renglones. */
.og-acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--og-sp-2);
}

.og-acciones__menu {
    position: relative;
}

.og-acciones__abrir {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    line-height: 1;
}

.og-acciones__abrir::-webkit-details-marker {
    display: none;
}

.og-acciones__abrir:hover {
    background: var(--og-superficie-2);
}

.og-acciones__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 200px;
    padding: var(--og-sp-1);
    background: var(--og-superficie);
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-md);
    box-shadow: var(--og-sombra-3);
}

.og-accion {
    display: block;
    width: 100%;
    padding: var(--og-sp-2) var(--og-sp-3);
    border: 0;
    border-radius: var(--og-r-sm);
    background: transparent;
    color: var(--og-tinta);
    font-size: var(--og-t-body);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.og-accion:hover {
    background: var(--og-superficie-2);
    text-decoration: none;
}

.og-accion--riesgo {
    color: var(--og-riesgo);
}

.og-accion.es-inhabilitada {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ══ Formularios ══════════════════════════════════════════════════ */
.og-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.og-campo__label {
    font-size: var(--og-t-body-sm);
    font-weight: 650;
    color: var(--og-tinta-suave);
}

.og-campo__ayuda {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-campo__error {
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    color: var(--og-riesgo);
}

/* Debajo del campo: la ayuda a la izquierda y la cuenta de caracteres a la
   derecha (`data-contador`, ongs.js › iniciarContadores). */
.og-campo__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--og-sp-3);
}

.og-campo__contador {
    flex-shrink: 0;
    font-size: var(--og-t-body-sm);
    font-variant-numeric: tabular-nums;
    color: var(--og-tinta-tenue);
}

/* Cerca del máximo: más oscuro y en negrita, sin cambiar de color para no
   depender de un tono que no contraste en los dos temas. */
.og-campo__contador.es-cerca {
    font-weight: 700;
    color: var(--og-tinta);
}

.og-input,
.og-select,
.og-textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    color: var(--og-tinta);
    font-size: var(--og-t-body);
}

.og-textarea {
    min-height: 96px;
    resize: vertical;
}

/* Para un texto de una o dos líneas, como una descripción corta. */
.og-textarea--corta {
    min-height: 64px;
}

.og-input:focus,
.og-select:focus,
.og-textarea:focus {
    border-color: var(--og-verde);
    outline: 2px solid var(--og-verde-suave);
    outline-offset: 0;
}

.og-input[aria-invalid="true"],
.og-select[aria-invalid="true"],
.og-textarea[aria-invalid="true"] {
    border-color: var(--og-riesgo);
}

.og-select {
    appearance: none;
    padding-right: 1.9rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.og-select--chico {
    padding: 0.3rem 1.7rem 0.3rem 0.55rem;
    font-size: var(--og-t-body-sm);
    font-weight: 650;
}

/* Casilla y su etiqueta en una línea. */
.og-check {
    display: flex;
    align-items: flex-start;
    gap: var(--og-sp-2);
    font-size: var(--og-t-body);
}

.og-check input {
    margin-top: 3px;
    accent-color: var(--og-verde);
}

/* ══ Filtros ══════════════════════════════════════════════════════ */
.og-filtros {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
    padding: var(--og-sp-4) var(--og-sp-5);
    border-bottom: 1px solid var(--og-borde);
    background: var(--og-superficie-2);
}

.og-filtros__barra {
    display: flex;
    align-items: flex-end;
    gap: var(--og-sp-3);
}

.og-filtros__buscador {
    flex: 1 1 320px;
    min-width: 0;
}

.og-filtros__panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--og-sp-3);
}

.og-filtros__panel:empty {
    display: none;
}

.og-filtros__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-sp-3);
    flex-wrap: wrap;
}

.og-filtros__aplicados {
    display: flex;
    align-items: center;
    gap: var(--og-sp-2);
    flex-wrap: wrap;
}

.og-filtros__rotulo {
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

.og-aplicado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--og-r-sm);
    background: var(--og-verde-suave);
    color: var(--og-verde-hondo);
    font-size: var(--og-t-body-sm);
    font-weight: 600;
}

.og-aplicado:hover {
    text-decoration: none;
    background: var(--og-borde);
}

.og-aplicado__campo {
    opacity: 0.75;
}

.og-aplicado__quitar {
    width: 13px;
    height: 13px;
}

.og-filtros__acciones {
    display: flex;
    gap: var(--og-sp-2);
    margin-left: auto;
}

/* ══ Pestañas ═════════════════════════════════════════════════════ */
.og-pestanas {
    display: flex;
    gap: var(--og-sp-1);
    border-bottom: 1px solid var(--og-borde);
    overflow-x: auto;
}

.og-pestana {
    display: inline-flex;
    align-items: center;
    gap: var(--og-sp-2);
    padding: var(--og-sp-3) var(--og-sp-4);
    border-bottom: 2px solid transparent;
    color: var(--og-tinta-tenue);
    font-weight: 600;
    white-space: nowrap;
}

.og-pestana:hover {
    color: var(--og-tinta);
    text-decoration: none;
}

.og-pestana.es-actual {
    border-bottom-color: var(--og-verde);
    color: var(--og-tinta);
}

.og-pestana__cuenta {
    padding: 0 6px;
    border-radius: var(--og-r-sm);
    background: var(--og-superficie-2);
    border: 1px solid var(--og-borde);
    font-size: var(--og-t-body-sm);
    font-weight: 700;
}

.og-pestana.es-actual .og-pestana__cuenta {
    background: var(--og-verde-suave);
    border-color: transparent;
    color: var(--og-verde-hondo);
}

.og-pestana:focus-visible {
    outline: 2px solid var(--og-verde);
    outline-offset: -2px;
    border-radius: var(--og-r-sm);
}

/* Una bandeja partida por estado (Envíos): las pestañas van arriba de la
   tarjeta, con la cuenta de cada una, como las de Cannis Health. */
.og-pestanas--bandeja {
    margin-bottom: var(--og-sp-4);
}

.og-pestanas--bandeja .og-pestana {
    font-size: var(--og-t-body);
}

/* La cuenta de lo que espera acción se pinta aunque la pestaña no esté
   elegida: es lo que tiene que saltar a la vista desde cualquier otra. */
.og-pestana__cuenta--alerta,
.og-pestana.es-actual .og-pestana__cuenta--alerta {
    background: var(--og-alerta-suave);
    border-color: transparent;
    color: var(--og-sobre-alerta);
}

/* ══ Avisos ═══════════════════════════════════════════════════════ */
.og-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--og-sp-3);
    padding: var(--og-sp-4);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    background: var(--og-superficie);
}

.og-aviso--exito  { background: var(--og-ok-suave);     border-color: transparent; color: var(--og-sobre-ok); }
.og-aviso--alerta { background: var(--og-alerta-suave); border-color: transparent; color: var(--og-sobre-alerta); }
.og-aviso--error  { background: var(--og-riesgo-suave); border-color: transparent; color: var(--og-sobre-riesgo); }
.og-aviso--info   { background: var(--og-info-suave);   border-color: transparent; color: var(--og-sobre-info); }

.og-aviso__icono {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.og-aviso__titulo {
    font-weight: 700;
}

/* Con botones: el texto ocupa lo que sobra y los botones se paran a la
   derecha, centrados en alto. Adentro del bloque de texto se alineaban al
   borde de la línea más larga y quedaban flotando en el medio del aviso. */
.og-aviso__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.og-aviso__acciones {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-self: center;
    gap: var(--og-sp-2);
}

@media (max-width: 640px) {
    .og-aviso:has(.og-aviso__acciones) {
        flex-wrap: wrap;
    }

    /* En el teléfono bajan a su renglón, alineados con el texto. */
    .og-aviso__acciones {
        width: 100%;
        padding-left: calc(20px + var(--og-sp-3));
    }
}

/* Destino de un enlace con #ancla: que la barra de arriba, que es sticky,
   no le tape el título. */
.og-ancla {
    scroll-margin-top: calc(var(--og-alto-topbar) + var(--og-sp-4));
}

/* Desde 720px la barra de arriba parte en dos renglones (layout.css). */
@media (max-width: 720px) {
    .og-ancla {
        scroll-margin-top: calc(var(--og-alto-topbar) * 2 + var(--og-sp-4));
    }
}

/* ══ Vacío ════════════════════════════════════════════════════════ */
.og-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--og-sp-2);
    padding: var(--og-sp-7) var(--og-sp-5);
    text-align: center;
    color: var(--og-tinta-tenue);
}

.og-vacio__icono {
    width: 40px;
    height: 40px;
    opacity: 0.4;
}

.og-vacio__titulo {
    font-family: var(--og-tipo-display);
    font-size: var(--og-t-h3);
    font-weight: 700;
    color: var(--og-tinta);
}

/* ══ Paginación ═══════════════════════════════════════════════════ */
.og-paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-sp-3);
    padding: var(--og-sp-3) var(--og-sp-5);
    border-top: 1px solid var(--og-borde);
    background: var(--og-superficie-2);
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
    flex-wrap: wrap;
}

.og-paginacion__paginas {
    display: flex;
    align-items: center;
    gap: var(--og-sp-1);
}

.og-paginacion__pagina {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    color: var(--og-tinta-suave);
    font-weight: 600;
}

.og-paginacion__pagina:hover {
    border-color: var(--og-tinta-tenue);
    text-decoration: none;
}

.og-paginacion__pagina.es-actual {
    background: var(--og-verde);
    border-color: var(--og-verde);
    color: var(--og-sobre-verde);
}

.og-paginacion__pagina.es-inhabilitada {
    opacity: 0.4;
    pointer-events: none;
}

/* ══ Modal ════════════════════════════════════════════════════════ */
.og-modal {
    width: min(560px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-lg);
    background: var(--og-superficie);
    color: var(--og-tinta);
    box-shadow: var(--og-sombra-3);
}

.og-modal::backdrop {
    background: rgba(9, 20, 15, 0.55);
}

.og-modal__cabecera {
    padding: var(--og-sp-4) var(--og-sp-5);
    border-bottom: 1px solid var(--og-borde);
}

.og-modal__titulo {
    font-size: var(--og-t-h3);
}

.og-modal__cuerpo {
    padding: var(--og-sp-5);
    max-height: 70vh;
    overflow-y: auto;
}

.og-modal__pie {
    display: flex;
    justify-content: flex-end;
    gap: var(--og-sp-2);
    padding: var(--og-sp-3) var(--og-sp-5);
    border-top: 1px solid var(--og-borde);
    background: var(--og-superficie-2);
}

/* ══ Botón de tema ════════════════════════════════════════════════
   Los dos iconos viven en el botón y se muestra el del tema AL QUE SE VA:
   así el botón dice qué hace y no en cuál estás. */
.og-tema__claro { display: none; }
.og-tema__oscuro { display: inline-flex; }

:root[data-tema="oscuro"] .og-tema__claro { display: inline-flex; }
:root[data-tema="oscuro"] .og-tema__oscuro { display: none; }

/* ── El rango de fechas de los filtros ─────────────────────────────
   Dos <input type="date"> y una flecha no entran en una columna de 180px:
   el segundo quedaba cortado contra el borde de la tarjeta. Ocupa dos. */
.og-filtros__rango {
    grid-column: span 2;
}

.og-rango {
    display: flex;
    align-items: center;
    gap: var(--og-sp-2);
    min-width: 0;
}

.og-rango .og-input {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .og-filtros__rango {
        grid-column: 1 / -1;
    }
}

/* ── Lista de chequeo ──────────────────────────────────────────────
   Los requisitos de algo, con cuáles están cumplidos. Se usa antes de una
   acción que puede fallar por varias razones a la vez: decir las cinco de
   una es mejor que ir descubriéndolas de a una. */
.og-lista-chequeo {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-lista-chequeo__item {
    display: flex;
    align-items: flex-start;
    gap: var(--og-sp-2);
    font-size: var(--og-t-body);
}

.og-lista-chequeo__icono {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 2px;
}

.og-lista-chequeo__item.es-ok    { color: var(--og-tinta-suave); }
.og-lista-chequeo__item.es-ok .og-lista-chequeo__icono { color: var(--og-ok); }

.og-lista-chequeo__item.es-falta { color: var(--og-tinta); font-weight: 600; }
.og-lista-chequeo__item.es-falta .og-lista-chequeo__icono { color: var(--og-alerta); }

/* ══ Requisitos de la cuenta (partials/requisitos-cuenta) ═══════════
   El aviso de lo que falta para crearle la cuenta a alguien: cada falta con
   su texto y, para el contacto, el campo para corregirla ahí mismo.
   Adentro del aviso la tinta es la del aviso (`--og-sobre-alerta`): los
   grises del formulario no contrastan sobre su fondo. */
.og-requisitos--bajo-lista {
    margin-top: var(--og-sp-4);
}

.og-requisitos__ayuda {
    margin-top: var(--og-sp-1);
}

.og-requisitos__faltas {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
    margin: var(--og-sp-2) 0 0;
    padding-left: 1.2em;
}

.og-requisitos__faltas .og-requisitos__ayuda {
    display: block;
}

.og-requisitos__form {
    margin-top: var(--og-sp-4);
}

.og-requisitos__campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--og-sp-3);
}

.og-requisitos__campo {
    flex: 1 1 220px;
    max-width: 360px;
}

.og-requisitos__boton {
    flex: 0 0 auto;
}

.og-requisitos .og-campo__label,
.og-requisitos .og-campo__ayuda,
.og-requisitos .og-campo__error {
    color: inherit;
}

.og-requisitos .og-campo__error {
    font-weight: 700;
}

.og-requisitos__repetido {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
    margin-top: var(--og-sp-3);
}

/* La salida que no es corregir, separada del campo por un filete. */
.og-requisitos__alternativa {
    margin-top: var(--og-sp-4);
    padding-top: var(--og-sp-3);
    border-top: 1px solid var(--og-borde-fuerte);
}

.og-requisitos__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--og-sp-2);
    margin-top: var(--og-sp-3);
}

/* ══ Campo de archivo (partials/archivo) ═══════════════════════════
   Una zona para arrastrar o elegir, en vez del <input type="file"> pelado.
   El input nativo la cubre entera con opacidad 0: es él el que recibe el
   clic, el foco y el archivo que se suelta, así que sin JS anda igual. */
.og-archivo {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
}

.og-archivo__zona {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 196px;
    padding: var(--og-sp-5) var(--og-sp-4);
    border: 1.5px dashed var(--og-borde-fuerte);
    border-radius: var(--og-r-md);
    background: var(--og-superficie-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.og-archivo__zona:hover,
.og-archivo.es-arrastrando .og-archivo__zona {
    border-color: var(--og-verde);
    background: var(--og-verde-suave);
}

.og-archivo.es-arrastrando .og-archivo__zona {
    border-style: solid;
}

.og-archivo__zona:focus-within {
    outline: 2px solid var(--og-verde);
    outline-offset: 2px;
}

.og-archivo.es-invalido .og-archivo__zona {
    border-color: var(--og-riesgo);
}

.og-archivo__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.og-archivo__burbuja {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--og-sp-1);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-pill);
    background: var(--og-superficie);
    color: var(--og-verde);
    box-shadow: var(--og-sombra-1);
}

.og-archivo__icono {
    width: 22px;
    height: 22px;
}

.og-archivo__titulo {
    font-family: var(--og-tipo-display);
    font-size: var(--og-t-h3);
    font-weight: 700;
    color: var(--og-tinta);
}

.og-archivo__texto {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
}

.og-archivo__elegir {
    color: var(--og-verde);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.og-archivo__ayuda {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-archivo__elegido {
    display: flex;
    align-items: center;
    gap: var(--og-sp-3);
    padding: var(--og-sp-2) var(--og-sp-2) var(--og-sp-2) var(--og-sp-3);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    background: var(--og-superficie);
}

.og-archivo__elegido[hidden] {
    display: none;
}

.og-archivo__tipo {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--og-verde);
}

.og-archivo__datos {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.og-archivo__nombre {
    overflow: hidden;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.og-archivo__peso {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-archivo__sin-guardar {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--og-r-sm);
    background: var(--og-alerta-suave);
    color: var(--og-sobre-alerta);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Varios archivos (la galería del alta de un dispensable). El dato es
   cuántas se eligieron, y en la columna angosta del editor la fila de un
   solo renglón le dejaba unos 55 px: se leía «2 imág…». La cuenta va sola en
   el primer renglón, y el estado y «Quitar» debajo, alineados con el texto. */
.og-archivo__elegido--varios {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "tipo datos  datos"
        ".    estado quitar";
    row-gap: var(--og-sp-2);
}

.og-archivo__elegido--varios .og-archivo__tipo {
    grid-area: tipo;
}

.og-archivo__elegido--varios .og-archivo__datos {
    grid-area: datos;
}

.og-archivo__elegido--varios .og-archivo__sin-guardar {
    grid-area: estado;
    justify-self: start;
}

.og-archivo__elegido--varios [data-archivo-quitar] {
    grid-area: quitar;
}

/* ══ Visor de documentos (partials/visor) ══════════════════════════ */
.og-visor {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    background: var(--og-superficie);
}

.og-visor__marco {
    position: relative;
    height: clamp(380px, 62vh, 680px);
    background: var(--og-superficie-2);
}

.og-visor__pdf,
.og-visor__imagen {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.og-visor__imagen {
    object-fit: contain;
}

.og-visor__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--og-sp-2);
    height: 100%;
    padding: var(--og-sp-5);
    color: var(--og-tinta-tenue);
    text-align: center;
}

.og-visor__icono {
    width: 44px;
    height: 44px;
    opacity: 0.7;
}

/* Lo elegido y todavía sin guardar se marca sobre el propio documento. */
.og-visor.es-previa .og-visor__marco::after {
    content: 'Vista previa · sin guardar';
    position: absolute;
    top: var(--og-sp-3);
    left: var(--og-sp-3);
    z-index: 1;
    padding: 3px 9px;
    border-radius: var(--og-r-sm);
    background: var(--og-alerta-suave);
    color: var(--og-sobre-alerta);
    box-shadow: var(--og-sombra-2);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.og-visor__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-sp-3);
    padding: var(--og-sp-3) var(--og-sp-4);
    border-top: 1px solid var(--og-borde);
}

.og-visor__datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.og-visor__nombre {
    font-weight: 650;
}

.og-visor__detalle {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-visor__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--og-sp-2);
}

/* El documento y su carga, lado a lado; en el teléfono, uno abajo del otro. */
.og-documento {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    align-items: start;
    gap: var(--og-sp-5);
}

.og-documento__carga {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
}

.og-documento__nota {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-ficha-carnet {
    margin-top: var(--og-sp-5);
}

@media (max-width: 900px) {
    .og-documento {
        grid-template-columns: minmax(0, 1fr);
    }

    .og-visor__marco {
        height: 420px;
    }
}

/* ══ Campos con prefijo o sufijo: «$ 1.200», «18 %», «30 g» ═══════════ */
.og-afijo {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.og-afijo__signo {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    min-width: 2.25rem;
    padding: 0 0.6rem;
    border: 1px solid var(--og-borde-fuerte);
    border-right: 0;
    border-radius: var(--og-r-sm) 0 0 var(--og-r-sm);
    background: var(--og-superficie-2);
    color: var(--og-tinta-tenue);
    font-size: var(--og-t-body-sm);
    font-weight: 700;
    white-space: nowrap;
}

.og-afijo__signo--fin {
    order: 2;
    border-right: 1px solid var(--og-borde-fuerte);
    border-left: 0;
    border-radius: 0 var(--og-r-sm) var(--og-r-sm) 0;
}

.og-afijo__input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 var(--og-r-sm) var(--og-r-sm) 0;
}

/* Con sólo sufijo, el input redondea a la izquierda. */
.og-afijo__input:first-child {
    border-radius: var(--og-r-sm) 0 0 var(--og-r-sm);
}

.og-afijo__input:first-child:last-child {
    border-radius: var(--og-r-sm);
}

.og-afijo__input--plata {
    font-family: var(--og-tipo-numero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.og-afijo:focus-within .og-afijo__signo {
    border-color: var(--og-verde);
    color: var(--og-verde);
}

.og-input--grande {
    padding: 0.65rem 0.8rem;
    font-family: var(--og-tipo-display);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Un dato que se muestra en el formulario pero no se edita desde acá. */
.og-fijo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.7rem;
    border: 1px dashed var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie-2);
}

.og-fijo__valor {
    font-weight: 700;
}

.og-fijo__detalle {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

/* ══ Interruptor: una casilla con forma de switch ═══════════════════
   Es un <input type="checkbox" role="switch"> de verdad, invisible y encima
   de su pista: el foco, el clic y el lector de pantalla son los nativos. */
.og-interruptor {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--og-sp-3);
    cursor: pointer;
}

.og-interruptor__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.og-interruptor__pista {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 24px;
    border-radius: var(--og-r-pill);
    background: var(--og-borde-fuerte);
    transition: background-color 0.15s ease;
}

.og-interruptor__pista::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--og-superficie);
    box-shadow: var(--og-sombra-1);
    transition: transform 0.15s ease;
}

.og-interruptor__input:checked + .og-interruptor__pista {
    background: var(--og-verde);
}

.og-interruptor__input:checked + .og-interruptor__pista::after {
    transform: translateX(16px);
}

.og-interruptor__input:focus-visible + .og-interruptor__pista {
    outline: 2px solid var(--og-verde);
    outline-offset: 2px;
}

.og-interruptor__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.og-interruptor__texto span {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-interruptor--chico .og-interruptor__texto {
    padding-top: 3px;
    font-size: var(--og-t-body-sm);
}

@media (prefers-reduced-motion: reduce) {
    .og-interruptor__pista,
    .og-interruptor__pista::after {
        transition: none;
    }
}

/* ══ Opciones: radios como tarjetas elegibles (el quimiotipo) ═══════ */
.og-campo--grupo {
    margin: 0;
    padding: 0;
    border: 0;
}

.og-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--og-sp-2);
    margin-top: var(--og-sp-2);
}

.og-opcion {
    position: relative;
    cursor: pointer;
}

.og-opcion__input {
    position: absolute;
    opacity: 0;
}

.og-opcion__caja {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: var(--og-sp-2) var(--og-sp-3);
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.og-opcion:hover .og-opcion__caja {
    border-color: var(--og-verde);
}

.og-opcion__input:checked + .og-opcion__caja {
    border-color: var(--og-verde);
    background: var(--og-verde-suave);
    box-shadow: inset 0 0 0 1px var(--og-verde);
}

.og-opcion__input:focus-visible + .og-opcion__caja {
    outline: 2px solid var(--og-verde);
    outline-offset: 2px;
}

.og-opcion__titulo {
    overflow: hidden;
    font-family: var(--og-tipo-display);
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.og-opcion__input:checked + .og-opcion__caja .og-opcion__titulo {
    color: var(--og-verde-hondo);
}

.og-opcion__texto {
    font-size: var(--og-t-body-sm);
    line-height: 1.3;
    color: var(--og-tinta-tenue);
}

/* ══ Sección de un editor: la tarjeta con su ícono ════════════════════ */
.og-seccion > .og-tarjeta__cabecera {
    justify-content: flex-start;
    gap: var(--og-sp-3);
}

.og-seccion__icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--og-r-md);
    background: var(--og-verde-suave);
    color: var(--og-verde-hondo);
}

.og-seccion__icono--ocre {
    background: var(--og-ocre-suave);
    color: var(--og-ocre);
}

.og-seccion__svg {
    width: 19px;
    height: 19px;
}

/* «se cobra»: cuál de los dos precios cobra la organización. */
.og-marca-cobro {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: var(--og-r-sm);
    background: var(--og-ocre-suave);
    color: var(--og-ocre);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.og-aviso--compacto {
    padding: var(--og-sp-3);
}

.og-aviso--compacto + .og-aviso--compacto {
    margin-top: var(--og-sp-2);
}

/* === css/ongs/graficos.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — gráficos

   SVG inline, sin librería: el portal no carga Chart.js ni D3 para dibujar
   doce barras. Todo el color sale de tokens propios de esta hoja.

   ── La paleta de series ────────────────────────────────────────────
   No es la paleta de la interfaz. Un gráfico pintado con el verde de los
   botones se lee como un botón, y además el verde de marca solo no alcanza:
   hacen falta cinco hues que se distingan ENTRE SÍ, también para quien tiene
   daltonismo.

   Los cinco pasos —y su orden— están validados con el validador de paletas
   (OKLab ΔE sobre simulación protan/deutan/tritan). Resultado, sobre la
   tarjeta de cada tema (#F1F3F0 en claro, #151819 en oscuro):

     · banda de luminosidad .... PASA en los dos temas
     · piso de croma ........... PASA (ninguno "se lee gris")
     · separación CVD .......... peor par adyacente ΔE 14.1 (claro) / 14.9 (oscuro)
     · piso de visión normal ... peor par ΔE 17.1 / 18.4
     · contraste vs. fondo ..... los 5 ≥ 3:1

   En PD-48 la tarjeta clara dejó de ser blanca y el teal y el ocre quedaban
   apenas por debajo de 3:1: los dos bajaron un escalón de luz (#C2751A →
   #B86D14, #00A0B0 → #008E9A). Se volvió a medir: los mínimos de ΔE entre
   adyacentes no cambiaron (17,1 normal, 14,1 deutan).

   ⚠️ El ORDEN importa tanto como los valores: las series se asignan por
   posición fija, nunca en ciclo, y la validación se hizo sobre pares
   adyacentes en este orden exacto. Si agregás o movés un paso, hay que
   volver a correr el validador. Y si una sexta serie no entra: se agrupa en
   "Otros", no se inventa un color.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --og-serie-1: #1668A8;   /* azul */
    --og-serie-2: #1F7A4C;   /* verde */
    --og-serie-3: #8A3FA0;   /* ciruela */
    --og-serie-4: #B86D14;   /* ocre */
    --og-serie-5: #008E9A;   /* teal */

    /* La grilla y los ejes son recesivos: están para leer una altura, no
       para verse. */
    --og-grafico-grilla: rgba(18, 41, 31, 0.08);
    --og-grafico-eje:    rgba(18, 41, 31, 0.28);
}

/* Los pasos del tema oscuro NO son los claros aclarados automáticamente:
   son otros cinco, elegidos y validados contra el fondo oscuro. */
:root[data-tema="oscuro"] {
    --og-serie-1: #4A8FD0;
    --og-serie-2: #2F9B62;
    --og-serie-3: #A867C6;
    --og-serie-4: #BC8134;
    --og-serie-5: #0C97A6;

    --og-grafico-grilla: rgba(233, 241, 235, 0.09);
    --og-grafico-eje:    rgba(233, 241, 235, 0.3);
}

/* ══ Marco ════════════════════════════════════════════════════════ */
.og-grafico {
    position: relative;
}

/* El alto es FIJO y el ancho manda.
   Con `height: auto` el SVG conserva la proporción del viewBox: en una
   tarjeta de 700px de ancho el gráfico salía de 1.190px de alto y ocupaba la
   pantalla entera. Como preserveAspectRatio="none" estira el dibujo, el alto
   se fija acá y las barras se reparten el ancho que haya. */
.og-grafico__lienzo {
    display: block;
    width: 100%;
    height: var(--og-grafico-alto, 190px);
    overflow: visible;
}

.og-grafico__grilla line {
    stroke: var(--og-grafico-grilla);
    stroke-width: 1;
}

.og-grafico__eje {
    stroke: var(--og-grafico-eje);
    stroke-width: 1;
}

/* Las etiquetas visten tinta, nunca el color de la serie: el color lo lleva
   la marca que está al lado. */
.og-grafico__etiqueta {
    fill: var(--og-tinta-tenue);
    font-family: var(--og-tipo-texto);
    font-size: 11px;
}

.og-grafico__valor {
    fill: var(--og-tinta);
    font-family: var(--og-tipo-numero);
    font-size: 11px;
    font-weight: 700;
}

/* ══ Barras ═══════════════════════════════════════════════════════
   Delgadas, con la punta redondeada y la base anclada al eje: una barra con
   las cuatro esquinas redondeadas parece flotar y miente sobre el cero. */
.og-barra {
    fill: var(--og-serie-1);
    transition: opacity 0.12s;
}

.og-barra--s2 { fill: var(--og-serie-2); }
.og-barra--s3 { fill: var(--og-serie-3); }
.og-barra--s4 { fill: var(--og-serie-4); }
.og-barra--s5 { fill: var(--og-serie-5); }

/* El mes en curso va calado: todavía no terminó y compararlo con los
   cerrados es comparar peras con manzanas. */
.og-barra--parcial {
    fill: var(--og-superficie);
    stroke: var(--og-serie-1);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
}

/* La zona sensible del hover es toda la columna, no la barra: con barras de
   14px hay que apuntar, y esto se usa con el mouse de un mostrador. */
.og-grafico__zona {
    fill: transparent;
    cursor: pointer;
}

.og-grafico__zona:hover ~ .og-barra,
.og-grafico__columna:hover .og-barra {
    opacity: 0.78;
}

.og-grafico__columna:hover .og-grafico__fondo {
    fill: var(--og-superficie-2);
}

.og-grafico__fondo {
    fill: transparent;
}

/* ══ Barras horizontales (ranking) ════════════════════════════════
   Para "quién dispensó más": el nombre se lee a la izquierda, en horizontal,
   sin girar la cabeza. */
.og-ranking {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
}

.og-ranking__fila {
    display: grid;
    grid-template-columns: minmax(90px, 26%) 1fr auto;
    align-items: center;
    gap: var(--og-sp-3);
}

.og-ranking__nombre {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.og-ranking__pista {
    height: 10px;
    border-radius: var(--og-r-pill);
    background: var(--og-superficie-2);
    border: 1px solid var(--og-borde);
    overflow: hidden;
}

.og-ranking__marca {
    display: block;
    height: 100%;
    border-radius: var(--og-r-pill);
    background: var(--og-serie-1);
}

.og-ranking__fila:nth-child(5n+2) .og-ranking__marca { background: var(--og-serie-2); }
.og-ranking__fila:nth-child(5n+3) .og-ranking__marca { background: var(--og-serie-3); }
.og-ranking__fila:nth-child(5n+4) .og-ranking__marca { background: var(--og-serie-4); }
.og-ranking__fila:nth-child(5n+5) .og-ranking__marca { background: var(--og-serie-5); }

.og-ranking__valor {
    font-family: var(--og-tipo-numero);
    font-size: var(--og-t-body-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ══ Barra de composición ═════════════════════════════════════════
   Un solo renglón partido en tramos. Reemplaza a la torta: mismo dato, se
   compara mejor y entra en el ancho de una tarjeta.
   Entre tramo y tramo va un corte de 2px del color de la superficie, para
   que dos tramos vecinos no se lean como uno. */
.og-composicion {
    display: flex;
    height: 14px;
    border-radius: var(--og-r-pill);
    overflow: hidden;
    background: var(--og-superficie-2);
    border: 1px solid var(--og-borde);
}

.og-composicion__tramo {
    height: 100%;
    background: var(--og-serie-1);
    box-shadow: inset -2px 0 0 var(--og-superficie);
}

.og-composicion__tramo:last-child {
    box-shadow: none;
}

.og-composicion__tramo--s2 { background: var(--og-serie-2); }
.og-composicion__tramo--s3 { background: var(--og-serie-3); }
.og-composicion__tramo--s4 { background: var(--og-serie-4); }
.og-composicion__tramo--s5 { background: var(--og-serie-5); }

/* ══ Referencias ══════════════════════════════════════════════════
   Con dos series o más la referencia va SIEMPRE: la identidad no puede
   depender sólo del color. */
.og-referencias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--og-sp-2) var(--og-sp-4);
    margin-top: var(--og-sp-3);
}

.og-referencia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
}

.og-referencia__marca {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--og-serie-1);
    flex-shrink: 0;
}

.og-referencia--s2 .og-referencia__marca { background: var(--og-serie-2); }
.og-referencia--s3 .og-referencia__marca { background: var(--og-serie-3); }
.og-referencia--s4 .og-referencia__marca { background: var(--og-serie-4); }
.og-referencia--s5 .og-referencia__marca { background: var(--og-serie-5); }

.og-referencia__valor {
    font-family: var(--og-tipo-numero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--og-tinta);
}

/* ══ Globo de datos ═══════════════════════════════════════════════
   Un gráfico en HTML es interactivo: cada marca dice su valor al pasar por
   encima. Sin JS no se pierde nada, porque abajo está la tabla. */
.og-globo {
    position: absolute;
    z-index: 10;
    padding: var(--og-sp-2) var(--og-sp-3);
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    box-shadow: var(--og-sombra-2);
    font-size: var(--og-t-body-sm);
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity 0.1s;
}

.og-globo.es-visible {
    opacity: 1;
}

.og-globo__titulo {
    font-weight: 700;
}

.og-globo__valor {
    font-family: var(--og-tipo-numero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ══ La tabla del gráfico ═════════════════════════════════════════
   Todo gráfico tiene su tabla detrás de un <details>: es la versión
   accesible y la que se copia a una rendición. */
.og-grafico__datos {
    margin-top: var(--og-sp-3);
    font-size: var(--og-t-body-sm);
}

.og-grafico__datos summary {
    cursor: pointer;
    color: var(--og-tinta-tenue);
    font-weight: 600;
}

.og-grafico__datos summary:hover {
    color: var(--og-verde);
}

.og-grafico__datos table {
    width: 100%;
    margin-top: var(--og-sp-2);
    border-collapse: collapse;
}

.og-grafico__datos th,
.og-grafico__datos td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--og-borde);
    text-align: left;
}

.og-grafico__datos td:last-child,
.og-grafico__datos th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ══ La nota al pie del gráfico ═══════════════════════════════════
   Lo que el gráfico NO muestra y hay que decir igual: un total que quedó
   afuera del reparto, un período incompleto. Va debajo, chica y tenue: es
   una aclaración, no un dato más. */
.og-grafico__nota {
    margin: var(--og-sp-3) 0 0;
    color: var(--og-tinta-tenue);
    font-size: var(--og-t-body-sm);
    line-height: 1.5;
}

/* ══ Sin datos ════════════════════════════════════════════════════ */
.og-grafico__vacio {
    display: grid;
    place-items: center;
    min-height: 140px;
    border: 1px dashed var(--og-borde-fuerte);
    border-radius: var(--og-r-md);
    color: var(--og-tinta-tenue);
    font-size: var(--og-t-body-sm);
    text-align: center;
    padding: var(--og-sp-4);
}

/* ══ Sin color: impresión y forced-colors ═════════════════════════
   En blanco y negro cinco rellenos sólidos son cinco grises. Cada serie se
   distingue además por una trama. */
@media print, (forced-colors: active) {
    .og-barra--s2, .og-composicion__tramo--s2 { fill: #555; background: #555; }
    .og-barra--s3, .og-composicion__tramo--s3 { fill: #888; background: #888; }
    .og-barra--s4, .og-composicion__tramo--s4 { fill: #aaa; background: #aaa; }
    .og-barra--s5, .og-composicion__tramo--s5 { fill: #ccc; background: #ccc; }
}

/* ══ Vencimientos ═════════════════════════════════════════════════
   Un ranking de tramos que además son enlaces: cada fila entra al listado
   filtrado por ese tramo. El color dice urgencia y no identidad, así que NO
   sale de la paleta de series sino de los estados. */
.og-vence {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
}

.og-vence__fila {
    display: grid;
    grid-template-columns: minmax(92px, 32%) 1fr auto;
    align-items: center;
    gap: var(--og-sp-3);
    padding: var(--og-sp-2);
    margin: calc(var(--og-sp-2) * -1);
    border-radius: var(--og-r-sm);
    color: var(--og-tinta-suave);
}

.og-vence__fila:hover {
    background: var(--og-superficie-2);
    text-decoration: none;
}

.og-vence__fila.es-actual {
    background: var(--og-verde-suave);
    color: var(--og-verde-hondo);
    font-weight: 650;
}

.og-vence__nombre {
    font-size: var(--og-t-body-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.og-vence__pista {
    height: 10px;
    border-radius: var(--og-r-pill);
    background: var(--og-superficie-2);
    border: 1px solid var(--og-borde);
    overflow: hidden;
}

.og-vence__marca {
    display: block;
    height: 100%;
    border-radius: var(--og-r-pill);
    background: var(--og-tinta-tenue);
}

.og-vence--riesgo .og-vence__marca { background: var(--og-riesgo); }
.og-vence--alerta .og-vence__marca { background: var(--og-alerta); }
.og-vence--aviso  .og-vence__marca { background: var(--og-ocre); }

.og-vence__valor {
    font-family: var(--og-tipo-numero);
    font-size: var(--og-t-dato);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--og-tinta);
}

.og-vence__pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--og-sp-2);
    margin-top: var(--og-sp-4);
}

/* === css/ongs/layout.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — layout

   El armazón: barra lateral + columna de trabajo.

   La barra es oscura en los DOS temas y el contenido es claro por defecto.
   Esa es la firma del portal: una banda de color fija a la izquierda, con la
   identidad de la organización arriba, y el trabajo sobre papel al lado.
   ═══════════════════════════════════════════════════════════════════ */

.og-portal {
    min-height: 100vh;
}

/* ── Barra lateral ──────────────────────────────────────────────────*/
.og-barra {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--og-ancho-barra);
    background: var(--og-barra);
    color: var(--og-sobre-barra);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── La organización, arriba de todo ────────────────────────────────
   Acá va la ONG y no Cannis: el portal es DE la organización. El logotipo de
   Cannis vive abajo, chico, como quién provee la herramienta. Es la
   diferencia de fondo con Health, donde la marca del producto manda. */
.og-organizacion {
    display: flex;
    align-items: center;
    gap: var(--og-sp-3);
    padding: var(--og-sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.og-organizacion__escudo {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--og-r-md);
    background: var(--og-verde);
    color: var(--og-sobre-verde);
    font-family: var(--og-tipo-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    overflow: hidden;
}

/* Cuando la ONG cargó su logo, la imagen reemplaza a las iniciales. */
.og-organizacion__escudo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.og-organizacion__texto {
    min-width: 0;
}

.og-organizacion__nombre {
    display: block;
    font-family: var(--og-tipo-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--og-sobre-barra);
    /* Dos renglones y corta: los nombres de las asociaciones civiles son
       largos ("Asociación Civil de Cultivadores de ...") y con una sola línea
       quedaba casi todo en puntos suspensivos. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.og-organizacion__rol {
    display: block;
    margin-top: 2px;
    font-size: var(--og-t-body-sm);
    color: var(--og-sobre-barra-suave);
}

/* ── Navegación ─────────────────────────────────────────────────────*/
.og-nav {
    flex: 1;
    padding: var(--og-sp-4) var(--og-sp-3);
}

.og-nav__grupo + .og-nav__grupo {
    margin-top: var(--og-sp-5);
}

/* El rótulo del grupo: versalita, tenue, con una línea al costado. Son seis
   grupos y sin separador se leen como una lista larga y plana. */
.og-nav__rotulo {
    display: flex;
    align-items: center;
    gap: var(--og-sp-2);
    padding: 0 var(--og-sp-2);
    margin-bottom: var(--og-sp-2);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--og-sobre-barra-tenue);
}

.og-nav__rotulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.09);
}

.og-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--og-sp-3);
    padding: var(--og-sp-2) var(--og-sp-3);
    border-radius: var(--og-r-sm);
    color: var(--og-sobre-barra-suave);
    font-size: var(--og-t-body);
    font-weight: 500;
    line-height: 1.3;
}

.og-nav__link + .og-nav__link {
    margin-top: 2px;
}

/* El nombre del módulo va en UN renglón: partido en dos, «Solicitudes de
   afiliación» y «Movimientos de Stock» se leían como dos ítems. La barra se
   ensanchó para que entren; el recorte con puntos suspensivos queda como red
   para un nombre largo que se agregue en config. */
.og-nav__texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.og-nav__link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--og-sobre-barra);
    text-decoration: none;
}

/* El actual se marca con una barra a la izquierda y no con un fondo pintado:
   sobre una banda oscura el fondo de color se ve como un botón apretado. */
.og-nav__link.es-actual {
    background: rgba(255, 255, 255, 0.08);
    /* La tinta de la barra y no blanco puro: en el oscuro la barra es cálida
       y el blanco se veía frío al lado de los demás ítems. */
    color: var(--og-sobre-barra);
    font-weight: 650;
}

.og-nav__link.es-actual::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    left: calc(var(--og-sp-3) * -1 + 2px);
    width: 3px;
    border-radius: var(--og-r-pill);
    background: var(--og-verde-claro);
}

.og-nav__icono {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* La flecha del ítem que se abre en otra pestaña (la Caja): chica y en la
   tinta tenue de la barra, para que se note sin competir con el nombre. */
.og-nav__aparte {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--og-sobre-barra-tenue);
}

.og-nav__cuenta {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--og-r-pill);
    background: var(--og-verde);
    color: var(--og-sobre-verde);
    font-size: var(--og-t-body-sm);
    font-weight: 700;
    text-align: center;
}

/* Lo pendiente de migrar: se ve, no se toca, y dice por qué. */
.og-nav__link.es-pendiente {
    opacity: 0.4;
    cursor: default;
}

.og-nav__pronto {
    margin-left: auto;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: var(--og-r-sm);
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── El pie de la barra: quién provee esto ──────────────────────────*/
.og-barra__pie {
    padding: var(--og-sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* «Cannis OS Beta», en texto: el nombre del producto en la tinta suave de la
   barra y «Beta» en la tenue, que es lo accesorio. */
.og-barra__marca {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--og-sobre-barra-suave);
}

.og-barra__beta {
    font-weight: 500;
    color: var(--og-sobre-barra-tenue);
}

.og-barra__marca:hover,
.og-barra__marca:hover .og-barra__beta {
    color: var(--og-sobre-barra);
    text-decoration: none;
}

/* ── Columna de trabajo ─────────────────────────────────────────────*/
.og-columna {
    margin-left: var(--og-ancho-barra);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.og-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--og-sp-4);
    min-height: var(--og-alto-topbar);
    padding: 0 var(--og-sp-5);
    background: var(--og-superficie);
    border-bottom: 1px solid var(--og-borde);
}

.og-topbar__abrir {
    display: none;
    padding: var(--og-sp-2);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    cursor: pointer;
}

.og-topbar__titulo {
    font-family: var(--og-tipo-display);
    font-size: var(--og-t-h2);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.og-topbar__derecha {
    display: flex;
    align-items: center;
    gap: var(--og-sp-3);
    margin-left: auto;
}

.og-main {
    flex: 1;
    padding: var(--og-sp-6) var(--og-sp-5) var(--og-sp-7);
}

.og-contenido {
    max-width: var(--og-ancho-lectura);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-5);
}

/* ── Encabezado de pantalla ─────────────────────────────────────────*/
.og-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--og-sp-4);
    flex-wrap: wrap;
}

.og-titulo {
    font-size: var(--og-t-h1);
}

.og-bajada {
    margin-top: var(--og-sp-1);
    color: var(--og-tinta-tenue);
}

/* Con DOS botones —"ver la web" + "crear"— la fila no entraba en 390px y
   empujaba la página: 433 de ancho en un viewport de 390. Envuelve. */
.og-encabezado__acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--og-sp-2);
}

/* Lo mismo adentro del grupo de acciones: la ficha del paciente lleva cuatro
   botones afuera (editar, REPROCANN, cuenta y credencial) y en una fila sin
   envolver no entran en un teléfono. El menú "⋯" va al final de la fila. */
.og-encabezado__acciones .og-acciones {
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* ── Migas ──────────────────────────────────────────────────────────*/
.og-migas {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-migas a {
    color: var(--og-tinta-tenue);
}

.og-migas a:hover {
    color: var(--og-verde);
}

/* ── Velo de la barra en móvil ──────────────────────────────────────*/
.og-velo {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(9, 20, 15, 0.5);
}

.og-velo.es-visible {
    display: block;
}

/* ═══ Teléfono y tablet ════════════════════════════════════════════*/
@media (max-width: 960px) {
    .og-barra {
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        box-shadow: var(--og-sombra-3);
    }

    .og-barra.es-abierta {
        transform: none;
    }

    .og-columna {
        margin-left: 0;
    }

    .og-topbar__abrir {
        display: grid;
        place-items: center;
    }

    .og-main {
        padding: var(--og-sp-5) var(--og-sp-4) var(--og-sp-6);
    }
}

@media (max-width: 720px) {
    .og-topbar {
        flex-wrap: wrap;
        padding: var(--og-sp-2) var(--og-sp-4);
        row-gap: var(--og-sp-2);
    }

    /* La derecha se lleva su propio renglón: con el selector de organización
       al lado del título, el <select> quedaba en 50px de ancho. */
    .og-topbar__derecha {
        flex: 1 0 100%;
        margin-left: 0;
    }
}

/* ── Dos columnas dentro del contenido ──────────────────────────────
   Lo que hay que mirar todos los días a la izquierda, lo que se consulta de
   vez en cuando a la derecha. Nació en el tablero y vive acá porque lo usan
   varias pantallas: el tablero, Sedes y las que vengan. */
.og-tablero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--og-sp-5);
    align-items: start;
}

.og-tablero__columna {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-5);
    min-width: 0;
}

@media (max-width: 1100px) {
    .og-tablero {
        grid-template-columns: 1fr;
    }
}

/* === css/ongs/vistas/acceso.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis OS — acceso

   La pantalla de ingreso es la primera impresión del producto, así que es
   donde más lejos se para de Cannis Health: ahí el acceso es una foto a
   sangre con un velo; acá es una banda de marca hecha sólo con luz
   —gradientes, una trama y dos anillos— y una hoja elevada con el
   formulario. Sin fotos: la pantalla carga igual desde el mostrador con la
   conexión del local.

   PD-48 (vuelta 3): más cuidada —la banda tiene profundidad, la hoja flota—
   y en el teléfono la banda ya no se esconde: se vuelve una cabecera corta
   y la hoja se monta encima.

   PD-48 (vuelta 4): negro y dorado, como el isotipo de Cannis OS, que
   reemplaza al «OS» de texto en la firma. La banda es igual en los dos
   temas; del lado del formulario el papel y la hoja siguen al tema y el
   dorado se vuelve bronce sobre claro, que es como se lee.
   ═══════════════════════════════════════════════════════════════════ */

.og-acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--og-acceso-papel);
}

/* ── El lado de la marca ────────────────────────────────────────────*/
.og-acceso__marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--og-sp-6);
    padding: var(--og-sp-7) clamp(var(--og-sp-6), 4vw, 64px);
    color: var(--og-acceso-tinta);
    overflow: hidden;
    isolation: isolate;
    /* De arriba hacia abajo: dos anillos finos centrados en la esquina de
       abajo —las órbitas del isotipo—, la luz de oro arriba, la de ámbar
       abajo y el negro tibio que baja a casi negro. */
    background:
        radial-gradient(circle at 100% 100%,
            transparent 0 279px, var(--og-acceso-anillo) 280px 281px,
            transparent 282px 339px, var(--og-acceso-anillo) 340px 341px,
            transparent 342px),
        radial-gradient(75% 55% at 0% 0%, var(--og-acceso-luz-oro), transparent 70%),
        radial-gradient(60% 50% at 100% 100%, var(--og-acceso-luz-ambar), transparent 70%),
        linear-gradient(160deg, var(--og-acceso-fondo-alto) 0%, var(--og-acceso-fondo-bajo) 100%);
}

/* Una trama muy tenue, en oro, que se apaga hacia abajo: textura sin
   cargar una imagen. Son dos gradientes cruzados, no un archivo. */
.og-acceso__marca::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(115deg, var(--og-acceso-trama) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(65deg,  var(--og-acceso-trama) 0 1px, transparent 1px 34px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
            mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    pointer-events: none;
}

/* «Cannis | [isotipo]»: el logotipo, una línea fina y el isotipo de Cannis
   OS, centrados sobre las LETRAS del logotipo y no sobre su caja.

   El SVG del logotipo (Cannis_80x160_logo.svg) tiene aire alrededor de las
   letras, y no parejo: medido en el navegador, la tinta va del 26 % al 69 %
   del alto —el centro, al 47,4 %— y del 4,7 % al 95,9 % del ancho. Centrar
   la fila por las cajas dejaba el isotipo 1,4 px más abajo que las letras y
   la línea con más aire a la izquierda que a la derecha. Las correcciones
   de abajo salen de esas medidas: si se cambia el SVG, se vuelve a medir. */
.og-acceso__firma {
    --og-firma-alto: 54px;
    --og-firma-isotipo: 42px;

    display: flex;
    align-items: center;
    gap: var(--og-sp-4);
}

.og-acceso__logo {
    height: var(--og-firma-alto);
    width: auto;
    /* El aire del SVG a los costados: a la izquierda, para que la C quede a
       plomo con el texto de abajo; a la derecha, para que la línea quede en
       el medio. El SVG mide el doble de ancho que de alto. */
    margin-left: calc(var(--og-firma-alto) * 2 * -0.0467);
    margin-right: calc(var(--og-firma-alto) * 2 * -0.0408);
    /* El logotipo es claro; sobre la banda va en blanco puro. */
    filter: brightness(0) invert(1);
}

/* La línea y el isotipo suben hasta el centro de las letras, que está un
   2,6 % del alto más arriba que el de la caja del logotipo. */
.og-acceso__separador,
.og-acceso__isotipo {
    transform: translateY(calc(var(--og-firma-alto) * -0.026));
}

.og-acceso__separador {
    width: 1px;
    height: calc(var(--og-firma-isotipo) * 0.7);
    background: var(--og-acceso-linea);
}

/* El PNG ya trae su cuadrado redondeado con las esquinas transparentes: el
   radio es sólo para que la sombra siga la forma. */
.og-acceso__isotipo {
    width: var(--og-firma-isotipo);
    height: var(--og-firma-isotipo);
    border-radius: 20%;
    box-shadow: 0 10px 26px -10px rgba(224, 138, 13, 0.55);
}

.og-acceso__lema {
    max-width: 30rem;
}

.og-acceso__sello {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--og-acceso-linea);
    border-radius: var(--og-r-pill);
    background: rgba(252, 210, 107, 0.06);
    color: var(--og-acceso-acento);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.og-acceso__lema h1 {
    margin-top: var(--og-sp-5);
    font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--og-acceso-tinta);
}

/* «tu organización» en el oro del isotipo, de claro a ámbar. El color
   liso es para el navegador que no recorta el fondo al texto. */
.og-acceso__lema h1 span {
    color: var(--og-acceso-acento);
    background: linear-gradient(100deg, var(--og-acceso-oro-claro) 0%, var(--og-acceso-oro) 45%, var(--og-acceso-oro-hondo) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.og-acceso__texto {
    margin-top: var(--og-sp-4);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--og-acceso-tinta-suave);
}

.og-acceso__puntos {
    margin-top: var(--og-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-4);
    list-style: none;
    padding: 0;
}

.og-acceso__puntos li {
    display: flex;
    align-items: flex-start;
    gap: var(--og-sp-3);
    line-height: 1.45;
}

.og-acceso__tilde {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 50%;
    background: var(--og-acceso-tilde-fondo);
    box-shadow: inset 0 0 0 1px var(--og-acceso-linea);
    color: var(--og-acceso-acento);
}

.og-acceso__pie {
    padding-top: var(--og-sp-4);
    border-top: 1px solid var(--og-acceso-linea);
    font-size: var(--og-t-body-sm);
    color: var(--og-acceso-tinta-suave);
}

/* ── El lado del formulario ─────────────────────────────────────────*/
.og-acceso__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--og-sp-5);
    padding: var(--og-sp-7) var(--og-sp-5);
    /* Un dejo del oro de la banda, del lado de la banda. */
    background: radial-gradient(90% 60% at 0% 50%, rgba(245, 184, 46, 0.07), transparent 70%);
}

.og-acceso__hoja {
    position: relative;
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-5);
    padding: clamp(28px, 3vw, 40px);
    background: var(--og-acceso-hoja);
    border: 1px solid var(--og-borde);
    border-radius: 18px;
    box-shadow: var(--og-sombra-hoja);
    overflow: hidden;
}

/* El filo de arriba, en el oro del isotipo: de claro a ámbar. */
.og-acceso__hoja::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--og-acceso-oro-claro), var(--og-acceso-oro) 50%, var(--og-acceso-oro-hondo));
}

.og-acceso__rotulo {
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--og-acceso-marca);
}

.og-acceso__titulo {
    margin-top: var(--og-sp-2);
    font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem);
    line-height: 1.1;
}

.og-acceso__bajada {
    margin-top: var(--og-sp-2);
    color: var(--og-tinta-tenue);
}

.og-acceso__form {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-4);
}

/* Más altos que los del resto del portal y en 16px: en el teléfono un
   campo de menos de 16px hace que el navegador acerque la pantalla. */
.og-acceso__input {
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border-radius: var(--og-r-md);
    background: var(--og-acceso-campo);
    font-size: 1rem;
}

.og-acceso__input:focus {
    border-color: var(--og-acceso-marca);
    outline: 3px solid rgba(245, 184, 46, 0.35);
}

/* El gris del navegador para el ejemplo no llega a 4,5:1 sobre la hoja. */
.og-acceso__input::placeholder {
    color: var(--og-tinta-tenue);
    opacity: 1;
}

.og-acceso__fila-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--og-sp-3);
}

.og-acceso__olvido {
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    color: var(--og-acceso-marca);
    text-decoration: none;
}

.og-acceso__olvido:hover,
.og-acceso__olvido:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.og-acceso__form .og-check input {
    accent-color: var(--og-acceso-oro-hondo);
}

/* La contraseña con su «Mostrar» adentro del campo, a la derecha. */
.og-acceso__clave {
    position: relative;
}

.og-acceso__clave .og-acceso__input {
    padding-right: 5.5rem;
}

.og-acceso__ver {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 6px 10px;
    border: 0;
    border-radius: var(--og-r-sm);
    background: transparent;
    font: inherit;
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    color: var(--og-tinta-suave);
    cursor: pointer;
}

.og-acceso__ver:hover,
.og-acceso__ver:focus-visible {
    background: var(--og-superficie-2);
    color: var(--og-tinta);
}

/* El botón es de oro, con la tinta casi negra del isotipo: igual en los dos
   temas, como la banda. Pisa el verde de og-btn--principal sólo acá. */
.og-acceso__entrar {
    min-height: 50px;
    margin-top: var(--og-sp-1);
    border: 0;
    border-radius: var(--og-r-md);
    background: linear-gradient(100deg, var(--og-acceso-oro-claro) 0%, var(--og-acceso-oro) 48%, var(--og-acceso-oro-hondo) 100%);
    color: var(--og-acceso-sobre-oro);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 24px -12px rgba(224, 138, 13, 0.65);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.og-acceso__entrar:hover {
    background: linear-gradient(100deg, var(--og-acceso-oro-claro) 0%, var(--og-acceso-oro) 48%, var(--og-acceso-oro-hondo) 100%);
    color: var(--og-acceso-sobre-oro);
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 14px 28px -12px rgba(224, 138, 13, 0.75);
}

.og-acceso__entrar:focus-visible {
    outline: 3px solid var(--og-acceso-marca);
    outline-offset: 3px;
}

.og-acceso__ayuda {
    padding-top: var(--og-sp-4);
    border-top: 1px solid var(--og-borde);
    font-size: var(--og-t-body-sm);
    line-height: 1.5;
    color: var(--og-tinta-tenue);
}

/* La firma del ecosistema debajo de la hoja: sólo en el teléfono, donde la
   banda de marca no lleva pie. En la computadora ya está en la banda. */
.og-acceso__ecosistema {
    display: none;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .og-acceso__entrar {
        transition: none;
    }

    .og-acceso__entrar:hover {
        transform: none;
    }
}

/* ── En el teléfono la banda de marca se convierte en cabecera ─────
   Ocultarla dejaba la pantalla sin identidad; dejarla entera se comía la
   primera pantalla antes del formulario. Queda corta —firma, sello y
   título— y la hoja se monta sobre su borde de abajo. */
@media (max-width: 900px) {
    .og-acceso {
        grid-template-columns: 1fr;
        align-content: start;
    }

    /* Sin el ámbar de abajo ni los anillos: en la banda corta caían justo
       detrás del borde de la hoja y se leían como una franja. */
    .og-acceso__marca {
        gap: var(--og-sp-5);
        padding: var(--og-sp-6) var(--og-sp-5) 88px;
        background:
            radial-gradient(80% 70% at 0% 0%, var(--og-acceso-luz-oro), transparent 72%),
            linear-gradient(160deg, var(--og-acceso-fondo-alto) 0%, var(--og-acceso-fondo-bajo) 100%);
    }

    .og-acceso__firma {
        --og-firma-alto: 44px;
        --og-firma-isotipo: 34px;
    }

    .og-acceso__lema h1 {
        margin-top: var(--og-sp-4);
        font-size: 1.7rem;
    }

    .og-acceso__texto,
    .og-acceso__puntos,
    .og-acceso__pie {
        display: none;
    }

    .og-acceso__panel {
        justify-content: flex-start;
        padding: 0 var(--og-sp-4) var(--og-sp-6);
        background: none;
    }

    .og-acceso__hoja {
        margin-top: -64px;
        z-index: 1;
    }

    .og-acceso__ecosistema {
        display: block;
    }
}

/* === css/ongs/vistas/tablero.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — tablero
   ═══════════════════════════════════════════════════════════════════ */

/* La fila de pendientes: lo que espera a alguien, junto y arriba. */
.og-pendientes {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
}

.og-pendiente {
    display: flex;
    align-items: center;
    gap: var(--og-sp-3);
    padding: var(--og-sp-3) var(--og-sp-4);
    border: 1px solid var(--og-borde);
    border-left: 3px solid var(--og-alerta);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
}

.og-pendiente__cuenta {
    font-family: var(--og-tipo-numero);
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--og-alerta);
}

.og-pendiente__texto {
    flex: 1;
    min-width: 0;
}

.og-pendiente__nada {
    display: flex;
    align-items: center;
    gap: var(--og-sp-3);
    padding: var(--og-sp-3) var(--og-sp-4);
    border: 1px solid var(--og-borde);
    border-left: 3px solid var(--og-ok);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    color: var(--og-tinta-suave);
}

/* === css/ongs/vistas/membresias.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — membresías

   Estas no son una tabla interna: son la oferta pública de la organización,
   lo mismo que ve quien entra a su web y decide asociarse. Por eso se pintan
   como planes y no como filas — la pantalla del mostrador se parece a lo que
   el paciente va a ver, y así se nota cuando un plan quedó sin precio, sin
   descripción o sin ningún beneficio prendido.
   ═══════════════════════════════════════════════════════════════════ */

.og-planes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--og-sp-5);
    align-items: start;
}

/* La tarjeta del plan es una .og-tarjeta con el pie pegado abajo: con alturas
   distintas los botones quedaban a distinta altura en cada columna. */
.og-plan {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.og-plan__cuerpo {
    flex: 1;
    padding: var(--og-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-4);
}

.og-plan__nombre {
    margin: 0;
    font-family: var(--og-tipo-display);
    font-size: var(--og-t-h2);
    line-height: 1.2;
    color: var(--og-tinta);
}

/* El precio en Agrandir y en ocre: es plata, y el ocre es el color de la
   plata en todo el portal. */
.og-plan__precio {
    display: flex;
    align-items: baseline;
    gap: var(--og-sp-2);
    font-family: var(--og-tipo-numero);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--og-ocre);
}

.og-plan__periodo {
    font-family: var(--og-tipo-texto);
    font-size: var(--og-t-body-sm);
    font-weight: 500;
    color: var(--og-tinta-tenue);
}

/* Sin precio no es lo mismo que gratis: se dice con palabras. */
.og-plan__precio--vacio {
    font-size: var(--og-t-body);
    font-weight: 500;
    color: var(--og-tinta-tenue);
}

.og-plan__descripcion {
    margin: 0;
    font-size: var(--og-t-body-sm);
    line-height: 1.6;
    color: var(--og-tinta-suave);
}

/* ── Los beneficios ───────────────────────────────────────────────
   Van TODOS, prendidos y apagados: una lista que sólo muestra lo incluido
   obliga a recordar qué existía para saber qué falta. */
.og-plan__beneficios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
}

.og-plan__beneficio {
    display: flex;
    align-items: center;
    gap: var(--og-sp-2);
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta);
}

.og-plan__beneficio--no {
    color: var(--og-tinta-tenue);
}

/* La marca del beneficio: círculo lleno cuando está, hueco cuando no.
   Se distinguen por forma y no sólo por color. */
.og-plan__marca {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: var(--og-r-pill);
    display: grid;
    place-items: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    background: var(--og-ok-suave);
    color: var(--og-sobre-ok);
}

.og-plan__beneficio--no .og-plan__marca {
    background: transparent;
    border: 1px solid var(--og-borde-fuerte);
    color: var(--og-tinta-tenue);
}

.og-plan__gramos {
    display: inline-flex;
    align-items: baseline;
    gap: var(--og-sp-1);
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
}

.og-plan__gramos strong {
    font-family: var(--og-tipo-numero);
    font-size: var(--og-t-body);
    color: var(--og-tinta);
}

/* El pie: cuánta gente la eligió, y las acciones. */
.og-plan__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-sp-3);
    padding: var(--og-sp-3) var(--og-sp-5);
    border-top: 1px solid var(--og-borde);
    background: var(--og-superficie-2);
    border-radius: 0 0 var(--og-r-md) var(--og-r-md);
}

.og-plan__elegida {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-plan__elegida strong {
    font-family: var(--og-tipo-numero);
    color: var(--og-tinta);
}

/* === css/ongs/vistas/solicitudes.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — solicitudes de afiliación

   Lo único propio de este módulo es el token: seis caracteres que alguien
   tiene que leer en voz alta o copiar a un WhatsApp, del otro lado de un
   mostrador y a veces con el teléfono en la mano. Por eso va grande, con
   espacio entre letras y en tipografía de cifra.
   ═══════════════════════════════════════════════════════════════════ */

.og-token {
    margin: var(--og-sp-4) 0 var(--og-sp-2);
    padding: var(--og-sp-5) var(--og-sp-4);
    border: 2px dashed var(--og-borde-fuerte);
    border-radius: var(--og-r-md);
    background: var(--og-superficie-2);
    font-family: var(--og-tipo-numero);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-align: center;
    color: var(--og-tinta);
    /* Se selecciona de un clic: lo primero que hace quien lo va a pegar. */
    user-select: all;
    word-break: break-all;
}

.og-token__vence {
    margin: 0 0 var(--og-sp-4);
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
    text-align: center;
}

/* === css/ongs/vistas/caja.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — la Caja (caja.cannis.*)

   El punto de dispensa del mostrador. Comparte los tokens y los componentes
   del portal, pero no su armazón: no hay barra lateral, hay una cabecera
   oscura —en los dos temas, como la barra— con la organización, el cajón y
   las pestañas, y abajo el trabajo sobre papel.

   Pensada para la pantalla que queda abierta todo el turno: blancos de toque
   de 44px, cifras en Agrandir con números tabulares, y el ticket como un
   ticket de verdad (bordes punteados, total con raya).

   Cero colores literales: todo sale de tokens.css. Cada relleno lleva su
   tinta (--og-sobre-*), porque los rellenos se invierten con el tema.
   ═══════════════════════════════════════════════════════════════════ */

.og-caja-cuerpo {
    /* Lo que ocupa la cabecera pegada arriba: el ticket se pega debajo. */
    --og-caja-alto-cabecera: 116px;
    background: var(--og-papel);
}

/* `hidden` tiene que ganarle al display de cualquier componente: con JS se
   esconden campos que son .og-campo (flex) y tarjetas del catálogo (flex). */
.og-caja-cuerpo [hidden] {
    display: none !important;
}

.og-caja {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ══ Cabecera ═════════════════════════════════════════════════════ */
.og-caja-cabecera {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--og-barra);
    color: var(--og-sobre-barra);
    box-shadow: var(--og-sombra-2);
}

.og-caja-cabecera__fila {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--og-sp-3) var(--og-sp-5);
    padding: var(--og-sp-3) var(--og-sp-5);
}

.og-caja-marca {
    display: flex;
    align-items: center;
    gap: var(--og-sp-3);
    min-width: 0;
    color: var(--og-sobre-barra);
}

.og-caja-marca:hover {
    text-decoration: none;
}

.og-caja-marca__escudo {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--og-r-md);
    background: var(--og-ocre);
    color: var(--og-sobre-ocre);
    overflow: hidden;
}

.og-caja-marca__escudo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.og-caja-marca__icono {
    width: 22px;
    height: 22px;
}

.og-caja-marca__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.og-caja-marca__producto {
    font-family: var(--og-tipo-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.og-caja-marca__ong {
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--og-t-body-sm);
    color: color-mix(in srgb, var(--og-sobre-barra) 72%, transparent);
}

/* El estado del cajón: lo primero que se mira al llegar al mostrador. */
.og-caja-cajon__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--og-sp-2);
    padding: 6px 12px;
    border-radius: var(--og-r-pill);
    background: color-mix(in srgb, var(--og-sobre-barra) 10%, transparent);
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    white-space: nowrap;
}

.og-caja-cajon__luz {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--og-alerta);
}

.og-caja-cajon__estado.es-abierta .og-caja-cajon__luz {
    background: var(--og-verde-claro);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-verde-claro) 35%, transparent);
}

.og-caja-cabecera__derecha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--og-sp-2);
    margin-left: auto;
}

.og-caja-cabecera__derecha form {
    margin: 0;
}

.og-caja-operador {
    display: flex;
    flex-direction: column;
    padding: 0 var(--og-sp-2);
    line-height: 1.2;
    text-align: right;
}

.og-caja-operador__nombre {
    font-size: var(--og-t-body-sm);
    font-weight: 650;
}

.og-caja-operador__rol {
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--og-sobre-barra) 60%, transparent);
}

.og-caja-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--og-sobre-barra) 24%, transparent);
    border-radius: var(--og-r-sm);
    background: transparent;
    color: var(--og-sobre-barra);
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    cursor: pointer;
}

.og-caja-boton:hover {
    background: color-mix(in srgb, var(--og-sobre-barra) 10%, transparent);
    text-decoration: none;
}

.og-caja-boton:focus-visible,
.og-caja-pestana:focus-visible,
.og-caja-marca:focus-visible {
    outline: 2px solid var(--og-ocre);
    outline-offset: 2px;
}

/* ── Pestañas ───────────────────────────────────────────────────────*/
.og-caja-pestanas {
    display: flex;
    gap: var(--og-sp-1);
    padding: 0 var(--og-sp-5);
    overflow-x: auto;
    scrollbar-width: none;
}

.og-caja-pestana {
    display: inline-flex;
    align-items: center;
    gap: var(--og-sp-2);
    padding: 10px 14px;
    border-bottom: 3px solid transparent;
    color: color-mix(in srgb, var(--og-sobre-barra) 72%, transparent);
    font-weight: 600;
    white-space: nowrap;
}

.og-caja-pestana:hover {
    color: var(--og-sobre-barra);
    text-decoration: none;
}

.og-caja-pestana.es-actual {
    border-bottom-color: var(--og-ocre);
    color: var(--og-sobre-barra);
}

.og-caja-pestana__icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ══ Área de trabajo ══════════════════════════════════════════════ */
.og-caja-main {
    flex: 1;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: var(--og-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-5);
}

.og-caja-rotulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--og-sp-1);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-ocre);
}

.og-caja-formulario {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-4);
}

.og-caja-boton-grande {
    width: 100%;
    min-height: 52px;
    font-size: 1.05rem;
}

.og-caja-ayuda,
.og-caja-nada {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-caja-ayuda--marco {
    padding: var(--og-sp-3);
    border: 1px dashed var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie-2);
}

.og-caja-subtitulo {
    margin-top: var(--og-sp-2);
    font-family: var(--og-tipo-texto);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

/* ── Plata: el signo pegado al número ──────────────────────────────*/
.og-caja-plata {
    display: flex;
    align-items: stretch;
}

.og-caja-plata__signo {
    display: grid;
    place-items: center;
    padding: 0 0.7rem;
    border: 1px solid var(--og-borde-fuerte);
    border-right: 0;
    border-radius: var(--og-r-sm) 0 0 var(--og-r-sm);
    background: var(--og-superficie-2);
    color: var(--og-tinta-tenue);
    font-weight: 700;
}

.og-caja-plata__input {
    border-radius: 0 var(--og-r-sm) var(--og-r-sm) 0;
    font-family: var(--og-tipo-numero);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ══ La apertura ══════════════════════════════════════════════════ */
.og-caja-apertura {
    width: min(560px, 100%);
    margin: var(--og-sp-4) auto;
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-4);
}

.og-caja-apertura__tarjeta {
    border-top: 4px solid var(--og-ocre);
}

.og-caja-apertura__pie {
    text-align: center;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-caja-abiertas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-caja-abiertas__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--og-sp-3);
    padding: var(--og-sp-3) var(--og-sp-5);
    border-top: 1px solid var(--og-borde);
}

.og-caja-abiertas__nombre {
    font-weight: 700;
}

/* ══ El mostrador ═════════════════════════════════════════════════ */

/* El turno en una línea, de reojo entre paciente y paciente. */
.og-caja-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--og-sp-2) var(--og-sp-5);
    padding: var(--og-sp-3) var(--og-sp-4);
    background: var(--og-superficie);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    box-shadow: var(--og-sombra-1);
}

.og-caja-resumen__dato {
    display: flex;
    flex-direction: column;
    font-family: var(--og-tipo-numero);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.og-caja-resumen__dato.es-alerta {
    padding: 2px 10px;
    border-radius: var(--og-r-sm);
    background: var(--og-alerta-suave);
    color: var(--og-sobre-alerta);
}

.og-caja-resumen__dato.es-alerta .og-caja-resumen__rotulo {
    color: var(--og-sobre-alerta);
}

.og-caja-resumen__rotulo {
    font-family: var(--og-tipo-texto);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

.og-caja-resumen__ir {
    margin-left: auto;
}

/* Tres columnas en el orden en que se atiende: quién, qué, cuánto. */
.og-mostrador {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(320px, 400px);
    grid-template-areas: "paciente catalogo ticket";
    gap: var(--og-sp-4);
    align-items: start;
}

.og-mostrador__paciente { grid-area: paciente; }
.og-mostrador__catalogo { grid-area: catalogo; }

/* El ticket acompaña mientras se scrollea el catálogo. */
.og-mostrador__ticket {
    grid-area: ticket;
    position: sticky;
    top: calc(var(--og-caja-alto-cabecera) + var(--og-sp-4));
    max-height: calc(100vh - var(--og-caja-alto-cabecera) - var(--og-sp-6));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── El panel de cada columna ──────────────────────────────────────*/
.og-panel {
    min-width: 0;
    background: var(--og-superficie);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    box-shadow: var(--og-sombra-1);
}

.og-panel__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--og-sp-2) var(--og-sp-3);
    padding: var(--og-sp-3) var(--og-sp-4);
    border-bottom: 1px solid var(--og-borde);
}

.og-panel__cabecera form {
    margin: 0;
}

.og-panel__titulo {
    display: flex;
    align-items: center;
    gap: var(--og-sp-2);
    font-size: var(--og-t-h3);
}

.og-panel__paso {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--og-verde);
    color: var(--og-sobre-verde);
    font-family: var(--og-tipo-numero);
    font-size: 0.8rem;
    font-weight: 800;
}

.og-panel__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
    padding: var(--og-sp-4);
}

/* ── El paciente ───────────────────────────────────────────────────*/
.og-caja-buscador {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.og-caja-buscador__fila {
    display: flex;
    gap: var(--og-sp-2);
}

.og-caja-buscador .og-input {
    padding: 0.7rem 0.8rem;
    font-size: 1.05rem;
}

.og-caja-resultados {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-caja-resultados form {
    margin: 0;
}

.og-caja-resultado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: var(--og-sp-3);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie-2);
    color: var(--og-tinta);
    text-align: left;
    cursor: pointer;
}

.og-caja-resultado:hover,
.og-caja-resultado:focus-visible {
    border-color: var(--og-verde);
    background: var(--og-verde-suave);
    outline: none;
}

.og-caja-resultado__nombre {
    font-weight: 700;
}

.og-caja-resultado__datos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-caja-estrella {
    color: var(--og-ocre);
}

.og-caja-paciente {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: var(--og-sp-3);
    border-bottom: 1px solid var(--og-borde);
}

.og-caja-paciente__nombre {
    font-family: var(--og-tipo-display);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
}

.og-caja-paciente__datos {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
}

.og-caja-paciente__pastillas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.og-caja-paciente__ficha {
    margin-top: 4px;
    font-size: var(--og-t-body-sm);
    font-weight: 600;
}

/* Lo de hoy contra el tope: verde lo que ya se llevó, ocre lo del ticket. */
.og-caja-topes {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-caja-tope__fila {
    display: flex;
    justify-content: space-between;
    gap: var(--og-sp-2);
    font-size: var(--og-t-body-sm);
}

.og-caja-tope__categoria {
    font-weight: 650;
}

.og-caja-tope__cifra {
    font-family: var(--og-tipo-numero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.og-caja-tope__barra {
    display: flex;
    height: 8px;
    margin-top: 4px;
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-pill);
    background: var(--og-superficie-2);
    overflow: hidden;
}

.og-caja-tope__usado {
    background: var(--og-verde);
}

.og-caja-tope__ticket {
    background: var(--og-ocre);
}

.og-caja-tope__queda {
    margin-top: 2px;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

/* La deuda: una tarjeta por dispensa impaga, con su cobro al lado. */
.og-caja-deudas {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-caja-deuda {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--og-sp-2);
    padding: var(--og-sp-3);
    border: 1px solid var(--og-borde);
    border-left: 3px solid var(--og-alerta);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie-2);
}

.og-caja-deuda__detalle {
    display: block;
    font-weight: 650;
}

.og-caja-deuda__monto {
    font-family: var(--og-tipo-numero);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.og-caja-deuda__cobrar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* El select del componente ocupa todo el ancho: acá comparte la fila con
   las cuotas y el botón, y el botón tiene que quedar a la vista. */
.og-caja-deuda__cobrar .og-select {
    width: auto;
    flex: 1 1 140px;
    min-width: 0;
}

/* ── El catálogo ───────────────────────────────────────────────────*/
.og-caja-filtro {
    margin: 0;
}

.og-caja-filtro__input {
    width: min(260px, 100%);
    padding: 0.4rem 0.6rem;
}

.og-caja-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--og-sp-3) var(--og-sp-4) 0;
}

.og-caja-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-pill);
    background: var(--og-superficie);
    color: var(--og-tinta-suave);
    font-size: var(--og-t-body-sm);
    font-weight: 650;
    white-space: nowrap;
}

.og-caja-chip:hover {
    border-color: var(--og-verde);
    color: var(--og-tinta);
    text-decoration: none;
}

.og-caja-chip.es-actual {
    background: var(--og-verde);
    border-color: var(--og-verde);
    color: var(--og-sobre-verde);
}

.og-caja-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--og-sp-3);
}

.og-caja-producto {
    display: flex;
    flex-direction: column;
    background: var(--og-superficie);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    overflow: hidden;
}

.og-caja-producto__cabecera {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--og-sp-3) var(--og-sp-3) var(--og-sp-2);
    border-top: 3px solid var(--og-verde);
}

.og-caja-producto__categoria {
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

.og-caja-producto__nombre {
    font-size: 1.05rem;
    line-height: 1.25;
}

.og-caja-producto__perfil {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
}

.og-caja-presentaciones {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--og-borde);
}

.og-caja-presentacion {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
    padding: var(--og-sp-3);
}

.og-caja-presentacion + .og-caja-presentacion {
    border-top: 1px dashed var(--og-borde);
}

.og-caja-presentacion__datos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px var(--og-sp-2);
}

.og-caja-presentacion__nombre {
    font-weight: 650;
}

.og-caja-presentacion__precio {
    font-family: var(--og-tipo-numero);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.og-caja-presentacion__por {
    font-family: var(--og-tipo-texto);
    font-size: var(--og-t-body-sm);
    font-weight: 500;
    color: var(--og-tinta-tenue);
}

.og-caja-presentacion__stock {
    grid-column: 1 / -1;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-caja-presentacion__stock strong {
    color: var(--og-tinta);
}

/* Poco stock: se dice antes de que el servidor lo rechace. */
.og-caja-presentacion__stock.es-escaso {
    justify-self: start;
    padding: 1px 6px;
    border-radius: var(--og-r-sm);
    background: var(--og-alerta-suave);
    color: var(--og-sobre-alerta);
}

.og-caja-presentacion__stock.es-escaso strong {
    color: var(--og-sobre-alerta);
}

.og-caja-agregar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.og-caja-agregar__cantidad {
    width: 5.5rem;
    padding: 0.4rem 0.5rem;
    font-family: var(--og-tipo-numero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.og-caja-agregar__unidad {
    min-width: 1.5rem;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-caja-agregar .og-btn {
    margin-left: auto;
}

/* ── El ticket ─────────────────────────────────────────────────────
   Papel de ticket: raya de ocre arriba, renglones punteados y el total
   con raya llena, como el que sale de la registradora. */
.og-caja-ticket {
    border-top: 4px solid var(--og-ocre);
}

.og-caja-ticket__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--og-sp-2);
    padding: var(--og-sp-6) var(--og-sp-4);
    text-align: center;
    color: var(--og-tinta-tenue);
}

.og-caja-ticket__para {
    padding: var(--og-sp-3) var(--og-sp-4) 0;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
}

.og-caja-lineas {
    margin: 0;
    padding: var(--og-sp-1) var(--og-sp-4);
    list-style: none;
}

.og-caja-linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px var(--og-sp-2);
    padding: var(--og-sp-3) 0;
    border-bottom: 1px dashed var(--og-borde-fuerte);
}

.og-caja-linea.es-nueva {
    animation: og-caja-destello 1.4s ease-out;
}

@keyframes og-caja-destello {
    from { background: var(--og-ocre-suave); }
    to   { background: transparent; }
}

.og-caja-linea__nombre {
    display: block;
    font-weight: 650;
    line-height: 1.3;
}

.og-caja-linea.tiene-error .og-caja-linea__nombre {
    color: var(--og-riesgo);
}

.og-caja-linea__detalle {
    display: block;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
    font-variant-numeric: tabular-nums;
}

.og-caja-linea__subtotal {
    font-family: var(--og-tipo-numero);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.og-caja-linea__acciones {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.og-caja-linea__acciones form {
    margin: 0;
}

.og-caja-linea__acciones form:last-child {
    margin-left: auto;
}

.og-caja-linea__cambiar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.og-caja-linea__input {
    width: 5rem;
    padding: 0.3rem 0.45rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.og-caja-linea__sacar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-sm);
    background: transparent;
    color: var(--og-tinta-tenue);
    cursor: pointer;
}

.og-caja-linea__sacar:hover,
.og-caja-linea__sacar:focus-visible {
    border-color: var(--og-riesgo);
    background: var(--og-riesgo-suave);
    color: var(--og-sobre-riesgo);
}

.og-caja-linea__error {
    grid-column: 1 / -1;
    padding: var(--og-sp-2) var(--og-sp-3);
    border-radius: var(--og-r-sm);
    background: var(--og-riesgo-suave);
    color: var(--og-sobre-riesgo);
    font-size: var(--og-t-body-sm);
    font-weight: 600;
}

.og-caja-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--og-sp-3);
    margin: 0 var(--og-sp-4);
    padding: var(--og-sp-3) 0;
    border-top: 2px solid var(--og-tinta);
}

.og-caja-total__rotulo {
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

.og-caja-total__numero {
    font-family: var(--og-tipo-numero);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ── El cobro ──────────────────────────────────────────────────────*/
.og-caja-cobro {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
    margin: 0;
    padding: var(--og-sp-3) var(--og-sp-4) var(--og-sp-4);
    border-top: 1px solid var(--og-borde);
    background: var(--og-superficie-2);
}

.og-caja-formas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.og-caja-formas legend {
    margin-bottom: 6px;
    padding: 0;
}

/* Cada forma de pago es un botón grande, pero sigue siendo un radio: el
   input queda encima, invisible, y se usa con teclado y lector igual. */
.og-caja-forma {
    position: relative;
    display: flex;
}

.og-caja-forma input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.og-caja-forma span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--og-borde-fuerte);
    border-radius: var(--og-r-sm);
    background: var(--og-superficie);
    font-size: var(--og-t-body-sm);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
}

.og-caja-forma input:checked + span {
    background: var(--og-verde);
    border-color: var(--og-verde);
    color: var(--og-sobre-verde);
}

.og-caja-forma input:focus-visible + span {
    outline: 2px solid var(--og-verde);
    outline-offset: 2px;
}

.og-caja-forma--pendiente {
    grid-column: 1 / -1;
}

.og-caja-forma--pendiente input:checked + span {
    background: var(--og-alerta-suave);
    border-color: var(--og-alerta);
    color: var(--og-sobre-alerta);
}

.og-caja-vuelto {
    margin-top: 4px;
    padding: var(--og-sp-2) var(--og-sp-3);
    border-radius: var(--og-r-sm);
    background: var(--og-ok-suave);
    color: var(--og-sobre-ok);
    font-weight: 600;
}

.og-caja-vuelto strong {
    font-family: var(--og-tipo-numero);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.og-caja-vuelto.es-falta {
    background: var(--og-riesgo-suave);
    color: var(--og-sobre-riesgo);
}

/* En el teléfono el ticket queda abajo: esta barra lo trae. */
.og-caja-barra-ticket {
    display: none;
}

/* Destino de esa barra (#ticket): la cabecera de la Caja es sticky y en el
   teléfono mide 142 px (medido a 390 de ancho), así que sin margen le tapaba
   el título al ticket. Es la misma idea que og-ancla con la barra del
   portal (PD-48, vuelta 4). */
.og-caja-ticket {
    scroll-margin-top: calc(142px + var(--og-sp-3));
}

/* ══ El comprobante ═══════════════════════════════════════════════ */
.og-caja-comprobante-pantalla {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--og-sp-4);
}

.og-caja-comprobante__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--og-sp-2);
}

.og-caja-comprobante {
    width: min(420px, 100%);
    padding: var(--og-sp-5);
    background: var(--og-superficie);
    border: 1px solid var(--og-borde);
    border-top: 4px solid var(--og-ocre);
    border-radius: var(--og-r-md);
    box-shadow: var(--og-sombra-2);
    font-variant-numeric: tabular-nums;
}

.og-caja-comprobante__cabecera {
    padding-bottom: var(--og-sp-3);
    border-bottom: 1px dashed var(--og-borde-fuerte);
    text-align: center;
}

.og-caja-comprobante__ong {
    font-family: var(--og-tipo-display);
    font-size: 1.1rem;
    font-weight: 800;
}

.og-caja-comprobante__sede,
.og-caja-comprobante__fecha {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-caja-comprobante__titulo {
    margin-top: var(--og-sp-2);
    font-size: 1.25rem;
}

.og-caja-comprobante__datos {
    display: grid;
    gap: 4px;
    margin: var(--og-sp-3) 0;
}

.og-caja-comprobante__datos div {
    display: flex;
    justify-content: space-between;
    gap: var(--og-sp-3);
}

.og-caja-comprobante__datos dt {
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-caja-comprobante__datos dd {
    margin: 0;
    font-weight: 650;
    text-align: right;
}

.og-caja-comprobante__datos--pago {
    padding-top: var(--og-sp-2);
    border-top: 1px dashed var(--og-borde-fuerte);
}

.og-caja-comprobante__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--og-t-body-sm);
}

.og-caja-comprobante__tabla th {
    padding: 6px 0;
    border-bottom: 1px solid var(--og-borde);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

.og-caja-comprobante__tabla td {
    padding: 6px 0;
    border-bottom: 1px dashed var(--og-borde);
    vertical-align: top;
}

.og-caja-comprobante__tabla .es-numero {
    padding-left: var(--og-sp-2);
    text-align: right;
    white-space: nowrap;
}

.og-caja-comprobante__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--og-sp-3);
    padding-top: var(--og-sp-2);
    border-top: 2px solid var(--og-tinta);
}

.og-caja-comprobante__total strong {
    font-family: var(--og-tipo-numero);
    font-size: 1.6rem;
    font-weight: 800;
}

.og-caja-comprobante__detalle,
.og-caja-comprobante__nota {
    margin-top: var(--og-sp-2);
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
}

.og-caja-comprobante__pie {
    margin-top: var(--og-sp-4);
    padding-top: var(--og-sp-2);
    border-top: 1px dashed var(--og-borde-fuerte);
    font-size: var(--og-t-rotulo);
    text-align: center;
    color: var(--og-tinta-tenue);
}

/* ══ El turno ═════════════════════════════════════════════════════ */
.og-caja-dos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--og-sp-4);
    align-items: start;
}

.og-caja-tres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--og-sp-4);
    align-items: start;
}

.og-caja-cierre {
    border-top: 4px solid var(--og-verde);
}

.og-caja-diferencia {
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: var(--og-r-sm);
    font-size: var(--og-t-body-sm);
    font-weight: 650;
}

.og-caja-diferencia.es-justo    { background: var(--og-ok-suave);     color: var(--og-sobre-ok); }
.og-caja-diferencia.es-faltante { background: var(--og-riesgo-suave); color: var(--og-sobre-riesgo); }
.og-caja-diferencia.es-sobrante { background: var(--og-alerta-suave); color: var(--og-sobre-alerta); }

.og-caja-fila-apagada td,
.og-caja-fila-apagada .og-tabla__principal {
    color: var(--og-tinta-tenue);
    font-weight: 500;
}

/* ═══ Pantallas más chicas ═════════════════════════════════════════ */

/* Laptop: el ticket sigue a la derecha, el catálogo baja abajo del paciente. */
@media (max-width: 1280px) {
    .og-mostrador {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        grid-template-areas:
            "paciente ticket"
            "catalogo ticket";
    }
}

/* Tablet y teléfono: una columna, en el orden en que se atiende. */
@media (max-width: 900px) {
    .og-caja-main {
        padding: var(--og-sp-4);
    }

    .og-mostrador {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "paciente"
            "catalogo"
            "ticket";
    }

    .og-mostrador__ticket {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .og-caja-dos,
    .og-caja-tres {
        grid-template-columns: minmax(0, 1fr);
    }

    .og-caja-barra-ticket {
        position: sticky;
        bottom: var(--og-sp-3);
        z-index: 20;
        display: flex;
        align-items: center;
        gap: var(--og-sp-3);
        padding: var(--og-sp-3) var(--og-sp-4);
        border-radius: var(--og-r-md);
        background: var(--og-barra);
        color: var(--og-sobre-barra);
        box-shadow: var(--og-sombra-3);
        font-weight: 600;
    }

    .og-caja-barra-ticket:hover {
        text-decoration: none;
    }

    .og-caja-barra-ticket strong {
        margin-left: auto;
        font-family: var(--og-tipo-numero);
        font-size: 1.1rem;
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 720px) {
    .og-caja-cabecera__fila {
        gap: var(--og-sp-2);
        padding: var(--og-sp-2) var(--og-sp-4);
    }

    .og-caja-marca__ong {
        max-width: 20ch;
    }

    /* El cajón se lleva su propio renglón; quién opera y los textos de los
       botones se van: en 390px no entran con el selector de organización. */
    .og-caja-cajon {
        order: 3;
        width: 100%;
    }

    .og-caja-operador,
    .og-caja-boton__texto {
        display: none;
    }

    .og-caja-pestanas {
        padding: 0 var(--og-sp-2);
    }

    .og-caja-pestana {
        padding: 10px;
    }

    .og-caja-resumen__ir {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .og-caja-linea.es-nueva {
        animation: none;
    }
}

/* ═══ Impresión ════════════════════════════════════════════════════
   Se imprime el comprobante o la ficha del turno, sin la cabecera, sin
   botones y sin avisos. La paleta de papel la pone tokens.css: en impresión
   el tema oscuro no aplica. */
@media print {
    .og-caja-cabecera,
    .og-caja-comprobante__acciones,
    .og-encabezado__acciones,
    .og-caja-barra-ticket,
    .og-aviso,
    .sb-etiqueta {
        display: none !important;
    }

    .og-caja-main {
        max-width: none;
        padding: 0;
    }

    .og-caja-comprobante,
    .og-tarjeta,
    .og-cifra {
        box-shadow: none;
    }

    .og-tarjeta,
    .og-caja-comprobante {
        break-inside: avoid;
    }
}

/* === css/ongs/vistas/dispensables.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — el editor de Dispensables (PD-48)

   Dos columnas: el producto a la izquierda, la foto y cómo se ve a la
   derecha. La barra de guardar queda pegada abajo, porque el formulario es
   largo y el botón no puede quedar a tres pantallas.
   ═══════════════════════════════════════════════════════════════════ */

.og-editor__columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: var(--og-sp-5);
}

.og-editor__principal,
.og-editor__lateral {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-5);
    min-width: 0;
}

/* El lateral acompaña mientras se completa el formulario. */
.og-editor__lateral {
    position: sticky;
    top: calc(var(--og-alto-topbar) + var(--og-sp-4));
}

.og-editor__foto {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
}

.og-editor__foto .og-visor__marco {
    height: 240px;
}

.og-editor__foto .og-archivo__zona {
    min-height: 150px;
}

.og-editor__barra {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-sp-3);
    margin-top: var(--og-sp-5);
    padding: var(--og-sp-3) var(--og-sp-4);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md) var(--og-r-md) 0 0;
    background: var(--og-superficie);
    box-shadow: var(--og-sombra-arriba);
}

.og-editor__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--og-sp-2);
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    color: var(--og-tinta-tenue);
}

.og-editor__estado::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--og-borde-fuerte);
}

.og-editor.es-sucio .og-editor__estado {
    color: var(--og-sobre-alerta);
}

.og-editor.es-sucio .og-editor__estado::before {
    background: var(--og-alerta);
}

.og-editor__botones {
    display: flex;
    gap: var(--og-sp-2);
}

/* ── Presentaciones ──────────────────────────────────────────────── */
.og-presentaciones {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
}

.og-presentaciones__nuevas {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
}

.og-presentaciones__agregar {
    align-self: flex-start;
}

.og-presentacion {
    padding: var(--og-sp-3) var(--og-sp-4) var(--og-sp-4);
    border: 1px solid var(--og-borde);
    border-left: 3px solid var(--og-verde);
    border-radius: var(--og-r-md);
    background: var(--og-superficie-2);
}

/* Apagada: se ve, pero se nota que no se dispensa. */
.og-presentacion.es-apagada {
    border-left-color: var(--og-borde-fuerte);
}

.og-presentacion.es-apagada .og-presentacion__campos {
    opacity: 0.6;
}

.og-presentacion--nueva {
    border-style: dashed;
    border-left-style: solid;
    border-left-color: var(--og-ocre);
}

.og-presentacion__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--og-sp-3);
    margin-bottom: var(--og-sp-3);
}

.og-presentacion__principal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--og-t-body-sm);
    font-weight: 650;
    color: var(--og-tinta-suave);
    cursor: pointer;
}

.og-presentacion__principal input {
    accent-color: var(--og-verde);
}

.og-presentacion__stock {
    margin-right: auto;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

/* Dos renglones: qué es (nombre y medida) y la plata (aporte, costo y, en
   las nuevas, el stock con que arranca). En una sola fila, a 1280 px, los
   importes no entraban: la columna del editor es angosta y se leía «80…». */
.og-presentacion__campos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--og-sp-3);
}

.og-presentacion__campos > .og-campo {
    grid-column: span 3;
}

.og-presentacion__campos > .og-campo:first-child {
    grid-column: span 4;
}

.og-presentacion__campos > .og-campo:nth-child(2) {
    grid-column: span 2;
}

.og-presentacion__campos--con-stock > .og-campo:nth-child(n+3) {
    grid-column: span 2;
}

/* ── Galería ─────────────────────────────────────────────────────── */
.og-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--og-sp-4);
    /* Sin esto, cada foto se estira hasta el alto del formulario de carga. */
    align-items: start;
}

.og-galeria__item {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    background: var(--og-superficie);
}

.og-galeria__imagen {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--og-superficie-2);
}

.og-galeria__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-sp-2);
    padding: var(--og-sp-2) var(--og-sp-3);
}

.og-galeria__leyenda {
    overflow: hidden;
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-suave);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.og-galeria__nueva {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
}

.og-galeria__nueva .og-archivo__zona {
    min-height: 150px;
}

/* ── La ficha ───────────────────────────────────────────────────────
   La foto al lado de los datos, y la tabla de presentaciones debajo. */
.og-ficha-producto {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--og-sp-5);
    align-items: start;
}

.og-ficha-producto__foto {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-2);
}

.og-ficha-producto__foto img,
.og-ficha-producto__sin-foto {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    background: var(--og-superficie-2);
}

.og-ficha-producto__foto img {
    display: block;
    object-fit: cover;
}

.og-ficha-producto__sin-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--og-sp-2);
    font-size: var(--og-t-body-sm);
    color: var(--og-tinta-tenue);
}

.og-ficha-producto__galeria {
    font-size: var(--og-t-body-sm);
    font-weight: 600;
    color: var(--og-verde);
    text-decoration: none;
}

.og-ficha-producto__galeria:hover {
    text-decoration: underline;
}

.og-ficha-producto__subtitulo {
    margin: var(--og-sp-6) 0 var(--og-sp-3);
    font-size: var(--og-t-rotulo);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-tinta-tenue);
}

/* ══ El alta: elegir la categoría (PD-48, vuelta 5) ═══════════════════
   Una tarjeta por categoría, y la tarjeta entera es el enlace. Los rasgos
   —unidad, presentaciones, perfil químico, stock, tope— son lo que la
   categoría decide y no se cambia después: por eso se leen antes de elegir. */
.og-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--og-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-categoria {
    display: flex;
    flex-direction: column;
    gap: var(--og-sp-3);
    height: 100%;
    padding: var(--og-sp-5);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-lg);
    background: var(--og-superficie);
    box-shadow: var(--og-sombra-1);
    color: var(--og-tinta);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.og-categoria:hover {
    border-color: var(--og-verde);
    box-shadow: var(--og-sombra-2);
    transform: translateY(-1px);
    text-decoration: none;
}

.og-categoria:focus-visible {
    outline: 2px solid var(--og-verde);
    outline-offset: 2px;
}

.og-categoria__nombre {
    font-family: var(--og-tipo-display);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}

.og-categoria__rasgos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--og-sp-2);
}

.og-categoria__elegir {
    display: inline-flex;
    align-items: center;
    gap: var(--og-sp-2);
    margin-top: auto;
    padding-top: var(--og-sp-2);
    font-weight: 600;
    color: var(--og-verde-hondo);
}

.og-categoria__flecha {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.og-categoria:hover .og-categoria__flecha {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .og-categoria,
    .og-categoria__flecha {
        transition: none;
    }

    .og-categoria:hover,
    .og-categoria:hover .og-categoria__flecha {
        transform: none;
    }
}

/* La galería del alta va adentro del formulario, debajo de la foto. */
.og-editor__galeria-alta .og-archivo__zona {
    min-height: 0;
}

/* La presentación que todavía no tiene stock: se nota que falta un paso. */
.og-tarjeta--inicial {
    border-style: dashed;
    border-color: var(--og-borde-fuerte);
}

@media (max-width: 1180px) {
    .og-editor__columnas {
        grid-template-columns: minmax(0, 1fr);
    }

    .og-editor__lateral {
        position: static;
    }
}

@media (max-width: 900px) {
    .og-ficha-producto {
        grid-template-columns: minmax(0, 1fr);
    }

    .og-ficha-producto__foto {
        max-width: 220px;
    }
}

@media (max-width: 560px) {
    .og-presentacion__campos > .og-campo,
    .og-presentacion__campos > .og-campo:nth-child(2),
    .og-presentacion__campos--con-stock > .og-campo:nth-child(n+3) {
        grid-column: span 3;
    }

    .og-presentacion__campos > .og-campo:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .og-editor__barra {
        justify-content: stretch;
    }

    .og-editor__botones {
        width: 100%;
    }

    .og-editor__botones .og-btn {
        flex: 1;
        justify-content: center;
    }
}

/* === css/ongs/vistas/mi-ong.css === */
/* ═══════════════════════════════════════════════════════════════════
   Cannis OS — Mi ONG

   «Cómo se presenta» (PD-48, vuelta 4): el logo va en su fila, con la muestra
   de lo guardado al lado del campo para cambiarlo, y la descripción corta a
   todo el ancho. Antes compartían fila en dos columnas y la descripción
   quedaba apretada al lado del logo.
   ═══════════════════════════════════════════════════════════════════ */

.og-presentacion__logo {
    display: flex;
    align-items: stretch;
    gap: var(--og-sp-4);
}

/* La muestra del logo guardado: un cuadrado con el logo entero adentro,
   sin deformarlo. */
.og-presentacion__muestra {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 132px;
    min-height: 132px;
    padding: var(--og-sp-3);
    border: 1px solid var(--og-borde);
    border-radius: var(--og-r-md);
    background: var(--og-superficie-2);
    color: var(--og-tinta-tenue);
    font-size: var(--og-t-body-sm);
    text-align: center;
}

.og-presentacion__muestra img {
    max-width: 100%;
    max-height: 108px;
    object-fit: contain;
}

.og-presentacion__logo .og-archivo {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 640px) {
    .og-presentacion__logo {
        flex-direction: column;
    }

    .og-presentacion__muestra {
        width: 100%;
        min-height: 96px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Cannis Portal ONGs — índice del CSS

   El orden es la cascada: tokens → base → componentes → gráficos → layout →
   vistas. Lo último gana.

   ⚠️ Lo que se sirve NO es este archivo sino bundle.css, que arma
   `php artisan ongs:css` resolviendo estos @import en un solo archivo.
   El bundle no está en git: correr el comando es parte del deploy.

   Este portal NO importa una sola regla de cannis_health: tiene sistema de
   diseño propio. Si algo hace falta acá, se escribe acá.
   ═══════════════════════════════════════════════════════════════════ */