/* =====================================================================
   Duerme Aquí — hoja de estilos principal
   Construida sobre Bootstrap 5.3. Tema claro y oscuro.
   ===================================================================== */

:root {
    /* La identidad es el morado, plano. El degradado a azul se reserva para
       el aviso de suplantacion del superadministrador: ahi distingue de un
       vistazo que no estas en tu cuenta. */
    --s-gradient:       linear-gradient(90deg, #7c3aed, 65%, #2563eb);

    --s-primary:        #7c3aed;
    --s-primary-rgb:    124, 58, 237;
    --s-primary-dark:   #6b32cc;
    --s-primary-soft:   #f4efff;
    /* El morado corporativo sobre fondo claro. En oscuro se aclara:
       como texto no tiene contraste suficiente. Como FONDO de boton
       se sigue usando --s-primary, que ahi si funciona. */
    --s-link:           #7c3aed;
    --s-accent:         #0ea5e9;

    --s-bg:             #f4f6fb;
    --s-surface:        #ffffff;
    --s-surface-2:      #f8fafc;
    --s-border:         #e5e9f0;
    --s-border-strong:  #d4dae4;

    --s-text:           #111a2b;
    --s-text-soft:      #5b6779;
    --s-text-muted:     #8792a5;

    --s-success:        #12a150;
    --s-warning:        #d97706;
    --s-danger:         #dc2626;
    --s-info:           #0891b2;

    --s-sidebar-w:      262px;
    --s-topbar-h:       60px;
    --s-radius:         12px;
    --s-radius-sm:      8px;
    --s-radius-lg:      18px;
    --s-shadow-xs:      0 1px 2px rgba(16, 24, 40, .05);
    --s-shadow-sm:      0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --s-shadow:         0 4px 14px rgba(16, 24, 40, .07);
    --s-shadow-lg:      0 12px 34px rgba(16, 24, 40, .12);
    --s-font:           'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Bootstrap trae su propio azul (#0d6efd) en decenas de componentes.
       Reescribir sus variables es mas fiable que perseguir cada regla. */
    --bs-primary:               #7c3aed;
    --bs-primary-rgb:           124, 58, 237;
    --bs-link-color:            #7c3aed;
    --bs-link-color-rgb:        124, 58, 237;
    --bs-link-hover-color:      #6b32cc;
    --bs-link-hover-color-rgb:  107, 50, 204;
    --bs-primary-text-emphasis: #3a1a70;
    --bs-primary-bg-subtle:     #ebe2fe;
    --bs-primary-border-subtle: #cdb4fc;
}

[data-theme="dark"] {
    --s-bg:             #0d1117;
    --s-surface:        #161b24;
    --s-surface-2:      #1c222d;
    --s-border:         #262d3a;
    --s-border-strong:  #333c4d;
    --s-text:           #e6edf6;
    --s-text-soft:      #9aa6b9;
    --s-text-muted:     #8b98ac;
    --s-primary-soft:   #291a4d;
    --s-link:           #b9a6ff;
    --bs-link-color:            #b9a6ff;
    --bs-link-color-rgb:        185, 166, 255;
    --bs-link-hover-color:      #cdc0ff;
    --bs-link-hover-color-rgb:  205, 192, 255;
    --bs-primary-text-emphasis: #cdc0ff;
    --bs-primary-bg-subtle:     #201a3c;
    --bs-primary-border-subtle: #453a86;
    --s-shadow-sm:      0 1px 3px rgba(0, 0, 0, .4);
    --s-shadow:         0 4px 14px rgba(0, 0, 0, .35);
    --s-shadow-lg:      0 12px 34px rgba(0, 0, 0, .5);
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--s-font);
    background: var(--s-bg);
    color: var(--s-text);
    font-size: .9375rem;
    line-height: 1.55;
}

a { color: var(--s-link); text-decoration: none; }
a:hover { color: var(--s-primary-dark); }
hr { border-color: var(--s-border); opacity: 1; }

::selection { background: rgba(var(--s-primary-rgb), .18); }

/* ---------- Scrollbars ------------------------------------------- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--s-border-strong); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--s-text-muted); }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--s-sidebar-w);
    flex: 0 0 var(--s-sidebar-w);
    background: var(--s-surface);
    border-right: 1px solid var(--s-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    transition: transform .25s ease;
}

.app-sidebar__brand {
    height: var(--s-topbar-h);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--s-border);
    flex: 0 0 auto;
}
.app-sidebar__brand .logo-mark {
    /* Alto fijo y ancho libre: la marca no es cuadrada y forzarla a un
       cuadro la deformaba o la desbordaba. */
    height: 34px; display: flex; align-items: center; flex: 0 0 auto;
}
/* Sin "display" aqui: lo pone la regla del tema, y con mas especificidad que
   ella se veian los dos logotipos a la vez. */
.app-sidebar__brand .logo-mark img { width: auto; }
/* El logotipo escribe "DUERME AQUÍ" en morado oscuro y el descriptivo en
   gris: sobre fondo oscuro no se lee ninguno de los dos. Hay una version con
   esa tinta en claro y se cambia con el tema. Sirve en cualquier sitio donde
   se pinte el logotipo, no solo en la barra lateral. */
.logo-duo__claro  { display: inline-block; }
.logo-duo__oscuro { display: none; }
[data-theme="dark"] .logo-duo__claro  { display: none; }
[data-theme="dark"] .logo-duo__oscuro { display: inline-block; }
.app-sidebar__brand .brand-text { font-weight: 700; letter-spacing: -.02em; color: var(--s-text); font-size: 1.02rem; }
.app-sidebar__brand .brand-sub { font-size: .68rem; color: var(--s-text-muted); text-transform: uppercase; letter-spacing: .08em; }

.app-sidebar__nav { overflow-y: auto; padding: .75rem .65rem 1.5rem; flex: 1 1 auto; }

.nav-group-label {
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
    color: var(--s-text-muted); padding: .95rem .6rem .35rem;
}

.app-sidebar .nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .62rem; border-radius: var(--s-radius-sm);
    color: var(--s-text-soft); font-weight: 500; font-size: .875rem;
    margin-bottom: 1px; transition: background .14s, color .14s;
}
.app-sidebar .nav-link i { font-size: 1.02rem; width: 1.25rem; text-align: center; flex: 0 0 auto; }
.app-sidebar .nav-link:hover { background: var(--s-surface-2); color: var(--s-text); }
.app-sidebar .nav-link.active {
    background: var(--s-primary-soft); color: var(--s-link); font-weight: 600;
}
.app-sidebar .nav-link .badge { margin-left: auto; font-size: .68rem; }
.app-sidebar .nav-link.is-locked { opacity: .55; }
.app-sidebar .nav-link.is-locked:hover { background: transparent; cursor: pointer; }
/* Sub-entrada de un modulo con varias pantallas (p. ej. Chatbot IA) */
.app-sidebar .nav-link--sub { padding-left: 2.1rem; font-size: .84rem; opacity: .85; }
.app-sidebar .nav-link--sub i { font-size: .9rem; }
.app-sidebar .nav-link--sub.active { opacity: 1; }

.app-main {
    flex: 1 1 auto;
    margin-left: var(--s-sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--s-topbar-h);
    background: var(--s-surface);
    border-bottom: 1px solid var(--s-border);
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.1rem;
    position: sticky; top: 0; z-index: 1030;
}

.app-content { padding: 1.35rem; flex: 1 1 auto; }
@media (min-width: 1400px) { .app-content { padding: 1.6rem 2rem; } }

.app-footer {
    padding: 1rem 1.35rem 1.6rem;
    color: var(--s-text-muted);
    font-size: .8rem;
    border-top: 1px solid var(--s-border);
}

/* Banner de impersonacion del superadmin */
.impersonation-bar {
    background: var(--s-gradient);
    color: #fff; font-size: .82rem; font-weight: 500;
    padding: .45rem 1.1rem; display: flex; align-items: center; gap: .6rem;
}
.impersonation-bar .btn { --bs-btn-padding-y: .12rem; --bs-btn-padding-x: .6rem; font-size: .78rem; }

