/* =============================================================================
   KontaSalon · Fase 3 · Sistema visual «Corporativo moderno» (azul)
   Hoja única sobre Bootstrap 5.3.3. Sin estilos en línea (CSP estricta).
   Secciones:
     1. Tokens de diseño          7. Panel principal
     2. Mapeo a Bootstrap          8. Módulos (estilos existentes conservados)
     3. Tipografía y base          9. Agenda (estados de reserva)
     4. Estructura (menú/encabezado) 10. Recibos y ticket 80 mm (PROTEGIDO, sin cambios)
     5. Componentes               11. Diseño adaptable
     6. Inicio de sesión
   Reglas: todo el diseño de interfaz se limita a body.ks-app y body.ks-auth para
   no afectar el recibo térmico (body.ks-ticket-body) ni la impresión.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens de diseño (único lugar donde se definen colores)
   -------------------------------------------------------------------------- */
:root {
    --ks-primary: #173B67;
    --ks-primary-hover: #102E52;
    --ks-accent: #2878C8;
    --ks-accent-hover: #1D65AD;
    --ks-soft: #EAF2FA;
    --ks-background: #F5F7FA;
    --ks-surface: #FFFFFF;
    --ks-border: #E2E8F0;
    --ks-text: #1E293B;
    --ks-muted: #64748B;
    --ks-success: #16A36A;
    --ks-warning: #E5A12B;
    --ks-danger: #D94B4B;
    --ks-info: #64748B;

    /* Canales RGB (Bootstrap los necesita para transparencias) */
    --ks-primary-rgb: 23, 59, 103;
    --ks-accent-rgb: 40, 120, 200;
    --ks-text-rgb: 30, 41, 59;
    --ks-success-rgb: 22, 163, 106;
    --ks-warning-rgb: 229, 161, 43;
    --ks-danger-rgb: 217, 75, 75;
    --ks-info-rgb: 100, 116, 139;

    /* Derivados (sin nuevos tonos de marca) */
    --ks-surface-muted: #F8FAFC;
    --ks-border-strong: #CBD5E1;
    --ks-success-soft: rgba(var(--ks-success-rgb), .12);
    --ks-warning-soft: rgba(var(--ks-warning-rgb), .14);
    --ks-danger-soft: rgba(var(--ks-danger-rgb), .10);
    --ks-info-soft: rgba(var(--ks-info-rgb), .12);
    --ks-focus-ring: 0 0 0 .2rem rgba(var(--ks-accent-rgb), .25);

    /* Estados de reserva (Agenda) */
    --ks-st-pending: var(--ks-info);
    --ks-st-deposit-pending: var(--ks-warning);
    --ks-st-confirmed: var(--ks-accent);
    --ks-st-confirmed-deposit: var(--ks-primary);
    --ks-st-in-progress: #0E7490;
    --ks-st-completed: var(--ks-success);
    --ks-st-cancelled: #94A3B8;
    --ks-st-no-show: var(--ks-danger);
    --ks-st-rescheduled: #0891B2;

    /* Forma, sombra y espacio */
    --ks-radius-sm: .375rem;
    --ks-radius: .625rem;
    --ks-radius-lg: .875rem;
    --ks-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --ks-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --ks-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);

    /* Tipografía: Inter si está disponible; si no, la del sistema */
    --ks-font: "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ks-fs-base: .9375rem;   /* 15 px */
    --ks-fs-sm: .8125rem;     /* 13 px: mínimo para texto secundario */
    --ks-fs-label: .8125rem;

    /* Estructura */
    --ks-sidebar-w: 256px;
    --ks-sidebar-w-collapsed: 72px;
    --ks-topbar-h: 60px;
}

/* Inter autoalojada (opcional). Para activarla, copie InterVariable.woff2 en
   /public/assets/fonts/ y descomente este bloque (la CSP sólo admite fuentes propias).
@font-face { font-family: "InterVariable"; src: url("/assets/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
*/

/* -----------------------------------------------------------------------------
   2. Mapeo a las variables de Bootstrap 5.3
   -------------------------------------------------------------------------- */
.ks-app, .ks-auth {
    --bs-body-font-family: var(--ks-font);
    --bs-body-font-size: var(--ks-fs-base);
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--ks-text);
    --bs-body-color-rgb: var(--ks-text-rgb);
    --bs-body-bg: var(--ks-background);
    --bs-emphasis-color: var(--ks-text);
    --bs-secondary-color: var(--ks-muted);
    --bs-tertiary-bg: var(--ks-surface-muted);
    --bs-border-color: var(--ks-border);
    --bs-border-radius: var(--ks-radius);
    --bs-border-radius-sm: var(--ks-radius-sm);
    --bs-border-radius-lg: var(--ks-radius-lg);
    --bs-primary: var(--ks-primary);
    --bs-primary-rgb: var(--ks-primary-rgb);
    --bs-primary-text-emphasis: var(--ks-primary);
    --bs-primary-bg-subtle: var(--ks-soft);
    --bs-primary-border-subtle: #C7DBF0;
    --bs-success: var(--ks-success);
    --bs-success-rgb: var(--ks-success-rgb);
    --bs-warning: var(--ks-warning);
    --bs-warning-rgb: var(--ks-warning-rgb);
    --bs-danger: var(--ks-danger);
    --bs-danger-rgb: var(--ks-danger-rgb);
    --bs-info: var(--ks-info);
    --bs-info-rgb: var(--ks-info-rgb);
    --bs-link-color: var(--ks-accent);
    --bs-link-color-rgb: var(--ks-accent-rgb);
    --bs-link-hover-color: var(--ks-accent-hover);
    --bs-link-hover-color-rgb: 29, 101, 173;
    --bs-focus-ring-color: rgba(var(--ks-accent-rgb), .25);
    --bs-heading-color: var(--ks-text);
}

/* -----------------------------------------------------------------------------
   3. Tipografía y base
   -------------------------------------------------------------------------- */
