/*
 * AURA — capa de interfaz 2026 (se carga la ultima)
 *
 * Unifica tipografia, tarjetas, filtros, tablas y cifras en todas las pantallas del panel.
 * Newsreader (serif de contraste moderado, legible en grande) solo en titulos de pagina;
 * Instrument Sans para todo lo que se lee y se toca. Las cifras siempre tabulares.
 */

:root {
    --font-display: "Newsreader", "Georgia", "Times New Roman", serif;
    --font-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

    --ui-bg: #fff9f4;
    --ui-surface: #ffffff;
    --ui-surface-2: #fbf4ee;
    --ui-line: #eadbd0;
    --ui-line-strong: #d9c3b4;
    --ui-ink: #3f2b23;
    --ui-muted: #77584a;
    --ui-accent: #96593f;
    --ui-accent-hover: #7f4831;
    --ui-accent-ink: #ffffff;
    --ui-accent-wash: #f6e6dc;
    --ui-gold: #c7a35a;
    --ui-focus: rgba(150, 89, 63, 0.45);

    --ui-radius-lg: 1rem;
    --ui-radius: 0.7rem;
    --ui-radius-sm: 0.5rem;
    --ui-shadow: 0 1px 2px rgba(63, 43, 35, 0.06);

    --bs-body-font-family: var(--font-ui);
    --bs-primary: var(--ui-accent);
    --bs-primary-rgb: 150, 89, 63;
}

html[data-app="auth"][data-theme="dark"] {
    --ui-bg: #211812;
    --ui-surface: #2c211b;
    --ui-surface-2: #33271f;
    --ui-line: #46352b;
    --ui-line-strong: #5a453a;
    --ui-ink: #f4e8dd;
    --ui-muted: #cdb6a5;
    --ui-accent: #e0a98c;
    --ui-accent-hover: #ecbca2;
    --ui-accent-ink: #2a1a12;
    --ui-accent-wash: #3d2c23;
    --ui-gold: #e3c27a;
    --ui-focus: rgba(224, 169, 140, 0.5);
    --ui-shadow: none;
}

/* ---------- Tipografia ---------- */
body {
    font-family: var(--font-ui);
    font-size: 0.975rem;
    line-height: 1.5;
}

h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ui-ink);
}

h1, .h1,
.page-title,
.worker-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-feature-settings: "lnum" 1, "kern" 1;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.08;
    color: var(--ui-ink);
}

.page-title {
    font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem);
}

.page-subtitle {
    margin: 0.35rem 0 0;
    max-width: 62ch;
    color: var(--ui-muted);
    font-size: 0.98rem;
}

.btn,
.badge,
.form-control,
.form-select,
.table,
.dropdown-menu {
    font-family: var(--font-ui);
}

/* ---------- Cabecera de pagina ---------- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--ui-line);
}

/* ---------- Tarjetas ---------- */
.card,
.app-card {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

/* El filete dorado superior de cada tarjeta era decoracion repetida: se reserva al logotipo */
.card::before {
    content: none;
}

.app-card .card-header {
    padding: 1rem 1.25rem;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-line);
}

.app-card .card-header h2,
.app-card .card-header .h5,
.app-card .card-header h3 {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.app-card .card-header small {
    color: var(--ui-muted);
    font-size: 0.85rem;
}

.card-footer {
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ui-line);
}

/* ---------- Cifras del panel (KPI) ---------- */
.dashboard-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    box-shadow: none;
}

.dashboard-card .card-body {
    padding: 1rem 1.15rem;
}

.dashboard-card .text-muted,
.dashboard-card p.text-muted {
    margin-bottom: 0.3rem !important;
    color: var(--ui-muted) !important;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-card .display-6 {
    font-family: var(--font-ui);
    font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.85rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ui-ink);
}

.dashboard-card small,
.dashboard-card .small {
    color: var(--ui-muted);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-card.is-attention {
    border-color: #e0a04a;
    background: #fff6e8;
}

html[data-app="auth"][data-theme="dark"] .dashboard-card,
html[data-app="auth"][data-theme="dark"] .dashboard-card .display-6 {
    background: var(--ui-surface);
    color: var(--ui-ink);
}

/* ---------- Botones ---------- */
.btn {
    border-radius: var(--ui-radius);
    font-weight: 600;
    letter-spacing: 0;
}

.btn-primary,
.btn-primary:focus {
    background: var(--ui-accent);
    border: 1px solid var(--ui-accent);
    color: var(--ui-accent-ink);
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: var(--ui-accent-ink);
    box-shadow: none;
    transform: none;
}

html[data-app="auth"][data-theme="dark"] .btn-primary,
html[data-app="auth"][data-theme="dark"] .btn-primary:focus {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-accent-ink);
    box-shadow: none;
}

html[data-app="auth"][data-theme="dark"] .btn-primary:hover {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
}

.btn-soft {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-strong);
    color: var(--ui-ink);
    box-shadow: none;
}

.btn-soft:hover,
.btn-soft:focus-visible {
    background: var(--ui-surface-2);
    border-color: var(--ui-accent);
    color: var(--ui-ink);
}

:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* ---------- Formularios ---------- */
.form-control,
.form-select {
    min-height: 2.6rem;
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-line-strong);
    background-color: var(--ui-surface);
    color: var(--ui-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ui-accent);
    box-shadow: none;
}

.form-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ui-ink);
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Barra de filtros ---------- */
/* Rejilla fluida: cada campo con su etiqueta encima; los botones al final de la misma fila si caben */
.filter-bar {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0;
}

.filter-bar > * {
    flex: 1 1 9rem;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* El buscador necesita mas aire que un desplegable */
.filter-bar > :has(> input[name="q"]) {
    flex: 2.5 1 12rem;
}

.filter-bar > :has(> input[type="date"]) {
    flex: 0 1 9.5rem;
}

.filter-bar > :has(> .form-check) {
    flex: 0 0 auto;
    align-self: center;
    padding-top: 1.4rem;
}

.filter-bar .filter-label,
.filter-bar .form-label {
    display: block;
    margin: 0 0 0.3rem;
    color: var(--ui-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.filter-bar .form-control,
.filter-bar .form-select {
    width: 100%;
}

.filter-bar .filter-actions,
.filter-bar > .col-auto:last-child,
.filter-bar > .col-12:last-child:has(.btn) {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-bar .filter-actions .btn,
.filter-bar > .col-auto:last-child .btn {
    min-height: 2.6rem;
    padding: 0.45rem 1rem !important;
}

@media (max-width: 575.98px) {
    .filter-bar > * {
        flex-basis: 100%;
    }

    .filter-bar > :has(> input[type="date"]) {
        flex: 1 1 calc(50% - 0.375rem);
    }

    .filter-bar .filter-actions,
    .filter-bar > .col-auto:last-child {
        flex-basis: 100%;
    }

    .filter-bar .filter-actions .btn {
        flex: 1 1 auto;
    }
}

/* Con muchos campos, los botones bajan a su propia fila y Exportar se separa de Filtrar */
.filter-bar:has(> :nth-child(5)) > .filter-actions {
    flex-basis: 100%;
}

.filter-bar .filter-actions > a[href*="export"] {
    margin-left: auto;
}

/* Etiquetas de filtros aplicados */
.cita-filter-chip {
    background: var(--ui-accent-wash);
    border-color: transparent;
    color: var(--ui-ink);
}

/* ---------- Tablas ---------- */
.table {
    --bs-table-hover-bg: var(--ui-surface-2);
    font-size: 0.93rem;
    font-variant-numeric: tabular-nums;
}

.table thead th,
html[data-app="auth"][data-theme="dark"] .table thead th {
    padding: 0.7rem 0.85rem;
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid var(--ui-line-strong);
    white-space: nowrap;
    vertical-align: bottom;
}

.table > :not(caption) > * > * {
    padding: 0.7rem 0.85rem;
    border-bottom-color: var(--ui-line);
}

.table tfoot td,
.table tfoot th,
html[data-app="auth"][data-theme="dark"] .table tfoot td {
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ui-line-strong);
    font-weight: 600;
    color: var(--ui-ink);
}

/* Las tarjetas que contienen una tabla la enmarcan sin hueco ni doble borde */
.app-card > .table-responsive:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.app-card > .table-responsive:last-child,
.app-card > .table-responsive + .list-pagination,
.app-card > .list-pagination:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Desplazamiento horizontal visible cuando la tabla no cabe (en vez de cortarse) */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-line-strong) transparent;
}

/* Filas separadoras por dia (agenda de citas) */
.cita-day-row td,
html[data-app="auth"][data-theme="dark"] .cita-day-row td {
    padding: 0.55rem 0.85rem !important;
    background: var(--ui-bg) !important;
    color: var(--ui-ink) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--ui-line-strong) !important;
}

/* Enlaces dentro de tablas: color de marca sin subrayado permanente */
.table td > a:not(.btn):not(.dropdown-item) {
    color: var(--ui-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--ui-line-strong);
    text-underline-offset: 0.2em;
}

.table td > a:not(.btn):not(.dropdown-item):hover {
    color: var(--ui-accent);
    text-decoration-color: currentColor;
}

/* ---------- Paginacion y pie de listado ---------- */
.list-pagination,
html[data-app="auth"][data-theme="dark"] .list-pagination {
    padding: 0.75rem 1rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ui-line);
}

.list-pagination-summary,
html[data-app="auth"][data-theme="dark"] .list-pagination-summary {
    color: var(--ui-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ---------- Estados ---------- */
.badge {
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 999px;
}

.status-trigger.badge {
    font-size: 0.8rem;
    padding: 0.38rem 0.7rem;
}

/* Agenda de citas: hora con su fin, categoria bajo el servicio, estado y accion rapida en una linea */
.cita-table .cita-cell-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cita-time-end {
    color: var(--ui-muted);
    font-size: 0.86em;
}

.cita-service-category {
    display: block;
    color: var(--ui-muted);
    font-size: 0.8rem;
}

.cita-table .cita-cell-status {
    min-width: 0;
    white-space: nowrap;
}

.cita-table .cita-cell-status form {
    display: inline-block;
    margin: 0 0 0 0.35rem !important;
}

/* ---------- Cobrar como un profesional (Pagos) ---------- */
.cobro-staff-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    margin: 0;
    padding: 0 1.25rem;
    list-style: none;
    column-gap: 2rem;
}

.cobro-staff-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--ui-line);
}

.cobro-staff-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---------- Avisos ---------- */
.alert {
    border-radius: var(--ui-radius);
}

/* ---------- Pie del panel ---------- */
.app-site-footer {
    color: var(--ui-muted);
    font-size: 0.85rem;
}

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

/* =====================================================================
 * Formulario de nueva cita: pasos a la izquierda, resumen fijo a la derecha
 * ===================================================================== */
.cita-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: 1.25rem;
    align-items: start;
}

.cita-form-steps {
    display: grid;
    gap: 1rem;
}

.cita-step .card-body {
    padding: 1.25rem 1.35rem 1.35rem;
}

.cita-step-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.cita-step-num {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ui-accent-wash);
    color: var(--ui-accent);
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cita-step-help {
    margin: -0.5rem 0 1rem;
    color: var(--ui-muted);
    font-size: 0.9rem;
}

/* Linea repetible (servicio o producto): campos + boton de quitar alineado abajo */
.cita-line {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.cita-line-type {
    flex: 0 0 11rem;
}

.cita-line-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cita-line-qty {
    flex: 0 0 6.5rem;
}

.cita-line .form-label {
    margin-bottom: 0.3rem;
    color: var(--ui-muted);
    font-size: 0.82rem;
}

/* Las etiquetas solo hacen falta en la primera linea */
#quickServiceRows > .quick-service-row + .quick-service-row .form-label,
#quickProductRows > .quick-product-row + .quick-product-row .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.cita-line-remove {
    flex: 0 0 auto;
    width: 2.6rem;
    min-height: 2.6rem;
    padding: 0 !important;
    color: var(--ui-muted);
}

.cita-line-remove:hover {
    color: #a03b32;
    border-color: #d9a39a;
}

.cita-line-remove:disabled {
    opacity: 0.35;
}

.cita-add-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.75rem;
    min-height: 2.6rem;
    border: 1px dashed var(--ui-line-strong);
    background: transparent;
    color: var(--ui-accent);
    font-weight: 600;
}

.cita-add-line:hover:not(:disabled) {
    border-style: solid;
    border-color: var(--ui-accent);
    background: var(--ui-accent-wash);
    color: var(--ui-accent);
}

.cita-add-line:disabled {
    opacity: 0.5;
}

/* Opciones del paso 4 separadas por filetes, no por cajas */
.cita-option + .cita-option {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ui-line);
}

.cita-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}

.cita-option-head h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
}

.cita-option-head p {
    margin: 0.1rem 0 0;
    color: var(--ui-muted);
    font-size: 0.86rem;
}

/* Mensajes de ayuda del cliente y de solapes: discretos mientras son neutros */
.cita-form-layout .quick-client-status,
.cita-form-layout .quick-overlap-status {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: var(--ui-radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
}

.cita-form-layout .quick-client-status.status-neutral,
.cita-form-layout .quick-overlap-status.status-neutral {
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--ui-muted);
}

.cita-form-layout .quick-client-suggestions:not(:empty) {
    margin-top: 0.6rem;
}

/* ---------- Resumen ---------- */
.cita-summary {
    position: sticky;
    top: 5.5rem;
}

.cita-summary-title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.cita-summary-list {
    margin: 0 0 1rem;
}

.cita-summary-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--ui-line);
}

.cita-summary-list dt {
    color: var(--ui-muted);
    font-weight: 500;
}

.cita-summary-list dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cita-summary-total {
    border-bottom: 0 !important;
    padding-top: 0.7rem !important;
}

.cita-summary-total dt {
    color: var(--ui-ink) !important;
    font-weight: 600 !important;
}

.cita-summary-total dd {
    font-size: 1.45rem;
    letter-spacing: -0.02em;
}

.cita-summary-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 1199.98px) {
    .cita-form-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* En pantallas estrechas el resumen queda pegado abajo, siempre a mano */
    .cita-summary {
        position: sticky;
        top: auto;
        bottom: 0;
        z-index: 20;
    }

    .cita-summary .card {
        box-shadow: 0 -0.5rem 1.5rem rgba(63, 43, 35, 0.12);
    }

    .cita-summary .card-body {
        padding: 0.9rem 1rem;
    }

    .cita-summary-title,
    .cita-summary-list > div:not(.cita-summary-total):not(:first-child) {
        display: none;
    }

    .cita-summary-list {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 0.6rem;
    }

    .cita-summary-list > div {
        flex: 1 1 auto;
        padding: 0;
        border: 0;
    }

    .cita-summary-total {
        padding-top: 0 !important;
    }

    .cita-summary-total dd {
        font-size: 1.15rem;
    }

    .cita-summary-actions {
        grid-template-columns: 1fr auto;
        margin-top: 0.6rem;
    }

    .cita-summary-actions .btn-lg {
        min-height: 2.75rem;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .cita-line {
        flex-wrap: wrap;
    }

    .cita-line-type,
    .cita-line-main {
        flex: 1 1 100%;
    }

    .cita-line-qty {
        flex: 1 1 auto;
    }

    /* En movil cada linea muestra sus etiquetas: se apilan los campos */
    #quickServiceRows > .quick-service-row + .quick-service-row .form-label,
    #quickProductRows > .quick-product-row + .quick-product-row .form-label {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
    }

    #quickServiceRows > .quick-service-row + .quick-service-row,
    #quickProductRows > .quick-product-row + .quick-product-row {
        padding-top: 0.75rem;
        border-top: 1px solid var(--ui-line);
    }
}

/* =====================================================================
 * Agenda de citas (admin/citas/calendario)
 * Todo cuelga de .agenda para no tocar el calendario de trabajadoras.
 * ===================================================================== */
.agenda,
.lst,
.finder {
    --st-pendiente: #a5804f;
    --st-confirmada: #3f7f9d;
    --st-en-curso: #c98a17;
    --st-completada: #4f8a5b;
    --st-no-show: #8b7f78;
    --st-cancelada: #b4505a;
    --slot-h: 2.6rem;
    --head-h: 3.6rem;
    --hours-w: 4.25rem;
}

html[data-app="auth"][data-theme="dark"] .agenda,
html[data-app="auth"][data-theme="dark"] .lst,
html[data-app="auth"][data-theme="dark"] .finder {
    --st-pendiente: #d2ad7c;
    --st-confirmada: #79b6d3;
    --st-en-curso: #e5b350;
    --st-completada: #86c093;
    --st-no-show: #a99d96;
    --st-cancelada: #e08891;
}

.agenda-st-pendiente { --st: var(--st-pendiente); }
.agenda-st-confirmada { --st: var(--st-confirmada); }
.agenda-st-en-curso,
.agenda-st-reagendada { --st: var(--st-en-curso); }
.agenda-st-completada,
.agenda-st-cobrada { --st: var(--st-completada); }
.agenda-st-no-show { --st: var(--st-no-show); }
.agenda-st-cancelada { --st: var(--st-cancelada); }

.agenda-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------- Tablero ---------- */
.agenda-board {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
}

.agenda-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--ui-line);
}

.agenda-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.agenda-stepper {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--ui-line-strong);
    border-radius: 999px;
    background: var(--ui-surface);
    overflow: hidden;
}

.agenda-icon-btn,
.agenda-today-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    color: var(--ui-ink);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.agenda-icon-btn {
    width: 2.4rem;
}

.agenda-today-btn {
    padding: 0 0.9rem;
    border-inline: 1px solid var(--ui-line);
    font-size: 0.88rem;
    font-weight: 600;
}

.agenda-icon-btn:hover,
.agenda-today-btn:hover {
    background: var(--ui-accent-wash);
    color: var(--ui-ink);
}

.agenda-icon-btn:focus-visible,
.agenda-today-btn:focus-visible,
.agenda-views a:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: -2px;
}

.agenda-period {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ui-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-period span {
    color: var(--ui-muted);
    font-weight: 400;
}

.agenda-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.agenda-views {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: 999px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-line);
}

