/* ========================================================================== tkh-theme.css — sistema de diseño THEKEYHOST (rama rediseno-ui) Se carga el último en (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; --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; } /* -------------------------------------------------------------------------- 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