/* ============================================================
   Gestor Cabañas — sistema visual
   ------------------------------------------------------------
   1. Tokens de color (oscuro / claro)
   2. Base
   3. Componentes: card, nav, inputs, tablas, modal, toast
   4. Ajustes que Tailwind CDN no cubre

   Las paletas zinc / emerald / red / amber / sky de Tailwind están
   redirigidas a estas variables (ver tema.js). En modo claro cada
   escala se invierte: el "900" de una tarjeta oscura pasa a ser
   blanco, y el "400" de un texto de acento pasa a un tono profundo
   que conserva contraste sobre fondo claro.
   ============================================================ */

/* ---------------------------------------------------------- 1. tokens */

:root,
html.dark {
  /* Neutros: grafito levemente frío */
  --zinc-50:  250 250 251;
  --zinc-100: 240 241 243;
  --zinc-200: 222 224 228;
  --zinc-300: 196 199 205;
  --zinc-400: 156 161 170;
  --zinc-500: 116 121 131;
  --zinc-600:  82  87  97;
  --zinc-700:  52  56  64;
  --zinc-800:  36  39  46;
  --zinc-900:  22  24  29;
  --zinc-950:  13  14  18;

  --emerald-50:  236 253 245;
  --emerald-100: 209 250 229;
  --emerald-200: 167 243 208;
  --emerald-300: 110 231 183;
  --emerald-400:  52 211 153;
  --emerald-500:  16 185 129;
  --emerald-600:   5 150 105;
  --emerald-700:   4 120  87;
  --emerald-800:   6  95  70;
  --emerald-900:   6  78  59;
  --emerald-950:   2  44  34;

  --red-50:  254 242 242;
  --red-100: 254 226 226;
  --red-200: 254 202 202;
  --red-300: 252 165 165;
  --red-400: 248 113 113;
  --red-500: 239  68  68;
  --red-600: 220  38  38;
  --red-700: 185  28  28;
  --red-800: 153  27  27;
  --red-900: 127  29  29;
  --red-950:  69  10  10;

  --amber-50:  255 251 235;
  --amber-100: 254 243 199;
  --amber-200: 253 230 138;
  --amber-300: 252 211  77;
  --amber-400: 251 191  36;
  --amber-500: 245 158  11;
  --amber-600: 217 119   6;
  --amber-700: 180  83   9;
  --amber-800: 146  64  14;
  --amber-900: 120  53  15;
  --amber-950:  69  26   3;

  --sky-50:  240 249 255;
  --sky-100: 224 242 254;
  --sky-200: 186 230 253;
  --sky-300: 125 211 252;
  --sky-400:  56 189 248;
  --sky-500:  14 165 233;
  --sky-600:   2 132 199;
  --sky-700:   3 105 161;
  --sky-800:   7  89 133;
  --sky-900:  12  74 110;
  --sky-950:   8  47  73;

  --sombra-card: 0 1px 0 rgb(255 255 255 / .03) inset, 0 1px 2px rgb(0 0 0 / .25);
  --sombra-flotante: 0 24px 48px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04);
  --fondo-app:
    radial-gradient(1200px 500px at 15% -10%, rgb(16 185 129 / .07), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, rgb(56 189 248 / .04), transparent 60%);
}

