/*
 * Tema del panel QVET sobre Filament 5.
 *
 * Es CSS plano servido desde public/ a proposito: el proyecto no compila assets
 * (ver CLAUDE.md), asi que no hay un theme.css de Filament construido con Tailwind.
 * Se apoya en las clases fi-* y en las custom properties que Filament ya expone.
 *
 * Origen de los valores: design/v1.0/QVet App.dc.html (prototipo congelado v1.0).
 */

@font-face {
    font-family: 'Choco';
    src: url('../fonts/choco-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html.fi {
    --qvet-wine: #6b2044;
    --qvet-coral: #e94d34;
    --qvet-cta: #cd4b35;
    --qvet-cta-hover: #b8422e;
    --qvet-paper: #f7f5f2;
    --qvet-surface-subtle: #fbfaf8;
    --qvet-line: #e8e2dc;
    --qvet-line-input: #d8d0c9;
    --qvet-line-soft: #f0ebe5;
    --qvet-ink: #2b2229;
    --qvet-ink-soft: #4c4248;
    --qvet-muted: #7a6e75;
    --qvet-display: 'Choco', 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- superficies ---------- */

html.fi,
.fi-body {
    background-color: var(--qvet-paper);
    color: var(--qvet-ink);
}

.fi-main-ctn {
    background-color: var(--qvet-paper);
}

/*
 * El prototipo separa las tarjetas por borde sobre papel, sin sombra: la sombra de
 * Filament sobre este fondo calido se lee como suciedad.
 */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border: 1px solid var(--qvet-line);
    border-radius: 14px;
    box-shadow: none;
}

.fi-ta-header-ctn,
.fi-ta-header {
    background-color: var(--qvet-surface-subtle);
}

.fi-input-wrp {
    border-radius: 9px;
}

/*
 * Los chips de estado de Filament, en los pares del prototipo. Sin esto un mismo estado
 * sale de un color en la agenda (CSS propio) y de otro en cualquier tabla.
 *
 * El gris de "completada" del prototipo (#7a6e75 sobre #f0ebe5) da 4.03:1 y no alcanza AA
 * para un texto de 11px: se oscurece a 5.06:1 conservando el tono.
 */
.fi-badge.fi-color-success {
    background-color: #e7f2ec;
    color: #1d5c4d;
}

.fi-badge.fi-color-warning {
    background-color: #fbf3e4;
    color: #a9631b;
}

.fi-badge.fi-color-danger {
    background-color: #faecea;
    color: #b3261e;
}

.fi-badge.fi-color-gray {
    background-color: var(--qvet-line-soft);
    color: #6b6067;
}

/* ---------- barra lateral ---------- */

.fi-sidebar {
    background-color: var(--qvet-wine);
    color: #fff;
    border-inline-end: 0;
}

/*
 * Filament centra el contenido de la cabecera y le fija al logo 1.5rem de alto con un
 * estilo inline; el lockup de QVET es un bloque de 44px alineado a la izquierda con los
 * items del menu, asi que hay que soltar las dos restricciones.
 */
.fi-sidebar-header {
    height: auto;
    justify-content: flex-start;
    padding: 22px 20px 16px;
    background-color: var(--qvet-wine);
    border-block-end: 0;
    box-shadow: none;
}

.fi-sidebar-header .fi-logo {
    height: auto !important;
    margin: 0;
}

.fi-sidebar-nav {
    padding: 6px 12px;
    gap: 2px;
    /*
     * La barra de scroll del sistema se dibuja blanca sobre el vino y parte la barra en
     * dos. Se pinta translucida y se libera el canal reservado, que corria los items
     * respecto del logo.
     */
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 99px;
}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.38);
}

/*
 * Filament saca los grupos 8px hacia afuera y los ajusta al ancho del texto: eso
 * desalinea los items respecto del logo y deja el separador del grupo sin ancho que medir.
 */
.fi-sidebar-nav-groups {
    width: auto;
    margin-inline: 0;
    gap: 2px;
}

.fi-sidebar-group-items {
    gap: 2px;
}

.fi-sidebar-group-btn {
    display: flex;
    align-items: center;
    padding: 0;
    cursor: default;
}

/*
 * El prototipo pide rgba(255,255,255,.5), que sobre el vino da 3.87:1 y no alcanza AA
 * para un texto de 9.5px. .62 conserva la jerarquia y sube a 5.18:1.
 */
.fi-sidebar-group-label {
    flex: 1;
    margin: 14px 10px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* La regla que continua la etiqueta del grupo hasta el borde de la barra. */
.fi-sidebar-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.fi-sidebar-group:first-child .fi-sidebar-group-label {
    margin-top: 8px;
}

.fi-sidebar-item-btn {
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background-color: transparent;
}

/* El color del item vive en la etiqueta y en el icono, no en el enlace que los contiene. */
.fi-sidebar-item-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item-icon {
    width: 17px;
    height: 17px;
    color: rgba(255, 255, 255, 0.7);
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:focus-visible .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar-item-btn:focus-visible > .fi-icon {
    color: #fff;
}

/* El hijo directo iguala la especificidad con la que Filament pinta el item activo. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(255, 255, 255, 0.16);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #fff;
}

.fi-sidebar-item-badge-ctn .fi-badge {
    background-color: var(--qvet-coral);
    color: #fff;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 600;
}

/* ---------- lockup de marca ---------- */

.qvet-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qvet-lockup-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 3px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
}

.qvet-lockup-plate img {
    display: block;
    width: 100%;
    height: auto;
}

.qvet-lockup-text {
    min-width: 0;
}

.qvet-lockup-name {
    display: block;
    font-family: var(--qvet-display);
    font-size: 20px;
    line-height: 1;
    color: #fff;
}

.qvet-lockup-tagline {
    display: block;
    margin-top: 3px;
    font-size: 8.5px;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

/* ---------- pie de la barra: quien esta dentro ---------- */

/*
 * Filament solo dibuja .fi-sidebar-footer cuando monta su propio menu de usuario, que
 * aca esta apagado: el bloque trae su propia separacion del menu.
 */
.qvet-account {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px 16px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.qvet-account-identity {
    flex: 1;
    min-width: 0;
}

.qvet-account-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
}

.qvet-account-role {
    display: block;
    font-size: 10.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.62);
}

.qvet-account-exit {
    flex: none;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.qvet-account-exit:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ---------- panel de reservas web ---------- */

.qvet-panel {
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 12px;
    overflow: hidden;
}

.qvet-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--qvet-line);
}

