/* Tipografía de la marca. Se sirve desde el propio sitio (wwwroot/fonts) y no
   desde Google Fonts: así el sistema sigue funcionando sin salida a Internet,
   no depende de un tercero y no hay que abrirle hueco en la política de
   seguridad del navegador. Es una fuente variable, de ahí el rango de pesos.
   Quicksand, licencia SIL Open Font License 1.1. */
@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/quicksand-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/quicksand-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
    --vet-marca: "Quicksand", "Segoe UI", system-ui, sans-serif;
    --vet-verde: #2e8b74;
    --vet-verde-osc: #1d5c4d;
    --vet-verde-claro: #e2f2ec;
    --vet-naranja: #dd8636;
    --vet-naranja-claro: #fdf0e0;
    --vet-arena: #f6efe2;
    --vet-crema: #fbf8f2;
    --vet-rojo: #c0523f;
    --vet-morado: #7d6bb0;
    --vet-texto: #2b322f;
    --vet-suave: #6d7c76;
    --vet-borde: #e6ded0;
}

html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

body.sin-lateral { margin-bottom: 64px; }

body {
    margin-bottom: 0;
    background-color: var(--vet-crema);
    color: var(--vet-texto);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--vet-verde-osc); }

h1, h2, h3 { letter-spacing: -0.01em; }

.btn-vet {
    background-color: var(--vet-verde);
    border-color: var(--vet-verde);
    color: #fff;
    border-radius: 9px;
}

.btn-vet:hover, .btn-vet:focus {
    background-color: var(--vet-verde-osc);
    border-color: var(--vet-verde-osc);
    color: #fff;
}

.btn-outline-vet {
    border-color: var(--vet-verde);
    color: var(--vet-verde-osc);
    border-radius: 9px;
}

.btn-outline-vet:hover {
    background-color: var(--vet-verde);
    border-color: var(--vet-verde);
    color: #fff;
}

.btn-naranja {
    background-color: var(--vet-naranja);
    border-color: var(--vet-naranja);
    color: #fff;
    border-radius: 9px;
}

.btn-naranja:hover { background-color: #c4742b; border-color: #c4742b; color: #fff; }

.text-vet { color: var(--vet-verde-osc) !important; }

.form-control, .form-select { border-radius: 9px; border-color: var(--vet-borde); }

.form-control:focus, .form-select:focus {
    border-color: var(--vet-verde);
    box-shadow: 0 0 0 .2rem rgba(46, 139, 116, .15);
}

/* Etiqueta de campo obligatorio: asterisco rojo al final. */
.form-label.obligatorio::after {
    content: " *";
    color: var(--vet-rojo);
    font-weight: 700;
}

/* Campo que la validación marcó como incorrecto (jQuery Validation discreta). */
.form-control.input-validation-error, .form-select.input-validation-error {
    border-color: var(--vet-rojo);
    box-shadow: 0 0 0 .2rem rgba(192, 82, 63, .15);
}

/* ------------------------------------------------------ Estructura de aplicación
   Menú lateral fijo a la izquierda, cabecera fina con la ubicación y el usuario, y
   el área de trabajo ocupando el resto. La barra superior de antes desapareció:
   toda la navegación vive en el lateral. */

body.con-lateral {
    margin: 0;
    display: flex;
    min-height: 100vh;
}

.vet-lateral {
    --lateral-ancho: 258px;
    width: var(--lateral-ancho);
    flex: 0 0 var(--lateral-ancho);
    background: linear-gradient(175deg, var(--vet-verde-osc), #1a5245 60%, #164538);
    color: rgba(255, 255, 255, .88);
    border-right: 0;
}

/* En pantallas grandes se queda pegado: al hacer scroll en el contenido, el menú
   sigue a la vista. Por debajo de lg lo gobierna el offcanvas de Bootstrap. */
@media (min-width: 992px) {
    .vet-lateral {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.vet-lateral-cuerpo {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 100%;
}

.lateral-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.1rem 1.15rem .95rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.lateral-marca:hover { color: #fff; }
/* Recuadro del logo en la marca del menú: fondo blanco porque el icono lo trae. */
.vet-huella {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}

.vet-huella img { width: 100%; height: 100%; object-fit: contain; display: block; }

.lateral-marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
/* El nombre lleva la tipografía de la marca, la misma del login, para que el
   sistema se vea como una sola cosa desde que se entra. */
.lateral-marca-texto strong {
    font-family: var(--vet-marca);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: .2px;
}
.lateral-marca-texto small { font-size: .72rem; opacity: .7; font-weight: 300; }

.lateral-nav {
    display: flex;
    flex-direction: column;
    padding: .6rem .7rem 1rem;
    flex: 1 1 auto;
}

.lateral-grupo { padding: .55rem 0 .35rem; }
.lateral-grupo-final { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: .8rem; }

.lateral-titulo {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .48);
    padding: 0 .65rem .4rem;
}

.lateral-enlace {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, .84);
    font-size: .88rem;
    text-align: left;
    text-decoration: none;
    line-height: 1.25;
    transition: background-color .12s ease, color .12s ease;
}

.lateral-enlace svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}

.lateral-enlace:hover,
.lateral-enlace:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    outline: none;
}

.lateral-enlace.activo {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--vet-naranja);
}

.lateral-enlace.activo svg { opacity: 1; }

/* ---- Columna de trabajo ---- */

.vet-trabajo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vet-cabecera {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--vet-borde);
    position: sticky;
    top: 0;
    z-index: 20;
}

.vet-miga {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    min-width: 0;
    flex: 1 1 auto;
}