html.light {
  --zinc-50:    9  11  15;
  --zinc-100:  17  20  26;
  --zinc-200:  31  35  43;
  --zinc-300:  52  58  68;
  --zinc-400:  82  89 101;
  --zinc-500: 107 114 126;
  --zinc-600: 148 154 165;
  --zinc-700: 209 213 220;
  --zinc-800: 228 230 235;
  --zinc-900: 255 255 255;
  --zinc-950: 246 247 249;

  --emerald-50:    2  44  34;
  --emerald-100:   6  78  59;
  --emerald-200:   6  95  70;
  --emerald-300:   6  95  70;
  --emerald-400:   4 120  87;
  --emerald-500:  16 185 129;
  --emerald-600:   5 150 105;
  --emerald-700:   4 120  87;
  --emerald-800: 167 243 208;
  --emerald-900: 167 243 208;
  --emerald-950: 236 253 245;

  --red-50:   69  10  10;
  --red-100: 127  29  29;
  --red-200: 153  27  27;
  --red-300: 153  27  27;
  --red-400: 220  38  38;
  --red-500: 239  68  68;
  --red-600: 220  38  38;
  --red-700: 185  28  28;
  --red-800: 254 202 202;
  --red-900: 254 202 202;
  --red-950: 254 242 242;

  --amber-50:   69  26   3;
  --amber-100: 120  53  15;
  --amber-200: 146  64  14;
  --amber-300: 146  64  14;
  --amber-400: 180  83   9;
  --amber-500: 245 158  11;
  --amber-600: 217 119   6;
  --amber-700: 180  83   9;
  --amber-800: 253 230 138;
  --amber-900: 253 230 138;
  --amber-950: 255 251 235;

  --sky-50:    8  47  73;
  --sky-100:  12  74 110;
  --sky-200:   7  89 133;
  --sky-300:   7  89 133;
  --sky-400:   3 105 161;
  --sky-500:  14 165 233;
  --sky-600:   2 132 199;
  --sky-700:   3 105 161;
  --sky-800: 186 230 253;
  --sky-900: 186 230 253;
  --sky-950: 240 249 255;

  --sombra-card: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .05);
  --sombra-flotante: 0 24px 48px -12px rgb(16 24 40 / .22), 0 0 0 1px rgb(16 24 40 / .06);
  --fondo-app:
    radial-gradient(1200px 500px at 15% -10%, rgb(16 185 129 / .06), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, rgb(56 189 248 / .05), transparent 60%);
}

/* ---------------------------------------------------------- 2. base */

html { font-feature-settings: "cv11", "ss01", "ss03"; }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: rgb(var(--zinc-950));
  background-image: var(--fondo-app);
  background-attachment: fixed;
  color: rgb(var(--zinc-100));
  -webkit-font-smoothing: antialiased;
}

/* Sin transiciones mientras se cambia de tema: el cambio es instantáneo y limpio */
html.cambiando-tema *,
html.cambiando-tema *::before,
html.cambiando-tema *::after { transition: none !important; }

::selection { background: rgb(var(--emerald-500) / .25); }

:focus-visible { outline: 2px solid rgb(var(--emerald-500) / .7); outline-offset: 2px; }

.tabular-nums, td, .num { font-variant-numeric: tabular-nums; }

/* Mostrar u ocultar según el tema activo */
html.dark  .solo-light { display: none !important; }
html.light .solo-dark  { display: none !important; }

/* ---------------------------------------------------------- 3. componentes */

/* Tarjeta: el contenedor base de todo el panel */
.card {
  border: 1px solid rgb(var(--zinc-800));
  background: rgb(var(--zinc-900));
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: var(--sombra-card);
}
@media (min-width: 640px) { .card { padding: 1.5rem; } }

/* Títulos de sección dentro de una tarjeta */
.card > h2,
.card > div > h2 {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgb(var(--zinc-100));
}
.card > h2 > svg,
.card > div > h2 > svg {
  box-sizing: content-box;
  padding: 6px;
  border-radius: 8px;
  background: rgb(var(--zinc-800) / .7);
}

/* Navegación lateral */
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem;
  border-radius: 9px;
  font-size: .875rem; font-weight: 500;
  color: rgb(var(--zinc-400));
  transition: background-color .15s, color .15s;
}
.nav-item:hover { background: rgb(var(--zinc-800) / .6); color: rgb(var(--zinc-100)); }
.nav-item svg { width: 18px; height: 18px; color: rgb(var(--zinc-500)); transition: color .15s; }
.nav-item:hover svg { color: rgb(var(--zinc-300)); }
.nav-item.activo {
  background: rgb(var(--emerald-500) / .1);
  color: rgb(var(--zinc-50));
  box-shadow: inset 0 0 0 1px rgb(var(--emerald-500) / .18);
}
.nav-item.activo svg { color: rgb(var(--emerald-400)); }

.nav-grupo {
  padding: 0 .75rem;
  margin: 1.25rem 0 .5rem;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--zinc-600));
}

