/* ==========================================================================
   Instituto Veterinario · hoja de estilos
   --------------------------------------------------------------------------
   Sobre Bootstrap 5.3. Lo que Bootstrap resuelve con clases se resuelve con
   clases; aquí va lo propio del sistema:

     1. Tipografía y tokens       6. Tablas
     2. Armazón y barra lateral   7. Etiquetas de estado
     3. Barra superior            8. El paciente (chip, encabezado)
     4. Encabezado de pantalla    9. Grilla de horas del hospital
     5. Tarjetas y formularios   10. Tablero, impresión, utilidades

   El color del instituto llega como variables desde el servidor (la paleta
   se calcula del color que se elige en «Datos del instituto»). Nada de
   resplandores ni degradados decorativos: el color se usa para decir algo.
   ========================================================================== */

/* --- 1. Tipografía y tokens -------------------------------------------- */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../lib/fuentes/plus-jakarta-sans/files/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../lib/fuentes/plus-jakarta-sans/files/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../lib/fuentes/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../lib/fuentes/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
    --bs-font-sans-serif: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --bs-font-monospace: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 0.875rem;

    /* Los tonos de la paleta del instituto (los sobrescribe _Paleta). */
    --instituto: #3D6FD9;
    --instituto-rgb: 61, 111, 217;
    --instituto-oscuro: #33589F;
    --instituto-suave: #E9EFFB;
    --instituto-texto: #FFFFFF;
    --instituto-enfasis: #3D6FD9;
    --barra-fondo: #141B2D;
    --barra-borde: #1F2A44;

    /* El acento cálido: lo urgente, lo que pide atención. */
    --acento: #E26D35;
    --acento-suave: #FCEDE4;

    --fondo-de-pagina: #F3F5F9;
    --superficie: #FFFFFF;
    --superficie-hundida: #F7F8FB;
    --borde: #E2E7F0;
    --borde-fuerte: #CBD3E1;
    --texto-tenue: #5E6A80;
    --sombra-de-tarjeta: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);

    /* Estados (los mismos en toda la aplicación). */
    --estado-gris: #6B7487;
    --estado-azul: #2F6FE4;
    --estado-celeste: #0E8FB5;
    --estado-ambar: #B7791F;
    --estado-naranjo: #D9661F;
    --estado-rojo: #CF3B3B;
    --estado-verde: #1F8A5B;
    --estado-violeta: #6D55C7;

    --ancho-de-la-barra: 16rem;
}

[data-bs-theme="dark"] {
    --fondo-de-pagina: #0E1220;
    --superficie: #161C2C;
    --superficie-hundida: #121726;
    --borde: #262F45;
    --borde-fuerte: #34405C;
    --texto-tenue: #98A3BA;
    --sombra-de-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.3);
    --acento-suave: rgba(226, 109, 53, 0.16);
    --instituto-suave: rgba(var(--instituto-rgb), 0.16);
    --bs-body-bg: var(--fondo-de-pagina);
    --bs-tertiary-bg: var(--superficie-hundida);
}

html {
    font-size: 15px;
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--fondo-de-pagina);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Cifras, fichas, RUT y montos: monoespaciadas, para que se alineen. */
.cifra, .ficha, .rut, .monto {
    font-family: var(--bs-font-monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.monto {
    white-space: nowrap;
}

.texto-tenue {
    color: var(--texto-tenue) !important;
}

a {
    color: var(--instituto-enfasis);
    text-decoration: none;
    text-underline-offset: 0.15em;
}

a:not(.btn):hover {
    text-decoration: underline;
}

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

/* Los botones y controles principales con el color del instituto. */
.btn-primary {
    --bs-btn-bg: var(--instituto);
    --bs-btn-border-color: var(--instituto);
    --bs-btn-color: var(--instituto-texto);
    --bs-btn-hover-bg: var(--instituto-oscuro);
    --bs-btn-hover-border-color: var(--instituto-oscuro);
    --bs-btn-hover-color: var(--instituto-texto);
    --bs-btn-active-bg: var(--instituto-oscuro);
    --bs-btn-active-border-color: var(--instituto-oscuro);
    --bs-btn-disabled-bg: var(--instituto);
    --bs-btn-disabled-border-color: var(--instituto);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--instituto-enfasis);
    --bs-btn-border-color: rgba(var(--instituto-rgb), 0.45);
    --bs-btn-hover-bg: var(--instituto);
    --bs-btn-hover-border-color: var(--instituto);
    --bs-btn-hover-color: var(--instituto-texto);
    --bs-btn-active-bg: var(--instituto-oscuro);
    --bs-btn-active-border-color: var(--instituto-oscuro);
}

.btn {
    font-weight: 600;
}

.btn-acento {
    --bs-btn-bg: var(--acento);
    --bs-btn-border-color: var(--acento);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #C95A26;
    --bs-btn-hover-border-color: #C95A26;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #B5501F;
    --bs-btn-active-border-color: #B5501F;
}

.btn-sutil {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--superficie-hundida);
    --bs-btn-hover-border-color: var(--borde);
    --bs-btn-active-bg: var(--borde);
}

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

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--instituto-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--instituto-rgb), 0.18);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--instituto);
    --bs-nav-pills-link-active-color: var(--instituto-texto);
}

