/* ============================================================
   SIS-2026 | Sistema de Reservas SaaS
   style.css  —  Estilos globales del sistema
   
   CONVENCIÓN:
   - Variables del tenant inyectadas via PHP inline en <head>
   - CSS de módulo solo cubre lo único de esa pantalla
   - Prefijos: .btn- .card- .form- .tabla- .modal- .badge- .alerta-
   ============================================================ */

/* ================================================================
   1. CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
    /* ── Tenant colors (sobreescritas via PHP por hotel) ── */
    --color-primario:         #1a5276;
    --color-secundario:       #2e86c1;
    --color-terciario:        #d6eaf8;

    /* ── Texto ── */
    --color-texto:            #1a1a2e;
    --color-texto-suave:      #5a6a7e;
    --color-texto-inverso:    #ffffff;

    /* ── UI base ── */
    --color-fondo:            #e7ebf1;
    --color-superficie:       #ffffff;
    --color-borde:            #dde2ec;
    --color-borde-fuerte:     #b0bec5;

    /* ── Estados ── */
    --color-exito:            #27ae60;
    --color-exito-bg:         #eafaf1;
    --color-peligro:          #e74c3c;
    --color-peligro-bg:       #fdedec;
    --color-advertencia:      #e67e22;
    --color-advertencia-bg:   #fef5e7;
    --color-info:             #2980b9;
    --color-info-bg:          #ebf5fb;

    /* ── Sidebar ── */
    --sidebar-width:          260px;
    --sidebar-collapsed:      64px;
    --sidebar-bg:             #0f1923;
    --sidebar-texto:          #8899aa;
    --sidebar-hover-bg:       rgba(255,255,255,0.05);
    --sidebar-activo-texto:   #ffffff;

    /* ── Tipografía ── */
    --fuente-base:            'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fuente-mono:            'JetBrains Mono', 'Consolas', 'Courier New', monospace;
    --tam-xs:                 11px;
    --tam-sm:                 12px;
    --tam-base:               14px;
    --tam-lg:                 16px;
    --tam-xl:                 18px;
    --tam-2xl:                22px;
    --tam-3xl:                28px;
    --lh-base:                1.6;

    /* ── Espaciado ── */
    --sp-xs:   4px;
    --sp-sm:   8px;
    --sp-md:   16px;
    --sp-lg:   24px;
    --sp-xl:   32px;
    --sp-2xl:  48px;
    --sp-3xl:  64px;

    /* ── Bordes ── */
    --radio-xs:   3px;
    --radio-sm:   5px;
    --radio-md:   8px;
    --radio-lg:   12px;
    --radio-xl:   16px;
    --radio-pill: 999px;

    /* ── Sombras ── */
    --sombra-sm:    0 1px 3px rgba(15,25,35,0.08), 0 1px 2px rgba(15,25,35,0.04);
    --sombra-md:    0 4px 12px rgba(15,25,35,0.10), 0 2px 4px rgba(15,25,35,0.04);
    --sombra-lg:    0 8px 24px rgba(15,25,35,0.12), 0 4px 8px rgba(15,25,35,0.06);
    --sombra-modal: 0 24px 64px rgba(0,0,0,0.28);

    /* ── Transiciones ── */
    --trans-fast:   0.12s ease;
    --trans-base:   0.22s ease;
    --trans-slow:   0.38s ease;

    /* ── Z-index ── */
    --z-sidebar:  100;
    --z-topbar:    90;
    --z-dropdown: 200;
    --z-modal:    300;
    --z-toast:    400;
}


/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--tam-base);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--fuente-base);
    font-size: var(--tam-base);
    line-height: var(--lh-base);
    color: var(--color-texto);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--color-secundario); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
hr { border: none; border-top: 1px solid var(--color-borde); margin: var(--sp-md) 0; }


/* ================================================================
   3. TIPOGRAFÍA
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-texto);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

h1 { font-size: var(--tam-3xl); }
h2 { font-size: var(--tam-2xl); }
h3 { font-size: var(--tam-xl); }
h4 { font-size: var(--tam-lg); }
h5 { font-size: var(--tam-base); font-weight: 700; }
h6 { font-size: var(--tam-sm); font-weight: 700; }

/* Títulos de página */
.titulo-pagina {
    font-size: var(--tam-2xl);
    font-weight: 700;
    color: var(--color-texto);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.subtitulo-pagina {
    font-size: var(--tam-sm);
    color: var(--color-texto-suave);
    margin-top: 3px;
    font-weight: 400;
}

/* Modificadores de texto */
.txt-xs     { font-size: var(--tam-xs); }
.txt-sm     { font-size: var(--tam-sm); }
.txt-lg     { font-size: var(--tam-lg); }
.txt-xl     { font-size: var(--tam-xl); }
.txt-suave  { color: var(--color-texto-suave); }
.txt-bold   { font-weight: 600; }
.txt-700    { font-weight: 700; }
.txt-mono   { font-family: var(--fuente-mono); }
.txt-center { text-align: center; }
.txt-right  { text-align: right; }
.txt-upper  { text-transform: uppercase; letter-spacing: 0.06em; }
.txt-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


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

/* Área de contenido principal */
.main-content {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--trans-base);
    display: flex;
    flex-direction: column;
}

/* Selector por hermano (en vez de una clase aparte en .main-content,
   agregada antes a mano por JS) -- así el script inline de includes/
   sidebar.php que colapsa el menú por defecto (ver ese archivo) solo
   necesita tocar #sidebar, sin depender de que #main-content ya exista
   en el DOM en ese punto de la carga de la página. */
.sidebar.colapsado ~ .main-content {
    margin-left: var(--sidebar-collapsed);
}

/* Contenedor de página */
.page-container {
    flex: 1;
    padding: var(--sp-lg) var(--sp-xl);
    max-width: 1440px;
    width: 100%;
}

/* Variante sin tope de ancho -- para módulos con listados/tablas anchas
   (Calendario y, desde este cambio, Ocupación/Reservas/Huéspedes/
   Liquidaciones/Actividades/Experiencias/Biblioteca de Medios/
   Configuración) que deben aprovechar toda la pantalla en monitores
   anchos en vez de quedar topados en 1440px como el resto. */
.page-container-ancho {
    max-width: none;
}

/* Cabecera de página */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--sp-lg);
    gap: var(--sp-md);
    flex-wrap: wrap;
}

/* Título y descripción en la misma línea en pantallas normales -- antes
   iban apilados (título arriba, descripción abajo), ocupando una fila más
   de alto en las 84 pantallas del sistema que usan este bloque. Una sola
   regla acá alcanza para todas porque .page-header-info ya es una clase
   compartida -- no hace falta tocar cada módulo. En mobile se apila de
   nuevo (ver media query 768px), ahí no sobra tanto ancho. */
.page-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px var(--sp-sm);
}
.page-header-info .subtitulo-pagina { margin-top: 0; }

.page-header-acciones {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}


/* ================================================================
   5. SISTEMA DE GRILLA
   ================================================================ */
.grid      { display: grid; gap: var(--sp-lg); }
.grid-2    { grid-template-columns: repeat(2, 1fr); }
.grid-3    { grid-template-columns: repeat(3, 1fr); }
.grid-4    { grid-template-columns: repeat(4, 1fr); }
.grid-5    { grid-template-columns: repeat(5, 1fr); }
.grid-1-2  { grid-template-columns: 1fr 2fr; }
.grid-2-1  { grid-template-columns: 2fr 1fr; }
.grid-1-3  { grid-template-columns: 1fr 3fr; }
.grid-3-1  { grid-template-columns: 3fr 1fr; }

