/* ============================================================
   Grand Aurora — Panel de Administración · Demo Plan Premium
   ============================================================ */
:root{
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --ink:#1F2937;
  --muted:#6B7280;
  --line:#E5E7EB;
  --sidebar:#14161A;
  --gold:#A16207;
  --gold-strong:#C9A24B;
  --gold-light:#E3C87F;
  --green:#059669; --green-bg:#D1FAE5;
  --blue:#2563EB;  --blue-bg:#DBEAFE;
  --amber:#D97706; --amber-bg:#FEF3C7;
  --gray:#6B7280;  --gray-bg:#E5E7EB;
  --red:#DC2626;   --red-bg:#FEE2E2;
  --radius:14px;
  --shadow:0 4px 14px rgba(15,23,42,.06);
  --font:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid rgba(161,98,7,.4);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-weight:500}
[hidden]{display:none !important}

/* ---------- Botones ---------- */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(120deg,var(--gold),var(--gold-strong));color:#12100A;font-weight:600;font-size:.95rem;padding:12px 26px;border-radius:10px;border:0;transition:filter .25s,transform .25s}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-sm{padding:9px 18px;font-size:.86rem}
.btn-block{width:100%}
.btn-ghost-dark{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500;font-size:.9rem;padding:10px 20px;border-radius:10px;transition:background .25s}
.btn-ghost-dark:hover{background:#F3F4F6}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-weight:600;font-size:.9rem;padding:10px 22px;border-radius:10px;border:0;transition:filter .25s}
.btn-danger:hover{filter:brightness(1.1)}
.btn-mini{display:inline-flex;align-items:center;font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);transition:background .2s}
.btn-mini:hover{background:#F3F4F6}
.btn-mini.primary{background:var(--blue-bg);border-color:var(--blue);color:var(--blue)}
.btn-mini.warn{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)}
.btn-mini.danger{background:var(--red-bg);border-color:var(--red);color:var(--red)}