.page-link {
    --bs-pagination-color: var(--instituto-enfasis);
    --bs-pagination-active-bg: var(--instituto);
    --bs-pagination-active-border-color: var(--instituto);
}

/* --- 2. Armazón y barra lateral ----------------------------------------- */

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

.columna-principal {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.contenido {
    flex: 1 1 auto;
    padding: 1.25rem 1rem 2rem;
}

@media (min-width: 992px) {
    .contenido {
        padding: 1.5rem 1.75rem 2.5rem;
    }
}

.barra-lateral {
    display: flex;
    flex-direction: column;
    background-color: var(--barra-fondo);
    color: rgba(255, 255, 255, 0.78);
    --bs-offcanvas-bg: var(--barra-fondo);
    --bs-offcanvas-width: 18rem;
}

@media (min-width: 992px) {
    .barra-lateral {
        width: var(--ancho-de-la-barra);
        flex: 0 0 var(--ancho-de-la-barra);
        position: sticky;
        top: 0;
        height: 100vh;
        border-right: 1px solid var(--barra-borde);
        /* Bootstrap deja transparente el «offcanvas-lg» en pantalla grande. */
        background-color: var(--barra-fondo) !important;
    }
}

.barra-lateral-marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
}

.barra-lateral-marca a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}

.barra-lateral-logo {
    height: 2.25rem;
    max-width: 9rem;
    object-fit: contain;
}

.barra-lateral-icono {
    display: grid;
    place-items: center;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: var(--instituto);
    color: var(--instituto-texto);
    font-size: 1.15rem;
}

.barra-lateral-nombre {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.barra-lateral-nombre small {
    display: block;
    font-weight: 500;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0;
}

.barra-lateral-cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.25rem 0.625rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.barra-lateral-pie {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--barra-borde);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

/* El botón de Capacitación, en el pie de la barra lateral. */
.boton-de-capacitacion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--barra-borde);
    border-radius: var(--bs-border-radius);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.15s;
}

.boton-de-capacitacion:hover,
.boton-de-capacitacion:focus-visible,
.boton-de-capacitacion.activo {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.menu-lateral-grupo {
    margin-top: 0.25rem;
}

/* El título del grupo es el botón que lo abre y lo cierra. Alto suficiente
   para tocarlo con el dedo; la flecha gira cuando el grupo está abierto. */
.menu-lateral-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.35rem 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: start;
    color: rgba(255, 255, 255, 0.55);
    transition: background-color 0.15s, color 0.15s;
}

.menu-lateral-titulo span {
    flex: 1 1 auto;
}

.menu-lateral-titulo i {
    font-size: 0.85rem;
}

.menu-lateral-titulo:hover,
.menu-lateral-titulo:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.menu-lateral-titulo:focus-visible {
    outline: 2px solid var(--instituto);
    outline-offset: -2px;
}

/* El grupo de la pantalla actual se reconoce también cerrado. */
.con-la-activa > .menu-lateral-titulo {
    color: #fff;
}

.menu-lateral-flecha {
    font-size: 0.7rem !important;
    opacity: 0.7;
    transition: transform 0.2s;
}

.menu-lateral-titulo:not(.collapsed) .menu-lateral-flecha {
    transform: rotate(180deg);
}

.menu-lateral-opciones {
    padding: 0.1rem 0 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
    .menu-lateral-flecha {
        transition: none;
    }
}

.menu-lateral-opcion {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem 0.625rem;
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
}

