/* ================== Tokens (compartidos con la landing) + extras del panel ==== */
:root {
  color-scheme: light;
  /* Paleta Airbnb: blanco / gris claro + Rausch (#FF385C) */
  --c-cream:   247 247 247;  /* fondo de página */
  --c-paper:   255 255 255;  /* tarjetas / superficies */
  --c-ink:     34 34 34;     /* #222222 texto principal */
  --c-ink2:    72 72 72;     /* #484848 */
  --c-mute:    113 113 113;  /* #717171 texto secundario */
  --c-line:    221 221 221;  /* #DDDDDD bordes */
  --c-terra:   230 30 77;    /* #E61E4D rausch oscuro (barras/acento) */
  --c-terra-dk:189 8 28;     /* #BD081C */
  --c-azulejo: 0 116 217;
  --c-gold:    184 149 106;
  --c-olive:   0 166 153;     /* #00A699 teal Airbnb */
  --c-shadow:  0 0 0;
  /* panel */
  --c-airbnb:  255 56 92;    /* #FF385C rausch (primario) */
  --c-booking: 0 53 128;     /* azul Booking */
  --c-ok:      0 166 153;    /* #00A699 teal Airbnb */
  --c-warn:    191 120 0;
  --c-danger:  193 53 21;
  --surface:   #ffffff;
  --sidebar-bg:#ffffff;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --c-cream:   18 18 18;
  --c-paper:   30 30 30;
  --c-ink:     245 245 245;
  --c-ink2:    214 214 214;
  --c-mute:    160 160 160;
  --c-line:    58 58 58;
  --c-terra:   255 90 120;
  --c-terra-dk:255 56 92;
  --c-azulejo: 90 150 230;
  --c-gold:    215 178 130;
  --c-olive:   45 196 180;
  --c-shadow:  0 0 0;
  --c-airbnb:  255 90 120;
  --c-booking: 90 140 220;
  --c-ok:      45 196 180;
  --c-warn:    224 170 70;
  --c-danger:  235 110 95;
  --surface:   rgb(var(--c-paper));
  --sidebar-bg:rgb(var(--c-paper));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: rgb(var(--c-cream));
  color: rgb(var(--c-ink));
}
/* Tipografía estilo Airbnb (Cereal ≈ Inter): titulares en sans-serif con tracking ajustado. */
.display { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.022em; }
.tabnum  { font-variant-numeric: tabular-nums; }
.label   { font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color: rgb(var(--c-mute)); }
.hairline{ height:1px; background: rgb(var(--c-line)); }

/* ---- Cards / surfaces ---- */
.card {
  background: var(--surface);
  border: 1px solid rgb(var(--c-line));
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgb(var(--c-shadow)/.04), 0 12px 32px -14px rgb(var(--c-shadow)/.12);
}
.kpi { transition: transform .2s ease, box-shadow .2s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(var(--c-shadow)/.07), 0 22px 44px -18px rgb(var(--c-shadow)/.20); }

/* ---- Sidebar nav ---- */
.nav-item {
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .8rem; border-radius:.85rem;
  color: rgb(var(--c-ink2)); font-weight:500; font-size:.92rem;
  transition: background .18s ease, color .18s ease;
}
.nav-item:hover { background: rgb(var(--c-cream)); color: rgb(var(--c-ink)); }
.nav-item.active { background: rgb(var(--c-ink)); color: rgb(var(--c-cream)); }
.nav-item .ico { width:22px; height:22px; object-fit:contain; flex:none; }
.nav-item.active .ico { filter: brightness(0) invert(1); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.6rem 1rem; border-radius:.85rem; font-weight:600; font-size:.9rem;
  cursor:pointer; border:1px solid transparent; transition: all .18s ease; white-space:nowrap;
}
.btn-primary { background: rgb(var(--c-airbnb)); color:#fff; }
.btn-primary:hover { background: rgb(var(--c-airbnb)/.88); }
.btn-dark { background: rgb(var(--c-ink)); color: rgb(var(--c-cream)); }
.btn-dark:hover { opacity:.9; }
.btn-ghost { background: transparent; border-color: rgb(var(--c-line)); color: rgb(var(--c-ink)); }
.btn-ghost:hover { background: rgb(var(--c-cream)); }
.btn-sm { padding:.4rem .7rem; font-size:.82rem; border-radius:.7rem; }

/* ---- Forms ---- */
.field { display:block; width:100%; padding:.6rem .8rem; border-radius:.8rem;
  border:1px solid rgb(var(--c-line)); background: var(--surface); color: rgb(var(--c-ink));
  font-size:.92rem; transition: border-color .15s ease, box-shadow .15s ease; }
.field:focus { outline:none; border-color: rgb(var(--c-terra)); box-shadow: 0 0 0 3px rgb(var(--c-terra)/.12); }
label.lbl { display:block; font-size:.78rem; font-weight:600; color: rgb(var(--c-ink2)); margin-bottom:.3rem; }

/* ---- Pills / badges ---- */
.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .6rem; border-radius:999px;
  font-size:.74rem; font-weight:600; border:1px solid rgb(var(--c-line)); }
.pill-airbnb  { background: rgb(var(--c-airbnb)/.12);  color: rgb(var(--c-airbnb));  border-color: rgb(var(--c-airbnb)/.25); }
.pill-booking { background: rgb(var(--c-booking)/.12); color: rgb(var(--c-booking)); border-color: rgb(var(--c-booking)/.25); }
.pill-ok      { background: rgb(var(--c-ok)/.12);      color: rgb(var(--c-ok));      border-color: rgb(var(--c-ok)/.25); }
.pill-warn    { background: rgb(var(--c-warn)/.14);    color: rgb(var(--c-warn));    border-color: rgb(var(--c-warn)/.3); }
.pill-danger  { background: rgb(var(--c-danger)/.12);  color: rgb(var(--c-danger));  border-color: rgb(var(--c-danger)/.25); }
.pill-mute    { background: rgb(var(--c-cream));       color: rgb(var(--c-mute)); }

/* ---- Tables ---- */
.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th { text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: rgb(var(--c-mute)); font-weight:600; padding:.6rem .75rem; border-bottom:1px solid rgb(var(--c-line)); white-space:nowrap; }
.tbl td { padding:.65rem .75rem; border-bottom:1px solid rgb(var(--c-line)); vertical-align:middle; }
.tbl tbody tr:hover { background: rgb(var(--c-cream)); }

/* ---- Modal ---- */
.modal-back { position:fixed; inset:0; background: rgb(var(--c-shadow)/.45); backdrop-filter: blur(2px); z-index:60; }
.modal { position:fixed; z-index:61; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:0; }
@media(min-width:640px){ .modal { align-items:center; padding:1rem; } }
.modal-card { background: var(--surface); width:100%; max-width:560px; border-radius:1.4rem 1.4rem 0 0;
  box-shadow:0 -8px 40px rgb(var(--c-shadow)/.25); max-height:92vh; overflow:auto; }
@media(min-width:640px){ .modal-card { border-radius:1.4rem; } }

/* scrollbar discreto */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); border-radius:999px; }

[x-cloak] { display:none !important; }