/* =====================================================================
   Tema oscuro elegante — Motel
   ===================================================================== */
:root {
    --bg: #111318;
    --bg-2: #171a21;
    --surface: #1d212a;
    --surface-2: #252a35;
    --border: #2e3440;
    --text: #e6e8ec;
    --muted: #9aa3b2;
    --accent: #c9a86a;          /* dorado suave */
    --accent-2: #a88a52;

    /* Estados (poco saturados) */
    --st-disponible: #4fae7f;
    --st-ocupada: #d0645f;
    --st-limpieza: #d7b04f;
    --st-reservada: #5b8fd6;
    --st-mantenimiento: #6c7383;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--muted);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: #e0c48d;
    --bs-success: #4fae7f;
    --bs-success-rgb: 79, 174, 127;
    --bs-danger: #d0645f;
    --bs-danger-rgb: 208, 100, 95;
    --bs-warning: #d7b04f;
    --bs-warning-rgb: 215, 176, 79;
    --bs-primary: #5b8fd6;
    --bs-primary-rgb: 91, 143, 214;
    --bs-secondary-rgb: 108, 115, 131;
}

body { background: var(--bg); color: var(--text); }

.btn-accent { background: var(--accent); border-color: var(--accent); color: #1a1a1a; font-weight: 600; }
.btn-accent:hover, .btn-accent:focus { background: var(--accent-2); border-color: var(--accent-2); color: #111; }
.text-accent { color: var(--accent) !important; }

.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item {
    background: var(--surface);
    border-color: var(--border);
}
.card-header { background: var(--surface-2); border-color: var(--border); }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.035); }
.table > :not(caption) > * > * { border-color: var(--border); }
.table thead th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.form-control, .form-select { background-color: var(--bg-2); border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(201,168,106,.2); background-color: var(--bg-2); }

/* ---------------------------------------------------------------------
   Panel administrativo
   --------------------------------------------------------------------- */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 250px; flex-shrink: 0; background: var(--bg-2); border-right: 1px solid var(--border); }
