/* Ajustes propios sobre la plantilla de administración. Solo lo cargan layout.html y auth.html. */

/* Alias de color para los scripts compartidos con el panel viejo (trend-charts.js lee --brand, --good, …) */
:root, [data-bs-theme] {
    --brand: var(--vz-primary);
    --good: var(--vz-success);
    --warn: var(--vz-warning);
    --bad: var(--vz-danger);
    --muted: var(--vz-secondary-color);
    --line: var(--vz-border-color);
}

/* Íconos del sprite (dibujos rellenos de 24×24) */
.icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -.2em; }
.navbar-menu .navbar-nav .nav-link .icon { width: 18px; height: 18px; margin-right: .665rem; }
[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link .icon { width: 22px; height: 22px; margin-right: 0; }
.btn-topbar .icon { width: 22px; height: 22px; }

/* Marca en el menú lateral (sin logo de imagen) */
.navbar-brand-box .logo { display: flex; align-items: center; height: 70px; text-decoration: none; }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; line-height: 32px; vertical-align: middle; border-radius: 8px; background: var(--vz-primary); color: #fff; font-weight: 700; }
.brand-text { color: #fff; font-family: var(--vz-font-family-secondary); font-size: 1.05rem; font-weight: 600; }

/* Título de la página en la barra superior y botón de tema según el modo */
.topbar-page-title { margin-left: .5rem; font-weight: 600; color: var(--vz-heading-color); }
[data-bs-theme="light"] .theme-icon-dark, [data-bs-theme="dark"] .theme-icon-light { display: none; }
/* En modo oscuro el azul de la plantilla casi no se lee sobre fondo oscuro: los botones suaves usan un tono más claro */
[data-bs-theme="dark"] .btn-soft-primary { --vz-btn-color: color-mix(in srgb, var(--vz-primary) 45%, #fff); }

/* Mensajes de Django: notify.js los pasa a SweetAlert2; esta franja solo se ve si no carga */
.flash-stack { display: grid; gap: .5rem; margin-bottom: 1rem; }

/* Barra fija de abajo en celular (además del menú deslizable de la plantilla) */
.bottom-bar {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 1002; display: flex;
    padding-bottom: env(safe-area-inset-bottom); background: var(--vz-secondary-bg);
    border-top: 1px solid var(--vz-border-color); box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
.bottom-bar a, .bottom-bar button {
    flex: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border: 0; background: none;
    color: var(--vz-secondary-color); font-size: .7rem; text-decoration: none;
}
.bottom-bar .icon { width: 22px; height: 22px; }
.bottom-bar [aria-current="page"] { color: var(--vz-primary); font-weight: 600; }
@media (max-width: 767.98px) {
    .main-content .page-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Semáforo de puntajes y gráficas pequeñas (mismos nombres que el panel viejo) */
.traffic-green { color: var(--vz-success); } .traffic-yellow { color: var(--vz-warning); } .traffic-red { color: var(--vz-danger); }
.chart-box { position: relative; height: 200px; margin-top: .75rem; }
.chart-box--spark { height: 64px; margin-top: .5rem; }
.alert .icon { vertical-align: -.2em; }

/* Flecha de los submenús: la plantilla la dibuja con una fuente de íconos que no se carga; aquí va el mismo
   dibujo de Remix Icon como máscara (la plantilla sigue girándola al abrir). */
.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]::after {
    content: ""; width: 16px; height: 16px; font-family: inherit; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.17 12 8.22 7.05l1.42-1.41L16 12l-6.36 6.36-1.42-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.17 12 8.22 7.05l1.42-1.41L16 12l-6.36 6.36-1.42-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pantallas de encuestas y configuración */
.min-w-0 { min-width: 0; }
.answer-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.pick-scroll { max-height: 280px; overflow: auto; }
.is-inactive { opacity: .6; }

/* Nombres de variables del panel anterior apuntando a la plantilla: el CSS propio de TACOR (tacor.css) los usa
   tal cual y así sigue el modo claro u oscuro de la plantilla. */
:root, [data-bs-theme] {
    --bg: var(--vz-body-bg);
    --surface: var(--vz-secondary-bg);
    --surface-2: var(--vz-tertiary-bg);
    --text: var(--vz-body-color);
    --brand-soft: var(--vz-primary-bg-subtle);
    --brand-text: #fff;
    --good-soft: var(--vz-success-bg-subtle);
    --warn-soft: var(--vz-warning-bg-subtle);
    --bad-soft: var(--vz-danger-bg-subtle);
    --radius: var(--vz-border-radius-lg);
    --radius-sm: var(--vz-border-radius);
    --shadow: var(--vz-box-shadow);
    --backdrop: rgba(10, 15, 25, .5);
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
    --text-small: .8125rem; --text-section: 1.15rem; --text-title: 1.5rem;
    --bottom-h: 62px; --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* SweetAlert2 con los colores, la letra y el modo oscuro del panel */
.swal-lvdh.swal2-popup { background: var(--surface); color: var(--text); border-radius: var(--radius); font-family: inherit; }
.swal-lvdh .swal2-title { color: var(--text); font-size: 1.15rem; }
.swal-lvdh-text { color: var(--text); font-size: .95rem; line-height: 1.5; text-align: center; white-space: pre-line; }
.swal-lvdh-actions { gap: var(--s2); }
.swal-lvdh-toast.swal2-popup { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.swal-lvdh-toast .swal2-title { font-size: .95rem; font-weight: 600; }
.swal2-container { z-index: 1000; }
/* Los toasts van encima de la barra superior (z-index 1002) y justo debajo de ella, sin tapar el menú del usuario */
.swal2-container.swal2-top-end { z-index: 1100; padding-top: calc(70px + .625em); }

/* Formularios de Django dibujados con as_p (p. ej. nueva queja): sus campos toman el aspecto de la plantilla */
.form-auto p { margin-bottom: 1rem; }
.form-auto label { display: block; margin-bottom: .5rem; font-weight: 500; }
.form-auto .form-check-label { display: inline; margin-bottom: 0; font-weight: 400; }
.form-auto :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
    display: block; width: 100%; padding: .5rem .9rem; font-size: .875rem; color: var(--vz-body-color);
    background-color: var(--vz-secondary-bg); border: 1px solid var(--vz-border-color); border-radius: var(--vz-border-radius);
}
.form-auto :is(input, select, textarea):focus { border-color: var(--vz-primary); outline: 0; box-shadow: 0 0 0 .15rem rgba(var(--vz-primary-rgb), .25); }
.form-auto .helptext { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--vz-secondary-color); }
.form-auto .errorlist { margin: 0 0 .25rem; padding: 0; list-style: none; color: var(--vz-danger); font-size: .8125rem; }

/* Casillas más grandes y fáciles de tocar (filtros, formularios) */
.form-check { display: flex; align-items: center; gap: .5rem; min-height: 1.6rem; padding-left: 0; }
.form-check .form-check-input { float: none; flex: none; width: 20px; height: 20px; margin: 0; }
.form-check-label { cursor: pointer; }
.form-switch .form-check-input { width: 36px; }

/* Selector de fecha compromiso (due-picker.js) sobre el calendario de la plantilla */
.due-picker-holder { position: fixed; top: 0; left: 0; width: 0; height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.due-picker.flatpickr-calendar { z-index: 1090; }
/* Las flechas de mes se acomodan contra el renglón del mes, no contra la barra de «Hoy» y el reloj */
.due-picker .flatpickr-months { position: relative; }
.due-picker-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .625rem; border-bottom: 1px solid var(--vz-border-color); }
.due-picker-bar .btn { font-size: .9375rem; }
.due-picker-bar .due-picker-clock { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-left: auto; padding: 0; }
.due-picker-bar .due-picker-clock .icon { width: 22px; height: 22px; }
.due-picker-clock[aria-pressed="true"] { background: var(--vz-primary-bg-subtle); color: var(--vz-primary); }
.due-picker-time.form-select { width: 100%; padding-top: .5rem; padding-bottom: .5rem; font-size: .9375rem; }
.due-picker-foot { padding: .25rem .625rem; border-top: 1px solid var(--vz-border-color); text-align: center; }

/* Campo de fecha de formulario que abre el selector del panel (panel/_date_field.html) */
.date-field { display: flex; align-items: center; gap: .5rem; text-align: left; cursor: pointer; }
.date-field .icon { color: var(--vz-secondary-color); }
.date-field.is-empty span { color: var(--vz-secondary-color); }
.date-field:disabled { cursor: not-allowed; background-color: var(--vz-tertiary-bg); }
.date-field-wrap { position: relative; }
.date-field-wrap .date-field { padding-right: 2.2rem; }
.date-field-clear { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--vz-secondary-color); }
.date-field-clear:hover { background: var(--vz-tertiary-bg); color: var(--vz-danger); }
.date-field-clear .icon { width: 16px; height: 16px; }
/* Flechas del año en el encabezado azul de los calendarios: blancas para que se vean */
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(255, 255, 255, .9); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(255, 255, 255, .9); }
.flatpickr-current-month .numInputWrapper span:hover { background: rgba(255, 255, 255, .15); }

/* Pantalla de acceso: foto del hotel detrás del título, con el velo azul de la plantilla un poco más claro para que se vea */
.auth-one-bg { background-image: url("img/acceso-hotel.6f87fae2bb73.webp"); background-position: center 12%; }
.auth-one-bg .bg-overlay { opacity: .78; }

/* Contador de tarjetas abiertas del usuario en el menú (TACOR y Mi trabajo). */
.navbar-menu .my-tasks-badge { margin-left: auto; margin-right: 1.25rem; font-size: .7rem; }
.navbar-menu .menu-dropdown .nav-link:has(.my-tasks-badge) { display: flex; align-items: center; }
.navbar-menu .menu-dropdown .my-tasks-badge { margin-right: 0; }

/* Número de las tarjetas de indicador del Inicio: grande, para que llene la tarjeta (la de Quejas abiertas es más alta). */
.kpi-value { font-size: clamp(2.4rem, 3.5vw, 3.5rem); line-height: 1.05; margin-bottom: .5rem; }
/* Sin vencidas: píldora clara, porque el azul de la plantilla no se distingue sobre el menú azul. */
.my-tasks-badge--calm { background-color: #ffffff; color: #405189; }