body.ks-app, body.ks-auth {
    font-family: var(--ks-font);
    font-size: var(--ks-fs-base);
    color: var(--ks-text);
    background: var(--ks-background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.ks-app h1, .ks-app .h1, .ks-app .h2, .ks-app .h3 { font-weight: 700; letter-spacing: -.01em; color: var(--ks-text); }
.ks-app h1, .ks-app .h3 { font-size: 1.5rem; line-height: 1.25; }
.ks-app h2, .ks-app .h4, .ks-app .h5 { font-weight: 650; letter-spacing: -.005em; }
.ks-app .h4 { font-size: 1.3rem; }
.ks-app .h5 { font-size: 1.1rem; }
.ks-app .h6, .ks-app h6 { font-size: .95rem; font-weight: 650; }
.ks-app .small, .ks-app small { font-size: var(--ks-fs-sm); }
.ks-app .text-body-secondary, .ks-auth .text-body-secondary { color: var(--ks-muted) !important; }
.ks-app .text-primary { color: var(--ks-primary) !important; }
.ks-app a { text-decoration: none; }
.ks-app a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ks-app a.btn:hover, .ks-app .nav-link:hover, .ks-app a.ks-sidebar-brand:hover, .ks-app a.ks-kpi:hover, .ks-app .ks-quick a:hover, .ks-app a.ks-nav-link:hover, .ks-app .dropdown-item:hover, .ks-app a.ks-ap:hover, .ks-app a.ks-ap-mday:hover, .ks-app a.ks-card-link:hover { text-decoration: none; }
.ks-app code { color: var(--ks-primary); background: var(--ks-soft); padding: .1em .35em; border-radius: var(--ks-radius-sm); font-size: .85em; }
.ks-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.2em; }
.ks-icon-lg { width: 1.4rem; height: 1.4rem; }

/* -----------------------------------------------------------------------------
   4. Estructura: menú lateral plegable y encabezado
   -------------------------------------------------------------------------- */
.ks-shell { min-height: 100vh; }
.ks-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    width: var(--ks-sidebar-w);
    display: flex; flex-direction: column;
    background: var(--ks-surface);
    border-right: 1px solid var(--ks-border);
    transition: width .18s ease, transform .2s ease;
}
.ks-sidebar-brand {
    height: var(--ks-topbar-h); flex: 0 0 auto;
    display: flex; align-items: center; gap: .65rem;
    padding: 0 1.1rem; border-bottom: 1px solid var(--ks-border);
    color: var(--ks-primary); text-decoration: none;
}
.ks-sidebar-brand:hover { text-decoration: none; color: var(--ks-primary); }
.ks-brand-mark { width: 34px; height: 34px; flex: 0 0 34px; display: block; }
.ks-wordmark { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ks-primary); white-space: nowrap; }
.ks-wordmark span { color: var(--ks-accent); }
.ks-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .75rem .6rem 1rem; }
.ks-nav-group { margin-bottom: .6rem; }
.ks-nav-label {
    display: block; padding: .5rem .75rem .3rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ks-muted); white-space: nowrap;
}
.ks-nav-link {
    position: relative; display: flex; align-items: center; gap: .75rem;
    min-height: 40px; padding: .5rem .75rem; margin-bottom: 2px;
    border-radius: var(--ks-radius-sm);
    color: #334155; font-weight: 500; font-size: .9rem; white-space: nowrap;
    text-decoration: none;
}
.ks-nav-link .ks-icon { width: 1.25rem; height: 1.25rem; color: var(--ks-muted); }
.ks-nav-link:hover { background: var(--ks-surface-muted); color: var(--ks-primary); text-decoration: none; }
.ks-nav-link:hover .ks-icon { color: var(--ks-primary); }
.ks-nav-link.active { background: var(--ks-soft); color: var(--ks-primary); font-weight: 650; }
.ks-nav-link.active .ks-icon { color: var(--ks-accent); }
.ks-nav-link.active::before {
    content: ""; position: absolute; left: -.6rem; top: .45rem; bottom: .45rem;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--ks-accent);
}
.ks-nav-link:focus-visible { outline: 0; box-shadow: var(--ks-focus-ring); }
.ks-sidebar-footer { flex: 0 0 auto; border-top: 1px solid var(--ks-border); padding: .5rem .6rem; }
.ks-collapse-btn {
    width: 100%; display: flex; align-items: center; gap: .75rem;
    min-height: 40px; padding: .5rem .75rem; border: 0; border-radius: var(--ks-radius-sm);
    background: transparent; color: var(--ks-muted); font-size: .85rem; white-space: nowrap;
}
.ks-collapse-btn:hover { background: var(--ks-surface-muted); color: var(--ks-primary); }
.ks-collapse-btn .ks-i-expand { display: none; }

.ks-main { margin-left: var(--ks-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .18s ease; }
.ks-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: var(--ks-topbar-h); flex: 0 0 auto;
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.25rem;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--ks-border);
}
.ks-icon-btn {
    width: 40px; height: 40px; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--ks-radius-sm);
    background: transparent; color: var(--ks-text);
}
.ks-icon-btn:hover { background: var(--ks-surface-muted); border-color: var(--ks-border); }
.ks-icon-btn:focus-visible { outline: 0; box-shadow: var(--ks-focus-ring); }
.ks-topbar-context { min-width: 0; display: flex; align-items: center; gap: .6rem; flex: 1 1 auto; }
.ks-company { font-weight: 650; font-size: .95rem; color: var(--ks-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-chip {
    display: inline-flex; align-items: center; gap: .35rem; max-width: 240px;
    padding: .2rem .6rem; border-radius: 999px;
    background: var(--ks-soft); color: var(--ks-primary);
    font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-user-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .3rem .5rem .3rem .3rem; border: 1px solid var(--ks-border); border-radius: 999px;
    background: var(--ks-surface); color: var(--ks-text); font-size: .875rem; font-weight: 550;
}
.ks-user-btn:hover { border-color: var(--ks-border-strong); }
.ks-user-btn::after { display: none; }
.ks-avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ks-primary); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.ks-user-name { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-content { flex: 1 1 auto; width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.5rem 1.75rem 2.5rem; }
.ks-backdrop { display: none; }

/* Menú contraído (escritorio): sólo íconos con ayuda emergente */
html.ks-sidebar-collapsed .ks-sidebar { width: var(--ks-sidebar-w-collapsed); }
html.ks-sidebar-collapsed .ks-main { margin-left: var(--ks-sidebar-w-collapsed); }
html.ks-sidebar-collapsed .ks-wordmark,
html.ks-sidebar-collapsed .ks-nav-text,
html.ks-sidebar-collapsed .ks-nav-label { display: none; }
html.ks-sidebar-collapsed .ks-sidebar-brand { justify-content: center; padding: 0; }
html.ks-sidebar-collapsed .ks-nav-group { margin-bottom: .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ks-border); }
html.ks-sidebar-collapsed .ks-nav-group:last-child { border-bottom: 0; }
html.ks-sidebar-collapsed .ks-nav-link, html.ks-sidebar-collapsed .ks-collapse-btn { justify-content: center; padding: .55rem 0; }
html.ks-sidebar-collapsed .ks-collapse-btn .ks-i-collapse { display: none; }
html.ks-sidebar-collapsed .ks-collapse-btn .ks-i-expand { display: inline; }
html.ks-sidebar-collapsed .ks-nav-link:hover::after,
html.ks-sidebar-collapsed .ks-nav-link:focus-visible::after {
    content: attr(data-tooltip);
    position: fixed; left: calc(var(--ks-sidebar-w-collapsed) + 6px);
    margin-top: 0; padding: .35rem .6rem; border-radius: var(--ks-radius-sm);
    background: var(--ks-text); color: #fff; font-size: .8rem; font-weight: 500;
    white-space: nowrap; box-shadow: var(--ks-shadow-lg); pointer-events: none; z-index: 1100;
}

/* -----------------------------------------------------------------------------
   5. Componentes reutilizables
   -------------------------------------------------------------------------- */
/* Encabezado de página */
.ks-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.ks-page-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.ks-page-subtitle { margin: .2rem 0 0; color: var(--ks-muted); font-size: .9rem; }

/* Tarjetas */
.ks-app .card, .ks-auth .card {
    --bs-card-border-color: var(--ks-border);
    --bs-card-border-radius: var(--ks-radius-lg);
    --bs-card-inner-border-radius: calc(var(--ks-radius-lg) - 1px);
    --bs-card-cap-bg: var(--ks-surface);
    --bs-card-cap-padding-y: .8rem;
    --bs-card-spacer-x: 1.15rem;
    --bs-card-bg: var(--ks-surface);
    border: 1px solid var(--ks-border);
    box-shadow: var(--ks-shadow-sm);
}
.ks-app .card-header { font-weight: 650; font-size: .95rem; border-bottom-color: var(--ks-border); }
.ks-app .card-footer { background: var(--ks-surface-muted); border-top-color: var(--ks-border); }
.ks-app details.card > summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.25rem; }
.ks-app details.card > summary::-webkit-details-marker { display: none; }
.ks-app details.card > summary::after {
    content: ""; position: absolute; right: 1rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.35rem;
    border-right: 2px solid var(--ks-muted); border-bottom: 2px solid var(--ks-muted); transform: rotate(45deg); transition: transform .15s;
}
.ks-app details.card[open] > summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.ks-app .card.card-body:has(> .row) { padding: 1rem 1.15rem; }

