/**
 * Catálogo de componentes. Cada bloque corresponde a un partial en
 * app/Http/Vistas/componentes/ — ver docs/sistema-diseno.md para la
 * regla de uso de cada uno. Depende de tokens.css.
 */

/* ---- Botón ---- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-5);
    border-radius: var(--radio-md);
    border: none;
    font: var(--texto-boton);
    cursor: pointer;
    width: 100%;
}

.boton--primario {
    background: var(--color-marca);
    color: #FFFFFF;
}
.boton--primario:active {
    background: var(--color-marca-fuerte);
}

.boton--secundario {
    background: transparent;
    border: 2px solid var(--color-agua);
    color: var(--color-agua);
}

.boton--destructivo {
    background: transparent;
    border: 2px solid var(--color-semaforo-atencion);
    color: var(--color-semaforo-atencion);
}

.boton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Barra superior / navegación global ---- */

/* Mismo patrón oculto-pero-interactivo que .semaforo__radio: el checkbox
   real existe y funciona sin JavaScript, el estado visual del menú lo
   resuelve `:checked ~` en CSS. */
.menu-superior__checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.barra-superior {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    height: 56px;
    padding-inline: var(--espacio-2);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.barra-superior__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--objetivo-tactil-min);
    height: var(--objetivo-tactil-min);
    flex-shrink: 0;
    border-radius: var(--radio-md);
    color: var(--color-tinta);
    cursor: pointer;
}

.barra-superior__boton:active {
    background: var(--color-fondo);
}

.barra-superior__marca {
    padding-inline: var(--espacio-3);
    font: var(--texto-subtitulo);
    color: var(--color-marca);
}

.barra-superior__logo {
    /* 2026-09-04: 28px estrujaba cualquier logo con texto apilado bajo
       el ícono (el de LomitosBonitos.MX, por ejemplo) hasta volverlo
       ilegible — 44px deja ~6px de aire arriba/abajo dentro de la barra
       de 56px y sigue cabiendo cómodo. */
    height: 44px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
    margin-inline: var(--espacio-3);
    display: block;
}

.barra-superior__espacio {
    flex: 1;
}

.menu-superior__fondo {
    position: fixed;
    inset: 0;
    background: rgba(42, 36, 48, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 29;
}

.menu-superior {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 85vw);
    background: var(--color-superficie);
    box-shadow: -2px 0 12px rgba(42, 36, 48, 0.15);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: var(--espacio-5) var(--espacio-4);
    padding-top: calc(var(--espacio-5) + env(safe-area-inset-top, 0));
    overflow-y: auto;
}

.menu-superior__checkbox:checked ~ .menu-superior__fondo {
    opacity: 1;
    pointer-events: auto;
}

.menu-superior__checkbox:checked ~ .menu-superior {
    transform: translateX(0);
}

.menu-superior .menu-superior__marca {
    padding-inline: var(--espacio-3);
    margin-bottom: var(--espacio-4);
    font: var(--texto-titulo);
}

/* ---- Campanita (recordatorios + avisos del admin, 2026-09-01) ---- */
/* Mismo patrón checkbox-oculto + `:checked ~` que .menu-superior__checkbox
   de arriba — funciona sin JavaScript, el estado del desplegable lo
   resuelve el CSS. */

.campanita {
    position: relative;
    display: flex;
}

.campanita__checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.campanita__boton {
    position: relative;
}

.campanita__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-semaforo-atencion);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Overlay invisible para cerrar al tocar fuera — mismo truco que
   .menu-superior__fondo, pero transparente: esta campanita es un
   desplegable anclado, no un cajón de pantalla completa. */
.campanita__fondo {
    position: fixed;
    inset: 0;
    z-index: 24;
    display: none;
}

.campanita__checkbox:checked ~ .campanita__fondo {
    display: block;
}

.campanita-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(340px, 90vw);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
    padding: var(--espacio-2);
    z-index: 25;
    display: none;
    flex-direction: column;
    gap: var(--espacio-2);
}

.campanita__checkbox:checked ~ .campanita-panel {
    display: flex;
}

.campanita-panel__vacio {
    padding: var(--espacio-3);
    color: var(--color-tinta-suave);
    font-size: 0.875rem;
    text-align: center;
}

.campanita-panel__item {
    display: block;
    padding: var(--espacio-3);
    border-radius: var(--radio-sm);
    background: var(--color-fondo);
    text-decoration: none;
    color: inherit;
}

.campanita-panel__item strong {
    display: block;
    margin-bottom: 2px;
}

.campanita-panel__item span,
.campanita-panel__item p {
    display: block;
    font-size: 0.85rem;
    color: var(--color-tinta-suave);
    margin: 0;
}

.campanita-panel__item--aviso {
    background: var(--color-marca-suave);
}

.campanita-panel__confirmar {
    margin-top: var(--espacio-2);
    padding: 6px 12px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    cursor: pointer;
    font-size: 0.8rem;
}

.menu-superior__logo {
    /* 2026-09-04: se agrega max-width como red de seguridad para un logo
       ancho (no solo alto/apilado como el de LomitosBonitos.MX) — sin
       esto podía estirarse hasta pegarle al borde del panel (300px con
       padding). */
    height: 48px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    margin: 0 var(--espacio-3) var(--espacio-4);
    display: block;
}

.menu-superior__seccion {
    font: var(--texto-apoyo);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
    margin: var(--espacio-4) var(--espacio-3) var(--espacio-1);
}

.menu-superior__seccion:first-of-type {
    margin-top: var(--espacio-2);
}

.menu-superior__enlace {
    display: flex;
    align-items: center;
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-3);
    border-radius: var(--radio-md);
    color: var(--color-tinta);
    text-decoration: none;
    font: var(--texto-cuerpo);
    font-weight: 600;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
}

.menu-superior__enlace:active {
    background: var(--color-marca-suave);
}

.menu-superior__separador {
    height: 1px;
    background: var(--color-borde);
    border: none;
    margin-block: var(--espacio-3);
}

.menu-superior__enlace--salir {
    color: var(--color-semaforo-atencion);
}

/* ---- Barra de acción inferior ---- */

.barra-accion-inferior {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    height: var(--altura-barra-inferior);
    background: var(--color-superficie);
    box-shadow: var(--sombra-barra-inferior);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding-inline: var(--espacio-4);
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 10;
}

/* ---- Semáforo de hallazgo ---- */

.semaforo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-2);
}

/* El radio real existe (accesible, funciona sin JS) pero se oculta
   visualmente — el label de al lado es lo que se ve y se toca. Patrón
   estándar de "radio estilizado", sin depender de :has() (soporte
   incompleto en Safari iOS 16.0–16.3, uno de los navegadores objetivo). */
.semaforo__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.semaforo__opcion {
    min-height: var(--objetivo-tactil-min);
    border-radius: var(--radio-md);
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
    cursor: pointer;
    text-align: center;
    padding: var(--espacio-1);
}