.vet-miga a { color: var(--vet-suave); text-decoration: none; }
.vet-miga a:hover { color: var(--vet-verde-osc); }
.vet-miga-sep { color: var(--vet-borde); }
.vet-miga-actual { color: var(--vet-texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vet-usuario {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--vet-texto);
    border-radius: 10px;
    padding: .25rem .5rem .25rem .25rem;
}

a.vet-usuario:hover, a.vet-usuario:focus-visible { background: var(--vet-verde-claro); color: var(--vet-verde-osc); }
.vet-usuario-fijo { cursor: default; }

.vet-usuario-inicial {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vet-verde);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.vet-usuario-texto { display: flex; flex-direction: column; line-height: 1.15; }
.vet-usuario-texto span { font-size: .86rem; font-weight: 600; }
.vet-usuario-texto small { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: var(--vet-suave); }

/* Botón de cerrar sesión de la cabecera, a la derecha del usuario. */
.vet-salir {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    border-radius: 9px;
    flex: 0 0 auto;
}

.vet-salir:hover { background: var(--vet-rojo); border-color: var(--vet-rojo); color: #fff; }

/* En pantallas pequeñas se ahorra espacio: solo el avatar y el icono de salir. */
@media (max-width: 575.98px) {
    .vet-usuario-texto { display: none; }
    .vet-salir span { display: none; }
}

.vet-contenido {
    flex: 1 1 auto;
    padding: 1.5rem;
    max-width: 1440px;
    width: 100%;
}

body.con-lateral footer.pie {
    position: static;
    height: auto;
    line-height: 1.4;
    padding: .9rem 1.5rem;
    background: transparent;
}

/* Nombres que las vistas siguen usando dentro del contenido. */
.vet-rol {
    display: inline-block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--vet-verde-claro);
    color: var(--vet-verde-osc);
}

/* ------------------------------------------------------ Login */

.login-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .16) 0 12px, transparent 13px),
        radial-gradient(circle at 82% 68%, rgba(255, 255, 255, .12) 0 18px, transparent 19px),
        radial-gradient(circle at 62% 12%, rgba(255, 255, 255, .10) 0 9px, transparent 10px),
        linear-gradient(140deg, var(--vet-verde-osc), #2e8b74 55%, #55a98a);
}

.login-tarjeta {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
    padding: 2.25rem;
}

/* El logo es la imagen de la clínica (wwwroot/img/icono-*.png): ya trae su
   propio fondo blanco, así que el recuadro no lleva color de relleno. */
.login-logo {
    width: 180px;
    height: 180px;
    margin: 0 auto .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El nombre de la clínica es lo primero que se ve al entrar: va con la
   tipografía de la marca, redondeada y amable, no con la del resto de la
   interfaz, que está pensada para leer tablas y formularios. */
.login-marca {
    font-family: var(--vet-marca);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--vet-verde-osc);
    margin-bottom: .35rem;
}

.login-lema {
    font-family: var(--vet-marca);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vet-suave);
    margin-bottom: 0;
}

/* En pantallas de teléfono el bloque de marca se ajusta para que el formulario
   siga entrando sin desplazar. */
@media (max-width: 400px) {
    .login-logo { width: 132px; height: 132px; }
    .login-marca { font-size: 2rem; }
    .login-lema { font-size: .72rem; letter-spacing: .08em; }
}

.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.login-credenciales {
    background: var(--vet-arena);
    border-radius: 12px;
    padding: .9rem 1rem;
    font-size: .8rem;
    color: #6b5a3c;
}

.login-credenciales code { color: var(--vet-verde-osc); font-weight: 600; }

/* Campos numéricos sin las flechitas de subir y bajar. En una factura esas
   flechas estorban: se pulsan sin querer al desplazar la página y cambian una
   cantidad o un precio sin que nadie lo note. El campo sigue siendo numérico,
   así que el teléfono abre el teclado de números y la validación no cambia. */
.sin-flechas::-webkit-outer-spin-button,
.sin-flechas::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sin-flechas {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ------------------------------------------------------ Menu principal */

.menu-saludo h1 { font-size: 1.75rem; font-weight: 600; }

.menu-mascotas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.chip-mascota {
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-radius: 999px;
    padding: .2rem .75rem;
    font-size: .85rem;
}

.menu-boton {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-radius: 16px;
    padding: 1.4rem;
    text-decoration: none;
    color: var(--vet-texto);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.menu-boton:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(29, 92, 77, .15);
    border-color: var(--vet-verde);
    color: var(--vet-texto);
}

.menu-boton .menu-icono {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--vet-verde-claro);
    color: var(--vet-verde-osc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}

.menu-boton h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .3rem; }

.menu-boton p { font-size: .86rem; color: var(--vet-suave); margin-bottom: .6rem; }

.menu-boton .menu-dato {
    font-size: .78rem;
    font-weight: 600;
    color: var(--vet-verde-osc);
}

.menu-numero {
    position: absolute;
    top: .8rem;
    right: 1.1rem;
    font-size: .72rem;
    font-weight: 700;
    color: #c3cec9;
}

/* Tarjeta de mascota en el menú del propietario: es la puerta de entrada a sus opciones. */
.tarjeta-mascota h2 { font-size: 1.35rem; }
.tarjeta-mascota:hover { border-color: var(--vet-naranja); }
.tarjeta-mascota .menu-dato { display: block; margin-top: .85rem; }