.menu-lateral-opcion i {
    font-size: 1rem;
    opacity: 0.75;
    width: 1.1rem;
    text-align: center;
}

.menu-lateral-opcion:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* La activa se marca con un filete del color y fondo; no solo con color. */
.menu-lateral-opcion.activa {
    background: rgba(var(--instituto-rgb), 0.22);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--instituto);
}

.menu-lateral-opcion.activa i {
    opacity: 1;
}

/* --- 3. Barra superior --------------------------------------------------- */

.barra-superior {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background-color: rgba(var(--bs-body-bg-rgb), 0.92);
    border-bottom: 1px solid var(--borde);
}

[data-bs-theme="dark"] .barra-superior {
    background-color: rgba(14, 18, 32, 0.92);
}

@supports (backdrop-filter: blur(1px)) {
    .barra-superior {
        backdrop-filter: saturate(1.4) blur(8px);
    }
}

@media (min-width: 992px) {
    .barra-superior {
        padding: 0.65rem 1.75rem;
    }
}

.buscador-de-arriba {
    position: relative;
    flex: 1 1 auto;
    max-width: 30rem;
}

.buscador-de-arriba i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-tenue);
    pointer-events: none;
}

.buscador-de-arriba input {
    padding-left: 2.2rem;
    background-color: var(--superficie);
    border-color: var(--borde);
}

.buscador-de-arriba kbd {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    background: var(--superficie-hundida);
    color: var(--texto-tenue);
    border: 1px solid var(--borde);
}

.selector-de-sucursal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--instituto-suave);
    color: var(--instituto-enfasis);
    font-weight: 700;
    font-size: 0.78rem;
    flex: 0 0 auto;
}

/* --- 4. Encabezado de pantalla ------------------------------------------- */
/* Título, una línea que dice para qué sirve la pantalla y, a la derecha, la
   acción principal. Es lo mismo en todas las pantallas. */

.encabezado-de-pantalla {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.encabezado-de-pantalla h1 {
    font-size: 1.5rem;
    margin: 0;
}

.encabezado-de-pantalla p {
    margin: 0.2rem 0 0;
    color: var(--texto-tenue);
    font-size: 0.875rem;
    max-width: 48rem;
}

.encabezado-de-pantalla .acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.migas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--texto-tenue);
    margin-bottom: 0.35rem;
}

.migas a {
    color: inherit;
    text-decoration: none;
}

.migas a:hover {
    color: var(--instituto-enfasis);
    text-decoration: underline;
}

.migas span + span::before,
.migas a + span::before,
.migas a + a::before {
    content: "›";
    margin-right: 0.35rem;
}

/* --- 5. Tarjetas y formularios ------------------------------------------- */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--sombra-de-tarjeta);
}

.tarjeta-cuerpo {
    padding: 1.1rem 1.25rem;
}

.tarjeta-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--borde);
}

.tarjeta-titulo h2, .tarjeta-titulo h3 {
    font-size: 1rem;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tarjeta-titulo .subtitulo {
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.tarjeta + .tarjeta {
    margin-top: 1rem;
}

/* El filtro de un listado: una franja hundida arriba de la tabla. */
.barra-de-filtros {
    background: var(--superficie-hundida);
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius-lg);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.barra-de-filtros .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--texto-tenue);
    margin-bottom: 0.25rem;
}

.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

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

.obligatorio::after {
    content: " *";
    color: var(--estado-rojo);
}

/* Los errores se muestran después de tocar el campo, no mientras se escribe. */
.form-control:user-invalid,
.form-select:user-invalid {
    border-color: var(--estado-rojo);
}

.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: var(--estado-rojo);
    background-color: rgba(207, 59, 59, 0.04);
}

.field-validation-error {
    display: block;
    font-size: 0.78rem;
    color: var(--estado-rojo);
    margin-top: 0.25rem;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

.seccion-del-formulario {
    padding: 1.1rem 1.25rem;
}

.seccion-del-formulario + .seccion-del-formulario {
    border-top: 1px solid var(--borde);
}

.seccion-del-formulario > h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    margin-bottom: 0.85rem;
}

.pie-del-formulario {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
    z-index: 5;
}

/* Elegir entre pocas cosas con botones y no con una lista. */
.selector-de-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.selector-de-botones input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.selector-de-botones label {
    padding: 0.38rem 0.8rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    background: var(--superficie);
}