.qvet-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.qvet-inline-link {
    color: var(--qvet-cta);
    font-weight: 600;
    text-decoration: none;
}

.qvet-inline-link:hover {
    text-decoration: underline;
}

.qvet-panel-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--qvet-cta);
    text-decoration: none;
    white-space: nowrap;
}

.qvet-panel {
    container-type: inline-size;
}

.qvet-booking {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--qvet-line-soft);
}

.qvet-booking-initial {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #c9badf;
    color: var(--qvet-wine);
    font-size: 13px;
    font-weight: 700;
}

.qvet-booking-body {
    flex: 1;
    min-width: 0;
}

/*
 * La misma tarjeta vive en la columna estrecha del panel del dia y a todo el ancho del
 * buzon. Mide su propio contenedor y no la ventana: en el panel la ventana es ancha y la
 * columna no.
 */
@container (min-width: 560px) {
    .qvet-booking {
        align-items: center;
    }

    .qvet-booking-actions {
        margin-top: 0;
    }
}

.qvet-booking-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qvet-booking-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
}

.qvet-booking-tag {
    flex: none;
    padding: 2px 8px;
    border-radius: 99px;
    background: #f3eff9;
    color: var(--qvet-wine);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.qvet-booking-meta,
.qvet-booking-when {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: var(--qvet-muted);
}

.qvet-booking-when {
    font-weight: 600;
    color: var(--qvet-ink-soft);
}

.qvet-booking-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/*
 * Confirmar va en el verde profundo del prototipo (7.89:1 contra blanco), no en el verde
 * claro de Filament: la accion afirmativa comparte tono con el chip "Confirmada".
 */
.qvet-detail-actions .fi-btn.fi-color-success:not(.fi-outlined),
.qvet-booking-actions .fi-btn.fi-color-success:not(.fi-outlined),
.fi-modal-footer-actions .fi-btn.fi-color-success:not(.fi-outlined) {
    background-color: #1d5c4d;
    color: #fff;
}

.qvet-detail-actions .fi-btn.fi-color-success:not(.fi-outlined):hover,
.qvet-booking-actions .fi-btn.fi-color-success:not(.fi-outlined):hover,
.fi-modal-footer-actions .fi-btn.fi-color-success:not(.fi-outlined):hover {
    background-color: #174a3e;
}

.qvet-booking-empty {
    padding: 26px 18px;
    text-align: center;
}

.qvet-booking-empty-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.qvet-booking-empty-body {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--qvet-muted);
}

/* ---------- cifras, chips y panel del dia ---------- */

/*
 * La tarjeta de cifra del prototipo: un numero en la display de marca y una linea que lo
 * explica. El tono lo decide lo que mide, no el estado en que este.
 */
.qvet-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.qvet-figure {
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 14px;
    padding: 20px 22px;
}

.qvet-figure-value {
    margin: 0;
    font-family: var(--qvet-display);
    font-size: 40px;
    line-height: 1;
    color: var(--qvet-wine);
}

.qvet-figure-value--green {
    color: #1d5c4d;
}

.qvet-figure-value--coral {
    color: var(--qvet-coral);
}

.qvet-figure-label {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--qvet-muted);
}

/*
 * El chip de estado. Los pares fondo/texto salen del mapa estadoCita del prototipo y se
 * reusan en toda la aplicacion: un mismo estado no puede cambiar de color entre pantallas.
 */
.qvet-chip,
.qvet-detail-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--qvet-line-soft);
    /* El gris del prototipo sobre este fondo da 4.03:1; este conserva el tono y llega a 5.06:1. */
    color: #6b6067;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.qvet-chip--confirmed,
.qvet-detail-status--confirmed {
    background: #e7f2ec;
    color: #1d5c4d;
}

.qvet-chip--pending,
.qvet-detail-status--pending {
    background: #fbf3e4;
    color: #a9631b;
}

.qvet-chip--no_show,
.qvet-chip--cancelled_by_clinic,
.qvet-chip--cancelled_by_customer,
.qvet-detail-status--no_show {
    background: #faecea;
    color: #b3261e;
}

.qvet-day-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: start;
}

.qvet-day-grid > * {
    min-width: 0;
}

.qvet-day-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--qvet-line-soft);
}

.qvet-day-row:hover {
    background: var(--qvet-surface-subtle);
}

.qvet-day-time {
    flex: none;
    width: 42px;
    font-family: ui-monospace, 'SFMono-Regular', menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--qvet-wine);
}

.qvet-day-who {
    flex: 1;
    min-width: 0;
}

.qvet-day-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.qvet-day-pro {
    display: block;
    font-size: 11.5px;
    color: var(--qvet-muted);
}