.menu-agenda .menu-icono { background: var(--vet-naranja-claro); color: var(--vet-naranja); }
.menu-salir .menu-icono { background: #fbeae7; color: var(--vet-rojo); }
.menu-salir:hover { border-color: var(--vet-rojo); }

/* ------------------------------------------------------ Visor DICOM */

.visor-dicom {
    background: #101413;
    border-radius: 14px;
    padding: .75rem;
    position: relative;
}

.visor-dicom-barra {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
    align-items: center;
}

.visor-dicom-barra .activa {
    background: var(--vet-verde);
    border-color: var(--vet-verde);
    color: #fff;
}

.visor-dicom-separador { flex: 1 1 auto; }

/* DWV dibuja sus lienzos dentro. La altura se fija aquí porque la librería
   mide el contenedor al iniciarse: sin altura no tendría dónde pintar. */
.visor-dicom-lienzo {
    width: 100%;
    height: min(70vh, 640px);
    position: relative;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.visor-dicom-lienzo canvas { display: block; }

.visor-dicom-estado {
    color: #cfd8d4;
    font-size: .85rem;
    padding: .6rem .2rem 0;
}

.visor-dicom-error { color: #f3b0a4; font-weight: 600; }

@media (max-width: 576px) {
    .visor-dicom-lienzo { height: 55vh; }
}

/* ------------------------------------------------------ Estado del sistema */

/* Los tres niveles no se distinguen solo por el color: cada uno lleva su
   etiqueta ("En orden", "Revisar", "Falla"). Un tablero que solo cambia de
   color deja fuera a quien no distingue el rojo del verde. */
.estado-ok    { --estado-color: #1d5c4d; --estado-fondo: #e6f2ed; }
.estado-aviso { --estado-color: #9a6b12; --estado-fondo: #fdf2dd; }
.estado-error { --estado-color: #a33726; --estado-fondo: #fbe6e2; }

.estado-general {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--estado-fondo);
    color: var(--estado-color);
    border: 1px solid color-mix(in srgb, var(--estado-color) 25%, transparent);
    margin-bottom: 1.1rem;
}

.estado-general-punto {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--estado-color);
    flex: 0 0 auto;
}

.estado-general-texto { font-weight: 600; font-size: 1.05rem; }

.estado-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1rem;
}

.estado-panel { border-top: 4px solid var(--estado-color); }

.estado-chip {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15em .6em;
    border-radius: 999px;
    background: var(--estado-fondo);
    color: var(--estado-color);
}

.estado-resumen { font-weight: 600; margin: 0 0 .75rem; color: var(--estado-color); }

.estado-datos {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: .35rem .9rem;
    margin: 0;
    font-size: .9rem;
}

.estado-datos dt { color: var(--vet-suave); font-weight: 400; }
.estado-datos dd { margin: 0; }
.estado-datos dd .estado-valor { font-weight: 600; }
.estado-datos dd.estado-aviso .estado-valor,
.estado-datos dd.estado-error .estado-valor { color: var(--estado-color); }

.estado-detalle {
    display: block;
    font-size: .8rem;
    font-weight: 400;
    color: var(--vet-suave);
    margin-top: .1rem;
}

.estado-pie {
    margin-top: .9rem;
    padding-top: .6rem;
    border-top: 1px solid var(--vet-borde);
    font-size: .78rem;
    color: var(--vet-suave);
}

@media (max-width: 480px) {
    .estado-datos { grid-template-columns: 1fr; gap: .1rem; }
    .estado-datos dt { margin-top: .5rem; font-size: .8rem; }
}

/* Sello de "actualizado hace...". En rojo cuando el tablero pierde contacto:
   quedarse callado sería peor que no estar, porque parecería que todo va bien. */
.estado-sello {
    font-size: .8rem;
    color: var(--vet-suave);
    background: var(--vet-crema);
    border: 1px solid var(--vet-borde);
    border-radius: 999px;
    padding: .3rem .8rem;
}

.estado-sello-fallo {
    color: #a33726;
    background: #fbe6e2;
    border-color: #f0c8c0;
    font-weight: 600;
}

/* Las tres gráficas en fila mientras quepan. Por debajo de 320 px por columna
   se apilan solas: una gráfica de 24 barras más estrecha que eso no se lee. */
.estado-graficas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.estado-lienzo { width: 100%; }

/* Sin escalado forzado: el dibujo se hace al ancho real del recuadro, así los
   textos no se deforman ni las barras se estiran al cambiar el tamaño. */
.estado-lienzo svg { display: block; overflow: visible; max-width: 100%; }

/* El foco por teclado tiene que verse: las columnas de las gráficas son
   alcanzables con el tabulador para quien no usa ratón. */
.estado-lienzo g:focus { outline: 2px solid var(--vet-verde); outline-offset: 2px; }
.estado-lienzo g:focus:not(:focus-visible) { outline: none; }

.estado-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .85rem;
    color: var(--vet-texto);
    margin-bottom: .6rem;
}

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

.estado-leyenda i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.estado-nota { font-size: .8rem; color: var(--vet-suave); margin: .6rem 0 0; }
.estado-vacio { font-size: .85rem; color: var(--vet-suave); margin: 0; padding: 1.5rem 0; text-align: center; }

#tablero-estado { position: relative; }

.estado-globo {
    position: absolute;
    transform: translate(-50%, -100%);
    background: #2b322f;
    color: #fff;
    font-size: .78rem;
    padding: .35rem .6rem;
    border-radius: 7px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
}

/* ------------------------------------------------------ Tarjetas y tablas */

.tarjeta {
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-radius: 14px;
}

.tarjeta > .tarjeta-titulo {
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--vet-borde);
    font-weight: 600;
    font-size: .95rem;
    color: var(--vet-verde-osc);
    background: #fcfbf7;
    border-radius: 14px 14px 0 0;
}

.tarjeta > .tarjeta-cuerpo { padding: 1.15rem; }

.encabezado-modulo {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.encabezado-modulo h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }

.encabezado-modulo p { margin: .15rem 0 0; color: var(--vet-suave); font-size: .88rem; }

.table > :not(caption) > * > * { padding: .65rem .7rem; }

.table thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--vet-suave);
    border-bottom: 2px solid var(--vet-borde);
}