/* Flex utilities */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-entre  { display: flex; align-items: center; justify-content: space-between; }
.flex-inicio { display: flex; align-items: center; }
.flex-fin    { display: flex; align-items: center; justify-content: flex-end; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }

.gap-xs  { gap: var(--sp-xs); }
.gap-sm  { gap: var(--sp-sm); }
.gap-md  { gap: var(--sp-md); }
.gap-lg  { gap: var(--sp-lg); }


/* ================================================================
   6. SIDEBAR
   ================================================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: width var(--trans-base);
    overflow: hidden;
}

.sidebar.colapsado { width: var(--sidebar-collapsed); }

/* Logo / branding */
.sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    padding: var(--sp-md) var(--sp-md) var(--sp-sm);
    height: auto;
    min-height: 90px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    flex-shrink: 0;
}

/* Colapsado: ocultar todo el bloque logo/nombre/título, solo quedan íconos */
.sidebar.colapsado .sidebar-logo { display: none; }

.sidebar-logo-img {
    width: 90%;
    max-height: 54px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-logo-texto {
    overflow: hidden;
    text-align: center;
    width: 100%;
}

.sidebar-logo-nombre {
    font-size: var(--tam-sm);
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    text-align: center;
}

.sidebar-logo-sub {
    font-size: 10px;
    color: var(--sidebar-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Nav area */
.sidebar-nav {
    flex: 1;
    padding: var(--sp-sm) 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar { width: 2px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Nav sections -- línea divisoria arriba de cada una (menos la primera,
   PRINCIPAL, que ya tiene el borde del botón de colapsar justo encima) */
.sidebar-seccion {
    padding: var(--sp-md) var(--sp-md) var(--sp-xs);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(136, 153, 170, 0.45);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-seccion:not(:first-child) {
    margin-top: var(--sp-xs);
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* Colapsado: el texto de la sección se oculta, pero el propio bloque (y su
   línea divisoria) se mantiene -- así la línea sigue separando los grupos
   de íconos en vez de desaparecer junto con el texto. */
.sidebar.colapsado .sidebar-seccion {
    padding: var(--sp-xs) 0;
}
.sidebar.colapsado .sidebar-seccion-texto {
    display: none;
}

/* Nav items */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 9px var(--sp-md);
    color: var(--sidebar-texto);
    font-size: var(--tam-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--trans-fast), color var(--trans-fast);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.sidebar-item:hover {
    background-color: var(--sidebar-hover-bg);
    color: #ffffff;
    text-decoration: none;
}

.sidebar-item.activo {
    background-color: rgba(255,255,255,0.07);
    color: var(--sidebar-activo-texto);
}

/* Indicador activo */
.sidebar-item.activo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background-color: var(--color-primario);
    border-radius: 0 3px 3px 0;
}

.sidebar-item-icono {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity var(--trans-fast);
}

.sidebar-item:hover .sidebar-item-icono,
.sidebar-item.activo .sidebar-item-icono { opacity: 1; }

.sidebar-item-texto {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.colapsado .sidebar-item-texto,
.sidebar.colapsado .sidebar-badge {
    display: none;
}

.sidebar-badge {
    background-color: var(--color-primario);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radio-pill);
    flex-shrink: 0;
    line-height: 1;
}

/* Tooltip colapsado */
.sidebar.colapsado .sidebar-item {
    justify-content: center;
}

/* Tooltip flotante al pasar el mouse por un ícono en modo colapsado.
   Se posiciona por JS (SidebarTooltip en main.js) con position:fixed,
   no como ::after position:absolute — el sidebar y su nav tienen
   overflow:hidden/overflow-x:hidden, así que un tooltip absoluto que
   sobresale de los 64px colapsados quedaría recortado y nunca se vería. */
.sidebar-tooltip-flotante {
    position: fixed;
    transform: translateY(-50%);
    background: #1e2a35;
    color: #fff;
    padding: 5px 10px;
    border-radius: var(--radio-sm);
    font-size: var(--tam-sm);
    font-weight: 500;
    white-space: nowrap;
    z-index: var(--z-dropdown);
    box-shadow: var(--sombra-md);
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--trans-fast);
}
.sidebar-tooltip-flotante.visible {
    opacity: 1;
    visibility: visible;
}

/* Footer del sidebar */
.sidebar-footer {
    padding: var(--sp-sm) var(--sp-md);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.sidebar-usuario {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm);
    border-radius: var(--radio-md);
    cursor: pointer;
    transition: background var(--trans-fast);
    overflow: hidden;
}

.sidebar-usuario:hover { background: rgba(255,255,255,0.05); }

.sidebar.colapsado .sidebar-usuario { justify-content: center; }
.sidebar.colapsado .sidebar-usuario-info { display: none; }

.sidebar-usuario-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background-color: var(--color-primario);
    color: white;
    font-size: var(--tam-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sidebar-usuario-nombre {
    font-size: var(--tam-sm);
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-usuario-rol {
    font-size: 10px;
    color: var(--sidebar-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Versión del sistema, al pie del sidebar */
.sidebar-version {
    text-align: center;
    font-size: 10px;
    color: var(--sidebar-texto);
    opacity: .6;
    padding: 6px 0 2px;
}
.sidebar.colapsado .sidebar-version { display: none; }

/* Botón colapsar — arriba, debajo del logo/título */
.sidebar-colapsar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--sp-sm);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: var(--sidebar-texto);
    cursor: pointer;
    transition: color var(--trans-fast);
    flex-shrink: 0;
}

.sidebar-colapsar:hover { color: #ffffff; }

/* Botón flotante para abrir el menú en mobile -- ver includes/sidebar.php.
   Visible solo en mobile (768px, junto a .sidebar que ahí pasa a off-canvas). */
.btn-menu-flotante {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: calc(var(--z-sidebar, 100) + 5);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radio-md, 8px);
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--sombra-md, 0 2px 10px rgba(0,0,0,.15));
    cursor: pointer;
}

/* Overlay mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: calc(var(--z-sidebar) - 1);
    backdrop-filter: blur(1px);
}

/* ================================================================
   6b. FLYOUT SIDEBAR — panel de segundo nivel
   ================================================================ */

/* Chevron dentro del ítem trigger */
.sidebar-item-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.35;
    transition: opacity var(--trans-fast), transform var(--trans-fast);
}
.sidebar.colapsado .sidebar-item-chevron { display: none; }
.sidebar-item[data-flyout]:hover .sidebar-item-chevron { opacity: 0.7; }
.sidebar-item[data-flyout].flyout-abierto .sidebar-item-chevron {
    opacity: 1;
    transform: rotate(90deg);
}

/* Panel flyout */
.sidebar-flyout {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    height: 100vh;
    width: 220px;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: calc(var(--z-sidebar) - 1);
    transform: translateX(-16px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.22s ease,
                left      var(--trans-base);
    border-left: 1px solid rgba(255,255,255,0.07);
    box-shadow: 6px 0 24px rgba(0,0,0,0.4);
    overflow: hidden;
}
/* Ajustar posición cuando el sidebar está colapsado */
.sidebar.colapsado ~ .sidebar-flyout {
    left: var(--sidebar-collapsed);
}
.sidebar-flyout.activo {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Cabecera del flyout */
.sidebar-flyout-header {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 0 var(--sp-md);
    height: 90px;
    min-height: 90px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.sidebar-flyout-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radio-sm);
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--sidebar-texto);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--trans-fast), color var(--trans-fast);
}
.sidebar-flyout-back:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.sidebar-flyout-titulo {
    font-size: var(--tam-sm);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav del flyout */
.sidebar-flyout-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-sm) 0;
}
.sidebar-flyout-seccion {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sidebar-seccion, rgba(255,255,255,0.35));
    padding: var(--sp-sm) var(--sp-md) 4px;
    text-transform: uppercase;
}
.sidebar-flyout-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 9px var(--sp-md);
    color: var(--sidebar-texto);
    font-size: var(--tam-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    transition: background var(--trans-fast), color var(--trans-fast);
}
.sidebar-flyout-item:hover {
    background-color: var(--sidebar-hover-bg);
    color: #fff;
    text-decoration: none;
}
.sidebar-flyout-item.activo {
    background-color: rgba(255,255,255,0.07);
    color: var(--sidebar-activo-texto);
}
.sidebar-flyout-item.activo::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background-color: var(--color-primario);
    border-radius: 0 3px 3px 0;
}
.sidebar-flyout-icono {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.65;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--trans-fast);
}
.sidebar-flyout-item:hover .sidebar-flyout-icono,
.sidebar-flyout-item.activo .sidebar-flyout-icono { opacity: 1; }