/* `flex: none` so a long owner name cannot push the actions out of the card. */
.qvet-day-actions {
    display: flex;
    flex: none;
    gap: 8px;
    align-items: center;
}

.qvet-day-actions .fi-btn {
    font-size: 11.5px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .qvet-figures,
    .qvet-day-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- dashboard: kpis y accesos ---------- */

.qvet-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.qvet-kpi {
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 12px;
    padding: 16px 18px;
}

.qvet-kpi-label {
    margin: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qvet-muted);
}

.qvet-kpi-value {
    margin: 5px 0 0;
    font-family: var(--qvet-display);
    font-size: 26px;
    line-height: 1.1;
    color: var(--qvet-wine);
}

.qvet-kpi-note {
    margin: 2px 0 0;
    font-size: 10.5px;
    color: var(--qvet-muted);
}

.qvet-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.qvet-shortcut {
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 14px;
    padding: 18px 20px;
}

.qvet-shortcut-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
}

.qvet-shortcut-value {
    margin: 10px 0 0;
    font-family: var(--qvet-display);
    font-size: 22px;
    line-height: 1.1;
    color: var(--qvet-wine);
}

.qvet-shortcut-note {
    margin: 2px 0 8px;
    font-size: 11px;
    color: var(--qvet-muted);
}

/*
 * El guion de "todavia no hay dato". En la display de marca a 40px se dibuja como una
 * barra gruesa y se lee como un tachon, no como un hueco: baja a la tipografia de texto
 * y al gris de los bordes, que es lo que dice "aca va un numero y no esta".
 */
.qvet-value--empty {
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    color: var(--qvet-line-input);
}

/* ---------- accion primaria ---------- */

/*
 * Filament recorre la paleta buscando un par fondo/texto que cumpla WCAG AA y, como el
 * coral de marca no lo cumple con texto blanco, cae a un fondo palido con texto oscuro.
 * Aca se le entrega el coral ya medido (4.52:1 contra blanco) en vez de dejarlo derivar.
 */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    background-color: var(--qvet-cta);
    color: #fff;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover {
    background-color: var(--qvet-cta-hover);
    color: #fff;
}

.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon {
    color: currentColor;
}

.fi-btn {
    border-radius: 9px;
}

/* ---------- tablas ---------- */

/*
 * El prototipo dibuja toda lista larga igual: cabecera plana sobre papel, fila de 12.5px
 * y separador tenue. Filament reparte esos valores entre utilidades de Tailwind, asi que
 * se corrigen sobre las clases fi-ta- en vez de tocar tabla por tabla.
 */
.fi-ta-header-cell {
    padding: 11px 18px;
    background-color: var(--qvet-surface-subtle);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qvet-muted);
}

.fi-ta-cell {
    font-size: 12.5px;
}

.fi-ta-row {
    border-block-end: 1px solid var(--qvet-line-soft);
}

.fi-ta-row:hover {
    background-color: #f3eff9;
}

/* ---------- titulos y tarjetas de cifras ---------- */

/*
 * Choco es la tipografia de marca y de cifra, no de titular: el prototipo titula cada
 * pantalla en Poppins 20/600 y reserva la display para el logo y los numeros grandes.
 */
.fi-header-heading,
.fi-simple-header-heading {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
}

/*
 * El subtitulo del prototipo es una linea de 12.5px en gris, no un parrafo. Filament lo
 * pinta al tamano del cuerpo y por eso cada pantalla abre con dos titulares y una frase
 * que se parte en dos lineas.
 */
.fi-header-subheading {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--qvet-muted);
}

.fi-wi-stats-overview-stat-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qvet-muted);
}

.fi-wi-stats-overview-stat-value {
    font-family: var(--qvet-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.05;
    color: var(--qvet-wine);
}

/* ---------- pantalla de acceso ---------- */

.qvet-auth {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    min-height: 100vh;
    background: var(--qvet-paper);
    color: var(--qvet-ink);
}

.qvet-auth-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 3.75rem 3.5rem;
    background: var(--qvet-wine);
    color: #fff;
}

.qvet-auth-hero-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.75rem;
    padding: 0.3125rem;
    /* El trazo del logo es coral sobre transparente: sin la placa se pierde en el vino. */
    background: #fff;
    border-radius: 0.875rem;
}

.qvet-auth-hero-mark img {
    height: auto;
    width: 100%;
}

.qvet-auth-claim {
    margin: 0;
    max-width: 25rem;
    font-family: var(--qvet-display);
    font-size: 2.5rem;
    line-height: 1.15;
}

.qvet-auth-claim-accent {
    margin-bottom: 1.125rem;
    color: var(--qvet-coral);
}

.qvet-auth-lede {
    margin: 0;
    max-width: 23.75rem;
    font-size: 0.84375rem;
    line-height: 1.7;
    opacity: 0.85;
}

.qvet-auth-domain {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0 0;
    font-size: 0.6875rem;
    opacity: 0.65;
}

.qvet-auth-watermark {
    position: absolute;
    right: -7.5rem;
    bottom: -6.25rem;
    width: 32.5rem;
    height: 32.5rem;
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.qvet-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.75rem 3.5rem;
}

.qvet-auth-form {
    width: 100%;
    max-width: 25rem;
}

.qvet-auth-heading {
    margin: 0 0 1.375rem;
    font-size: 1.375rem;
    font-weight: 700;
}

.qvet-auth-compliance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin: 1.125rem 0 0;
    padding: 0.875rem 0 0;
    border-top: 1px solid var(--qvet-line);
    list-style: none;
    font-size: 0.625rem;
    color: var(--qvet-muted);
}

