/* =============================================================================
   DesecoCare — tema

   Paleta sobria de consultorio: verde azulado como acento (asociado a salud sin
   caer en el azul corporativo de todos los sistemas medicos) sobre grises frios.
   Nada de colores saturados en el cuerpo: la pantalla se mira durante la consulta,
   con el paciente enfrente, y lo que tiene que resaltar son las alergias y las
   alertas de crecimiento, no la interfaz.
   ============================================================================= */

:root {
    --tinta: #16202a;
    --tinta-suave: #5b6b7a;
    --tinta-tenue: #8c9aa8;

    --acento: #0f766e;
    --acento-claro: #14918a;
    --acento-palido: #e6f4f2;

    --fondo: #f4f6f8;
    --superficie: #ffffff;
    --borde: #dde3e9;

    --peligro: #b42318;
    --alerta: #b54708;
    --exito: #067647;

    --menu-fondo: #12242c;
    --menu-texto: #cfe0e2;
    --menu-activo: #1d3b45;

    --radio: .5rem;
    --sombra: 0 1px 2px rgba(16, 32, 42, .06), 0 1px 3px rgba(16, 32, 42, .1);
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--fondo);
    color: var(--tinta);
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 { color: var(--tinta); font-weight: 600; }
h1:focus { outline: none; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-claro); text-decoration: underline; }

/* ---- Estructura ---------------------------------------------------------- */

.app { display: flex; min-height: 100vh; }

.app-menu {
    width: 15rem;
    flex-shrink: 0;
    background: var(--menu-fondo);
    display: flex;
    flex-direction: column;
}

.app-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-encabezado {
    height: 3.5rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    gap: 1rem;
}

.app-consultorio-nombre { font-weight: 600; color: var(--tinta); }

.app-encabezado-usuario { display: flex; align-items: center; gap: .75rem; }
.app-usuario-nombre { color: var(--tinta-suave); font-size: .875rem; }

.app-contenido {
    flex: 1;
    padding: 1.5rem;
    /* Tope de ancho: en un monitor de 27 pulgadas una tabla de lado a lado obliga a
       recorrer la cabeza para seguir el renglon. */
    max-width: 82rem;
    width: 100%;
}

.app-pie {
    flex-shrink: 0;
    padding: .625rem 1.5rem;
    border-top: 1px solid var(--borde);
    background: var(--superficie);
    color: var(--tinta-tenue);
    font-size: .75rem;
    text-align: center;
}

/* ---- Menu lateral -------------------------------------------------------- */

.menu-marca {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    min-height: 3.5rem;
}

.menu-logo {
    max-height: 2.25rem;
    max-width: 7rem;
    object-fit: contain;
}

.menu-logo-vacio {
    width: 2rem; height: 2rem;
    border-radius: .375rem;
    background: var(--acento);
    color: #fff;
    display: grid; place-items: center;
    font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
}

.menu-marca-texto { color: #fff; font-weight: 600; font-size: 1rem; }

.menu-alternar {
    display: none;
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    padding: .5rem;
}
.menu-alternar span {
    display: block; width: 1.25rem; height: 2px;
    background: var(--menu-texto); margin: 3px 0; border-radius: 1px;
}

.menu-lista { display: flex; flex-direction: column; padding: .75rem 0; overflow-y: auto; }

.menu-seccion {
    color: var(--tinta-tenue);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 1rem 1rem .375rem;
}

.menu-enlace {
    color: var(--menu-texto);
    padding: .625rem 1rem;
    font-size: .9375rem;
    border-left: 3px solid transparent;
}
.menu-enlace:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.menu-enlace-chico { font-size: .875rem; padding-top: .4375rem; padding-bottom: .4375rem; }

.menu-enlace.active {
    background: var(--menu-activo);
    color: #fff;
    border-left-color: var(--acento-claro);
    font-weight: 500;
}

/* ---- Tarjetas y formularios ---------------------------------------------- */

.card {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    background: var(--superficie);
}

.card-header {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    font-weight: 600;
    font-size: .9375rem;
    padding: .75rem 1rem;
}

.form-label { font-size: .875rem; font-weight: 500; color: var(--tinta-suave); margin-bottom: .25rem; }

/* 16px minimo: abajo de eso iOS Safari hace zoom al enfocar y descuadra la pantalla.
   El medico usa tableta en el consultorio. */
.form-control, .form-select { font-size: 1rem; border-color: var(--borde); }

.form-control:focus, .form-select:focus {
    border-color: var(--acento-claro);
    box-shadow: 0 0 0 .2rem var(--acento-palido);
}

.form-text { font-size: .8125rem; color: var(--tinta-tenue); }

.btn { font-size: .9375rem; border-radius: .375rem; }
/* Area tactil de 44px: el sistema se usa con el dedo, no solo con raton. */
.btn:not(.btn-sm):not(.btn-link) { min-height: 2.75rem; padding-left: 1rem; padding-right: 1rem; }

.btn-primary { background-color: var(--acento); border-color: var(--acento); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--acento-claro); border-color: var(--acento-claro); }