.selector-de-botones input:checked + label {
    background: var(--instituto);
    border-color: var(--instituto);
    color: var(--instituto-texto);
}

.selector-de-botones input:focus-visible + label {
    outline: 2px solid var(--instituto-enfasis);
    outline-offset: 2px;
}

/* Las pestañas de una ficha. */
.pestanas {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 1.25rem;
    scrollbar-width: thin;
}

.pestanas a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--texto-tenue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

.pestanas a:hover {
    color: var(--bs-body-color);
}

.pestanas a.activa {
    color: var(--instituto-enfasis);
    border-bottom-color: var(--instituto);
}

.pestanas .contador {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--superficie-hundida);
    border: 1px solid var(--borde);
    color: var(--texto-tenue);
}

/* --- 6. Tablas ------------------------------------------------------------ */

.tabla {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(var(--instituto-rgb), 0.045);
    margin: 0;
    font-size: 0.875rem;
}

.tabla > thead th {
    position: sticky;
    top: 0;
    background: var(--superficie-hundida);
    color: var(--texto-tenue);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
    padding: 0.6rem 0.75rem;
    z-index: 1;
}

.tabla > tbody td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
    border-color: var(--borde);
}

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

.tabla .acciones-de-la-fila {
    text-align: right;
    white-space: nowrap;
}

.tabla tr.fila-apagada td {
    color: var(--texto-tenue);
}

.tabla-contenedor {
    overflow-x: auto;
}

.sin-resultados {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--texto-tenue);
}

.sin-resultados i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.sin-resultados strong {
    display: block;
    color: var(--bs-body-color);
    margin-bottom: 0.15rem;
}

/* --- 7. Etiquetas de estado ---------------------------------------------- */
/* Un punto de color más la palabra: nunca solo color. */

.estado {
    --color: var(--estado-gris);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color);
    background: color-mix(in srgb, var(--color) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--color) 28%, transparent);
}

.estado::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color);
}

.estado.gris { --color: var(--estado-gris); }
.estado.azul { --color: var(--estado-azul); }
.estado.celeste { --color: var(--estado-celeste); }
.estado.ambar { --color: var(--estado-ambar); }
.estado.naranjo { --color: var(--estado-naranjo); }
.estado.rojo { --color: var(--estado-rojo); }
.estado.verde { --color: var(--estado-verde); }
.estado.violeta { --color: var(--estado-violeta); }

[data-bs-theme="dark"] .estado {
    background: color-mix(in srgb, var(--color) 20%, transparent);
    color: color-mix(in srgb, var(--color) 60%, white);
}

/* La etiqueta de un área del hospital, con su propio color. */
.etiqueta-de-area {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color, var(--estado-gris));
    background: color-mix(in srgb, var(--color, var(--estado-gris)) 12%, transparent);
    white-space: nowrap;
}

/* El triage de una urgencia: una franja al costado y el número. */
.triage {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.4rem;
    font-weight: 800;
    font-size: 0.8rem;
    color: #fff;
}