.qvet-auth-compliance li {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}

.qvet-auth-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
}

@media (max-width: 767px) {
    .qvet-auth-hero {
        padding: 2.5rem 1.75rem;
    }

    .qvet-auth-claim {
        font-size: 1.875rem;
    }

    .qvet-auth-panel {
        padding: 2.5rem 1.75rem;
    }
}

/* ---------- configuracion ---------- */

/*
 * Una columna de tarjetas de 860px, como el prototipo. Cada tarjeta es un bloque de
 * ajustes; las que describen algo que todavia no funciona conservan su forma y cambian el
 * chip, no el dibujo.
 */
.qvet-set-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 860px;
}

.qvet-set-card {
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 12px;
}

.qvet-set-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.qvet-set-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-set-head .qvet-set-title {
    margin-bottom: 0;
}

.qvet-set-head + .qvet-set-grid,
.qvet-set-head + .qvet-set-note {
    margin-top: 14px;
}

.qvet-set-note {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--qvet-muted);
}

.qvet-set-note--after {
    margin: 10px 0 0;
    font-size: 11px;
}

.qvet-set-grid {
    display: grid;
    gap: 14px;
}

.qvet-set-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qvet-set-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .qvet-set-grid--2,
    .qvet-set-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.qvet-set-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.qvet-set-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-set-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid var(--qvet-line-input);
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    color: var(--qvet-ink);
}

.qvet-set-input:focus-visible {
    outline: 2px solid var(--qvet-wine);
    outline-offset: 1px;
    border-color: var(--qvet-wine);
}

.qvet-set-error {
    font-size: 11px;
    color: #b3261e;
}

.qvet-set-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--qvet-ink);
}

.qvet-set-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--qvet-wine);
}

/* La fila del archivo de firma: mismo hueco que en el prototipo, con lo que hay dentro. */
.qvet-set-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 14px;
    background: var(--qvet-surface-subtle);
    border: 1px solid var(--qvet-line-soft);
    border-radius: 9px;
}

.qvet-set-file-name {
    flex: 1;
    font-size: 12.5px;
    color: var(--qvet-muted);
}

.qvet-set-ghost {
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--qvet-line-input);
    border-radius: 8px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qvet-wine);
    cursor: pointer;
}

.qvet-set-ghost:hover:not(:disabled) {
    border-color: var(--qvet-wine);
}

.qvet-set-ghost:disabled {
    color: var(--qvet-muted);
    cursor: not-allowed;
}

.qvet-set-list {
    display: flex;
    flex-direction: column;
}

.qvet-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--qvet-line-soft);
    font-size: 12.5px;
}

.qvet-set-row-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--qvet-ink);
}

.qvet-set-row-meta {
    font-size: 11.5px;
    color: var(--qvet-muted);
}

/* El interruptor del prototipo, dibujado en su posicion apagada porque no hay nada que
   encender: es la forma del control, no un control. */
.qvet-set-switch {
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 99px;
    background: var(--qvet-line-input);
}

.qvet-set-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

.qvet-rate-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr 0.6fr;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--qvet-line-soft);
    font-size: 12.5px;
}

.qvet-rate-grid--head {
    padding: 0 0 8px;
    border-top: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qvet-muted);
}

.qvet-rate-value {
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-set-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.qvet-settings-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--qvet-cta);
    text-decoration: none;
}

.qvet-settings-link:hover {
    color: var(--qvet-cta-hover);
    text-decoration: underline;
}

.qvet-settings-link:focus-visible {
    outline: 2px solid var(--qvet-cta);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------- espacios reservados de un modulo que falta ---------- */

/*
 * Deliberadamente apagado y con borde punteado: tiene que leerse como un hueco
 * anunciado, no como una tarjeta que no cargo. Un placeholder que parece contenido real
 * es peor que no tenerlo.
 */
.qvet-pending-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px dashed var(--qvet-line-input);
    border-radius: 12px;
    background: var(--qvet-surface-subtle);
}

.qvet-pending-tag {
    flex: none;
    padding: 3px 9px;
    border-radius: 99px;
    background: #f3eff9;
    color: var(--qvet-wine);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.qvet-callout-lines {
    flex: 1;
    min-width: 0;
}

.qvet-pending-body {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--qvet-ink-soft);
}

.qvet-pending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

/* Cinco piezas en cuatro columnas dejan una suelta; en tres quedan 3 + 2. */
@media (min-width: 1100px) {
    .qvet-pending-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.qvet-pending-card {
    padding: 16px;
    border: 1px dashed var(--qvet-line-input);
    border-radius: 12px;
    background: #fff;
}

.qvet-pending-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--qvet-ink-soft);
}

.qvet-pending-text {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--qvet-muted);
}

.qvet-pending-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 190px;
    padding: 18px;
    border: 1px dashed var(--qvet-line-input);
    border-radius: 12px;
    background: var(--qvet-surface-subtle);
    text-align: center;
}

.qvet-pending-slot-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--qvet-ink-soft);
}

.qvet-pending-slot-note {
    margin: 6px auto 0;
    max-width: 30ch;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--qvet-muted);
}

.qvet-outlook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.qvet-pending-slot .qvet-panel-link {
    margin-top: 10px;
}

/* ---------- agenda: rejilla proporcional + detalle ---------- */

/*
 * La geometria sale de design/v1.0: 30 minutos = 30px, lineas de hora cada 60px y
 * bloques posicionados por reloj. No es decoracion -- la altura del bloque ES la
 * duracion, y el hueco entre dos citas ES el hueco libre. Apilar los bloques en una
 * lista pierde justo eso.
 */
