/* ==========================================================================
   tkh-theme.css — sistema de diseño THEKEYHOST (rama rediseno-ui)
   Se carga el último en <head> (después de bootstrap y custom.css) en las
   tres ciudades. Solo presentación: no renombra ni oculta ids/clases usados
   por el JS. Las clases nuevas llevan prefijo tkh-.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Marca (se mantienen los de custom.css) */
    --tkh-primary: #384365;
    --tkh-primary-dark: #0e1f54;
    --tkh-primary-light: #797f92;
    --tkh-primary-tint: #eef1f8;
    --tkh-text: #2d3748;
    --tkh-text-muted: #5a6478;      /* AA sobre blanco y sobre --tkh-bg */

    /* Semánticos */
    --tkh-danger: #c81e2c;          /* rojo de marca oscurecido para AA con texto blanco */
    --tkh-danger-tint: #fdecee;
    --tkh-success: #1f7a4d;
    --tkh-success-tint: #e6f4ec;
    --tkh-warning: #b7791f;
    --tkh-warning-text: #8a5a14;    /* texto de aviso sobre fondo claro (AA) */
    --tkh-warning-tint: #fdf4e3;
    --tkh-info: #2b6cb0;
    --tkh-info-tint: #e8f1fb;

    /* Neutros */
    --tkh-bg: #f5f7fb;
    --tkh-surface: #ffffff;
    --tkh-surface-alt: #f8fafc;
    /* Calendario: fondo atenuado (el blanco puro deslumbraba en pantallas grandes) */
    --tkh-cal-bg: #e9edf2;
    --tkh-cal-hora-bg: #e1e6ed;
    --tkh-cal-line: #d3dae3;
    --tkh-cal-dia-bg: #f1f4f7;
    --tkh-line: #e2e8f0;
    --tkh-line-strong: #cbd5e0;

    /* Estados de tarea */
    --tkh-st-pendiente: #64748b;
    --tkh-st-pendiente-tint: #eef1f5;
    --tkh-st-iniciada: #b7791f;
    --tkh-st-iniciada-tint: #fdf4e3;
    --tkh-st-iniciada-text: #8a5a14;
    --tkh-st-finalizada: #1f7a4d;
    --tkh-st-finalizada-tint: #e6f4ec;
    --tkh-st-borrada: #9b2c2c;
    --tkh-st-borrada-tint: #fbeaea;

    /* Tipografía */
    --tkh-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tkh-fs-xs: 12px;
    --tkh-fs-sm: 14px;
    --tkh-fs-md: 16px;
    --tkh-fs-lg: 20px;
    --tkh-fs-xl: 24px;

    /* Espaciado (escala de 4 px) */
    --tkh-sp-1: 4px;
    --tkh-sp-2: 8px;
    --tkh-sp-3: 12px;
    --tkh-sp-4: 16px;
    --tkh-sp-5: 20px;
    --tkh-sp-6: 24px;
    --tkh-sp-8: 32px;

    /* Formas */
    --tkh-radius: 8px;
    --tkh-radius-lg: 12px;
    --tkh-radius-pill: 999px;
    --tkh-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --tkh-shadow-md: 0 4px 10px rgba(15, 23, 42, .08);
    --tkh-shadow-lg: 0 12px 28px rgba(15, 23, 42, .14);
    --tkh-focus: 0 0 0 3px rgba(43, 108, 176, .45);

    /* Layout */
    --tkh-nav-h: 65px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body { background-color: var(--tkh-bg); color: var(--tkh-text); }
.number, .tkh-num, td.text-right, .importe { font-variant-numeric: tabular-nums; }