.triage-1 { background: #B42318; }
.triage-2 { background: #D9661F; }
.triage-3 { background: #B7791F; }
.triage-4 { background: #2F6FE4; }
.triage-5 { background: #6B7487; }

.alerta-del-paciente {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #9F1D1D;
    background: #FDECEC;
    border: 1px solid #F6C9C9;
}

[data-bs-theme="dark"] .alerta-del-paciente {
    color: #FFB4B4;
    background: rgba(207, 59, 59, 0.18);
    border-color: rgba(207, 59, 59, 0.4);
}

/* --- 8. El paciente ------------------------------------------------------- */

/* El chip con que se nombra a un paciente en cualquier lista. */
.paciente {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.paciente:hover .paciente-nombre {
    color: var(--instituto-enfasis);
    text-decoration: underline;
}

.paciente-icono {
    display: grid;
    place-items: center;
    flex: 0 0 2.1rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    background: var(--instituto-suave);
    color: var(--instituto-enfasis);
    font-size: 1.05rem;
}

.paciente-icono.felino {
    background: #FCEFE6;
    color: #B95A1E;
}

.paciente-icono.otro {
    background: #E9F5EF;
    color: #1F7A50;
}

[data-bs-theme="dark"] .paciente-icono.felino { background: rgba(226, 109, 53, 0.18); color: #F2A77F; }
[data-bs-theme="dark"] .paciente-icono.otro { background: rgba(31, 138, 91, 0.2); color: #7DD3A8; }

.paciente-nombre {
    display: block;
    font-weight: 700;
    line-height: 1.2;
}

.paciente-detalle {
    display: block;
    font-size: 0.78rem;
    color: var(--texto-tenue);
    line-height: 1.25;
}

.paciente.fallecido .paciente-nombre::after {
    content: " †";
    color: var(--texto-tenue);
}

/* El encabezado de la ficha: quién es, de quién es, y lo que no se puede
   pasar por alto. */
.encabezado-del-paciente {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    padding: 1.1rem 1.25rem;
}

@media (min-width: 992px) {
    .encabezado-del-paciente {
        grid-template-columns: auto 1.4fr 1fr auto;
        align-items: center;
    }
}

.encabezado-del-paciente .retrato {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: var(--instituto-suave);
    color: var(--instituto-enfasis);
    font-size: 1.9rem;
}

.encabezado-del-paciente .retrato.felino { background: #FCEFE6; color: #B95A1E; }
.encabezado-del-paciente .retrato.otro { background: #E9F5EF; color: #1F7A50; }
[data-bs-theme="dark"] .encabezado-del-paciente .retrato.felino { background: rgba(226, 109, 53, 0.18); color: #F2A77F; }
[data-bs-theme="dark"] .encabezado-del-paciente .retrato.otro { background: rgba(31, 138, 91, 0.2); color: #7DD3A8; }

.encabezado-del-paciente h1 {
    font-size: 1.6rem;
    margin: 0;
}

.datos-en-linea {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.85rem;
    color: var(--texto-tenue);
    margin: 0;
    padding: 0;
    list-style: none;
}

.datos-en-linea strong {
    color: var(--bs-body-color);
    font-weight: 600;
}

.dato {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dato dt, .dato .rotulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.dato dd, .dato .valor {
    margin: 0;
    font-weight: 600;
}

.lista-de-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.9rem 1.25rem;
    margin: 0;
}

/* La línea de tiempo del historial clínico. */
.linea-de-tiempo {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
}

.linea-de-tiempo::before {
    content: "";
    position: absolute;
    left: 0.45rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: var(--borde);
}

.linea-de-tiempo > li {
    position: relative;
    padding-bottom: 1.1rem;
}

.linea-de-tiempo > li::before {
    content: "";
    position: absolute;
    left: -1.32rem;
    top: 0.35rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--superficie);
    border: 2px solid var(--color, var(--instituto));
}

.linea-de-tiempo .cuando {
    font-size: 0.75rem;
    color: var(--texto-tenue);
    font-weight: 600;
}

/* --- 9. Grilla de horas del hospital -------------------------------------- */
/* Una fila por indicación y una columna por hora. Cada casilla dice su
   estado con color y con un símbolo. La hora actual se marca con una línea. */

.grilla-de-horas {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius);
    background: var(--superficie);
}

.grilla-de-horas table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.8rem;
}

.grilla-de-horas th, .grilla-de-horas td {
    border-bottom: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    padding: 0;
}

.grilla-de-horas thead th {
    position: sticky;
    top: 0;
    background: var(--superficie-hundida);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--texto-tenue);
    text-align: center;
    padding: 0.4rem 0;
    z-index: 2;
}

.grilla-de-horas thead th.hora-actual {
    color: var(--acento);
}

.grilla-de-horas .columna-fija {
    position: sticky;
    left: 0;
    background: var(--superficie);
    z-index: 1;
    min-width: 15rem;
    max-width: 18rem;
    padding: 0.5rem 0.75rem;
    text-align: left;
    box-shadow: 1px 0 0 var(--borde);
}

.grilla-de-horas thead .columna-fija {
    z-index: 3;
    background: var(--superficie-hundida);
}

.grilla-de-horas .indicacion-nombre {
    font-weight: 700;
    line-height: 1.2;
}

.grilla-de-horas .indicacion-detalle {
    font-size: 0.72rem;
    color: var(--texto-tenue);
}

.casilla {
    width: 2.6rem;
    min-width: 2.6rem;
    height: 2.6rem;
    text-align: center;
    vertical-align: middle;
}

.casilla.hora-actual {
    background: color-mix(in srgb, var(--acento) 7%, transparent);
    box-shadow: inset 2px 0 0 var(--acento);
}

.dosis {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    border: 0;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.dosis:disabled {
    cursor: default;
}

.dosis.pendiente {
    background: var(--superficie);
    border: 2px solid var(--estado-azul);
    color: var(--estado-azul);
}

.dosis.toca-ahora {
    background: var(--estado-azul);
    color: #fff;
}

.dosis.atrasada {
    background: var(--estado-rojo);
    color: #fff;
}

.dosis.cumplida {
    background: color-mix(in srgb, var(--estado-verde) 16%, transparent);
    color: var(--estado-verde);
}

.dosis.omitida {
    background: color-mix(in srgb, var(--estado-gris) 16%, transparent);
    color: var(--estado-gris);
}

.dosis.suspendida {
    background: repeating-linear-gradient(45deg, transparent 0 4px, var(--borde) 4px 6px);
    color: var(--texto-tenue);
}

.leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.leyenda .dosis {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.65rem;
    cursor: default;
}

/* Las tarjetas del hospital: un canil, un paciente. */
.mapa-del-hospital {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.85rem;
}

.canil {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem 0.85rem 1.15rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--sombra-de-tarjeta);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.canil::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color, var(--instituto));
}

.canil:hover {
    border-color: var(--borde-fuerte);
}

.canil.libre {
    background: var(--superficie-hundida);
    border-style: dashed;
    box-shadow: none;
    color: var(--texto-tenue);
}

.canil-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--texto-tenue);
}

.canil-pendientes {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* --- 10. Tablero, impresión, utilidades ------------------------------------ */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.cifra-del-tablero {
    padding: 0.95rem 1.1rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--sombra-de-tarjeta);
    color: inherit;
    text-decoration: none;
    display: block;
}

a.cifra-del-tablero:hover {
    border-color: var(--borde-fuerte);
}

.cifra-del-tablero .valor {
    display: block;
    font-family: var(--bs-font-monospace);
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.cifra-del-tablero .rotulo {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texto-tenue);
    margin-top: 0.15rem;
}

.cifra-del-tablero .nota {
    display: block;
    font-size: 0.72rem;
    color: var(--texto-tenue);
    margin-top: 0.35rem;
}

.cifra-del-tablero.atencion .valor { color: var(--estado-naranjo); }
.cifra-del-tablero.mal .valor { color: var(--estado-rojo); }
.cifra-del-tablero.bien .valor { color: var(--estado-verde); }

/* La barra de una ocupación: cuánto del total está usado. */
.barra-de-ocupacion {
    position: relative;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--superficie-hundida);
    border: 1px solid var(--borde);
    overflow: hidden;
}

.barra-de-ocupacion > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--color, var(--instituto));
    border-radius: 999px;
}

.avisos-flotantes {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(28rem, calc(100vw - 2rem));
}

.aviso-flotante {
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.16);
}

/* El diálogo nativo, con la cara de Bootstrap. */
dialog.dialogo {
    width: min(34rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius-lg);
    background: var(--superficie);
    color: var(--bs-body-color);
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24);
}