.qvet-agenda-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.qvet-agenda-prof {
    border: 1px solid var(--qvet-line-input);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 12.5px;
    background: #fff;
    color: var(--qvet-ink);
}

.qvet-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qvet-week-step,
.qvet-week-today-btn {
    border: 1px solid var(--qvet-line-input);
    border-radius: 8px;
    background: #fff;
    color: var(--qvet-ink-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.qvet-week-step {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.qvet-week-today-btn {
    height: 30px;
    padding: 0 12px;
}

.qvet-week-step:hover,
.qvet-week-today-btn:hover {
    border-color: var(--qvet-cta);
    color: var(--qvet-cta);
}

/* El foco visible no se hereda de Filament: estos no son .fi-btn. */
.qvet-agenda-prof:focus-visible,
.qvet-week-step:focus-visible,
.qvet-week-today-btn:focus-visible {
    outline: 2px solid var(--qvet-cta);
    outline-offset: 2px;
}

.qvet-agenda {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.qvet-week {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow-x: auto;
}

.qvet-week-grid {
    display: grid;
    grid-template-columns: 44px repeat(6, 1fr);
    gap: 0 4px;
    min-width: 640px;
}

.qvet-week-head {
    text-align: center;
    padding: 4px 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qvet-ink-soft);
}

.qvet-week-head--today {
    color: var(--qvet-coral);
}

.qvet-week-today-tag {
    display: block;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--qvet-coral);
}

.qvet-week-hours {
    position: relative;
    height: var(--qvet-col-height);
}

.qvet-week-hour {
    position: absolute;
    right: 6px;
    font-size: 10px;
    color: var(--qvet-muted);
    transform: translateY(-50%);
}

/* La trama cada 60px es la hora: sin ella los bloques flotan sin referencia. */
.qvet-week-col {
    position: relative;
    height: var(--qvet-col-height);
    border-radius: 6px;
    background-color: var(--qvet-surface-subtle);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--qvet-line-soft) 0 1px,
        transparent 1px 60px
    );
}

.qvet-week-col--today {
    background-color: #fdf6f0;
}

/* El left y el width los escribe la pagina: los reparte entre las citas que se solapan. */
.qvet-slot {
    position: absolute;
    display: block;
    border: none;
    border-left: 3px solid var(--qvet-line-input);
    border-radius: 5px;
    padding: 3px 6px;
    box-sizing: border-box;
    text-align: start;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    background: #f6f6f7;
}

.qvet-slot-line,
.qvet-slot-service {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qvet-slot-line {
    font-size: 9.5px;
    font-weight: 700;
}

.qvet-slot-service {
    font-size: 9px;
    opacity: 0.75;
}

.qvet-slot:focus-visible {
    outline: 2px solid var(--qvet-cta);
    outline-offset: 1px;
}

/* Colores de estado del prototipo. La cita abierta se anilla en vino sin perder el
   color de su estado: el anillo dice "esta es", el fondo dice "en que esta". */
.qvet-slot--confirmed {
    background: #e7f2ec;
    border-left-color: #1d5c4d;
    color: #1d5c4d;
}

.qvet-slot--pending {
    background: #fbf3e4;
    border-left-color: #a9631b;
    color: #a9631b;
}

.qvet-slot--attended,
.qvet-slot--no_show {
    background: var(--qvet-line-soft);
    border-left-color: var(--qvet-muted);
    color: var(--qvet-muted);
}

.qvet-slot--selected {
    box-shadow: 0 0 0 2px var(--qvet-wine);
}

/* La reserva web sin responder ocupa el hueco pero no es una cita todavia: va punteada
   para que no se lea como agenda cerrada. */
.qvet-slot--ghost {
    background: rgba(107, 32, 68, 0.05);
    border: 1.5px dashed #c9badf;
    color: var(--qvet-wine);
}

.qvet-detail {
    width: 250px;
    flex: none;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 12px;
    padding: 18px 20px;
    position: sticky;
    top: 20px;
}

.qvet-detail-label {
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qvet-muted);
}

.qvet-detail-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--qvet-ink);
}

.qvet-detail-service {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--qvet-ink-soft);
}

.qvet-detail-status {
    display: inline-block;
    margin-top: 10px;
}

.qvet-detail-list {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 7px 8px;
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.4;
}

.qvet-detail-list dt {
    color: var(--qvet-muted);
}

.qvet-detail-list dd {
    margin: 0;
    font-weight: 500;
    color: var(--qvet-ink);
}

.qvet-detail-pending {
    color: var(--qvet-muted);
    font-style: italic;
}

.qvet-detail-cta {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 9px 0;
    box-sizing: border-box;
    border: 1.5px solid var(--qvet-wine);
    border-radius: 9px;
    background: #fff;
    color: var(--qvet-wine);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.qvet-detail-cta:hover {
    background: #f3eff9;
}

.qvet-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--qvet-line-soft);
}

.qvet-detail-empty-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--qvet-muted);
}

@media (max-width: 1023px) {
    .qvet-agenda {
        flex-direction: column;
    }

    .qvet-detail {
        width: 100%;
        position: static;
    }
}

/* ---------- propietarios: lista y ficha al lado ---------- */

.qvet-owners {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.qvet-owners-main {
    flex: 1;
    min-width: 0;
}

.qvet-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--qvet-line-input);
    border-radius: 10px;
    font: inherit;
    font-size: 13.5px;
    color: var(--qvet-ink);
}

