body {
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    background: var(--body-bg);
}

.navbar-brand {
    font-weight: 700;
}

.table,
.data-grid {
    font-family: var(--font-table);
}

/* ===== Tablas / data-grid (F1-V.1: uniformidad transversal) ===== */
.table {
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table thead th {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--body-bg) 90%, var(--card-bg));
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table tbody td {
    border-color: var(--border-color);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--card-bg));
    --bs-table-accent-bg: transparent;
}

/* Zebra sutil pero definido (tono de marca al 5%) */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--card-bg));
    --bs-table-accent-bg: transparent;
}

.table .badge {
    vertical-align: middle;
}

/* Estado de caducidad en tablas (colores de severidad con tokens) */
.exp-bad { color: var(--color-danger); font-weight: 700; }
.exp-soon { color: color-mix(in srgb, var(--color-warning) 60%, #000); font-weight: 700; }

.depot-tag {
    font-size: .64rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--card-bg));
    color: var(--brand-primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--border-color));
}

.money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.card {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.text-muted {
    color: var(--text-muted);
}

/* Regla UI/UX (usuario, 2026-08-17): el texto gris en general dificulta la lectura.
   Se oscurece el texto secundario derivándolo de los tokens (mezcla con --text-primary)
   para mantener jerarquía pero con contraste AA. Bootstrap 5.3 usa !important en
   .text-muted, por lo que este override también lo necesita. */
:root {
    --text-muted-contrast: color-mix(in srgb, var(--text-muted) 45%, var(--text-primary));
}

.text-muted {
    color: var(--text-muted-contrast) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder,
.select-placeholder {
    color: var(--text-muted-contrast);
}

/* ===== Formularios (F1-V.2): patrón de inputbox aprobado aplicado a Bootstrap.
   NO toca form-control-color (swatches de color) ni rompe form-control-sm. ===== */
.form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-control,
.form-select {
    padding: 11px 14px;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, var(--border-color));
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control:not(:placeholder-shown) {
    border-color: color-mix(in srgb, var(--brand-primary) 72%, var(--border-color));
    background: color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg));
}

/* El tinte "con contenido" solo aplica a tipos de texto reales; los date/datetime/time
   no soportan :placeholder-shown y deben mantener fondo limpio. */
input.form-control[type="text"]:not(:placeholder-shown),
input.form-control[type="password"]:not(:placeholder-shown),
input.form-control[type="email"]:not(:placeholder-shown),
input.form-control[type="tel"]:not(:placeholder-shown),
input.form-control[type="number"]:not(:placeholder-shown),
input.form-control[type="search"]:not(:placeholder-shown),
textarea.form-control:not(:placeholder-shown) {
    border-color: color-mix(in srgb, var(--brand-primary) 72%, var(--border-color));
    background: color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg));
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    background: var(--card-bg);
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset;
    box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset;
    transition: background-color 9999s ease-out;
}

.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset,
        0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset,
        0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    transition: background-color 9999s ease-out;
}

/* Variantes pequeñas conservan su tamaño (no aplica el padding grande) */
.form-control-sm,
.form-select-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: 6px;
}

/* Excluye los swatches de color del branding */
.form-control-color {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}

.form-control-color:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

/* Textarea hereda el patrón de inputs */
textarea.form-control {
    line-height: 1.45;
}

/* Checks/radios/switch respetan los tokens */
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.form-check-input:checked:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

/* Los subtítulos que siguen al título de pantalla (h1) SIEMPRE en negro (regla de títulos). */
h1 + small.text-muted {
    color: var(--text-primary) !important;
}

.badge-pragmatic {
    background: var(--brand-primary);
}

/* ===== Zoom de miniatura al pasar el mouse (fotos de paciente / producto) =====
   Clase reutilizable: aplica al elemento <img> (o contenedor) una ampliación temporal.
   El contexto puede ajustar --thumb-scale (factor, por defecto 3.2) y --thumb-origin
   (punto de crecimiento, por defecto 15% 20%) para adaptarse a su layout. Requiere que el
   ancestro cercano tenga position:relative (o el propio elemento) y que el contenedor no
   recorte con overflow:hidden; el z-index del hover ya excede al contenido adyacente. */
.zoom-on-hover {
    --thumb-scale: 3.2;
    --thumb-origin: 15% 20%;
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: zoom-in;
}
.zoom-on-hover:hover {
    transform: scale(var(--thumb-scale));
    transform-origin: var(--thumb-origin);
    z-index: 5;
    border-radius: 12px;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--text-primary) 30%, transparent);
}

/* ===== Lightbox de miniatura (imágenes en tablas con `.table-responsive`) =====
   Micro-módulo reutilizable: cuando una imagen vive dentro de una tabla cuyo contenedor
   desborda con overflow (table-responsive), el hover-zoom genera un scrollbar vertical que
   recorta la foto. La regla del sistema: hover-zoom en tarjetas/paneles sin overflow;
   modal/lightbox al hacer clic en tablas con table-responsive (véase grooming).
   Uso: botón estático `.lt-thumb` (imagen dentro) + modal `.lt-photo-modal` compartido.
   JS por vista: al hacer clic en `.lt-thumb`, copiar `data-photo` a la etiqueta `<img>` del
   modal y mostrarlo. */