.semaforo__radio:focus-visible + .semaforo__opcion {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

.semaforo__radio[data-valor="normal"]:checked + .semaforo__opcion {
    background: var(--color-semaforo-normal-suave);
    border-color: var(--color-semaforo-normal);
    color: var(--color-semaforo-normal);
    font-weight: 600;
}
.semaforo__radio[data-valor="atencion_leve"]:checked + .semaforo__opcion {
    background: var(--color-semaforo-leve-suave);
    border-color: var(--color-semaforo-leve);
    color: var(--color-semaforo-leve);
    font-weight: 600;
}
.semaforo__radio[data-valor="requiere_atencion"]:checked + .semaforo__opcion {
    background: var(--color-semaforo-atencion-suave);
    border-color: var(--color-semaforo-atencion);
    color: var(--color-semaforo-atencion);
    font-weight: 600;
}
.semaforo__radio[data-valor="no_evaluado"]:checked + .semaforo__opcion {
    background: var(--color-fondo);
    border-color: var(--color-borde);
    color: var(--color-tinta-suave);
    font-weight: 600;
}

/* ---- Chip ---- */

/* Mismo patrón oculto-pero-interactivo que .semaforo__radio — ver esa
   nota para el porqué (no display:none, rompería el toggle sin JS). */
.chip__checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-4);
    border-radius: var(--radio-sm);
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-tinta);
    font: var(--texto-cuerpo);
    cursor: pointer;
}

.chip__checkbox:focus-visible + .chip {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

.chip__checkbox:checked + .chip {
    background: var(--color-marca-suave);
    border-color: var(--color-marca);
    color: var(--color-marca);
    font-weight: 600;
}

/* ---- Chip de filtro (botón real, no checkbox — filtra en JS, ver
   catalogo-servicios.js) y chip removible (para "Automatizaciones" del
   catálogo de servicios: cada concepto ya incluido se muestra como
   pastilla con una × para quitarlo). Mismo lenguaje visual que .chip
   arriba, pero sin el patrón oculto-input-checkbox porque no son un
   valor de formulario por sí solos. */
.chip-filtro {
    display: inline-flex;
    align-items: center;
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-4);
    border-radius: var(--radio-sm);
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-tinta);
    font: var(--texto-cuerpo);
    cursor: pointer;
}

.chip-filtro:focus-visible {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

.chip-filtro[aria-pressed="true"] {
    background: var(--color-marca-suave);
    border-color: var(--color-marca);
    color: var(--color-marca);
    font-weight: 600;
}

.chip-removible {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: 4px var(--espacio-3);
    border-radius: var(--radio-sm);
    background: var(--color-marca-suave);
    color: var(--color-marca);
    font-size: 0.85rem;
    font-weight: 600;
}

.chip-removible__quitar {
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* ---- Interruptor (toggle switch) ----
   Checkbox real, estilizado como interruptor — mismo patrón
   oculto-pero-interactivo que .chip__checkbox arriba: funciona sin
   JavaScript, el estado lo resuelve `:checked + .interruptor__riel` en
   CSS, nunca un script. */
.interruptor {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3);
    cursor: pointer;
}

.interruptor__entrada {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.interruptor__riel {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-borde);
    transition: background-color 0.15s ease;
}

.interruptor__riel::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(30, 24, 38, 0.25);
    transition: transform 0.15s ease;
}

.interruptor__entrada:checked + .interruptor__riel {
    background: var(--color-marca);
}

.interruptor__entrada:checked + .interruptor__riel::before {
    transform: translateX(18px);
}

.interruptor__entrada:focus-visible + .interruptor__riel {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .interruptor__riel,
    .interruptor__riel::before {
        transition: none;
    }
}

/* ---- Pasos del proceso (stepper), ver servicios/detalle.php ---- */
.pasos-proceso {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pasos-proceso__paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 84px;
}

.pasos-proceso__circulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-tinta-suave);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pasos-proceso__circulo--completado {
    background: var(--color-semaforo-normal);
    border-color: var(--color-semaforo-normal);
    color: #FFFFFF;
}

.pasos-proceso__circulo--actual {
    border-color: var(--color-marca);
    color: var(--color-marca);
    background: var(--color-marca-suave);
}

.pasos-proceso__etiqueta {
    font-size: 0.7rem;
    text-align: center;
    color: var(--color-tinta-suave);
}

.pasos-proceso__etiqueta--actual {
    color: var(--color-marca);
    font-weight: 700;
}

.pasos-proceso__linea {
    flex: 1;
    min-width: 16px;
    height: 2px;
    background: var(--color-borde);
    margin-top: 15px;
}

/* ---- Calendario mensual (servicios/formulario_nuevo.php, "Agendar
   servicio" — mockup 2026-08-29 v3) — cuadrícula de 7 columnas, un día
   por celda. El color del punto de disponibilidad se pinta inline
   (depende de datos por día), esta clase solo da la forma. */
.calendario-mes {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.calendario-mes__dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px;
    border-radius: 10px;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
}

.calendario-mes__dia:hover {
    background: var(--color-fondo);
}

.calendario-mes__dia--fuera-de-mes {
    color: var(--color-tinta-suave);
    opacity: 0.5;
}

.calendario-mes__dia--hoy {
    border-color: var(--color-marca);
}

.calendario-mes__dia--seleccionado,
.calendario-mes__dia--seleccionado:hover {
    background: var(--color-marca);
    border-color: var(--color-marca);
    color: #FFFFFF;
}

.calendario-mes__punto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* ---- Horarios disponibles (mismo mockup) — botón por franja de
   horario; JS marca seleccionado/ocupado según el responsable elegido
   (ver servicio-formulario.js), sin JS todos se ven iguales y el campo
   de hora nativo sigue siendo la forma de capturarla. */
.horario-boton {
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-marca);
    cursor: pointer;
}

.horario-boton--seleccionado {
    background: var(--color-marca);
    border-color: var(--color-marca);
    color: #FFFFFF;
}

.horario-boton--ocupado {
    background: var(--color-semaforo-leve-suave);
    border-color: var(--color-semaforo-leve-suave);
    color: var(--color-semaforo-leve);
}

/* "Lleno" (2026-09-05, slots agregados del portal del cliente — ver
   DisponibilidadService::slotsDisponibles()) — mismo rojo/atención que
   ya usa el calendario de mes para ese estado. Sigue siendo clickeable,
   "nunca bloquea duro" aplica igual que --ocupado. */
.horario-boton--lleno {
    background: var(--color-semaforo-atencion-suave);
    border-color: var(--color-semaforo-atencion-suave);
    color: var(--color-semaforo-atencion);
}

/* ---- Tarjeta colapsable (servicios/detalle.php: Resumen del
   servicio, Responsable y horario, Acciones opcionales, Pagos) — en
   escritorio son tarjetas siempre visibles como cualquier otra; en
   celular se colapsan por default (pedido del usuario 2026-08-29,
   la primera versión se veía "igual" en los dos tamaños). Mismo
   <details> sin JavaScript que .panel-desplegable, pero con estilo de
   tarjeta en vez de botón porque aquí el <summary> es un encabezado de
   sección, no una acción que dispara un formulario.
   El atributo [open] en escritorio lo pone servicio-detalle.js al
   cargar — un intento anterior de forzarlo solo con CSS
   (":not([open]) > contenido { display:block }") se veía bien en
   teoría pero NO renderizaba el contenido en navegadores reales
   (reportado por el usuario 2026-08-29): el contenido de un <details>
   cerrado no es un simple display:none de hoja de estilos, así que no
   se puede pisar solo con CSS. Con JS controlando el atributo real,
   [open] + esta regla de abajo (ocultar la flecha y bloquear el clic
   en escritorio) si funciona. */
.tarjeta-colapsable {
    background: var(--color-superficie);
    border-radius: 12px;
    box-shadow: var(--sombra-tarjeta);
    padding: 16px;
}

.tarjeta-colapsable > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.tarjeta-colapsable > summary::-webkit-details-marker {
    display: none;
}