.btn:focus, .btn:active:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--acento-palido);
}

.form-check-input:checked { background-color: var(--acento); border-color: var(--acento); }

.table { --bs-table-hover-bg: var(--acento-palido); }
.table > thead { font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-tenue); }
.table > :not(caption) > * > * { border-bottom-color: var(--borde); }

.badge { font-weight: 500; }

.validation-message, .text-danger { color: var(--peligro) !important; }
.valid.modified:not([type=checkbox]) { border-color: var(--exito); }
.invalid { border-color: var(--peligro); }

/* ---- Galeria de adjuntos -------------------------------------------------- */

.galeria-adjuntos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 1rem;
}

.adjunto {
    margin: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--superficie);
}

.adjunto img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    display: block;
    background: var(--fondo);
}

.adjunto-documento {
    height: 8rem;
    display: grid;
    place-items: center;
    background: var(--acento-palido);
}

.adjunto-icono { font-weight: 700; color: var(--acento); letter-spacing: .05em; }

.adjunto figcaption {
    padding: .5rem .625rem .625rem;
    font-size: .75rem;
    line-height: 1.35;
}

.adjunto { cursor: context-menu; }

/* Menu de clic derecho sobre una miniatura. La capa cubre la pantalla para cerrarlo
   con cualquier clic afuera, sin depender de JavaScript. */
.menu-capa {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.menu-contextual {
    position: fixed;
    z-index: 1050;
    min-width: 13rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1.5rem rgba(16, 32, 42, .18);
    padding: .25rem;
    display: flex;
    flex-direction: column;
}

.menu-contextual-opcion {
    background: none;
    border: none;
    text-align: left;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--tinta);
    border-radius: .25rem;
    cursor: pointer;
    text-decoration: none;
}
.menu-contextual-opcion:hover { background: var(--acento-palido); color: var(--tinta); text-decoration: none; }
.menu-contextual-opcion:last-child { color: var(--peligro); }

.caja-logo {
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    min-height: 7rem;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.caja-logo img { max-height: 5rem; max-width: 100%; object-fit: contain; }

.foto-destacada {
    width: 100%;
    max-height: 12rem;
    border-radius: var(--radio);
    object-fit: cover;
    border: 1px solid var(--borde);
}

.foto-destacada-vacia {
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    min-height: 9rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    text-align: center;
    padding: 1rem;
}
.foto-destacada-vacia:hover { border-color: var(--acento-claro); background: var(--acento-palido); }
.foto-destacada-vacia.arrastrando { border-color: var(--acento); background: var(--acento-palido); }

/* ---- Pantalla de acceso --------------------------------------------------- */

.contenedor-acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #12242c 0%, #1d3b45 100%);
}

.tarjeta-acceso {
    width: 100%;
    /* Mas ancho que esto y los campos quedan tan largos que cuesta relacionarlos
       con su etiqueta. */
    max-width: 25rem;
    background: var(--superficie);
    border-radius: .75rem;
    padding: 2.25rem;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .25);
}

.acceso-marca {
    width: 3rem; height: 3rem;
    border-radius: .625rem;
    background: var(--acento);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 1.125rem;
    margin-bottom: 1rem;
}

.tarjeta-acceso .form-control { padding: .6rem .75rem; }
.tarjeta-acceso .btn { width: 100%; }

/* Respeta el area segura del notch en iPhone. Sin viewport-fit=cover en el <meta>
   estas variables devuelven 0. */