.qvet-search:focus-visible {
    outline: 2px solid var(--qvet-wine);
    outline-offset: 1px;
    border-color: var(--qvet-wine);
}

.qvet-list-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 12px;
}

.qvet-list-empty {
    margin: 0;
    padding: 26px 18px;
    text-align: center;
    font-size: 12.5px;
    color: var(--qvet-muted);
}

.qvet-owner-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--qvet-line-soft);
    text-align: start;
    cursor: pointer;
}

.qvet-owner-row:hover,
.qvet-owner-row--selected {
    background: #f3eff9;
}

.qvet-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #c9badf;
    color: var(--qvet-wine);
    font-size: 13px;
    font-weight: 700;
}

.qvet-avatar--lg {
    width: 46px;
    height: 46px;
    font-family: var(--qvet-display);
    font-size: 20px;
    font-weight: 400;
}

.qvet-owner-who {
    flex: 1;
    min-width: 0;
}

.qvet-owner-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-owner-phone {
    display: block;
    font-size: 11px;
    color: var(--qvet-muted);
}

.qvet-owner-count {
    white-space: nowrap;
    font-size: 11px;
    color: var(--qvet-muted);
}

/* El pie que el prototipo repite en toda lista larga: cuantas se ven y el paginador. */
.qvet-list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 18px;
    background: var(--qvet-surface-subtle);
    border-top: 1px solid var(--qvet-line);
    font-size: 11px;
    color: var(--qvet-muted);
}

.qvet-pager {
    display: flex;
    align-items: center;
    gap: 4px;
}

.qvet-pager-step {
    min-width: 26px;
    height: 26px;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 7px;
    font: inherit;
    font-size: 11px;
    color: var(--qvet-wine);
    cursor: pointer;
}

.qvet-pager-step:disabled {
    color: var(--qvet-muted);
    cursor: not-allowed;
}

.qvet-pager-step--current {
    background: var(--qvet-wine);
    border-color: var(--qvet-wine);
    color: #fff;
    font-weight: 600;
}

.qvet-pager-gap {
    padding: 0 2px;
}

.qvet-owner-detail {
    position: sticky;
    top: 20px;
    flex: none;
    box-sizing: border-box;
    width: 380px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 14px;
}

.qvet-owner-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qvet-owner-detail-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--qvet-ink);
}

.qvet-owner-detail-meta {
    margin: 0;
    font-size: 11.5px;
    color: var(--qvet-muted);
}

.qvet-owner-detail-contact {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--qvet-ink-soft);
}

.qvet-owner-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.qvet-btn {
    flex: 1;
    padding: 8px 0;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.qvet-btn--green {
    background: #1d5c4d;
    color: #fff;
}

.qvet-btn--green:hover {
    background: #174a3e;
}

.qvet-btn--ghost {
    padding: 7px 0;
    background: #fff;
    border: 1px solid var(--qvet-line);
    color: var(--qvet-wine);
}

.qvet-btn--ghost:hover {
    border-color: var(--qvet-wine);
}

.qvet-owner-block {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--qvet-line);
}

.qvet-owner-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.qvet-owner-block-title {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qvet-muted);
}

.qvet-owner-block-total {
    font-size: 11px;
    color: var(--qvet-muted);
}

.qvet-owner-block-total strong {
    color: var(--qvet-ink);
}

.qvet-owner-block-empty {
    margin: 0;
    font-size: 12px;
    color: var(--qvet-muted);
}

.qvet-owner-pet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 9px;
    text-decoration: none;
}

.qvet-owner-pet + .qvet-owner-pet {
    margin-top: 6px;
}

.qvet-owner-pet:hover {
    border-color: var(--qvet-wine);
}

.qvet-owner-pet > span:first-child {
    flex: 1;
    min-width: 0;
}

.qvet-owner-pet-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-owner-pet-sub {
    display: block;
    font-size: 10.5px;
    color: var(--qvet-muted);
}

.qvet-owner-pet-arrow {
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--qvet-wine);
}

/* Bajo 1000px la ficha no cabe al lado y pasa debajo, sin quedarse pegada. */
@media (max-width: 1000px) {
    .qvet-owners {
        flex-direction: column;
    }

    .qvet-owner-detail {
        position: static;
        width: 100%;
    }
}

/* ---------- listas en rejilla: pacientes e inventario ---------- */

/*
 * El prototipo dibuja estas listas como una rejilla de proporciones fijas, no como una
 * tabla: cada pantalla declara su reparto de columnas y todo lo demas -- cabecera, fila,
 * separador, hover -- es igual en las dos.
 */
.qvet-grid {
    display: grid;
    gap: 12px;
    align-items: center;
}

.qvet-grid-head {
    padding: 11px 18px;
    background: var(--qvet-surface-subtle);
    border-bottom: 1px solid var(--qvet-line);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qvet-muted);
}

.qvet-grid-row {
    padding: 12px 18px;
    border-bottom: 1px solid var(--qvet-line-soft);
    font-size: 12.5px;
    color: var(--qvet-ink);
    text-decoration: none;
}

.qvet-grid-row:hover {
    background: #f3eff9;
}

.qvet-grid--patients {
    grid-template-columns: 1.5fr 1.2fr 1.2fr 1fr 1fr;
}

.qvet-grid--inventory {
    grid-template-columns: 1.7fr 0.55fr 0.55fr 0.7fr 1fr 1fr;
}

.qvet-cell-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.qvet-avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 12.5px;
}

.qvet-cell-strong {
    font-weight: 600;
}

.qvet-cell-muted {
    color: var(--qvet-muted);
}