.agenda-views a {
    padding: 0.38rem 0.95rem;
    border-radius: 999px;
    color: var(--ui-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.agenda-views a:hover {
    color: var(--ui-ink);
}

.agenda-views a.is-active {
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: 0 1px 3px rgba(63, 43, 35, 0.14);
}

.agenda-field {
    position: relative;
    margin: 0;
}

.agenda-field > i {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    pointer-events: none;
    z-index: 1;
}

.agenda-field .form-control,
.agenda-field .form-select {
    min-height: 2.5rem;
    padding-left: 2.2rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.agenda-field .form-control {
    width: 10.5rem;
}

.agenda-field .form-select {
    width: 12.5rem;
}

.agenda-controls.is-auto .agenda-apply {
    display: none;
}

.agenda-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin: 0;
    padding: 0.55rem 1.1rem;
    list-style: none;
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font-size: 0.78rem;
}

.agenda-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.agenda-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--st, var(--ui-muted));
}

.agenda-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ui-muted);
}

.agenda-empty i {
    font-size: 1.6rem;
}

/* ---------- Tarjeta de cita (comun a las tres vistas) ---------- */
.agenda-event,
.agenda-chip,
.agenda-pill {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0.35rem 0.55rem;
    border: 0;
    border-left: 3px solid var(--st);
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--st) 13%, var(--ui-surface));
    color: var(--ui-ink);
    font-family: var(--font-ui);
    text-align: left;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.agenda-event:hover,
.agenda-chip:hover,
.agenda-pill:hover {
    background: color-mix(in srgb, var(--st) 22%, var(--ui-surface));
    box-shadow: 0 2px 8px rgba(63, 43, 35, 0.12);
}

.agenda-event:focus-visible,
.agenda-chip:focus-visible,
.agenda-pill:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 1px;
}

.agenda-event-time {
    color: color-mix(in srgb, var(--st) 55%, var(--ui-ink));
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.agenda-event-client {
    font-size: 0.85rem;
    font-weight: 600;
}

.agenda-event-service,
.agenda-event-staff {
    color: var(--ui-muted);
    font-size: 0.75rem;
}

.agenda-event-time,
.agenda-event-client,
.agenda-event-service,
.agenda-event-staff {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.agenda-st-cancelada .agenda-event-client {
    text-decoration: line-through;
}

.agenda-event.agenda-st-cancelada,
.agenda-chip.agenda-st-cancelada,
.agenda-pill.agenda-st-cancelada,
.agenda-event.agenda-st-no-show,
.agenda-chip.agenda-st-no-show,
.agenda-pill.agenda-st-no-show {
    opacity: 0.75;
}

/* ---------- Vista diaria ---------- */
.agenda-day-scroll {
    max-height: max(28rem, calc(100vh - 17rem));
    overflow: auto;
    overscroll-behavior: contain;
}

.agenda-day {
    position: relative;
    display: grid;
    grid-template-columns: var(--hours-w) repeat(var(--cols), minmax(11rem, 1fr));
    grid-template-rows: var(--head-h) auto;
    min-width: 100%;
    width: max-content;
}

.agenda-day-corner,
.agenda-staff {
    position: sticky;
    top: 0;
    z-index: 4;
    height: var(--head-h);
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-line-strong);
}

.agenda-day-corner {
    left: 0;
    z-index: 6;
}

.agenda-staff {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.75rem;
    border-left: 1px solid var(--ui-line);
    min-width: 0;
}

.agenda-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--ui-accent-wash);
    color: var(--ui-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.agenda-staff-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.agenda-staff-text strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ui-ink);
    font-size: 0.92rem;
}

.agenda-staff-text small {
    color: var(--ui-muted);
    font-size: 0.75rem;
}

.agenda-hours {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ui-surface);
}

.agenda-hour {
    position: relative;
    height: var(--slot-h);
}

.agenda-hour span {
    position: absolute;
    top: -0.55rem;
    right: 0.6rem;
    padding-inline: 0.15rem;
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agenda-hour:first-child span {
    top: 0.2rem;
}

.agenda-col {
    position: relative;
    border-left: 1px solid var(--ui-line);
}

.agenda-slot {
    position: relative;
    display: block;
    height: var(--slot-h);
    border-top: 1px dashed color-mix(in srgb, var(--ui-line) 70%, transparent);
    text-decoration: none;
}

.agenda-slot.is-full {
    border-top: 1px solid var(--ui-line);
}

.agenda-slot:first-child {
    border-top: 0;
}

.agenda-slot:hover {
    background: var(--ui-accent-wash);
}

.agenda-slot:hover::after {
    content: "+ " attr(data-time);
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.agenda-event {
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    z-index: 2;
    min-height: 1.7rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(63, 43, 35, 0.08);
}

.agenda-event.is-short {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0.15rem;
}

.agenda-event.is-short .agenda-event-service {
    display: none;
}

.agenda-overlap {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    border-block: 1px dashed var(--st-cancelada);
    background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--st-cancelada) 16%, transparent) 0 6px, transparent 6px 12px);
    pointer-events: none;
}

.agenda-now {
    position: absolute;
    left: var(--hours-w);
    right: 0;
    top: calc(var(--head-h) + (100% - var(--head-h)) * var(--now) / 100);
    z-index: 3;
    border-top: 2px solid var(--st-cancelada);
    pointer-events: none;
}

.agenda-now::before {
    content: "";
    position: absolute;
    left: -0.35rem;
    top: -0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--st-cancelada);
}

.agenda-now span {
    position: absolute;
    left: 0.6rem;
    top: 0;
    transform: translateY(-55%);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--st-cancelada);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Vista semanal ---------- */
.agenda-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(8.75rem, 1fr));
    overflow-x: auto;
}

.agenda-week-day {
    display: flex;
    flex-direction: column;
    min-height: 24rem;
    min-width: 0;
    border-left: 1px solid var(--ui-line);
}

.agenda-week-day:first-child {
    border-left: 0;
}

.agenda-week-day.is-weekend {
    background: var(--ui-surface-2);
}

.agenda-week-day header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--ui-line);
}

.agenda-week-day header a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.15rem 0.35rem;
    margin-left: -0.35rem;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-ink);
    text-decoration: none;
}

.agenda-week-day header a:hover {
    background: var(--ui-accent-wash);
}

.agenda-week-day header small {
    color: var(--ui-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.agenda-week-day header strong {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.agenda-week-day.is-today header strong {
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
    font-size: 1.05rem;
}

.agenda-count {
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--ui-accent-wash);
    color: var(--ui-accent);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.agenda-week-events {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
}

.agenda-week-empty {
    margin: 0;
    padding: 0.4rem 0.2rem;
    color: var(--ui-muted);
    font-size: 0.8rem;
}

/* ---------- Vista mensual ---------- */
.agenda-month-head,
.agenda-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-month-head span {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.agenda-month-day {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    min-height: 7.75rem;
    padding: 0.4rem;
    border-bottom: 1px solid var(--ui-line);
    border-left: 1px solid var(--ui-line);
}

.agenda-month-day:nth-child(7n + 1) {
    border-left: 0;
}

.agenda-month-day.is-weekend {
    background: var(--ui-surface-2);
}

.agenda-month-day.is-other .agenda-month-num,
.agenda-month-day.is-other .agenda-month-events {
    opacity: 0.45;
}

.agenda-month-day header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

.agenda-month-num {
    display: inline-grid;
    place-items: center;
    min-width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    color: var(--ui-ink);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.agenda-month-num:hover {
    background: var(--ui-accent-wash);
    color: var(--ui-ink);
}

.agenda-month-day.is-today .agenda-month-num {
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
}

.agenda-month-dots {
    display: none;
    gap: 0.2rem;
}

.agenda-month-events {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.agenda-pill {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.4rem;
    border-left-width: 2px;
    border-radius: 0.3rem;
}

.agenda-pill .agenda-event-client {
    font-size: 0.75rem;
    font-weight: 500;
}

.agenda-more {
    padding: 0.1rem 0.4rem;
    color: var(--ui-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.agenda-more:hover {
    text-decoration: underline;
}

/* ---------- Detalle de cita ---------- */
.agenda-modal .modal-content {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
}

.agenda-modal .modal-header,
.agenda-modal .modal-footer {
    border-color: var(--ui-line);
}

.agenda-modal-list {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

.agenda-modal-list > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.75rem;
}

.agenda-modal-list dt {
    color: var(--ui-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.agenda-modal-list dt i {
    margin-right: 0.3rem;
}

.agenda-modal-list dd {
    margin: 0;
    color: var(--ui-ink);
    font-weight: 500;
}

/* ---------- Agenda en pantallas estrechas ---------- */
@media (max-width: 991.98px) {
    .agenda-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .agenda {
        --hours-w: 3.4rem;
    }

    .agenda-day {
        grid-template-columns: var(--hours-w) repeat(var(--cols), minmax(9.5rem, 1fr));
    }

    /* La semana pasa a lista de dias */
    .agenda-week {
        grid-template-columns: 1fr;
    }

    .agenda-week-day {
        min-height: 0;
        border-left: 0;
        border-bottom: 1px solid var(--ui-line);
    }

    /* En el mes solo se ven los puntos de estado; el dia se abre al tocar su numero */
    .agenda-month-day {
        min-height: 3.6rem;
        padding: 0.25rem;
    }

    .agenda-month-day header {
        flex-direction: column;
        gap: 0.2rem;
    }

    .agenda-month-dots {
        display: inline-flex;
    }

    .agenda-month-dots .agenda-dot {
        width: 0.4rem;
        height: 0.4rem;
    }

    .agenda-month-events {
        display: none;
    }

    .agenda-month-head span {
        padding-inline: 0.25rem;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .agenda-header-actions,
    .agenda-header-actions .btn {
        flex: 1 1 auto;
    }

    .agenda-nav {
        justify-content: space-between;
    }

    .agenda-controls > * {
        flex: 1 1 100%;
    }

    .agenda-views a {
        flex: 1 1 0;
        text-align: center;
    }

    .agenda-field .form-control,
    .agenda-field .form-select {
        width: 100%;
    }

    .agenda-modal-list > div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

/* =====================================================================
 * Acceso (login)
 * ===================================================================== */
.auth-main {
    padding: 0;
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: calc(100vh - 4.5rem);
    background: var(--ui-bg);
}

.auth-visual {
    position: relative;
    overflow: hidden;
    background: #3f2b23;
}

.auth-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(63, 43, 35, 0.05) 30%, rgba(46, 30, 23, 0.82) 100%);
}

.auth-visual-copy {
    position: absolute;
    left: clamp(1.5rem, 4vw, 3.5rem);
    right: clamp(1.5rem, 4vw, 3.5rem);
    bottom: clamp(1.5rem, 5vw, 3.5rem);
    z-index: 1;
    color: #fff9f4;
}

.auth-visual-kicker {
    margin: 0 0 0.6rem;
    color: #e3c27a;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.auth-visual-quote {
    max-width: 22ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.9rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
}

.auth-panel-inner {
    width: 100%;
    max-width: 24rem;
}

.auth-panel-logo {
    display: block;
    width: 4.5rem;
    height: auto;
    margin-bottom: 1.75rem;
}

.auth-title {
    margin: 0;
    font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem);
}

.auth-subtitle {
    margin: 0.5rem 0 1.75rem;
    color: var(--ui-muted);
}

.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(180, 80, 90, 0.35);
    border-left: 3px solid #b4505a;
    border-radius: var(--ui-radius);
    background: #fbeeef;
    color: #7b2f37;
    font-size: 0.92rem;
}

.auth-error i {
    margin-top: 0.1rem;
}

.auth-form {
    display: grid;
    gap: 1.1rem;
}

.auth-field .form-label {
    margin-bottom: 0.35rem;
    color: var(--ui-ink);
    font-size: 0.88rem;
    font-weight: 600;
}

.auth-input {
    position: relative;
}

.auth-input > i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    pointer-events: none;
    z-index: 1;
}

.auth-input .form-control {
    min-height: 3rem;
    padding-left: 2.6rem;
    border-color: var(--ui-line-strong);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
}

.auth-input .form-control:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 0.2rem var(--ui-focus);
}

.auth-input:has(.auth-reveal) .form-control {
    padding-right: 3rem;
}

.auth-reveal {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-muted);
}

.auth-reveal:hover {
    background: var(--ui-accent-wash);
    color: var(--ui-ink);
}

.auth-reveal:focus-visible {
    outline: 2px solid var(--ui-focus);
}

.auth-hint {
    margin: 0.4rem 0 0;
    color: #8a5a10;
    font-size: 0.82rem;
    font-weight: 600;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    margin-top: 0.4rem;
    font-weight: 600;
}

.auth-submit i {
    transition: transform 0.15s ease;
}

.auth-submit:hover i {
    transform: translateX(3px);
}

.auth-help {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ui-line);
    color: var(--ui-muted);
    font-size: 0.85rem;
}

@media (max-width: 991.98px) {
    .auth-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-visual {
        height: 13rem;
    }

    .auth-visual-quote {
        font-size: 1.6rem;
    }

    .auth-panel {
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .auth-visual {
        display: none;
    }
}

/* =====================================================================
 * Buscador de listados (.finder) — citas y clientes
 * Un campo de texto protagonista, filtros en pastillas que se aplican al
 * cambiar, y un pie con recuento, filtros aplicados y herramientas.
 * ===================================================================== */
.finder {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.finder-main {
    display: flex;
    gap: 0.5rem;
}

.finder-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.finder-search > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    font-size: 1.05rem;
    pointer-events: none;
}

.finder-search input {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 2.75rem;
    border: 1px solid var(--ui-line-strong);
    border-radius: 999px;
    background: var(--ui-surface-2);
    color: var(--ui-ink);
    font-size: 1rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.finder-search input::placeholder {
    color: var(--ui-muted);
    opacity: 0.85;
}

.finder-search input:focus {
    outline: none;
    border-color: var(--ui-accent);
    background: var(--ui-surface);
    box-shadow: 0 0 0 0.2rem var(--ui-focus);
}

/* La "x" nativa del input search duplicaria la nuestra */
.finder-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.finder-search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: var(--ui-muted);
    text-decoration: none;
}

.finder-search-clear:hover {
    background: var(--ui-accent-wash);
    color: var(--ui-ink);
}

.finder-submit {
    flex: 0 0 auto;
    min-height: 3rem;
    padding-inline: 1.35rem !important;
    border-radius: 999px !important;
}

/* ---------- Pastillas de filtro ---------- */
.finder-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.finder-seg {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0.2rem;
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: var(--ui-surface-2);
}

.finder-seg a {
    padding: 0.36rem 0.9rem;
    border-radius: 999px;
    color: var(--ui-muted);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.finder-seg a:hover {
    color: var(--ui-ink);
}

.finder-seg a.is-active {
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: 0 1px 3px rgba(63, 43, 35, 0.14);
}

.finder-seg a:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 1px;
}

.finder-pill,
.finder-range,
.finder-toggle span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    margin: 0;
    border: 1px solid var(--ui-line-strong);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-size: 0.86rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.finder-pill > i,
.finder-pill > .agenda-dot {
    position: absolute;
    left: 0.85rem;
    color: var(--ui-muted);
    pointer-events: none;
    z-index: 1;
}

.finder-pill .form-select {
    min-height: 2.35rem;
    max-width: 15rem;
    padding: 0.3rem 2.1rem 0.3rem 2.2rem;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    color: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    box-shadow: none;
    cursor: pointer;
}

.finder-pill:hover,
.finder-range:hover,
.finder-toggle span:hover {
    border-color: var(--ui-accent);
}

.finder-pill:focus-within,
.finder-range:focus-within,
.finder-toggle input:focus-visible + span {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 0.2rem var(--ui-focus);
}

/* Filtro con valor: se tiñe para ver de un vistazo que esta activo */
.finder-pill.is-set,
.finder-range.is-set,
.finder-toggle input:checked + span {
    border-color: var(--ui-accent);
    background: var(--ui-accent-wash);
    font-weight: 600;
}

.finder-pill.is-set .form-select {
    font-weight: 600;
}

.finder-range {
    gap: 0.25rem;
    padding: 0 0.6rem 0 0.85rem;
}

.finder-range > i {
    margin-right: 0.3rem;
    color: var(--ui-muted);
}

.finder-range > span {
    color: var(--ui-muted);
}

.finder-range input {
    min-height: 2.3rem;
    width: 8.4rem;
    padding: 0 0.2rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.finder-range input:focus {
    outline: none;
}

.finder-toggle {
    margin: 0;
    cursor: pointer;
}

.finder-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.finder-toggle span {
    gap: 0.45rem;
    padding: 0 0.95rem;
    font-weight: 500;
    user-select: none;
}

.finder-toggle span i {
    color: var(--ui-muted);
}

.finder-toggle input:checked + span i {
    color: var(--ui-accent);
}

/* ---------- Pie: recuento, filtros aplicados, herramientas ---------- */
.finder-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--ui-line);
}

.finder-count {
    margin: 0;
    color: var(--ui-muted);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.finder-count strong {
    color: var(--ui-ink);
    font-weight: 700;
}

.finder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.finder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.2rem 0.15rem 0.65rem;
    border-radius: 999px;
    background: var(--ui-accent-wash);
    color: var(--ui-ink);
    font-size: 0.8rem;
    font-weight: 600;
}

.finder-chip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: var(--ui-muted);
    text-decoration: none;
}

.finder-chip a:hover {
    background: var(--ui-surface);
    color: var(--ui-ink);
}

.finder-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.finder-link {
    color: var(--ui-muted);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--ui-line-strong);
    text-underline-offset: 0.2em;
}

.finder-link:hover {
    color: var(--ui-accent);
}

@media (max-width: 575.98px) {
    .finder {
        padding: 0.75rem;
    }

    .finder-submit span {
        display: none;
    }

    .finder-submit {
        width: 3rem;
        padding-inline: 0 !important;
    }

    /* Las pastillas se deslizan en horizontal en vez de apilarse */
    .finder-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -0.75rem;
        padding: 0.1rem 0.75rem 0.3rem;
        scrollbar-width: none;
    }

    .finder-filters > * {
        flex: 0 0 auto;
    }

    .finder-seg {
        flex-wrap: nowrap;
    }

    .finder-tools {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}

/* =====================================================================
 * Listados (.lst) — citas y clientes
 * ===================================================================== */
.lst-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.lst-kpi {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-ink);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.lst-kpi:hover {
    border-color: var(--ui-accent);
    color: var(--ui-ink);
}

.lst-kpi-num {
    min-width: 2.4rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ui-muted);
}

.lst-kpi.has-items .lst-kpi-num {
    color: var(--ui-accent);
}

.lst-kpi-text {
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
}

.lst-kpi-text small {
    color: var(--ui-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.lst-kpi > i {
    margin-left: auto;
    color: var(--ui-muted);
    transition: transform 0.15s ease, color 0.15s ease;
}

.lst-kpi:hover > i {
    color: var(--ui-accent);
    transform: translateX(3px);
}

/* ---------- Tabla ---------- */
.lst-table thead th {
    padding-block: 0.6rem !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.02em !important;
}

.lst-table > tbody > .lst-row > td {
    padding-block: 0.8rem;
    background: var(--ui-surface);
    transition: background-color 0.12s ease;
}

.lst-table > tbody > .lst-row:hover > td {
    background: var(--ui-surface-2);
}

.lst-row.is-dimmed > td:not(.lst-status):not(.lst-actions) {
    opacity: 0.6;
}

.lst-row.is-dimmed .lst-service-name {
    text-decoration: line-through;
    text-decoration-color: var(--ui-line-strong);
}

.lst-table small {
    display: block;
    color: var(--ui-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.lst-muted {
    color: var(--ui-muted);
    font-size: 0.88rem;
}

/* Cabecera de dia */
.lst-day > th {
    padding: 1rem 0.85rem 0.45rem !important;
    background: var(--ui-bg) !important;
    border-bottom: 1px solid var(--ui-line-strong) !important;
    color: var(--ui-ink);
    font-weight: 600;
    white-space: nowrap;
}

.lst-day-name {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 500;
}

.lst-day-tag {
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--ui-accent-wash);
    color: var(--ui-accent);
    font-size: 0.74rem;
    font-weight: 700;
    vertical-align: 0.15em;
}

.lst-day.is-today .lst-day-tag {
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
}

.lst-day-count {
    float: right;
    color: var(--ui-muted);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.9;
}

/* Hora: filete del color del estado a la izquierda */
.lst-time {
    width: 7rem;
    white-space: nowrap;
    box-shadow: inset 3px 0 0 var(--st, transparent);
    font-variant-numeric: tabular-nums;
}

.lst-time-start {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ui-ink);
    line-height: 1.2;
}

.lst-time-end {
    display: block;
    color: var(--ui-muted);
    font-size: 0.78rem;
}

/* Persona: avatar con iniciales + nombre */
.lst-who {
    min-width: 13rem;
    white-space: nowrap;
}

.lst-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    margin-right: 0.7rem;
    border-radius: 50%;
    background: var(--av, var(--ui-accent-wash));
    color: var(--ui-ink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    flex: 0 0 auto;
}

.lst-avatar-0 { --av: rgba(150, 89, 63, 0.18); }
.lst-avatar-1 { --av: rgba(199, 163, 90, 0.26); }
.lst-avatar-2 { --av: rgba(63, 127, 157, 0.18); }
.lst-avatar-3 { --av: rgba(79, 138, 91, 0.2); }
.lst-avatar-4 { --av: rgba(180, 80, 90, 0.17); }
.lst-avatar-5 { --av: rgba(139, 127, 120, 0.22); }

.lst-who-text {
    display: inline-flex;
    flex-direction: column;
    max-width: calc(100% - 3rem);
    min-width: 0;
    vertical-align: middle;
    white-space: normal;
}

.lst-table .lst-who-text > a {
    font-weight: 600;
    text-decoration: none;
}

.lst-table .lst-who-text > a:hover {
    text-decoration: underline;
}

.lst-service {
    min-width: 10rem;
    max-width: 16rem;
}

.lst-service-name {
    display: block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .lst-service-name {
        max-width: 100%;
    }
}

.lst-staff {
    white-space: nowrap;
}

.lst-staff-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.35rem;
    border: 1px solid var(--ui-line-strong);
    border-radius: 50%;
    color: var(--ui-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

/* Estado: pastilla con punto de color que abre el modal */
.lst-status {
    min-width: 11rem;
}

.lst-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.lst-status-line form {
    margin: 0;
}

.lst-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.6rem 0.28rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--st, var(--ui-muted)) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--st, var(--ui-muted)) 12%, var(--ui-surface));
    color: var(--ui-ink);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 0.15s ease;
}

