/* ---------------------------------------------------------------------------
   Etovital · estilos propios
   Bootstrap 5 hace el trabajo pesado; acá sólo va lo que Bootstrap no cubre.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Paleta de marca Etovital: verde del logo + blanco.

   El verde de marca (#93C01F) es CLARO: con texto blanco encima da 2,14:1,
   muy por debajo del mínimo 4,5:1 de WCAG AA. Por eso hay dos verdes:

     --et-verde       #93C01F  relleno de marca, SIEMPRE con texto oscuro (6,82:1)
     --et-verde-fuerte #5F7F0F  botones y enlaces con texto blanco (4,64:1)
     --et-sidebar     #33450E  barra lateral con texto blanco (10,51:1)

   Usar blanco sobre --et-verde deja el texto ilegible. Es el error fácil de
   cometer al copiar el folleto, que sí lo hace en piezas impresas grandes.
   --------------------------------------------------------------------------- */

:root {
    --et-verde: #93c01f;
    --et-verde-fuerte: #5f7f0f;
    --et-verde-suave: #f2f8e4;
    /* Verde del logo llevado a un valor profundo: misma familia cromática,
       pero calmo para una barra que se mira todo el día. El #93c01f queda
       reservado como ACENTO, no como fondo grande. */
    --et-sidebar: #496211;
    --et-sidebar-hover: rgba(255, 255, 255, 0.12);
    --et-sidebar-texto: #e8f1d6;
    --et-tinta: #1f2d08;
    --et-acento: var(--et-verde-fuerte);
    --et-ancho-lateral: 230px;
    --et-borde: #e4e9dd;

    /* Bootstrap toma su color primario de estas variables. */
    --bs-primary: #5f7f0f;
    --bs-primary-rgb: 95, 127, 15;
    --bs-link-color: #4d670c;
    --bs-link-hover-color: #3a4e09;
    --bs-link-color-rgb: 77, 103, 12;
}

body {
    background: #f7f9f4;
    font-size: 0.95rem;
    color: #26301a;
}

/* --- Bootstrap repintado con la marca ------------------------------------ */

.btn-primary {
    --bs-btn-bg: var(--et-verde-fuerte);
    --bs-btn-border-color: var(--et-verde-fuerte);
    --bs-btn-hover-bg: #4d670c;
    --bs-btn-hover-border-color: #4d670c;
    --bs-btn-active-bg: #3a4e09;
    --bs-btn-active-border-color: #3a4e09;
    --bs-btn-disabled-bg: #a8bd7e;
    --bs-btn-disabled-border-color: #a8bd7e;
}

.btn-outline-primary {
    /* Mas profundo que --et-verde-fuerte: en trazo fino ese tono se lee
       mostaza en vez de verde. */
    --bs-btn-color: #45600a;
    --bs-btn-border-color: #7f9e3a;
    --bs-btn-hover-bg: var(--et-verde-fuerte);
    --bs-btn-hover-border-color: var(--et-verde-fuerte);
    --bs-btn-active-bg: #4d670c;
    --bs-btn-active-border-color: #4d670c;
}

/* El badge "Confirmado" usa el verde de marca, y por eso lleva texto oscuro. */
.text-bg-primary {
    background-color: var(--et-verde) !important;
    color: var(--et-tinta) !important;
}

.text-success { color: var(--et-verde-fuerte) !important; }
.text-primary { color: var(--et-verde-fuerte) !important; }

.form-control:focus,
.form-select:focus {
    border-color: var(--et-verde);
    box-shadow: 0 0 0 0.2rem rgba(147, 192, 31, 0.25);
}

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

a { text-decoration-color: rgba(95, 127, 15, 0.35); }

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

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

.contenido {
    flex: 1 1 auto;
    padding: 1.5rem;
    min-width: 0; /* deja que las tablas hagan scroll en vez de desbordar */
}

@media (min-width: 992px) {
    .contenido {
        margin-left: var(--et-ancho-lateral);
        padding: 2rem 2.25rem;
    }
}

/* --- Barra lateral ------------------------------------------------------- */

.barra-lateral {
    background: var(--et-sidebar);
    color: var(--et-sidebar-texto);
    width: var(--et-ancho-lateral);
}