@supports (padding: max(0px)) {
    .contenedor-acceso {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* ---- Aviso de circuito caido ---------------------------------------------- */

#blazor-error-ui {
    background: #fff4e5;
    border-top: 3px solid var(--alerta);
    bottom: 0;
    display: none;
    left: 0;
    padding: .875rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--tinta);
    box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .1);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .875rem; }
#blazor-error-ui .reload { font-weight: 600; margin-left: .5rem; }

.blazor-error-boundary { background: var(--peligro); padding: 1rem; color: white; border-radius: var(--radio); }
.blazor-error-boundary::after { content: "Ocurrio un error." }

/* ---- Agenda ---------------------------------------------------------------- */

/* El buscador de paciente vive en una columna angosta del renglon de captura:
   la lista de resultados flota encima del contenido en vez de empujarlo hacia
   abajo y descuadrar el resto del renglon. */
.agenda-resultados-paciente {
    position: absolute;
    z-index: 20;
    width: 100%;
    max-height: 12rem;
    overflow-y: auto;
    box-shadow: var(--sombra);
}

/* La tabla de turnos es lo que el medico usa todo el dia: ocupa el ancho completo
   de la pantalla, debajo del renglon compacto de "Agendar turno". */
.agenda-turnos-card { min-height: 60vh; }

/* ---- Vademecum (autocompletado de Receta / Solicitud LAB / Solicitud RX) --- */

.vademecum { position: relative; margin-bottom: .5rem; }

.vademecum-resultados {
    position: absolute;
    z-index: 20;
    width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    box-shadow: var(--sombra);
}

.vademecum-resultados .list-group-item { cursor: pointer; font-size: .875rem; }
.vademecum-resultados .list-group-item.active {
    background-color: var(--acento);
    border-color: var(--acento);
}

/* ---- Alertas de tendencia de crecimiento ------------------------------------ */