.qvet-cell-mono {
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
    font-size: 11.5px;
    color: var(--qvet-muted);
}

/* Los tonos del chip nombrados como los nombra el enum, para que una pantalla nueva no
   tenga que inventar otra clase para el mismo estado. */
.qvet-chip--success {
    background: #e7f2ec;
    color: #1d5c4d;
}

.qvet-chip--warning {
    background: #fbf3e4;
    color: #a9631b;
}

.qvet-chip--danger {
    background: #faecea;
    color: #b3261e;
}

.qvet-chip--dotted::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

/* Seis columnas no entran en una pantalla angosta: la lista scrollea dentro de su caja
   en vez de estirar el cuerpo de la pagina. */
@media (max-width: 900px) {
    .qvet-list-card {
        overflow-x: auto;
    }

    .qvet-grid--patients,
    .qvet-grid--inventory {
        min-width: 760px;
    }
}

/* ---------- vacunacion: secciones, pildoras de rango y filas con accion ---------- */

.qvet-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.qvet-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-section-note {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--qvet-muted);
}

/* El grupo de rango del prototipo: un riel gris con la opcion activa en vino. */
.qvet-pills {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: #efeae4;
    border-radius: 9px;
}

.qvet-pill {
    padding: 6px 13px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--qvet-ink-soft);
    cursor: pointer;
}

.qvet-pill:hover {
    background: rgba(107, 32, 68, 0.08);
}

.qvet-pill--on,
.qvet-pill--on:hover {
    background: var(--qvet-wine);
    color: #fff;
}

.qvet-grid--doses {
    grid-template-columns: 1.5fr 1.2fr 1.1fr 1fr 0.9fr 1.1fr 0.8fr;
    gap: 10px;
}

.qvet-grid--dormant {
    grid-template-columns: 1.3fr 1.2fr 1fr 0.9fr 1.4fr 0.8fr;
    gap: 10px;
}

.qvet-cell-link {
    font-weight: 600;
    color: var(--qvet-wine);
    text-decoration: none;
}

.qvet-cell-link:hover {
    text-decoration: underline;
}

.qvet-cell-away {
    font-weight: 600;
    color: #a9631b;
}

.qvet-reminder {
    font-size: 11.5px;
    font-weight: 500;
}

.qvet-reminder--ok {
    color: #1d5c4d;
}

.qvet-reminder--bad {
    color: #b3261e;
}

.qvet-reminder--muted {
    color: var(--qvet-muted);
}

.qvet-row-btn {
    display: inline-block;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--qvet-line-input);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--qvet-wine);
    text-decoration: none;
}

.qvet-row-btn:hover {
    background: #f3eff9;
    border-color: var(--qvet-wine);
}

.qvet-row-btn--alert {
    padding: 6px 10px;
    border-color: #f0c7c2;
    font-size: 11px;
    color: #b3261e;
}

.qvet-row-btn--alert:hover {
    background: #faecea;
    border-color: #b3261e;
}

.qvet-figure-value--wine {
    color: var(--qvet-wine);
}

.qvet-figure-value--ink {
    color: var(--qvet-ink);
}

@media (max-width: 900px) {
    .qvet-grid--doses,
    .qvet-grid--dormant {
        min-width: 820px;
    }
}

.qvet-booking-breed {
    font-size: 11.5px;
    color: var(--qvet-muted);
}

/* ---------- expediente: columna de identidad y pestanas ---------- */

.qvet-crumb {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12.5px;
}

.qvet-crumb a {
    color: var(--qvet-muted);
    text-decoration: none;
}

.qvet-crumb a:hover {
    color: var(--qvet-wine);
}

.qvet-crumb span[aria-hidden] {
    color: #c9badf;
}

.qvet-crumb-here {
    font-weight: 600;
    color: var(--qvet-wine);
}

.qvet-record {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.qvet-record-id {
    flex: none;
    box-sizing: border-box;
    width: 300px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 14px;
}

.qvet-record-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qvet-avatar--xl {
    width: 88px;
    height: 88px;
    font-family: var(--qvet-display);
    font-size: 40px;
    font-weight: 400;
}

.qvet-record-name {
    margin: 14px 0 2px;
    font-family: var(--qvet-display);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--qvet-ink);
}

.qvet-record-line {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--qvet-muted);
}

.qvet-record-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.qvet-chip--lilac {
    background: #f3eff9;
    color: var(--qvet-wine);
    font-weight: 500;
}

/* La alergia se lee antes de anestesiar: por eso lleva borde y no solo color de fondo. */
.qvet-chip--allergy {
    background: #faecea;
    border: 1px solid #f0c7c2;
    color: #b3261e;
    white-space: normal;
}

.qvet-record-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--qvet-line);
}

.qvet-record-owner {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-record-consent {
    margin-top: 8px;
}

.qvet-record-arco {
    display: inline-block;
    margin-top: 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--qvet-cta);
    text-decoration: none;
}

.qvet-record-arco:hover {
    text-decoration: underline;
}

.qvet-record-weight {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
}

.qvet-record-weight-value {
    font-family: var(--qvet-display);
    font-size: 34px;
    line-height: 1.1;
    color: var(--qvet-ink);
}

.qvet-record-delta {
    font-size: 12.5px;
    font-weight: 600;
}

.qvet-record-delta--up {
    color: #1d5c4d;
}

.qvet-record-delta--down {
    color: #a9631b;
}

.qvet-record-delta--muted {
    color: var(--qvet-muted);
}

.qvet-record-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.qvet-btn--cta {
    padding: 12px 0;
    background: var(--qvet-cta);
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
}