.tarjeta-colapsable > summary::after {
    content: '▾';
    color: var(--color-tinta-suave);
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

.tarjeta-colapsable[open] > summary::after {
    transform: rotate(180deg);
}

.tarjeta-colapsable__contenido {
    margin-top: 12px;
}

@media (min-width: 641px) {
    .tarjeta-colapsable > summary {
        pointer-events: none;
        cursor: default;
    }
    .tarjeta-colapsable > summary::after {
        display: none;
    }
}

/* Cabecera compacta con iniciales — mismo tratamiento visual que
   .tarjeta-mascota__foto--inicial, un componente aparte porque aquí es
   circular solo (sin la fila nombre/meta pegada). */
.avatar-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-marca);
    color: #FFFFFF;
    font-weight: 700;
    flex-shrink: 0;
}

/* Contenido principal + sidebar (servicios/detalle.php,
   agenda/calendario.php — cualquier pantalla con .flex:3 + .flex:1
   min-width:260px). La columna principal lleva min-width:0 a
   propósito (para poder encogerse sin forzar scroll horizontal en el
   propio contenido, ej. una tabla ancha con su propio overflow-x), pero
   eso significa que un flex-wrap por sí solo NUNCA manda esa columna a
   una línea nueva — puede encogerse hasta casi desaparecer en vez de
   apilarse, que es justo el bug que reportó el usuario 2026-08-29 (las
   dos columnas quedaban lado a lado, exprimidas, en celular Y en
   tablet angosta). Se fuerza explícito con flex-direction: column por
   debajo de 640px — mismo patrón que usan Bootstrap/Tailwind para
   "columna + sidebar que se apila en móvil": un punto de quiebre
   explícito, no wrap automático. Arriba de 640px (incluida una tablet
   en vertical, ~768px+) se queda en dos columnas: hay espacio de sobra
   para el sidebar (260px mínimo) sin apretar el contenido principal. */
.diseno-principal-lateral {
    display: flex;
    gap: var(--espacio-4);
    align-items: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .diseno-principal-lateral {
        flex-direction: column;
    }

    .diseno-principal-lateral > * {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .pasos-proceso__etiqueta {
        display: none;
    }

    .pasos-proceso__paso {
        width: 36px;
    }

    .pasos-proceso__circulo {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .pasos-proceso__linea {
        margin-top: 13px;
    }
}

/* ---- Calendario de Agenda (columnas por responsable, ver
   agenda/calendario.php) ---- */
.agenda-cita {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    border-radius: 8px;
    border-left: 4px solid var(--color-borde);
    background: var(--color-fondo);
    text-decoration: none;
    color: var(--color-tinta);
    overflow: hidden;
    font-size: 0.8rem;
}

.agenda-cita:hover,
.agenda-cita:focus-visible {
    background: var(--color-marca-suave);
}

.agenda-cita__hora {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--color-tinta-suave);
}

.agenda-cita__nombre {
    font-size: 0.85rem;
}

.agenda-cita__meta {
    color: var(--color-tinta-suave);
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-cita__pie {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    margin-top: auto;
}

.agenda-cita__asignar {
    color: var(--color-semaforo-atencion);
    font-size: 0.7rem;
    font-weight: 600;
}

/* Slot vacío de la cuadrícula (ver agenda-nueva-cita.js) — arrastrar
   sobre uno o varios abre el popup "Nueva cita" con fecha/hora/duración/
   responsable ya resueltos por el arrastre. */
.agenda-slot {
    cursor: pointer;
}

.agenda-slot:hover {
    background: var(--color-marca-suave);
}

.agenda-slot--seleccionado {
    background: var(--color-marca-suave);
}

/* Reagendar arrastrando una cita existente (2026-09-09) — ver
   agenda-calendario.js, segunda IIFE. */
.agenda-cita[draggable="true"] {
    cursor: grab;
}

.agenda-cita--arrastrando {
    opacity: 0.4;
}

.agenda-slot--objetivo-drop {
    background: var(--color-semaforo-normal-suave);
    outline: 2px dashed var(--color-semaforo-normal);
    outline-offset: -2px;
}

/* ---- Tarjeta de mascota/cliente ---- */

.tarjeta-mascota {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta-mascota__foto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-marca-suave);
    flex-shrink: 0;
}

.tarjeta-mascota__foto--inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-marca);
    font: var(--texto-subtitulo);
}

.tarjeta-mascota__nombre {
    font: var(--texto-subtitulo);
}

.tarjeta-mascota__meta {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
}

/* ---- Campo de formulario ---- */

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.campo__etiqueta {
    font: var(--texto-apoyo);
    font-weight: 600;
    color: var(--color-tinta);
}

.campo__control {
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-3);
    border-radius: var(--radio-md);
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    font: var(--texto-cuerpo);
}

.campo__control:focus-visible {
    border-color: var(--color-agua);
}

.campo__ayuda {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
}

.campo__ayuda--error {
    color: var(--color-semaforo-atencion);
}

/* ---- Insignia de estado ---- */

.insignia {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--espacio-3);
    height: 28px;
    border-radius: 999px;
    font: var(--texto-apoyo);
    font-weight: 600;
}

.insignia--positiva { background: var(--color-semaforo-normal-suave); color: var(--color-semaforo-normal); }
.insignia--pendiente { background: var(--color-semaforo-leve-suave); color: var(--color-semaforo-leve); }
.insignia--negativa { background: var(--color-semaforo-atencion-suave); color: var(--color-semaforo-atencion); }
.insignia--neutral { background: var(--color-agua-suave); color: var(--color-agua); }

/* ---- Estados vacío / cargando / error ---- */

.estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--espacio-3);
    padding: var(--espacio-6) var(--espacio-4);
    color: var(--color-tinta-suave);
}

.estado__titulo {
    font: var(--texto-subtitulo);
    color: var(--color-tinta);
}

.estado--error .estado__titulo {
    color: var(--color-semaforo-atencion);
}

/* ---- Mensaje de error de formulario (mensajeError() en componentes.php) ----
   Distinto de .estado--error: ese es un estado de pantalla completa
   (p.ej. "no se pudo cargar la lista"), esto es la pastilla compacta que
   aparece arriba de un <form> cuando la validación falla. */
.mensaje-error {
    background: var(--color-semaforo-atencion-suave);
    color: var(--color-semaforo-atencion);
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    margin-bottom: var(--espacio-4);
}

.mensaje-error p {
    margin: 0;
}

.mensaje-error p + p {
    margin-top: var(--espacio-1);
}

.mensaje-exito {
    background: var(--color-semaforo-normal-suave);
    color: var(--color-semaforo-normal);
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    margin-bottom: var(--espacio-4);
}

/* ---- Contenedor ancho (default desktop-first, corregido 2026-09-04) ----
   Ya no es la excepción de "pantallas de mostrador" — es el contenedor
   por defecto de casi toda pantalla operativa (ver docs/sistema-diseno.md):
   la mayoría del sistema se usa sentado, en computadora. 960px se sentía
   angosto en un monitor de escritorio típico (1440-1920px+); 1280px usa
   el espacio real sin estirarse de forma incómoda en monitores ultra
   anchos. Sigue centrado y responsivo: en pantallas angostas simplemente
   ocupa el ancho disponible, y cualquier tabla dentro debe envolverse en
   .tabla-scroll (overflow-x: auto) para no romper el layout. La
   excepción real es el checklist de servicio con fotos
   (servicios/detalle.php) y login/portal del cliente, que siguen usando
   .contenedor (480px, base.css, mobile-first) a propósito. */
.contenedor-ancho {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--espacio-4);
}

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