@media (min-width: 992px) {
    .admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.admin-main { flex: 1; min-width: 0; }
.admin-topbar { background: var(--bg-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1020; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.brand-name { color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.admin-sidebar .nav-link { color: var(--muted); border-radius: .5rem; padding: .55rem .75rem; }
.admin-sidebar .nav-link:hover { color: var(--text); background: var(--surface); }
.admin-sidebar .nav-link.active { color: #16181d; background: var(--accent); font-weight: 600; }
.nav-section { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin: 1rem .75rem .25rem; }
.page-title { font-weight: 600; }

/* Tarjetas de estadísticas */
.stat-card { border-radius: 1rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); height: 100%; }
.stat-card .stat-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.stat-card .stat-icon { font-size: 1.4rem; opacity: .55; }

/* Estados de habitación */
.st-disponible    { --st: var(--st-disponible); }
.st-ocupada       { --st: var(--st-ocupada); }
.st-limpieza      { --st: var(--st-limpieza); }
.st-reservada     { --st: var(--st-reservada); }
.st-mantenimiento { --st: var(--st-mantenimiento); }
.badge-estado { background: color-mix(in srgb, var(--st) 20%, transparent); color: var(--st); border: 1px solid color-mix(in srgb, var(--st) 45%, transparent); font-weight: 600; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 25%, transparent); }

.room-card { border-radius: 1rem; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--st); height: 100%; transition: transform .15s; }
.room-card:hover { transform: translateY(-2px); }
.room-card .room-num { font-size: 1.6rem; font-weight: 700; }
.room-card .room-meta { color: var(--muted); font-size: .82rem; }
.room-card .btn { font-size: .82rem; }

.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: .5rem; background: var(--surface-2); }
.thumb-ph { width: 48px; height: 48px; border-radius: .5rem; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.img-preview { max-height: 140px; border-radius: .5rem; }

.table-responsive { border-radius: .75rem; }
.total-box { background: var(--surface-2); border-radius: .75rem; padding: 1rem; }
.total-box .total { font-size: 1.8rem; font-weight: 700; color: var(--accent); }

.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }

/* Impresión (tickets y reportes) */
@media print {
    .admin-sidebar, .admin-topbar, .no-print, .toast-container { display: none !important; }
    body, .card { background: #fff !important; color: #000 !important; }
    .table { color: #000 !important; }
}

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: radial-gradient(ellipse at top, #2a2230 0%, var(--bg) 60%); }
.login-card { width: 100%; max-width: 400px; border-radius: 1.25rem; }

.list-group-item.active { background: var(--accent); border-color: var(--accent); color: #16181d; }
.list-group-item.active .text-secondary { color: #3a3326 !important; }
.nav-pills .nav-link.active { background: var(--accent); color: #16181d; }
.nav-pills .nav-link { color: var(--muted); }
.btn-check:checked + .btn-outline-secondary { background: var(--accent); border-color: var(--accent); color: #16181d; font-weight: 600; }

/* Editor de pasos (Guía de uso) */
.pasos-editor { display: flex; flex-direction: column; gap: .5rem; }
.paso-fila { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-2); }
.paso-num { flex-shrink: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: .85rem; margin-top: .15rem; }
.paso-campos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.paso-campos input { font-weight: 600; }
.paso-botones { display: flex; flex-direction: column; gap: .25rem; }
.paso-botones .btn { padding: .1rem .4rem; }
.paso-foto { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.paso-foto-img { width: 64px; height: 48px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--border); }
.video-editor { padding: .6rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-2); }
.video-preview { width: 100%; max-height: 220px; border-radius: .5rem; background: #000; }

/* Vista previa de diapositivas (panel Slider) */
.slide-preview { position: relative; aspect-ratio: 16/7; overflow: hidden; border-radius: .6rem .6rem 0 0; background: #000; }
.modal .slide-preview { border-radius: .6rem; }
.slide-preview img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption { position: absolute; inset: auto 0 0 0; padding: .6rem .8rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; }
.slide-caption .t { font-weight: 700; }
.slide-caption .x { font-size: .8rem; opacity: .9; }

/* Logo completo del motel (panel y login) */
.brand-logo-completo { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; }
.login-logo { display: inline-block; width: auto; height: 64px; max-width: 100%; object-fit: contain; }
.login-logo[src$=".webp"], .login-logo[src$=".png"], .login-logo[src$=".jpg"] { height: auto; width: 100%; max-width: 280px; }

/* Modo de generación de cupones */
.modo-cupon { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 575.98px) { .modo-cupon { grid-template-columns: 1fr; } }
.modo-opcion { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: .7rem;
    background: var(--bg-2); cursor: pointer; margin: 0; }
.modo-opcion > i { color: var(--muted); font-size: 1.2rem; margin-top: .15rem; }
.modo-opcion small { display: block; color: var(--muted); font-size: .78rem; }
.btn-check:checked + .modo-opcion { border-color: var(--accent); background: rgba(201,168,106,.1); }
.btn-check:checked + .modo-opcion > i { color: var(--accent); }
.btn-check:focus-visible + .modo-opcion { box-shadow: 0 0 0 .2rem rgba(201,168,106,.25); }

/* Buzón de sugerencias (panel) */
.sug-nueva { border-left: 3px solid var(--accent); }
.sug-leida { opacity: .75; }
.sug-mensaje { white-space: pre-line; overflow-wrap: anywhere; }

/* Pedidos web (panel) */
.pedido-card.pedido-nuevo { border-color: var(--st-limpieza); box-shadow: 0 0 0 1px var(--st-limpieza); }
.pedido-card.pedido-entregado, .pedido-card.pedido-cancelado { opacity: .7; }
.pedido-motivo { white-space: pre-line; overflow-wrap: anywhere; }
.pedido-items td, .pedido-items th { padding: .2rem .25rem; }

/* Inventario */
.inv-minimo { width: 5rem; text-align: center; }

/* Cobro en varias monedas y caja */
.cobro-moneda { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: .45rem .25rem; }
.cobro-moneda strong { font-size: 1.05rem; }
.cobro-moneda small { font-size: .72rem; opacity: .85; }
.cobro-equivalente { padding: .6rem .8rem; border-radius: .6rem; background: var(--surface-2); border: 1px solid var(--border); }
.cobro-equivalente strong { font-size: 1.25rem; color: var(--accent); }
.cobro-medios { padding: .6rem .8rem; border-radius: .6rem; background: var(--bg-2); border: 1px dashed var(--border); color: var(--muted); }
.cobro-linea { padding: .5rem; margin-bottom: .5rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-2); }
.cobro-balance { padding: .55rem .8rem; border-radius: .6rem; background: var(--surface-2); border: 1px solid var(--border); font-size: .92rem; }