/* Overlay del flyout (clic fuera = cerrar) */
.sidebar-flyout-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sidebar) - 2);
    background: rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.sidebar-flyout-overlay.activo {
    opacity: 1;
    pointer-events: auto;
}


/* ================================================================
   7. TOPBAR
   ================================================================ */
.topbar {
    height: 56px;
    min-height: 56px;
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-xl);
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    gap: var(--sp-md);
}

.topbar-izq {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    min-width: 0;
    flex: 1;
}

/* topbar-titulo/der/divider: ya no las usa el topbar del back-office de
   tenant (ver includes/topbar.php, solo breadcrumb ahora), pero admin/ --
   el panel de super-admin, aparte del sistema del tenant -- tiene su
   propio topbar con marcado propio que sí las sigue usando (admin_tenants.php,
   admin_tenant_editar.php, admin_planes.php, etc., todos cargan este mismo
   style.css). No se tocan. */
.topbar-titulo {
    font-size: var(--tam-lg);
    font-weight: 600;
    color: var(--color-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-der {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-shrink: 0;
}

.topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--color-borde);
}

/* ── Notificaciones campanita -- ahora es un ítem más del sidebar (ver
   includes/sidebar.php), no de esta barra. El panel (#notif-panel) vive
   fuera de .notif-wrap en el HTML (ver nota en sidebar.php) -- acá solo
   queda el botón disparador. ───────────────────────────────────────── */
.notif-wrap {
    display: flex;
    align-items: center;
}
.notif-btn {
    position: relative;
    width: 100%;
    border: none;
    background: transparent;
}
#notif-btn .sidebar-item-icono { position: relative; } /* ancla el badge al ícono, no a toda la fila */
.notif-badge {
    /* Fuera de la esquina del ícono (top/right NEGATIVOS), no encima --
       el ícono de la campana mide apenas 17x17px, así que top:2px;right:2px
       (lo que se usaba cuando esto vivía en el topbar, con más aire
       alrededor) tapaba prácticamente todo el ícono acá. */
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-peligro, #e53e3e);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    pointer-events: none;
}
.notif-btn.notif-tiene svg {
    stroke: var(--color-primario);
}
.notif-panel {
    /* position:fixed con top/left fijados por JS (Notificaciones.init(),
       main.js) según la posición real del botón en cada momento -- ya no
       puede ser position:absolute relativo a .notif-wrap porque el sidebar
       tiene overflow:hidden y lo recortaría (mismo motivo por el que
       SidebarTooltip también usa position:fixed). */
    position: fixed;
    width: 340px;
    max-height: 480px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg, 0 8px 24px rgba(0,0,0,.12));
    z-index: calc(var(--z-topbar, 90) + 20);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: dropdownIn .15s ease;
}
.notif-panel.activo {
    display: flex;
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-sm) var(--sp-md);
    border-bottom: 1px solid var(--color-borde);
    flex-shrink: 0;
}
.notif-panel-titulo {
    font-size: var(--tam-sm);
    font-weight: 600;
    color: var(--color-texto);
}
.notif-lista {
    overflow-y: auto;
    flex: 1;
}
.notif-vacio {
    padding: var(--sp-xl) var(--sp-md);
    text-align: center;
    font-size: var(--tam-sm);
    color: var(--color-texto-suave);
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border-bottom: 1px solid var(--color-borde);
    cursor: pointer;
    background: rgba(var(--color-primario-rgb, 26,82,118), .04);
    transition: background var(--trans-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-fondo); }
.notif-item.leida { background: transparent; }
.notif-item.leida:hover { background: var(--color-fondo); }
.notif-item-ico {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radio-sm);
    background: var(--color-fondo);
    color: var(--color-primario);
}
.notif-item-body {
    flex: 1;
    min-width: 0;
}
.notif-item-titulo {
    font-size: var(--tam-sm);
    font-weight: 600;
    color: var(--color-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item.leida .notif-item-titulo { font-weight: 400; }
.notif-item-desc {
    font-size: .72rem;
    color: var(--color-texto-suave);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-fecha {
    font-size: .68rem;
    color: var(--color-texto-suave);
    margin-top: 2px;
}
.notif-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primario);
    flex-shrink: 0;
    margin-top: 6px;
}


/* ================================================================
   8. CARDS
   ================================================================ */
.card {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--sp-lg);
    box-shadow: var(--sombra-sm);
    margin-bottom: 30px;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--sp-lg);
    padding-bottom: var(--sp-md);
    border-bottom: 1px solid var(--color-borde);
    gap: var(--sp-md);
}

.card-titulo {
    font-size: var(--tam-lg);
    font-weight: 600;
    color: var(--color-texto);
    line-height: 1.3;
}

.card-subtitulo {
    font-size: var(--tam-sm);
    color: var(--color-texto-suave);
    margin-top: 3px;
    font-weight: 400;
}

.card-header-acciones {
    display: flex;
    gap: var(--sp-xs);
    align-items: center;
    flex-shrink: 0;
}

.card-footer {
    margin-top: var(--sp-lg);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-sm);
}

/* Stat cards (KPIs del dashboard) */
.stat-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--sp-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
    transition: box-shadow var(--trans-base), transform var(--trans-base);
}

.stat-card:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-1px);
}

.stat-card-icono {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radio-md);
    background-color: var(--color-terciario);
    color: var(--color-primario);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card-valor {
    font-size: var(--tam-3xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-texto);
    letter-spacing: -0.03em;
}

.stat-card-label {
    font-size: var(--tam-sm);
    color: var(--color-texto-suave);
    margin-top: 5px;
    font-weight: 400;
}

.stat-card-delta {
    font-size: var(--tam-xs);
    font-weight: 600;
    margin-top: var(--sp-sm);
    display: flex;
    align-items: center;
    gap: 3px;
}

.stat-card-delta.positivo { color: var(--color-exito); }
.stat-card-delta.negativo { color: var(--color-peligro); }
.stat-card-delta.neutro   { color: var(--color-texto-suave); }


/* ================================================================
   9. FORMULARIOS
   ================================================================ */
.form-grupo { margin-bottom: var(--sp-md); }
.form-grupo:last-child { margin-bottom: 0; }

.form-label {
    display: block;
    font-size: var(--tam-sm);
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.form-label span.req::after {
    content: ' *';
    color: var(--color-peligro);
}

/* Input, select, textarea base */
.form-control {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 var(--sp-md);
    font-size: var(--tam-base);
    color: var(--color-texto);
    background-color: var(--color-superficie);
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-md);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
}

.form-control::placeholder {
    color: #b0bac9;
    font-weight: 400;
}

.form-control:hover:not(:disabled):not([readonly]) {
    border-color: var(--color-borde-fuerte);
}

.form-control:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f5f7fa;
    color: var(--color-texto-suave);
    cursor: not-allowed;
    border-color: var(--color-borde);
}

.form-control.is-error {
    border-color: var(--color-peligro);
}
.form-control.is-error:focus {
    box-shadow: 0 0 0 3px rgba(231,76,60,0.16);
}

.form-control.is-ok {
    border-color: var(--color-exito);
}

/* Textarea */
textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: var(--sp-sm) var(--sp-md);
    resize: vertical;
    line-height: var(--lh-base);
}

/* Select */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Mensajes de ayuda y error */
.form-ayuda {
    font-size: var(--tam-xs);
    color: var(--color-texto-suave);
    margin-top: 4px;
    line-height: 1.5;
}

.form-error {
    font-size: var(--tam-xs);
    color: var(--color-peligro);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

/* Fila de formulario */
.form-fila {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.form-fila-2 { grid-template-columns: repeat(2, 1fr); }
.form-fila-3 { grid-template-columns: repeat(3, 1fr); }
.form-fila-4 { grid-template-columns: repeat(4, 1fr); }
.form-fila-5 { grid-template-columns: repeat(5, 1fr); }

/* Checkbox y Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    cursor: pointer;
    user-select: none;
    min-height: 22px;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primario);
    cursor: pointer;
    flex-shrink: 0;
}

.form-check label { font-size: var(--tam-base); cursor: pointer; }

/* Input con prefijo/sufijo */
.input-grupo {
    display: flex;
    align-items: stretch;
}

.input-grupo .form-control { flex: 1; }

.input-addon {
    height: 38px;
    padding: 0 var(--sp-sm);
    background: #f5f7fa;
    border: 1.5px solid var(--color-borde);
    color: var(--color-texto-suave);
    font-size: var(--tam-sm);
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.input-addon-izq {
    border-right: none;
    border-radius: var(--radio-md) 0 0 var(--radio-md);
}

.input-addon-der {
    border-left: none;
    border-radius: 0 var(--radio-md) var(--radio-md) 0;
}

.input-grupo .input-addon-izq + .form-control {
    border-radius: 0 var(--radio-md) var(--radio-md) 0;
}

/*.input-grupo .form-control + .input-addon-der {}
    /* se aplica automáticamente */

/* Upload de imagen — usado en actividades/blog/experiencias (label + <img>
   de preview + un <div> con ícono y texto "Haz clic para cambiar..."). El
   <label> es inline por defecto y se encoge a su contenido si no se fuerza
   el layout — por eso el display:flex explícito, no es solo estética. */
.form-upload {
    border: 2px dashed var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--sp-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--trans-base), background var(--trans-base);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.form-upload:hover {
    border-color: var(--color-primario);
    background: var(--color-terciario);
}

.form-upload input[type="file"] { display: none; }

/* Bloque ícono + texto que se muestra cuando todavía no hay imagen */
.form-upload > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xs);
    color: var(--color-texto-suave);
}

.form-upload > div svg { color: var(--color-texto-suave); }


/* ================================================================
   10. BOTONES
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    height: 38px;
    padding: 0 var(--sp-lg);
    font-size: var(--tam-sm);
    font-weight: 600;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: var(--radio-md);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--trans-fast),
        border-color var(--trans-fast),
        color var(--trans-fast),
        box-shadow var(--trans-fast),
        opacity var(--trans-fast),
        filter var(--trans-fast);
    white-space: nowrap;
    user-select: none;
    outline: none;
    vertical-align: middle;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 30%, transparent);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Variantes de color ── */
.btn-primario {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-texto-inverso);
}
.btn-primario:hover { filter: brightness(1.1); color: var(--color-texto-inverso); text-decoration: none; }
.btn-primario:active { filter: brightness(0.94); }

.btn-secundario {
    background-color: var(--color-terciario);
    border-color: var(--color-borde);
    color: var(--color-texto);
}
.btn-secundario:hover { background-color: #e4ecf4; border-color: var(--color-borde-fuerte); color: var(--color-texto); text-decoration: none; }

.btn-peligro {
    background-color: var(--color-peligro);
    border-color: var(--color-peligro);
    color: #ffffff;
}
.btn-peligro:hover { filter: brightness(1.08); color: #ffffff; text-decoration: none; }

.btn-exito {
    background-color: var(--color-exito);
    border-color: var(--color-exito);
    color: #ffffff;
}
.btn-exito:hover { filter: brightness(1.08); color: #ffffff; text-decoration: none; }

.btn-advertencia {
    background-color: var(--color-advertencia);
    border-color: var(--color-advertencia);
    color: #ffffff;
}
.btn-advertencia:hover { filter: brightness(1.08); color: #ffffff; text-decoration: none; }

/* Ghost — sin fondo */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-texto-suave);
}
.btn-ghost:hover { background-color: var(--color-fondo); color: var(--color-texto); text-decoration: none; }

/* Outline */
.btn-outline {
    background-color: transparent;
    border-color: var(--color-primario);
    color: var(--color-primario);
}
.btn-outline:hover { background-color: var(--color-primario); color: #ffffff; text-decoration: none; }

/* Outline peligro */
.btn-outline-peligro {
    background-color: transparent;
    border-color: var(--color-peligro);
    color: var(--color-peligro);
}
.btn-outline-peligro:hover { background-color: var(--color-peligro); color: #ffffff; text-decoration: none; }

/* Dark */
.btn-dark {
    background-color: var(--sidebar-bg);
    border-color: var(--sidebar-bg);
    color: #ffffff;
}
.btn-dark:hover { filter: brightness(1.15); color: #ffffff; text-decoration: none; }

/* ── Tamaños ── */
.btn-xs {
    height: 26px;
    padding: 0 var(--sp-sm);
    font-size: var(--tam-xs);
    border-radius: var(--radio-sm);
}

.btn-sm {
    height: 32px;
    padding: 0 var(--sp-md);
    font-size: var(--tam-sm);
    border-radius: var(--radio-sm);
}

.btn-lg {
    height: 46px;
    padding: 0 var(--sp-xl);
    font-size: var(--tam-lg);
    border-radius: var(--radio-lg);
}

.btn-xl {
    height: 54px;
    padding: 0 var(--sp-2xl);
    font-size: var(--tam-xl);
    border-radius: var(--radio-lg);
    font-weight: 700;
}

/* Solo icono */
.btn-icono {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--radio-md);
    flex-shrink: 0;
}
.btn-icono.btn-sm { width: 32px; height: 32px; border-radius: var(--radio-sm); }
.btn-icono.btn-xs { width: 26px; height: 26px; border-radius: var(--radio-xs); }
.btn-icono.btn-lg { width: 46px; height: 46px; border-radius: var(--radio-lg); }

/* Pill */
.btn-pill { border-radius: var(--radio-pill); }

/* Bloque */
.btn-bloque { width: 100%; }

/* Grupo de botones */
.btn-grupo {
    display: inline-flex;
}
.btn-grupo .btn {
    border-radius: 0;
    border-right-width: 0;
}
.btn-grupo .btn:first-child { border-radius: var(--radio-md) 0 0 var(--radio-md); }
.btn-grupo .btn:last-child  { border-radius: 0 var(--radio-md) var(--radio-md) 0; border-right-width: 1.5px; }

/* Loading spinner en botón */
.btn .spinner { width: 14px; height: 14px; border-width: 2px; }


/* ================================================================
   11. TABLAS
   ================================================================ */
.tabla-wrapper {
    overflow-x: auto;
    border-radius: var(--radio-lg);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    scrollbar-width: auto;
    scrollbar-color: var(--color-texto-suave) var(--color-fondo);
}

/* Tablas que no caben en su tarjeta (muchas columnas, ej. listados de
   Reservas/Liquidaciones): en vez de cortarse en seco, se recorren con un
   scroll horizontal. La barra se hace más alta y con color propio a
   propósito -- la barra delgada por defecto del navegador pasa
   desapercibida y el usuario cree que el resto de columnas no existe. */
.table-responsive {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: auto;
    scrollbar-color: var(--color-texto-suave) var(--color-fondo);
}
.table-responsive::-webkit-scrollbar,
.tabla-wrapper::-webkit-scrollbar {
    height: 12px;
}
.table-responsive::-webkit-scrollbar-track,
.tabla-wrapper::-webkit-scrollbar-track {
    background: var(--color-fondo);
    border-radius: var(--radio-lg);
}
.table-responsive::-webkit-scrollbar-thumb,
.tabla-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-texto-suave);
    border-radius: var(--radio-lg);
    border: 2px solid var(--color-fondo);
}
.table-responsive::-webkit-scrollbar-thumb:hover,
.tabla-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--color-primario);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tam-sm);
}