.alerta-crecimiento { border-left: 4px solid var(--tinta-tenue); }
.alerta-crecimiento.severidad-vigilar { border-left-color: var(--alerta); background-color: #fff8f1; }
.alerta-crecimiento.severidad-alerta { border-left-color: var(--peligro); background-color: #fef3f2; }

.percentiles-actuales .badge { font-size: .8rem; font-weight: 600; }

/* ---- Graficas de crecimiento ------------------------------------------------ */

.grafica-crecimiento {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .75rem;
    margin-bottom: 1rem;
}

.grafica-svg { width: 100%; height: auto; display: block; }

/* SVG a la izquierda, tabla de "que datos se graficaron" a la derecha -- igual que la
   pantalla del sistema anterior. En pantallas angostas la tabla baja debajo. */
.grafica-con-datos { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.grafica-svg-zona { flex: 1 1 60%; min-width: 0; }

.grafica-datos-tabla {
    flex: 0 0 auto;
    width: 11rem;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.grafica-datos-tabla .table { font-size: .75rem; }
.grafica-datos-tabla th, .grafica-datos-tabla td { padding: .25rem .4rem; white-space: nowrap; }
.grafica-datos-tabla thead th {
    position: sticky;
    top: 0;
    background: var(--superficie);
    color: var(--tinta-tenue);
    text-transform: uppercase;
    font-size: .625rem;
    letter-spacing: .03em;
}

/* Grafica clicable en la cuadricula: el medico la abre sola y en grande para mostrarle al
   papa/mama como va el crecimiento. */
.grafica-clic { cursor: pointer; transition: box-shadow .15s ease; border-radius: var(--radio); }
.grafica-clic:hover { box-shadow: var(--sombra); }
.grafica-clic .grafica-crecimiento { margin-bottom: 0; height: 100%; }

/* Vista expandida: rueda del mouse acerca/aleja, arrastrar mueve. touch-action:none evita
   que el navegador intente su propio pan/zoom de pagina y se pelee con el arrastre. */
.grafica-zoom-contenedor {
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    /* Suficientemente alto para "mostrarle a los papas" sin necesitar acercar todavia. */
    height: min(70vh, 640px);
    display: flex;
    align-items: center;
}
.grafica-zoom-contenedor.arrastrando { cursor: grabbing; }

.grafica-zoom-objetivo {
    width: 100%;
    transform-origin: center center;
    user-select: none;
}
.grafica-zoom-objetivo .grafica-crecimiento { margin-bottom: 0; border: none; }

/* Fondo rosa/azul segun sexo -- convencion visual heredada del sistema original: el
   medico identifica de un vistazo el sexo de la grafica sin leer el titulo. */
.grafica-rosa .grafica-fondo { fill: #fdf2f6; }
.grafica-azul .grafica-fondo { fill: #eff6fb; }

.grafica-linea-referencia { fill: none; stroke: var(--tinta-tenue); stroke-width: 1; opacity: .55; }
.grafica-linea-referencia.grafica-mediana { stroke: var(--tinta-suave); stroke-width: 1.5; opacity: .85; }

.grafica-etiqueta-linea { font-size: 9px; fill: var(--tinta-tenue); dominant-baseline: middle; }

.grafica-eje { stroke: var(--borde); stroke-width: 1; }
.grafica-marca { font-size: 9px; fill: var(--tinta-suave); }
.grafica-titulo-eje { font-size: 10px; fill: var(--tinta-suave); }

.grafica-paciente-linea { fill: none; stroke: var(--acento); stroke-width: 2.5; }
.grafica-paciente-punto { fill: var(--acento); stroke: var(--superficie); stroke-width: 1.5; }

/* ---- Filas de acordeon clicables (p.ej. Esquema de vacunacion) -------------- */

.fila-expandible { cursor: pointer; }
.fila-expandible:hover { background: var(--fondo); }

/* ---- Cartilla de vacunacion: estampas agrupadas por edad -------------------- */

.cartilla-grupo + .cartilla-grupo { margin-top: 1.75rem; }

.cartilla-grupo-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--acento);
}
.cartilla-grupo-titulo::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

.cartilla-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: .85rem;
}

.cartilla-estampa {
    position: relative;
    background: var(--superficie);
    border: 2px dashed var(--borde);
    border-radius: var(--radio);
    padding: .85rem .85rem .75rem;
    min-height: 9rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.cartilla-estampa.pendiente:hover { border-color: var(--acento-claro); box-shadow: var(--sombra); }
.cartilla-estampa.atrasada { border-color: var(--peligro); }
.cartilla-estampa.atrasada:hover { box-shadow: var(--sombra); }
.cartilla-estampa.aplicada {
    cursor: default;
    border-style: solid;
    border-color: var(--exito);
    background: var(--acento-palido);
}

.cartilla-ico {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: var(--tinta-tenue);
}
.cartilla-estampa.atrasada .cartilla-ico { background: var(--peligro); }
.cartilla-estampa.aplicada .cartilla-ico { background: var(--exito); }

.cartilla-nombre { font-weight: 600; font-size: .87rem; line-height: 1.25; }
.cartilla-sub { font-size: .74rem; color: var(--tinta-suave); }
.cartilla-sub-fuerte { color: var(--exito); font-weight: 600; }

.cartilla-flag {
    align-self: flex-start;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--peligro);
}

.cartilla-check {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--exito);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    transform: rotate(-10deg);
}

.cartilla-quitar {
    position: absolute;
    top: .5rem;
    right: 2.05rem;
    font-size: .65rem;
    background: none;
    border: none;
    color: var(--tinta-tenue);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.cartilla-estampa.aplicada:hover .cartilla-quitar { opacity: 1; }
.cartilla-quitar:hover { color: var(--peligro); text-decoration: underline; }

.cartilla-accion {
    margin-top: auto;
    align-self: flex-start;
    font-size: .76rem;
    font-weight: 600;
    color: var(--acento);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.cartilla-accion:hover { text-decoration: underline; }

.cartilla-captura { display: flex; flex-direction: column; gap: .4rem; margin-top: .1rem; cursor: default; }
.cartilla-captura-acciones { display: flex; gap: .4rem; margin-top: .1rem; }

/* ---- Pantallas chicas ------------------------------------------------------ */

@media (max-width: 900px) {
    .app { flex-direction: column; }

    .app-menu { width: 100%; }

    .menu-alternar { display: block; }

    /* El menu arranca colapsado en el telefono: si no, hay que recorrer trece
       enlaces antes de ver el contenido. */
    .menu-lista { display: none; }
    .menu-lista.abierto { display: flex; }

    .app-contenido { padding: 1rem; }
    .app-encabezado { padding: 0 1rem; }
    .app-usuario-nombre { display: none; }
    .app-pie { padding: .625rem 1rem; }
}