.lt-thumb {
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    flex: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-muted) 12%, var(--card-bg));
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lt-thumb:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--text-primary) 16%, transparent);
    transform: translateY(-1px);
}
.lt-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
}
.lt-photo-modal .modal-dialog { max-width: 680px; }
.lt-photo-modal .modal-body {
    text-align: center;
    padding: 0;
    background: color-mix(in srgb, var(--text-primary) 6%, var(--card-bg));
}
.lt-photo-modal img { max-width: 100%; max-height: 80vh; }

/* ===== Dashboard (Parte B: rejilla homogénea + severidad) ===== */
.dash-section-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.dash-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}
.dash-card:hover {
    transform: translateY(-2px);
}
.dash-card__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.dash-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dash-card__value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-card__title {
    font-weight: 600;
    font-size: .95rem;
}
.dash-card__detail {
    font-size: .78rem;
    color: var(--text-muted);
}
.dash-card__list {
    margin-top: 4px;
}
.dash-card__list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
    padding: 3px 0;
    border-bottom: 1px dashed var(--border-color);
}
.dash-card__item-link {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: middle;
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}
.dash-card__item-link:hover {
    text-decoration: underline;
}
.dash-card__list-item:last-child {
    border-bottom: 0;
}
.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-card--danger { border-color: var(--sev-danger); }
.dash-card--warning { border-color: var(--sev-warning); }
.dash-card--ok { border-color: var(--sev-ok); }
.dash-card--danger .dash-card__value { color: var(--color-danger); }
.dash-card--warning .dash-card__value { color: color-mix(in srgb, var(--color-warning) 60%, #000); }

/* Variables de severidad (mismo tono que la barra de resumen: color oscurecido para texto blanco) */
:root {
    --sev-danger: color-mix(in srgb, var(--color-danger) 72%, #000);
    --sev-warning: color-mix(in srgb, var(--color-warning) 70%, #000);
    --sev-ok: color-mix(in srgb, var(--color-success) 58%, #000);
}

/* Barra de resumen del día (severidad): semáforo segmentado, compacta, una línea (reutilizable) */
.sev-bar {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.10);
}
.sev-bar__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    color: #fff;
}
.sev-bar__item + .sev-bar__item {
    border-left: 2px solid rgba(255, 255, 255, .6);
}
/* Fondo oscurecido (mezcla con negro) para garantizar contraste alto con texto blanco. */
.sev-bar__item--danger { background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 88%, #000) 0%, color-mix(in srgb, var(--color-danger) 72%, #000) 100%); }
.sev-bar__item--warning { background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 88%, #000) 0%, color-mix(in srgb, var(--color-warning) 70%, #000) 100%); }
.sev-bar__item--ok { background: linear-gradient(180deg, color-mix(in srgb, var(--color-success) 82%, #000) 0%, color-mix(in srgb, var(--color-success) 58%, #000) 100%); }
.sev-bar__text {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}
.sev-bar__num {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.sev-bar__label {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsable: listas largas colapsadas */
.collapse-toggle {
    background: none;
    border: 0;
    color: var(--brand-primary);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.collapse-toggle:hover {
    text-decoration: underline;
}

.branding-preview-img {
    max-height: 80px;
    max-width: 220px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    padding: 6px;
    background: var(--card-bg);
}

/* ===== Formularios (patrón aprobado en el login: títulos, subtítulos, hints y campos) ===== */
.form-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.form-sub {
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.form-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--brand-primary);
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--card-bg));
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-hint .form-hint__ico {
    font-size: 1.3rem;
    line-height: 1;
    flex: 0 0 auto;
}

.form-field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-field input {
    width: 100%;
    padding: 11px 14px;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, var(--border-color));
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-field input::placeholder {
    color: var(--text-muted);
}

.form-field input:not(:placeholder-shown) {
    border-color: color-mix(in srgb, var(--brand-primary) 72%, var(--border-color));
    background: color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg));
}

.form-field input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    background: var(--card-bg);
}

/* Autofill: conserva el tinte de marca del estado "con contenido" (no el azul del navegador),
   manteniendo además el halo de focus en la variante :focus. */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset;
    box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset;
    transition: background-color 9999s ease-out;
}

.form-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset,
        0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    box-shadow: 0 0 0 1000px color-mix(in srgb, var(--brand-primary) 7%, var(--card-bg)) inset,
        0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    transition: background-color 9999s ease-out;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 14px;
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.auth-btn:hover {
    background: var(--brand-secondary);
}

/* ===== Color picker buscable ===== */
.erp-cp { position: relative; }

.erp-cp__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 248px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    padding: 4px;
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease;
}
.erp-cp.is-open .erp-cp__list { display: block; }
.erp-cp.is-visible .erp-cp__list { opacity: 1; transform: translateY(0); }

.erp-cp__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 7px 9px;
    border-radius: 7px;
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
    transition: background .12s ease;
}
.erp-cp__item:hover,
.erp-cp__item.is-active { background: color-mix(in srgb, var(--text-muted) 12%, transparent); }

.erp-cp__sw {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.erp-cp__name { line-height: 1.2; }
.erp-cp__name mark {
    background: color-mix(in srgb, var(--color-warning) 35%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}
.erp-cp__empty {
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: .9rem;
}

/* ===== Botones (F1-V.2): refinamiento global con tokens de Developer ===== */
.btn {
    border-radius: 8px;
    font-weight: 600;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* Success/Danger derivados de tokens de severidad (fondo oscurecido + texto blanco) */
.btn-success {
    background-color: var(--sev-ok);
    border-color: var(--sev-ok);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: color-mix(in srgb, var(--color-success) 82%, #000);
    border-color: color-mix(in srgb, var(--color-success) 82%, #000);
}
.btn-danger {
    background-color: var(--sev-danger);
    border-color: var(--sev-danger);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: color-mix(in srgb, var(--color-danger) 82%, #000);
    border-color: color-mix(in srgb, var(--color-danger) 82%, #000);
}
.btn-outline-danger {
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 55%, var(--border-color));
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--sev-danger);
    border-color: var(--sev-danger);
    color: #fff;
}

/* Success / Warning / Info outline derivados de tokens (hover con fondo oscurecido + texto blanco) */
.btn-outline-success {
    color: var(--sev-ok);
    border-color: color-mix(in srgb, var(--color-success) 55%, var(--border-color));
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--sev-ok);
    border-color: var(--sev-ok);
    color: #fff;
}
.btn-outline-warning {
    color: color-mix(in srgb, var(--color-warning) 55%, #000);
    border-color: color-mix(in srgb, var(--color-warning) 55%, var(--border-color));
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--sev-warning);
    border-color: var(--sev-warning);
    color: #fff;
}
.btn-outline-info {
    color: color-mix(in srgb, var(--color-info) 78%, #000);
    border-color: color-mix(in srgb, var(--color-info) 55%, var(--border-color));
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: color-mix(in srgb, var(--color-info) 78%, #000);
    border-color: color-mix(in srgb, var(--color-info) 78%, #000);
    color: #fff;
}
.btn-outline-dark {
    color: var(--text-primary);
    border-color: var(--border-color);
    background: var(--card-bg);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--card-bg);
}

/* Secundarios con jerarquía legible (sin gris pálido).
   Hover prominente (relleno sólido oscuro + texto blanco) igual que primary/danger.
   El borde en idle usa el color del hover (--text-primary) para que el contorno sea visible
   aunque aún no se haya pasado el mouse. */
.btn-outline-secondary {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--text-primary) 55%, var(--border-color));
    background: var(--card-bg);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--card-bg);
}
.btn-secondary {
    background-color: color-mix(in srgb, var(--text-muted) 22%, var(--card-bg));
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: color-mix(in srgb, var(--text-muted) 34%, var(--card-bg));
    border-color: var(--text-muted-contrast);
    color: var(--text-primary);
}

/* ===== Sidebar / Menu lateral ===== */

.sb-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: var(--brand-primary);
    color: #fff;
    height: 52px;
}

.sb-topbar__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    gap: 8px;
}

.sb-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

.sb-topbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
}

.sb-topbar__brand:hover {
    color: inherit;
}

.sb-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-topbar__user {
    color: rgba(255,255,255,.9);
    font-size: .85rem;
}

.sb-topbar__role {
    color: rgba(255,255,255,.6);
    font-size: .75rem;
}

/* Campana de alertas de inventario (punto #6 · Ola 3) */
.sb-alerts {
    position: relative;
}

.sb-alerts__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}

.sb-alerts__btn:hover {
    background: rgba(255,255,255,.24);
}

.sb-alerts__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: .6rem;
    line-height: 1;
    min-width: 16px;
}

.sb-alerts__menu {
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    overflow: hidden;
}

.sb-alerts__list {
    max-height: 320px;
    overflow-y: auto;
}

.sb-alerts__readall {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color, #e9ecef);
    text-align: right;
}

.sb-alerts__link {
    border: 0;
    background: none;
    color: var(--brand-primary, #6f2d8f);
    font-size: .75rem;
    text-decoration: underline;
    cursor: pointer;
}

.sb-alerts__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #e9ecef);
}

.sb-alerts__item:last-child {
    border-bottom: 0;
}

.sb-alerts__body {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.sb-alerts__icon {
    font-size: 1rem;
    line-height: 1.4;
}

.sb-alerts__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sb-alerts__title {
    font-size: .8rem;
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-alerts__detail {
    font-size: .72rem;
    color: #6c757d;
}

.sb-alerts__item.is-read .sb-alerts__title {
    font-weight: 400;
    color: #6c757d;
}

.sb-alerts__dismiss {
    border: 0;
    background: none;
    color: #adb5bd;
    font-size: .75rem;
    line-height: 1.2;
    cursor: pointer;
    padding: 2px 4px;
}

.sb-alerts__dismiss:hover {
    color: var(--color-danger, #dc3545);
}

.sb-topbar__logout {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
}

.sb-topbar__logout:hover {
    background: rgba(255,255,255,.25);
}

/* Overlay (mobile) */
.sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1020;
    background: rgba(0,0,0,.4);
}

.sb-overlay.is-visible {
    display: block;
}

/* Sidebar */
.sb-sidebar {
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    z-index: 1025;
    width: 240px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    overflow-y: auto;
    transition: transform .2s ease;
}

.sb-sidebar__inner {
    padding: 8px 0;
}

/* Reloj oficial del sistema (Hito 5.1 · widget superior del menú lateral) */
.sb-clock {
    display: block;
    width: 100%;
    padding: 12px 16px 11px;
    margin-bottom: 6px;
    background: rgba(255,255,255,.05);
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: var(--sidebar-text);
    text-align: center;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.sb-clock:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

.sb-clock:focus-visible {
    outline: 2px solid rgba(255,255,255,.55);
    outline-offset: -2px;
}

.sb-clock__time {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sb-clock__date {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    letter-spacing: .02em;
    font-weight: 500;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Groups */
.sb-group {
    padding: 6px 0;
}

.sb-group__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 16px 4px;
    background: none;
    border: 0;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.4);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.sb-group__toggle:hover,
.sb-group.is-open .sb-group__toggle {
    color: rgba(255,255,255,.8);
}

.sb-group__toggle:focus-visible {
    outline: 2px solid rgba(255,255,255,.55);
    outline-offset: -2px;
}

.sb-group__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-group__chevron {
    flex: none;
    transition: transform .15s ease;
    opacity: .8;
}

.sb-group.is-open .sb-group__chevron {
    transform: rotate(90deg);
}

.sb-group__body {
    display: none;
}

.sb-group.is-open .sb-group__body {
    display: block;
}

.sb-subgroup__title {
    padding: 10px 16px 2px;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.28);
    font-weight: 600;
}

/* Links */
.sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .86rem;
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}

.sb-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.sb-link:focus-visible {
    outline: 2px solid rgba(255,255,255,.55);
    outline-offset: -2px;
}

.sb-link--active {
    background: var(--brand-primary);
    border-left-color: transparent;
    color: #fff;
    font-weight: 600;
    border-radius: 0 14px 14px 0;
}

.sb-link--active:hover {
    background: var(--brand-primary);
    color: #fff;
}

.sb-link svg {
    flex-shrink: 0;
    opacity: .75;
}

.sb-link--active svg {
    opacity: 1;
}

.sb-link--disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Badge de conteo en el menú (paso 9 P7): Cuentas por pagar / Solicitudes de factura */
.sb-link-badge {
    margin-left: auto;
    flex: none;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
    padding: .2em .55em;
    border-radius: 999px;
    background: var(--sev-danger);
    color: #fff;
}

/* Main content area */
.sb-main {
    margin-top: 52px;
    margin-left: 240px;
    padding: 20px;
    min-height: calc(100vh - 52px);
    transition: margin-left .2s ease;
}

/* Selector superior segmentado (tablist) — patrón aprobado UI/UX.
   Reutilizable: basta usar class="seg-tabs" con botones class="seg-tab". */
.seg-tabs {
    display: inline-flex;
    border: 1px solid color-mix(in srgb, var(--text-muted) 45%, var(--border-color));
    border-radius: 999px;
    overflow: hidden;
    padding: 4px;
    gap: 4px;
    background: var(--card-bg);
}
.seg-tabs .seg-tab {
    border: 0;
    background: transparent;
    color: var(--text-muted-contrast);
    font-weight: 700;
    font-size: .95rem;
    padding: 10px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}
.seg-tabs .seg-tab:hover {
    background: color-mix(in srgb, var(--brand-primary) 9%, var(--card-bg));
    color: var(--text-primary);
}
.seg-tabs .seg-tab.active {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-primary) 32%, transparent);
}

/* Mobile */
@media (max-width: 767.98px) {
    .sb-hamburger {
        display: block;
    }

    .sb-sidebar {
        transform: translateX(-100%);
    }

    .sb-sidebar.is-open {
        transform: translateX(0);
    }

    .sb-main {
        margin-left: 0;
        padding: 16px 12px;
    }

    .sb-topbar__user {
        display: none;
    }

    /* Barra superior segmentada: en pantallas angostas se desliza en vez de desbordar */
    .seg-tabs {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Colapso desktop (Hito A del #4): el estado sb-collapsed en body oculta la
   barra lateral y expande el contenido; solo aplica en viewports >= 768px
   (el offcanvas móvil sigue mandando por su media query). */
@media (min-width: 768px) {
    body.sb-collapsed .sb-sidebar {
        transform: translateX(-100%);
    }

    body.sb-collapsed .sb-main {
        margin-left: 0;
    }
}

/* ============================================================================
   HITO B (Deudas Técnicas #4) — Familia central de chips sobre branding.
   Regla acordada: las variantes se construyen SOLO con variables de branding
   (--brand-*, --color-*, --text-*, --border-color, --card-bg) mediante
   color-mix; NUNCA hex fijos en vistas. Los tonos que falten se agregan al
   catálogo de Branding (migración 072: pink/teal/purple). El color de un
   animal (cat_colors, hex_code del negocio) se inyecta en línea con
   --chip-color y la variante --chip--data lo consume.
   Las clases antiguas por vista quedan como alias de la familia (solo CSS;
   no se tocó HTML/JS ni la separación de páginas del Hito 8).
   ========================================================================== */

/* --- Bases de la familia (se comparten por todas las variantes) --- */
.erp-chip--toggle,
.st-chip,
.rc-chip,
.vs-badge,
.st-badge,
.pp-tab-badge,
.pp-badge,
.pp-chip,
.vac-chip,
.par-chip,
.up-chip,
.sel-chip,
.sel-stock,
.sel-badge,
.st-range-chip,
.st-donut-chip,
.st-chip,
.sev-chip,
.chip-cash,
.co-ichip,
.rc-ichip,
.st-ichip,
.rc-alert__badge,
.lab-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.3;
}

/* Colores por defecto (sin semántica) cuando la clase no define un tono */
.erp-chip--toggle,
.st-chip,
.rc-chip,
.vs-badge,
.st-badge,
.pp-chip,
.vac-chip,
.par-chip,
.up-chip,
.sel-chip,
.sel-stock,
.sel-badge,
.chip-cash,
.sev-chip,
.st-range-chip,
.st-donut-chip {
    font-size: .78rem;
    padding: 4px 11px;
    border: 1px solid transparent;
}

/* --- Dot (punto indicador) --- */
.vs-badge__dot,
.rc-chip__dot,
.st-chip .d,
.st-badge .d,
.pp-badge .d,
.pp-tab-badge .d {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
}

/* --- Variantes tonales (construidas sobre las variables de branding) ---
   Patrón: fondo = color 12-14% sobre card-bg, borde = color 34-36% sobre
   border-color, texto = color 58-75% oscurecido. Nunca hex fijos. */

/* Semántica de estado (éxito / alerta / peligro / info) */
.rc-chip--ok,
.vs-badge--up_to_date,
.st-badge--active,
.st-badge--ok,
.pp-badge--active,
.pp-chip--gift,
.sel-stock--ok {
    background: color-mix(in srgb, var(--color-success) 13%, var(--card-bg));
    color: color-mix(in srgb, var(--color-success) 62%, #000);
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--border-color));
}
.st-chip.completed,
.st-chip.cancelled,
.st-badge--done,
.st-badge--muted {
    background: color-mix(in srgb, var(--text-muted) 10%, var(--card-bg));
    color: var(--text-muted-contrast, var(--text-muted));
    border-color: color-mix(in srgb, var(--text-muted) 26%, var(--border-color));
}
.rc-chip--warn,
.st-chip--warn,
.vs-badge--due_soon,
.st-badge--warn,
.pp-chip--fixed,
.sel-stock--warn {
    background: color-mix(in srgb, var(--color-warning) 14%, var(--card-bg));
    color: color-mix(in srgb, var(--color-warning) 62%, #000);
    border-color: color-mix(in srgb, var(--color-warning) 36%, var(--border-color));
}
.rc-chip--todo,
.vs-badge--pending,
.vs-badge--unknown,
.par-chip--empty,
.vac-chip--empty,
.pp-chip--neutral,
.sel-chip--neutral,
.st-chip--neutral {
    background: color-mix(in srgb, var(--text-muted) 9%, var(--card-bg));
    color: var(--text-muted-contrast, var(--text-muted));
    border-color: color-mix(in srgb, var(--text-muted) 24%, var(--border-color));
}
.par-chip,
.vac-chip {
    animation: parChipIn .3s ease both;
}
.rc-chip--danger,
.sel-badge--safe {
    background: var(--color-danger);
    color: #fff;
    border-color: transparent;
}
.pp-chip--info,
.st-chip--info,
.erp-chip--lot,
.par-chip {
    background: color-mix(in srgb, var(--color-info) 13%, var(--card-bg));
    color: color-mix(in srgb, var(--color-info) 70%, #000);
    border-color: color-mix(in srgb, var(--color-info) 34%, var(--border-color));
}
.sel-chip--svc,
.up-chip--vac,
.pp-chip--pct,
.sel-badge--prepay,
.vac-chip {
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--card-bg));
    color: color-mix(in srgb, var(--brand-primary) 76%, #000);
    border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-color));
}
.sel-chip,
.up-chip {
    background: color-mix(in srgb, var(--brand-secondary) 10%, var(--card-bg));
    color: color-mix(in srgb, var(--brand-secondary) 78%, #000);
    border-color: color-mix(in srgb, var(--brand-secondary) 32%, var(--border-color));
}
.up-chip--lot {
    background: color-mix(in srgb, var(--text-primary) 6%, var(--card-bg));
    color: color-mix(in srgb, var(--text-primary) 68%, var(--card-bg));
    border-color: color-mix(in srgb, var(--text-primary) 18%, var(--border-color));
}
/* Sexo: chips sólidos (azul/pink con texto blanco) para distinguirse del
   fondo morado del dossier; especificidad doble para vencer a la regla
   genérica translúcida de .rc-ichip/.st-ichip/.co-ichip. */
.st-ichip.st-ichip--sex-m,
.rc-ichip.rc-ichip--sex-m,
.sel-chip.sel-chip--sex-m,
.co-ichip.co-ichip--sex-m {
    background: var(--color-info);
    color: #fff;
    border-color: color-mix(in srgb, var(--color-info) 45%, #000);
}
.st-ichip.st-ichip--sex-f,
.rc-ichip.rc-ichip--sex-f,
.sel-chip.sel-chip--sex-f,
.co-ichip.co-ichip--sex-f {
    background: var(--color-pink);
    color: #fff;
    border-color: color-mix(in srgb, var(--color-pink) 45%, #000);
}
/* --- Chips conmutables clínicos y de sexo (base centralizada, antes local en
   patients/index.php; tokenizada con la misma estructura que erp-chip--toggle) --- */
.clin-chip,
.sex-chip {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: inline-block;
}
.clin-chip input,
.sex-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.clin-chip__face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px dashed color-mix(in srgb, var(--text-muted) 32%, var(--border-color));
    background: var(--card-bg);
    color: var(--text-muted);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sex-chip__face {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    white-space: nowrap;
    border: 1px dashed color-mix(in srgb, var(--text-muted) 32%, var(--border-color));
    background: var(--card-bg);
    color: var(--text-muted);
    transition: all .15s ease;
}
.clin-chip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: inline-block;
    box-sizing: border-box;
    transition: background .15s ease;
}
.clin-chip.is-on .clin-chip__dot { background: currentColor; }
.sex-chip input:checked + .sex-chip__face { border-style: solid; }
.sex-chip--m input:checked + .sex-chip__face {
    background: color-mix(in srgb, var(--color-info) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--color-info) 55%, var(--border-color));
    color: color-mix(in srgb, var(--color-info) 78%, #000);
}
.sex-chip--f input:checked + .sex-chip__face {
    background: color-mix(in srgb, var(--color-pink) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--color-pink) 55%, var(--border-color));
    color: color-mix(in srgb, var(--color-pink) 78%, #000);
}
.clin-chip input:focus-visible + .clin-chip__face,
.sex-chip input:focus-visible + .sex-chip__face {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.clin-chip--teal.is-on .clin-chip__face {
    background: color-mix(in srgb, var(--color-teal) 22%, var(--card-bg));
    border-color: color-mix(in srgb, var(--color-teal) 40%, var(--border-color));
    border-style: solid;
    color: color-mix(in srgb, var(--color-teal) 78%, #000);
}
.clin-chip--red.is-on .clin-chip__face {
    background: color-mix(in srgb, var(--color-danger) 13%, var(--card-bg));
    border-color: color-mix(in srgb, var(--color-danger) 36%, var(--border-color));
    border-style: solid;
    color: color-mix(in srgb, var(--color-danger) 70%, #000);
}
.clin-chip--slate.is-on .clin-chip__face {
    background: color-mix(in srgb, var(--text-muted) 10%, var(--card-bg));
    border-color: color-mix(in srgb, var(--text-muted) 24%, var(--border-color));
    border-style: solid;
    color: var(--text-primary);
}
.sel-badge--prepay {
    border-color: color-mix(in srgb, var(--brand-secondary) 34%, var(--border-color));
}
.sel-badge--safe,
.sel-badge--prepay,
.pp-badge--active,
.pp-badge--paused,
.chip-cash--open,
.chip-cash--turn {
    color: #fff;
    border: 0;
}
.chip-cash--open {
    background: var(--sev-ok, var(--color-success));
}
.chip-cash--turn {
    background: color-mix(in srgb, var(--color-warning) 82%, #000);
}
.pp-badge--paused {
    background: color-mix(in srgb, var(--text-muted) 55%, #000);
}
.pp-badge--active {
    background: var(--sev-ok, var(--color-success));
}

/* --- Variante de dato vivo (cat_colors → --chip-color) --- */
.sel-chip[style*="--chip-color"],
.st-ichip[style*="--chip-color"],
.co-ichip[style*="--chip-color"],
.rc-ichip[style*="--chip-color"],
.vac-chip[style*="--chip-color"] {
    background: color-mix(in srgb, var(--chip-color) 14%, var(--card-bg)) !important;
    border-color: color-mix(in srgb, var(--chip-color) 40%, var(--border-color)) !important;
    color: color-mix(in srgb, var(--chip-color) 72%, #000) !important;
}

/* --- Punto vivo (color de animal) --- */
.st-ichip[style*="--chip-color"] .st-ichip__dot,
.co-ichip[style*="--chip-color"] .co-ichip__dot,
.rc-ichip[style*="--chip-color"] .dot {
    background: var(--chip-color);
}

/* --- Animaciones compartidas --- */
@keyframes erpChipIn {
    from { opacity: 0; transform: translateY(4px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes parChipIn {
    from { opacity: 0; transform: translateY(4px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes vacChipIn {
    from { opacity: 0; transform: translateY(4px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes rcPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .4); }
    50%     { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}
@keyframes rcAlert {
    0%,100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%     { box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
}

/* --- Chips informativos (catálogo de productos) --- */
.erp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    animation: erpChipIn .22s ease both;
}
.erp-chip__ico { font-size: .9rem; line-height: 1; }
.erp-chip--stock {
    background: color-mix(in srgb, var(--text-muted) 12%, var(--card-bg));
    color: var(--text-primary);
    border-color: var(--border-color);
}
.erp-chip--rx {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--card-bg));
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 35%, var(--border-color));
}

/* --- Dot centrado (código existente .dot en dossier de st/record) --- */
.rc-ichip .dot,
.st-ichip .dot,
.co-ichip .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.5);
    box-sizing: border-box;
    display: inline-block;
}

/* --- Toggle (solo CSS; la estructura HTML no cambia) --- */
.erp-chip--toggle {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: inline-block;
    border: 0;
    background: transparent;
    padding: 0;
}
.erp-chip--toggle .erp-chip__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.erp-chip--toggle .erp-chip__face {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px dashed color-mix(in srgb, var(--color-danger) 45%, var(--border-color));
    background: var(--card-bg);
    color: var(--color-danger);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.erp-chip--toggle.is-on .erp-chip__face {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--border-color));
    color: var(--color-danger);
}
.erp-chip--toggle .erp-chip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: inline-block;
    box-sizing: border-box;
    transition: background .15s ease;
}
.erp-chip--toggle.is-on .erp-chip__dot { background: currentColor; }
.erp-chip--toggle .erp-chip__input:focus-visible + .erp-chip__face {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}
/* Variante azul (cita/agenda; servicios.php usa el ID existente del label) */
#sv-appointment-label .erp-chip__face,
#sv-appointment-label.is-on .erp-chip__face {
    border-color: color-mix(in srgb, var(--color-info) 35%, var(--border-color));
    color: color-mix(in srgb, var(--color-info) 72%, #000);
    background: color-mix(in srgb, var(--color-info) 14%, var(--card-bg));
}
#sv-appointment-label.is-on .erp-chip__face {
    background: color-mix(in srgb, var(--color-info) 20%, var(--card-bg));
    border-style: solid;
}

/* --- Chip compacto del dossier (fondo translúcido sobre brand) --- */
.rc-ichip,
.st-ichip,
.co-ichip {
    padding: 4px 11px;
    font-size: .76rem;
    font-weight: 600;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
}
.rc-ichip--sum,
.st-ichip--sum,
.co-ichip--sum {
    background: #000;
    border-color: rgba(255,255,255,.42);
    font-weight: 700;
    letter-spacing: .01em;
}
.rc-ichip--sum b,
.st-ichip--sum b,
.co-ichip--sum b {
    font-weight: 900;
}

/* --- Chips de estado del esquema (vacunación) --- */
.vs-badge {
    font-size: .7rem;
    padding: 4px 11px;
    border: 1px solid transparent;
}
.vs-badge--overdue,
.st-badge--danger,
.st-chip--danger {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--card-bg));
    color: color-mix(in srgb, var(--color-danger) 70%, #000);
    border-color: color-mix(in srgb, var(--color-danger) 36%, var(--border-color));
}
.vs-badge--overdue .vs-badge__dot {
    background: var(--color-danger);
    animation: rcPulse 1.4s infinite;
}
.vs-badge--due_soon .vs-badge__dot {
    animation: rcPulse 1.8s infinite;
}

/* --- Chips de confirmación (citas) --- */
.st-chip {
    display: inline-flex;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}
.st-chip .d {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.st-chip--waiting,
.st-chip--called {
    background: color-mix(in srgb, var(--color-warning) 16%, var(--card-bg));
    color: color-mix(in srgb, var(--color-warning) 62%, #000);
    border-color: color-mix(in srgb, var(--color-warning) 36%, var(--border-color));
}
.st-chip--waiting .d,
.st-chip--called .d {
    background: var(--color-warning);
}
.st-chip.in_progress {
    background: color-mix(in srgb, var(--color-success) 14%, var(--card-bg));
    color: color-mix(in srgb, var(--color-success) 62%, #000);
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--border-color));
}
.st-chip.in_progress .d {
    background: var(--color-success);
}
.st-chip.confirmed {
    background: color-mix(in srgb, var(--color-info) 12%, var(--card-bg));
    color: color-mix(in srgb, var(--color-info) 75%, #000);
    border-color: color-mix(in srgb, var(--color-info) 34%, var(--border-color));
}
.st-chip.confirmed .d {
    background: var(--color-info);
}
.st-chip.en_sala {
    background: color-mix(in srgb, var(--color-success) 12%, var(--card-bg));
    color: color-mix(in srgb, var(--color-success) 62%, #000);
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--border-color));
}
.st-chip.en_sala .d {
    background: var(--color-success);
}
.st-chip.llamado {
    background: color-mix(in srgb, var(--color-warning) 18%, var(--card-bg));
    color: color-mix(in srgb, var(--color-warning) 62%, #000);
    border-color: color-mix(in srgb, var(--color-warning) 36%, var(--border-color));
}
.st-chip.llamado .d {
    background: var(--color-warning);
}
.st-chip.no_show {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--card-bg));
    color: color-mix(in srgb, var(--color-danger) 72%, #000);
    border-color: color-mix(in srgb, var(--color-danger) 36%, var(--border-color));
}
.st-chip.no_show .d {
    background: var(--color-danger);
}
.st-chip.scheduled {
    background: color-mix(in srgb, var(--color-warning) 14%, var(--card-bg));
    color: color-mix(in srgb, var(--color-warning) 62%, #000);
    border-color: color-mix(in srgb, var(--color-warning) 36%, var(--border-color));
}
.st-chip.scheduled .d {
    background: var(--color-warning);
}
.st-chip.st-lg {
    padding: 7px 18px;
    font-size: 1.05rem;
}
.st-chip.st-lg .d {
    width: 13px;
    height: 13px;
}
/* Variante media (stats): conserva la tipografía refinada que la vista definía
   localmente (mayúsculas + peso 800), sin afectar a la agenda. */
.st-chip--md {
    font-size: .8rem;
    padding: 4px 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* --- Chips del selector de folio (consulta) --- */
.sel-chip {
    font-size: .84rem;
    padding: 3px 10px;
    border: 1px solid transparent;
}
.sel-chip--svc {
    border-style: solid;
}
.sel-stock {
    font-size: .82rem;
    padding: 3px 10px;
    border: 1px solid transparent;
}
.sel-stock--ok,
.sel-stock--warn {
    border-style: solid;
}
.sel-badge {
    font-size: .8rem;
    padding: 3px 10px;
    border: 0;
}

/* --- Chips de promociones --- */
.pp-chip,
.pp-badge {
    font-size: .8rem;
    font-weight: 800;
    border: 1px solid transparent;
}
.pp-chip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 31px;
}
.pp-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
}

/* --- Chips de estancias --- */
.st-badge {
    font-size: .8rem;
    padding: 4px 13px;
    border: 1px solid transparent;
}
.st-badge--hosp {
    background: color-mix(in srgb, var(--color-info) 22%, var(--card-bg));
    color: color-mix(in srgb, var(--color-info) 75%, #000);
    border-color: color-mix(in srgb, var(--color-info) 40%, var(--border-color));
}
.st-badge--board {
    background: color-mix(in srgb, var(--color-purple) 22%, var(--card-bg));
    color: color-mix(in srgb, var(--color-purple) 75%, #000);
    border-color: color-mix(in srgb, var(--color-purple) 40%, var(--border-color));
}

/* --- Chips de estado de caja (POS) --- */
.chip-cash {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .3em .8em;
    text-transform: uppercase;
    color: #fff;
}
.chip-cash--open,
.chip-cash--turn,
.chip-cash--idle {
    color: #fff;
    border: 0;
}
.chip-cash--idle {
    background: color-mix(in srgb, var(--color-info) 78%, #000);
}

/* --- Chip de severidad (dashboard) --- */
.sev-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}
.sev-chip--danger { background: var(--sev-danger); }
.sev-chip--warning { background: var(--sev-warning); }
.sev-chip--ok { background: var(--sev-ok); }
.sev-chip--danger,
.sev-chip--warning,
.sev-chip--ok {
    color: #fff;
    border: 0;
}

/* --- Badge de riesgo (parcial _risk-alerts) --- */
.rc-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    background: color-mix(in srgb, var(--color-danger) 10%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--border-color));
    border-left: 5px solid var(--color-danger);
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: .85rem;
    color: color-mix(in srgb, var(--color-danger) 75%, #000);
    animation: rcAlert 2.4s ease-in-out infinite;
}
.rc-alert__ico {
    font-size: 1.05rem;
    flex: 0 0 auto;
}
.rc-alert__label {
    white-space: nowrap;
    flex: 0 0 auto;
}
.rc-alert__badge {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    background: var(--color-danger);
    justify-content: center;
}

/* --- Badge de etiqueta de inventario --- */
.lab-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    background: var(--brand-primary);
    color: #fff;
}

/* --- Chip del rango de fechas (stats) --- */
.st-range-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    font-size: .86rem;
    font-weight: 700;
}

/* ============================================================================
   MODALES (patrón dossier aprobado): header degradado + cuerpo por secciones.
   Uso: añadir la clase `pm-modal` al .modal-content y estructurar con
   .pm-head / .pm-body / .pm-sec. Mantiene identidad visual con el dossier.
   ============================================================================ */
.pm-modal.modal-content { border: 0; border-radius: 18px; overflow: hidden; }
.pm-modal .modal-footer { border-top: 1px solid var(--border-color); padding: 12px 22px; }

.pm-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; color: #fff; position: relative;
    background: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 78%, var(--brand-secondary, #000))); }
.pm-head::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none; }
.pm-head__ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.pm-head__txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pm-head__title { margin: 0; font-family: var(--font-table, 'Roboto Condensed', sans-serif); font-weight: 700; font-size: 1.18rem; line-height: 1.1; color: #fff; }
.pm-head__sub { font-size: .78rem; opacity: .85; display: block; margin-top: 2px; }
.pm-head__close { filter: invert(1) brightness(2); }

.pm-body { padding: 18px 22px; background: color-mix(in srgb, var(--text-muted) 7%, var(--card-bg)); }
.pm-body > .row { --bs-gutter-y: 0; margin-top: 0; }
.pm-body > .row + .row { margin-top: 18px; }
.pm-sec { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.pm-sec + .pm-sec { margin-top: 18px; }
.pm-sec__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding-bottom: 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent); }
.pm-sec__ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1rem;
    background: color-mix(in srgb, var(--brand-primary) 15%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--brand-primary) 32%, var(--border-color)); }
.pm-sec__head b { font-family: var(--font-table, 'Roboto Condensed', sans-serif); font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-primary); display: block; line-height: 1.2; }
.pm-sec__head small { font-size: .74rem; color: var(--text-muted-contrast); display: block; margin-top: 2px; }

/* Sección en línea: cabecera a la izquierda + contenido a la derecha (una sola fila) */
.pm-sec--inline { display: flex; gap: 22px; align-items: flex-start; }
.pm-sec--inline .pm-sec__head { flex: 0 0 240px; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pm-sec--inline > .row, .pm-sec--inline > .d-flex { flex: 1; min-width: 0; }
@media (max-width: 991.98px) { .pm-sec--inline { flex-direction: column; gap: 14px; }
    .pm-sec--inline .pm-sec__head { flex: none; width: 100%; border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent); padding-bottom: 11px; } }

@media (max-width: 576px) { .pm-body { padding: 14px 16px; } .pm-head { padding: 13px 16px; } .pm-sec { padding: 13px 14px; } }