dialog.dialogo.ancho {
    width: min(52rem, calc(100vw - 2rem));
}

dialog.dialogo::backdrop {
    background: rgba(10, 14, 26, 0.5);
}

dialog.dialogo > form,
dialog.dialogo > div {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
}

.dialogo-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--borde);
}

.dialogo-cabeza h2 {
    font-size: 1.05rem;
    margin: 0;
}

.dialogo-cuerpo {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
}

.dialogo-pie {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--borde);
    background: var(--superficie-hundida);
    border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
}

.pantalla-de-acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--fondo-de-pagina);
}

@media (min-width: 992px) {
    .pantalla-de-acceso {
        grid-template-columns: 1.1fr 1fr;
    }
}

.pantalla-de-acceso-lado {
    display: none;
    position: relative;
    padding: 3rem;
    background: var(--barra-fondo);
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

@media (min-width: 992px) {
    .pantalla-de-acceso-lado {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* Un trazo de electrocardiograma como única figura: dice «clínica» sin
   dibujos ni manchas de color. */
.trazo-del-acceso {
    position: absolute;
    left: 0;
    right: 0;
    top: 46%;
    width: 100%;
    height: 7rem;
    color: rgba(var(--instituto-rgb), 0.55);
}

.pantalla-de-acceso-lado h2 {
    font-size: 2.1rem;
    color: #fff;
    max-width: 24rem;
    line-height: 1.15;
}

.pantalla-de-acceso-formulario {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.cuadro-de-acceso {
    width: min(24rem, 100%);
}

.marca-de-demma {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--texto-tenue);
}

.marca-de-demma img {
    height: 0.95rem;
    width: auto;
}

.barra-lateral .marca-de-demma {
    color: rgba(255, 255, 255, 0.45);
}

.marca-de-demma .oscuro { display: none; }
[data-bs-theme="dark"] .marca-de-demma .claro,
.barra-lateral .marca-de-demma .claro,
.pantalla-de-acceso-lado .marca-de-demma .claro { display: none; }
[data-bs-theme="dark"] .marca-de-demma .oscuro,
.barra-lateral .marca-de-demma .oscuro,
.pantalla-de-acceso-lado .marca-de-demma .oscuro { display: inline; }

.pie {
    padding: 0.85rem 1.75rem;
    border-top: 1px solid var(--borde);
    font-size: 0.75rem;
    color: var(--texto-tenue);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
}

.que-sigue {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--instituto-suave);
    border: 1px solid rgba(var(--instituto-rgb), 0.25);
}

.que-sigue > i {
    font-size: 1.3rem;
    color: var(--instituto-enfasis);
}

.texto-clinico {
    white-space: pre-wrap;
    line-height: 1.55;
}

.resumen-en-lista {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--borde);
    font-size: 0.875rem;
}

.resumen-en-lista:last-child {
    border-bottom: 0;
}

.resumen-en-lista.total {
    font-weight: 800;
    font-size: 1rem;
    border-bottom: 0;
    border-top: 2px solid var(--borde-fuerte);
    padding-top: 0.6rem;
}

.punto-de-color {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color, var(--instituto));
    flex: 0 0 auto;
}