/* ---- Venta en mostrador (ventas/nueva.php) ----
   Única pantalla del sistema en "modo mostrador" ($modoMostrador en
   layout/cabecera.php): tres columnas fijas de escritorio (navegación
   lateral · catálogo · carrito) en vez de la barra superior + hoja de
   menú estándar — ver docs/sistema-diseno.md § "Excepción: pantallas de
   mostrador". Sigue sin romperse en un celular (colapsa a una columna),
   pero se diseña primero para la computadora del mostrador, con las
   manos libres. */
.pantalla--mostrador {
    padding-bottom: 0;
}

.pos {
    display: flex;
    min-height: 100dvh;
    align-items: stretch;
}

.pos-cuerpo {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: stretch;
}

/* ---- Navegación lateral ---- */

.pos-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-2);
    width: 88px;
    flex-shrink: 0;
    padding-block: var(--espacio-4);
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
}

.pos-sidebar__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--espacio-3);
    border-radius: var(--radio-md);
    overflow: hidden;
}

.pos-sidebar__logo {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}

.pos-sidebar__logo-letra {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-marca);
    color: #FFFFFF;
    font: var(--texto-subtitulo);
    border-radius: var(--radio-md);
}

.pos-sidebar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-1);
    width: 72px;
    padding-block: var(--espacio-2);
    border-radius: var(--radio-md);
    text-decoration: none;
    color: var(--color-tinta-suave);
    position: relative;
}

.pos-sidebar__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radio-md);
    background: var(--color-fondo);
    color: var(--color-tinta-suave);
    font-weight: 700;
}

.pos-sidebar__etiqueta {
    font: var(--texto-apoyo);
    font-size: 0.75rem;
}

.pos-sidebar__item--activo {
    color: var(--color-marca);
    box-shadow: inset 3px 0 0 var(--color-marca);
}

.pos-sidebar__item--activo .pos-sidebar__icono {
    background: var(--color-marca);
    color: #FFFFFF;
}

.pos-sidebar__item--activo .pos-sidebar__etiqueta {
    font-weight: 600;
}

.pos-sidebar__mas {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-fondo);
    color: var(--color-tinta-suave);
    cursor: pointer;
    font-weight: 700;
}

/* ---- Panel MVZ (Inicio del rol Veterinario, 2026-09-07 v2, mockup
   fiel pedido por el usuario) — barra lateral ANCHA con ícono+etiqueta
   en la misma fila y el activo como píldora rellena, a propósito
   distinta de .pos-sidebar de arriba (angosta, solo ícono, pensada para
   mostrador/consulta) — son pantallas con necesidades de espacio
   distintas, no vale la pena forzar una sola variante para las dos. ---- */

.mvz-shell {
    display: flex;
    min-height: 100dvh;
    align-items: stretch;
}

.mvz-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
    padding: var(--espacio-4) var(--espacio-3);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
}

.mvz-sidebar__marca {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-4);
}

.mvz-sidebar__marca img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mvz-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    color: var(--color-tinta-suave);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.mvz-sidebar__item:hover {
    background: var(--color-fondo);
}

.mvz-sidebar__item--activo,
.mvz-sidebar__item--activo:hover {
    background: var(--color-marca);
    color: #FFFFFF;
}

.mvz-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mvz-topbar {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
    border-bottom: 1px solid var(--color-borde);
    background: var(--color-superficie);
    flex-wrap: wrap;
}

.mvz-topbar__buscador {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.mvz-topbar__perfil {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-tinta);
}

.mvz-topbar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-marca-suave);
    color: var(--color-marca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.mvz-contenido {
    flex: 1;
    padding: var(--espacio-5);
    min-width: 0;
}

.mvz-kpi {
    flex: 1;
    min-width: 200px;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
    padding: var(--espacio-4);
    display: flex;
    gap: var(--espacio-3);
    align-items: flex-start;
}

.mvz-kpi__icono {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.mvz-avatar-mascota {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mvz-avatar-mascota--inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-marca-suave);
    color: var(--color-marca);
    font-weight: 700;
}

.mvz-agenda-fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    text-decoration: none;
    color: inherit;
}

.mvz-agenda-fila--actual {
    background: var(--color-semaforo-leve-suave);
    border-left: 4px solid var(--color-semaforo-leve);
}

.mvz-rango-toggle {
    display: inline-flex;
    background: var(--color-fondo);
    border-radius: var(--radio-md);
    padding: 3px;
    gap: 2px;
}

.mvz-rango-toggle__opcion {
    border: none;
    background: none;
    padding: 6px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-tinta-suave);
    cursor: pointer;
}

.mvz-rango-toggle__opcion--activo {
    background: var(--color-marca);
    color: #FFFFFF;
}

@media (max-width: 900px) {
    .mvz-sidebar {
        display: none;
    }
}

/* ---- Encabezado y cliente ---- */

.pos-principal {
    flex: 1;
    min-width: 0;
    padding: var(--espacio-5);
    overflow-y: auto;
}

.pos-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.pos-cabecera__titulo {
    margin: 0;
}

.pos-cabecera__negocio {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: var(--color-tinta-suave);
    font: var(--texto-apoyo);
}

.pos-cabecera__negocio strong {
    color: var(--color-tinta);
    font: var(--texto-subtitulo);
}

.pos-cliente {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    margin-bottom: var(--espacio-4);
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
}

.pos-cliente__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-marca-suave);
    color: var(--color-marca);
    font: var(--texto-subtitulo);
}

.pos-cliente__avatar--foto {
    object-fit: cover;
}

.pos-cliente__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pos-cliente__etiqueta {
    font: var(--texto-apoyo);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
}

.pos-cliente__nombre {
    font: var(--texto-subtitulo);
}

.pos-cliente__meta {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
}

.pos-cliente__cambiar {
    color: var(--color-agua);
    font-weight: 600;
    font: var(--texto-apoyo);
    text-decoration: none;
    white-space: nowrap;
}

.pos-sugerido {
    background: var(--color-marca-suave);
    border-radius: var(--radio-md);
    padding: var(--espacio-3) var(--espacio-4);
    margin-bottom: var(--espacio-4);
    color: var(--color-marca-fuerte);
}

.pos-sugerido p {
    margin: var(--espacio-1) 0 0;
}

.pos-cliente-buscador {
    margin-bottom: var(--espacio-4);
}

.pos-cliente-buscador__form {
    display: flex;
    gap: var(--espacio-2);
    align-items: flex-end;
    max-width: 480px;
}

.pos-cliente-buscador__resultados {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    max-width: 480px;
    margin-top: var(--espacio-2);
}

.pos-cliente-buscador__resultado {
    text-decoration: none;
    color: inherit;
}

.pos-vacio-texto {
    color: var(--color-tinta-suave);
}

/* ---- Buscador de producto y pestañas de categoría ---- */

.pos-buscador {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-3);
    margin-bottom: var(--espacio-3);
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-md);
}

.pos-buscador__icono {
    display: flex;
    color: var(--color-tinta-suave);
    flex-shrink: 0;
}

.pos-buscador__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font: var(--texto-cuerpo);
    outline: none;
}

.pos-buscador__atajo {
    flex-shrink: 0;
    padding: 2px var(--espacio-2);
    border-radius: var(--radio-sm);
    background: var(--color-fondo);
    color: var(--color-tinta-suave);
    font: var(--texto-apoyo);
    font-size: 0.75rem;
}