.tabla thead th {
    background-color: #f5f7fb;
    color: var(--color-texto-suave);
    font-size: var(--tam-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    padding: var(--sp-sm) var(--sp-md);
    text-align: left;
    border-bottom: 1.5px solid var(--color-borde);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.tabla thead th.centrado,
.tabla tbody td.centrado { text-align: center; }

.tabla thead th.derecha,
.tabla tbody td.derecha { text-align: right; }

.tabla tbody tr {
    border-bottom: 1px solid var(--color-borde);
    transition: background var(--trans-fast);
}

.tabla tbody tr:last-child { border-bottom: none; }
.tabla tbody tr:hover { background-color: #f8fafc; }

.tabla tbody td {
    padding: 10px var(--sp-md);
    color: var(--color-texto);
    vertical-align: middle;
    line-height: 1.4;
}

/* Celda de acciones */
.tabla-acciones {
    display: flex;
    gap: var(--sp-xs);
    align-items: center;
}

/* Barra de herramientas de tabla */
.tabla-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md);
    border-bottom: 1px solid var(--color-borde);
    gap: var(--sp-md);
    flex-wrap: wrap;
    background: var(--color-superficie);
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}

.tabla-toolbar-izq,
.tabla-toolbar-der {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}

/* Buscador de tabla */
.tabla-buscar { position: relative; }

.tabla-buscar .form-control {
    width: 220px;
    padding-left: 32px;
    height: 34px;
    font-size: var(--tam-sm);
}

.tabla-buscar-ico {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-texto-suave);
    pointer-events: none;
    width: 14px;
    height: 14px;
}

/* Paginación */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-sm) var(--sp-md);
    border-top: 1px solid var(--color-borde);
    background: var(--color-superficie);
    border-radius: 0 0 var(--radio-lg) var(--radio-lg);
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.paginacion-info {
    font-size: var(--tam-xs);
    color: var(--color-texto-suave);
}

.paginacion-btns { display: flex; gap: 3px; }

.paginacion-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-sm);
    font-size: var(--tam-xs);
    font-weight: 600;
    color: var(--color-texto-suave);
    background: var(--color-superficie);
    cursor: pointer;
    transition: all var(--trans-fast);
    text-decoration: none;
    user-select: none;
}
.paginacion-btn:hover   { border-color: var(--color-primario); color: var(--color-primario); text-decoration: none; }
.paginacion-btn.activo  { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.paginacion-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }


/* ================================================================
   12. BADGES, TAGS Y ESTADOS
   ================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radio-pill);
    font-size: var(--tam-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-exito       { background: var(--color-exito-bg);       color: #1a7a45; }
.badge-peligro     { background: var(--color-peligro-bg);     color: #b03028; }
.badge-advertencia { background: var(--color-advertencia-bg); color: #a05a00; }
.badge-info        { background: var(--color-info-bg);        color: #1a5e8a; }
.badge-neutro      { background: #f0f2f6;                     color: var(--color-texto-suave); }
.badge-primario    { background: var(--color-terciario);      color: var(--color-primario); }
.badge-oscuro      { background: #1e2a35;                     color: #ffffff; }

/* Punto de estado */
.estado-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tam-sm);
    white-space: nowrap;
}

.estado-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.estado-dot.activo::before      { background: var(--color-exito); }
.estado-dot.inactivo::before    { background: var(--color-texto-suave); }
.estado-dot.pendiente::before   { background: var(--color-advertencia); }
.estado-dot.cancelado::before   { background: var(--color-peligro); }
.estado-dot.confirmado::before  { background: var(--color-info); }
.estado-dot.checkin::before     { background: var(--color-primario); }
.estado-dot.checkout::before    { background: #7f8c8d; }


/* ================================================================
   13. ALERTAS
   ================================================================ */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
    padding: var(--sp-md);
    border-radius: var(--radio-md);
    border-left: 4px solid;
    font-size: var(--tam-sm);
    line-height: 1.5;
}

.alerta-icono { flex-shrink: 0; margin-top: 1px; }

.alerta-titulo {
    font-weight: 600;
    margin-bottom: 3px;
}