/* Sidebar móvil */
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  body.menu-abierto .sidebar { transform: translateX(0); }
  body.menu-abierto .sidebar-fondo { display: block; }
}

/* Logo */
.logo-marca {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 4px 12px -2px rgb(16 185 129 / .45);
}

/* Inputs: fondo propio en claro (el zinc-800 claro es gris de borde) */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select, textarea {
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="color"]).bg-zinc-800,
html.light select.bg-zinc-800,
html.light textarea.bg-zinc-800 { background-color: #fff; }

input:focus, select:focus, textarea:focus {
  border-color: rgb(var(--emerald-500)) !important;
  box-shadow: 0 0 0 3px rgb(var(--emerald-500) / .18);
}
input::placeholder, textarea::placeholder { color: rgb(var(--zinc-600)); }
input[type="color"] { height: 38px; padding: 3px; cursor: pointer; }

/* Tablas */
table thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  color: rgb(var(--zinc-500));
  padding-top: .625rem; padding-bottom: .625rem;
}
table tbody tr { transition: background-color .12s; }
table tbody tr:hover { background: rgb(var(--zinc-800) / .35); }
table th:first-child, table td:first-child { padding-left: .5rem; }
table th:last-child,  table td:last-child  { padding-right: .5rem; }

/* Botones de acento: texto siempre blanco */
.bg-emerald-600, .bg-red-600, .bg-sky-600, .bg-amber-600 { color: #fff; }
button.bg-emerald-600, button.bg-red-600, button.bg-sky-600, button.bg-amber-600, a.bg-emerald-600 {
  box-shadow: 0 1px 0 rgb(255 255 255 / .15) inset, 0 1px 2px rgb(0 0 0 / .15);
  transition: background-color .15s, transform .05s;
}
button.bg-emerald-600:active, button.bg-red-600:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: not-allowed; }

/* Modal */
#modal { backdrop-filter: blur(4px); background: rgb(0 0 0 / .55); }
html.light #modal { background: rgb(15 23 42 / .35); }
#modal > div { box-shadow: var(--sombra-flotante); }

/* Toast */
#toast { box-shadow: var(--sombra-flotante); }

/* Bloques internos (resúmenes dentro del modal, etc.) */
.bg-zinc-950\/40 { background-color: rgb(var(--zinc-950) / .6) !important; }

/* ---------------------------------------------------------- 4. ajustes */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--zinc-700)); border-radius: 6px; border: 2px solid rgb(var(--zinc-950)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--zinc-600)); }

/* El indicador nativo del date picker es negro: se invierte solo en oscuro */
html.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

select option { background: rgb(var(--zinc-900)); color: rgb(var(--zinc-100)); }

/* Iconos: el click siempre debe llegar al botón, no al <svg> */
button svg, a svg { pointer-events: none; flex-shrink: 0; }

/* Celdas del calendario de tarifas: selección por arrastre */
.celda-tarifa { touch-action: none; }
.celda-tarifa.seleccionada { background-color: rgb(var(--emerald-500) / .28) !important; box-shadow: inset 0 0 0 1px rgb(var(--emerald-500) / .6); }

/* Calendario de reservas: barra que se está arrastrando y celda destino */
.barra-arrastrando { opacity: .45; }
.celda-destino { background-color: rgb(var(--emerald-500) / .25) !important; }

/* ============================================================
   Web pública
   ============================================================ */

/* Títulos con serif cálida: le da carácter de hospedaje sin perder sobriedad */
.titulo-display { font-family: Fraunces, Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.015em; }

/* Placeholder de imagen: proporción fija, se reemplaza por la foto real desde el panel */
.placeholder-imagen {
  display: grid; place-items: center; width: 100%;
  background:
    radial-gradient(circle at 30% 20%, rgb(var(--emerald-500) / .10), transparent 55%),
    repeating-linear-gradient(45deg, rgb(var(--zinc-800) / .55) 0 12px, rgb(var(--zinc-800) / .25) 12px 24px),
    rgb(var(--zinc-900));
  border: 1px dashed rgb(var(--zinc-700));
}

body.web { background-image: none; }
details > summary::-webkit-details-marker { display: none; }