/* Botones */
.ks-app .btn, .ks-auth .btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--ks-radius-sm); --bs-btn-padding-x: .9rem; --bs-btn-padding-y: .45rem; --bs-btn-font-size: .875rem; letter-spacing: .005em; }
.ks-app .btn-sm { --bs-btn-padding-x: .65rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .8125rem; }
.ks-app .btn-lg, .ks-auth .btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; }
.btn-primary { --bs-btn-bg: var(--ks-primary); --bs-btn-border-color: var(--ks-primary); --bs-btn-hover-bg: var(--ks-primary-hover); --bs-btn-hover-border-color: var(--ks-primary-hover); --bs-btn-active-bg: var(--ks-primary-hover); --bs-btn-active-border-color: var(--ks-primary-hover); --bs-btn-disabled-bg: var(--ks-primary); --bs-btn-disabled-border-color: var(--ks-primary); --bs-btn-focus-shadow-rgb: var(--ks-accent-rgb); }
.btn-outline-primary { --bs-btn-color: var(--ks-primary); --bs-btn-border-color: #B9CCE3; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ks-primary); --bs-btn-hover-border-color: var(--ks-primary); --bs-btn-active-bg: var(--ks-primary-hover); --bs-btn-active-border-color: var(--ks-primary-hover); --bs-btn-focus-shadow-rgb: var(--ks-accent-rgb); }
.btn-outline-secondary { --bs-btn-color: var(--ks-text); --bs-btn-border-color: var(--ks-border-strong); --bs-btn-hover-color: var(--ks-text); --bs-btn-hover-bg: var(--ks-surface-muted); --bs-btn-hover-border-color: var(--ks-border-strong); --bs-btn-active-bg: var(--ks-border); --bs-btn-active-color: var(--ks-text); --bs-btn-active-border-color: var(--ks-border-strong); }
.btn-success { --bs-btn-bg: var(--ks-success); --bs-btn-border-color: var(--ks-success); --bs-btn-hover-bg: #128A5A; --bs-btn-hover-border-color: #128A5A; --bs-btn-active-bg: #128A5A; --bs-btn-disabled-bg: var(--ks-success); --bs-btn-disabled-border-color: var(--ks-success); }
.btn-outline-success { --bs-btn-color: var(--ks-success); --bs-btn-border-color: var(--ks-success); --bs-btn-hover-bg: var(--ks-success); --bs-btn-hover-border-color: var(--ks-success); --bs-btn-active-bg: #128A5A; }
.btn-danger { --bs-btn-bg: var(--ks-danger); --bs-btn-border-color: var(--ks-danger); --bs-btn-hover-bg: #C23C3C; --bs-btn-hover-border-color: #C23C3C; --bs-btn-active-bg: #C23C3C; --bs-btn-disabled-bg: var(--ks-danger); --bs-btn-disabled-border-color: var(--ks-danger); }
.btn-outline-danger { --bs-btn-color: var(--ks-danger); --bs-btn-border-color: rgba(var(--ks-danger-rgb), .55); --bs-btn-hover-bg: var(--ks-danger); --bs-btn-hover-border-color: var(--ks-danger); --bs-btn-active-bg: #C23C3C; }
.btn-outline-warning { --bs-btn-color: #9A6510; --bs-btn-border-color: var(--ks-warning); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ks-warning); --bs-btn-hover-border-color: var(--ks-warning); }
.btn-link { --bs-btn-color: var(--ks-accent); --bs-btn-hover-color: var(--ks-accent-hover); --bs-btn-font-weight: 600; }
.ks-app .btn[aria-busy="true"], .ks-auth .btn[aria-busy="true"] { position: relative; color: transparent !important; }
.ks-app .btn[aria-busy="true"]::after, .ks-auth .btn[aria-busy="true"]::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem;
    border: 2px solid rgba(255, 255, 255, .55); border-top-color: #fff; border-radius: 50%; animation: ks-spin .7s linear infinite;
}
.ks-app .btn-outline-primary[aria-busy="true"]::after, .ks-app .btn-outline-secondary[aria-busy="true"]::after, .ks-app .btn-outline-danger[aria-busy="true"]::after, .ks-app .btn-link[aria-busy="true"]::after { border-color: rgba(var(--ks-primary-rgb), .25); border-top-color: var(--ks-primary); }
@keyframes ks-spin { to { transform: rotate(360deg); } }

/* Formularios */
.ks-app .form-label, .ks-auth .form-label { font-size: var(--ks-fs-label); font-weight: 600; color: #334155; margin-bottom: .3rem; }
.ks-app .form-label.small { font-size: .78rem; }
.ks-app .form-control, .ks-app .form-select, .ks-auth .form-control {
    border-color: var(--ks-border-strong); border-radius: var(--ks-radius-sm); color: var(--ks-text); background-color: var(--ks-surface);
}
.ks-app .form-control::placeholder, .ks-auth .form-control::placeholder { color: #94A3B8; }
.ks-app .form-control:focus, .ks-app .form-select:focus, .ks-app .form-check-input:focus,
.ks-auth .form-control:focus, .ks-auth .form-check-input:focus { border-color: var(--ks-accent); box-shadow: var(--ks-focus-ring); }
.ks-app .form-control:disabled, .ks-app .form-select:disabled, .ks-app .form-control[readonly] { background-color: var(--ks-surface-muted); }
.ks-app .form-check-input:checked, .ks-auth .form-check-input:checked { background-color: var(--ks-accent); border-color: var(--ks-accent); }
.ks-app .form-switch .form-check-input:focus { --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='rgba%2840, 120, 200, .6%29'/%3e%3c/svg%3e"); }
.ks-app .form-text { color: var(--ks-muted); font-size: .78rem; }
.ks-app .invalid-feedback, .ks-app .text-danger.small { font-size: .8rem; }
.ks-app .form-control.is-invalid, .ks-app .form-select.is-invalid { border-color: var(--ks-danger); }
.ks-app .input-group-text { background: var(--ks-surface-muted); border-color: var(--ks-border-strong); color: var(--ks-muted); }
.ks-app .form-control-sm, .ks-app .form-select-sm { border-radius: var(--ks-radius-sm); }

/* Tablas */
.ks-app .table {
    --bs-table-bg: var(--ks-surface);
    --bs-table-color: var(--ks-text);
    --bs-table-border-color: var(--ks-border);
    --bs-table-striped-bg: var(--ks-surface-muted);
    --bs-table-hover-bg: #F1F6FC;
    --bs-table-active-bg: var(--ks-soft);
    margin-bottom: 0;
    font-size: .875rem;
}
.ks-app .table > thead > tr > th, .ks-app .table > thead th {
    background: var(--ks-surface-muted); color: var(--ks-muted);
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    border-bottom-width: 1px; padding-top: .65rem; padding-bottom: .65rem; white-space: nowrap;
}
.ks-app .table > :not(caption) > * > * { padding: .6rem .8rem; }
.ks-app .table-sm > :not(caption) > * > * { padding: .45rem .65rem; }
.ks-app .table > tbody > tr:last-child > * { border-bottom-width: 0; }
.ks-app .table tfoot th, .ks-app .table tfoot td { background: var(--ks-surface-muted); font-weight: 650; }
.ks-app .card > .table-responsive, .ks-app .card > .table { border-radius: 0 0 var(--ks-radius-lg) var(--ks-radius-lg); }
.ks-app .table-responsive { -webkit-overflow-scrolling: touch; }

/* Insignias y estados */
.ks-app .badge { font-weight: 600; letter-spacing: .01em; padding: .35em .6em; border-radius: 999px; }
.ks-app .badge.text-bg-success { background-color: var(--ks-success-soft) !important; color: #0F7A4F !important; }
.ks-app .badge.text-bg-warning { background-color: var(--ks-warning-soft) !important; color: #8A5A0B !important; }
.ks-app .badge.text-bg-danger { background-color: var(--ks-danger-soft) !important; color: #B23434 !important; }
.ks-app .badge.text-bg-secondary, .ks-app .badge.text-bg-dark { background-color: var(--ks-info-soft) !important; color: #475569 !important; }
.ks-app .badge.text-bg-info { background-color: var(--ks-soft) !important; color: var(--ks-primary) !important; }
.ks-app .badge.text-bg-primary { background-color: var(--ks-primary) !important; color: #fff !important; }
.ks-app .badge.text-bg-light { background-color: var(--ks-surface-muted) !important; color: var(--ks-muted) !important; border: 1px solid var(--ks-border); }

/* Alertas y mensajes */
.ks-app .alert, .ks-auth .alert {
    --bs-alert-border-radius: var(--ks-radius);
    border: 1px solid transparent; border-left-width: 4px; font-size: .9rem;
}
.ks-app .alert-success, .ks-auth .alert-success { --bs-alert-bg: var(--ks-success-soft); --bs-alert-color: #0F5E3F; --bs-alert-border-color: rgba(var(--ks-success-rgb), .25); border-left-color: var(--ks-success); }
.ks-app .alert-warning, .ks-auth .alert-warning { --bs-alert-bg: var(--ks-warning-soft); --bs-alert-color: #6B4A0E; --bs-alert-border-color: rgba(var(--ks-warning-rgb), .3); border-left-color: var(--ks-warning); }
.ks-app .alert-danger, .ks-auth .alert-danger { --bs-alert-bg: var(--ks-danger-soft); --bs-alert-color: #8E2A2A; --bs-alert-border-color: rgba(var(--ks-danger-rgb), .25); border-left-color: var(--ks-danger); }
.ks-app .alert-info, .ks-auth .alert-info { --bs-alert-bg: var(--ks-soft); --bs-alert-color: var(--ks-primary); --bs-alert-border-color: #C7DBF0; border-left-color: var(--ks-accent); }
.ks-app .alert-secondary, .ks-app .alert-light, .ks-app .alert-dark { --bs-alert-bg: var(--ks-surface-muted); --bs-alert-color: #334155; --bs-alert-border-color: var(--ks-border); border-left-color: var(--ks-info); }

/* Paginación, menús, pestañas y listas */
.ks-app .pagination { --bs-pagination-color: var(--ks-primary); --bs-pagination-hover-color: var(--ks-primary); --bs-pagination-hover-bg: var(--ks-soft); --bs-pagination-active-bg: var(--ks-primary); --bs-pagination-active-border-color: var(--ks-primary); --bs-pagination-border-color: var(--ks-border); --bs-pagination-disabled-color: var(--ks-muted); --bs-pagination-border-radius: var(--ks-radius-sm); --bs-pagination-focus-box-shadow: var(--ks-focus-ring); }
.ks-app .dropdown-menu { --bs-dropdown-border-color: var(--ks-border); --bs-dropdown-border-radius: var(--ks-radius); --bs-dropdown-box-shadow: var(--ks-shadow-lg); --bs-dropdown-link-hover-bg: var(--ks-surface-muted); --bs-dropdown-link-active-bg: var(--ks-soft); --bs-dropdown-link-active-color: var(--ks-primary); --bs-dropdown-font-size: .9rem; box-shadow: var(--ks-shadow-lg); padding: .4rem; }
.ks-app .dropdown-item { border-radius: var(--ks-radius-sm); display: flex; align-items: center; gap: .55rem; }
.ks-app .nav-tabs { --bs-nav-tabs-border-color: var(--ks-border); --bs-nav-tabs-link-active-color: var(--ks-primary); --bs-nav-tabs-link-active-border-color: var(--ks-border) var(--ks-border) var(--ks-surface); }
.ks-app .nav-pills { --bs-nav-pills-link-active-bg: var(--ks-primary); }
.ks-app .btn-group > .btn.active, .ks-app .btn-check:checked + .btn { background: var(--ks-primary); border-color: var(--ks-primary); color: #fff; }
.ks-app .list-group { --bs-list-group-border-color: var(--ks-border); --bs-list-group-active-bg: var(--ks-primary); --bs-list-group-active-border-color: var(--ks-primary); }
.ks-app .list-group-item-warning { background: var(--ks-warning-soft); color: #6B4A0E; }

/* Ventanas modales y confirmaciones */
.ks-app .modal, .ks-auth .modal { --bs-modal-border-radius: var(--ks-radius-lg); --bs-modal-border-color: var(--ks-border); --bs-modal-box-shadow: var(--ks-shadow-lg); --bs-modal-header-border-color: var(--ks-border); --bs-modal-footer-border-color: var(--ks-border); }
.ks-app .modal-backdrop { --bs-backdrop-bg: #0F172A; --bs-backdrop-opacity: .45; }
.ks-confirm-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ks-warning-soft); color: #9A6510; margin-bottom: .75rem; }
.ks-confirm-icon .ks-icon { width: 1.4rem; height: 1.4rem; }
.ks-confirm-message { font-size: .95rem; color: var(--ks-text); margin: 0; }

/* Estados vacíos e indicadores */
.ks-empty { background: var(--ks-surface); border: 1px dashed var(--ks-border-strong); border-radius: var(--ks-radius-lg); padding: 2.25rem 1rem; text-align: center; color: var(--ks-muted); }
.ks-empty .ks-icon { width: 2rem; height: 2rem; color: #94A3B8; margin-bottom: .5rem; }
.ks-app .alert.alert-light.border { background: var(--ks-surface); border: 1px dashed var(--ks-border-strong) !important; border-left-width: 1px !important; text-align: center; color: var(--ks-muted); padding: 1.5rem 1rem; }
.ks-stat .ks-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--ks-primary); line-height: 1.1; letter-spacing: -.02em; }
.ks-stat .ks-stat-label { font-size: .82rem; color: var(--ks-muted); font-weight: 500; }
a.ks-stat:hover { box-shadow: var(--ks-shadow); border-color: var(--ks-border-strong); }
.ks-narrow { max-width: 560px; }
.ks-pre { white-space: pre-wrap; word-break: break-word; background: var(--ks-surface-muted); padding: .5rem; border-radius: var(--ks-radius-sm); border: 1px solid var(--ks-border); }
.ks-logo { font-weight: 800; font-size: 1.9rem; letter-spacing: -.5px; color: var(--ks-primary); }
.ks-logo span { color: var(--ks-accent); }
.ks-logo-sm { font-size: 1.3rem; }
.ks-max-sm { max-width: 420px; }
.ks-promo-input { max-width: 190px; }
/* Formularios de filtros: tarjetas con cabecera de filtros compacta */
.ks-app form.card.card-body { background: var(--ks-surface); }

/* Tablas → tarjetas en pantallas pequeñas (componente existente) */
@media (max-width: 767.98px) {
    .ks-table-stack thead { display: none; }
    .ks-table-stack, .ks-table-stack tbody, .ks-table-stack tr, .ks-table-stack td { display: block; width: 100%; }
    .ks-table-stack tr { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-radius); margin-bottom: .75rem; padding: .5rem .75rem; box-shadow: var(--ks-shadow-sm); }
    .ks-table-stack td { border: 0; padding: .25rem 0; text-align: left !important; }
    .ks-table-stack td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; color: var(--ks-muted); letter-spacing: .04em; font-weight: 600; }
}

/* -----------------------------------------------------------------------------
   6. Inicio de sesión y pantallas de acceso
   -------------------------------------------------------------------------- */
.ks-auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ks-auth-aside {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 2.5rem 3rem; background: var(--ks-primary); color: #fff;
}
.ks-auth-aside::after {
    content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
    border: 64px solid rgba(255, 255, 255, .05); pointer-events: none;
}
.ks-auth-brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.ks-auth-brand .ks-wordmark { color: #fff; font-size: 1.45rem; }
.ks-auth-aside .ks-brand-mark { border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.ks-auth-brand .ks-wordmark span { color: #8FC1EE; }
.ks-auth-pitch { position: relative; z-index: 1; max-width: 460px; }
.ks-auth-pitch h2 { font-size: 1.9rem; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; margin-bottom: .9rem; color: #fff; }
.ks-auth-pitch p { color: rgba(255, 255, 255, .78); font-size: 1rem; margin-bottom: 1.5rem; }
.ks-auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.ks-auth-points li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255, 255, 255, .9); font-size: .95rem; }
.ks-auth-points .ks-icon { width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: #8FC1EE; }
.ks-auth-foot { position: relative; z-index: 1; color: rgba(255, 255, 255, .6); font-size: .8rem; }
.ks-auth-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--ks-background); }
.ks-auth-panel { width: 100%; max-width: 420px; }
.ks-auth-mobile-brand { display: none; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.5rem; text-decoration: none; }
.ks-auth-card { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-radius-lg); box-shadow: var(--ks-shadow); padding: 2rem; }
.ks-auth-title { font-size: 1.5rem; font-weight: 750; letter-spacing: -.015em; margin: 0 0 .35rem; color: var(--ks-text); }
.ks-auth-subtitle { color: var(--ks-muted); margin: 0 0 1.5rem; font-size: .95rem; }
.ks-input-icon { position: relative; }
.ks-input-icon > .ks-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #94A3B8; pointer-events: none; }
.ks-input-icon > .form-control { padding-left: 2.6rem; min-height: 46px; }
.ks-input-icon > .form-control.ks-has-toggle { padding-right: 3rem; }
.ks-pass-toggle {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border: 0; border-radius: var(--ks-radius-sm);
    display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ks-muted);
}
.ks-pass-toggle:hover { background: var(--ks-surface-muted); color: var(--ks-primary); }
.ks-pass-toggle:focus-visible { outline: 0; box-shadow: var(--ks-focus-ring); }
.ks-pass-toggle .ks-i-eyeoff { display: none; }
.ks-pass-toggle[aria-pressed="true"] .ks-i-eye { display: none; }
.ks-pass-toggle[aria-pressed="true"] .ks-i-eyeoff { display: inline; }
.ks-auth .btn-primary.btn-lg { min-height: 48px; }
.ks-auth-links { display: flex; justify-content: space-between; align-items: center; margin: -.35rem 0 1.1rem; font-size: .85rem; }
.ks-auth-links a { color: var(--ks-accent); font-weight: 600; text-decoration: none; }
.ks-auth-links a:hover { text-decoration: underline; }
.ks-auth-legal { text-align: center; color: var(--ks-muted); font-size: .78rem; margin-top: 1.5rem; }
/* Compatibilidad con pantallas de acceso que conservan su marcado anterior */
.ks-auth-bg { background: var(--ks-background); min-height: 100vh; }
.ks-auth .ks-auth-card .h5, .ks-auth .ks-auth-card h1.h5 { font-size: 1.3rem; font-weight: 700; }

/* -----------------------------------------------------------------------------
   7. Panel principal (Inicio)
   -------------------------------------------------------------------------- */
.ks-welcome { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.ks-welcome h1 { font-size: 1.6rem; font-weight: 750; margin: 0; letter-spacing: -.02em; }
.ks-welcome-meta { color: var(--ks-muted); font-size: .9rem; margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.ks-welcome-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.ks-kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 1.5rem; }
.ks-kpi {
    display: flex; gap: .9rem; align-items: flex-start;
    background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-radius-lg);
    padding: 1rem 1.1rem; box-shadow: var(--ks-shadow-sm); color: var(--ks-text); text-decoration: none;
}
a.ks-kpi:hover { border-color: var(--ks-border-strong); box-shadow: var(--ks-shadow); color: var(--ks-text); text-decoration: none; }
.ks-kpi-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--ks-radius); display: inline-flex; align-items: center; justify-content: center; background: var(--ks-soft); color: var(--ks-accent); }
.ks-kpi-icon .ks-icon { width: 1.3rem; height: 1.3rem; }
.ks-kpi-icon.is-success { background: var(--ks-success-soft); color: var(--ks-success); }
.ks-kpi-icon.is-warning { background: var(--ks-warning-soft); color: #B07A16; }
.ks-kpi-icon.is-danger { background: var(--ks-danger-soft); color: var(--ks-danger); }
.ks-kpi-value { font-size: 1.45rem; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; color: var(--ks-primary); white-space: nowrap; }
.ks-kpi-label { font-size: .82rem; color: var(--ks-muted); font-weight: 500; }
.ks-quick { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ks-quick a {
    display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem;
    border: 1px solid var(--ks-border); border-radius: var(--ks-radius); background: var(--ks-surface);
    color: var(--ks-text); font-weight: 600; font-size: .9rem; text-decoration: none;
}
.ks-quick a .ks-icon { color: var(--ks-accent); width: 1.25rem; height: 1.25rem; }
.ks-quick a:hover { border-color: var(--ks-accent); background: var(--ks-soft); color: var(--ks-primary); text-decoration: none; }
.ks-activity { list-style: none; margin: 0; padding: 0; }
.ks-activity li { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem 1.15rem; border-bottom: 1px solid var(--ks-border); font-size: .875rem; }
.ks-activity li:last-child { border-bottom: 0; }
.ks-activity-time { color: var(--ks-muted); font-size: .8rem; white-space: nowrap; }

/* -----------------------------------------------------------------------------
   8. Módulos: estilos existentes conservados (recibo interno A4/legacy, pagos)
   -------------------------------------------------------------------------- */
.ks-print-body { background: #fff; }
.ks-receipt { max-width: 420px; padding: 0 12px; font-size: .9rem; position: relative; }
.ks-receipt-logo { max-height: 80px; max-width: 220px; object-fit: contain; }
.ks-receipt-table th, .ks-receipt-table td, .ks-receipt-totals th, .ks-receipt-totals td { padding: .2rem .25rem; }
.ks-receipt-void { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 3rem; font-weight: 700; color: rgba(200, 0, 0, .25); transform: rotate(-20deg); pointer-events: none; }
details.card > summary { cursor: pointer; }
@media print {
    .ks-receipt { max-width: none; margin: 0 !important; padding: 0; }
    @page { margin: 6mm; }
}
.ks-pay-summary { background: var(--ks-surface-muted); border-color: var(--ks-border) !important; }
.ks-pay-charge { color: var(--ks-primary); }

/* -----------------------------------------------------------------------------
   9. Agenda: tarjetas y estados de reserva (colores consistentes)
   -------------------------------------------------------------------------- */
.ks-ap-columns, .ks-ap-week { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ks-ap-week { grid-template-columns: repeat(7, minmax(160px, 1fr)); overflow-x: auto; padding-bottom: .25rem; }
.ks-ap-col { background: var(--ks-surface-muted); border: 1px solid var(--ks-border); border-radius: var(--ks-radius-lg); padding: .65rem; min-width: 0; }
.ks-ap-col > .h6, .ks-ap-col > h2 { font-size: .85rem; font-weight: 700; color: var(--ks-primary); margin: .15rem .2rem .6rem; }
.ks-ap {
    display: flex; flex-direction: column; gap: 2px; margin-bottom: .5rem; padding: .55rem .7rem;
    border: 1px solid var(--ks-border); border-left: 4px solid var(--ks-ap-c, var(--ks-info)); border-radius: var(--ks-radius);
    background: var(--ks-surface); color: var(--ks-text); font-size: .82rem; text-decoration: none; box-shadow: var(--ks-shadow-sm);
}
.ks-ap:hover { box-shadow: var(--ks-shadow); color: var(--ks-text); border-color: var(--ks-border-strong); border-left-color: var(--ks-ap-c, var(--ks-info)); }
.ks-ap strong { font-size: .88rem; }
.ks-ap-time { font-weight: 700; color: var(--ks-primary); font-size: .78rem; letter-spacing: .01em; }
.ks-ap-money { color: var(--ks-muted); font-size: .76rem; }
.ks-ap-badge { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 650; background: var(--ks-soft); color: var(--ks-primary); }
.ks-ap .ks-ap-badge, span.ks-ap-badge[class*="ks-ap-"] { background: var(--ks-ap-c, var(--ks-info)); color: #fff; }
.ks-ap-legend { display: flex; flex-wrap: wrap; gap: .45rem 1rem; font-size: .78rem; color: var(--ks-muted); }
.ks-ap-dot::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 3px; vertical-align: -1px; background: var(--ks-ap-c, var(--ks-info)); }
.ks-ap-pending           { --ks-ap-c: var(--ks-st-pending); }
.ks-ap-deposit_pending   { --ks-ap-c: var(--ks-st-deposit-pending); }
.ks-ap-confirmed         { --ks-ap-c: var(--ks-st-confirmed); }
.ks-ap-confirmed_deposit { --ks-ap-c: var(--ks-st-confirmed-deposit); }
.ks-ap-in_progress       { --ks-ap-c: var(--ks-st-in-progress); }
.ks-ap-completed         { --ks-ap-c: var(--ks-st-completed); }
.ks-ap-cancelled         { --ks-ap-c: var(--ks-st-cancelled); }
.ks-ap-no_show           { --ks-ap-c: var(--ks-st-no-show); }
.ks-ap-rescheduled       { --ks-ap-c: var(--ks-st-rescheduled); }
.ks-ap.ks-ap-cancelled   { opacity: .82; }
.ks-ap.ks-ap-cancelled strong { text-decoration: line-through; text-decoration-color: rgba(var(--ks-text-rgb), .45); }
.ks-ap-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ks-ap-mhead { font-size: .72rem; font-weight: 700; text-align: center; color: var(--ks-muted); text-transform: uppercase; letter-spacing: .05em; padding-bottom: .25rem; }
.ks-ap-mday { min-height: 98px; padding: 6px; border: 1px solid var(--ks-border); border-radius: var(--ks-radius); background: var(--ks-surface); color: var(--ks-text); text-decoration: none; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.ks-ap-mday:hover { border-color: var(--ks-accent); background: #FBFDFF; color: var(--ks-text); }
.ks-ap-mday strong { font-size: .8rem; color: var(--ks-primary); }
.ks-ap-mday.ks-ap-empty { background: transparent; border-color: transparent; }
.ks-ap-mini { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--ks-ap-c, var(--ks-info)); padding-left: 4px; }
.ks-ap-list > div { padding: .1rem 0; }

/* -----------------------------------------------------------------------------
   10. Ticket térmico de 80 mm — PROTEGIDO
       Copia literal de la versión aprobada «Encabezado compacto v5»
       (logotipo máx. 50 × 55 mm, colores originales, margen -4 mm).
       NO modificar sin autorización.
   -------------------------------------------------------------------------- */
.ks-ticket-body { margin: 0; background: #e9ecef; color: #000; font-family: Arial, Helvetica, sans-serif; }
.ks-ticket { box-sizing: border-box; width: 80mm; margin: 0 auto 24px; padding: 4mm; background: #fff; font-size: 11.5px; line-height: 1.3; color: #000; }
.ks-ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px; }
.ks-tbtn { display: inline-block; padding: 8px 14px; border: 1px solid #343a40; border-radius: 6px; background: #fff; color: #000; font: 600 13px Arial, Helvetica, sans-serif; text-decoration: none; cursor: pointer; }
.ks-tbtn-primary { background: #212529; color: #fff; }
.ks-t-center { text-align: center; }
.ks-t-logo { display: block; width: auto; height: auto; max-width: 50mm; max-height: 55mm; margin: 0 auto -4mm; object-fit: contain; filter: none; image-rendering: auto; }
.ks-t-brand { font-size: 15px; font-weight: 700; }
.ks-t-small { font-size: 10.5px; }
.ks-t-strong { font-weight: 700; }
.ks-t-block { margin-top: 4px; }
.ks-t-sep { border: 0; border-top: 1px dashed #000; margin: 6px 0; opacity: 1; }
.ks-t-row { display: flex; justify-content: space-between; gap: 6px; }
.ks-t-row > span:last-child { white-space: nowrap; text-align: right; }
.ks-t-item { margin-bottom: 4px; }
.ks-t-indent { padding-left: 3mm; }
.ks-t-total { font-size: 15px; font-weight: 700; margin-top: 2px; }
.ks-t-balance { font-size: 13px; }
.ks-t-thanks { font-size: 14px; font-weight: 700; margin-top: 4px; }
@media print {
    @page { margin: 0; }
    html, body.ks-ticket-body { width: 80mm; margin: 0; padding: 0; background: #fff; }
    .ks-ticket-actions { display: none !important; }
    .ks-ticket { width: 80mm; margin: 0; padding: 3mm 4mm; box-shadow: none; }
    .ks-ticket * { color: #000 !important; background: transparent !important; }
    .ks-t-item, .ks-t-row { break-inside: avoid; page-break-inside: avoid; }
}

/* -----------------------------------------------------------------------------
   11. Diseño adaptable
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ks-content { padding: 1.25rem 1.25rem 2rem; }
}
/* Tableta y móvil: menú como panel lateral desplegable */
@media (max-width: 991.98px) {
    .ks-sidebar { width: min(86vw, 300px); transform: translateX(-100%); box-shadow: none; }
    html.ks-sidebar-open .ks-sidebar { transform: translateX(0); box-shadow: var(--ks-shadow-lg); }
    html.ks-sidebar-collapsed .ks-sidebar { width: min(86vw, 300px); }
    html.ks-sidebar-collapsed .ks-wordmark, html.ks-sidebar-collapsed .ks-nav-text, html.ks-sidebar-collapsed .ks-nav-label { display: initial; }
    html.ks-sidebar-collapsed .ks-nav-label { display: block; }
    html.ks-sidebar-collapsed .ks-nav-link { justify-content: flex-start; padding: .5rem .75rem; }
    html.ks-sidebar-collapsed .ks-sidebar-brand { justify-content: flex-start; padding: 0 1.1rem; }
    html.ks-sidebar-collapsed .ks-nav-group { border-bottom: 0; }
    html.ks-sidebar-collapsed .ks-nav-link:hover::after { display: none; }
    .ks-main, html.ks-sidebar-collapsed .ks-main { margin-left: 0; }
    .ks-sidebar-footer { display: none; }
    .ks-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(15, 23, 42, .45); }
    html.ks-sidebar-open .ks-backdrop { display: block; }
    html.ks-sidebar-open, html.ks-sidebar-open body { overflow: hidden; }
    .ks-ap-week { grid-template-columns: repeat(7, minmax(150px, 1fr)); }
}
@media (max-width: 767.98px) {
    :root { --ks-topbar-h: 56px; }
    .ks-topbar { padding: 0 .75rem; gap: .5rem; }
    .ks-content { padding: 1rem .85rem 1.75rem; }
    .ks-chip { max-width: 140px; }
    .ks-user-name { display: none; }
    .ks-user-btn { padding: .2rem; }
    .ks-app h1, .ks-app .h3, .ks-page-title { font-size: 1.3rem; }
    .ks-app .btn { min-height: 40px; }
    .ks-app .btn-sm { min-height: 34px; }
    .ks-app .form-control, .ks-app .form-select { min-height: 42px; font-size: 16px; } /* evita el zoom en iOS */
    .ks-app .form-control-sm, .ks-app .form-select-sm { min-height: 36px; font-size: 15px; }
    .ks-app .table { font-size: .82rem; }
    .ks-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .ks-kpi { padding: .8rem; gap: .6rem; }
    .ks-kpi-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .ks-kpi-value { font-size: 1.25rem; }
    .ks-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ks-ap-week { grid-template-columns: 1fr; overflow-x: visible; }
    .ks-ap-mday { min-height: 58px; }
    .ks-ap-mini { display: none; }
    /* Auth: una sola columna, marca superior */
    .ks-auth-shell { grid-template-columns: 1fr; }
    .ks-auth-aside { display: none; }
    .ks-auth-mobile-brand { display: flex; }
    .ks-auth-main { padding: 1.75rem 1rem; align-items: flex-start; }
    .ks-auth-card { padding: 1.5rem 1.25rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    .ks-auth-shell { grid-template-columns: 1fr 1fr; }
    .ks-auth-aside { padding: 2rem; }
    .ks-auth-pitch h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ks-sidebar, .ks-main { transition: none; }
    .ks-app .btn[aria-busy="true"]::after, .ks-auth .btn[aria-busy="true"]::after { animation-duration: 1.5s; }
}
/* La aplicación nunca se imprime con su estructura (los recibos tienen su propio diseño) */
@media print {
    .ks-app .ks-sidebar, .ks-app .ks-topbar, .ks-app .ks-backdrop { display: none !important; }
    .ks-app .ks-main { margin-left: 0 !important; }
}

/* Fase 4 · miniaturas en la administración del portal */
.ks-portal-thumb { max-height: 80px; max-width: 220px; object-fit: contain; display: block; }

/* -----------------------------------------------------------------------------
   12. Fase 4 · App móvil del personal (PWA)
   -------------------------------------------------------------------------- */
body.ks-mobile { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
.ks-m-top { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .6rem; height: 56px; padding: 0 .75rem; padding-top: env(safe-area-inset-top, 0px); background: var(--ks-surface); border-bottom: 1px solid var(--ks-border); }
.ks-m-mark { width: 30px; height: 30px; }
.ks-m-title { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.ks-m-title span { display: block; font-weight: 700; font-size: 1rem; }
.ks-m-title small { display: block; color: var(--ks-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-m-top .ks-icon-btn { position: relative; }
.ks-m-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ks-danger); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
.ks-m-content { max-width: 720px; margin: 0 auto; padding: .9rem .85rem 1.5rem; }
.ks-m-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: var(--ks-surface); border-top: 1px solid var(--ks-border); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ks-m-tabs a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; color: var(--ks-muted); font-size: .72rem; font-weight: 600; text-decoration: none; }
.ks-m-tabs a .ks-icon { width: 1.35rem; height: 1.35rem; }
.ks-m-tabs a.active { color: var(--ks-primary); }
.ks-m-tabs a.active .ks-icon { color: var(--ks-accent); }
.ks-m-tabs a:hover { text-decoration: none; color: var(--ks-primary); }
.ks-m-daybar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.ks-m-daybar .ks-icon-btn { font-size: 1.5rem; border-color: var(--ks-border); }
.ks-m-filters { display: flex; gap: .4rem; margin-bottom: .8rem; }
.ks-m-filters .form-select { min-width: 0; }
.ks-m-appt { display: flex; gap: .75rem; padding: .7rem .8rem; margin-bottom: .55rem; background: var(--ks-surface); border: 1px solid var(--ks-border); border-left: 4px solid var(--ks-ap-c, var(--ks-info)); border-radius: var(--ks-radius); color: var(--ks-text); text-decoration: none; box-shadow: var(--ks-shadow-sm); }
.ks-app a.ks-m-appt:hover { text-decoration: none; color: var(--ks-text); border-color: var(--ks-border-strong); border-left-color: var(--ks-ap-c, var(--ks-info)); }
.ks-m-time { flex: 0 0 52px; font-weight: 800; color: var(--ks-primary); font-size: 1rem; line-height: 1.1; }
.ks-m-time small { display: block; font-weight: 500; color: var(--ks-muted); font-size: .72rem; }
.ks-m-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .88rem; }
.ks-m-body .ks-ap-badge { background: var(--ks-ap-c, var(--ks-info)); color: #fff; }
.ks-m-dayhead { font-size: .9rem; font-weight: 700; margin: 1rem 0 .45rem; }
.ks-m-dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem; font-size: .88rem; }
.ks-m-dl dt { color: var(--ks-muted); font-weight: 500; }
.ks-m-dl dd { margin: 0; }
.ks-m-notif { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: .75rem 1rem; border: 0; background: transparent; text-align: left; color: var(--ks-text); font-size: .88rem; }
.ks-m-notif small { color: var(--ks-muted); }
.ks-m-notif.unread { background: var(--ks-soft); }
.ks-m-notif.unread strong::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ks-accent); margin-right: .4rem; vertical-align: middle; }
@media (min-width: 768px) { .ks-m-tabs { left: 50%; right: auto; width: 720px; transform: translateX(-50%); border-left: 1px solid var(--ks-border); border-right: 1px solid var(--ks-border); } }

/* -----------------------------------------------------------------------------
   13. Fase 4.0.3 · Notificaciones: campana, toasts y centro
   -------------------------------------------------------------------------- */
.ks-bell { margin-left: auto; margin-right: .25rem; }
.ks-bell .ks-icon-btn { position: relative; }
.ks-bell-count, .ks-m-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ks-danger); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
.ks-bell-menu { width: min(380px, 92vw); padding: 0; overflow: hidden; }
.ks-bell-head { display: flex; justify-content: space-between; align-items: center; padding: .65rem .9rem; border-bottom: 1px solid var(--ks-border); }
.ks-bell-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.ks-bell-item a { display: flex; gap: .6rem; padding: .6rem .9rem; color: var(--ks-text); text-decoration: none; border-left: 3px solid transparent; }
.ks-app .ks-bell-item a:hover { background: var(--ks-soft); text-decoration: none; color: var(--ks-text); }
.ks-bell-item.unread a { background: var(--ks-soft); }
.ks-bell-text { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; }
.ks-bell-text span { color: var(--ks-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-bell-empty { padding: 1rem .9rem; color: var(--ks-muted); font-size: .85rem; }
.ks-bell-foot { display: block; padding: .6rem .9rem; border-top: 1px solid var(--ks-border); text-align: center; font-size: .85rem; font-weight: 600; }

/* Prioridades: alta (rojo), normal (azul), baja (gris). También con texto, no sólo color. */
.ks-nt-p2 { --ks-nt-c: var(--ks-danger); }
.ks-nt-p1 { --ks-nt-c: var(--ks-accent); }
.ks-nt-p0 { --ks-nt-c: var(--ks-muted); }
.ks-bell-item a, .ks-nt-item, .ks-toast { border-left-color: var(--ks-nt-c, var(--ks-accent)); }
.ks-nt-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ks-soft); color: var(--ks-nt-c, var(--ks-accent)); }
.ks-nt-icon .ks-icon { width: 1.05rem; height: 1.05rem; }

/* Centro de notificaciones */
.ks-nt-list { list-style: none; margin: 0; padding: 0; }
.ks-nt-item { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--ks-border); border-left: 4px solid var(--ks-nt-c); }
.ks-nt-item:last-child { border-bottom: 0; }
.ks-nt-item.unread { background: var(--ks-soft); }
.ks-nt-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ks-text); text-decoration: none; }
.ks-app a.ks-nt-main:hover { text-decoration: none; color: var(--ks-text); }
.ks-nt-title { font-weight: 700; font-size: .92rem; }
.ks-nt-item.unread .ks-nt-title::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ks-accent); margin-right: .4rem; vertical-align: middle; }
.ks-nt-badge { margin-left: .4rem; padding: 1px 7px; border-radius: 999px; background: var(--ks-danger); color: #fff; font-size: .68rem; font-weight: 700; vertical-align: middle; }
.ks-nt-meta { color: var(--ks-muted); font-size: .82rem; overflow-wrap: anywhere; }
.ks-nt-time { color: var(--ks-muted); font-size: .75rem; }
.ks-nt-mark .btn { padding: .25rem; color: var(--ks-muted); }

/* Toasts flotantes: discretos, se cierran solos (permanecen en el centro) */
.ks-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.ks-toasts-mobile { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; left: .75rem; right: .75rem; width: auto; }
.ks-toast { pointer-events: auto; display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .75rem; background: var(--ks-surface); border: 1px solid var(--ks-border); border-left: 4px solid var(--ks-nt-c); border-radius: var(--ks-radius); box-shadow: 0 10px 30px rgba(15, 35, 64, .16); animation: ks-toast-in .25s ease-out; transition: opacity .35s, transform .35s; }
.ks-toast.leaving { opacity: 0; transform: translateY(6px); }
.ks-toast-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; color: var(--ks-text); text-decoration: none; font-size: .85rem; }
.ks-app a.ks-toast-body:hover { text-decoration: none; color: var(--ks-text); }
.ks-toast-body span { color: var(--ks-muted); font-size: .8rem; overflow-wrap: anywhere; }
.ks-toast-close { border: 0; background: transparent; color: var(--ks-muted); padding: 2px; line-height: 1; }
@keyframes ks-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ks-toast { animation: none; transition: none; } }

/* -----------------------------------------------------------------------------
   14. Fase 5 · Consulta DNI/RUC en formularios y panel de consumo
   -------------------------------------------------------------------------- */
.ks-idl { margin-top: -.25rem; }
.ks-idl .btn .ks-icon { width: 1rem; height: 1rem; margin-right: .3rem; vertical-align: -2px; }
.ks-idl-state { font-size: .82rem; }
.ks-idl-state::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; background: transparent; }
.ks-idl-ok { color: var(--ks-success, #1E7B4F); } .ks-idl-ok::before { background: var(--ks-success, #1E7B4F); }
.ks-idl-warn { color: #8A5A00; } .ks-idl-warn::before { background: var(--ks-warning); }
.ks-idl-error { color: var(--ks-danger); } .ks-idl-error::before { background: var(--ks-danger); }
.ks-idl-busy { color: var(--ks-muted); } .ks-idl-busy::before { background: var(--ks-accent); animation: ks-idl-pulse 1s ease-in-out infinite; }
@keyframes ks-idl-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ks-idl-busy::before { animation: none; } }
.ks-idl-result { margin-top: .5rem; padding: .75rem .9rem; border: 1px solid var(--ks-border); border-left: 4px solid var(--ks-accent); border-radius: var(--ks-radius); background: var(--ks-soft); }
.ks-idl-head { margin-bottom: .35rem; overflow-wrap: anywhere; }
.ks-idl-fields .form-check { margin-bottom: .25rem; font-size: .88rem; }
.ks-idl-fields .form-check-label { overflow-wrap: anywhere; }
.ks-w-0 { width: 0%; }
.ks-w-5 { width: 5%; }
.ks-w-10 { width: 10%; }
.ks-w-15 { width: 15%; }
.ks-w-20 { width: 20%; }
.ks-w-25 { width: 25%; }
.ks-w-30 { width: 30%; }
.ks-w-35 { width: 35%; }
.ks-w-40 { width: 40%; }
.ks-w-45 { width: 45%; }
.ks-w-50 { width: 50%; }
.ks-w-55 { width: 55%; }
.ks-w-60 { width: 60%; }
.ks-w-65 { width: 65%; }
.ks-w-70 { width: 70%; }
.ks-w-75 { width: 75%; }
.ks-w-80 { width: 80%; }
.ks-w-85 { width: 85%; }
.ks-w-90 { width: 90%; }
.ks-w-95 { width: 95%; }
.ks-w-100 { width: 100%; }