/* ---------- Login ---------- */
.login-screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(800px 500px at 70% 10%,rgba(201,162,75,.18),transparent 60%),linear-gradient(160deg,#0B0D10,#1B1E23);padding:20px}
.login-card{background:#fff;border-radius:20px;padding:44px 40px;width:min(420px,100%);box-shadow:0 30px 70px rgba(0,0,0,.4);text-align:center}
.login-mono{display:inline-grid;place-items:center;width:64px;height:64px;border:1.5px solid var(--gold);border-radius:50%;font-family:Georgia,serif;color:var(--gold);font-size:1.3rem;margin-bottom:18px}
.login-card h1{font-size:1.4rem;margin-bottom:4px}
.login-sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.login-card .field{text-align:left}
.login-error{color:var(--red);font-size:.86rem;min-height:1.2em;margin:4px 0 10px}
.login-note{margin-top:18px;font-size:.82rem;color:var(--gold);background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:9px 14px}
.login-back{display:inline-block;margin-top:16px;font-size:.84rem;color:var(--muted)}
.login-back:hover{color:var(--ink)}

/* ---------- Campos ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.03em}
.field input,.field select{width:100%;font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- Layout app ---------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar);color:#D1D5DB;display:flex;flex-direction:column;padding:22px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:12px;padding:6px 10px 22px;border-bottom:1px solid rgba(227,200,135,.15);margin-bottom:16px}
.brand-mark{width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;color:var(--gold-light);font-size:.9rem;flex:0 0 40px}
.side-brand b{display:block;font-size:.95rem;color:#fff;font-weight:500}
.side-brand small{font-size:.72rem;color:#9CA3AF;letter-spacing:.1em;text-transform:uppercase}
.side-nav{display:grid;gap:4px;flex:1}
.side-link{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;
  background:none;border:0;color:#D1D5DB;font-size:.92rem;text-align:left;transition:background .2s,color .2s;position:relative;
}
.side-link svg{width:19px;height:19px;flex:0 0 19px}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link.active{background:rgba(201,162,75,.16);color:var(--gold-light)}
.side-badge{margin-left:auto;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 6px}
.logout{margin-top:14px;border-top:1px solid rgba(227,200,135,.15);padding-top:16px;border-radius:0}

.content{min-width:0}
.topbar{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:14px 26px;
}
.topbar h1{font-size:1.15rem;flex:1}
.topbar-right{display:flex;align-items:center;gap:14px}
.chip-occ{background:var(--blue-bg);color:var(--blue);font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:999px}
.topbar-date{font-size:.84rem;color:var(--muted)}
.btn-ghost-sm{font-size:.84rem;font-weight:600;color:var(--gold);border:1px solid var(--gold);padding:7px 16px;border-radius:999px;text-decoration:none;transition:background .25s}
.btn-ghost-sm:hover{background:rgba(201,162,75,.1)}
.hamb{display:none;background:none;border:0;padding:8px}
.hamb span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}

.main{padding:26px;display:grid;gap:22px;align-content:start}
.module{display:none;gap:22px;grid-auto-rows:min-content}
.module.active{display:grid}
.module-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.module-h2{font-size:1.05rem}
.filters{display:flex;gap:10px}
.filters select{font-family:inherit;font-size:.88rem;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink)}

/* ---------- Cards / grillas ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h2{font-size:1rem;margin-bottom:14px}
.card-note{font-size:.84rem;color:var(--muted);margin:-8px 0 16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.kpi span{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi b{display:block;font-size:1.7rem;font-weight:600;margin-top:6px}
.kpi small{font-size:.78rem;color:var(--muted)}

/* ---------- Gráfico SVG ---------- */
.chart svg{width:100%;height:auto}
.chart .bar{fill:url(#goldGrad)}
.chart .lbl{font-size:10px;fill:var(--muted)}
.chart .val{font-size:10px;fill:var(--ink);font-weight:600}

/* ---------- Feed / listas ---------- */
.feed{display:grid;gap:10px;max-height:280px;overflow:auto}
.feed li{font-size:.86rem;color:var(--ink);padding:10px 12px;background:var(--bg);border-radius:10px;display:flex;justify-content:space-between;gap:14px}
.feed li time{color:var(--muted);font-size:.76rem;white-space:nowrap}
.mini-list{display:grid;gap:10px}
.mini-list li{display:flex;justify-content:space-between;gap:14px;font-size:.88rem;padding:11px 14px;background:var(--bg);border-radius:10px}
.mini-list .empty{color:var(--muted);font-style:italic;background:none}

/* ---------- Habitaciones ---------- */
.counters{display:flex;gap:10px;flex-wrap:wrap}
.counter{font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff}
.rooms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.room-card{
  border-radius:12px;padding:16px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .2s,box-shadow .2s;text-align:left;background:#fff;
}
.room-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.room-card b{font-size:1.15rem;display:block}
.room-card .rc-type{font-size:.78rem;color:var(--muted)}
.room-card .rc-guest{font-size:.8rem;margin-top:6px;font-weight:600}
.room-card .rc-status{display:inline-block;margin-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.st-disponible{background:var(--green-bg);border-color:var(--green)} .st-disponible .rc-status{background:var(--green);color:#fff}
.st-ocupada{background:var(--blue-bg);border-color:var(--blue)} .st-ocupada .rc-status{background:var(--blue);color:#fff}
.st-limpieza{background:var(--amber-bg);border-color:var(--amber)} .st-limpieza .rc-status{background:var(--amber);color:#fff}
.st-mantenimiento{background:var(--gray-bg);border-color:var(--gray)} .st-mantenimiento .rc-status{background:var(--gray);color:#fff}

/* ---------- Kanban limpieza ---------- */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.kanban-col{background:#ECEEF1;border-radius:var(--radius);padding:16px}
.kanban-col h3{font-size:.9rem;margin-bottom:12px;display:flex;justify-content:space-between}
.kanban-col h3 span{background:#fff;border-radius:999px;padding:1px 10px;font-size:.78rem}
.kanban-list{display:grid;gap:10px;min-height:60px}
.task-card{background:#fff;border-radius:10px;padding:14px;box-shadow:var(--shadow);display:grid;gap:8px}
.task-card .t-head{display:flex;justify-content:space-between;align-items:center}
.task-card .t-head b{font-size:.95rem}
.prio{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.prio-alta{background:var(--red-bg);color:var(--red)}
.prio-media{background:var(--amber-bg);color:var(--amber)}
.prio-baja{background:var(--green-bg);color:var(--green)}
.task-card select{font-family:inherit;font-size:.82rem;padding:6px 9px;border-radius:8px;border:1px solid var(--line);background:#fff;width:100%}
.task-card .t-note{font-size:.8rem;color:var(--muted)}
.task-card .t-actions{display:flex;gap:8px;justify-content:flex-end}

/* ---------- Tabla ---------- */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse;min-width:860px;font-size:.88rem}
.table th{background:#F9FAFB;text-align:left;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:13px 16px;border-bottom:1px solid var(--line)}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#FAFAF9}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:999px}
.b-confirmada{background:var(--amber-bg);color:var(--amber)}
.b-checkin{background:var(--blue-bg);color:var(--blue)}
.b-checkout{background:var(--green-bg);color:var(--green)}
.b-cancelada{background:var(--red-bg);color:var(--red)}
.b-pendiente{background:var(--red-bg);color:var(--red)}
.b-preparacion{background:var(--amber-bg);color:var(--amber)}
.b-entregado{background:var(--green-bg);color:var(--green)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Pedidos ---------- */
.orders-list{display:grid;gap:14px}
.order-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.order-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.order-head b{font-size:1rem}
.order-head .o-room{font-size:.85rem;color:var(--muted)}
.order-head .badge{margin-left:auto}
.order-items{font-size:.88rem;color:var(--muted);display:grid;gap:4px;margin-bottom:12px}
.order-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.order-foot b{font-size:1.05rem}
.empty-note{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center;color:var(--muted)}

/* ---------- Tarifas ---------- */
.rates-form{display:grid;gap:14px}
.rate-row{display:grid;grid-template-columns:1fr 130px auto;gap:12px;align-items:center}
.rate-row b{font-size:.92rem}
.rate-row small{display:block;color:var(--muted);font-weight:400;font-size:.76rem}
.rate-row input{font-family:inherit;font-size:.92rem;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);text-align:right}
.rate-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.calc-form .calc-result{margin-top:14px;font-size:.95rem;font-weight:500}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.inline-form input{font-family:inherit;font-size:.88rem;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);flex:1;min-width:120px}
.inline-form input:focus{outline:none;border-color:var(--gold)}

/* ---------- Toggle ---------- */
.switch{position:relative;display:inline-block;width:46px;height:26px}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:#D1D5DB;border-radius:999px;transition:.25s;cursor:pointer}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + i{background:var(--green)}
.switch input:checked + i::after{transform:translateX(20px)}

/* ---------- Canales ---------- */
.channels-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.admin-channel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);display:grid;gap:12px}
.ac-head{display:flex;align-items:center;gap:12px}
.ac-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#12100A;background:linear-gradient(135deg,var(--gold),var(--gold-strong))}
.ac-head b{font-size:1.05rem}
.ac-head .switch{margin-left:auto}
.ac-stats{display:flex;gap:20px;font-size:.82rem;color:var(--muted)}
.ac-sync{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ac-sync time{font-size:.8rem;color:var(--muted)}
.spinner{width:14px;height:14px;border:2px solid rgba(18,16,10,.25);border-top-color:#12100A;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Config ---------- */
.danger-zone{border-color:#FECACA}
.danger-zone h2{color:var(--red)}

/* ---------- Modales ---------- */
.modal{position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.55);display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}
.modal-card{background:#fff;border-radius:18px;padding:30px;width:min(480px,100%);box-shadow:0 30px 70px rgba(0,0,0,.3)}
.modal-card h3{font-size:1.2rem;margin-bottom:12px}
.modal-sub{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.modal-label{font-size:.8rem;font-weight:600;color:var(--muted);margin:10px 0 8px}
.status-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.status-btns button{padding:11px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.86rem;transition:all .2s}
.status-btns button:hover{transform:translateY(-1px)}
.status-btns button.sb-disponible:hover{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.status-btns button.sb-ocupada:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.status-btns button.sb-limpieza:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)}
.status-btns button.sb-mantenimiento:hover{border-color:var(--gray);color:var(--gray);background:var(--gray-bg)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ---------- Toasts ---------- */
.toasts{position:fixed;top:18px;right:18px;z-index:200;display:grid;gap:10px}
.toast{
  background:#111827;color:#fff;font-size:.88rem;padding:13px 20px;border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.3);border-left:4px solid var(--gold-strong);
  animation:toastIn .3s ease;max-width:320px;
}
.toast.success{border-left-color:var(--green)}
.toast.error{border-left-color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2,.channels-grid{grid-template-columns:1fr}
  .rooms-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset:0 auto 0 0;z-index:90;width:260px;transform:translateX(-105%);
    transition:transform .3s;box-shadow:20px 0 50px rgba(0,0,0,.3);
  }
  .sidebar.open{transform:none}
  .hamb{display:block}
  .topbar-date{display:none}
  .rooms-grid{grid-template-columns:repeat(2,1fr)}
  .kanban{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .rate-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}