.alerta-exito       { background: var(--color-exito-bg);       border-color: var(--color-exito);       color: #1a6e3a; }
.alerta-peligro     { background: var(--color-peligro-bg);     border-color: var(--color-peligro);     color: #922b21; }
.alerta-advertencia { background: var(--color-advertencia-bg); border-color: var(--color-advertencia); color: #87530a; }
.alerta-info        { background: var(--color-info-bg);        border-color: var(--color-info);        color: #1a4e7a; }


/* ================================================================
   14. MODALES
   ================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-lg);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--trans-base);
}

.modal-overlay.activo {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--color-superficie);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-modal);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(12px);
    transition: transform var(--trans-base);
    overflow: hidden;
}

.modal-overlay.activo .modal { transform: scale(1) translateY(0); }

.modal-sm { max-width: 400px; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 1020px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-lg);
    border-bottom: 1px solid var(--color-borde);
    flex-shrink: 0;
    gap: var(--sp-md);
}

.modal-titulo { font-size: var(--tam-lg); font-weight: 700; line-height: 1.3; }

.modal-cerrar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-texto-suave);
    border-radius: var(--radio-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--trans-fast);
}
.modal-cerrar:hover { background: var(--color-fondo); color: var(--color-texto); }

.modal-body {
    padding: var(--sp-lg);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: var(--sp-md) var(--sp-lg);
    border-top: 1px solid var(--color-borde);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
    flex-shrink: 0;
}

/* Modal de confirmación */
.modal-confirmar-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-md);
}

.modal-confirmar-ico.peligro { background: var(--color-peligro-bg); color: var(--color-peligro); }
.modal-confirmar-ico.advertencia { background: var(--color-advertencia-bg); color: var(--color-advertencia); }
.modal-confirmar-ico.info { background: var(--color-info-bg); color: var(--color-info); }


/* ================================================================
   15. TOASTS
   ================================================================ */
.toast-contenedor {
    position: fixed;
    bottom: var(--sp-lg);
    right: var(--sp-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    max-width: 360px;
    width: 100%;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    padding: var(--sp-md);
    background: #1b2631;
    color: #ffffff;
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-lg);
    font-size: var(--tam-sm);
    pointer-events: auto;
    animation: toastIn 0.28s ease forwards;
    border-left: 3px solid transparent;
}

.toast.saliendo { animation: toastOut 0.28s ease forwards; }

.toast-exito       { border-left-color: var(--color-exito); }
.toast-peligro     { border-left-color: var(--color-peligro); }
.toast-advertencia { border-left-color: var(--color-advertencia); }
.toast-info        { border-left-color: var(--color-info); }

.toast-titulo { font-weight: 600; line-height: 1.3; }
.toast-mensaje { font-size: var(--tam-xs); color: #9aabb8; margin-top: 2px; }

.toast-cerrar {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #9aabb8;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.toast-cerrar:hover { color: #fff; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(16px); }
}


/* ================================================================
   16. DROPDOWN
   ================================================================ */
.dropdown { position: relative; display: inline-block; }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 190px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-md);
    z-index: var(--z-dropdown);
    overflow: hidden;
    display: none;
    animation: dropdownIn 0.18s ease;
}

.dropdown-menu.izq { right: auto; left: 0; }

.dropdown-menu.activo { display: block; }

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 8px var(--sp-md);
    font-size: var(--tam-sm);
    color: var(--color-texto);
    cursor: pointer;
    transition: background var(--trans-fast);
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    line-height: 1.4;
}

.dropdown-item:hover { background: var(--color-fondo); text-decoration: none; }
.dropdown-item.peligro { color: var(--color-peligro); }
.dropdown-item.peligro:hover { background: var(--color-peligro-bg); }
.dropdown-head {
    padding: var(--sp-sm) var(--sp-md) var(--sp-xs);
    font-size: var(--tam-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-texto-suave);
}
.dropdown-divider { height: 1px; background: var(--color-borde); margin: 4px 0; }


/* ================================================================
   17. TABS
   ================================================================ */
.tabs {
    border-bottom: 2px solid var(--color-borde);
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
    padding: var(--sp-sm) var(--sp-lg);
    font-size: var(--tam-sm);
    font-weight: 600;
    color: var(--color-texto-suave);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color var(--trans-fast), border-color var(--trans-fast);
    text-decoration: none;
    display: inline-block;
}

.tab:hover { color: var(--color-texto); text-decoration: none; }
.tab.activo { color: var(--color-primario); border-bottom-color: var(--color-primario); }

.tab-panel { display: none; padding-top: var(--sp-lg); }
.tab-panel.activo { display: block; }


/* ================================================================
   18. BREADCRUMB
   ================================================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--tam-xs);
    color: var(--color-texto-suave);
    margin-bottom: var(--sp-sm);
    flex-wrap: wrap;
}

.breadcrumb-item a { color: var(--color-texto-suave); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--color-primario); }
.breadcrumb-item.activo { color: var(--color-texto); font-weight: 500; }
.breadcrumb-sep { color: var(--color-borde-fuerte); font-size: 10px; }


/* ================================================================
   19. ESTADO VACÍO
   ================================================================ */
.estado-vacio {
    text-align: center;
    padding: var(--sp-3xl) var(--sp-lg);
    color: var(--color-texto-suave);
}

.estado-vacio-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-md);
    opacity: 0.28;
}

.estado-vacio h3 {
    color: var(--color-texto-suave);
    font-size: var(--tam-lg);
    font-weight: 600;
    margin-bottom: var(--sp-sm);
}

.estado-vacio p {
    font-size: var(--tam-sm);
    margin-bottom: var(--sp-lg);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}


/* ================================================================
   20. SKELETON / LOADING
   ================================================================ */
.skeleton {
    background: linear-gradient(90deg, #eef0f4 25%, #e4e6ea 50%, #eef0f4 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: var(--radio-sm);
    display: block;
}

@keyframes skeletonPulse {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-borde);
    border-top-color: var(--color-primario);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    flex-shrink: 0;
}

.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Overlay de carga de página */
.pagina-cargando {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-md);
    font-size: var(--tam-base);
    color: var(--color-texto-suave);
    backdrop-filter: blur(2px);
}


/* ================================================================
   21. SEPARADORES Y UTILIDADES
   ================================================================ */
/* Márgenes */
.mt-xs { margin-top: var(--sp-xs); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }

.mb-xs { margin-bottom: var(--sp-xs); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mb-xl { margin-bottom: var(--sp-xl); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Paddings */
.p-sm   { padding: var(--sp-sm); }
.p-md   { padding: var(--sp-md); }
.p-lg   { padding: var(--sp-lg); }
.px-md  { padding-left: var(--sp-md); padding-right: var(--sp-md); }
.py-sm  { padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
.py-md  { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }

/* Display */
.d-none   { display: none !important; }
.d-block  { display: block; }
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-inline { display: inline; }
.d-inline-flex { display: inline-flex; }

/* Dimensiones */
.w-100  { width: 100%; }
.w-auto { width: auto; }
.h-100  { height: 100%; }
.mw-100 { max-width: 100%; }

/* Overflow */
.over-hidden { overflow: hidden; }
.over-auto   { overflow: auto; }
.over-x-auto { overflow-x: auto; }

/* Border radius */
.rounded    { border-radius: var(--radio-md); }
.rounded-lg { border-radius: var(--radio-lg); }
.rounded-xl { border-radius: var(--radio-xl); }
.rounded-pill { border-radius: var(--radio-pill); }
.rounded-0  { border-radius: 0; }

/* Sombras */
.sombra-sm { box-shadow: var(--sombra-sm); }
.sombra-md { box-shadow: var(--sombra-md); }
.sombra-lg { box-shadow: var(--sombra-lg); }

/* Divisor */
.divider {
    height: 1px;
    background: var(--color-borde);
    margin: var(--sp-md) 0;
}

/* Chip / tag limpios */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-pill);
    font-size: var(--tam-xs);
    font-weight: 500;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Posición */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }


/* ================================================================
   22. RESPONSIVE
   ================================================================ */

/* 1280px — pantallas medianas */
@media (max-width: 1280px) {
    .grid-4  { grid-template-columns: repeat(2, 1fr); }
    .grid-5  { grid-template-columns: repeat(3, 1fr); }
}

/* 1024px — tablets landscape / laptops pequeños */
@media (max-width: 1024px) {
    .grid-3  { grid-template-columns: repeat(2, 1fr); }
    .grid-1-3 { grid-template-columns: 1fr 2fr; }
    .grid-3-1 { grid-template-columns: 2fr 1fr; }
    .page-container { padding: var(--sp-md) var(--sp-lg); }
    .topbar { padding: 0 var(--sp-lg); }
}

/* 768px — tablets portrait */
@media (max-width: 768px) {
    /* Sidebar se mueve off-canvas */
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--trans-base), width var(--trans-base);
        width: var(--sidebar-width) !important;
    }
    .sidebar.movil-abierto {
        transform: translateX(0);
        box-shadow: var(--sombra-lg);
    }
    .sidebar-overlay.activo { display: block; }

    /* El main ocupa todo el ancho */
    .main-content { margin-left: 0 !important; }

    /* Botón flotante para abrir el menú */
    .btn-menu-flotante { display: flex; }

    /* El botón de colapsar/expandir de escritorio no tiene sentido en
       mobile (acá el menú es todo o nada, no hay modo ícono-solo) -- con
       el cajón abierto se veía como un segundo botón hamburguesa adentro
       del primero, confundiendo. */
    .sidebar-colapsar { display: none; }

    /* Grillas a 1 columna */
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .grid-1-2, .grid-2-1, .grid-1-3, .grid-3-1 { grid-template-columns: 1fr; }

    .page-container { padding: var(--sp-md); }
    .topbar { padding: 0 var(--sp-md); }
    .topbar-titulo { font-size: var(--tam-base); } /* usado por admin/ -- ver nota junto a la regla base */

    .page-header { flex-direction: column; }
    .page-header-info { flex-direction: column; align-items: flex-start; }
    .page-header-acciones { width: 100%; }

    .tabla-buscar .form-control { width: 160px; }

    .modal { max-height: calc(100dvh - var(--sp-lg)); }
    .modal-lg, .modal-xl { max-width: 100%; }

    .toast-contenedor {
        bottom: var(--sp-sm);
        right: var(--sp-sm);
        left: var(--sp-sm);
        max-width: none;
    }

    .form-fila-2, .form-fila-3, .form-fila-4 { grid-template-columns: 1fr; }
}

/* 480px — móviles */
@media (max-width: 480px) {
    .titulo-pagina { font-size: var(--tam-2xl); }
    h1 { font-size: var(--tam-2xl); }
    h2 { font-size: var(--tam-xl); }

    .btn-grupo { flex-wrap: wrap; }
    .paginacion { flex-direction: column; align-items: flex-start; }
    .tabla-toolbar { flex-direction: column; align-items: flex-start; }
    .tabla-toolbar-der { width: 100%; }
    .tabla-buscar, .tabla-buscar .form-control { width: 100%; }

    .tabs .tab { padding: var(--sp-sm) var(--sp-md); font-size: var(--tam-xs); }

    .modal-overlay { padding: var(--sp-sm); }
    .modal-header, .modal-body, .modal-footer { padding: var(--sp-md); }

    .stat-card { flex-direction: column; gap: var(--sp-sm); }
}


/* ================================================================
   23. ALIASES Y UTILIDADES DE MÓDULOS
   Clases de conveniencia usadas en páginas PHP del sistema
   ================================================================ */

/* Área principal de contenido (alias de .page-container) */
.contenido {
    flex: 1;
    padding: var(--sp-lg) var(--sp-xl);
}

@media (max-width: 768px) {
    .contenido { padding: var(--sp-md); }
}

/* ---- Stat cards: grilla contenedora + valores ---- */
.stat-cards {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: var(--sp-lg);
}

/* Valores dentro de .stat-card (versión compacta sin icono) */
.stat-card .stat-valor {
    font-size: var(--tam-3xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-texto);
    letter-spacing: -0.02em;
}

.stat-card .stat-label {
    font-size: var(--tam-sm);
    color: var(--color-texto-suave);
    margin-top: 5px;
    font-weight: 400;
}

/* ---- Inputs: aliases de .form-control ---- */
.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 var(--sp-md);
    font-size: var(--tam-base);
    font-family: inherit;
    color: var(--color-texto);
    background-color: var(--color-superficie);
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-md);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
}

