/* ==========================================================================
   Lockey PMS — sistema de diseño compartido.
   Inspirado en el casillero de llaves de una recepción: piedra/marfil en la
   estructura general, latón desaturado como acento, y un tratamiento de
   madera oscura + placa de latón reservado para las tarjetas de habitación
   (el objeto real que administra esta app). Cargar antes del CSS propio de
   cada vista para que puedan sobreescribir puntualmente si hace falta.
   ========================================================================== */

:root {
    /* Estructura: piedra/marfil, no crema */
    --stone-50: #efede7;
    --surface: #ffffff;
    --surface-sunken: #f7f5f0;
    --line: #e2ddd1;
    --line-strong: #d3ccba;

    /* Texto */
    --ink: #211d18;
    --ink-soft: #6e6559;
    --ink-faint: #a39a8b;

    /* Acento: latón desaturado, no dorado de stock */
    --brass: #9c7a3c;
    --brass-deep: #6f5726;
    --brass-tint: #efe6d2;
    --brass-rgb: 156, 122, 60;

    /* Zona firma: madera oscura + latón (tarjetas de habitación) */
    --wood: #2a2420;
    --wood-deep: #1c1815;
    --wood-line: rgba(240, 230, 210, 0.14);
    --plate: #d8b978;

    /* Estados (desaturados, coherentes con la paleta, no colores de semáforo) */
    --status-available: #3f8f68;
    --status-available-soft: #e4f0e9;
    --status-occupied: #3d6f96;
    --status-occupied-soft: #e2ebf1;
    --status-checkout: #b3722f;
    --status-checkout-soft: #f3e6d7;
    --status-cleaning: #756c5e;
    --status-cleaning-soft: #e9e6df;
    --status-maintenance: #a23e36;
    --status-maintenance-soft: #f3e0de;

    /* Tipografía */
    --font-display: "Fraunces", "Georgia", serif;
    --font-body: "Manrope", sans-serif;
    --font-mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
    --body-font-size: 0.9rem;

    /* Compatibilidad hacia atrás: alias de las variables antiguas que cada
       hoja de estilo por página seguía definiendo por separado, para que
       cualquier regla que aún las use (Bootstrap incluido) tome el nuevo
       valor sin tener que tocar cada archivo. */
    --bs-primary-gold: var(--brass);
    --bs-primary-red: var(--status-maintenance);
    --bs-text-primary: var(--ink);
    --bs-text-medium: var(--ink-soft);
    --bs-text-light: var(--ink-faint);
    --bs-dark-grey: var(--wood);
    --bs-background-main: var(--stone-50);
    --bs-surface: var(--surface);
    --bs-border-color: var(--line);
    --sidebar-width: 264px;
    --bs-font-sans-serif: var(--font-body);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--stone-50);
    --bs-primary: var(--brass);
    --bs-primary-rgb: var(--brass-rgb);
    --bs-body-font-size: var(--body-font-size);
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    color: var(--ink);
    background-color: var(--stone-50);
}

html { font-size: var(--body-font-size); }

h1, h2, h3, .font-display {
    font-family: var(--font-display);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

/* ---- Sidebar ---- */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: var(--surface);
    color: var(--ink);
    padding: 20px 16px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    box-shadow: none;
}
.main-content { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.main-content > .p-4 { padding-top: 2.5rem; padding-bottom: 2.5rem; flex: 1 1 auto; }

.sidebar .logo-wrapper { display: flex; align-items: center; justify-content: center; padding: 8px 10px 20px; }
.sidebar .logo { width: 140px; height: auto; display: block; }
@media (max-width: 768px) { .sidebar .logo { width: 100px; } }

.nav-link {
    color: var(--ink);
    font-weight: 500;
    border-radius: 8px;
    padding-top: .55rem;
    padding-bottom: .55rem;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover { background-color: var(--surface-sunken); color: var(--ink); }
.nav-link .material-symbols-outlined { color: var(--ink-soft); transition: color .15s ease; }
/* Especificidad reforzada: Bootstrap define .nav-pills .nav-link.active con
   su propio azul y gana el empate frente a una regla .nav-link.active simple. */
.sidebar .nav.nav-pills .nav-link.active {
    background-color: var(--brass-tint);
    color: var(--brass-deep);
    font-weight: 700;
}
.sidebar .nav.nav-pills .nav-link.active::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--brass);
    border-radius: 0 3px 3px 0;
}
.sidebar .nav.nav-pills .nav-link.active .material-symbols-outlined { color: var(--brass-deep); }

/* ---- Topbar ---- */
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 20px 28px;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.topbar-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.topbar-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.filter-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.filter-btn {
    padding: 7px 14px;
    background-color: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.filter-btn:hover { background-color: var(--surface-sunken); }
.filter-btn.active { background-color: var(--brass); border-color: var(--brass); color: #fff; }

.action-btn {
    padding: 10px 18px;
    background-color: var(--brass);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    box-shadow: 0 2px 6px rgba(var(--brass-rgb), 0.22);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(var(--brass-rgb), 0.28); background-color: var(--brass-deep); }

/* ---- Cards, tables, buttons ---- */
.card {
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(33, 29, 24, 0.04);
    border: 1px solid var(--line);
}
.text-primary-gold { color: var(--brass); }
.text-text-medium { color: var(--ink-soft); }

.btn-primary {
    background-color: var(--brass);
    border-color: var(--brass);
    color: white;
    font-weight: 700;
    letter-spacing: 0.015em;
}
.btn-primary:hover { background-color: var(--brass-deep); border-color: var(--brass-deep); }
.btn-outline-primary { color: var(--brass-deep); border-color: var(--brass); }
.btn-outline-primary:hover { background-color: var(--brass); border-color: var(--brass); }

.table { --bs-table-hover-bg: var(--surface-sunken); --bs-table-border-color: var(--line); }
.table th { color: var(--ink-soft); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; }
.badge { font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.6rem; }

/* Botón secundario: gris de Bootstrap desentona con la paleta piedra/latón */
.btn-secondary {
    background-color: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink-soft);
    font-weight: 700;
}
.btn-secondary:hover { background-color: var(--surface-sunken); border-color: var(--line-strong); color: var(--ink); }

/* Insignias de resultado/estado: reusan los mismos tonos desaturados de
   .room-status en vez del verde/rojo de semáforo de Bootstrap. */
.badge-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.3rem 0.65rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
}
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-status.ok { background: var(--status-available-soft); color: var(--status-available); }
.badge-status.fail { background: var(--status-maintenance-soft); color: var(--status-maintenance); }
.badge-status.muted { background: var(--surface-sunken); color: var(--ink-soft); }

/* Avatar del usuario: iniciales sobre latón en vez de una foto de stock */
.avatar-badge {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--brass-tint); color: var(--brass-deep);
    border: 1px solid rgba(var(--brass-rgb), 0.35);
    font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
}

/* Números, códigos, timestamps: placa grabada */
.font-mono, .mono-num { font-family: var(--font-mono); letter-spacing: 0.02em; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface-sunken); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }