/* Dirección en DESIGN.md: institucional ONG, superficies planas, verde como único acento. */
@font-face {
    font-family: "Source Serif 4";
    src: url("/fuentes/source-serif-4.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("/fuentes/source-sans-3.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("/fuentes/source-sans-3-italic.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --fondo: #f4efe5;
    --arena: #efe8da;
    --superficie: #fffdf9;
    --tinta: #1f2a26;
    --tinta-2: #4e5a54;
    --verde: #24493d;
    --verde-hondo: #183329;
    --sobre-verde: #ffffff;
    --sobre-verde-2: #efe8da;
    --linea: #ddd3c2;
    --borde: #8a8070;
    --peligro: #9b2c24;
    --peligro-fondo: #fbece9;
    --atencion: #7a5200;
    --atencion-fondo: #fbf1dc;
    --correcto: #2e6b3a;
    --correcto-fondo: #e8f2ea;
    --radio: 6px;
    --ancho: 1120px;
    --margen: 1rem;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fondo);
    color: var(--tinta);
    font: 1rem/1.5 var(--sans);
}

a { color: var(--verde); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
h2 { font-size: 1.3rem; margin-bottom: .75rem; }
h3 { font-size: 1.05rem; margin-bottom: .5rem; }
p { margin: 0 0 .75rem; }

.saltar {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--superficie);
    padding: .5rem 1rem;
    z-index: 10;
}
.saltar:focus { left: var(--margen); }

/* Barra superior */
.barra {
    background: var(--verde);
    color: var(--sobre-verde);
}
.barra-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 3.5rem;
}
.marca {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .02em;
    color: var(--sobre-verde);
    text-decoration: none;
}
.barra :focus-visible { outline-color: var(--sobre-verde); }
.barra-interior > nav { flex: 1; min-width: 0; }
.menu {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu a {
    display: block;
    padding: .45rem .7rem;
    border-radius: var(--radio);
    color: var(--sobre-verde-2);
    text-decoration: none;
    white-space: nowrap;
}
.menu a:hover { color: var(--sobre-verde); background: var(--verde-hondo); }
.menu a[aria-current="page"] {
    color: var(--sobre-verde);
    background: var(--verde-hondo);
    font-weight: 600;
}
/* La línea separa el nombre de la persona de las opciones del menú, que tienen el mismo color. */
.cuenta {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--sobre-verde-2);
    color: var(--sobre-verde-2);
}
.cuenta form { margin: 0; }
.boton-barra {
    background: none;
    border: 1px solid var(--sobre-verde-2);
    color: var(--sobre-verde);
    border-radius: var(--radio);
    padding: .3rem .7rem;
    font: inherit;
    cursor: pointer;
}
.boton-barra:hover { background: var(--verde-hondo); }

/* Submenú de la sección: franja arena bajo la barra verde. */
.submenu {
    background: var(--arena);
    border-bottom: 1px solid var(--linea);
}
.submenu ul {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen);
    display: flex;
    gap: 1.25rem;
    list-style: none;
    overflow-x: auto;
}
.submenu a {
    display: block;
    padding: .65rem 0;
    color: var(--tinta-2);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.submenu a:hover { color: var(--tinta); }
.submenu a[aria-current="page"] { color: var(--verde); font-weight: 600; border-bottom-color: var(--verde); }
.contador {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .35em;
    border-radius: var(--radio);
    background: var(--sobre-verde);
    color: var(--verde);
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 760px) {
    .barra-interior { flex-wrap: wrap; gap: .25rem 1rem; padding-top: .5rem; }
    .marca { flex: 1; }
    .cuenta { border-left: 0; padding-left: 0; }
    .cuenta .nombre { display: none; }
    .barra-interior > nav { order: 3; flex-basis: 100%; }
    .menu { overflow-x: auto; padding-bottom: .5rem; }
}

/* Página */
main {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 2rem var(--margen) 4rem;
}
.encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.encabezado p { color: var(--tinta-2); margin: .35rem 0 0; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.secundario { color: var(--tinta-2); }
.migas { font-size: .95rem; margin-bottom: .5rem; }

section + section { margin-top: 2.5rem; }

.panel {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 1.25rem;
}

.columnas {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 860px) { .columnas { grid-template-columns: minmax(0, 1fr); } }

/* Mensajes */
.mensaje {
    border-radius: var(--radio);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid currentColor;
}
.mensaje.hecho { color: var(--correcto); background: var(--correcto-fondo); }
.mensaje.error { color: var(--peligro); background: var(--peligro-fondo); }
.mensaje.atencion { color: var(--atencion); background: var(--atencion-fondo); }
.mensaje strong { font-weight: 600; }

/* Botones */
.boton, button.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem 1.1rem;
    border-radius: var(--radio);
    border: 1px solid var(--verde);
    background: var(--superficie);
    color: var(--verde);
    font: 600 1rem/1.2 var(--sans);
    text-decoration: none;
    cursor: pointer;
}
.boton:hover { background: var(--arena); }
.boton.principal { background: var(--verde); color: var(--sobre-verde); }
.boton.principal:hover { background: var(--verde-hondo); }
.boton.peligro { border-color: var(--peligro); color: var(--peligro); }
.boton.peligro:hover { background: var(--peligro-fondo); }
.enlace-boton {
    background: none;
    border: 0;
    padding: 0;
    color: var(--verde);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Formularios */
.formulario { display: grid; gap: 1rem; }
.formulario.en-linea {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
}
.filtro { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.filtro .campo { min-width: 14rem; }
.campo { display: grid; gap: .3rem; }
.campo label, .etiqueta { font-weight: 600; }
.campo .ayuda { color: var(--tinta-2); font-size: .92rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem .65rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
}
textarea { min-height: 5rem; resize: vertical; }
input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-weight: 600; margin-bottom: .4rem; }
legend h2 { margin: 0; }
.separado { margin-top: 2rem; }
.opciones { display: grid; gap: .4rem; }
.opciones label { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.opciones input { width: 1.15rem; height: 1.15rem; accent-color: var(--verde); }

/* Tablas */
.tabla-contenedor { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}
th, td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--linea);
    vertical-align: top;
}
th {
    background: var(--arena);
    color: var(--tinta-2);
    font-weight: 600;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.numero input { max-width: 7.5rem; margin-left: auto; display: block; }
tr.grupo th { background: var(--fondo); color: var(--tinta); font-family: var(--serif); font-size: 1.05rem; }
.detalle { color: var(--tinta-2); font-size: .92rem; display: block; }
.vacio { color: var(--tinta-2); padding: 1.25rem; text-align: center; }

.estado { white-space: nowrap; }
.estado.vencido { color: var(--peligro); font-weight: 600; }
.estado.por-vencer { color: var(--atencion); font-weight: 600; }
.estado.inactivo { color: var(--tinta-2); font-weight: 400; }

/* Ficha de datos */
.datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1.25rem;
    margin: 0;
}
.datos dt { color: var(--tinta-2); }
.datos dd { margin: 0; }

/* Entrada, instalación, invitación */
.acceso {
    max-width: 26rem;
    margin: 3rem auto;
}
.acceso .marca-grande {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--verde);
    margin-bottom: .25rem;
}
.acceso .panel { margin-top: 1.5rem; }

/* Charola del médico: lista para el pulgar y botón fijo abajo */
.despacho .cabecera-despacho { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.lista-despacho { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.lista-despacho li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: .75rem;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--linea);
}
.lista-despacho li:last-child { border-bottom: 0; }
.lista-despacho label { display: grid; gap: .1rem; }
.lista-despacho .producto { font-weight: 600; }
.lista-despacho .hay { color: var(--tinta-2); font-size: .92rem; }
.lista-despacho li[hidden] { display: none; }
.barra-accion {
    position: sticky;
    bottom: 0;
    background: var(--fondo);
    border-top: 1px solid var(--linea);
    padding: .75rem 0;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.barra-accion .boton { min-width: 12rem; }
@media (max-width: 520px) {
    .barra-accion { flex-direction: column; align-items: stretch; }
    .barra-accion .boton { width: 100%; }
}

.tarjetas-charola { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.tarjetas-charola a { display: block; text-decoration: none; color: inherit; }
.tarjetas-charola a:hover .panel { border-color: var(--verde); }
.tarjetas-charola .codigo { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--verde); }

.matriz td, .matriz th { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz input { width: 1.15rem; height: 1.15rem; accent-color: var(--verde); }

.enlace-copiable { word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

/* Cifras de la brigada: números reales en una fila, sin tarjetas. */
.cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0;
}
.cifras dt { color: var(--tinta-2); }
.cifras dd { margin: 0; font-family: var(--serif); font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cifras dd .detalle { font-family: var(--sans); font-size: .9rem; font-weight: 400; }

/* Captura de fichas: el paciente en una fila y los medicamentos en columnas por categoría, como la ficha en papel. */
.fila-paciente {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) auto minmax(10rem, 1fr) minmax(9rem, 1fr);
    gap: 1rem;
    align-items: end;
}
@media (max-width: 760px) { .fila-paciente { grid-template-columns: minmax(0, 1fr); } }
.opciones.en-linea { display: flex; gap: 1rem; min-height: 2.75rem; align-items: center; }
.edad-campos { display: grid; grid-template-columns: minmax(4rem, 1fr) minmax(5rem, 1fr); gap: .4rem; }
.encabezado-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.encabezado-seccion h2 { margin: 0; }
.grilla-medicamentos { columns: 3 19rem; column-gap: 1.25rem; }
.grilla-medicamentos fieldset {
    break-inside: avoid;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .5rem .75rem .25rem;
    margin: 0 0 1.25rem;
}
.grilla-medicamentos legend { font-family: var(--serif); font-weight: 600; padding: 0 .25rem; }
.medicamento {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: .5rem;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid var(--linea);
}
.medicamento:last-child { border-bottom: 0; }
.medicamento[hidden] { display: none; }
.medicamento input { min-height: 2.4rem; }
.medicamento input:disabled { background: var(--fondo); }