.form-textarea {
    height: auto;
    min-height: 80px;
    padding: var(--sp-sm) var(--sp-md);
    resize: vertical;
    line-height: var(--lh-base);
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.form-input::placeholder,
.form-textarea::placeholder { color: #b0bac9; font-weight: 400; }

.form-input:hover:not(:disabled),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled) { border-color: var(--color-borde-fuerte); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: #f5f7fa;
    color: var(--color-texto-suave);
    cursor: not-allowed;
}

/* form-grupo con error: aplica a .form-input/.form-select/.form-textarea */
.form-grupo.con-error .form-input,
.form-grupo.con-error .form-select,
.form-grupo.con-error .form-textarea {
    border-color: var(--color-peligro);
}

/* ---- form-fila-2 / form-fila-3 como clases standalone ---- */
/* (en style.css son solo modificadores de .form-fila, aquí son autónomos) */
.form-fila-2,
.form-fila-3,
.form-fila-4,
.form-fila-5 {
    display: grid;
    gap: var(--sp-md);
}

/* .form-fila-2 ya define grid-template-columns en la sección 9 */
/* estas reglas solo agregan display:grid sin sobreescribir columnas */

/* Acciones de formulario */
.form-acciones {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    padding-top: var(--sp-md);
    border-top: 1px solid var(--color-borde);
    margin-top: var(--sp-lg);
}

/* ---- Badges de estado para tenants ---- */
.badge-activo     { background: var(--color-exito-bg);        color: #1a7a45; }
.badge-inactivo   { background: #f0f2f6;                      color: var(--color-texto-suave); }
.badge-suspendido { background: var(--color-advertencia-bg);  color: #a05a00; }
.badge-pendiente  { background: var(--color-advertencia-bg);  color: #a05a00; }
.badge-cancelado  { background: var(--color-peligro-bg);      color: #b03028; }

/* ---- Alertas: alias de .alerta ---- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radio-md);
    border-left: 4px solid;
    font-size: var(--tam-sm);
    line-height: 1.5;
    margin-bottom: var(--sp-md);
}

.alert-exito       { background: var(--color-exito-bg);       border-color: var(--color-exito);       color: #1a6e3a; }
.alert-peligro     { background: var(--color-peligro-bg);     border-color: var(--color-peligro);     color: #922b21; }
.alert-advertencia { background: var(--color-advertencia-bg); border-color: var(--color-advertencia); color: #87530a; }
.alert-info        { background: var(--color-info-bg);        border-color: var(--color-info);        color: #1a4e7a; }

/* ---- Topbar: botón hamburguesa / toggle ---- */
.topbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radio-sm);
    color: var(--color-texto-suave);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: background var(--trans-fast);
    flex-shrink: 0;
}
.topbar-toggle:hover { background: var(--color-fondo); color: var(--color-texto); }

/* ---- Paginación: texto informativo ---- */
.pagina-info {
    font-size: var(--tam-xs);
    color: var(--color-texto-suave);
}

/* ---- Tabla: celda vacía ---- */
.tabla-vacia {
    text-align: center;
    padding: var(--sp-2xl) var(--sp-md) !important;
    color: var(--color-texto-suave);
    font-style: italic;
}

/* ================================================================
   20. SELECTOR DE MEDIOS (assets/js/media-picker.js)
   Selector global "Elegir de la biblioteca / Subir nueva", disponible
   en cualquier módulo con un campo de imagen/PDF.
   ================================================================ */
.mp-tabs { margin-bottom: var(--sp-md); }
.mp-panel #mp-buscar { margin-bottom: var(--sp-md); }

.mp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--sp-sm);
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
    user-select: none; /* shift+clic para marcar varias no debe disparar selección de texto/imagen nativa */
    -webkit-user-select: none;
}

.mp-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radio-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--color-fondo);
    transition: border-color var(--trans-fast), transform var(--trans-fast);
    -webkit-user-drag: none;
}
.mp-item:hover { border-color: var(--color-primario); transform: translateY(-1px); }
.mp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mp-item.seleccionado {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primario) 25%, transparent);
}
.mp-item.seleccionado::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primario);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.mp-item-pdf {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--sp-xs);
    color: var(--color-texto-suave);
    text-align: center;
}
.mp-item-pdf span {
    font-size: 10px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mp-drop {
    border: 2px dashed var(--color-borde-fuerte);
    border-radius: var(--radio-lg);
    padding: var(--sp-2xl) var(--sp-lg);
    text-align: center;
    cursor: pointer;
    color: var(--color-texto-suave);
    transition: border-color var(--trans-base), background var(--trans-base);
}
.mp-drop svg { margin: 0 auto var(--sp-sm); display: block; }
.mp-drop:hover,
.mp-drop.drag-over { border-color: var(--color-primario); background: var(--color-terciario); }

/* ================================================================
   21. COMPARTIR LINK PÚBLICO (assets/js/main.js — SIS.CompartirLink)
   Modal único reusado por todos los módulos que generan un link
   público (reservas, huéspedes, clientes, liquidaciones, ocupación,
   reportes) — antes cada uno tenía su propio modal, todos distintos.
   ================================================================ */
.compartir-link-caja {
    background: var(--color-fondo-suave, #f3f4f6);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--sp-md);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    color: var(--color-texto);
    word-break: break-all;
    max-height: 100px;
    overflow-y: auto;
}
#compartir-btn-copiar svg,
#compartir-btn-abrir svg { margin-right: var(--sp-xs); vertical-align: -2px; }

/* ================================================================
   22. WIDGETS DEL DASHBOARD — cargados por AJAX (assets/js/dashboard.js)
   ================================================================ */
.dash-skeleton { display: flex; flex-direction: column; gap: var(--sp-sm); }
.dash-skeleton-fila {
    height: 48px;
    border-radius: var(--radio-md);
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: dash-skeleton-pulso 1.4s ease infinite;
}
@keyframes dash-skeleton-pulso {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.dash-fila {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    background: #f8fafc;
    border-radius: var(--radio-md);
    border-left: 3px solid var(--color-primario, #3b82f6);
    margin-bottom: var(--sp-sm);
}
.dash-fila:last-child { margin-bottom: 0; }
.dash-fila-info { flex: 1; min-width: 0; }
.dash-fila-titulo { font-weight: 600; color: var(--color-texto); }
.dash-fila-sub { color: #64748b; font-size: 0.8125rem; margin-top: 2px; }
.dash-fila-extra { font-size: 0.8125rem; color: #64748b; white-space: nowrap; }
.dash-fila.dash-fila-alerta { border-left-color: var(--color-peligro, #ef4444); }

/* Filas del aviso de revisión de impago (index.php + dashboard.js): más
   densas que el resto (varios badges + 2 botones apilados), necesitan más
   aire entre una reserva y la siguiente para no confundir a qué fila
   pertenece cada botón. */
#dash-revision-impago .dash-fila,
#modal-revision-impago-lista .dash-fila {
    margin-bottom: var(--sp-md);
    padding: var(--sp-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
#dash-revision-impago .dash-fila:last-child,
#modal-revision-impago-lista .dash-fila:last-child {
    margin-bottom: 0;
}

.dash-mini-card {
    background: #f1f5f9;
    padding: var(--sp-md);
    border-radius: var(--radio-md);
}
.dash-mini-card-label { font-size: 0.8125rem; color: #64748b; margin-bottom: 0.25rem; }
.dash-mini-card-valor { font-size: 1.5rem; font-weight: 600; color: var(--color-texto); }

/* ── Selector con color (".res-csel") ────────────────────────────────────
   Reemplaza un <select> nativo cuando hace falta mostrar el color de cada
   opción (los <option> nativos no lo permiten, ni tampoco una segunda
   línea de descripción) -- nació en Reservas para el selector de Estado de
   reserva (de ahí el prefijo "res-csel"), 2026-09 se movió acá (antes vivía
   en reservas.css) porque Liquidaciones también lo necesita para su propio
   selector de Estado -- es un componente genérico, no específico de un
   módulo. Estructura esperada:
     .res-csel-wrap > .res-csel-trigger (swatch + texto + chevron)
                     > .res-csel-dropdown > .res-csel-option[data-value][data-color] (× N)
                         > .res-csel-opt-dot + .res-csel-opt-texto (nombre + descripción opcional)
                     > input[type=hidden] (el valor real que se envía)
   JS genérico: initColorSelects() en reservas.js (cargado en varias
   pantallas, no solo Reservas, a pesar del nombre del archivo). */
.res-csel-wrap {
    position: relative;
    user-select: none;
}
.res-csel-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--color-blanco, #fff);
    border: 1px solid var(--color-borde, #ddd);
    border-radius: var(--radio-borde, 6px);
    cursor: pointer;
    min-height: 38px;
    font-size: .875rem;
    transition: border-color .15s;
}
.res-csel-trigger:hover  { border-color: var(--color-primario, #4f46e5); }
.res-csel-wrap.open .res-csel-trigger { border-color: var(--color-primario, #4f46e5); }
.res-csel-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    flex-shrink: 0;
    display: none;
}
.res-csel-text  { flex: 1; }
.res-csel-chevron {
    font-size: .7rem;
    color: var(--color-texto-suave, #888);
    transition: transform .15s;
}
.res-csel-wrap.open .res-csel-chevron { transform: rotate(180deg); }

.res-csel-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    background: var(--color-blanco, #fff);
    border: 1px solid var(--color-borde, #ddd);
    border-radius: var(--radio-borde, 6px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 1000;
}
.res-csel-wrap.open .res-csel-dropdown { display: block; }

.res-csel-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: .875rem;
    transition: background .1s;
}
.res-csel-option:hover   { background: var(--color-fondo, #f5f5f5); }
.res-csel-option.active  {
    background: rgba(79,70,229,.07);
    font-weight: 500;
}
.res-csel-opt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12);
    flex-shrink: 0;
    margin-top: 4px;
}
.res-csel-opt-texto { display: flex; flex-direction: column; min-width: 0; }
.res-csel-opt-desc {
    font-size: .75rem;
    font-weight: 400;
    color: var(--color-texto-suave, #888);
    white-space: normal;
}