/**
 * ux.css — capa común de experiencia de usuario, en TODAS las pantallas
 * (la carga includes/favicon.php junto con assets/js/ux.js). Solo suma
 * comportamiento/feedback; no cambia el diseño de ninguna pantalla.
 */

/* 1. Transición suave entre páginas (View Transitions API, Chrome/Edge 126+,
      Safari 18.2+). En navegadores sin soporte se ignora sin efecto. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; animation-timing-function: ease-out; }

/* 2. Barra de progreso arriba mientras carga la página siguiente */
#ccNavBar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; pointer-events: none;
    background: linear-gradient(90deg, #22c55e, #0d4c94);
    box-shadow: 0 0 10px rgba(34, 197, 94, .6);
    opacity: 0; transition: width .25s ease-out, opacity .3s;
}
#ccNavBar.activo { opacity: 1; }

/* 3. Foco visible SOLO con teclado (accesibilidad), sin anillo al usar el mouse */
:where(a, button, input, select, textarea, [tabindex], .btn, .p-btn):focus-visible {
    outline: 2px solid var(--p-green, #22c55e);
    outline-offset: 2px;
}

/* 4. Toque más "nativo" en celular */
html { -webkit-tap-highlight-color: transparent; }
:where(.btn, .p-btn, button):not(:disabled):active { transform: scale(.97); }
:where(.btn, .p-btn, button) { transition-property: transform, background-color, border-color, color, box-shadow, filter, opacity; }

/* 5. iPhone: los campos con letra menor a 16px hacían zoom al tocarlos */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}

/* 6. Botón ocupado (después de enviar un formulario): spinner y sin doble envío */
.cc-cargando { position: relative; pointer-events: none; opacity: .85; }
.cc-cargando::after {
    content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .45em; vertical-align: -.12em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ccGirar .7s linear infinite;
}
@keyframes ccGirar { to { transform: rotate(360deg); } }

/* 7. Aviso de conexión (sin internet / volvió la conexión) */
#ccRedAviso {
    position: fixed; left: 50%; transform: translateX(-50%) translateY(-140%); top: 10px; z-index: 2999;
    padding: .5rem 1rem; border-radius: 50rem; font-size: .85rem; font-weight: 600; color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .3s ease; pointer-events: none;
    display: flex; align-items: center; gap: .45rem; white-space: nowrap;
}
#ccRedAviso.visible { transform: translateX(-50%) translateY(0); }
#ccRedAviso.sin-red { background: #b91c1c; }
#ccRedAviso.con-red { background: #15803d; }

/* 8. Barras de desplazamiento finitas y del color del tema */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .45) transparent; }

/* 9. Selección de texto con el color de la marca */
::selection { background: rgba(34, 197, 94, .28); }