@media (min-width: 992px) {
    /* Bootstrap fuerza `background-color: transparent !important` sobre
       .offcanvas-lg y su .offcanvas-body a partir de este breakpoint, cuando el
       offcanvas deja de ser deslizable y pasa a ser una columna fija. Sin estos
       !important la barra queda transparente y el texto claro se vuelve
       ilegible sobre el fondo de la página. */
    .barra-lateral.offcanvas-lg,
    .barra-lateral.offcanvas-lg .offcanvas-body {
        background-color: var(--et-sidebar) !important;
    }

    .barra-lateral {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
    }
}

.navbar-movil {
    background: var(--et-sidebar);
}

.marca {
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1.25rem 1rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.marca-icono { font-size: 1.4rem; }

.nav-lateral {
    padding: 0.75rem 0.5rem;
    gap: 0.15rem;
}

.nav-lateral .nav-link {
    color: var(--et-sidebar-texto);
    border-radius: 0.4rem;
    padding: 0.6rem 0.85rem;
    font-weight: 500;
}

.nav-lateral .nav-link:hover {
    background: var(--et-sidebar-hover);
    color: #fff;
}

.nav-lateral .nav-link.active {
    /* Acá sí entra el verde de marca, como acento sobre el fondo profundo. */
    background: var(--et-verde);
    color: #22300a;
    font-weight: 600;
}

.pie-lateral {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.85rem;
}

.usuario-nombre { color: #fff; font-weight: 600; }
.usuario-email  { color: #b7cb8f; font-size: 0.78rem; word-break: break-all; }

/* --- Pantallas sin sesión ------------------------------------------------ */

.pantalla-invitado {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(160deg, #93c01f 0%, #6f9417 100%);
    padding: 1rem;
}

.caja-login { width: 100%; max-width: 25rem; margin: 0 auto; }
.login-icono { font-size: 2.5rem; line-height: 1; }

.pantalla-error { max-width: 32rem; margin: 6rem auto; text-align: center; }

/* --- Cabecera de página -------------------------------------------------- */

.cabecera-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cabecera-pagina h1 { font-size: 1.5rem; margin: 0; font-weight: 600; }

/* --- Métricas del día ---------------------------------------------------- */

.tarjetas-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.metrica {
    background: #fff;
    border: 1px solid var(--et-borde);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.metrica-valor { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.metrica-etiqueta { font-size: 0.78rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }

/* --- Navegador de fechas ------------------------------------------------- */

.barra-fecha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--et-borde);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.fecha-titulo {
    font-weight: 600;
    font-size: 1.05rem;
    min-width: 15rem;
    display: inline-block;
}

/* Sólo la inicial. `text-transform: capitalize` daría
   "Miércoles 19 De Agosto De 2026", con las preposiciones en mayúscula. */
.fecha-titulo::first-letter {
    text-transform: uppercase;
}

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

.franja {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    border-top: 1px solid var(--et-borde);
    min-height: 3.5rem;
}

.franja:last-child { border-bottom: 1px solid var(--et-borde); }

.franja-hora {
    padding: 0.6rem 0.75rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    background: #fbfcfd;
    border-right: 1px solid var(--et-borde);
}

.franja-turnos { padding: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; }

.turno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    background: #fff;
    border: 1px solid var(--et-borde);
    border-left: 4px solid var(--et-acento);
    border-radius: 0.4rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.turno:hover { box-shadow: 0 2px 10px rgba(15, 40, 60, 0.1); }

.turno[data-estado="cancelado"],
.turno[data-estado="ausente"] { opacity: 0.62; border-left-color: #94a3b8; }

.turno[data-estado="atendido"]   { border-left-color: #16a34a; }
.turno[data-estado="pendiente"]  { border-left-color: #f59e0b; }
.turno[data-estado="confirmado"] { border-left-color: #2563eb; }
.turno[data-estado="en_espera"]  { border-left-color: #0ea5e9; }

.turno-hora     { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3.2rem; }
.turno-paciente { font-weight: 600; }
.turno-tutor,
.turno-tipo     { color: #64748b; font-size: 0.87rem; }
.turno-acciones { margin-left: auto; display: flex; gap: 0.35rem; }

.hueco-libre { color: #b6c2cf; font-size: 0.85rem; padding: 0.55rem 0.6rem; }

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

.grilla-semana {
    display: grid;
    grid-template-columns: repeat(7, minmax(9.5rem, 1fr));
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.dia-semana {
    background: #fff;
    border: 1px solid var(--et-borde);
    border-radius: 0.5rem;
    min-height: 11rem;
    display: flex;
    flex-direction: column;
}

.dia-semana.es-hoy { border-color: var(--et-verde); box-shadow: 0 0 0 2px rgba(147, 192, 31, 0.25); }

.dia-cabecera {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--et-borde);
    font-size: 0.8rem;
    text-transform: capitalize;
}

.dia-cabecera strong { display: block; font-size: 1.05rem; }

.dia-cuerpo { padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }

.mini-turno {
    display: block;
    border-left: 3px solid var(--et-acento);
    background: #f8fafc;
    border-radius: 0.25rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.mini-turno:hover { background: var(--et-verde-suave); }
.mini-turno[data-estado="cancelado"],
.mini-turno[data-estado="ausente"] { opacity: 0.6; text-decoration: line-through; }
.mini-turno-hora { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Tablas y fichas ----------------------------------------------------- */

.panel {
    background: #fff;
    border: 1px solid var(--et-borde);
    border-radius: 0.5rem;
}

.panel-cabecera {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--et-borde);
    font-weight: 600;
}

.panel-cuerpo { padding: 1.1rem; }

.tabla-datos { margin: 0; }
.tabla-datos th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; }
.tabla-datos td { vertical-align: middle; }
.hc { font-variant-numeric: tabular-nums; color: #64748b; font-size: 0.85rem; }

.ficha-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    align-items: flex-start;
}

.dato { margin-bottom: 0.6rem; }
.dato-etiqueta { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.dato-valor { font-weight: 500; }

.contenedor-flash { position: sticky; top: 0.5rem; z-index: 1050; }

/* En el login el <main> ocupa todo el ancho para poder centrar la tarjeta, así
   que el flash heredaba ese ancho y quedaba como una banda de punta a punta.
   Acá se ata al mismo ancho de la tarjeta y se apoya justo encima de ella. */
/* El <main> se acota al ancho de la tarjeta: si no, el flex de
   .pantalla-invitado lo estira y todo lo de adentro hereda ese ancho. */
.caja-invitado { max-width: 25rem; }

.pantalla-invitado .contenedor-flash {
    position: static;
    width: 100%;
    max-width: 25rem;
    margin: 0 auto 0.75rem;
}

.pantalla-invitado .contenedor-flash .alert {
    box-shadow: 0 2px 10px rgba(31, 45, 8, 0.15);
    margin-bottom: 0;
}

/* --- Buscador con autocompletado ----------------------------------------- */

.autocompletar { position: relative; }

.autocompletar-lista {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--et-borde);
    border-radius: 0.4rem;
    box-shadow: 0 6px 20px rgba(15, 40, 60, 0.12);
    max-height: 17rem;
    overflow-y: auto;
    display: none;
}

.autocompletar-lista.visible { display: block; }

.autocompletar-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.autocompletar-item:last-child { border-bottom: 0; }
.autocompletar-item:hover,
.autocompletar-item.resaltado { background: var(--et-verde-suave); }
.autocompletar-item .titulo { font-weight: 600; }
.autocompletar-item .detalle { font-size: 0.8rem; color: #64748b; }
.autocompletar-vacio { padding: 0.75rem; color: #64748b; font-size: 0.87rem; }

/* Botones grandes: la app se usa con el paciente en la camilla. */
.btn-accion { min-height: 2.4rem; }

@media print {
    .barra-lateral, .navbar-movil, .turno-acciones, .btn { display: none !important; }
    .contenido { margin: 0; padding: 0; }
}

/* --- Logotipo ------------------------------------------------------------- */

.marca-logo {
    max-width: 158px;
    height: auto;
    display: block;
}

.login-logo {
    max-width: 210px;
    height: auto;
}

.navbar-movil .navbar-brand .marca-logo { max-width: 120px; }

/* --- Barra de guardado de la evaluación ---------------------------------- */

.barra-guardado {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--et-borde);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    box-shadow: 0 -4px 16px rgba(15, 40, 60, 0.08);
}

.accordion-button:not(.collapsed) {
    background: var(--et-verde-suave);
    color: var(--et-tinta);
    box-shadow: none;
}

.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(147, 192, 31, 0.25); }

/* Las tablas clínicas de cuatro miembros no se pueden apretar más allá de
   cierto punto sin volverse ilegibles: se deja scroll horizontal. */
.accordion-body .table-responsive table { min-width: 44rem; }

/* El outline blanco sobre el verde quedaba estridente. Un relleno translúcido
   se integra con la barra y sigue leyéndose bien. */
.btn-salir {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    width: 100%;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.4rem;
    transition: background 0.12s ease;
}

.btn-salir:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* --- Historia clínica ----------------------------------------------------- */

.sin-registrar { color: #98a58b; font-style: italic; font-size: 0.9em; }

.tabla-clinica th { font-weight: 600; }
.tabla-clinica td, .tabla-clinica th { white-space: nowrap; }

.galeria-archivos { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.archivo-item {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    border: 1px solid var(--et-borde);
    border-radius: 0.4rem;
    padding: 0.5rem;
    background: #fbfcf9;
    max-width: 20rem;
}

.archivo-miniatura {
    width: 64px; height: 64px; object-fit: cover;
    border-radius: 0.3rem; cursor: pointer; flex: 0 0 auto;
}

.archivo-icono {
    width: 64px; height: 64px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--et-verde-suave); color: var(--et-verde-fuerte);
    border-radius: 0.3rem; font-weight: 700; font-size: 1.1rem; cursor: pointer;
}

.archivo-datos { min-width: 0; }
.archivo-nombre { font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-peso { font-size: 0.75rem; color: #7a8a6b; }

/* --- Timeline ------------------------------------------------------------- */

.timeline { position: relative; padding-left: 1.75rem; }

.timeline::before {
    content: ''; position: absolute; left: 0.55rem; top: 0.3rem; bottom: 0.3rem;
    width: 2px; background: var(--et-borde);
}

.timeline-item { position: relative; padding-bottom: 1.1rem; }

.timeline-item::before {
    content: ''; position: absolute; left: -1.32rem; top: 0.35rem;
    width: 0.7rem; height: 0.7rem; border-radius: 50%;
    background: var(--et-verde); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--et-borde);
}

.timeline-fecha { font-size: 0.78rem; color: #7a8a6b; font-variant-numeric: tabular-nums; }
.timeline-titulo { font-weight: 600; }
.timeline-detalle { font-size: 0.88rem; color: #55604a; }

/* --- Sesiones (HITO 3) ---------------------------------------------------- */

.botonera-terapias { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.card-tratamiento {
    border: 1px solid var(--et-borde);
    border-left: 4px solid var(--et-verde);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background: #fff;
}

.card-tratamiento-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: var(--et-verde-suave);
    border-bottom: 1px solid var(--et-borde);
    border-radius: 0.4rem 0.4rem 0 0;
}

.card-tratamiento-cuerpo { padding: 0.75rem 0.85rem; }
.card-tratamiento .form-label { font-size: 0.78rem; margin-bottom: 0.15rem; color: #5c6b4a; }

.sesion-anulada { opacity: 0.72; border-left: 4px solid #dc3545; }

.tratamiento-visto {
    border-left: 3px solid var(--et-verde);
    padding: 0.5rem 0 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.tratamiento-visto:last-child { margin-bottom: 0; }
.tratamiento-visto-titulo { font-weight: 600; }

.tratamiento-visto-params {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.25rem;
    font-size: 0.88rem;
}

.param-nombre { color: #7a8a6b; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }

/* En tablet las cards se apilan: nunca una tabla horizontal para cargar
   parámetros de terapia. */
@media (max-width: 820px) {
    .botonera-terapias .btn { flex: 1 1 auto; }
}

/* ===========================================================================
   HITO 4 · comparador, evolución y alta
   =========================================================================== */

/* Alto fijo para el canvas: Chart.js con maintainAspectRatio:false necesita un
   contenedor con altura propia, si no colapsa a cero. */
.grafico {
    position: relative;
    height: 300px;
    width: 100%;
}

@media (max-width: 820px) {
    .grafico { height: 240px; }

    /* Seis pestañas no entran en una fila de tablet: se dejan scrollear en
       horizontal en vez de romper el alto de la cabecera. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link { white-space: nowrap; }
}

/* Fila del comparador con cambio: el amarillo de Bootstrap sobre nuestro fondo
   queda demasiado saturado. */
.tabla-datos > tbody > tr.table-warning > * {
    --bs-table-bg: #fbf7e3;
    --bs-table-color: var(--et-tinta);
}