/* ---------- Responsive ------------------------------------------- */
.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--s-shadow-lg); }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(9, 14, 24, .45); z-index: 1035;
    }
    .app-main { margin-left: 0; }
    /* El hueco de abajo deja sitio a la barra fija, incluida la franja del
       indicador de inicio en los moviles que la tienen. */
    .app-content { padding: 1rem .85rem calc(5rem + env(safe-area-inset-bottom)); }
}

/* Barra inferior movil */
.mobile-tabbar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1039;
    background: var(--s-surface); border-top: 1px solid var(--s-border);
    padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom));
}
.mobile-tabbar a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .35rem .2rem; color: var(--s-text-muted); font-size: .66rem; font-weight: 500;
    border-radius: var(--s-radius-sm);
}
.mobile-tabbar a i { font-size: 1.22rem; }
.mobile-tabbar a.active { color: var(--s-link); }
@media (max-width: 991.98px) { .mobile-tabbar { display: flex; } }

/* =====================================================================
   COMPONENTES
   ===================================================================== */
.card {
    background: var(--s-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius);
    box-shadow: var(--s-shadow-xs);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--s-border);
    padding: .85rem 1.1rem;
    font-weight: 600;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin: 0; }
.card-body { padding: 1.1rem; }
.card-footer { background: var(--s-surface-2); border-top: 1px solid var(--s-border); padding: .75rem 1.1rem; }

.page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem; }
.page-head h1 { font-size: 1.42rem; font-weight: 700; letter-spacing: -.021em; margin: 0; }
.page-head .lead-sub { color: var(--s-text-soft); font-size: .875rem; margin: .15rem 0 0; }
.page-head__actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .page-head__actions { margin-left: 0; width: 100%; }
    .page-head__actions .btn { flex: 1 1 auto; }
}

/* ---------- Tarjetas de estadistica ------------------------------ */
.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    font-size: 1.12rem; flex: 0 0 auto;
}
.stat-card .stat-value { font-size: 1.62rem; font-weight: 700; letter-spacing: -.028em; line-height: 1.15; }
.stat-card .stat-label { font-size: .775rem; color: var(--s-text-muted); text-transform: uppercase; letter-spacing: .055em; font-weight: 600; }
.stat-card .stat-meta { font-size: .78rem; color: var(--s-text-soft); }

.tint-primary { background: rgba(124, 58, 237, .11); color: #7c3aed; }
.tint-success { background: rgba(18, 161, 80, .12);  color: #12a150; }
.tint-warning { background: rgba(217, 119, 6, .13);  color: #d97706; }
.tint-danger  { background: rgba(220, 38, 38, .12);  color: #dc2626; }
.tint-info    { background: rgba(8, 145, 178, .12);  color: #0891b2; }
.tint-purple  { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.tint-slate   { background: rgba(100, 116, 139, .14); color: #64748b; }

/* ---------- Tablas ------------------------------------------------ */
.table { --bs-table-bg: transparent; color: var(--s-text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .62rem .75rem; border-bottom-color: var(--s-border); }
.table > thead th {
    font-size: .715rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--s-text-muted); font-weight: 600; background: var(--s-surface-2);
    border-bottom: 1px solid var(--s-border); white-space: nowrap;
}
.table > tbody > tr:hover > * { background: var(--s-surface-2); }
.table-sticky thead th { position: sticky; top: 0; z-index: 2; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tablas en movil: cada fila se convierte en tarjeta */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    /* La tabla deja de maquetarse como tabla: si no, el ancho lo sigue
       marcando el contenido de las celdas y la fila se sale de la pantalla. */
    .table-stack, .table-stack tbody { display: block; width: 100%; }
    .table-stack tbody tr {
        display: block; width: 100%; background: var(--s-surface);
        border: 1px solid var(--s-border); border-radius: var(--s-radius);
        margin-bottom: .65rem; padding: .5rem .2rem;
    }
    .table-stack tbody td {
        display: flex; justify-content: space-between; align-items: center;
        gap: .4rem 1rem; flex-wrap: wrap;
        border: 0 !important; padding: .32rem .75rem !important; text-align: right;
        min-width: 0; overflow-wrap: anywhere;
    }
    /* Sin esto el valor no puede encogerse por debajo de su ancho natural,
       que es lo que desbordaba la fila con textos largos. */
    .table-stack tbody td > * { min-width: 0; max-width: 100%; }
    .table-stack tbody td::before {
        content: attr(data-label);
        font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
        color: var(--s-text-muted); font-weight: 600; text-align: left;
        flex: 0 1 auto; max-width: 45%;
    }
    .table-stack tbody td[data-label=""]::before { content: none; }
    /* Una celda que ocupa toda la fila -el "sin resultados", un resumen- no es
       un par etiqueta/valor: en columna flexible se iba a la derecha. */
    .table-stack tbody td[colspan] {
        display: block; text-align: center;
    }
    .table-stack tbody td[colspan]::before { content: none; }
}

/* ---------- Formularios ------------------------------------------ */
.form-label { font-size: .8rem; font-weight: 600; color: var(--s-text-soft); margin-bottom: .3rem; }
.form-control, .form-select {
    background: var(--s-surface); border-color: var(--s-border-strong); color: var(--s-text);
    border-radius: var(--s-radius-sm); padding: .48rem .7rem; font-size: .89rem;
}
.form-control:focus, .form-select:focus {
    background: var(--s-surface); color: var(--s-text);
    border-color: var(--s-primary); box-shadow: 0 0 0 3px rgba(var(--s-primary-rgb), .14);
}
.form-control::placeholder { color: var(--s-text-muted); }
.form-control:disabled, .form-control[readonly] { background: var(--s-surface-2); }
.form-text { font-size: .78rem; color: var(--s-text-muted); }
.input-group-text { background: var(--s-surface-2); border-color: var(--s-border-strong); color: var(--s-text-soft); font-size: .85rem; }
.form-check-input:checked { background-color: var(--s-primary); border-color: var(--s-primary); }
.form-check-input:focus { border-color: var(--s-primary); box-shadow: 0 0 0 3px rgba(var(--s-primary-rgb), .18); }
.form-switch .form-check-input { width: 2.1em; height: 1.15em; }

fieldset.form-section { border: 0; margin-bottom: 1.6rem; }
fieldset.form-section > legend {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--s-text-muted); border-bottom: 1px solid var(--s-border);
    padding-bottom: .45rem; margin-bottom: .9rem; float: none; width: 100%;
}

/* ---------- Botones ----------------------------------------------- */
.btn { border-radius: var(--s-radius-sm); font-weight: 500; font-size: .875rem; padding: .46rem .85rem; }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn-lg { padding: .65rem 1.3rem; font-size: .98rem; }
.btn-primary {
    --bs-btn-bg: var(--s-primary); --bs-btn-border-color: var(--s-primary);
    --bs-btn-hover-bg: var(--s-primary-dark); --bs-btn-hover-border-color: var(--s-primary-dark);
    --bs-btn-active-bg: var(--s-primary-dark); --bs-btn-active-border-color: var(--s-primary-dark);
    --bs-btn-disabled-bg: var(--s-primary); --bs-btn-disabled-border-color: var(--s-primary);
    box-shadow: 0 1px 2px rgba(var(--s-primary-rgb), .3);
}

/* Bootstrap deja aqui su azul a pelo, sin variable que valga. */
.btn-outline-primary {
    --bs-btn-color: var(--s-link); --bs-btn-border-color: var(--s-primary);
    --bs-btn-hover-bg: var(--s-primary); --bs-btn-hover-border-color: var(--s-primary);
    --bs-btn-active-bg: var(--s-primary-dark); --bs-btn-active-border-color: var(--s-primary-dark);
    --bs-btn-disabled-color: var(--s-link); --bs-btn-disabled-border-color: var(--s-primary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--s-text-soft); --bs-btn-border-color: var(--s-border-strong);
    --bs-btn-hover-bg: var(--s-surface-2); --bs-btn-hover-color: var(--s-text);
    --bs-btn-hover-border-color: var(--s-border-strong);
}
.btn-light { --bs-btn-bg: var(--s-surface-2); --bs-btn-border-color: var(--s-border); --bs-btn-color: var(--s-text); }
.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-grid; place-items: center; }

/* ---------- Badges ------------------------------------------------ */
.badge { font-weight: 600; font-size: .715rem; padding: .32em .6em; border-radius: 6px; letter-spacing: .01em; }
.badge.text-bg-secondary { background: var(--s-border-strong) !important; color: var(--s-text) !important; }
.badge-soft { background: var(--s-surface-2); color: var(--s-text-soft); border: 1px solid var(--s-border); }

/* ---------- Avatares ---------------------------------------------- */
.avatar {
    width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--s-primary-soft); color: var(--s-link); font-weight: 600; font-size: .78rem;
    flex: 0 0 auto; text-transform: uppercase;
}
.avatar-sm { width: 27px; height: 27px; font-size: .68rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; }

/* ---------- Listas / timeline ------------------------------------- */
.list-group-item { background: var(--s-surface); border-color: var(--s-border); color: var(--s-text); }

.timeline { position: relative; padding-left: 1.55rem; }
.timeline::before {
    content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
    width: 2px; background: var(--s-border);
}
.timeline-item { position: relative; padding-bottom: 1.05rem; }
.timeline-item::before {
    content: ''; position: absolute; left: -1.55rem; top: 5px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--s-surface); border: 2px solid var(--s-primary);
}
.timeline-item.is-muted::before { border-color: var(--s-border-strong); }

/* ---------- Estado vacio ------------------------------------------ */
.empty-state { text-align: center; padding: 2.8rem 1rem; color: var(--s-text-muted); }
.empty-state i { font-size: 2.6rem; opacity: .35; display: block; margin-bottom: .7rem; }
.empty-state h5 { color: var(--s-text-soft); font-size: 1rem; font-weight: 600; }

/* ---------- Modales / offcanvas ----------------------------------- */
.modal-content { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); }
.modal-header, .modal-footer { border-color: var(--s-border); }
.offcanvas { background: var(--s-surface); color: var(--s-text); }
.dropdown-menu {
    background: var(--s-surface); border-color: var(--s-border);
    box-shadow: var(--s-shadow-lg); border-radius: var(--s-radius); padding: .35rem;
}
.dropdown-item { color: var(--s-text); border-radius: var(--s-radius-sm); padding: .44rem .65rem; font-size: .875rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--s-surface-2); color: var(--s-text); }
.dropdown-divider { border-color: var(--s-border); }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--s-text-muted); font-weight: 600; }