.pos-aviso {
    background: var(--color-fondo);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3) var(--espacio-4);
    margin-bottom: var(--espacio-3);
    color: var(--color-tinta-suave);
    font: var(--texto-apoyo);
}

.pos-tabs {
    display: flex;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
    flex-wrap: wrap;
}

.pos-tab {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: var(--espacio-4);
    border-radius: 999px;
    color: var(--color-tinta-suave);
    text-decoration: none;
    font: var(--texto-apoyo);
    font-weight: 600;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
}

.pos-tab--activo {
    background: var(--color-marca);
    border-color: var(--color-marca);
    color: #FFFFFF;
}

/* ---- Grid de productos/servicios ---- */

.venta-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--espacio-3);
}

.venta-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espacio-1);
    padding: var(--espacio-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font: inherit;
    width: 100%;
}

.venta-tile:active {
    background: var(--color-marca-suave);
}

/* Un servicio nunca se agrega al carrito, siempre navega a cotizar (ver
   nota en VentasController::datosVista()) — icono y flecha en marca en
   vez del agua de un producto, para que la diferencia se note sin tener
   que leer la etiqueta "Servicio". */
.venta-tile--servicio .venta-tile__icono {
    background: var(--color-marca-suave);
    color: var(--color-marca);
}

.venta-tile--servicio .venta-tile__agregar {
    background: var(--color-marca);
    color: #FFFFFF;
}

/* Sin cliente seleccionado todavía no hay a dónde mandar la cotización
   — la tarjeta se ve pero no se puede tocar, en vez de desaparecer (así
   la operadora sabe que el servicio existe y qué le falta para venderlo). */
.venta-tile--inactivo {
    cursor: not-allowed;
    opacity: 0.55;
}

.venta-tile--inactivo:active {
    background: var(--color-superficie);
}

/* Producto con venta por paquete (2026-09-06, ej. "bote completo" de
   pastillas) — la tarjeta pasa de <button> a <div> (mismo criterio ya
   usado por las tarjetas de servicio) para poder alojar DOS botones
   reales: el click normal (venta_tile__click, "display:contents" para
   que sus hijos se vean exactamente como antes, sin caja propia) y el
   botón chico de paquete debajo, con su propio precio de mayoreo. */
.venta-tile__click {
    all: unset;
    display: contents;
    cursor: pointer;
}

.venta-tile__paquete-boton {
    width: 100%;
    margin-top: var(--espacio-1);
    padding: var(--espacio-1) var(--espacio-2);
    background: var(--color-agua-suave);
    color: var(--color-agua);
    border: 1px solid var(--color-agua);
    border-radius: var(--radio-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.venta-tile__paquete-boton:active {
    background: var(--color-agua);
    color: #FFFFFF;
}

.venta-tile__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--espacio-2);
}

.venta-tile__categoria {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--texto-apoyo);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-tinta-suave);
}

.venta-tile__cabecera .insignia {
    flex-shrink: 0;
    white-space: nowrap;
    padding-inline: var(--espacio-2);
}

.venta-tile__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-agua-suave);
    color: var(--color-agua);
    font-weight: 700;
    margin-block: var(--espacio-1);
}

.venta-tile__nombre {
    font-weight: 600;
    color: var(--color-tinta);
}

.venta-tile__meta {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
}

.venta-tile__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--espacio-2);
}

.venta-tile__precio {
    font-weight: 700;
    color: var(--color-tinta);
}

.venta-tile__agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-marca-suave);
    color: var(--color-marca);
    font-weight: 700;
    line-height: 1;
}

/* ---- Gráficas de barras (graficaBarras() en componentes/graficas.php) ---- */

.grafica-barra {
    fill: #4B3B63;
    transition: fill 0.1s ease;
}

.grafica-columna {
    cursor: pointer;
}

.grafica-columna:hover .grafica-barra,
.grafica-columna:focus-visible .grafica-barra,
.grafica-columna--activa .grafica-barra {
    fill: var(--color-marca, #2F7A78);
}

.grafica-columna:focus-visible {
    outline: 2px solid var(--color-marca, #2F7A78);
    outline-offset: 2px;
}

/* graficaVentasCobros() — Reporte de operación: barras apiladas (servicios/productos) + líneas de cobros. */
.grafica-barra-servicios {
    fill: var(--color-marca, #4B3B63);
}

.grafica-barra-productos {
    fill: var(--color-agua, #1D7A8C);
}

.grafica-barra-paquetes {
    fill: #B8863F;
}

.grafica-tooltip {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    background: var(--color-tinta, #2A2430);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 6px 10px;
    font: var(--texto-apoyo, 0.8rem/1.3 inherit);
    white-space: nowrap;
    box-shadow: var(--sombra-tarjeta, 0 2px 8px rgba(0, 0, 0, 0.2));
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

.grafica-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

.grafica-tooltip strong {
    font-variant-numeric: tabular-nums;
}

/* ---- Carrito ---- */

.pos-carrito {
    width: 360px;
    flex-shrink: 0;
    padding: var(--espacio-5);
    background: var(--color-superficie);
    border-left: 1px solid var(--color-borde);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
}

/* Panel lateral fijo genérico de pantalla de mostrador — mismas reglas
   estructurales que .pos-carrito (ancho, sticky, borde), para pantallas
   que no son un carrito de venta pero sí necesitan una columna lateral
   de resumen (ver consulta-medica/formulario.php). */
.pos-panel-lateral {
    width: 360px;
    flex-shrink: 0;
    padding: var(--espacio-5);
    background: var(--color-superficie);
    border-left: 1px solid var(--color-borde);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
}

.pos-panel-lateral h2 {
    margin-bottom: var(--espacio-3);
}

/* Debajo de ~1024px una pantalla de mostrador de dos columnas ya no
   cabe cómodo (ver requisito de UX #3, 48px mínimo de toque) — el panel
   lateral deja de ser sticky y pasa a apilarse debajo del contenido
   principal en vez de recortarse. */
@media (max-width: 1024px) {
    .pos-cuerpo {
        flex-direction: column;
    }

    .pos-panel-lateral,
    .pos-carrito {
        width: auto;
        position: static;
        height: auto;
        border-left: none;
        border-top: 1px solid var(--color-borde);
    }
}

.pos-carrito__cabecera {
    margin-bottom: var(--espacio-2);
}

.venta-linea-carrito {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--color-borde);
}

.venta-linea-carrito--servicio button {
    padding: 6px 12px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
}

.venta-linea-carrito--servicio--quitado {
    opacity: 0.5;
}

.venta-linea-carrito__info {
    /* Sin esto, un <select> de lote con etiquetas largas (2026-09-06,
       ej. "LOTE-A1 · Caduca 15/01/2027 · 58.00 restante") se dibuja a su
       ancho de contenido en vez del disponible: un div normal dentro de
       un flex container no se encoge por debajo del tamaño de su
       contenido (min-width:auto por defecto), y eso empuja los botones
       de cantidad fuera de la vista, obligando a hacer scroll lateral. */
    flex: 1 1 auto;
    min-width: 0;
}

.venta-linea-carrito__lote {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Descuento manual + "Dejar pendiente" (2026-09-06) colapsados: un enlace
   de texto, no un botón — la fila del carrito ya es densa (nombre, precio
   unitario, subtotal, controles de cantidad) y este es un caso de uso
   ocasional, no la acción principal de cada línea. */
.venta-linea-carrito__descuento-toggle {
    margin-top: 4px;
}

.venta-linea-carrito__descuento-toggle > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--color-marca);
}

.venta-linea-carrito__descuento-toggle > summary::-webkit-details-marker {
    display: none;
}

.venta-linea-carrito__descuento-toggle > summary::before {
    content: '▸ ';
}

.venta-linea-carrito__descuento-toggle[open] > summary::before {
    content: '▾ ';
}

.venta-linea-carrito__cantidad {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-shrink: 0;
}

.venta-linea-carrito__cantidad button {
    width: 32px;
    height: 32px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.pos-carrito__total {
    display: flex;
    justify-content: space-between;
    padding: var(--espacio-3) 0;
    border-top: 2px solid var(--color-borde);
    margin-top: var(--espacio-1);
    margin-bottom: var(--espacio-3);
}

.pos-metodo-pago {
    margin-bottom: var(--espacio-4);
}

.pos-metodo-pago__grupo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-2);
    margin-top: var(--espacio-2);
}

.pos-metodo-pago__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pos-metodo-pago__opcion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--radio-md);
    border: 2px solid var(--color-borde);
    color: var(--color-tinta-suave);
    font: var(--texto-apoyo);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.pos-metodo-pago__radio:focus-visible + .pos-metodo-pago__opcion {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

.pos-metodo-pago__radio:checked + .pos-metodo-pago__opcion {
    background: var(--color-marca);
    border-color: var(--color-marca);
    color: #FFFFFF;
}

.pos-efectivo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-3);
    align-items: end;
    margin-bottom: var(--espacio-2);
}

.pos-efectivo__cambio {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding-inline: var(--espacio-3);
    min-height: var(--objetivo-tactil-min);
    justify-content: center;
    background: var(--color-fondo);
    border-radius: var(--radio-md);
}

.pos-carrito .boton--primario {
    margin-top: var(--espacio-3);
    min-height: 56px;
    font-size: 1.0625rem;
}

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

    .pos-carrito {
        width: auto;
        position: static;
        height: auto;
        border-left: none;
        border-top: 1px solid var(--color-borde);
    }
}

@media (max-width: 640px) {
    .pos-sidebar {
        width: 64px;
    }

    .pos-sidebar__item {
        width: 48px;
    }

    .pos-sidebar__etiqueta {
        display: none;
    }

    .pos-cabecera {
        flex-direction: column;
    }

    .pos-cabecera__negocio {
        align-items: flex-start;
        text-align: left;
    }

    .pos-efectivo {
        grid-template-columns: 1fr;
    }
}

/* ---- Panel desplegable (<details>/<summary>) ----
   Mecanismo nativo para revelar una sección sin navegar a otra pantalla
   ni requerir JavaScript — usado para "nuevo producto", "editar" y
   "+ entrada" por fila en inventario, y "agregar cliente (opcional)" en
   ventas (ver docs/sistema-diseno.md). Reemplaza lo que antes eran
   pantallas separadas para acciones estrechamente relacionadas. El
   <summary> pierde el triángulo por defecto del navegador y se ve como un
   botón secundario; el contenido reutiliza el mismo look de tarjeta que
   el resto del sistema. */
.panel-desplegable {
    margin-bottom: var(--espacio-3);
}

.panel-desplegable > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-4);
    color: var(--color-agua);
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
}

.panel-desplegable > summary::-webkit-details-marker {
    display: none;
}

.panel-desplegable[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.panel-desplegable__contenido {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-top: none;
    border-radius: 0 0 var(--radio-md) var(--radio-md);
    padding: var(--espacio-4);
}

/* Auditoría UX V2 § Cuentas por cobrar: "Registrar pago debe ser la
   acción sólida primaria" — mismo tratamiento visual que .boton--primario
   (fondo de marca, ancho completo), a diferencia de Promesa de pago y
   Recordar que se quedan con el estilo secundario/outline de siempre. */
.panel-desplegable--primario > summary {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-marca);
    color: #FFFFFF;
    border-color: var(--color-marca);
    font-size: 1rem;
}

.panel-desplegable--primario[open] > summary {
    background: var(--color-marca-fuerte);
    border-color: var(--color-marca-fuerte);
}

/* Auditoría UX V2 § Inventario: "Ajuste/Merma continúa desplegándose
   dentro de la tabla" — Entrada, Ajuste/Merma y Editar (ver
   inventario/productos.php) siguen siendo <details> nativos para
   funcionar sin JavaScript, pero al abrirse se promueven a un drawer
   fijo del lado derecho en vez de empujar el contenido de la fila.
   Exclusividad DENTRO de una fila: nativa del navegador (mismas
   <details name="panel-{uuid}">). Entre filas distintas y el botón de
   cerrar/backdrop: ver inventario-drawer.js. */
.panel-drawer[open] > summary {
    border-radius: var(--radio-md);
    border-bottom: 1px solid var(--color-borde);
}

.panel-drawer[open] > .panel-desplegable__contenido {
    position: fixed;
    inset-block: 0;
    right: 0;
    left: auto;
    width: min(420px, 100vw);
    max-height: none;
    margin: 0;
    z-index: 1000;
    border: none;
    border-radius: 0;
    box-shadow: -8px 0 24px rgba(30, 24, 38, 0.25);
    overflow-y: auto;
    animation: panel-drawer-entrada 0.18s ease-out;
}

.panel-drawer[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(30, 24, 38, 0.55);
    z-index: 999;
}

.panel-drawer__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.panel-drawer__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-tinta-suave);
}

@keyframes panel-drawer-entrada {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .panel-drawer[open] > .panel-desplegable__contenido {
        animation: none;
    }
}

/* ---- Modal (venta-nuevo-cliente-modal.js) ---- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-4);
}

.modal[hidden] {
    display: none;
}

.modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(30, 24, 38, 0.55);
}

.modal__panel {
    position: relative;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
    padding: var(--espacio-6);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal__cerrar {
    position: absolute;
    top: var(--espacio-3);
    right: var(--espacio-3);
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-tinta-suave);
    padding: var(--espacio-2);
}

.modal__titulo {
    margin-bottom: 4px;
    padding-right: var(--espacio-6);
}

/* ---- Pestañas (mascotas/detalle.php) ----
   Sin JavaScript a propósito: input[type=radio] oculto + label asociado
   por "for" + combinador de hermanos (~) en CSS. Los radios deben ir
   ANTES de .pestanas__nav y los paneles en el marcado (mismo documento,
   orden importa para que ~ los alcance). Nombres de pestaña fijos
   (resumen/historial/preventivo/documentos/datos) porque solo esta
   pantalla los usa hoy — si aparece una segunda pantalla con pestañas,
   ahí vale la pena generalizar. */

.pestanas__radio {
    display: none;
}

.pestanas__nav {
    display: flex;
    gap: var(--espacio-1);
    overflow-x: auto;
    border-bottom: 2px solid var(--color-borde);
    margin-bottom: var(--espacio-4);
    scrollbar-width: thin;
}

.pestanas__nav::-webkit-scrollbar {
    height: 4px;
}

.pestanas__nav::-webkit-scrollbar-thumb {
    background: var(--color-borde);
    border-radius: 999px;
}

.pestanas__tab {
    display: inline-block;
    padding: var(--espacio-3) var(--espacio-4);
    font-weight: 600;
    color: var(--color-tinta-suave);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    cursor: pointer;
}

.pestanas__panel {
    display: none;
}

#pestana-resumen:checked ~ .pestanas__nav label[for="pestana-resumen"],
#pestana-historial:checked ~ .pestanas__nav label[for="pestana-historial"],
#pestana-preventivo:checked ~ .pestanas__nav label[for="pestana-preventivo"],
#pestana-documentos:checked ~ .pestanas__nav label[for="pestana-documentos"],
#pestana-datos:checked ~ .pestanas__nav label[for="pestana-datos"] {
    color: var(--color-marca);
    border-bottom-color: var(--color-marca);
}

