/* =========================================================
   WebMaestro — tema administrativo (basado en el de Hostal)
   ========================================================= */
:root {
    --hs-primary: #4f46e5;
    --hs-primary-600: #4338ca;
    --hs-primary-soft: #eef2ff;
    --hs-sidebar: #0f172a;
    --hs-sidebar-2: #1e293b;
    --hs-sidebar-text: #94a3b8;
    --hs-bg: #f1f5f9;
    --hs-card: #ffffff;
    --hs-border: #e2e8f0;
    --hs-text: #0f172a;
    --hs-muted: #64748b;
    --hs-radius: 14px;
    --hs-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
    --hs-sidebar-w: 260px;

    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--hs-text);
    --bs-primary: var(--hs-primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: var(--hs-primary);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--hs-primary-600);
    --bs-border-color: var(--hs-border);
}

html { font-size: 14.5px; }
body.admin { background: var(--hs-bg); }

.text-hostal { color: var(--hs-primary) !important; }
.btn-hostal, .btn-primary {
    --bs-btn-bg: var(--hs-primary); --bs-btn-border-color: var(--hs-primary);
    --bs-btn-hover-bg: var(--hs-primary-600); --bs-btn-hover-border-color: var(--hs-primary-600);
    --bs-btn-active-bg: var(--hs-primary-600); --bs-btn-active-border-color: var(--hs-primary-600);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-hostal, .btn-primary { --bs-btn-disabled-bg: #a5b4fc; --bs-btn-disabled-border-color: #a5b4fc; --bs-btn-disabled-color: #fff; }
.btn-outline-primary {
    --bs-btn-color: var(--hs-primary); --bs-btn-border-color: #c7d2fe;
    --bs-btn-hover-bg: var(--hs-primary-soft); --bs-btn-hover-border-color: var(--hs-primary); --bs-btn-hover-color: var(--hs-primary);
    --bs-btn-active-bg: var(--hs-primary); --bs-btn-active-border-color: var(--hs-primary); --bs-btn-active-color: #fff;
}
.btn { border-radius: 10px; font-weight: 600; }
.btn-sm { border-radius: 8px; }
.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.form-control, .form-select { border-radius: 10px; border-color: var(--hs-border); padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--hs-primary); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15); }
.form-label { font-weight: 600; font-size: .85rem; color: #334155; }

/* ---------- Layout ---------- */
.admin-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--hs-sidebar-w);
    background: linear-gradient(180deg, var(--hs-sidebar) 0%, #111c33 100%);
    color: var(--hs-sidebar-text);
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    display: flex; flex-direction: column;
    transition: transform .25s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.4rem 1.4rem 1.2rem; color: #fff; text-decoration: none; }
.brand-logo {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; color: #fff;
    background: linear-gradient(135deg, #818cf8, #4f46e5); box-shadow: 0 6px 18px rgba(79, 70, 229, .45);
}
.brand-name { font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
.brand-sub { font-size: .72rem; color: var(--hs-sidebar-text); letter-spacing: .04em; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem .9rem; }
.nav-section { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #64748b; padding: 1rem .75rem .45rem; }
.sidebar-link {
    display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; margin-bottom: 2px;
    border-radius: 10px; color: var(--hs-sidebar-text); text-decoration: none; font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.sidebar-link:hover { background: rgba(148, 163, 184, .1); color: #fff; }
.sidebar-link.active { background: var(--hs-primary); color: #fff; box-shadow: 0 6px 16px rgba(79, 70, 229, .35); }
.sidebar-link .badge { margin-left: auto; }

.sidebar-user { margin: .9rem; padding: .85rem; border-radius: 12px; background: rgba(148, 163, 184, .08); display: flex; align-items: center; gap: .7rem; }
.sidebar-user .nombre { color: #fff; font-weight: 600; font-size: .85rem; line-height: 1.2; word-break: break-all; }
.sidebar-user .rol { font-size: .72rem; }
.sidebar-user .btn-salir { color: var(--hs-sidebar-text); background: none; border: 0; font-size: 1.15rem; padding: .25rem; }
.sidebar-user .btn-salir:hover { color: #f87171; }

.avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff;
    background: linear-gradient(135deg, #a78bfa, #6366f1);
}
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }

.admin-main { flex: 1; margin-left: var(--hs-sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--hs-border);
    padding: .85rem 1.75rem; display: flex; align-items: center; gap: 1rem;
}
.topbar h1 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.topbar .breadcrumb { margin: 0; font-size: .78rem; }
.topbar .fecha { font-size: .8rem; color: var(--hs-muted); background: var(--hs-bg); padding: .45rem .8rem; border-radius: 999px; }
.content { padding: 1.75rem; flex: 1; }

.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    body.sidebar-open .sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1035; }
    .admin-main { margin-left: 0; }
    .topbar { padding: .75rem 1rem; }
    .content { padding: 1rem; }
}

/* ---------- Tarjetas ---------- */
.card { border: 1px solid var(--hs-border); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--hs-border); padding: 1rem 1.25rem; }
.card-header:first-child { border-radius: var(--hs-radius) var(--hs-radius) 0 0; }
.card-title-sm { font-weight: 700; font-size: .95rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.card-body { padding: 1.25rem; }

.icon-box { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.icon-box.sm { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }

.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-label { color: var(--hs-muted); font-size: .8rem; font-weight: 600; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.stat-card .stat-foot { font-size: .78rem; color: var(--hs-muted); }
.stat-card::after {
    content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
    background: currentColor; opacity: .05;
}

/* Colores suaves */
.soft-primary { background: #eef2ff; color: #4f46e5; }
.soft-success { background: #dcfce7; color: #15803d; }
.soft-danger { background: #fee2e2; color: #b91c1c; }
.soft-warning { background: #fef3c7; color: #b45309; }
.soft-info { background: #e0f2fe; color: #0369a1; }
.soft-secondary { background: #f1f5f9; color: #475569; }
.soft-dark { background: #e2e8f0; color: #1e293b; }
.soft-purple { background: #f3e8ff; color: #7e22ce; }

.badge-soft { font-weight: 600; font-size: .74rem; padding: .38em .7em; border-radius: 999px; display: inline-flex; align-items: center; gap: .3em; }
.badge-soft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-soft.no-dot::before { display: none; }

/* ---------- Habitaciones ---------- */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1rem; }
.room {
    border-radius: 14px; border: 1px solid var(--hs-border); background: #fff; padding: .9rem 1rem 1rem;
    position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.room:hover { transform: translateY(-2px); box-shadow: var(--hs-shadow); }
.room::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--room-color); }
.room .room-num { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.room .room-cat { font-size: .78rem; color: var(--hs-muted); }
.room .room-guest { font-size: .78rem; margin-top: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room .room-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--room-soft); color: var(--room-color); }
.room-success { --room-color: #16a34a; --room-soft: #dcfce7; }
.room-danger { --room-color: #dc2626; --room-soft: #fee2e2; }
.room-warning { --room-color: #d97706; --room-soft: #fef3c7; }
.room-secondary { --room-color: #64748b; --room-soft: #f1f5f9; }
.room .dropdown-toggle { font-size: .75rem; }

/* Mapa seleccionable (registrar huésped) */
.room.seleccionable { cursor: pointer; margin: 0; padding: .75rem .85rem; }
.room.seleccionable .room-num { font-size: 1.25rem; }
.btn-check:checked + .room.seleccionable { border-color: var(--hs-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .25); background: var(--hs-primary-soft); }
.btn-check:checked + .room.seleccionable::before { background: var(--hs-primary); }
.btn-check:disabled + .room.seleccionable { cursor: not-allowed; opacity: .55; background: #f8fafc; }
.btn-check:disabled + .room.seleccionable:hover { transform: none; box-shadow: none; }

.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .35rem; }

/* ---------- Listas y tablas ---------- */
.list-item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--hs-border); }
.list-item:last-child { border-bottom: 0; }
.list-item .titulo { font-weight: 600; font-size: .9rem; }
.list-item .sub { font-size: .78rem; color: var(--hs-muted); }
.empty { padding: 2rem 1rem; text-align: center; color: var(--hs-muted); font-size: .85rem; }
.empty i { font-size: 1.8rem; display: block; margin-bottom: .4rem; opacity: .5; }

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hs-muted); font-weight: 700;
    background: #f8fafc; border-bottom: 1px solid var(--hs-border); padding-top: .8rem; padding-bottom: .8rem; white-space: nowrap;
}
.table > tbody td { padding-top: .85rem; padding-bottom: .85rem; border-color: #f1f5f9; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f8fafc; }
.codigo { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 600; font-size: .82rem; background: #f1f5f9; padding: .2rem .45rem; border-radius: 6px; }

/* DataTables 2 */
div.dt-container { padding: 0; }
div.dt-container > .row { margin: 0 !important; padding: .9rem 1.25rem; }
div.dt-container > .row:has(table) { padding: 0; }
div.dt-container > .row:has(table) > div { padding: 0; }
div.dt-container .dt-length, div.dt-container .dt-search { font-size: .85rem; color: var(--hs-muted); }
div.dt-container .dt-search input { border-radius: 10px; padding: .45rem .85rem; border: 1px solid var(--hs-border); margin-left: .5rem; min-width: 240px; }
div.dt-container .dt-length select { border-radius: 8px; margin: 0 .35rem; }
div.dt-container .dt-paging .pagination { margin: 0; gap: 4px; }
div.dt-container .dt-paging .page-link { border-radius: 8px !important; border: 0; color: var(--hs-muted); background: transparent; font-size: .8rem; font-weight: 600; padding: .4rem .7rem; }
div.dt-container .dt-paging .page-link:hover { background: var(--hs-bg); color: var(--hs-text); }
div.dt-container .dt-paging .page-item.active .page-link { background: var(--hs-primary); color: #fff; }
div.dt-container .dt-paging .page-item.disabled .page-link { opacity: .45; }
div.dt-container .dt-info { font-size: .8rem; color: var(--hs-muted); }

/* Chips de filtros / resúmenes */
.chip { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--hs-border); border-radius: 12px; padding: .6rem .9rem; }
.chip .chip-valor { font-weight: 800; font-size: 1.1rem; }
.chip .chip-label { font-size: .75rem; color: var(--hs-muted); line-height: 1.1; }

/* Stock */
.stock-bar { height: 6px; border-radius: 99px; background: #f1f5f9; overflow: hidden; min-width: 90px; }
.stock-bar > span { display: block; height: 100%; border-radius: 99px; }

/* Comprobante */
.factura-head { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-radius: var(--hs-radius) var(--hs-radius) 0 0; padding: 1.5rem; }
.factura-head .numero { font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; font-weight: 700; }
.qr-comprobante svg { width: 132px; height: 132px; display: block; }
.totales td { padding: .4rem 0; }
.totales tr.total td { font-size: 1.15rem; font-weight: 800; border-top: 2px dashed var(--hs-border); padding-top: .7rem; }

/* Tarjetas de estancia (minibar) */
.estancia { transition: transform .15s; }
.estancia:hover { transform: translateY(-2px); }
.estancia .hab { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }

/* SweetAlert2 a juego */
.swal2-popup { border-radius: 18px !important; font-family: var(--bs-body-font-family) !important; }
.swal2-styled.swal2-confirm { background: var(--hs-primary) !important; border-radius: 10px !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; }
.swal2-popup .form-control, .swal2-popup .form-select { font-size: .95rem; }

/* =========================================================
   WebMaestro — agregados
   ========================================================= */
.min-w-0 { min-width: 0; }
.text-purple { color: #7e22ce !important; }
.sidebar-link.disabled { opacity: .45; cursor: default; }
.sidebar-link.disabled:hover { background: none; color: var(--hs-sidebar-text); }

/* Login / configuración inicial */
body.auth {
    min-height: 100vh; display: grid; place-items: center; padding: 1rem;
    background: radial-gradient(circle at 20% 10%, #e0e7ff 0, transparent 45%), radial-gradient(circle at 85% 90%, #f3e8ff 0, transparent 40%), var(--hs-bg);
}
.auth-card { width: 100%; max-width: 410px; background: #fff; border: 1px solid var(--hs-border); border-radius: 20px; box-shadow: var(--hs-shadow); padding: 2.25rem 2rem; }
.auth-card .brand-logo { width: 54px; height: 54px; font-size: 1.6rem; border-radius: 16px; }
.auth-marca { font-weight: 800; font-size: 1.15rem; }
.auth-logo-img { max-height: 64px; max-width: 200px; margin-bottom: .75rem; }

/* Aviso cuando el SuperAdmin entra como soporte a una empresa */
.banner-soporte { position: sticky; top: 0; z-index: 1050; background: #b45309; color: #fff; text-align: center; font-size: .85rem; padding: .45rem 1rem; }

/* Tarjetas de sistemas contratados */
.modulo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.modulo-card { transition: transform .15s; }
.modulo-card:hover { transform: translateY(-2px); }
.modulo-card.vencido { opacity: .7; }

/* ---------- Restaurante ---------- */
button.room { font: inherit; color: inherit; }
.producto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.producto-btn {
    display: flex; flex-direction: column; justify-content: space-between; gap: .4rem; min-height: 92px; text-align: left;
    background: #fff; border: 1px solid var(--hs-border); border-radius: 14px; padding: .8rem .9rem; font: inherit;
    transition: transform .1s, border-color .15s, box-shadow .15s; user-select: none; -webkit-touch-callout: none;
}
.producto-btn:hover { border-color: var(--hs-primary); box-shadow: var(--hs-shadow); }
.producto-btn:active, .producto-btn.agregado { transform: scale(.96); border-color: var(--hs-primary); background: var(--hs-primary-soft); }
.producto-btn .nombre { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.producto-btn .precio { color: var(--hs-primary); font-weight: 700; font-size: .85rem; }
.pedido-card { position: sticky; top: 90px; }

.comanda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; align-items: start; }
.comanda { border-top: 4px solid #64748b; }
.comanda.demorada { border-top-color: #dc2626; }
.comanda .btn-avanzar { cursor: pointer; }
.comanda .btn-avanzar:hover { background: #f8fafc !important; }
.comanda .btn-avanzar.preparando { background: #f0f9ff !important; }

@media print {
    .sidebar, .topbar, .banner-soporte { display: none !important; }
    .admin-main { margin: 0 !important; }
}