.lst-status-pill > i {
    color: var(--ui-muted);
    font-size: 0.65rem;
}

.lst-status-pill:hover {
    border-color: var(--st, var(--ui-muted));
}

.lst-status-pill:focus-visible,
.lst-confirm:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

.lst-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.26rem 0.6rem;
    border: 1px dashed var(--st-confirmada);
    border-radius: 999px;
    background: transparent;
    color: var(--st-confirmada);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.lst-confirm:hover {
    border-style: solid;
    background: color-mix(in srgb, var(--st-confirmada) 12%, transparent);
}

.lst-table .lst-note {
    margin-top: 0.25rem;
    max-width: 16rem;
    white-space: normal;
}

/* Clientes */
.lst-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.lst-tags:empty {
    display: none;
}

.lst-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
}

.lst-tag.is-alert {
    background: color-mix(in srgb, var(--st-cancelada) 14%, transparent);
    color: var(--st-cancelada);
}

.lst-tag.is-gold {
    background: color-mix(in srgb, var(--ui-gold) 22%, transparent);
    color: var(--ui-ink);
}

.lst-tag.is-gold i {
    color: var(--ui-gold);
}

.lst-contact {
    min-width: 12rem;
}

.lst-table .lst-contact a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ui-ink);
    font-weight: 500;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.lst-table .lst-contact a i {
    color: var(--ui-muted);
    font-size: 0.85em;
}

.lst-table .lst-contact a:hover {
    color: var(--ui-accent);
}

/* .lst-row > td > a gana a la regla genérica ".table td > a" (inline-flex): el email va en su propia línea */
.lst-table .lst-row > td.lst-contact > a.lst-contact-mail {
    display: block;
    max-width: 16rem;
    color: var(--ui-muted);
    font-size: 0.84rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst-table .lst-contact .lst-contact-mail i {
    margin-right: 0.4rem;
}

.lst-visit {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lst-visit-date {
    font-weight: 500;
}

.lst-table .lst-visit small.is-late {
    color: var(--st-cancelada);
    font-weight: 600;
}

.lst-prefs {
    max-width: 20rem;
    color: var(--ui-muted);
    font-size: 0.88rem;
}

.lst-prefs > span:not(.lst-muted) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lst-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* Vacio */
.lst-empty-row > td {
    padding: 0 !important;
}

.lst-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ui-muted);
}

.lst-empty > i {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 2rem;
    color: var(--ui-line-strong);
}

.lst-empty p {
    margin: 0 0 0.9rem;
    color: var(--ui-ink);
}

/* ---------- Movil: cada fila pasa a ser una tarjeta ---------- */
@media (max-width: 767.98px) {
    .lst-kpis {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .lst-kpi {
        padding: 0.6rem 0.9rem;
    }

    .lst-kpi-num {
        font-size: 1.6rem;
    }

    .lst .table-responsive {
        overflow: visible;
    }

    .lst-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .lst-table,
    .lst-table tbody,
    .lst-table .lst-day,
    .lst-table .lst-day > th,
    .lst-table .lst-empty-row,
    .lst-table .lst-empty-row > td {
        display: block;
    }

    .lst-table .lst-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.35rem 0.75rem;
        padding: 0.85rem 0.9rem;
        border-bottom: 1px solid var(--ui-line);
        background: var(--ui-surface);
    }

    .lst-table > tbody > .lst-row > td {
        display: block;
        min-width: 0;
        max-width: none;
        width: auto;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none;
    }

    .lst-table .lst-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }

    .lst-table .table-actions-label {
        display: none;
    }

    /* Citas: hora | cliente | acciones; debajo servicio, profesional y estado */
    .lst-table-citas .lst-row {
        box-shadow: inset 3px 0 0 var(--st, transparent);
    }

    .lst-table-citas .lst-time {
        grid-column: 1;
        grid-row: 1 / span 4;
    }

    .lst-table-citas .lst-who {
        grid-column: 2;
        grid-row: 1;
    }

    .lst-table-citas .lst-who .lst-avatar,
    .lst-table-citas .lst-staff-mark {
        display: none;
    }

    .lst-table-citas .lst-who-text {
        max-width: 100%;
    }

    .lst-table-citas .lst-service,
    .lst-table-citas .lst-staff,
    .lst-table-citas .lst-status {
        grid-column: 2 / span 2;
    }

    .lst-table-citas .lst-staff {
        color: var(--ui-muted);
        font-size: 0.85rem;
    }

    /* Clientes: avatar y nombre | acciones; debajo contacto y ultima visita */
    .lst-table-clientes .lst-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .lst-table-clientes .lst-who {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    /* Teléfono, email y última visita, cada uno en su línea para que no se pisen */
    .lst-table-clientes .lst-contact,
    .lst-table-clientes .lst-visit {
        grid-column: 1 / -1;
        padding-left: 3rem !important;
    }

    .lst-table .lst-row > td.lst-contact > a.lst-contact-mail {
        max-width: 100%;
        margin-top: 0.15rem;
    }

    .lst-table-clientes .lst-prefs {
        display: none !important;
    }
}

/* =====================================================================
 * Buscador flotante (Ctrl/Cmd + K)
 * El mismo formulario de la barra superior se saca al centro de la pantalla.
 * La barra tiene backdrop-filter, que atraparia los hijos "fixed": se quita mientras esta abierto.
 * ===================================================================== */
.topbar-search-hint {
    width: auto;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.search-palette-open {
    overflow: hidden;
}

body.search-palette-open .app-topbar {
    z-index: 1065;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.search-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(40, 26, 20, 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: palette-fade 0.15s ease-out;
}

.search-palette-backdrop[hidden] {
    display: none;
}

.topbar-search-placeholder {
    flex: 0 0 auto;
    max-width: 100%;
}

.topbar-search.is-palette {
    position: fixed;
    top: max(12vh, 4.5rem);
    left: 50%;
    z-index: 2;
    width: min(40rem, calc(100vw - 2rem));
    max-width: none;
    padding: 0.75rem;
    border: 1px solid var(--pop-line, var(--ui-line));
    border-radius: 1.25rem;
    background: var(--pop-bg, var(--ui-surface));
    box-shadow: var(--pop-shadow, 0 1.2rem 2.4rem rgba(63, 43, 35, 0.2));
    transform: translateX(-50%);
    animation: palette-in 0.16s ease-out;
}

.topbar-search.is-palette .topbar-search-icon {
    left: 1.75rem;
    top: 2.25rem;
    font-size: 1.1rem;
}

.topbar-search.is-palette .topbar-search-input {
    min-height: 3rem;
    padding-left: 2.9rem;
    padding-right: 1rem;
    font-size: 1.08rem;
}

.topbar-search.is-palette .topbar-search-hint {
    display: none;
}

/* Los resultados pasan de desplegable a lista dentro del panel */
.topbar-search.is-palette .topbar-search-results {
    position: static;
    min-width: 0;
    max-height: min(55vh, 28rem);
    margin-top: 0.5rem;
    padding: 0.25rem 0 0;
    border: 0;
    border-top: 1px solid var(--pop-line, var(--ui-line));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.search-palette-foot {
    display: none;
}

.topbar-search.is-palette .search-palette-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0.6rem 0.25rem 0;
    color: var(--ui-muted);
    font-size: 0.76rem;
}

.search-palette-foot kbd {
    display: inline-block;
    min-width: 1.35rem;
    margin-right: 0.2rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--ui-line-strong);
    border-radius: 0.35rem;
    background: var(--ui-surface-2);
    color: var(--ui-ink);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    box-shadow: none;
}

@keyframes palette-fade {
    from { opacity: 0; }
}

@keyframes palette-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
    }
}

.topbar-search.is-palette:focus {
    outline: none;
}

@media (max-width: 575.98px) {
    .topbar-search.is-palette {
        top: 0.75rem;
    }

    .topbar-search-placeholder {
        order: 3;
        flex: 1 1 100%;
        width: auto !important;
    }

    /* En tactil no hay teclas que explicar */
    .topbar-search.is-palette .search-palette-foot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-palette-backdrop,
    .topbar-search.is-palette {
        animation: none;
    }
}

/* =====================================================================
 * Filtro de periodo (Ingresos por empleado)
 * Atajos arriba; debajo, navegacion por periodos y rango libre; resumen si abarca varios dias.
 * ===================================================================== */
.period-filter {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.period-presets {
    align-self: flex-start;
    max-width: 100%;
}

.period-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
}

.period-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.period-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--ui-line-strong);
    border-radius: 50%;
    color: var(--ui-ink);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.period-step:hover {
    border-color: var(--ui-accent);
    background: var(--ui-accent-wash);
    color: var(--ui-ink);
}

.period-step:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

.period-step.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.period-current {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    line-height: 1.2;
}

.period-current strong {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    font-weight: 500;
    color: var(--ui-ink);
}

.period-current span {
    color: var(--ui-muted);
    font-size: 0.8rem;
}

.period-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.period-custom .btn {
    min-height: 2.4rem;
    border-radius: 999px;
}

.period-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ui-line);
}