#pestana-resumen:checked ~ .pestanas__panel--resumen,
#pestana-historial:checked ~ .pestanas__panel--historial,
#pestana-preventivo:checked ~ .pestanas__panel--preventivo,
#pestana-documentos:checked ~ .pestanas__panel--documentos,
#pestana-datos:checked ~ .pestanas__panel--datos {
    display: block;
}

/* ---- Recordatorios (recordatorios/listado.php, 2026-08-31) ---- */

.recordatorios-tab {
    padding: 8px 14px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-tinta);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.recordatorios-tab--activo {
    background: var(--color-marca);
    color: #FFFFFF;
    border-color: var(--color-marca);
}

.recordatorios-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.recordatorios-tabla th {
    text-align: left;
    padding: 8px 10px;
    color: var(--color-tinta-suave);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

.recordatorios-tabla td {
    padding: 10px;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}

.recordatorios-tabla tr:last-child td {
    border-bottom: none;
}

.recordatorios-menu {
    position: relative;
    display: inline-block;
}

.recordatorios-menu__boton {
    width: 32px;
    height: 32px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.recordatorios-menu__lista {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--color-superficie);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-tarjeta);
    padding: 6px;
    min-width: 220px;
    /* 40, no 10: recordatorios.js lo pasa a position:fixed al abrirlo
       (ver posicionarMenu(), 2026-09-01) para escapar del recorte del
       contenedor con overflow-x:auto de la tabla — necesita ganarle a la
       barra de navegación fija (z-index 20-30), sin llegar a competir con
       los modales (999-1000), que de cualquier forma siempre lo cierran
       antes de abrirse. */
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recordatorios-menu__lista[hidden] {
    display: none;
}

.recordatorios-menu__opcion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--radio-sm);
    font-size: 0.85rem;
    color: var(--color-tinta);
    cursor: pointer;
    text-decoration: none;
}

.recordatorios-menu__opcion:hover {
    background: var(--color-fondo);
}

.recordatorios-menu__opcion--destructiva {
    color: var(--color-semaforo-atencion);
}

/* ---- Tour guiado (2026-09-04) ----
   Ver public/assets/js/tour-guiado.js para la lógica. El "spotlight"
   sobre el elemento resaltado es puro CSS: un box-shadow con spread
   gigante (0 0 0 9999px) rellena todo el viewport alrededor del
   elemento sin necesitar una capa de overlay aparte ni clip-path — el
   elemento en sí queda claro porque el box-shadow nunca cubre la caja,
   solo su alrededor. z-index muy alto (2000+) para quedar por encima de
   cualquier drawer/modal existente (esos usan 999-1000, ver
   recordatorios.js), pero el propio box-shadow nunca captura clics —
   el resto de la página sigue 100% interactiva debajo. */
.tour-resaltado {
    position: relative;
    z-index: 2001;
    border-radius: var(--radio-md);
    box-shadow: 0 0 0 4px var(--color-superficie), 0 0 0 7px var(--color-marca), 0 0 0 9999px rgba(42, 36, 48, 0.45);
    transition: box-shadow 0.2s ease;
}

.tour-overlay-dim {
    position: fixed;
    inset: 0;
    background: rgba(42, 36, 48, 0.45);
    z-index: 2000;
    pointer-events: none;
}

.tour-tooltip {
    position: absolute;
    z-index: 2002;
    width: min(340px, calc(100vw - 32px));
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: 0 4px 16px rgba(42, 36, 48, 0.25);
    padding: var(--espacio-4);
}

.tour-tooltip--centrado {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tour-tooltip__progreso {
    font: var(--texto-apoyo);
    color: var(--color-agua);
    font-weight: 600;
    margin-bottom: var(--espacio-2);
}

.tour-tooltip__titulo {
    font: var(--texto-subtitulo);
    margin: 0 0 var(--espacio-2);
}

.tour-tooltip__texto {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
    margin: 0 0 var(--espacio-4);
}

.tour-tooltip__pista {
    font: var(--texto-apoyo);
    font-weight: 600;
    color: var(--color-agua);
    margin: -8px 0 var(--espacio-4);
}

.tour-tooltip__acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}

.tour-tooltip__acciones-derecha {
    display: flex;
    gap: var(--espacio-2);
}

.tour-boton {
    font: var(--texto-boton);
    font-size: 0.85rem;
    border-radius: var(--radio-sm);
    padding: 8px 14px;
    border: 1px solid transparent;
    cursor: pointer;
}

.tour-boton--primario {
    background: var(--color-marca);
    color: #FFFFFF;
}

.tour-boton--primario:hover {
    background: var(--color-marca-fuerte);
}

.tour-boton--secundario {
    background: var(--color-superficie);
    border-color: var(--color-borde);
    color: var(--color-tinta);
}

.tour-boton--fantasma {
    background: none;
    color: var(--color-tinta-suave);
    padding-left: 0;
}

.tour-boton--enlace {
    background: none;
    border: none;
    color: var(--color-agua);
    text-decoration: underline;
    padding: 0;
    font-size: 0.85rem;
}

.tour-boton--cerrar {
    background: none;
    border: none;
    color: var(--color-tinta-suave);
    padding: 0 0 0 var(--espacio-2);
    font-size: 1rem;
    line-height: 1;
}

.tour-pausa-pill {
    position: fixed;
    bottom: var(--espacio-4);
    right: var(--espacio-4);
    left: var(--espacio-4);
    max-width: 420px;
    margin-inline: auto;
    z-index: 2002;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: 0 4px 16px rgba(42, 36, 48, 0.25);
    padding: var(--espacio-3) var(--espacio-4);
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}

/* ============================================================================
   Portal del cliente — rediseño 2026-09-04 (mockups móvil + escritorio)
   ============================================================================
   Nav superior en escritorio + barra de pestañas fija en móvil, layout
   compartido nuevo (portal/layout/cabecera.php). La campanita reusa TAL
   CUAL las clases .campanita y .campanita-panel de arriba — es el mismo
   componente (checkbox oculto + `:checked ~`), no una versión aparte. */

.portal-nav-superior {
    position: sticky;
    top: 0;
    z-index: 20;
    display: none; /* solo escritorio, ver media query abajo */
    align-items: center;
    gap: var(--espacio-5);
    height: 64px;
    padding-inline: var(--espacio-5);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.portal-nav-superior__logo {
    height: 36px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Header simple de móvil (<900px) — logo + campanita + avatar, sin
   pestañas de texto (esas viven en .portal-nav-inferior). Visible por
   defecto (mobile-first), oculto en la media query de escritorio junto
   con .portal-nav-superior. */
.portal-nav-superior-movil {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    height: 56px;
    padding-inline: var(--espacio-4);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.portal-nav-superior-movil__logo {
    height: 32px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    display: block;
}

.portal-nav-superior-movil__acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.portal-nav-superior__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-6);
    flex: 1;
}

.portal-nav-superior__item {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font: var(--texto-apoyo);
    font-weight: 600;
    color: var(--color-tinta-suave);
    text-decoration: none;
    padding-block: var(--espacio-2);
    border-bottom: 2px solid transparent;
}

.portal-nav-superior__item svg {
    flex-shrink: 0;
}

.portal-nav-superior__item--activo {
    color: var(--color-marca);
    border-bottom-color: var(--color-marca);
}

.portal-nav-superior__cuenta {
    position: relative;
    display: flex;
}

.portal-nav-superior__avatar-boton {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    cursor: pointer;
    color: var(--color-tinta);
}

.portal-nav-superior__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
    padding: var(--espacio-2);
    z-index: 25;
    display: none;
    flex-direction: column;
    gap: 2px;
}

.portal-nav-superior__checkbox:checked ~ .portal-nav-superior__panel {
    display: flex;
}

.portal-nav-superior__panel a,
.portal-nav-superior__panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--espacio-3);
    border-radius: var(--radio-sm);
    text-decoration: none;
    color: var(--color-tinta);
    background: none;
    border: none;
    font: var(--texto-apoyo);
    cursor: pointer;
}

.portal-nav-superior__panel a:active,
.portal-nav-superior__panel button:active {
    background: var(--color-fondo);
}

/* Barra de pestañas fija — móvil (Inicio/Citas/Mascotas/Cuenta). Oculta en
   escritorio (ver media query abajo, junto con la nav superior). */
.portal-nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.portal-nav-inferior__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-block: var(--espacio-2);
    min-height: var(--objetivo-tactil-min);
    text-decoration: none;
    color: var(--color-tinta-suave);
    font-size: 0.7rem;
    font-weight: 600;
}

.portal-nav-inferior__item--activo {
    color: var(--color-marca);
}

.portal-nav-inferior__item svg {
    width: 22px;
    height: 22px;
}

/* El contenido de toda pantalla del portal necesita este colchón para que
   la barra fija de abajo no le tape la última tarjeta — solo en móvil. */
.portal-con-nav-inferior {
    padding-bottom: calc(var(--objetivo-tactil-min) + var(--espacio-5));
}

/* Bloques que solo tienen sentido en un tamaño (p.ej. "Agendar cita"
   cambia de posición entre móvil y escritorio, "Accesos rápidos" solo
   existe en escritorio) — mismo breakpoint que la nav de arriba. */
.portal-solo-escritorio {
    display: none;
}

@media (min-width: 900px) {
    .portal-nav-superior { display: flex; }
    .portal-nav-superior-movil { display: none; }
    .portal-nav-inferior { display: none; }
    .portal-con-nav-inferior { padding-bottom: 0; }
    .portal-solo-escritorio { display: block; }
    .portal-solo-movil { display: none; }
}

/* ---- "Servicios de hoy": tracker de 4 pasos ---- */

.portal-tracker {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--espacio-4);
}

.portal-tracker__paso {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.portal-tracker__circulo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo);
    border: 2px solid var(--color-borde);
    color: var(--color-tinta-suave);
    font-weight: 700;
    margin-bottom: var(--espacio-2);
    flex-shrink: 0;
}

.portal-tracker__paso--completo .portal-tracker__circulo {
    background: var(--color-semaforo-normal);
    border-color: var(--color-semaforo-normal);
    color: #FFFFFF;
}

.portal-tracker__paso--actual .portal-tracker__circulo {
    background: var(--color-superficie);
    border-color: var(--color-marca);
    color: var(--color-marca);
}

.portal-tracker__paso:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--color-borde);
}

.portal-tracker__paso--completo:not(:last-child)::after {
    background: var(--color-semaforo-normal);
}

.portal-tracker__etiqueta {
    font-size: 0.75rem;
    color: var(--color-tinta-suave);
    font-weight: 600;
}

.portal-tracker__paso--actual .portal-tracker__etiqueta {
    color: var(--color-marca);
}

/* ---- Tarjetas de resumen del dashboard (Inicio) ---- */

.portal-tarjeta {
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
    padding: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}

.portal-tarjeta--destacada {
    border: 1px solid var(--color-agua);
}

.portal-accesos-rapidos a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espacio-3) 0;
    text-decoration: none;
    color: var(--color-tinta);
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.9rem;
    font-weight: 600;
}

.portal-accesos-rapidos a:last-child {
    border-bottom: none;
}

/*
 * Medicamento incompleto en la receta de consulta médica (2026-09-08) —
 * reemplaza al aviso genérico "Todos los medicamentos están completos"
 * del panel lateral (pedido explícito del usuario: "no es claro que
 * significa"). Se marca la fila directo donde se captura, en vez de un
 * mensaje aparte que había que ir a buscar. Ver consulta-medica.js
 * (resumenFila): "incompleta" = tiene nombre pero le falta dosis,
 * frecuencia o duración.
 */
.fila-medicamento--incompleta {
    border-left: 3px solid var(--color-semaforo-atencion);
    background: var(--color-semaforo-atencion-suave) !important;
}

/*
 * Bandeja de Mensajes al estilo WhatsApp (2026-09-10, pedido explícito
 * del usuario: "podriamos emular la vista como se ve en whatsapp? que se
 * vean las conversaciones y todo?"). Usada solo por mensajes/listado.php
 * y mensajes/detalle.php — paleta propia (ver tokens.css § WhatsApp).
 */
.chat-lista__item {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-2);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-borde);
}

.chat-lista__item:hover {
    background: var(--color-fondo);
}

.chat-lista__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-whatsapp-suave);
    color: var(--color-whatsapp-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--texto-subtitulo);
    flex-shrink: 0;
}

.chat-lista__cuerpo {
    flex: 1;
    min-width: 0;
}

.chat-lista__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--espacio-2);
}

.chat-lista__nombre {
    font: var(--texto-subtitulo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-lista__hora {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
    flex-shrink: 0;
}

.chat-lista__hora--sin-leer {
    color: var(--color-whatsapp-oscuro);
    font-weight: 700;
}

.chat-lista__preview {
    color: var(--color-tinta-suave);
    font: var(--texto-apoyo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.chat-lista__badge {
    background: var(--color-whatsapp);
    color: #FFFFFF;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Hilo de una conversación */
.chat-encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.chat-encabezado__volver {
    color: var(--color-tinta-suave);
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.chat-encabezado__info {
    min-width: 0;
}

.chat-encabezado__nombre {
    font: var(--texto-subtitulo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-fondo {
    background: var(--color-whatsapp-fondo-chat);
    border-radius: var(--radio-md);
    padding: var(--espacio-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--espacio-4);
}

.chat-divisor-fecha {
    align-self: center;
    background: rgba(255, 255, 255, 0.75);
    color: var(--color-tinta-suave);
    font: var(--texto-apoyo);
    padding: 3px 12px;
    border-radius: 999px;
    margin: var(--espacio-2) 0;
}

.chat-burbuja {
    position: relative;
    max-width: 75%;
    padding: 8px 10px 6px;
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
}

.chat-burbuja--entrante {
    align-self: flex-start;
    background: var(--color-superficie);
    border-top-left-radius: 2px;
}

.chat-burbuja--saliente {
    align-self: flex-end;
    background: var(--color-whatsapp-suave);
    border-top-right-radius: 2px;
}

.chat-burbuja__cuerpo {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font: var(--texto-cuerpo);
    margin-bottom: 2px;
}

.chat-burbuja__meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    color: var(--color-tinta-suave);
    font-size: 0.7rem;
}

.chat-burbuja__check--leido {
    color: var(--color-whatsapp-check-leido);
}

.chat-caja-texto {
    display: flex;
    gap: var(--espacio-2);
    align-items: flex-end;
}

.chat-boton-enviar {
    width: var(--objetivo-tactil-min);
    height: var(--objetivo-tactil-min);
    border-radius: 50%;
    background: var(--color-whatsapp);
    color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}