.table-hover > tbody > tr:hover > * { background-color: var(--vet-verde-claro); }

.dato-etiqueta {
    font-size: .71rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vet-suave);
    margin-bottom: .1rem;
}

.dato-valor { font-size: .95rem; font-weight: 500; }

/* ------------------------------------------------------ Mascota */

.mascota-avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--vet-arena);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    flex-shrink: 0;
}

.mascota-avatar.grande { width: 76px; height: 76px; font-size: 2.4rem; border-radius: 22px; }
.mascota-avatar.chico { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 12px; }

/* Con foto de perfil el recuadro se llena con la imagen, recortada al centro. */
.mascota-avatar.con-foto { background: var(--vet-verde-claro); overflow: hidden; }

.mascota-avatar.con-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.foto-previsualizacion {
    width: 132px;
    height: 132px;
    border-radius: 24px;
    object-fit: cover;
    border: 1px solid var(--vet-borde);
    background: var(--vet-arena);
}

.chip-especie {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 600;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: var(--vet-arena);
    color: #7a6640;
    white-space: nowrap;
}

.chip-especie.canino { background: #e7f0fb; color: #35618f; }
.chip-especie.felino { background: #f5eaf8; color: #7a4a8c; }
.chip-especie.ave { background: #e6f6ea; color: #2f7a45; }
.chip-especie.conejo, .chip-especie.roedor { background: var(--vet-naranja-claro); color: #a4661f; }
.chip-especie.reptil { background: #e8f4ef; color: #2f7361; }
.chip-especie.equino { background: #f3eee4; color: #7c6437; }

.chip-dato {
    display: inline-block;
    font-size: .74rem;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: var(--vet-verde-claro);
    color: var(--vet-verde-osc);
    white-space: nowrap;
}

.alerta-alergia {
    background: #fdf0ec;
    border: 1px solid #f2cfc5;
    color: #96412f;
    border-radius: 11px;
    padding: .55rem .85rem;
    font-size: .85rem;
}

/* ------------------------------------------------------ Resultados de laboratorio */

.resultado-icono {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--vet-verde-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.resultado-icono.grande { width: 62px; height: 62px; font-size: 1.9rem; border-radius: 18px; }

.resultado-tarjeta.con-alerta { border-left: 4px solid var(--vet-naranja); }

.chip-alerta {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: #fdf0ec;
    color: #96412f;
    white-space: nowrap;
}

.chip-normal {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: #e8f1e4;
    color: #4a7233;
    white-space: nowrap;
}

.chip-aviso {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: var(--vet-naranja-claro);
    color: #a4661f;
    white-space: nowrap;
}

.chip-mascota.activo {
    background: var(--vet-verde);
    border-color: var(--vet-verde);
    color: #fff;
}

.tabla-parametros tr.fuera-rango > * { background-color: #fdf3ef; }

.marca-alerta { font-size: .74rem; font-weight: 700; white-space: nowrap; }
.marca-alerta.alta { color: var(--vet-rojo); }
.marca-alerta.baja { color: #2f6f8f; }

.texto-alto { color: var(--vet-rojo); }
.texto-bajo { color: #2f6f8f; }

/* ------------------------------------------------------ Estados */

.estado {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .18rem .58rem;
    border-radius: 999px;
    white-space: nowrap;
}

.estado-pendiente { background: var(--vet-naranja-claro); color: #a4661f; }
.estado-confirmada { background: var(--vet-verde-claro); color: var(--vet-verde-osc); }
.estado-atendida { background: #e8f1e4; color: #4a7233; }
.estado-cancelada { background: #f1f0ec; color: #7c7c74; text-decoration: line-through; }

/* ------------------------------------------------------ Expediente: linea de tiempo */

.ano-separador {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.75rem 0 1rem;
}

.ano-separador span {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vet-verde-osc);
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-radius: 999px;
    padding: .2rem .9rem;
}

.ano-separador:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vet-borde);
}

.entrada-expediente {
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-left: 4px solid var(--vet-verde);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: .85rem;
}

.entrada-expediente.tipo-emergencia { border-left-color: var(--vet-rojo); }
.entrada-expediente.tipo-cirugia { border-left-color: var(--vet-morado); }
.entrada-expediente.tipo-vacunacion { border-left-color: var(--vet-naranja); }
.entrada-expediente.tipo-registro { border-left-color: #4a7233; }

.entrada-expediente h3 { font-size: 1rem; font-weight: 600; margin: 0; }

.entrada-expediente .fecha { font-size: .8rem; color: var(--vet-suave); }

.signos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.signo {
    background: var(--vet-crema);
    border: 1px solid var(--vet-borde);
    border-radius: 10px;
    padding: .35rem .65rem;
    font-size: .76rem;
    color: var(--vet-suave);
    min-width: 92px;
}

.signo strong { display: block; font-size: .92rem; color: var(--vet-texto); }
.signo.alerta { background: #fdf0ec; border-color: #f2cfc5; }
.signo.alerta strong { color: #96412f; }

.campo-clinico { margin-top: .7rem; }
.campo-clinico .dato-etiqueta { margin-bottom: .15rem; }
.campo-clinico p { margin: 0; font-size: .9rem; white-space: pre-line; }

/* ------------------------------------------------------ Imagenologia */

.visor {
    background: #0c100e;
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}

/* El marco recorta lo que se salga. Antes el zoom agrandaba la imagen con
   transform y, como nada la contenía, se desbordaba por encima de la tarjeta y
   se salía de la pantalla. Ahora crece dentro de este recuadro. */
.visor-marco {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    height: min(78vh, 780px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.visor-marco.arrastrando { cursor: grabbing; }

.visor-marco img {
    max-width: 100%;
    max-height: 100%;
    filter: contrast(1.05);
    transition: transform .15s ease;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 991px) {
    .visor-marco { height: min(60vh, 520px); }
}

.miniaturas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }

/* Miniaturas al costado del visor: en rejilla vertical para que quepan varias
   sin empujar la imagen hacia abajo. */
.miniaturas-columna {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .5rem;
    max-height: min(74vh, 740px);
    overflow-y: auto;
}

.miniaturas-columna .miniatura { width: 100%; height: 84px; }

.miniatura {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0;
    background: #0c100e;
    cursor: pointer;
    overflow: hidden;
    width: 92px;
    height: 92px;
}

.miniatura { position: relative; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura.activa { border-color: var(--vet-verde); }

/* Distintivo sobre las miniaturas que vienen de un archivo DICOM. */
.marca-dicom {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: rgba(46, 139, 116, .92);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .5px;
    padding: .05rem .3rem;
    border-radius: 4px;
}

#controlFotogramas .form-range { flex: 1 1 160px; }

.archivo-no-visual {
    background: #fff;
    border: 1px dashed var(--vet-borde);
    border-radius: 11px;
    padding: 1rem;
    font-size: .85rem;
}

.controles-visor {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin-top: .75rem;
}

/* ------------------------------------------------------ Receta impresa */

@media print {
    .no-imprimir, .vet-lateral, .vet-cabecera, footer { display: none !important; }
    body.con-lateral { display: block; }
    .vet-contenido { padding: 0; max-width: none; }
    body { background: #fff; margin: 0; }
    .tarjeta { border: none; }
    .receta-impresa { padding: 0; border: none; }
}

.receta-impresa {
    background: #fff;
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid var(--vet-borde);
    border-radius: 14px;
}

.receta-encabezado {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--vet-verde);
    padding-bottom: .85rem;
    margin-bottom: 1.25rem;
}

.receta-medicamento { border-bottom: 1px dashed var(--vet-borde); padding: .7rem 0; }
.receta-medicamento:last-child { border-bottom: none; }

.receta-firma { margin-top: 3rem; text-align: center; font-size: .85rem; }

.receta-firma .linea {
    width: 260px;
    border-top: 1px solid var(--vet-texto);
    margin: 0 auto .35rem;
}

/* ------------------------------------------------------ Carnet de salud */

.carnet {
    background: #fff;
    max-width: 860px;
    margin: 0 auto;
    border: 1px solid var(--vet-borde);
    border-radius: 16px;
    overflow: hidden;
}

.carnet-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(100deg, var(--vet-verde-osc), var(--vet-verde) 70%);
    color: #fff;
    /* Para que el degradado también salga al imprimir. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Logo de la clínica en la cabecera del carnet; fondo blanco para que el
   icono se lea sobre el verde, también al imprimir. */
.carnet-huella {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.carnet-huella img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Misma tipografía de marca que el login y el menú: el carnet y los informes
   salen impresos o por correo, y son la cara del sistema fuera de la clínica. */
.carnet-marca { font-family: var(--vet-marca); font-size: 1.28rem; font-weight: 700; letter-spacing: .2px; }

.carnet-subtitulo { font-size: .78rem; opacity: .9; }

.carnet-id {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.carnet-cuerpo {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--vet-borde);
}

@media (max-width: 700px) {
    .carnet-cuerpo { grid-template-columns: 1fr; }
}

.carnet-identidad { display: flex; gap: 1rem; align-items: flex-start; }

.carnet-nombre { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

.carnet-especie { font-size: .9rem; color: var(--vet-suave); margin-bottom: .6rem; }

.carnet-propietario {
    background: var(--vet-crema);
    border: 1px solid var(--vet-borde);
    border-radius: 12px;
    padding: .85rem 1rem;
}

.carnet-nombre-dueno { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }

.carnet-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .9rem;
    font-size: .82rem;
}

.carnet-datos > div { line-height: 1.25; }
.carnet-datos .ancho-total { grid-column: 1 / -1; }

.carnet-datos span {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vet-suave);
}

.carnet-titulo-bloque {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 700;
    color: var(--vet-verde-osc);
    margin-bottom: .5rem;
}

.carnet-alerta {
    margin: 0 1.5rem 1rem;
    margin-top: 1rem;
    background: #fdf0ec;
    border: 1px solid #e8b7a9;
    border-left: 5px solid var(--vet-rojo);
    color: #8d3a29;
    border-radius: 10px;
    padding: .55rem .9rem;
    font-size: .85rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.carnet-recordatorio {
    margin: 0 1.5rem 1rem;
    background: var(--vet-naranja-claro);
    border: 1px solid #edd0aa;
    border-left: 5px solid var(--vet-naranja);
    color: #8a5a1c;
    border-radius: 10px;
    padding: .55rem .9rem;
    font-size: .85rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.carnet-seccion { padding: 0 1.5rem 1.25rem; }

.carnet-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.carnet-cifra {
    background: var(--vet-verde-claro);
    border-radius: 10px;
    padding: .4rem .75rem;
    font-size: .72rem;
    color: var(--vet-verde-osc);
    text-align: center;
    min-width: 92px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.carnet-cifra strong {
    display: block;
    font-size: 1.05rem;
    color: var(--vet-texto);
}

.carnet-texto { font-size: .84rem; margin-bottom: .3rem; }

.carnet-texto span {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vet-suave);
    margin-right: .3rem;
}

.carnet-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.carnet-tabla th {
    background: var(--vet-arena);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #7a6640;
    text-align: left;
    padding: .35rem .5rem;
    border: 1px solid var(--vet-borde);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.carnet-tabla td {
    padding: .35rem .5rem;
    border: 1px solid var(--vet-borde);
    vertical-align: top;
}

.carnet-tabla-vacia td { height: 1.5rem; }

.carnet-vacio { font-size: .8rem; color: var(--vet-suave); margin: .35rem 0 0; }

.carnet-pie {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: end;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--vet-borde);
}

@media (max-width: 700px) {
    .carnet-pie { grid-template-columns: 1fr; }
}

.carnet-firma { text-align: center; font-size: .75rem; color: var(--vet-suave); }

.carnet-firma .linea {
    width: 220px;
    border-top: 1px solid var(--vet-texto);
    margin: 2rem auto .3rem;
}

.carnet-nota { font-size: .72rem; color: var(--vet-suave); }

@media print {
    @page { size: A4; margin: 10mm; }

    .carnet {
        border: none;
        border-radius: 0;
        max-width: none;
    }

    .carnet-seccion { break-inside: avoid; }
    .carnet-tabla { break-inside: auto; }
    .carnet-tabla tr { break-inside: avoid; }
}

/* ------------------------------------------------------ Pie */

footer.pie {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 64px;
    line-height: 64px;
    font-size: .8rem;
    color: var(--vet-suave);
    border-top: 1px solid var(--vet-borde);
    background: #fff;
}

.aviso-demo {
    background: var(--vet-arena);
    border: 1px solid #ead9b8;
    color: #7a5b28;
    border-radius: 12px;
    padding: .65rem .95rem;
    font-size: .82rem;
}

.nav-tabs .nav-link {
    color: var(--vet-suave);
    border-radius: 10px 10px 0 0;
}

.nav-tabs .nav-link.active {
    color: var(--vet-verde-osc);
    font-weight: 600;
    border-color: var(--vet-borde) var(--vet-borde) #fff;
}

/* ====================================================== Buscador en desplegables */

.buscador { position: relative; }

/* El <select> real sigue en el formulario, pero fuera de la vista. No se usa
   display:none ni el atributo hidden a propósito: jQuery Validate ignora los
   campos ocultos, y con eso se perdería la validación del lado del cliente. */
.buscador-original {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(50%);
}

/* La flecha es la misma que dibuja Bootstrap en un select, para que el campo no
   se lea como una caja de texto cualquiera. */
.buscador-entrada {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236d7c76' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    cursor: text;
}

.buscador-entrada::placeholder { color: var(--vet-suave); opacity: 1; }

.buscador.abierto .buscador-entrada {
    border-color: var(--vet-verde);
    box-shadow: 0 0 0 .2rem rgba(46, 139, 116, .15);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.buscador.abierto.arriba .buscador-entrada {
    border-radius: 0 0 9px 9px;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Fija y no absoluta: estos desplegables viven dentro de contenedores con
   scroll (la tabla de líneas de factura, la rejilla de la agenda) que
   recortarían una lista posicionada respecto al documento. Las coordenadas las
   calcula el script a partir del cuadro de texto. */
.buscador-lista {
    position: fixed;
    z-index: 1060;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--vet-verde);
    border-top: none;
    border-radius: 0 0 9px 9px;
    box-shadow: 0 8px 20px rgba(29, 92, 77, .14);
}

.buscador.arriba .buscador-lista {
    border-top: 1px solid var(--vet-verde);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    box-shadow: 0 -8px 20px rgba(29, 92, 77, .14);
}

.buscador-opcion {
    padding: .4rem .75rem;
    font-size: .9rem;
    cursor: pointer;
    line-height: 1.3;
}

.buscador-opcion.resaltada { background: var(--vet-verde-claro); }

.buscador-opcion.elegida {
    font-weight: 600;
    color: var(--vet-verde-osc);
}

.buscador-grupo {
    padding: .45rem .75rem .2rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vet-suave);
}

.buscador-grupo + .buscador-opcion { padding-top: .25rem; }

.buscador-sin-resultados {
    padding: .6rem .75rem;
    font-size: .85rem;
    color: var(--vet-suave);
    font-style: italic;
}

/* ====================================================== Tablero de agenda */

.agenda-barra {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: center;
    justify-content: space-between;
}

.agenda-navegacion {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.agenda-titulo {
    font-weight: 600;
    font-size: 1.02rem;
    margin-left: .5rem;
    text-transform: capitalize;
}

.agenda-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.agenda-filtros .form-control,
.agenda-filtros .form-select { width: auto; min-width: 140px; }

/* Cifras de cabecera; también las usan inventario, facturación y avisos. */
.agenda-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: .6rem;
}

.agenda-cifra {
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-radius: 12px;
    padding: .6rem .8rem;
}

.agenda-cifra span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vet-suave);
    margin-bottom: .15rem;
}

.agenda-cifra strong { font-size: 1.2rem; font-weight: 600; }

.agenda-cifra.alerta {
    border-color: #f0cfae;
    background: var(--vet-naranja-claro);
}

.agenda-cifra.alerta strong { color: #a4661f; }

/* La rejilla se desplaza en horizontal cuando hay muchos veterinarios. */
.agenda-envoltorio {
    overflow-x: auto;
    max-height: 74vh;
    overflow-y: auto;
}

.agenda-rejilla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: calc(72px + var(--agenda-columnas, 3) * 190px);
}

.agenda-rejilla thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--vet-arena);
    border-bottom: 1px solid var(--vet-borde);
    padding: .5rem .6rem;
    text-align: left;
    font-size: .82rem;
}

.agenda-rejilla thead th.es-hoy { background: var(--vet-verde-claro); }

.agenda-columna-titulo {
    font-weight: 600;
    color: var(--vet-verde-osc);
    text-transform: capitalize;
}

.agenda-columna-sub { font-size: .74rem; color: var(--vet-suave); font-weight: 400; }

.agenda-conteo {
    display: inline-block;
    background: var(--vet-verde);
    color: #fff;
    border-radius: 999px;
    padding: 0 .4rem;
    font-size: .68rem;
    margin-left: .3rem;
}

/* La columna de horas se queda fija al desplazar en horizontal. */
.agenda-esquina,
.agenda-hora {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--vet-arena);
    width: 72px;
    min-width: 72px;
    text-align: right;
    padding: .4rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--vet-suave);
    border-right: 1px solid var(--vet-borde);
    vertical-align: top;
}

.agenda-esquina { z-index: 4; }

.agenda-celda {
    border-bottom: 1px solid #f0ece2;
    border-right: 1px solid #f0ece2;
    padding: .25rem;
    vertical-align: top;
    min-height: 44px;
    position: relative;
}

.agenda-rejilla tbody tr.agenda-nocturna .agenda-celda { background: #faf7f0; }
.agenda-rejilla tbody tr.agenda-nocturna .agenda-hora { color: #a9b3ae; }

.agenda-celda.es-ahora { box-shadow: inset 3px 0 0 var(--vet-naranja); }

.agenda-cita {
    display: block;
    border-radius: 9px;
    padding: .3rem .45rem;
    margin-bottom: .25rem;
    font-size: .78rem;
    line-height: 1.25;
    text-decoration: none;
    border-left: 3px solid transparent;
    background: var(--vet-verde-claro);
    color: var(--vet-texto);
}

.agenda-cita:hover { filter: brightness(.96); color: var(--vet-texto); }

.agenda-cita-hora { font-weight: 700; margin-right: .25rem; }
.agenda-cita-paciente { font-weight: 600; }

.agenda-cita-motivo {
    display: block;
    color: var(--vet-suave);
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-cita.estado-pendiente { background: var(--vet-naranja-claro); border-left-color: var(--vet-naranja); }
.agenda-cita.estado-confirmada { background: var(--vet-verde-claro); border-left-color: var(--vet-verde); }
.agenda-cita.estado-atendida { background: #e8f1e4; border-left-color: #4a7233; }

.agenda-cita.estado-cancelada {
    background: #f1f0ec;
    border-left-color: #b9b9b0;
    color: #7c7c74;
    text-decoration: line-through;
}

/* El "+" de la celda vacía solo aparece al pasar por encima: la rejilla
   se lee mejor sin 24 signos por columna compitiendo con las citas. */
.agenda-libre {
    display: block;
    text-align: center;
    color: transparent;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    padding: .1rem;
    line-height: 1.3;
}

.agenda-celda:hover .agenda-libre {
    color: var(--vet-verde);
    background: rgba(46, 139, 116, .08);
}

.agenda-libre:hover { background: var(--vet-verde) !important; color: #fff !important; }

/* ====================================================== Inventario */

.producto-icono {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    background: var(--vet-arena);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.producto-icono.grande { width: 62px; height: 62px; min-width: 62px; font-size: 1.9rem; border-radius: 18px; }

.existencia-grande {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--vet-verde-osc);
}

.existencia-grande span { font-size: .95rem; font-weight: 400; color: var(--vet-suave); }
.existencia-grande.baja { color: var(--vet-rojo); }

.aviso-inventario {
    background: var(--vet-naranja-claro);
    border: 1px solid #f0cfae;
    color: #7a5b28;
    border-radius: 12px;
    padding: .7rem .95rem;
    font-size: .86rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

tr.fila-alerta > * { background-color: #fdf7f0; }

.estado.movimiento-entrada { background: var(--vet-verde-claro); color: var(--vet-verde-osc); }
.estado.movimiento-salida { background: #f6ece9; color: #96412f; }
.estado.movimiento-merma { background: #fbeae7; color: var(--vet-rojo); }
.estado.movimiento-ajuste { background: #eeeaf6; color: #5c4b8c; }

/* ====================================================== Facturación */

.estado.factura-borrador { background: #f1f0ec; color: #7c7c74; }
.estado.factura-emitida { background: var(--vet-naranja-claro); color: #a4661f; }
.estado.factura-pagada { background: var(--vet-verde-claro); color: var(--vet-verde-osc); }

.estado.factura-anulada {
    background: #fbeae7;
    color: var(--vet-rojo);
    text-decoration: line-through;
}

.tabla-lineas > :not(caption) > * > * { padding: .35rem .4rem; }
.tabla-lineas thead th { font-size: .7rem; }

.totales-factura > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--vet-borde);
    font-size: .92rem;
}

.totales-factura > div:last-child { border-bottom: none; }
.totales-factura span { color: var(--vet-suave); }

.totales-factura .total-final {
    font-size: 1.15rem;
    padding-top: .6rem;
    border-top: 2px solid var(--vet-borde);
    border-bottom: none;
}

.totales-factura .total-final span { color: var(--vet-texto); font-weight: 600; }
.totales-factura .total-final strong { color: var(--vet-verde-osc); }

tr.fila-total > * { border-top: 2px solid var(--vet-borde); background: var(--vet-crema); }

.factura-impresa {
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-radius: 12px;
    padding: 2rem;
    max-width: 820px;
    margin: 0 auto;
    position: relative;
}

.sello-anulada {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    font-size: 3.6rem;
    font-weight: 800;
    letter-spacing: .5rem;
    color: rgba(192, 82, 63, .18);
    border: 6px solid rgba(192, 82, 63, .18);
    border-radius: 14px;
    padding: .3rem 1.5rem;
    pointer-events: none;
}

/* ====================================================== Avisos por correo */

.estado.aviso-pendiente { background: var(--vet-naranja-claro); color: #a4661f; }
.estado.aviso-enviado { background: var(--vet-verde-claro); color: var(--vet-verde-osc); }
.estado.aviso-error { background: #fbeae7; color: var(--vet-rojo); }
.estado.aviso-descartado { background: #f1f0ec; color: #7c7c74; }

.previsualizacion-correo {
    width: 100%;
    height: 620px;
    border: 0;
    border-radius: 0 0 14px 14px;
    background: var(--vet-crema);
}

@media print {
    .factura-impresa { border: none; border-radius: 0; max-width: none; padding: 0; }
}

/* ------------------------------------------------------ Dashboard de resumen
   Ocho indicadores y tres listas cortas. Las cifras son enlaces a su sección:
   aquí se mira, se trabaja desde el menú lateral. */

.panel-cifras {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.panel-cifra {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--vet-borde);
    border-radius: 14px;
    text-decoration: none;
    color: var(--vet-texto);
    transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.panel-cifra:hover {
    color: var(--vet-texto);
    border-color: var(--vet-verde);
    box-shadow: 0 6px 18px rgba(29, 92, 77, .1);
    transform: translateY(-1px);
}

.panel-cifra span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vet-suave);
    font-weight: 600;
}

.panel-cifra strong {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--vet-verde-osc);
}

.panel-cifra small { font-size: .76rem; color: var(--vet-suave); }

.panel-cifra.destacada { border-color: var(--vet-verde); background: var(--vet-verde-claro); }

.panel-cifra.alerta { background: var(--vet-naranja-claro); border-color: #ead9b8; }
.panel-cifra.alerta strong { color: #a4661f; }

.lista-resumen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-resumen li + li { border-top: 1px solid var(--vet-borde); }

.lista-resumen a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem 1.15rem;
    text-decoration: none;
    color: var(--vet-texto);
}

.lista-resumen a:hover { background: var(--vet-crema); }

.lista-fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px;
    flex: 0 0 46px;
    padding: .3rem 0;
    border-radius: 9px;
    background: var(--vet-arena);
    line-height: 1.1;
}

.lista-fecha strong { font-size: .92rem; font-variant-numeric: tabular-nums; }
.lista-fecha small { font-size: .66rem; text-transform: uppercase; color: var(--vet-suave); }
.lista-fecha.hoy { background: var(--vet-verde-claro); color: var(--vet-verde-osc); }
.lista-fecha.hoy small { color: var(--vet-verde-osc); }

.lista-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

.lista-texto strong { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-texto small { font-size: .78rem; color: var(--vet-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------ Auditoría */

.chip-dato.chip-baja { background: #fbeae7; color: var(--vet-rojo); }
.chip-dato.chip-alta { background: var(--vet-naranja-claro); color: #a4661f; }
.chip-dato.chip-consulta { background: #e9ecf5; color: #4a5a8a; }

.tabla-auditoria td { vertical-align: top; }
.detalle-auditoria { max-width: 320px; word-break: break-word; }

@media (max-width: 767.98px) {
    .panel-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====================================================== Dictado por voz */

/* El campo va dentro de un envoltorio y el micrófono flota en su esquina. */
.dictado { position: relative; }

.dictado .form-control { padding-right: 2.6rem; }

.dictado-boton {
    position: absolute;
    top: .35rem;
    right: .4rem;
    width: 30px;
    height: 30px;
    border: 1px solid var(--vet-borde);
    border-radius: 50%;
    background: #fff;
    color: var(--vet-verde-osc);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.dictado-boton:hover { background: var(--vet-verde-claro); }

/* Grabando: rojo y con un pulso, para que se vea de lejos que el micrófono está abierto. */
.dictado-boton.dictado-activo {
    background: var(--vet-rojo);
    border-color: var(--vet-rojo);
    color: #fff;
    animation: dictado-pulso 1.2s ease-in-out infinite;
}

@keyframes dictado-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 82, 63, .45); }
    50% { box-shadow: 0 0 0 7px rgba(192, 82, 63, 0); }
}

/* Lo que el reconocedor va entendiendo antes de fijarlo, en gris bajo el campo. */
.dictado-parcial {
    font-size: .8rem;
    color: var(--vet-suave);
    font-style: italic;
    min-height: 0;
}

.dictado-parcial:empty { display: none; }

/* Opción del menú de un módulo apagado: se ve, se puede pulsar, pero se nota
   que todavía no está. */
.lateral-enlace.lateral-pendiente { opacity: .62; }
.lateral-enlace.lateral-pendiente:hover { opacity: .9; }

.lateral-etiqueta {
    margin-left: auto;
    font-style: normal;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    white-space: nowrap;
}