.qvet-btn--cta:hover {
    background: var(--qvet-cta-hover);
}

.qvet-btn--outline {
    padding: 11px 0;
    background: #fff;
    border: 1.5px solid var(--qvet-wine);
    border-radius: 10px;
    color: var(--qvet-wine);
    font-size: 13.5px;
}

.qvet-btn--outline:hover {
    background: #f3eff9;
}

.qvet-btn--inline {
    flex: none;
    padding: 9px 16px;
    font-size: 12.5px;
    border-radius: 9px;
}

.qvet-record-main {
    flex: 1;
    min-width: 0;
}

.qvet-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--qvet-line);
}

.qvet-tab {
    margin-bottom: -2px;
    padding: 10px 18px 12px;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--qvet-muted);
    cursor: pointer;
}

.qvet-tab--on {
    color: var(--qvet-wine);
    box-shadow: inset 0 -2px 0 var(--qvet-coral);
}

.qvet-timeline {
    padding-top: 22px;
}

.qvet-visit {
    display: flex;
    gap: 16px;
}

/* El riel es un hijo flexible de alto completo: asi la linea llega hasta la tarjeta
   siguiente sin que haya que calcular su alto. */
.qvet-visit-rail {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    width: 14px;
}

.qvet-visit-rail::after {
    content: '';
    flex: 1;
    width: 2px;
    background: var(--qvet-line);
}

.qvet-visit-dot {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border: 3px solid var(--qvet-paper);
    border-radius: 50%;
    background: var(--qvet-wine);
    box-shadow: 0 0 0 1.5px var(--qvet-wine);
}

.qvet-visit-dot--surgery,
.qvet-visit-dot--emergency {
    background: var(--qvet-coral);
    box-shadow: 0 0 0 1.5px var(--qvet-coral);
}

.qvet-visit-card {
    flex: 1;
    min-width: 0;
    margin-bottom: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-radius: 12px;
}

.qvet-visit-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qvet-visit-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--qvet-muted);
}

.qvet-visit-title {
    margin: 8px 0 10px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--qvet-ink);
}

.qvet-visit-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
}

.qvet-visit-grid dt {
    font-weight: 500;
    color: var(--qvet-muted);
}

.qvet-visit-grid dd {
    margin: 0;
}

/* El bloque que ata lo que se cobro con lo que se uso: el prototipo lo destaca, y es
   la trazabilidad quirurgica que distingue al producto. */
.qvet-supplies {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f3eff9;
    border: 1px solid #ddd2ec;
    border-radius: 10px;
}

.qvet-supplies-title {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qvet-wine);
}

.qvet-supply {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    font-size: 12px;
}

.qvet-supply-qty {
    font-weight: 600;
    color: var(--qvet-wine);
}

.qvet-visit-foot {
    margin: 12px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--qvet-line-soft);
    font-size: 11.5px;
    color: var(--qvet-muted);
}

.qvet-visit-foot strong {
    color: var(--qvet-ink);
}

.qvet-empty-card {
    margin: 0;
    padding: 28px;
    background: #fff;
    border: 1px dashed var(--qvet-line-input);
    border-radius: 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--qvet-muted);
}

.qvet-tab-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 22px 0 14px;
}

.qvet-grid--doses-of-patient {
    grid-template-columns: 1.4fr 1fr 0.8fr 1fr 1fr;
}

.qvet-grid--invoices {
    grid-template-columns: 1fr 1.4fr 0.8fr 1fr;
}

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

    .qvet-record-id {
        width: 100%;
    }
}

/* La segunda linea del subtitulo del prototipo: la base legal en letra menor. */
.qvet-subheading-legal {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--qvet-muted);
}

.qvet-booking-empty-line {
    margin: 0;
    padding: 26px 18px;
    text-align: center;
    font-size: 12.5px;
    color: var(--qvet-muted);
}

/* Cada solicitud del sitio, en su propia tarjeta: asi la dibuja el prototipo cuando la
   pantalla es suya y no una columna del panel del dia. */
.qvet-booking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qvet-booking--card {
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--qvet-line);
    border-bottom: 1px solid var(--qvet-line);
    border-radius: 12px;
}

/* En la tarjeta ancha el nombre no se estira: la raza y la etiqueta WEB van pegadas a el,
   no empujadas al otro extremo de la fila. */
.qvet-booking--card .qvet-booking-name {
    flex: none;
    font-size: 14px;
}

.qvet-booking--card .qvet-booking-head {
    flex-wrap: wrap;
}

.qvet-booking--card .qvet-booking-body {
    flex: 1;
    min-width: 0;
}

.qvet-booking--card .qvet-booking-initial {
    width: 42px;
    height: 42px;
    font-size: 16px;
}

.qvet-booking-empty .qvet-btn--inline {
    margin-top: 18px;
}

/*
 * El banner del canal de recordatorios.
 *
 * El prototipo lo pinta relleno y en verde porque da el canal por conectado; aqui lleva
 * la misma caja rellena en ambar, que es el estado real. El borde punteado queda para los
 * modulos que no existen: esto existe y esta apagado, que no es lo mismo.
 */
.qvet-channel-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: #fbf3e4;
    border: 1px solid #ebd9b4;
    border-radius: 12px;
}

.qvet-channel-callout .qvet-pending-title {
    color: #7a5410;
}

.qvet-channel-callout .qvet-pending-body {
    color: #7a5410;
}

.qvet-channel-callout .qvet-pending-tag {
    background: #fff;
    color: #a9631b;
}

.qvet-channel-callout .qvet-inline-link {
    color: #7a5410;
    font-weight: 600;
}