.agenda-dia {
    display: grid;
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius-lg);
    background: var(--superficie);
    overflow: auto;
    max-height: calc(100vh - 14rem);
}

.cita-en-la-agenda {
    display: block;
    padding: 0.35rem 0.5rem;
    border-radius: 0.45rem;
    border-left: 3px solid var(--color, var(--instituto));
    background: color-mix(in srgb, var(--color, var(--instituto)) 9%, var(--superficie));
    font-size: 0.78rem;
    line-height: 1.25;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.cita-en-la-agenda:hover {
    background: color-mix(in srgb, var(--color, var(--instituto)) 16%, var(--superficie));
}

.cita-en-la-agenda.cancelada {
    opacity: 0.55;
    text-decoration: line-through;
}

.hueco-libre {
    display: block;
    padding: 0.3rem 0.5rem;
    border: 1px dashed var(--borde-fuerte);
    border-radius: 0.45rem;
    font-size: 0.75rem;
    color: var(--texto-tenue);
    text-decoration: none;
}

.hueco-libre:hover {
    border-color: var(--instituto);
    color: var(--instituto-enfasis);
    background: var(--instituto-suave);
}

@media print {
    .barra-lateral, .barra-superior, .pie, .no-imprimir, .avisos-flotantes {
        display: none !important;
    }

    body, .contenido {
        background: #fff !important;
        padding: 0 !important;
    }

    .tarjeta {
        box-shadow: none;
        border-color: #ccc;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* --- El buscador con sugerencias ---------------------------------------- */

.buscador-con-sugerencias {
    position: relative;
}

.sugerencias {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 1080;
    max-height: 20rem;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.14);
    padding: 0.25rem;
}

.sugerencia {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.sugerencia[aria-selected="true"], .sugerencia:hover {
    background: var(--instituto-suave);
}

.sugerencia strong {
    font-weight: 700;
}

.sugerencia span {
    font-size: 0.78rem;
    color: var(--texto-tenue);
}

.buscador-con-sugerencias.elegido input[data-texto] {
    border-color: rgba(var(--instituto-rgb), 0.55);
    background-color: var(--instituto-suave);
    font-weight: 600;
}

/* Los campos de fecha y hora no se achican tanto que se corte el año: en
   español se ven como «19/10/2026» y «18:00». */
input[type="date"].form-control { min-width: 9.75rem; }
input[type="time"].form-control { min-width: 6.5rem; }
input[type="datetime-local"].form-control { min-width: 13rem; }