.period-summary dt {
    color: var(--ui-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.period-summary dd {
    margin: 0.1rem 0 0;
    color: var(--ui-ink);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .period-presets {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .period-row,
    .period-custom {
        width: 100%;
    }

    .period-custom .finder-range {
        flex: 1 1 auto;
    }

    .period-custom .finder-range input {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
    }

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

/* =====================================================================
 * Cierre de caja (.cc)
 * Pasos a la izquierda (fondo, conteo, ajuste), cuadre fijo a la derecha con veredicto
 * y boton de cierre; debajo cobros del dia por metodo y cierres anteriores.
 * ===================================================================== */
.cc {
    --cc-ok: #3f7d4f;
    --cc-over: #a8730f;
    --cc-short: #b4505a;
}

html[data-app="auth"][data-theme="dark"] .cc {
    --cc-ok: #86c093;
    --cc-over: #e5b350;
    --cc-short: #e08891;
}

.cc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
}

.cc-status.is-open {
    background: color-mix(in srgb, var(--cc-ok) 14%, transparent);
    color: var(--cc-ok);
}

.cc-status.is-closed {
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    border: 1px solid var(--ui-line);
}

/* ---------- Cifras del dia ---------- */
.cc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.cc-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
}

.cc-kpi.is-total {
    background: var(--ui-accent-wash);
    border-color: transparent;
}

.cc-kpi-label {
    color: var(--ui-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.cc-kpi-value {
    color: var(--ui-ink);
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.cc-kpi-sub {
    color: var(--ui-muted);
    font-size: 0.78rem;
}

/* ---------- Formulario: pasos + cuadre ---------- */
.cc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.cc-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cc-step .card-body {
    padding: 1.15rem 1.25rem;
}

.cc-step-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ui-ink);
}

.cc-step-title label {
    margin: 0;
    cursor: pointer;
}

.cc-step-title small {
    color: var(--ui-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.cc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ui-accent-wash);
    color: var(--ui-accent);
    font-size: 0.82rem;
    font-weight: 700;
}

.cc-step-help {
    margin: 0 0 0.75rem;
    color: var(--ui-muted);
    font-size: 0.86rem;
    max-width: 60ch;
}

.cc-step-main {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 1px var(--ui-accent);
}

/* Campo de importe con simbolo de euro a la derecha */
.cc-money {
    position: relative;
    max-width: 14rem;
}

.cc-money .form-control {
    padding-right: 2.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.cc-money > span {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    font-weight: 600;
    pointer-events: none;
}

.cc-money-lg {
    max-width: 18rem;
}

.cc-money-lg .form-control {
    min-height: 3.4rem;
    font-size: 1.6rem;
    border-radius: var(--ui-radius);
}

/* Contador de billetes y monedas */
.cc-counter {
    margin-top: 1rem;
    border-top: 1px solid var(--ui-line);
    padding-top: 0.85rem;
}

.cc-counter summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ui-accent);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.cc-counter summary::-webkit-details-marker {
    display: none;
}

.cc-counter summary::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.cc-counter[open] summary::after {
    transform: rotate(180deg);
}

.cc-counter[open] summary {
    margin-bottom: 0.6rem;
}

.cc-denoms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.cc-denom {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.15rem 0.5rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-2);
}

.cc-denom-face {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.1rem;
    border-radius: 0.35rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line-strong);
    color: var(--ui-ink);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.cc-denom.is-moneda .cc-denom-face {
    width: 2.6rem;
    height: 2.6rem;
    margin-inline: auto;
    border-radius: 50%;
    font-size: 0.68rem;
}

.cc-denom .form-control {
    min-height: 2rem;
    padding: 0.15rem 0.45rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cc-denom-sub {
    color: var(--ui-muted);
    font-size: 0.74rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cc-counter-total {
    margin: 0.75rem 0 0;
    text-align: right;
    color: var(--ui-muted);
    font-size: 0.9rem;
}

.cc-counter-total strong {
    color: var(--ui-ink);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* Paso opcional plegable */
.cc-adjust > summary {
    display: block;
    cursor: pointer;
    list-style: none;
}

.cc-adjust > summary::-webkit-details-marker {
    display: none;
}

.cc-adjust > summary .cc-step-title {
    margin: 0;
}

.cc-adjust > summary .cc-step-title::after {
    content: "\F282";
    margin-left: auto;
    font-family: "bootstrap-icons";
    font-size: 0.8rem;
    color: var(--ui-muted);
    transition: transform 0.15s ease;
}

.cc-adjust[open] > summary .cc-step-title::after {
    transform: rotate(180deg);
}

.cc-adjust:not([open]) .cc-step-num {
    background: var(--ui-surface-2);
    color: var(--ui-muted);
}

/* ---------- Cuadre ---------- */
.cc-summary {
    position: sticky;
    top: 5.5rem;
}

.cc-summary .card-body {
    padding: 1.25rem;
}

.cc-summary-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
}

.cc-breakdown {
    margin: 0;
}

.cc-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 0;
    border-bottom: 1px dashed var(--ui-line);
    font-variant-numeric: tabular-nums;
}

.cc-breakdown > div[hidden] {
    display: none;
}

.cc-breakdown dt {
    color: var(--ui-muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.cc-breakdown dd {
    margin: 0;
    color: var(--ui-ink);
    font-weight: 600;
}

.cc-breakdown > .is-strong {
    border-bottom-style: solid;
}

.cc-breakdown > .is-strong dt {
    color: var(--ui-ink);
    font-weight: 600;
}

.cc-breakdown > .is-strong dd {
    font-size: 1.05rem;
    font-weight: 700;
}

.cc-verdict {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-radius: var(--ui-radius);
    font-size: 1.1rem;
    font-weight: 700;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cc-verdict i {
    font-size: 1.3rem;
}

.cc-verdict.is-empty {
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font-size: 0.92rem;
    font-weight: 500;
}

.cc-verdict.is-ok {
    background: color-mix(in srgb, var(--cc-ok) 14%, transparent);
    color: var(--cc-ok);
}

.cc-verdict.is-over {
    background: color-mix(in srgb, var(--cc-over) 16%, transparent);
    color: var(--cc-over);
}

.cc-verdict.is-short {
    background: color-mix(in srgb, var(--cc-short) 14%, transparent);
    color: var(--cc-short);
}

.cc-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 1rem;
    color: var(--ui-ink);
    font-size: 0.88rem;
    cursor: pointer;
}

.cc-confirm[hidden] {
    display: none;
}

.cc-confirm .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.cc-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.1rem;
}

.cc-submit:disabled {
    opacity: 0.55;
}

.cc-note {
    margin: 0.6rem 0 0;
    color: var(--ui-muted);
    font-size: 0.78rem;
    text-align: center;
}

/* ---------- Resultado de un cierre hecho ---------- */
.cc-result {
    max-width: 44rem;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.5rem;
}

.cc-result-state {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.cc-result-state > i {
    font-size: 2.2rem;
}

.cc-result-state h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
}

.cc-result-state p {
    margin: 0.1rem 0 0;
    color: var(--ui-muted);
    font-size: 0.86rem;
}

.cc-result.is-ok .cc-result-state > i,
.cc-result.is-ok .cc-diff dd { color: var(--cc-ok); }
.cc-result.is-over .cc-result-state > i,
.cc-result.is-over .cc-diff dd { color: var(--cc-over); }
.cc-result.is-short .cc-result-state > i,
.cc-result.is-short .cc-diff dd { color: var(--cc-short); }

.cc-result-foot {
    margin: 1rem 0 0;
    color: var(--ui-muted);
    font-size: 0.88rem;
}

.cc-result-foot strong {
    color: var(--ui-ink);
}

/* ---------- Cobros del dia y cierres anteriores ---------- */
.cc-movs,
.cc-history {
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.cc-movs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--ui-line);
}

.cc-movs-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.cc-movs .finder-seg button {
    padding: 0.36rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ui-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.cc-movs .finder-seg button span {
    margin-left: 0.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--ui-line);
    font-size: 0.74rem;
}

.cc-movs .finder-seg button.is-active {
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: 0 1px 3px rgba(63, 43, 35, 0.14);
}

.cc-movs .finder-seg button:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 1px;
}

.cc-table .cc-time,
.cc-table .cc-amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cc-table .cc-muted {
    color: var(--ui-muted);
}

.cc-table .cc-empty {
    padding: 2rem 1rem !important;
    color: var(--ui-muted);
    text-align: center;
}

.cc-diff-chip {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cc-diff-chip.is-ok {
    background: color-mix(in srgb, var(--cc-ok) 14%, transparent);
    color: var(--cc-ok);
}

.cc-diff-chip.is-over {
    background: color-mix(in srgb, var(--cc-over) 16%, transparent);
    color: var(--cc-over);
}

.cc-diff-chip.is-short {
    background: color-mix(in srgb, var(--cc-short) 14%, transparent);
    color: var(--cc-short);
}

@media (max-width: 991.98px) {
    .cc-layout {
        grid-template-columns: 1fr;
    }

    /* En movil el cuadre queda pegado abajo para ver el veredicto mientras se cuenta */
    .cc-summary {
        position: sticky;
        top: auto;
        bottom: 0.75rem;
        z-index: 5;
        box-shadow: 0 -0.5rem 1.5rem rgba(63, 43, 35, 0.12);
    }

    .cc-summary .cc-breakdown > div:not(.is-strong) {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .cc-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-kpi.is-total {
        grid-column: 1 / -1;
    }

    .cc-money,
    .cc-money-lg {
        max-width: none;
    }

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

@media print {
    .cc-back,
    .cc-movs .finder-seg,
    .page-header .btn {
        display: none !important;
    }

    .cc [role="tabpanel"][hidden] {
        display: block !important;
    }
}

/* ---------- Bootstrap sin azul: botones, enlaces y foco con los colores de la marca ----------
 * Bootstrap fija el azul en variables de cada componente (--bs-btn-active-bg, --bs-link-color,
 * --bs-focus-ring-color...) y lo aplica al pulsar (.btn:first-child:active, .btn.active, .btn.show,
 * .btn-check:checked + .btn) con mas especificidad que nuestras reglas. Se redefinen las variables
 * para que todos los estados usen el acento cacao (claro) o rosa (oscuro), y el dorado para "info".
 */
:root {
    --ui-accent-rgb: 150, 89, 63;
    --ui-accent-press: #6b3c29;
    --ui-info: #85621f;
    --ui-info-hover: #6e5019;
    --ui-info-ink: #ffffff;

    --bs-link-color: #96593f;
    --bs-link-color-rgb: 150, 89, 63;
    --bs-link-hover-color: #7f4831;
    --bs-link-hover-color-rgb: 127, 72, 49;
    --bs-focus-ring-color: rgba(150, 89, 63, 0.35);
    --bs-primary-text-emphasis: #5c3424;
    --bs-primary-bg-subtle: #f6e6dc;
    --bs-primary-border-subtle: #e2c3b2;
    --bs-info: #85621f;
    --bs-info-rgb: 133, 98, 31;
    --bs-info-text-emphasis: #5a4214;
    --bs-info-bg-subtle: #f8eed6;
    --bs-info-border-subtle: #e2cd95;
}

html[data-app="auth"][data-theme="dark"] {
    --ui-accent-rgb: 224, 169, 140;
    --ui-accent-press: #f3c9b0;
    --ui-info: #e3c27a;
    --ui-info-hover: #ecd193;
    --ui-info-ink: #2a1a12;

    --bs-primary-rgb: 224, 169, 140;
    --bs-link-color: #e0a98c;
    --bs-link-color-rgb: 224, 169, 140;
    --bs-link-hover-color: #f3c9b0;
    --bs-link-hover-color-rgb: 243, 201, 176;
    --bs-focus-ring-color: rgba(224, 169, 140, 0.4);
    --bs-primary-text-emphasis: #f3c9b0;
    --bs-primary-bg-subtle: #3d2c23;
    --bs-primary-border-subtle: #6b4a3a;
    --bs-info: #e3c27a;
    --bs-info-rgb: 227, 194, 122;
    --bs-info-text-emphasis: #f3e5c4;
    --bs-info-bg-subtle: #3a2f1c;
    --bs-info-border-subtle: #6b5a33;
}

.btn-primary {
    --bs-btn-color: var(--ui-accent-ink);
    --bs-btn-bg: var(--ui-accent);
    --bs-btn-border-color: var(--ui-accent);
    --bs-btn-hover-color: var(--ui-accent-ink);
    --bs-btn-hover-bg: var(--ui-accent-hover);
    --bs-btn-hover-border-color: var(--ui-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--ui-accent-rgb);
    --bs-btn-active-color: var(--ui-accent-ink);
    --bs-btn-active-bg: var(--ui-accent-press);
    --bs-btn-active-border-color: var(--ui-accent-press);
}

.btn-outline-primary {
    --bs-btn-color: var(--ui-accent);
    --bs-btn-border-color: var(--ui-accent);
    --bs-btn-hover-color: var(--ui-accent-ink);
    --bs-btn-hover-bg: var(--ui-accent);
    --bs-btn-hover-border-color: var(--ui-accent);
    --bs-btn-focus-shadow-rgb: var(--ui-accent-rgb);
    --bs-btn-active-color: var(--ui-accent-ink);
    --bs-btn-active-bg: var(--ui-accent);
    --bs-btn-active-border-color: var(--ui-accent);
    --bs-btn-disabled-color: var(--ui-muted);
    --bs-btn-disabled-border-color: var(--ui-line-strong);
}

.btn-info {
    --bs-btn-color: var(--ui-info-ink);
    --bs-btn-bg: var(--ui-info);
    --bs-btn-border-color: var(--ui-info);
    --bs-btn-hover-color: var(--ui-info-ink);
    --bs-btn-hover-bg: var(--ui-info-hover);
    --bs-btn-hover-border-color: var(--ui-info-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: var(--ui-info-ink);
    --bs-btn-active-bg: var(--ui-info-hover);
    --bs-btn-active-border-color: var(--ui-info-hover);
    --bs-btn-disabled-color: var(--ui-info-ink);
    --bs-btn-disabled-bg: var(--ui-info);
    --bs-btn-disabled-border-color: var(--ui-info);
}

.btn-outline-info {
    --bs-btn-color: var(--ui-info);
    --bs-btn-border-color: var(--ui-info);
    --bs-btn-hover-color: var(--ui-info-ink);
    --bs-btn-hover-bg: var(--ui-info);
    --bs-btn-hover-border-color: var(--ui-info);
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-active-color: var(--ui-info-ink);
    --bs-btn-active-bg: var(--ui-info-hover);
    --bs-btn-active-border-color: var(--ui-info-hover);
    --bs-btn-disabled-color: var(--ui-info);
    --bs-btn-disabled-border-color: var(--ui-info);
}

.btn-link {
    --bs-btn-color: var(--ui-accent);
    --bs-btn-hover-color: var(--ui-accent-hover);
    --bs-btn-active-color: var(--ui-accent-hover);
    --bs-btn-disabled-color: var(--ui-muted);
    --bs-btn-focus-shadow-rgb: var(--ui-accent-rgb);
}

.btn-light,
.btn-outline-secondary,
.btn-outline-dark {
    --bs-btn-focus-shadow-rgb: var(--ui-accent-rgb);
}

/* Foco: anillo visible en el acento de la marca, tambien en botones pulsados o marcados */
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.btn-check:checked + .btn:focus-visible,
.btn:first-child:active:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible,
.dropdown-item:focus-visible,
.accordion-button:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.page-link:focus,
.btn-close:focus,
.accordion-button:focus {
    box-shadow: none;
}

.form-check-input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 0.22rem rgba(var(--ui-accent-rgb), 0.25);
}

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

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2396593f'/%3e%3c/svg%3e");
}

html[data-app="auth"][data-theme="dark"] .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e0a98c'/%3e%3c/svg%3e");
}

/* Componentes con el azul fijado en sus propias variables */
.dropdown-menu {
    --bs-dropdown-link-active-color: var(--ui-ink);
    --bs-dropdown-link-active-bg: var(--ui-accent-wash);
}

.pagination {
    --bs-pagination-hover-color: var(--ui-accent-hover);
    --bs-pagination-focus-color: var(--ui-accent-hover);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--ui-accent-ink);
    --bs-pagination-active-bg: var(--ui-accent);
    --bs-pagination-active-border-color: var(--ui-accent);
    /* Con muchas páginas salta de línea en vez de ensanchar la página en móvil */
    flex-wrap: wrap;
}

.nav-tabs {
    --bs-nav-link-color: var(--ui-muted);
    --bs-nav-link-hover-color: var(--ui-accent);
    --bs-nav-tabs-link-active-color: var(--ui-ink);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--ui-accent-ink);
    --bs-nav-pills-link-active-bg: var(--ui-accent);
}

.list-group {
    --bs-list-group-active-color: var(--ui-accent-ink);
    --bs-list-group-active-bg: var(--ui-accent);
    --bs-list-group-active-border-color: var(--ui-accent);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--ui-accent);
}