/* ---------- Alertas ----------------------------------------------- */
.alert { border-radius: var(--s-radius); border: 1px solid transparent; font-size: .875rem; padding: .75rem 1rem; }
.alert-success { background: rgba(18,161,80,.1);  border-color: rgba(18,161,80,.22);  color: #0b7a3c; }
.alert-danger  { background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.22);  color: #b91c1c; }
.alert-warning { background: rgba(217,119,6,.1);  border-color: rgba(217,119,6,.24);  color: #b45309; }
.alert-info    { background: rgba(8,145,178,.1);  border-color: rgba(8,145,178,.22);  color: #0e7490; }
[data-theme="dark"] .alert-success { color: #4ade80; }
[data-theme="dark"] .alert-danger  { color: #fca5a5; }
[data-theme="dark"] .alert-warning { color: #fcd34d; }
[data-theme="dark"] .alert-info    { color: #7dd3fc; }

/* Las utilidades de color de Bootstrap (.text-danger, .text-success...) usan
   el color puro de la paleta, pensado para fondo claro. Sobre fondo oscuro se
   quedan cortas de contraste, asi que se aclaran igual que las alertas. */
[data-theme="dark"] .text-danger  { color: #fca5a5 !important; }
[data-theme="dark"] .text-success { color: #4ade80 !important; }
[data-theme="dark"] .text-warning { color: #fcd34d !important; }
[data-theme="dark"] .text-info    { color: #7dd3fc !important; }
[data-theme="dark"] .text-primary { color: #b9a6ff !important; }
[data-theme="dark"] .text-muted   { color: var(--s-text-muted) !important; }

/* Los botones "outline" pintan el texto con el color puro de la paleta de
   Bootstrap (#0d6efd, #dc3545...), pensado para fondo claro. Sobre oscuro se
   aclaran; el fondo al pasar el raton sigue siendo el color solido. */
[data-theme="dark"] .btn-outline-primary   { --bs-btn-color: #b9a6ff; --bs-btn-border-color: #5b4b9e; }
[data-theme="dark"] .btn-outline-danger    { --bs-btn-color: #fca5a5; --bs-btn-border-color: #a34848; }
[data-theme="dark"] .btn-outline-success   { --bs-btn-color: #4ade80; --bs-btn-border-color: #3d8f57; }
[data-theme="dark"] .btn-outline-warning   { --bs-btn-color: #fcd34d; --bs-btn-border-color: #a3822d; }
[data-theme="dark"] .btn-outline-info      { --bs-btn-color: #7dd3fc; --bs-btn-border-color: #3f7f9c; }
[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--s-text-soft); --bs-btn-border-color: var(--s-border-strong); }

/* ---------- Pestanas ---------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--s-border); gap: .15rem; }
.nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; color: var(--s-text-soft);
    font-weight: 500; font-size: .875rem; padding: .55rem .85rem; border-radius: 0;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--s-border-strong); color: var(--s-text); }
.nav-tabs .nav-link.active {
    background: transparent; color: var(--s-link);
    border-bottom-color: var(--s-primary); font-weight: 600;
}
.nav-pills .nav-link { color: var(--s-text-soft); font-size: .85rem; border-radius: var(--s-radius-sm); }
.nav-pills .nav-link.active { background: var(--s-primary); }

/* =====================================================================
   PLANIFICADOR / CALENDARIO
   ===================================================================== */
.planner { overflow: auto; border: 1px solid var(--s-border); border-radius: var(--s-radius); background: var(--s-surface); }
.planner table { border-collapse: separate; border-spacing: 0; min-width: max-content; margin: 0; }
.planner th, .planner td { border-right: 1px solid var(--s-border); border-bottom: 1px solid var(--s-border); }

.planner .col-unit {
    position: sticky; left: 0; z-index: 3; background: var(--s-surface);
    min-width: 176px; max-width: 176px; padding: .4rem .65rem;
    box-shadow: 1px 0 0 var(--s-border);
}
.planner thead th {
    position: sticky; top: 0; z-index: 4; background: var(--s-surface-2);
    font-size: .68rem; font-weight: 600; color: var(--s-text-soft);
    text-align: center; padding: .28rem .1rem; min-width: 42px; white-space: nowrap;
}
/* Dos filas de cabecera: el mes arriba, los dias debajo. La segunda se pega
   justo por debajo de la primera para que ambas sigan visibles al bajar. */
.planner thead tr.planner-meses th {
    top: 0; z-index: 4; height: 24px; padding: .25rem .5rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
    color: var(--s-text); background: var(--s-surface-2);
    text-align: left; border-bottom: 1px solid var(--s-border);
    box-shadow: inset 1px 0 0 var(--s-border);
}
.planner thead tr.planner-meses th.col-unit { z-index: 6; box-shadow: 1px 0 0 var(--s-border); }
/* El nombre del mes se queda pegado mientras su tramo siga a la vista: en un
   rango largo, si no, se pierde al desplazarse y vuelves a no saber en que mes
   estas. 176px es el ancho de la columna fija de la izquierda. */
.planner thead tr.planner-meses th span { position: sticky; left: 188px; display: inline-block; }
.planner thead tr.planner-meses th.col-unit span { position: static; }
.planner thead tr.planner-dias th { top: 24px; }
.planner thead th.col-unit { z-index: 5; text-align: left; font-size: .72rem; }
.planner thead th.is-weekend { background: var(--s-primary-soft); }
.planner thead th.is-today { background: var(--s-primary); color: #fff; }
.planner thead th small { display: block; font-size: .62rem; font-weight: 500; opacity: .75; }

.planner tbody td.day { height: 38px; padding: 0; position: relative; background: var(--s-surface); }
.planner tbody td.day.is-weekend { background: var(--s-surface-2); }
.planner tbody td.day.is-today { box-shadow: inset 2px 0 0 var(--s-primary); }
.planner tbody td.day.is-past { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(128,140,160,.07) 4px, rgba(128,140,160,.07) 8px); }

.planner .unit-name { font-weight: 600; font-size: .8rem; line-height: 1.2; }
.planner .unit-type { font-size: .7rem; color: var(--s-text-muted); }

.res-bar {
    position: absolute; top: 4px; bottom: 4px; left: 2px;
    border-radius: 7px; padding: 0 .45rem; color: #fff;
    font-size: .715rem; font-weight: 600; line-height: 30px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; z-index: 2; box-shadow: var(--s-shadow-xs);
    transition: filter .13s, transform .13s;
}
.res-bar:hover { filter: brightness(1.07); transform: translateY(-1px); z-index: 6; }
.res-bar.status-pending     { background: linear-gradient(135deg, #f59e0b, #d97706); }
.res-bar.status-confirmed   { background: linear-gradient(135deg, #9061f9, #7c3aed); }
.res-bar.status-checked_in,
.res-bar.status-in_house    { background: linear-gradient(135deg, #10b981, #059669); }
.res-bar.status-checked_out { background: linear-gradient(135deg, #94a3b8, #64748b); }
.res-bar.status-block       { background: repeating-linear-gradient(45deg, #64748b, #64748b 6px, #475569 6px, #475569 12px); }
.res-bar .bar-meta { font-weight: 500; opacity: .88; }
.res-bar.is-unpaid::after {
    content: ''; position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: #fecaca;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .55);
}

/* ---------- Vista mensual ---------------------------------------- */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--s-border); border: 1px solid var(--s-border); border-radius: var(--s-radius); overflow: hidden; }
.month-grid .dow { background: var(--s-surface-2); padding: .4rem; text-align: center; font-size: .7rem; font-weight: 600; text-transform: uppercase; color: var(--s-text-muted); letter-spacing: .05em; }
.month-grid .day-cell { background: var(--s-surface); min-height: 96px; padding: .35rem .4rem; }
.month-grid .day-cell.is-other { background: var(--s-surface-2); opacity: .6; }
.month-grid .day-cell.is-today .day-num { background: var(--s-primary); color: #fff; }
.month-grid .day-num { font-size: .76rem; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.month-grid .occ-pill { font-size: .66rem; border-radius: 5px; padding: .08rem .3rem; margin-top: .18rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   ADD-ONS
   ===================================================================== */
.addon-card { height: 100%; transition: box-shadow .16s, transform .16s, border-color .16s; }
.addon-card:hover { box-shadow: var(--s-shadow); transform: translateY(-2px); }
.addon-card.is-locked { border-style: dashed; }
.addon-card.is-locked .addon-icon { filter: grayscale(1); opacity: .55; }
.addon-card.is-active { border-color: rgba(18, 161, 80, .4); }
.addon-icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    font-size: 1.32rem; background: var(--s-primary-soft); color: var(--s-link);
}
.addon-lock {
    position: absolute; top: .7rem; right: .7rem;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--s-surface-2); color: var(--s-text-muted);
    display: grid; place-items: center; font-size: .8rem; border: 1px solid var(--s-border);
}

/* =====================================================================
   MOTOR DE RESERVAS / PAGINA PUBLICA
   ===================================================================== */
.pub-body { background: #fff; color: #10131a; font-family: var(--s-font); }
.pub-nav {
    position: sticky; top: 0; z-index: 1020; background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid #ecf0f5;
}
.pub-nav .nav-link { color: #4a5568; font-weight: 500; font-size: .9rem; }
.pub-nav .nav-link:hover { color: var(--pub-primary, #7c3aed); }

.pub-hero { position: relative; min-height: 460px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.pub-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
.pub-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,26,.35) 0%, rgba(8,14,26,.72) 100%); }
.pub-hero__content { position: relative; z-index: 2; width: 100%; }
.pub-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.033em; text-shadow: 0 2px 22px rgba(0,0,0,.35); }
.pub-hero p.lead { font-size: clamp(.98rem, 1.6vw, 1.16rem); max-width: 42rem; opacity: .95; }

.search-box {
    background: #fff; border-radius: 16px; box-shadow: 0 14px 44px rgba(16,24,40,.18);
    padding: 1.05rem; color: #10131a;
}
.search-box .form-label { color: #6b7688; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.search-box .form-control, .search-box .form-select { border-radius: 10px; }

.room-card { border: 1px solid #e9edf3; border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .18s, transform .18s; height: 100%; }
.room-card:hover { box-shadow: 0 10px 30px rgba(16,24,40,.1); transform: translateY(-2px); }
.room-card__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: #eef1f6; }
.room-card__body { padding: 1rem 1.1rem 1.15rem; }
.room-feature { font-size: .78rem; color: #5b6779; display: inline-flex; align-items: center; gap: .3rem; }
.price-tag { font-size: 1.5rem; font-weight: 800; letter-spacing: -.028em; color: var(--pub-primary, #7c3aed); }
.price-tag small { font-size: .75rem; font-weight: 500; color: #7a8698; letter-spacing: 0; }

.engine-steps { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; font-size: .82rem; }
.engine-steps .step { display: flex; align-items: center; gap: .42rem; color: #8b95a6; font-weight: 500; }
.engine-steps .step .num {
    width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
    background: #eef1f6; font-size: .76rem; font-weight: 700; color: #8b95a6;
}
.engine-steps .step.is-active { color: var(--pub-primary, #7c3aed); }
.engine-steps .step.is-active .num { background: var(--pub-primary, #7c3aed); color: #fff; }
.engine-steps .step.is-done { color: #12a150; }
.engine-steps .step.is-done .num { background: #12a150; color: #fff; }
.engine-steps .sep { color: #cdd5e0; }

.summary-sticky { position: sticky; top: 84px; }

.pub-footer { background: #0f1723; color: #97a3b6; padding: 2.6rem 0 1.6rem; margin-top: 3.5rem; font-size: .875rem; }
.pub-footer a { color: #cbd5e1; }
.pub-footer a:hover { color: #fff; }
.pub-footer h6 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .8rem; }

/* =====================================================================
   UTILIDADES
   ===================================================================== */
.text-soft { color: var(--s-text-soft) !important; }
.text-dim  { color: var(--s-text-muted) !important; }
.fs-7 { font-size: .8rem !important; }
.fs-8 { font-size: .72rem !important; }
.fw-semibold { font-weight: 600 !important; }
.cursor-pointer { cursor: pointer; }
.border-soft { border-color: var(--s-border) !important; }
.bg-surface { background: var(--s-surface) !important; }
.bg-surface-2 { background: var(--s-surface-2) !important; }
.rounded-xl { border-radius: var(--s-radius-lg) !important; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.progress { background: var(--s-surface-2); height: .5rem; border-radius: 99px; }
.progress-bar { border-radius: 99px; }

.divider-text {
    display: flex; align-items: center; gap: .75rem; color: var(--s-text-muted);
    font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
    margin: 1.1rem 0;
}
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--s-border); }

.kv-list { display: grid; gap: .1rem; }
.kv-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .34rem 0; border-bottom: 1px dashed var(--s-border); }
.kv-list > div:last-child { border-bottom: 0; }
.kv-list dt, .kv-list .k { color: var(--s-text-muted); font-size: .82rem; font-weight: 500; }
.kv-list dd, .kv-list .v { margin: 0; font-size: .87rem; font-weight: 500; text-align: right; }

/* Impresion */
@media print {
    .app-sidebar, .app-topbar, .app-footer, .mobile-tabbar, .page-head__actions,
    .no-print, .impersonation-bar { display: none !important; }
    .app-main { margin-left: 0; }
    .app-content { padding: 0; }
    .card { border: 1px solid #ddd; box-shadow: none; }
    body { background: #fff; }
}

/* Login */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .auth-wrap { grid-template-columns: 1.05fr .95fr; } }
/* El logotipo lleva el nombre en morado oscuro sobre transparente: puesto
   encima del morado de marca se perdia dentro del fondo. En vez de retocar
   el logotipo, el panel pasa a ser lavanda clara, que es el fondo para el
   que esta dibujado, y el texto se oscurece con el. */
.auth-side {
    background: linear-gradient(150deg, #faf8ff 0%, #f1eaff 46%, #e2d5ff 100%);
    color: #23143f; padding: 3rem; display: none; position: relative; overflow: hidden;
    border-right: 1px solid rgba(124, 58, 237, .14);
}
@media (min-width: 992px) { .auth-side { display: flex; flex-direction: column; justify-content: space-between; } }
/* ---- Las burbujas del fondo ----
   Cada burbuja son dos capas: la de fuera se mueve en horizontal y la de
   dentro en vertical, cada una con su propio ritmo. Eso es lo que da el
   movimiento de burbuja.

   Si las dos duraciones fueran iguales o multiplos, la burbuja iria y
   vendria siempre por el mismo sitio. Al ser numeros primos entre si (29 y
   41 segundos), el desfase entre los dos ejes cambia sin parar: a ratos
   describe circulos amplios, a ratos vueltas cortas, y tarda veinte minutos
   en repetir el recorrido. Nadie llega a ver el bucle.

   Y van con "alternate" y ease-in-out: asi frenan al llegar al extremo y
   vuelven, en vez de saltar de golpe al punto de partida. */
.auth-burbuja {
    position: absolute; display: block; will-change: translate;
    animation: burbuja-x 29s ease-in-out infinite alternate;
}
.auth-burbuja i {
    display: block; width: 100%; height: 100%; border-radius: 50%;
    will-change: translate, scale;
    animation: burbuja-y 41s ease-in-out infinite alternate,
               burbuja-aliento 23s ease-in-out infinite alternate;
}
.auth-burbuja--1 {
    width: 520px; height: 520px; top: -150px; right: -170px;
    animation-duration: 29s; animation-delay: -7s;
}
.auth-burbuja--1 i {
    background: rgba(124, 58, 237, .07);
    animation-delay: -13s, -5s;
}
/* La pequeña se mueve un poco mas y con otros tiempos: dos burbujas que van
   al compas se ven como un decorado, no como algo vivo. */
.auth-burbuja--2 {
    width: 330px; height: 330px; bottom: -110px; left: -90px;
    animation-duration: 37s; animation-delay: -21s;
}
.auth-burbuja--2 i {
    background: rgba(124, 58, 237, .05);
    animation-duration: 26s, 31s; animation-delay: -9s, -17s;
}

@keyframes burbuja-x     { from { translate: -34px 0; } to { translate: 34px 0; } }
@keyframes burbuja-y     { from { translate: 0 -30px; } to { translate: 0 30px; } }
@keyframes burbuja-aliento { from { scale: .94; } to { scale: 1.07; } }

/* Quien pide menos movimiento no quiere esto de fondo mientras escribe su
   contraseña. */
@media (prefers-reduced-motion: reduce) {
    .auth-burbuja, .auth-burbuja i { animation: none; }
}
.auth-side .auth-feature i { color: var(--s-primary); opacity: 1; }

/* En tema oscuro el panel claro seria un bloque de luz en medio de la
   pantalla. Ahi va el morado profundo y el logotipo de tinta clara, que se
   cambia solo. */
[data-theme="dark"] .auth-side {
    background: linear-gradient(150deg, #170d2e 0%, #2a1554 52%, #3f1f7d 100%);
    color: #f1f5f9; border-right-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .auth-burbuja--1 i { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .auth-burbuja--2 i { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .auth-side .auth-feature i { color: #c4b5fd; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-form__inner { width: 100%; max-width: 396px; }
.auth-feature { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; position: relative; z-index: 2; }
.auth-feature i { font-size: 1.05rem; opacity: .9; margin-top: .15rem; }

/* Los campos de fecha de flatpickr heredan el ancho de su contenedor */
input.flatpickr-input.form-control,
input.form-control.flatpickr-input[readonly] { width: 100%; background: var(--s-surface); }
.flatpickr-calendar { font-family: var(--s-font); font-size: .85rem; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--s-primary); border-color: var(--s-primary); }
.flatpickr-day.inRange { background: var(--s-primary-soft); border-color: var(--s-primary-soft); box-shadow: -5px 0 0 var(--s-primary-soft), 5px 0 0 var(--s-primary-soft); }

/* Importes largos en pantallas estrechas */
@media (max-width: 575.98px) {
    .stat-card .stat-value { font-size: 1.28rem; word-break: break-word; }
    /* La etiqueta parte por palabras, nunca por la mitad de una: en dos
       columnas se leia "CONVERSAC / IONES". */
    .stat-card .stat-label { font-size: .7rem; word-break: normal; overflow-wrap: break-word; hyphens: none; }
    .page-head h1 { font-size: 1.24rem; }
    .card-body { padding: .9rem; }
    .card-header { padding: .7rem .9rem; }
    .kv-list dd, .kv-list .v { font-size: .82rem; }
    .modal-dialog { margin: .5rem; }
}

/* Tablas apiladas: separador visual por fila */
@media (max-width: 767.98px) {
    .table-stack tbody tr { box-shadow: var(--s-shadow-xs); }
    .table-stack tbody td:first-child { padding-top: .5rem !important; }
    .table-stack tbody td:last-child { padding-bottom: .5rem !important; }
    .table-stack tbody td .btn-group { margin-left: auto; }
}

/* Calendario de fecha comodo en pantallas tactiles */
@media (max-width: 575.98px) {
    .flatpickr-calendar { width: calc(100vw - 2rem) !important; max-width: 320px; }
    .flatpickr-day { max-width: none; height: 38px; line-height: 38px; }
}

/* =====================================================================
   Widget de chat de la pagina publica (add-on Chatbot IA)
   ===================================================================== */
.schat { position: fixed; bottom: 18px; z-index: 1080; font-size: .92rem; }
.schat--right { right: 18px; }
.schat--left  { left: 18px; }

.schat__fab {
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--schat-color); color: #fff; font-size: 1.35rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.24); cursor: pointer;
  display: grid; place-items: center; transition: transform .18s ease, box-shadow .18s ease;
}
.schat__fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.schat__fab-close { display: none; }
.schat.is-open .schat__fab-open { display: none; }
.schat.is-open .schat__fab-close { display: block; }

.schat__panel {
  position: absolute; bottom: 70px; width: 370px; max-width: calc(100vw - 36px);
  height: 520px; max-height: calc(100vh - 120px);
  background: #fff; border: 1px solid #e3e8ef; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15,23,42,.22);
  display: flex; flex-direction: column; overflow: hidden;
}
.schat--right .schat__panel { right: 0; }
.schat--left  .schat__panel { left: 0; }

.schat__head {
  display: flex; align-items: center; gap: .65rem; padding: .75rem .9rem;
  background: var(--schat-color); color: #fff; flex: 0 0 auto;
}
.schat__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2); flex: 0 0 auto; }
.schat__name { font-weight: 600; line-height: 1.1; }
.schat__status { font-size: .72rem; opacity: .9; display: flex; align-items: center; gap: .3rem; }
.schat__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; }
.schat__close { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 1.05rem;
  opacity: .85; cursor: pointer; }
.schat__close:hover { opacity: 1; }

.schat__log { flex: 1 1 auto; overflow-y: auto; padding: .9rem; display: flex;
  flex-direction: column; gap: .5rem; background: #f7f9fc; }
.schat__row { display: flex; }
.schat__row--user { justify-content: flex-end; }
.schat__bubble { max-width: 82%; padding: .55rem .75rem; border-radius: 14px;
  background: #fff; border: 1px solid #e3e8ef; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; }
.schat__row--user .schat__bubble { background: var(--schat-color); color: #fff; border-color: transparent; }

.schat__typing { display: flex; gap: 4px; align-items: center; padding: .7rem .8rem; }
.schat__typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa5b5;
  animation: schatBlink 1.2s infinite ease-in-out; }
.schat__typing span:nth-child(2) { animation-delay: .18s; }
.schat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes schatBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

.schat__suggest { display: flex; gap: .35rem; flex-wrap: wrap; padding: .5rem .9rem 0; flex: 0 0 auto; }
.schat__suggest button { border: 1px solid #dbe2ec; background: #fff; border-radius: 999px;
  padding: .22rem .6rem; font-size: .76rem; color: #475569; cursor: pointer; }
.schat__suggest button:hover { border-color: var(--schat-color); color: var(--schat-color); }

.schat__form { display: flex; gap: .4rem; padding: .7rem .9rem .3rem; flex: 0 0 auto; }
.schat__form input { flex: 1 1 auto; border: 1px solid #dbe2ec; border-radius: 999px;
  padding: .5rem .85rem; outline: 0; font-size: .9rem; min-width: 0; }
.schat__form input:focus { border-color: var(--schat-color); }
.schat__form button { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--schat-color); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; font-size: .95rem; overflow: hidden; }
/* Mientras el asistente piensa. Mantiene el tamano: quien avisa es la burbuja. */
.schat__form button:disabled,
.schat__form input:disabled { opacity: .55; cursor: default; }
.schat__legal { font-size: .66rem; color: #94a3b8; text-align: center; padding: .25rem .9rem .6rem; }

@media (max-width: 480px) {
  .schat { bottom: 14px; }
  .schat--right { right: 14px; }
  .schat--left { left: 14px; }
  .schat__panel { width: calc(100vw - 28px); height: min(78vh, 560px); }
}

/* ---------- Galeria publica y visor -------------------------------- */
.galeria-thumb {
    display: block; width: 100%; padding: 0; border: 0; background: none;
    border-radius: 12px; overflow: hidden; cursor: zoom-in;
}
.galeria-thumb img {
    width: 100%; height: 170px; object-fit: cover; display: block;
    transition: transform .28s ease, filter .28s ease;
}
.galeria-thumb:hover img { transform: scale(1.04); filter: brightness(.94); }
.galeria-thumb:focus-visible { outline: 3px solid var(--pub-primary, #7c3aed); outline-offset: 2px; }

/* El visor es el MISMO deslizador que el de las tarjetas: las flechas de
   Bootstrap, los puntos abajo y el contador arriba a la derecha. Lo unico
   que cambia es el tamaño. Aqui no hay panel ni marco: solo la foto sobre
   el fondo del modal, asi que el modal se queda sin fondo ni borde. */
.galeria-modal { background: transparent; border: 0; box-shadow: none; }
/* El escenario se ajusta a la foto que toca: el JavaScript le pasa su
   proporcion. Si el escenario fuera fijo, el contador y los puntos
   quedarian flotando lejos de la imagen, que es lo que pasaba antes. */
.galeria-slider .carousel-item {
    aspect-ratio: var(--galeria-aspecto, 1.5);
    display: none;                 /* Bootstrap lo cambia a block en el activo */
}
.galeria-slider .carousel-item.active,
.galeria-slider .carousel-item-next,
.galeria-slider .carousel-item-prev { display: block; }
.galeria-slider .carousel-item img {
    width: 100%; height: 100%; object-fit: contain; user-select: none;
    border-radius: 10px;
}
/* Por debajo de 576px Bootstrap le pone a su dialogo un margen fijo en vez
   de "auto", asi que un dialogo mas estrecho que la pantalla se queda
   pegado a la izquierda. */
.galeria-dialogo { margin-inline: auto; }

/* El visor recibe el foco al abrirse para que las flechas del teclado pasen
   fotos. Ese foco lo pone el codigo, no el usuario, asi que su recuadro azul
   solo confunde: no hay nada que "esté seleccionado". */
.galeria-slider:focus { outline: none; }

/* El aspa va en la esquina de la pantalla, no dentro de la foto: ahi arriba
   a la derecha ya esta el contador.

   No es un .btn-close de Bootstrap: ese pinta su aspa con un filtro que
   invierte el elemento ENTERO, fondo incluido, y el boton salia como un
   circulo blanco macizo. Con un icono normal no hay filtro que invertir. */
.galeria-cerrar {
    position: fixed; top: 1rem; right: 1rem; z-index: 10;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(15, 23, 42, .55); color: #fff; font-size: 1.05rem;
    transition: background-color .15s;
}
.galeria-cerrar:hover, .galeria-cerrar:focus-visible { background: rgba(15, 23, 42, .85); }

/* Una foto se mira mejor con la pagina apagada detras. */
body.galeria-abierta .modal-backdrop { --bs-backdrop-opacity: .88; }

@media (max-width: 575px) {
    .galeria-thumb img { height: 130px; }
    .galeria-cerrar { top: .5rem; right: .5rem; padding: .55rem; }
}


/* ---------- Calendario · vista de un dia ---------------------------- */
.jor-lista { display: flex; flex-direction: column; }
.jor-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .9rem; border-bottom: 1px solid var(--s-border);
    transition: background .12s;
}
.jor-item:last-child { border-bottom: 0; }
.jor-item:hover { background: var(--s-surface-2); }
.jor-item__unit {
    flex: 0 0 auto; min-width: 40px; text-align: center;
    font-weight: 700; font-size: .78rem; color: var(--s-text-soft);
    background: var(--s-surface-2); border: 1px solid var(--s-border);
    border-radius: 7px; padding: .2rem .35rem;
}
.jor-item__name { font-weight: 600; font-size: .86rem; line-height: 1.25; }
.jor-item__meta { font-size: .72rem; color: var(--s-text-muted); }

.jor-rejilla {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.jor-celda {
    border: 1px solid var(--s-border); border-radius: var(--s-radius);
    padding: .6rem .7rem; background: var(--s-surface);
    border-left-width: 3px;
}
.jor-celda--entra     { border-left-color: #10b981; }
.jor-celda--ocupada   { border-left-color: var(--s-primary); }
.jor-celda--bloqueada { border-left-color: #64748b; }
.jor-celda--libre     { border-left-color: var(--s-border); background: var(--s-surface-2); }

/* ---------- Recorte de imagen --------------------------------------- */
.recorte-marco {
    position: relative; display: inline-block; max-width: 100%;
    line-height: 0; margin: 0 auto; user-select: none; touch-action: none;
    /* La mascara oscura es una sombra enorme que cubre todo lo que queda
       fuera de la seleccion. Sin recortarla aqui se sale del marco y tapa la
       cabecera y los botones del modal. */
    overflow: hidden;
}
.recorte-img {
    display: block; max-width: 100%; max-height: 55vh;
    /* El damero deja ver la transparencia de un logotipo PNG. */
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%),
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-color: #fff;
}
.recorte-sel {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    border: 1px solid #fff; cursor: move; opacity: 0;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55);
    outline: 1px solid rgba(15, 23, 42, .6);
}
.recorte-sel.is-lista { opacity: 1; }
.recorte-tirador {
    position: absolute; width: 14px; height: 14px; background: #fff;
    border: 2px solid var(--s-primary); border-radius: 3px;
}
/* Por dentro de la seleccion: al recortar el marco, unos tiradores a caballo
   del borde se verian cortados justo cuando el recuadro toca el borde de la
   imagen, que es como empieza. */
.recorte-tirador--nw { left: 0; top: 0;     cursor: nwse-resize; }
.recorte-tirador--ne { right: 0; top: 0;    cursor: nesw-resize; }
.recorte-tirador--sw { left: 0; bottom: 0;  cursor: nesw-resize; }
.recorte-tirador--se { right: 0; bottom: 0; cursor: nwse-resize; }

.modal-body:has(.recorte-marco) { text-align: center; }

/* El resumen del motor mientras el servidor recalcula el total. */
#resumenReserva { transition: opacity .15s ease; }
#resumenReserva.is-recalculando { opacity: .55; }

/* ---------- Selector de iconos -------------------------------------- */
.icon-picker { cursor: pointer; }
.icon-picker:hover { border-color: var(--s-primary); }

.icon-grid__fila {
    display: grid; gap: .35rem;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
}
.icon-grid__titulo {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--s-text-muted);
    margin: .9rem 0 .5rem;
}
.icon-grid__titulo:first-child { margin-top: 0; }
.icon-grid__item {
    aspect-ratio: 1; display: grid; place-items: center;
    border: 1px solid var(--s-border); border-radius: 8px;
    background: var(--s-surface); color: var(--s-text);
    font-size: 1.15rem; cursor: pointer; padding: 0;
    transition: background .12s, border-color .12s, transform .12s;
}
.icon-grid__item:hover {
    background: var(--s-primary-soft); border-color: var(--s-primary);
    transform: translateY(-1px);
}
.icon-grid__item.is-actual { border-color: var(--s-primary); box-shadow: inset 0 0 0 1px var(--s-primary); }

/* ---------- Galeria de fotografias del panel ------------------------ */
.foto-card {
    position: relative; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--s-border); background: var(--s-surface-2);
    aspect-ratio: 4 / 3;
}
.foto-card.is-portada { border-color: var(--s-primary); box-shadow: 0 0 0 1px var(--s-primary); }
.foto-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.foto-card__etiqueta {
    position: absolute; top: .35rem; left: .35rem;
    background: var(--s-primary); color: #fff;
    font-size: .66rem; font-weight: 600; letter-spacing: .02em;
    padding: .15rem .45rem; border-radius: 999px;
}
.foto-card__acciones {
    position: absolute; right: .35rem; bottom: .35rem;
    display: flex; gap: .25rem;
    opacity: 0; transition: opacity .15s ease;
}
.foto-card:hover .foto-card__acciones,
.foto-card:focus-within .foto-card__acciones { opacity: 1; }
.foto-card__acciones .btn {
    --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .78rem;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .3);
}
/* En tactil no hay hover: los botones se quedan siempre visibles. */
@media (hover: none) {
    .foto-card__acciones { opacity: 1; }
}

/* El icono del aviso se alinea con la PRIMERA linea del texto: centrado se
   descoloca en cuanto el mensaje ocupa dos lineas, y con un margen fijo no
   cuadra con ninguna. Compartiendo interlineado, encaja siempre. */
.alert .alert__icono {
    flex: 0 0 auto;
    line-height: inherit;
    font-size: 1.05rem;
}
.alert.d-flex { line-height: 1.5; }

/* ---------- Cuenta atras del bloqueo de reserva --------------------- */
.reserva-reloj {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .75rem 1rem; border-radius: 12px;
    background: rgba(var(--s-primary-rgb), .07);
    border: 1px solid rgba(var(--s-primary-rgb), .22);
    color: #3b2a8f; line-height: 1.45;
}
.reserva-reloj > .bi { font-size: 1.15rem; line-height: inherit; flex: 0 0 auto; }
.reserva-reloj__texto { font-size: .9rem; }
.reserva-reloj.is-urgente {
    background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .3); color: #92400e;
}
.reserva-reloj.is-caducado {
    background: rgba(220, 38, 38, .09); border-color: rgba(220, 38, 38, .3); color: #991b1b;
}
.reserva-reloj.is-caducado a { color: inherit; font-weight: 600; }

/* Safari en iOS ignora user-scalable=no desde iOS 10. Esto quita el zoom por
   doble toque, que es el que se dispara sin querer al pulsar botones. */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

/* ---------- Fotos con flechas en la tarjeta de alojamiento ---------- */
/* Las flechas NO se tocan: son las de Bootstrap, las mismas que la galeria de
   la ficha del alojamiento. Tener unas dentro y otras fuera es peor que
   cualquier mejora de contraste. */
.card-slider { position: relative; }

/* La foto es un enlace a la ficha: sin esto, arrastrar para pasar fotos en
   movil termina abriendo el alojamiento. */
.card-slider .carousel-item a { display: block; -webkit-user-drag: none; }
.card-slider .carousel-item img { pointer-events: none; }

/* El contador va ARRIBA a la derecha, no abajo: los puntos estan centrados en
   el borde inferior y con muchas fotos ocupan todo el ancho, asi que abajo se
   pisarian. Arriba no pueden tocarse. */
.foto-slider__cuenta {
    position: absolute; top: .55rem; right: .55rem; z-index: 2;
    background: rgba(15, 23, 42, .62); color: #fff;
    font-size: .72rem; font-weight: 600;
    padding: .14rem .5rem; border-radius: 999px;
    pointer-events: none;
}

/* Los puntos de Bootstrap miden 30px fijos: con veinte fotos suman 600px y se
   salen de una tarjeta. Aqui se reparten el ancho disponible. */
.foto-slider .carousel-indicators { margin-bottom: .6rem; }
.foto-slider .carousel-indicators [data-bs-target] {
    flex: 1 1 0; width: auto; max-width: 30px; min-width: 6px;
}

/* ---------- Conversaciones del chatbot ---------------------------- */
/* Dos columnas: la lista a la izquierda, el chat a la derecha. Las dos
   con su propio scroll, porque el hilo puede tener cien mensajes y la
   cabecera de la conversacion tiene que quedarse a la vista. */
.conv {
    display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1rem;
    height: calc(100vh - var(--s-topbar-h) - 9rem); min-height: 420px;
}
.conv__lista, .conv__chat {
    flex-direction: column; min-width: 0; min-height: 0;
    background: var(--s-surface); border: 1px solid var(--s-border);
    border-radius: var(--s-radius); box-shadow: var(--s-shadow-xs); overflow: hidden;
}
.conv__filtro { padding: .6rem; border-bottom: 1px solid var(--s-border); }
.conv__scroll { overflow-y: auto; flex: 1 1 auto; }
.conv__pagina {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .6rem; border-top: 1px solid var(--s-border); background: var(--s-surface-2);
}

.conv__item {
    display: flex; gap: .6rem; padding: .7rem .75rem; text-decoration: none;
    color: var(--s-text); border-bottom: 1px solid var(--s-border);
}
.conv__item:hover { background: var(--s-surface-2); color: var(--s-text); }
.conv__item.is-activa { background: var(--s-primary-soft); }
.conv__item.is-activa .conv__nombre { color: var(--s-link); }
.conv__avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    display: inline-grid; place-items: center;
    background: var(--s-primary-soft); color: var(--s-link); font-size: 1rem;
}
.conv__datos { display: flex; flex-direction: column; gap: .18rem; min-width: 0; flex: 1 1 auto; }
.conv__cabecera { display: flex; align-items: baseline; gap: .4rem; }
.conv__nombre { font-weight: 600; font-size: .86rem; flex: 1 1 auto; min-width: 0; }
.conv__hora { font-size: .7rem; color: var(--s-text-muted); flex: 0 0 auto; }
.conv__previo { font-size: .78rem; color: var(--s-text-soft); }
.conv__pies { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.conv__chat-cab {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem;
    border-bottom: 1px solid var(--s-border); background: var(--s-surface-2); flex: 0 0 auto;
}
.conv__hilo {
    flex: 1 1 auto; overflow-y: auto; padding: 1rem .9rem;
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--s-bg);
}
.conv__dia { text-align: center; margin: .5rem 0 .2rem; }
.conv__dia span {
    background: var(--s-surface); border: 1px solid var(--s-border);
    color: var(--s-text-muted); font-size: .7rem; font-weight: 600;
    padding: .18rem .6rem; border-radius: 999px;
}
.conv__aviso {
    align-self: center; font-size: .72rem; color: var(--s-text-muted);
    background: var(--s-surface); border: 1px dashed var(--s-border);
    padding: .2rem .6rem; border-radius: 999px;
}
.conv__msg { display: flex; max-width: 100%; }
.conv__msg--cliente { justify-content: flex-start; }
.conv__msg--bot { justify-content: flex-end; }

/* El color del texto se fija SIEMPRE junto al fondo. Antes la burbuja del
   cliente se quedaba sin fondo y con texto blanco: no se leia nada. */
.conv__burbuja {
    max-width: min(80%, 620px); padding: .5rem .75rem .45rem;
    border-radius: var(--s-radius); font-size: .87rem; line-height: 1.45;
    word-break: break-word; box-shadow: var(--s-shadow-xs);
}
.conv__msg--cliente .conv__burbuja {
    background: var(--s-surface); border: 1px solid var(--s-border);
    color: var(--s-text); border-bottom-left-radius: 4px;
}
.conv__msg--bot .conv__burbuja {
    background: var(--s-primary); color: #fff; border-bottom-right-radius: 4px;
}
.conv__sello { display: block; font-size: .67rem; opacity: .7; text-align: right; margin-top: .15rem; }

@media (max-width: 991.98px) {
    /* Sin sitio para dos columnas: se enseña una, la que toque. */
    .conv { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--s-topbar-h) - 11rem); }
    .conv__burbuja { max-width: 88%; }
}

/* Icono que gira mientras se espera a una consulta (recargar modelos, etc.). */
@keyframes sGirar { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: sGirar .9s linear infinite; }

/* ---------- Componentes de Bootstrap que traen su azul a pelo ------ */
/* Estos no leen --bs-primary: lo llevan escrito dentro. Se repiten aqui
   para que la paginacion, las listas y las barras sigan la marca. */
.pagination {
    --bs-pagination-active-bg: var(--s-primary);
    --bs-pagination-active-border-color: var(--s-primary);
    --bs-pagination-hover-color: var(--s-link);
    --bs-pagination-focus-color: var(--s-link);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--s-primary-rgb), .22);
}

.list-group {
    --bs-list-group-active-bg: var(--s-primary);
    --bs-list-group-active-border-color: var(--s-primary);
}

.progress, .progress-stacked { --bs-progress-bar-bg: var(--s-primary); }

.form-range::-webkit-slider-thumb { background-color: var(--s-primary); }
.form-range::-moz-range-thumb     { background-color: var(--s-primary); }

.dropdown-menu { --bs-dropdown-link-active-bg: var(--s-primary); }

.table-primary {
    --bs-table-bg: var(--s-primary-soft);
    --bs-table-color: var(--s-text);
    --bs-table-border-color: var(--s-border);
}

/* ---------- Zona para soltar archivos ----------------------------- */
/* El campo nativo sigue dentro y sigue mandando: esto solo lo anuncia y
   da el resaltado al pasar algo por encima. */
.dropzone {
    border: 1.5px dashed var(--s-border-strong); border-radius: var(--s-radius);
    background: var(--s-surface-2); padding: .85rem;
    transition: border-color .14s, background-color .14s, box-shadow .14s;
}
.dropzone__pista {
    display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem;
    color: var(--s-text-soft); font-size: .82rem; line-height: 1.35;
}
.dropzone__icono { font-size: 1.3rem; color: var(--s-link); flex: 0 0 auto; }
.dropzone .form-control { background: var(--s-surface); }

.dropzone.is-encima {
    border-color: var(--s-primary); border-style: solid;
    background: var(--s-primary-soft);
    box-shadow: 0 0 0 4px rgba(var(--s-primary-rgb), .14);
}
.dropzone.is-encima .dropzone__pista { color: var(--s-link); font-weight: 600; }
/* Los hijos no deben recibir el dragleave ni robar el drop. */
.dropzone.is-encima * { pointer-events: none; }

.dropzone__aviso {
    margin-top: .5rem; font-size: .78rem; font-weight: 500;
    color: var(--s-warning);
}

/* Sin raton no se arrastra nada: ahi el texto solo estorba. */
@media (hover: none), (pointer: coarse) {
    .dropzone { border-style: solid; padding: 0; background: transparent; }
    .dropzone__pista { display: none; }
}

/* ---------- Seleccion de fotografias en lote ---------------------- */
.foto-lote {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-bottom: .7rem;
}
.foto-card { cursor: pointer; }
/* La casilla va sobre la foto, que puede ser blanca o negra: sin el aro
   blanco se pierde en la mitad de las fotografias. */
.foto-card__check {
    position: absolute; top: .35rem; right: .35rem; z-index: 3;
    width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer;
    background-color: rgba(255, 255, 255, .92);
    border-color: rgba(15, 23, 42, .35);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .35);
}
.foto-card.is-marcada { box-shadow: 0 0 0 3px var(--s-primary); }
.foto-card.is-marcada img { opacity: .72; }

/* ---------- Orden de las galerias ---------- */
/* El asa: arrastrar la tarjeta entera peleaba con la seleccion en lote y,
   en movil, con el propio desplazamiento de la pagina. */
.foto-card__asa {
    position: absolute; top: .35rem; left: .35rem; z-index: 4;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; padding: 0;
    border: 0; border-radius: 7px;
    background: rgba(255, 255, 255, .92); color: var(--s-text);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .35);
    cursor: grab; opacity: 0; transition: opacity .15s ease;
}
.foto-card:hover .foto-card__asa,
.foto-card:focus-within .foto-card__asa,
.foto-orden:hover .foto-card__asa,
.foto-orden:focus-within .foto-card__asa { opacity: 1; }
@media (hover: none) { .foto-card__asa { opacity: 1; } }
.foto-card__asa:active { cursor: grabbing; }

/* La etiqueta y la estrella se pintan en todas las fotos y es la clase
   is-portada la que decide cual se ve: al reordenar arrastrando, la portada
   cambia sin recargar la pagina. */
.foto-card:not(.is-portada) > .foto-card__etiqueta,
.foto-orden:not(.is-portada) > .foto-card__etiqueta { display: none; }
.foto-card.is-portada .foto-card__portada { display: none; }
/* La etiqueta comparte esquina con el asa: se corre a su derecha. */
.foto-card__etiqueta { left: 2.2rem; }
.foto-orden.is-portada img { box-shadow: 0 0 0 2px var(--s-primary); }

/* Mientras se arrastra: el hueco de destino y la copia que sigue al dedo. */
.foto-fantasma { opacity: .35; }
.foto-arrastrando { cursor: grabbing; }

/* La foto al lado del texto tiene que llegar hasta abajo. El carrusel mide
   lo que mida su foto, asi que sin esto quedaba una franja blanca debajo
   cuando la columna del texto era mas alta. Se estiran todas sus capas:
   basta con que una se quede a su aire para que la cadena se rompa. */
.card-slider--alto,
.card-slider--alto .carousel-inner,
.card-slider--alto .carousel-item,
.card-slider--alto .carousel-item > a { height: 100%; }
.card-slider--alto .carousel-item img { height: 100%; object-fit: cover; }

/* ---------- Stripe ---------- */
/* Banda del modo prueba. Fija y roja a proposito: con ella a la vista nadie
   confunde un cobro de prueba con uno de verdad. */
.stripe-test-bar {
    position: sticky; top: 0; z-index: 1080;
    background: #dc2626; color: #fff; text-align: center;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    padding: .35rem 1rem;
}
.stripe-test-bar a { color: #fff; text-decoration: underline; }

/* Opciones del paso de pago del motor */
.pay-option { cursor: pointer; border-color: #e3e8ef !important; transition: border-color .15s, background .15s; }
.pay-option:hover { border-color: var(--pub-primary, #7c3aed) !important; }
.pay-option:has(input:checked) {
    border-color: var(--pub-primary, #7c3aed) !important;
    background: color-mix(in srgb, var(--pub-primary, #7c3aed) 5%, #fff);
}

/* Banda de impago en el panel */
.billing-alert-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    background: #fef3f2; border-bottom: 1px solid #fecdca; color: #912018;
    padding: .6rem 1.25rem; font-size: .85rem;
}
[data-theme="dark"] .billing-alert-bar { background: #3b1414; border-color: #7a271a; color: #fecdca; }