/* 11. Listas vacías ("No hay…"): mensaje centrado con ícono, en todos los tamaños */
table tr.cc-fila-vacia > td {
    text-align: center !important; padding: 2rem 1rem !important;
    color: var(--p-muted, #64748b) !important; font-style: normal;
    box-shadow: none !important; background: transparent !important;
}
table tr.cc-fila-vacia > td::before {
    content: ""; display: block; width: 44px; height: 44px; margin: 0 auto .6rem; opacity: .55;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z'/%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 16 16'%3E%3Cpath d='M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 12. Celular: tablas de listados como tarjetas (una por fila, "Título: valor").
       Las etiquetas (data-label) las pone ux.js desde el encabezado de la tabla. */
@media (max-width: 575.98px) {
    table.cc-tarjetas { min-width: 0 !important; width: 100% !important; border-collapse: separate; }
    table.cc-tarjetas > thead { display: none; }
    table.cc-tarjetas > tbody, table.cc-tarjetas > tfoot,
    table.cc-tarjetas > tbody > tr, table.cc-tarjetas > tfoot > tr { display: block; width: 100%; }
    table.cc-tarjetas > tbody > tr, table.cc-tarjetas > tfoot > tr {
        margin: 0 0 .65rem; padding: .45rem .8rem;
        border: 1px solid var(--p-border, rgba(148, 163, 184, .35)); border-radius: .85rem;
        background: var(--p-card-bg, var(--bs-body-bg, transparent));
        box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    }
    table.cc-tarjetas > tbody > tr > td, table.cc-tarjetas > tfoot > tr > td,
    table.cc-tarjetas > tbody > tr > th, table.cc-tarjetas > tfoot > tr > th {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem;
        width: 100% !important; max-width: none !important; min-width: 0 !important;
        padding: .32rem 0 !important; border: 0 !important; background: transparent !important;
        box-shadow: none !important; /* Bootstrap pinta las filas "a rayas"/hover con un box-shadow interno */
        text-align: right; white-space: normal !important; word-break: break-word;
    }
    table.cc-tarjetas > tbody > tr > td + td, table.cc-tarjetas > tfoot > tr > td + td {
        border-top: 1px dashed var(--p-border, rgba(148, 163, 184, .25)) !important;
    }
    table.cc-tarjetas td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto; max-width: 48%; text-align: left;
        font-size: .76rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
        color: var(--p-muted, #64748b);
    }
    /* Columna sin título (típicamente los botones de acción): a la derecha, sin etiqueta */
    table.cc-tarjetas td[data-label=""]::before { display: none; }
    table.cc-tarjetas td[data-label=""] { justify-content: flex-end; flex-wrap: wrap; }
    /* Celdas ocultas por el selector de columnas o por clases d-none: siguen ocultas */
    table.cc-tarjetas td[style*="display: none"], table.cc-tarjetas td.d-none { display: none !important; }
    table.cc-tarjetas td.cc-celda-entera { display: block; text-align: center; }
    table.cc-tarjetas tr.cc-fila-vacia { box-shadow: none; border-style: dashed; }
    /* El contenedor ya no necesita scroll lateral */
    .table-responsive:has(> table.cc-tarjetas) { overflow-x: visible; }
}

/* 15. Ficha del complejo: "Reservar" fijo abajo (solo celular) */
#ccReservarBarra { display: none; }
@media (max-width: 991.98px) {
    #ccReservarBarra {
        display: block; position: fixed; left: 12px; right: 12px; z-index: 1035;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        transition: transform .25s ease, opacity .25s ease;
    }
    #ccReservarBarra.cc-con-nav { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    #ccReservarBarra.cc-oculta { transform: translateY(140%); opacity: 0; pointer-events: none; }
    #ccReservarBarra button {
        width: 100%; border: 0; border-radius: 14px; padding: .85rem 1rem;
        font-size: 1rem; font-weight: 700; color: #fff;
        background: linear-gradient(135deg, var(--p-green, #22c55e), #0d4c94);
        box-shadow: 0 10px 26px rgba(13, 76, 148, .35);
        display: flex; align-items: center; justify-content: center; gap: .5rem;
    }
}

/* 14. Validación en el momento (clases que pone ux.js) */
.cc-invalido, .cc-invalido:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .18) !important;
}
.cc-msg-error {
    margin-top: .3rem; font-size: .78rem; font-weight: 500; color: #dc2626;
    display: flex; align-items: flex-start; gap: .3rem;
}
.cc-msg-error::before { content: "⚠"; line-height: 1.2; }
[data-bs-theme="dark"] .cc-msg-error { color: #f87171; }

/* 13. Agenda: turno actual y pasados (clases que pone ux.js solo si se mira HOY) */
.p-agenda-grid .p-slot.cc-ahora {
    position: relative; z-index: 1;
    box-shadow: inset 0 0 0 2px #0ea5e9, 0 0 0 3px rgba(14, 165, 233, .25);
}
.p-agenda-grid .p-slot.cc-ahora .p-slot-hora::after {
    content: "AHORA"; display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: 50rem;
    font-size: .58rem; font-weight: 800; letter-spacing: .06em; vertical-align: .1em;
    background: #0ea5e9; color: #fff;
}
.p-agenda-grid .p-slot.cc-pasado { opacity: .55; }
.p-agenda-grid .p-slot.cc-pasado.libre { filter: grayscale(.6); }
#ccAhoraBtn {
    position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1040;
    display: inline-flex; align-items: center; gap: .35rem;
    border: 0; border-radius: 50rem; padding: .6rem 1rem; font-size: .88rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #0d4c94); box-shadow: 0 8px 22px rgba(13, 76, 148, .35);
}
#ccAhoraBtn.cc-sin-actual { opacity: .85; }
@media (max-width: 991.98px) {
    #ccAhoraBtn { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    /* Celular: las franjas que ya pasaron ocupan menos lugar */
    .p-agenda-grid .p-slot.cc-pasado { min-height: 34px; padding-top: .3rem; padding-bottom: .3rem; }
}

/* 16. Mapas (Leaflet) en tema oscuro: mismas calles de OpenStreetMap con
       fondo oscuro. invert + hue-rotate(180°) deja el fondo oscuro pero
       devuelve parques a verde y agua a azul; solo se filtran las teselas
       (los marcadores de los complejos y los popups quedan con sus colores). */
[data-bs-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.75);
}
[data-bs-theme="dark"] .leaflet-container { background: #1b1d22; }
[data-bs-theme="dark"] .leaflet-control-zoom a,
[data-bs-theme="dark"] .leaflet-bar a {
    background: #1e293b; color: #e2e8f0; border-color: #334155;
}
[data-bs-theme="dark"] .leaflet-control-attribution {
    background: rgba(15, 23, 42, .7) !important; color: #94a3b8;
}
[data-bs-theme="dark"] .leaflet-control-attribution a { color: #7dd3fc; }

/* 17. Tooltip propio de la campana de novedades (sin globito de Bootstrap,
       que quedaba encima del panel) */
.cc-campana[data-tip]:hover::after,
.cc-campana[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    padding: .3rem .6rem; border-radius: .45rem; white-space: nowrap; z-index: 2200;
    font-size: .74rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none;
    background: #0f172a; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); pointer-events: none;
}
.cc-campana[data-tip]:hover::before,
.cc-campana[data-tip]:focus-visible::before {
    content: ""; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-bottom-color: #0f172a; z-index: 2200; pointer-events: none;
}
[data-bs-theme="dark"] .cc-campana[data-tip]:hover::after,
[data-bs-theme="dark"] .cc-campana[data-tip]:focus-visible::after { background: #f1f5f9; color: #0f172a; }
[data-bs-theme="dark"] .cc-campana[data-tip]:hover::before,
[data-bs-theme="dark"] .cc-campana[data-tip]:focus-visible::before { border-bottom-color: #f1f5f9; }
/* Mientras el panel de novedades está abierto, sin tooltip */
body.cc-panel-novedades-abierto .cc-campana::after,
body.cc-panel-novedades-abierto .cc-campana::before { display: none !important; }
@media (hover: none) { .cc-campana[data-tip]::after, .cc-campana[data-tip]::before { display: none !important; } }

/* 10. Movimiento reducido (preferencia del sistema operativo) */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}