.accordion {
    --bs-accordion-active-color: var(--ui-ink);
    --bs-accordion-active-bg: var(--ui-accent-wash);
    --bs-accordion-btn-focus-box-shadow: none;
}

.text-bg-info {
    color: var(--ui-info-ink) !important;
}

/* ==========================================================================
   Listados genericos (aura-ux.js): orden por columna, acciones fijas,
   descripcion recortada y filas como tarjetas en movil
   ========================================================================== */
.ux-sort {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ux-sort::after {
    content: "\2195";
    font-size: 0.75em;
    opacity: 0.35;
}

th[aria-sort="ascending"] .ux-sort::after { content: "\2191"; opacity: 0.9; }
th[aria-sort="descending"] .ux-sort::after { content: "\2193"; opacity: 0.9; }

.ux-sort:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.ux-clamp {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ux-clamp-sm {
    max-width: 14rem;
}

/* Lo secundario de una celda agrupada (método, marca) también se recorta a una línea */
.ux-clamp > small {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    /* La columna de acciones queda siempre a la vista aunque la tabla se desplace */
    /* Fondo opaco en todas las celdas para que lo que pasa por debajo de la columna fija no se transparente.
       La columna fija no pinta su propio fondo: así toma igual que el resto el hover, la cebra y los estados de la fila. */
    .ux-has-actions {
        --bs-table-bg: var(--ui-surface);
    }

    /* El modo oscuro deja las celdas transparentes (aura-dark.css): en estas tablas, opacas */
    html[data-app="auth"][data-theme="dark"] .table.ux-has-actions > :not(caption) > * > * {
        background-color: var(--ui-surface);
    }

    .ux-has-actions > thead > tr > th:last-child,
    .ux-has-actions > tbody > tr:not(.ux-full) > td:last-child {
        position: sticky;
        right: 0;
        box-shadow:
            inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg, transparent))),
            -8px 0 8px -8px rgba(63, 43, 35, 0.18);
    }
}

@media (max-width: 767.98px) {
    .table-responsive:has(> .ux-table) {
        overflow: visible;
    }

    .ux-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ux-table,
    .ux-table > tbody,
    .ux-table > tfoot {
        display: block;
    }

    .ux-table > tbody > tr,
    .ux-table > tfoot > tr {
        display: block;
        position: relative;
        padding: 0.75rem 0.9rem;
        border-bottom: 1px solid var(--ui-line);
    }

    .ux-table > tbody > tr > td,
    .ux-table > tfoot > tr > td {
        display: block;
        padding: 0.15rem 0 !important;
        border: 0 !important;
        text-align: right;
        white-space: normal;
        max-width: none;
    }

    .ux-table td[data-label]::before {
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: 0.8rem;
        float: left;
        margin-right: 1rem;
        line-height: 1.6;
    }

    .ux-table > tbody > tr.ux-full > td {
        display: block;
        text-align: center;
    }

    /* Acciones arriba a la derecha de cada tarjeta */
    .ux-has-actions > tbody > tr:not(.ux-full) {
        padding-right: 4rem;
    }

    .ux-has-actions > tbody > tr:not(.ux-full) > td:last-child {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        padding: 0 !important;
    }

    .ux-has-actions > tbody > tr > td:last-child::before,
    .ux-has-actions .table-actions-label {
        display: none;
    }

    .ux-clamp {
        max-width: none;
        white-space: normal;
    }
}

/* El check oculto del filtro debe posicionarse dentro de la fila deslizable; si no, ensancha la pagina en movil */
.finder-toggle {
    position: relative;
}

/* Citas que ya pasaron y siguen pendientes */
.lst-overdue {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    color: var(--bs-danger-text-emphasis, #9b2c2c);
    font-size: 0.78rem;
    font-weight: 600;
}

.lst-kpis:has(> li:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lst-kpi.is-warning .lst-kpi-num {
    color: var(--bs-danger-text-emphasis, #9b2c2c);
}

@media (max-width: 991.98px) {
    .lst-kpis:has(> li:nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Panel: resumen de secciones sin pendientes */
.dashboard-all-clear {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-radius);
    color: var(--ui-muted);
}

/* Tarjeta de sellos de la ficha de cliente */
.sellos-tarjeta {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 2.6rem));
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.sellos-tarjeta li {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 2px dashed var(--ui-line-strong);
    border-radius: 50%;
    color: var(--ui-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.sellos-tarjeta li.is-premio {
    border-color: var(--ui-gold);
    color: var(--ui-gold);
}

.sellos-tarjeta li.is-on {
    border-style: solid;
    border-color: var(--ui-accent);
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
}

@media (max-width: 575.98px) {
    .sellos-tarjeta {
        grid-template-columns: repeat(5, 2.6rem);
    }
}

/* Gastos: el alta de movimiento en una fila a pantalla completa */
@media (min-width: 992px) {
    .gastos-form > form {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr 2fr 1fr;
        align-items: start;
        gap: 1rem;
        margin: 0;
    }

    .gastos-form > form > [class*="col-"] {
        width: auto;
        margin: 0;
        padding: 0;
    }

    .gastos-form > form > .col-12:nth-last-child(-n+2) {
        grid-column: 1 / -1;
    }

    .gastos-form > form > .d-grid {
        justify-self: end;
        min-width: 14rem;
    }
}

/* En portátiles (1366 px) el botón de acciones se queda en el icono: el nombre va en aria-label */
@media (max-width: 1399.98px) {
    .table-actions-trigger .table-actions-label {
        display: none;
    }
}

/* Selector de forma de cobro (efectivo / tarjeta / pago mixto): en móvil se desliza dentro de su fila en vez de ensanchar la página */
.worker-cobro-switch {
    max-width: 100%;
    overflow-x: auto;
}

/* Tarjetas grandes del trabajador: el título se adapta al ancho de la tarjeta y nunca se sale; todas las filas igual de altas */
.worker-action-grid {
    grid-auto-rows: 1fr;
}

.worker-action-card {
    container-type: inline-size;
    min-width: 0;
}

.worker-action-card h2 {
    font-size: clamp(1.3rem, 9cqi, 1.9rem);
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.worker-action-card h2 > span {
    min-width: 0;
}

.worker-action-card p {
    overflow-wrap: anywhere;
}