/* Foco visible solo con teclado */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible {
    outline: none !important;
    box-shadow: var(--tkh-focus) !important;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Nunca scroll horizontal de página: lo ancho va en su propio contenedor */
.tkh-scroll-x, .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Título de página sobre fondo claro */
.tkh-page-title { color: var(--tkh-primary-dark) !important; font-size: var(--tkh-fs-xl); font-weight: 700; margin: var(--tkh-sp-4) 0; }

/* --------------------------------------------------------------------------
   3. NAVBAR (gest)
   -------------------------------------------------------------------------- */
.nav-container nav.navbar-fixed-top { min-height: var(--tkh-nav-h); box-shadow: 0 2px 12px rgba(14, 31, 84, .18) !important; }

/* Escritorio medio: compacta el menú para que no parta en dos filas */
@media (min-width: 992px) and (max-width: 1360px) {
    .nav-container .menu > li { margin-right: 4px; }
    .nav-container ul.menu > li > a { padding: 8px 10px !important; font-size: 13px !important; }
    .nav-container .has-dropdown { padding-right: 12px; }
}
@media (min-width: 992px) and (max-width: 1180px) {
    .nav-container ul.menu > li > a { padding: 8px 7px !important; font-size: 12.5px !important; }
    .nav-container nav.navbar-fixed-top > .module.left { padding-left: 12px !important; }
    .nav-container nav.navbar-fixed-top > .module.left img { max-height: 36px !important; }
}
.nav-container ul.menu > li > ul > li.tkh-sep { border-top: 1px solid var(--tkh-line) !important; }

/* Móvil: objetivos táctiles ≥ 40 px */
@media (max-width: 991px) {
    #main-navigation ul.menu > li > a,
    #main-navigation ul.menu > li > ul > li > a,
    #main-navigation ul.menu > li > ul form a { min-height: 44px; }
    .mobile-toggle { min-width: 44px; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   4. TARJETAS Y PANELES
   -------------------------------------------------------------------------- */
.tkh-card, .panel-white, .panel-primary, .panel-primary-dark, .panel-dark {
    border-radius: var(--tkh-radius-lg);
    box-shadow: var(--tkh-shadow-sm);
}
.tkh-card { background: var(--tkh-surface); border: 1px solid var(--tkh-line); padding: var(--tkh-sp-4); }

/* --------------------------------------------------------------------------
   5. BOTONES
   Variantes nuevas (tkh-btn-*); las .btn existentes solo ganan radio y colores.
   -------------------------------------------------------------------------- */
.btn, .btn-primary, input[type="submit"], button[type="submit"] { border-radius: var(--tkh-radius); }

.tkh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 var(--tkh-sp-4); border-radius: var(--tkh-radius); border: 1px solid transparent;
    font: 600 var(--tkh-fs-sm)/1 var(--tkh-font); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.tkh-btn-primary { background: var(--tkh-primary); color: #fff !important; }
.tkh-btn-primary:hover { background: var(--tkh-primary-dark); }
.tkh-btn-secondary { background: var(--tkh-surface); color: var(--tkh-primary) !important; border-color: var(--tkh-line-strong); }
.tkh-btn-secondary:hover { background: var(--tkh-primary-tint); border-color: var(--tkh-primary-light); }
.tkh-btn-danger { background: var(--tkh-danger); color: #fff !important; }
.tkh-btn-danger:hover { background: #a3141f; }
.tkh-btn-ghost { background: transparent; color: var(--tkh-primary) !important; }
.tkh-btn-ghost:hover { background: var(--tkh-primary-tint); }

.btn-danger { background-color: var(--tkh-danger); border-color: var(--tkh-danger); }
.btn-success { background-color: var(--tkh-success); border-color: var(--tkh-success); }

/* --------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus,
input[type="time"]:focus, input[type="email"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
    border-color: var(--tkh-info) !important;
    box-shadow: var(--tkh-focus) !important;
    outline: none;
}
::placeholder { color: #7a8599; opacity: 1; }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border-color: var(--tkh-line-strong); border-radius: var(--tkh-radius); }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--tkh-info); box-shadow: var(--tkh-focus); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tkh-primary); }
.select2-dropdown { border-color: var(--tkh-line-strong); border-radius: var(--tkh-radius); box-shadow: var(--tkh-shadow-md); }

/* --------------------------------------------------------------------------
   7. CHIPS DE ESTADO DE TAREA
   -------------------------------------------------------------------------- */
.tkh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--tkh-radius-pill);
    font-size: var(--tkh-fs-xs); font-weight: 700; line-height: 20px; white-space: nowrap; border: 1px solid transparent; }
.tkh-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.tkh-estado--pendiente  { background: var(--tkh-st-pendiente-tint) !important;  color: var(--tkh-st-pendiente) !important;     border-color: #d5dbe4; }
.tkh-estado--iniciada   { background: var(--tkh-st-iniciada-tint) !important;   color: var(--tkh-st-iniciada-text) !important; border-color: #f0d9a8; }
.tkh-estado--finalizada { background: var(--tkh-st-finalizada-tint) !important; color: var(--tkh-st-finalizada) !important;    border-color: #b9dfc9; }
.tkh-estado--borrada    { background: var(--tkh-st-borrada-tint) !important;    color: var(--tkh-st-borrada) !important;       border-color: #efc4c4; text-decoration: line-through; }

/* --------------------------------------------------------------------------
   8. TABLAS
   -------------------------------------------------------------------------- */
.table > thead > tr > th, table.dataTable thead th {
    background: var(--tkh-surface-alt); color: var(--tkh-text-muted); font-size: var(--tkh-fs-xs);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700; border-bottom: 1px solid var(--tkh-line) !important;
}
.table > tbody > tr > td, .table > tbody > tr > th { border-top-color: var(--tkh-line); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafbfd; }
.table-hover > tbody > tr:hover, table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: var(--tkh-primary-tint); }

/* Contenedor con scroll propio y cabecera fija */
.tkh-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--tkh-line); border-radius: var(--tkh-radius); background: var(--tkh-surface); }
.tkh-table-sticky thead th { position: sticky; top: 0; z-index: 2; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--tkh-line-strong); border-radius: var(--tkh-radius);
}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background-color: var(--tkh-primary); border-color: var(--tkh-primary); }
.pagination > li > a, .pagination > li > span { color: var(--tkh-primary); }

/* --------------------------------------------------------------------------
   9. MODALES Y FICHAS
   -------------------------------------------------------------------------- */
.modal-content { border: none; border-radius: var(--tkh-radius-lg); box-shadow: var(--tkh-shadow-lg); overflow: hidden; }
.modal-backdrop.in { opacity: .45; }

/* --------------------------------------------------------------------------
   10. FILTROS, VACÍO Y CARGA
   -------------------------------------------------------------------------- */
.tkh-filtros { display: flex; flex-wrap: wrap; gap: var(--tkh-sp-2) var(--tkh-sp-3); align-items: flex-end;
    background: var(--tkh-surface); border: 1px solid var(--tkh-line); border-radius: var(--tkh-radius-lg);
    padding: var(--tkh-sp-3) var(--tkh-sp-4); margin-bottom: var(--tkh-sp-4); }
.tkh-filtros > * { min-width: 0; max-width: 100%; }

.tkh-vacio { text-align: center; color: var(--tkh-text-muted); padding: var(--tkh-sp-8) var(--tkh-sp-4);
    border: 1px dashed var(--tkh-line-strong); border-radius: var(--tkh-radius-lg); background: var(--tkh-surface); }
.tkh-vacio [class^="ion-"] { display: block; font-size: 32px; margin-bottom: var(--tkh-sp-2); color: var(--tkh-primary-light); }

.tkh-cargando { position: relative; min-height: 48px; color: var(--tkh-text-muted); }
.tkh-cargando::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
    border: 3px solid var(--tkh-line); border-top-color: var(--tkh-primary); border-radius: 50%; animation: tkh-giro .8s linear infinite; }
@keyframes tkh-giro { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   11. ALERTAS
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--tkh-radius); }
.alert-success { background: var(--tkh-success-tint); border-color: #b9dfc9; color: #17603c; }
.alert-danger  { background: var(--tkh-danger-tint);  border-color: #f3c2c7; color: #9b1622; }
.alert-warning { background: var(--tkh-warning-tint); border-color: #f0d9a8; color: var(--tkh-warning-text); }
.alert-info    { background: var(--tkh-info-tint);    border-color: #bcd6f1; color: #1f5690; }

/* --------------------------------------------------------------------------
   12. CONMUTADOR SEGMENTADO (Día / Mes del calendario)
   -------------------------------------------------------------------------- */
.tkh-segmented { display: inline-flex; border: 1px solid var(--tkh-line-strong); border-radius: var(--tkh-radius); overflow: hidden; background: var(--tkh-surface); }
.tkh-segmented button { border: 0; background: transparent; color: var(--tkh-primary); font: 600 13px/1 var(--tkh-font);
    padding: 0 12px; height: 32px; min-width: 0; margin: 0; box-shadow: none; text-transform: none; letter-spacing: 0; width: auto; cursor: pointer; }
.tkh-segmented button + button { border-left: 1px solid var(--tkh-line-strong); }
.tkh-segmented button[aria-pressed="true"] { background: var(--tkh-primary); color: #fff; }
.tkh-segmented button:hover { transform: none; }
/* Pestañas que son enlaces (Calendario: Limpieza y tareas / Mantenimiento) */
.tkh-segmented a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; color: var(--tkh-primary);
    font: 600 13px/1 var(--tkh-font); text-decoration: none; white-space: nowrap; }
.tkh-segmented a + a { border-left: 1px solid var(--tkh-line-strong); }
.tkh-segmented a:hover { background: var(--tkh-primary-tint); color: var(--tkh-primary); }
.tkh-segmented a[aria-current="page"], .tkh-segmented a[aria-current="page"]:hover { background: var(--tkh-primary); color: #fff; }

/* --------------------------------------------------------------------------
   13. ARREGLOS DE QA
   -------------------------------------------------------------------------- */
/* .page-title es una tarjeta blanca (custom.css §14) pero su h1 seguía en blanco */
.page-title h1 { color: var(--tkh-primary-dark) !important; margin-left: 0; font-size: var(--tkh-fs-lg); font-weight: 700; }
.page-title h1 [class^="ion-"] { color: var(--tkh-primary); margin-right: 6px; }
@media (max-width: 767px) {
    .page-title { flex-wrap: wrap; gap: var(--tkh-sp-2); padding: var(--tkh-sp-3) var(--tkh-sp-4) !important; }
}
/* Diario: selector de alojamiento ocupa la primera fila de la barra de filtros */
.tkh-diario-aloj { flex: 1 1 100%; min-width: 0; }
.tkh-diario-aloj .select2-container { width: 100% !important; }
/* Filtros adm-* en móvil: sin anchos mínimos que desborden la tarjeta (reservas, tareas…) */
@media (max-width: 767px) {
    .adm-filter-group, .adm-filter-group.fg-dates { min-width: 0 !important; width: 100%; max-width: 100%; flex-basis: 100% !important; }
    .adm-filter-group .select2-container { width: 100% !important; max-width: 100%; }
    .adm-filter-group input, .adm-filter-group select { max-width: 100%; }
    .date-stepper-wrap { flex: 1 1 0; min-width: 0; }
    .date-stepper-wrap input[type="date"] { min-width: 0; width: 100%; }
}
/* Icono de la hamburguesa: blanco sobre la barra azul */
.nav-container .mobile-toggle i { color: #fff !important; opacity: 1 !important; }
/* Aire bajo la barra fija: los contenedores de página empezaban pegados a ella */
.nav-container ~ .adm-wrap, .nav-container ~ .dia-wrap,
.nav-container ~ * .adm-wrap, .nav-container ~ * .dia-wrap { padding-top: var(--tkh-sp-5); }
/* Pie de gest: .row de Bootstrap fuera de .container (márgenes -15px = scroll horizontal de 15 px) */
body > .row.bg-dark { margin-left: 0; margin-right: 0; }
/* select2: el <select> original oculto conservaba min-width/ancho de la página y ensanchaba el documento */
select.select2-hidden-accessible { width: 1px !important; min-width: 0 !important; max-width: 1px !important; }
/* Diario: columnas que pueden encoger (1fr sin minmax crecía con el contenido) */
.dia-wrap .dia-layout-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dia-wrap .dia-col { min-width: 0; }
@media (max-width: 992px) { .dia-wrap .dia-layout-grid { grid-template-columns: minmax(0, 1fr); } }
/* Contenido de notas (enlaces largos, fotos) dentro de su columna */
.dia-wrap { overflow-wrap: anywhere; }
.dia-wrap img { max-width: 100%; height: auto; }
/* Tablas DataTables anchas: scroll dentro de su envoltura, no en la página */
.dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 480px) {
    .fg-dates > div { flex-wrap: wrap; gap: var(--tkh-sp-2); }
    .fg-dates .date-stepper-wrap { flex: 1 1 100%; }
    .fg-dates .date-separator { display: none; }
}
/* .page-title (width:100% !important en custom.css) tocaba los bordes por debajo de 1440 px */
@media (max-width: 1440px) { .page-title { width: calc(100% - 40px) !important; } }

/* --------------------------------------------------------------------------
   14. CALENDARIO: CAJITAS DE TAREA
   La altura es la escala de tiempo (60 px = 1 h, mínimo 30 px) y no se toca.
   Contenido compacto en 3 bloques y, al pasar el ratón, la caja crece por
   encima para enseñarlo todo (salvo mientras se arrastra o redimensiona).
   -------------------------------------------------------------------------- */
/* Las tareas van en una capa sobre la rejilla de horas, colocadas en su minuto exacto
   (top/left/height en línea desde getCalendario). */
#div_por_dia .tkh-cal-capa { position: absolute; inset: 0; pointer-events: none; }
#div_por_dia .tkh-cal-capa > .cal_tarea_div { position: absolute !important; pointer-events: auto; }
#div_por_dia .cal_tarea_div[id] { padding: 2px 6px !important; text-align: left; }
#div_por_dia .cal_tarea_div .tkh-cal-link { display: block; font-size: 10.5px; line-height: 1.15; font-weight: 600; }
#div_por_dia .cal_tarea_div .tkh-cal-link > span { display: block; overflow: hidden; }
#div_por_dia .cal_tarea_div .tkh-cal-l1 { font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
#div_por_dia .cal_tarea_div .tkh-cal-aloj { display: -webkit-box !important; -webkit-line-clamp: var(--tkh-aloj-lineas, 2); -webkit-box-orient: vertical; }
#div_por_dia .cal_tarea_div .tkh-cal-meta { white-space: nowrap; text-overflow: ellipsis; font-weight: 400; opacity: .92; }
#div_por_dia .cal_tarea_div .tkh-cal-meta b { font-weight: 700; }
/* Letra negra en vez de blanca (deslumbraba). El fondo en línea es el color del trabajador (oscuro, $COLORS):
   se aclara con una capa blanca encima y se deja una franja izquierda de 4 px con el color puro para
   distinguir a cada persona. Contraste mínimo 10,6:1 con los 40 colores (antes, blanco: 3,2:1). */
html body #div_por_dia .cal_tarea_div[id] {
    background-image: linear-gradient(to right, transparent 4px, rgba(255,255,255,.78) 4px) !important;
    padding-left: 8px !important;
}
html body #div_por_dia .cal_tarea_div[id] a, html body #div_por_dia .cal_tarea_div[id] .tkh-cal-link span { color: #1a202c !important; text-shadow: none !important; }
html body #div_por_dia .cal_tarea_div[id] .tkh-cal-meta { opacity: 1; color: #2d3748 !important; }
/* Oscuro: capa oscura y letra gris claro (no blanco puro); contraste mínimo 9,5:1 */
html[data-theme="dark"] body #div_por_dia .cal_tarea_div[id] { background-image: linear-gradient(to right, transparent 4px, rgba(16,20,27,.70) 4px) !important; }
html[data-theme="dark"] body #div_por_dia .cal_tarea_div[id] a, html[data-theme="dark"] body #div_por_dia .cal_tarea_div[id] .tkh-cal-link span { color: #e2e8f0 !important; }
html[data-theme="dark"] body #div_por_dia .cal_tarea_div[id] .tkh-cal-meta { color: #cbd5e0 !important; }

#div_por_dia .cal_tarea_div[id]:hover:not(.ui-resizable-resizing):not(.ui-draggable-dragging) {
    height: auto !important; overflow: visible !important; z-index: 130 !important;
}
#div_por_dia .cal_tarea_div[id]:hover:not(.ui-resizable-resizing):not(.ui-draggable-dragging) .tkh-cal-link > span {
    white-space: normal; -webkit-line-clamp: unset; overflow: visible;
}

/* --------------------------------------------------------------------------
   15. POPUP DE LA FICHA DE TAREA
   -------------------------------------------------------------------------- */
#popupFichas:has(.it-wrap) { max-width: 1080px; padding: 16px 18px; }
#popupFichas:has(.it-wrap) > h4 { display: none; }
#popupFichas:has(.it-wrap) .btn-cerrar-popup { margin-bottom: 6px; line-height: 1; }
#popupFichas:has(.it-wrap) #fichasPopup { max-height: calc(100vh - 90px) !important; }
@media (max-width: 767px) {
    .overlay:has(.it-wrap) { align-items: flex-end; }
    #popupFichas:has(.it-wrap) { width: 100%; max-width: 100%; padding: 10px 10px 0; border-radius: 14px 14px 0 0; }
    #popupFichas:has(.it-wrap) #fichasPopup { max-height: calc(100dvh - 56px) !important; padding-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   16. CALENDARIO: FONDO SUAVE
   Gris azulado en lugar de blanco puro para no cansar la vista; las tareas
   conservan sus colores.
   -------------------------------------------------------------------------- */
body:has(#div_por_dia) .bg-white:has(#div_por_dia),
#div_por_dia { background-color: var(--tkh-cal-bg) !important; }
.calendario_desglose { background-color: var(--tkh-cal-bg); border-color: var(--tkh-cal-line); }
.calendario_desglose > .dia_tit { background-color: var(--tkh-cal-hora-bg); }
.calendario_desglose > .dia { background-color: var(--tkh-cal-dia-bg); border-color: var(--tkh-cal-line); }

/* --------------------------------------------------------------------------
   Revisiones de mantenimiento (fichaRevisionHTML en inc/ficha_alojamiento.php):
   diario del alojamiento y calendario de mantenimiento
   -------------------------------------------------------------------------- */
.rev-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.rev-tit b { color: var(--tkh-text); }
.rev-quien { color: var(--tkh-text-muted); font-size: 12.5px; }
.rev-extra { color: var(--tkh-text-muted); font-size: 12px; }
.rev-tit .tkh-chip { font-size: 10.5px; }
.rev-imp { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; background: var(--tkh-line, #e2e8f0); color: var(--tkh-text); }
.rev-imp-alta { background: var(--tkh-danger); color: #fff; }
.rev-imp-media { background: var(--tkh-warning-tint); color: var(--tkh-warning-text); }
.rev-txt { font-size: 12.5px; color: var(--tkh-text); margin-top: 3px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rev-det { margin-top: 5px; font-size: 12.5px; }
.rev-det summary { cursor: pointer; font-weight: 700; color: var(--tkh-primary); font-size: 12px; }
.rev-est { margin-top: 6px; overflow-wrap: anywhere; }
.rev-est > b, .rev-grupo > b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--tkh-text-muted); margin-bottom: 2px; }
.rev-galeria { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.rev-grupo > b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-fotos { display: flex; flex-wrap: wrap; gap: 4px; }
.rev-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--tkh-line, #e2e8f0); display: block; }
.rev-doc { font-size: 12px; }

/* Calendario de mantenimiento: revisiones registradas (calRevisionesCajas en inc/funciones.php) */
.cal-rev-ficha { text-align: left; font-size: 13px; }
.cal-rev-fecha { font-size: 12px; color: var(--tkh-text-muted); margin-bottom: 6px; }
.cal-rev-piso { font-weight: 700; color: var(--tkh-primary-dark); margin-right: 2px; }
.cal-rev-piso.sin { color: var(--tkh-text-muted); font-style: italic; }
.cal-rev-acc { margin-top: 10px; }
.cal-rev-acc a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--tkh-line-strong, #cbd5e0); color: var(--tkh-primary) !important; text-decoration: none !important; }
.cal-rev-acc a:hover { background: var(--tkh-primary); color: #fff !important; }
.cal-rev-n { position: absolute; right: 4px; bottom: 3px; font-size: 10.5px; font-weight: 700; line-height: 16px; color: #8a4b2a !important; background: #f7ede6; border-radius: 5px; padding: 0 5px; text-decoration: none !important; }

/* ==========================================================================
   REDISEÑO 2026-10: claro y limpio, con barra lateral (gest/pl_header.php)
   Solo aspecto: no cambia alturas ni márgenes de campos y botones heredados
   (custom.css), para no descolocar formularios. «html body» gana a los <style>
   de cada página sin !important.
   ========================================================================== */
:root {
    --font-principal: "Inter", "Open Sans";   /* el área de limpieza no carga Inter: cae en Open Sans */
    --tkh-font: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tkh-bg: #f6f7f9;
    --tkh-line: #e6e8ec;
    --tkh-line-strong: #d0d5dd;
    --tkh-text: #1d2433;
    --tkh-text-muted: #5b6474;
    --tkh-sb-w: 240px;
    --tkh-top-h: 56px;
    --tkh-sticky-top: 12px;
    --tkh-card-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
html body { font-family: var(--tkh-font); background: var(--tkh-bg); color: var(--tkh-text); letter-spacing: -.005em; }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-family: var(--tkh-font); letter-spacing: -.01em; }
html body.tkh-con-sb, html body.tkh-sin-sb { margin: 0 !important; }

/* ── Barra lateral ── */
.tkh-sb { position: fixed; top: 0; left: 0; bottom: 0; width: var(--tkh-sb-w); background: #fff; border-right: 1px solid var(--tkh-line); display: flex; flex-direction: column; z-index: 1030; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tkh-sb-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 12px 20px; }
.tkh-sb-logo img { height: 34px; width: auto; display: block; }
.tkh-sb .tkh-sb-x { display: none; }
.tkh-sb-nueva { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 14px 8px; height: 38px; border-radius: 10px; background: var(--tkh-primary-dark); color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none !important; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.tkh-sb-nueva:hover { background: var(--tkh-primary); }
.tkh-sb-nav { display: flex; flex-direction: column; padding: 4px 0 8px; }
html body nav.tkh-sb-nav { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } /* custom.css pinta todo <nav> de azul */
.tkh-sb-g { padding: 16px 22px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #8a93a3; }
.tkh-sb .tkh-sb-a, html body .tkh-sb button.tkh-sb-a {
    display: flex; align-items: center; gap: 11px; height: 36px; margin: 1px 10px; padding: 0 10px; border-radius: 8px; width: auto;
    color: #3d4555 !important; font-weight: 500; font-size: 14px; line-height: 36px; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: transparent; border: 0; box-shadow: none; text-transform: none; letter-spacing: 0; min-width: 0; text-align: left; transform: none; cursor: pointer; font-family: var(--tkh-font); }
html body .tkh-sb button.tkh-sb-a { width: calc(100% - 20px); background: transparent; color: #3d4555; height: 36px; line-height: 36px; margin: 1px 10px; padding: 0 10px; }
.tkh-sb .tkh-sb-a i { width: 20px; text-align: center; font-size: 18px; color: #8a93a3; flex: none; }
.tkh-sb .tkh-sb-a:hover, html body .tkh-sb button.tkh-sb-a:hover { background: #f2f4f7; color: var(--tkh-text) !important; transform: none; box-shadow: none; }
.tkh-sb .tkh-sb-a.on { background: var(--tkh-primary-tint); color: var(--tkh-primary-dark) !important; font-weight: 600; }
.tkh-sb .tkh-sb-a.on i { color: var(--tkh-primary-dark); }
.tkh-sb .tkh-sb-a:focus-visible { outline: 2px solid var(--tkh-info); outline-offset: 1px; }
.tkh-sb-form { margin: 0; }
.tkh-sb-pie { margin-top: auto; border-top: 1px solid var(--tkh-line); padding: 8px 0 12px; }
.tkh-sb .tkh-sb-a.salir:hover { background: var(--tkh-danger-tint); color: var(--tkh-danger) !important; }
.tkh-sb .tkh-sb-a.salir:hover i { color: var(--tkh-danger); }
.tkh-top { display: none; }
.tkh-sb-velo[hidden] { display: none; }

@media (min-width: 992px) {
    html body.tkh-con-sb { padding-left: var(--tkh-sb-w) !important; }
}
@media (max-width: 991px) {
    :root { --tkh-sticky-top: calc(var(--tkh-top-h) + 8px); }
    html body.tkh-con-sb { padding-top: var(--tkh-top-h) !important; }
    .tkh-top { display: flex; align-items: center; gap: 8px; position: fixed; top: 0; left: 0; right: 0; height: var(--tkh-top-h); background: #fff; border-bottom: 1px solid var(--tkh-line); z-index: 1020; padding: 0 8px; }
    html body .tkh-top-menu { width: 44px; height: 44px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--tkh-text); font-size: 24px; line-height: 44px; box-shadow: none; }
    .tkh-top-menu:active { background: #f2f4f7; }
    .tkh-top-logo img { height: 28px; width: auto; display: block; }
    .tkh-top-accion { margin-left: auto; width: 40px; height: 40px; border-radius: 10px; background: var(--tkh-primary-dark); color: #fff !important; display: grid; place-items: center; font-size: 20px; text-decoration: none !important; }
    .tkh-sb { width: min(84vw, 300px); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 20px 50px rgba(16,24,40,.25); z-index: 1050; }
    html.tkh-sb-abierto .tkh-sb { transform: none; }
    html.tkh-sb-abierto, html.tkh-sb-abierto body { overflow: hidden; }
    .tkh-sb-velo { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 1040; }
    html body .tkh-sb .tkh-sb-x { display: grid; place-items: center; width: 40px; height: 40px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 10px; background: #f2f4f7; color: var(--tkh-text); font-size: 18px; box-shadow: none; }
    .tkh-sb .tkh-sb-a, html body .tkh-sb button.tkh-sb-a { height: 44px; line-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tkh-sb { transition: none; } }

/* Barras de herramientas fijas de las páginas: bajo la barra superior en móvil, arriba en escritorio */
html body .fa-herr, html body .fc-herr { top: var(--tkh-sticky-top); }
html body .fa-sec { scroll-margin-top: 90px; }

/* ── Pie y aviso de cookies ── */
.tkh-pie { padding: 24px 16px 28px; text-align: center; font-size: 12px; color: #8a93a3; }
html body #barraaceptacion { left: auto; right: 16px; bottom: 16px; width: auto; max-width: 420px; min-height: 0; padding: 12px 16px; border-radius: 12px; background: #1d2433; box-shadow: 0 10px 30px rgba(16,24,40,.25); text-align: left; }
html body #barraaceptacion .inner { position: static; padding: 0; font-family: var(--tkh-font); font-size: 12.5px; line-height: 1.45; }
html body #barraaceptacion .inner a.ok { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 8px; background: #fff; color: #1d2433; font-size: 12px; }
@media (max-width: 600px) { html body #barraaceptacion { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* ── Botones y campos: aspecto moderno sin tocar su tamaño ── */
html body .btn, html body button[type="submit"], html body input[type="submit"] { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; border-radius: 8px; font-family: var(--tkh-font); }
html body .btn:hover, html body button[type="submit"]:hover { transform: none; }
html body .btn-filtro { border-radius: 8px; font-weight: 600; font-family: var(--tkh-font); }
html body input[type="text"], html body input[type="password"], html body input[type="number"], html body input[type="tel"], html body input[type="time"], html body input[type="email"], html body input[type="date"], html body input[type="search"], html body input[type="url"], html body select, html body textarea {
    border-color: var(--tkh-line-strong); border-radius: 8px; box-shadow: none; font-family: var(--tkh-font); color: var(--tkh-text); }
html body input:focus, html body select:focus, html body textarea:focus { border-color: var(--tkh-primary); box-shadow: 0 0 0 3px rgba(56, 67, 101, .12); outline: none; }
html body .select2-container--default .select2-selection--single, html body .select2-container--default .select2-selection--multiple { border-color: var(--tkh-line-strong); border-radius: 8px; }

/* ── Cabeceras de página y tarjetas (adm-* de cada página) ── */
html body .adm-header { background: transparent; border: 0; box-shadow: none; padding: 6px 0 2px; margin-bottom: 14px; }
html body .adm-header h1 { font-size: 24px; font-weight: 700; color: var(--tkh-text); letter-spacing: -.02em; }
html body .adm-header h1 > i { width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid var(--tkh-line); display: inline-grid; place-items: center; font-size: 19px; color: var(--tkh-primary); box-shadow: var(--tkh-card-shadow); }
html body .adm-toolbar-adv, html body .adm-tabla-wrap, html body .adm-card, html body .tkh-card, html body .dr-card { border-color: var(--tkh-line); border-radius: 12px; box-shadow: var(--tkh-card-shadow); }
html body .adm-tabla thead th { background: #f9fafb; color: #667085; font-weight: 600; font-size: 11.5px; letter-spacing: .03em; border-bottom: 1px solid var(--tkh-line); }
html body .adm-tabla tbody td { border-bottom-color: #f0f2f5; }
html body .adm-tabla tbody tr:hover { background: #fafbfc; }

/* ── Ficha de alojamiento: cabecera clara en lugar del bloque azul oscuro ── */
html body .fa-cab { background: #fff; color: var(--tkh-text); border: 1px solid var(--tkh-line); box-shadow: var(--tkh-card-shadow); }
html body .fa-cab h1 { color: var(--tkh-text) !important; font-size: 22px; letter-spacing: -.02em; }
html body .fa-cab .fa-sub, html body .fa-cab .fa-meta { color: var(--tkh-text-muted); opacity: 1; }
html body .fa-cab .fa-btn.claro { background: #f2f4f7; color: var(--tkh-primary-dark) !important; border-color: transparent; }
html body .fa-cab .fa-btn.claro:hover { background: var(--tkh-primary-tint); }

/* Índice de la ficha: también es un <nav> (custom.css los pinta todos de azul) */
html body nav.fa-indice { background: transparent !important; box-shadow: none !important; border-bottom: 0 !important; }
html body .fa-indice a { background: #f2f4f7; border-color: transparent; color: var(--tkh-text-muted); }
html body .fa-indice a.activa { background: var(--tkh-primary-dark); color: #fff; }

/* Login */
html body .login-card { border: 1px solid var(--tkh-line); border-radius: 16px; box-shadow: 0 12px 32px rgba(16,24,40,.08); }
.tkh-login-cab { text-align: center; margin-bottom: 22px; }
.tkh-login-cab img { height: 44px; width: auto; margin-bottom: 14px; }
.tkh-login-cab h1 { font-size: 22px; font-weight: 700; color: var(--tkh-text); margin: 0 0 2px; }
.tkh-login-cab p { margin: 0; color: var(--tkh-text-muted); font-size: 14px; }

/* ==========================================================================
   MARCA «TheKeyHost Gestión» (como TheKeyHost Copilot: azul #2457d6, iconos de
   línea, Plus Jakarta Sans) y TEMA claro / oscuro / del sistema.
   data-theme en <html> lleva siempre el tema real (lo pone pl_header.php).
   ========================================================================== */
:root {
    --tkh-accent: #2457d6; --tkh-accent-2: #1b44ad; --tkh-accent-soft: #e8eefc;
    /* «primary-dark» se usa como color de títulos y como hover de botones: azul casi negro */
    --color-primary: #2457d6; --color-primary-dark: #172554;
    --tkh-primary: #2457d6; --tkh-primary-dark: #172554; --tkh-primary-tint: #e8eefc;
    --tkh-titulos: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    color-scheme: light;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { color: var(--tkh-text); }
html body .adm-header h1, html body .pn-head h1, html body .fa-cab h1, html body .dr-head h1, .tkh-login-cab h1 { font-family: var(--tkh-titulos); }

/* Marca */
.tkh-marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--tkh-titulos); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--tkh-text); white-space: nowrap; }
.tkh-marca small { font-weight: 600; font-size: 15px; color: var(--tkh-accent); }
.tkh-marca .mark { width: 32px; height: 32px; border-radius: 9px; background: var(--tkh-accent); display: grid; place-items: center; flex: none; box-shadow: 0 2px 6px rgba(36, 87, 214, .3); }
.tkh-marca .mark svg { width: 20px; height: 20px; }
.tkh-marca.grande { font-size: 22px; } .tkh-marca.grande small { font-size: 19px; } .tkh-marca.grande .mark { width: 40px; height: 40px; border-radius: 11px; } .tkh-marca.grande .mark svg { width: 24px; height: 24px; }
.tkh-sb-logo, .tkh-top-logo { text-decoration: none !important; }
.tkh-login-cab .tkh-marca { margin-bottom: 16px; }

/* Iconos de línea */
.tkh-ico { width: 18px; height: 18px; flex: none; }
.tkh-sb .tkh-sb-a .tkh-ico { color: #8a93a3; }
.tkh-sb .tkh-sb-a.on .tkh-ico { color: var(--tkh-accent); }
.tkh-sb .tkh-sb-a:hover .tkh-ico { color: var(--tkh-text); }
.tkh-sb .tkh-sb-a.salir:hover .tkh-ico { color: var(--tkh-danger); }
.tkh-sb .tkh-sb-a.on { background: var(--tkh-accent-soft); color: var(--tkh-accent-2) !important; }
.tkh-sb-nueva { background: var(--tkh-accent); } .tkh-sb-nueva:hover { background: var(--tkh-accent-2); }
.tkh-sb-nueva .tkh-ico, .tkh-top-accion .tkh-ico { width: 18px; height: 18px; }
.tkh-top-accion { background: var(--tkh-accent) !important; }
html body .tkh-top-menu { display: grid; place-items: center; } .tkh-top-menu .tkh-ico { width: 22px; height: 22px; }
.tkh-sb-x .tkh-ico { width: 18px; height: 18px; }
@media (max-width: 991px) { .tkh-top .tkh-marca { font-size: 15px; } .tkh-top .tkh-marca small { font-size: 13px; } .tkh-top .tkh-marca .mark { width: 28px; height: 28px; } }

/* Selector de tema */
.tkh-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 4px 12px 8px; padding: 3px; background: #f2f4f7; border-radius: 10px; }
html body .tkh-tema button { display: flex; flex-direction: column; align-items: center; gap: 2px; height: auto; min-width: 0; margin: 0; padding: 5px 2px; border: 0; border-radius: 8px; background: transparent; color: var(--tkh-text-muted); font-size: 11px; font-weight: 600; line-height: 1.2; box-shadow: none; text-transform: none; letter-spacing: 0; cursor: pointer; }
html body .tkh-tema button .tkh-ico { width: 16px; height: 16px; }
html body .tkh-tema button[aria-pressed="true"] { background: #fff; color: var(--tkh-text); box-shadow: 0 1px 2px rgba(16,24,40,.12); }

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;
    --tkh-bg: #0b0e13; --tkh-surface: #151a22; --tkh-surface-alt: #10141b; --tkh-line: #262d39; --tkh-line-strong: #353e4d;
    --tkh-text: #eef1f6; --tkh-text-muted: #9aa4b5;
    --tkh-accent: #5b8cff; --tkh-accent-2: #a3bdff; --tkh-accent-soft: #1b2742;
    --color-primary: #7ba2ff; --color-primary-dark: #dbe4ff; --color-dark: #eef1f6;
    --tkh-primary: #7ba2ff; --tkh-primary-dark: #dbe4ff; --tkh-primary-tint: #1b2742; --tkh-primary-light: #8c96a7;
    --tkh-success: #6fd49a; --tkh-success-tint: #12301f; --tkh-danger: #ff8a80; --tkh-danger-tint: #3a1618;
    --tkh-warning: #f5b25c; --tkh-warning-text: #f5b25c; --tkh-warning-tint: #35260f; --tkh-info: #7ba2ff; --tkh-info-tint: #16223d;
    --tkh-st-pendiente: #a3acbb; --tkh-st-pendiente-tint: #232a35; --tkh-st-iniciada-tint: #35260f; --tkh-st-iniciada-text: #f5b25c;
    --tkh-st-finalizada: #6fd49a; --tkh-st-finalizada-tint: #12301f; --tkh-st-borrada: #ff8a80; --tkh-st-borrada-tint: #3a1618;
    --tkh-cal-bg: #10141b; --tkh-cal-hora-bg: #151a22; --tkh-cal-line: #262d39; --tkh-cal-dia-bg: #151a22;
    --tkh-card-shadow: 0 1px 2px rgba(0,0,0,.4);
}
html[data-theme="dark"] body { background: var(--tkh-bg); color: var(--tkh-text); }
html[data-theme="dark"] a { color: var(--tkh-primary); }
html[data-theme="dark"] .tkh-sb, html[data-theme="dark"] .tkh-top { background: var(--tkh-surface); border-color: var(--tkh-line); }
html[data-theme="dark"] .tkh-sb .tkh-sb-a, html[data-theme="dark"] body .tkh-sb button.tkh-sb-a { color: #c9d0db !important; }
html[data-theme="dark"] .tkh-sb .tkh-sb-a:hover, html[data-theme="dark"] body .tkh-sb button.tkh-sb-a:hover { background: #1d2430; color: #fff !important; }
html[data-theme="dark"] .tkh-sb .tkh-sb-a.on { background: var(--tkh-accent-soft); color: #fff !important; }
html[data-theme="dark"] .tkh-sb .tkh-sb-a.on .tkh-ico { color: var(--tkh-accent); }
html[data-theme="dark"] .tkh-tema { background: #10141b; }
html[data-theme="dark"] body .tkh-tema button[aria-pressed="true"] { background: #262d39; color: #fff; }
html[data-theme="dark"] body .tkh-sb .tkh-sb-x, html[data-theme="dark"] .tkh-top-menu:active { background: #1d2430; }

/* Superficies y textos de las páginas (adm-*, pn-*, fa-*, dr-*, calendario) */
html[data-theme="dark"] body .adm-toolbar-adv, html[data-theme="dark"] body .adm-tabla-wrap, html[data-theme="dark"] body .adm-card,
html[data-theme="dark"] body .tkh-card, html[data-theme="dark"] body .pn-card, html[data-theme="dark"] body .pn-kpi, html[data-theme="dark"] body .fa-cab,
html[data-theme="dark"] body .fa-sec, html[data-theme="dark"] body .fa-app, html[data-theme="dark"] body .fa-herr, html[data-theme="dark"] body .fa-dato, html[data-theme="dark"] body .fa-wifi,
html[data-theme="dark"] body details.fa-hist, html[data-theme="dark"] body .login-card, html[data-theme="dark"] body .fc-herr, html[data-theme="dark"] body .modal-content,
html[data-theme="dark"] body .popup, html[data-theme="dark"] body .bg-white, html[data-theme="dark"] body .adm-segmented, html[data-theme="dark"] body .well, html[data-theme="dark"] body .panel {
    background: var(--tkh-surface) !important; border-color: var(--tkh-line) !important; color: var(--tkh-text); }
html[data-theme="dark"] body .adm-tabla, html[data-theme="dark"] body .adm-tabla td, html[data-theme="dark"] body .table, html[data-theme="dark"] body table { color: var(--tkh-text); }
html[data-theme="dark"] body .adm-tabla thead th, html[data-theme="dark"] body .fa-sec-h, html[data-theme="dark"] body .table > thead > tr > th, html[data-theme="dark"] body details.fa-hist summary { background: var(--tkh-surface-alt) !important; color: var(--tkh-text-muted); border-color: var(--tkh-line) !important; }
html[data-theme="dark"] body .adm-tabla tbody td, html[data-theme="dark"] body .table td, html[data-theme="dark"] body .fa-campo, html[data-theme="dark"] body .fa-largo, html[data-theme="dark"] body .fa-fotos, html[data-theme="dark"] body .fa-serv td { border-color: var(--tkh-line) !important; }
html[data-theme="dark"] body .adm-tabla tbody tr:hover, html[data-theme="dark"] body .table-hover > tbody > tr:hover { background: #1a202a !important; }
html[data-theme="dark"] body .adm-tabla strong, html[data-theme="dark"] body .adm-card-title, html[data-theme="dark"] body .adm-grid-item strong, html[data-theme="dark"] body .mt-piso, html[data-theme="dark"] body .fa-dato .v,
html[data-theme="dark"] body .adm-filter-group label, html[data-theme="dark"] body .adm-count, html[data-theme="dark"] body label { color: var(--tkh-text) !important; }
html[data-theme="dark"] body .adm-count, html[data-theme="dark"] body .adm-sum-item, html[data-theme="dark"] body .adm-acc, html[data-theme="dark"] body .adm-card-grid, html[data-theme="dark"] body .fa-dato-f,
html[data-theme="dark"] body .date-stepper-wrap, html[data-theme="dark"] body .fa-chip.opt, html[data-theme="dark"] body .adm-vacio { background: var(--tkh-surface-alt) !important; border-color: var(--tkh-line) !important; }
html[data-theme="dark"] body .adm-acc { color: var(--tkh-primary) !important; }
html[data-theme="dark"] body .adm-header h1 > i { background: var(--tkh-surface); border-color: var(--tkh-line); color: var(--tkh-primary); }
html[data-theme="dark"] body .fa-cab .fa-btn.claro, html[data-theme="dark"] body .fa-btn { background: #1d2430; color: var(--tkh-text) !important; border-color: var(--tkh-line); }
html[data-theme="dark"] body .fa-btn.prim, html[data-theme="dark"] body .btn-primary, html[data-theme="dark"] body .btn, html[data-theme="dark"] body button[type="submit"], html[data-theme="dark"] body input[type="submit"] { background: var(--tkh-accent); color: #fff !important; }
html[data-theme="dark"] body .fa-indice a { background: #1d2430; color: var(--tkh-text-muted); }
html[data-theme="dark"] body .fa-indice a.activa { background: var(--tkh-accent); color: #fff; }
html[data-theme="dark"] body .fa-avisos-i { background: var(--tkh-warning-tint); border-color: #5a4320; }
html[data-theme="dark"] body .fa-avisos-i.imp { background: var(--tkh-danger-tint); border-color: #5c2428; }

/* Campos */
html[data-theme="dark"] body input[type="text"], html[data-theme="dark"] body input[type="password"], html[data-theme="dark"] body input[type="number"], html[data-theme="dark"] body input[type="tel"],
html[data-theme="dark"] body input[type="time"], html[data-theme="dark"] body input[type="email"], html[data-theme="dark"] body input[type="date"], html[data-theme="dark"] body input[type="search"], html[data-theme="dark"] body input[type="url"],
html[data-theme="dark"] body select, html[data-theme="dark"] body textarea, html[data-theme="dark"] body .form-control, html[data-theme="dark"] body .adm-filter-group select, html[data-theme="dark"] body .adm-filter-group input,
html[data-theme="dark"] body .select2-container--default .select2-selection--single, html[data-theme="dark"] body .select2-container--default .select2-selection--multiple, html[data-theme="dark"] body .select2-dropdown {
    background-color: #10141b !important; border-color: var(--tkh-line-strong) !important; color: var(--tkh-text) !important; }
html[data-theme="dark"] body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tkh-text); }
html[data-theme="dark"] body .select2-container--default .select2-results__option[aria-selected="true"] { background: #1d2430; }
html[data-theme="dark"] body .select2-container--default .select2-selection--multiple .select2-selection__choice { background: #1d2430; border-color: var(--tkh-line-strong); color: var(--tkh-text); }
html[data-theme="dark"] body ::placeholder { color: #6f7889; }
html[data-theme="dark"] body .btn-filtro { background: #1d2430 !important; color: var(--tkh-text) !important; border-color: var(--tkh-line) !important; }
html[data-theme="dark"] body .btn-filtro[style*="var(--color-primary)"] { background: var(--tkh-accent) !important; color: #fff !important; }

/* Calendario */
html[data-theme="dark"] body .calendario_nav > div, html[data-theme="dark"] body .calendario_nav [style*="background-color:#ffffff"] { background: var(--tkh-surface) !important; border-color: var(--tkh-line) !important; }
html[data-theme="dark"] body #div_por_dia [id^="detalle-"] > div[style*="border-bottom"] > span { background-color: var(--tkh-cal-hora-bg) !important; color: var(--tkh-text-muted) !important; }
html[data-theme="dark"] body .tkh-segmented, html[data-theme="dark"] body .btn-nav-fecha, html[data-theme="dark"] body .input-nav-fecha { background: #1d2430 !important; border-color: var(--tkh-line) !important; color: var(--tkh-text) !important; }
html[data-theme="dark"] body .tkh-segmented > * { color: var(--tkh-text) !important; }
html[data-theme="dark"] body .tkh-segmented > [aria-pressed="true"], html[data-theme="dark"] body .tkh-segmented > [aria-current="page"] { background: var(--tkh-accent) !important; color: #fff !important; }
html[data-theme="dark"] body #filtros_left { background: var(--tkh-surface) !important; color: var(--tkh-text); }

/* Estilos en línea frecuentes en las páginas antiguas (fondos y textos claros fijos) */
html[data-theme="dark"] body [style*="background:#fff"], html[data-theme="dark"] body [style*="background: #fff"], html[data-theme="dark"] body [style*="background-color:#fff"],
html[data-theme="dark"] body [style*="background-color: #fff"], html[data-theme="dark"] body [style*="background:white"], html[data-theme="dark"] body [style*="background-color:white"] { background-color: var(--tkh-surface) !important; }
html[data-theme="dark"] body [style*="background:#f8fafc"], html[data-theme="dark"] body [style*="background:#edf2f7"], html[data-theme="dark"] body [style*="background: #f8fafc"],
html[data-theme="dark"] body [style*="background:#f1f5f9"], html[data-theme="dark"] body [style*="background-color:#ececec"], html[data-theme="dark"] body [style*="background:#fafafa"] { background-color: var(--tkh-surface-alt) !important; }
html[data-theme="dark"] body [style*="color:#2d3748"], html[data-theme="dark"] body [style*="color: #2d3748"], html[data-theme="dark"] body [style*="color:#4a5568"], html[data-theme="dark"] body [style*="color: #4a5568"],
html[data-theme="dark"] body [style*="color:#1a202c"], html[data-theme="dark"] body [style*="color:var(--color-dark)"], html[data-theme="dark"] body [style*="color:#333"] { color: var(--tkh-text) !important; }
html[data-theme="dark"] body [style*="color:#718096"], html[data-theme="dark"] body [style*="color: #718096"], html[data-theme="dark"] body [style*="color:#a0aec0"] { color: var(--tkh-text-muted) !important; }
html[data-theme="dark"] body img[src*="logo.png"] { filter: brightness(1.4); }
/* custom.css (14.1) fuerza el fondo del body con !important */
html body, html body .main-content, html body #page-wrapper { background: var(--tkh-bg) !important; }
/* El botón de «Tareas especiales» del menú es un submit: que no herede el estilo de botón */
html[data-theme="dark"] body .tkh-sb button.tkh-sb-a { background: transparent !important; color: #c9d0db !important; }
html[data-theme="dark"] body .tkh-sb button.tkh-sb-a:hover { background: #1d2430 !important; color: #fff !important; }
html[data-theme="dark"] body .notasDesplegable, html[data-theme="dark"] body .mt-txt, html[data-theme="dark"] body .adm-grid-item { color: #c9d0db !important; }
/* Menú compacto para que quepa entero en pantallas de 768-900 px de alto */
@media (min-width: 992px) {
    .tkh-sb .tkh-sb-a, html body .tkh-sb button.tkh-sb-a { height: 34px; line-height: 34px; }
    .tkh-sb-g { padding-top: 12px; }
    .tkh-sb-cab { padding-top: 14px; padding-bottom: 10px; }
}
html body .tkh-tema button { flex-direction: row; justify-content: center; gap: 0; padding: 6px 2px; }
html body .tkh-tema button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barras de scroll finas que siguen el tema (custom.css pintaba el carril del calendario de gris claro).
   scrollbar-color se hereda; con él, Chrome ignora los ::-webkit-scrollbar antiguos. */
:root { --tkh-scroll: #c3c9d3; --tkh-scroll-hover: #9aa3b2; }
html[data-theme="dark"] { --tkh-scroll: #343c4a; --tkh-scroll-hover: #4a5466; }
html { scrollbar-color: var(--tkh-scroll) transparent; }
#div_por_dia, .tkh-sb, #filtros_left { scrollbar-width: thin; }
html body #div_por_dia::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
html body #div_por_dia::-webkit-scrollbar-track, html body #div_por_dia::-webkit-scrollbar-corner { background: transparent; }
html body #div_por_dia::-webkit-scrollbar-thumb { background-color: var(--tkh-scroll); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
html body #div_por_dia::-webkit-scrollbar-thumb:hover { background-color: var(--tkh-scroll-hover); }

/* ==========================================================================
   ÁREA DEL EQUIPO (source/pl_header.php): «TheKeyHost Equipo», barra superior
   clara y, en el móvil, pestañas abajo (Calendario, Mi cuenta, Tema, Salir).
   ========================================================================== */
html body.tkh-eq { padding-top: 56px; }
.tkh-eq-top { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 max(16px, calc((100% - 1400px) / 2)); background: var(--tkh-surface, #fff); border-bottom: 1px solid var(--tkh-line); }
.tkh-eq-logo { text-decoration: none !important; }
.tkh-eq-nav { display: flex; align-items: center; gap: 4px; }
.tkh-eq-a, html body .tkh-eq-nav .tkh-eq-tema { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 9px; margin: 0; min-width: 0;
    color: #3d4555 !important; font-weight: 500; font-size: 14px; text-decoration: none !important; background: transparent; border: 0; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1; font-family: var(--tkh-font); }
.tkh-eq-a:hover, html body .tkh-eq-nav .tkh-eq-tema:hover { background: #f2f4f7; }
.tkh-eq-a.on { background: var(--tkh-accent-soft); color: var(--tkh-accent-2) !important; font-weight: 600; }
.tkh-eq-a.salir:hover { background: var(--tkh-danger-tint); color: var(--tkh-danger) !important; }
.tkh-eq-a .tkh-ico, .tkh-eq-tema .tkh-ico { color: #8a93a3; }
.tkh-eq-a.on .tkh-ico { color: var(--tkh-accent); }
.tkh-eq-tabs { display: none; }
/* La marca ya no va sobre azul: el ancla de #top no necesita hueco extra */
html body.tkh-eq .ancla { height: 8px !important; }
html body.tkh-eq .pie { background: transparent !important; padding: 20px 16px !important; border-top: 1px solid var(--tkh-line); }
html body.tkh-eq .pie, html body.tkh-eq .pie [style*="color:#ffffff"], html body.tkh-eq .pie a { color: var(--tkh-text-muted) !important; font-size: 12.5px; }

@media (max-width: 760px) {
    .tkh-eq-nav { display: none; }
    .tkh-eq-top { justify-content: center; }
    .tkh-eq-top .tkh-marca { font-size: 16px; } .tkh-eq-top .tkh-marca small { font-size: 14px; }
    html body.tkh-eq.tkh-con-tabs { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
    .tkh-eq-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: calc(62px + env(safe-area-inset-bottom)); padding: 4px 6px env(safe-area-inset-bottom);
        background: var(--tkh-surface, #fff); border-top: 1px solid var(--tkh-line); box-shadow: 0 -4px 16px rgba(16,24,40,.06); }
    .tkh-eq-tab, html body .tkh-eq-tabs .tkh-eq-tema { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; min-width: 0; margin: 0; padding: 0;
        border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: #6b7385 !important; font-size: 11px; font-weight: 600; text-decoration: none !important; text-transform: none; letter-spacing: 0; line-height: 1.1; font-family: var(--tkh-font); cursor: pointer; }
    .tkh-eq-tab .tkh-ico { width: 22px; height: 22px; }
    .tkh-eq-tab.on { color: var(--tkh-accent) !important; }
    .tkh-eq-tab.on .tkh-ico { color: var(--tkh-accent); }
    .tkh-eq-tab.salir { color: var(--tkh-danger) !important; }
    html body.tkh-eq.tkh-con-tabs #barraaceptacion { bottom: calc(72px + env(safe-area-inset-bottom)); }
    html body.tkh-eq.tkh-con-tabs .pie { display: none; }
}
html[data-theme="dark"] .tkh-eq-a, html[data-theme="dark"] body .tkh-eq-nav .tkh-eq-tema { color: #c9d0db !important; }
html[data-theme="dark"] .tkh-eq-a:hover, html[data-theme="dark"] body .tkh-eq-nav .tkh-eq-tema:hover { background: #1d2430; }
html[data-theme="dark"] .tkh-eq-a.on { color: #fff !important; }
html[data-theme="dark"] .tkh-eq-tab, html[data-theme="dark"] body .tkh-eq-tabs .tkh-eq-tema { color: #9aa4b5 !important; }
html[data-theme="dark"] .tkh-eq-tab.on { color: var(--tkh-accent) !important; }
html[data-theme="dark"] .tkh-eq-tabs { box-shadow: none; }
/* custom.css pinta todo <nav> de azul con !important */
html body nav.tkh-eq-nav, html body nav.tkh-eq-tabs { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
@media (max-width: 760px) { html body nav.tkh-eq-tabs { background: var(--tkh-surface, #fff) !important; box-shadow: 0 -4px 16px rgba(16,24,40,.06) !important; } }
html body.tkh-eq .pie b { color: var(--tkh-text) !important; }

/* ==========================================================================
   AVISOS (js/avisos.js): campana, panel, invitación a activarlos y aviso flotante
   ========================================================================== */
.tkh-campana { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--tkh-text-muted); cursor: pointer; padding: 0; margin: 0; min-width: 0; box-shadow: none; }
html body button.tkh-campana { height: 38px; line-height: 1; min-width: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; }
.tkh-campana:hover { background: #f2f4f7; color: var(--tkh-text); }
.tkh-campana .tkh-ico { width: 20px; height: 20px; }
.tkh-av-n { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--tkh-danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--tkh-surface, #fff); }
.tkh-av-n[hidden] { display: none; }
.tkh-eq-tab .tkh-av-n { top: 2px; right: calc(50% - 22px); }
.tkh-avisos-velo { position: fixed; inset: 0; z-index: 1060; background: rgba(16,24,40,.25); }
.tkh-avisos-velo[hidden], .tkh-avisos-panel[hidden] { display: none; }
.tkh-avisos-panel { position: fixed; z-index: 1070; top: 12px; left: calc(var(--tkh-sb-w, 240px) + 12px); width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 24px); display: flex; flex-direction: column;
    background: var(--tkh-surface, #fff); color: var(--tkh-text); border: 1px solid var(--tkh-line); border-radius: 14px; box-shadow: 0 20px 50px rgba(16,24,40,.22); overflow: hidden; font-family: var(--tkh-font); font-size: 14px; }
body.tkh-eq .tkh-avisos-panel { left: auto; right: max(16px, calc((100% - 1400px) / 2)); top: 64px; }
.tkh-av-cab { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--tkh-line); }
.tkh-av-cab b { font-size: 16px; flex: 1; font-family: var(--tkh-titulos); }
html body .tkh-av-cab button { height: 30px; line-height: 1; min-width: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--tkh-accent); font-size: 12.5px; font-weight: 600; box-shadow: none; text-transform: none; letter-spacing: 0; cursor: pointer; }
html body .tkh-av-cab button.x { width: 32px; padding: 0; color: var(--tkh-text-muted); display: grid; place-items: center; }
.tkh-av-disp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--tkh-accent-soft); font-size: 13px; }
.tkh-av-disp.ok { background: var(--tkh-success-tint); }
.tkh-av-disp span { flex: 1 1 100%; }
html body .tkh-av-disp button, html body .tkh-av-banner button { height: 32px; line-height: 1; min-width: 0; margin: 0; padding: 0 12px; border-radius: 8px; border: 1px solid var(--tkh-line-strong); background: var(--tkh-surface, #fff); color: var(--tkh-text); font-size: 13px; font-weight: 600; box-shadow: none; text-transform: none; letter-spacing: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
html body .tkh-av-disp button.prim, html body .tkh-av-banner button.prim { background: var(--tkh-accent); border-color: var(--tkh-accent); color: #fff; }
.tkh-av-disp button .tkh-ico { width: 16px; height: 16px; }
.tkh-av-lista { overflow-y: auto; padding: 6px 0 8px; margin-top: 6px; }
.tkh-av-item { display: flex; gap: 10px; padding: 10px 16px; text-decoration: none !important; color: var(--tkh-text) !important; font-weight: 400; position: relative; }
.tkh-av-item:hover { background: #f6f7f9; }
.tkh-av-item.nuevo::after { content: ""; position: absolute; right: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--tkh-accent); }
.tkh-av-item .i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tkh-accent-soft); color: var(--tkh-accent); }
.tkh-av-item .i .tkh-ico { width: 18px; height: 18px; }
.tkh-av-item .i.fecha, .tkh-av-item .i.notas { background: var(--tkh-warning-tint); color: var(--tkh-warning-text); }
.tkh-av-item .i.borrada, .tkh-av-item .i.quitada, .tkh-av-item .i.sin_asignar { background: var(--tkh-danger-tint); color: var(--tkh-danger); }
.tkh-av-item .i.finalizada { background: var(--tkh-success-tint); color: var(--tkh-success); }
.tkh-av-item .t { display: flex; flex-direction: column; min-width: 0; padding-right: 14px; }
.tkh-av-item .t b { font-weight: 600; font-size: 13.5px; }
.tkh-av-item .t span { color: var(--tkh-text-muted); font-size: 13px; overflow-wrap: anywhere; }
.tkh-av-item .t small { color: #8a93a3; font-size: 11.5px; margin-top: 2px; }
.tkh-av-item:not(.nuevo) .t b { font-weight: 500; }
.tkh-av-vacio { padding: 28px 16px; text-align: center; color: var(--tkh-text-muted); }
.tkh-av-banner { position: fixed; z-index: 1010; left: 16px; right: 16px; bottom: 16px; max-width: 460px; margin: 0 auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px;
    background: var(--tkh-surface, #fff); border: 1px solid var(--tkh-line); box-shadow: 0 12px 32px rgba(16,24,40,.18); font-family: var(--tkh-font); font-size: 13.5px; color: var(--tkh-text); }
.tkh-av-banner .i { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--tkh-accent); color: #fff; display: grid; place-items: center; }
.tkh-av-banner b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.tkh-av-banner > div > span { color: var(--tkh-text-muted); }
.tkh-av-banner .b { display: flex; gap: 8px; margin-top: 10px; }
.tkh-av-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); z-index: 1100; background: #1d2433; color: #fff; padding: 10px 16px; border-radius: 10px; font: 600 13.5px var(--tkh-font); opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100vw - 32px); }
.tkh-av-toast.si { opacity: 1; transform: translateX(-50%); }
.tkh-av-toast.err { background: var(--tkh-danger); }
.tkh-sb-cab .tkh-campana { margin-left: auto; }
@media (max-width: 991px) {
    .tkh-avisos-panel, body.tkh-eq .tkh-avisos-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .tkh-top .tkh-campana { margin-left: auto; }
    .tkh-top .tkh-campana + .tkh-top-accion { margin-left: 4px; }
    body.tkh-con-tabs .tkh-av-banner { bottom: calc(76px + env(safe-area-inset-bottom)); }
    body.tkh-con-tabs .tkh-av-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
html[data-theme="dark"] .tkh-campana:hover { background: #1d2430; }
html[data-theme="dark"] .tkh-av-item:hover { background: #1a202a; }
.tkh-sb-campana { margin-left: auto; }
.tkh-sb-cab .tkh-sb-logo .tkh-marca { font-size: 16px; } .tkh-sb-cab .tkh-sb-logo .tkh-marca small { font-size: 14px; }
@media (max-width: 991px) { .tkh-sb-campana { display: none; } }
html body .tkh-eq-avisos { position: relative; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0; }
html body .tkh-eq-nav .tkh-eq-avisos { height: 38px; padding: 0 12px; margin: 0; min-width: 0; border-radius: 9px; color: #3d4555; font: 500 14px var(--tkh-font); }
html body .tkh-eq-nav .tkh-eq-avisos:hover { background: #f2f4f7; }
.tkh-eq-nav .tkh-eq-avisos .tkh-av-n { top: 2px; right: 0; }
html[data-theme="dark"] body .tkh-eq-nav .tkh-eq-avisos { color: #c9d0db; }
@media (max-width: 760px) { html body .tkh-eq-tabs .tkh-eq-avisos { flex: 1; flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0; margin: 0; min-width: 0; color: #6b7385; font: 600 11px var(--tkh-font); } }
.tkh-sb-acc { display: flex; align-items: center; gap: 6px; margin: 4px 14px 8px; }
.tkh-sb-acc .tkh-sb-nueva { flex: 1; margin: 0; }
.tkh-sb-acc .tkh-sb-campana { margin: 0; }
.tkh-sb-acc .tkh-campana { width: 38px; height: 38px; border: 1px solid var(--tkh-line); border-radius: 10px; }

/* Atajos «Sin asignar check / limpieza» del calendario (chips con contador; usan variables, valen en claro y oscuro) */
.cal-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
html body .cal-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 6px 6px 12px; border-radius: 999px; border: 1px solid var(--tkh-line-strong);
    background: var(--tkh-surface); color: var(--tkh-text); font: 600 13px/1 var(--tkh-font); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
html body .cal-chip:hover { border-color: var(--tkh-primary); transform: none; }
html body .cal-chip-pto { width: 8px; height: 8px; border-radius: 50%; background: var(--tkh-warning); flex: none; }
html body .cal-chip-n { min-width: 22px; padding: 3px 7px; border-radius: 999px; background: var(--tkh-warning-tint); color: var(--tkh-warning-text); font-size: 12px; text-align: center; }
html body .cal-chip-vacio .cal-chip-pto { background: var(--tkh-success); }
html body .cal-chip-vacio .cal-chip-n { background: var(--tkh-success-tint); color: var(--tkh-success); }
html body .cal-chip[aria-pressed="true"] { background: var(--tkh-primary); border-color: var(--tkh-primary); color: #fff; }
html body .cal-chip[aria-pressed="true"] .cal-chip-n { background: rgba(255,255,255,.2); color: #fff; }
html body .cal-chip:focus-visible { outline: 2px solid var(--tkh-info); outline-offset: 2px; }
@media (max-width: 760px) { html body .cal-chip { font-size: 12px; padding-left: 10px; } }