/* ═══════════════════════════════════════════════════════════════
   TEMA HÍBRIDO — GLOBAL
   Blanco / negro / gris + UN solo acento (color del logo).
   Tipografía: Space Grotesk (títulos) + IBM Plex Mono (números).
   Se carga DESPUÉS de site.css y pisa los tokens de cada página.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Único acento ─────────────────────────────────────── */
  --hh-acento: #141414;

  --hh-primary:      var(--hh-acento);
  --hh-primary-dark: #141414;
  --hh-primary-soft: #F5F5F2;
  --hh-ink-accent:   #141414;
  --hh-ink-accent-d: #000000;
  --hh-accent:       var(--hh-acento);
  --hh-accent-soft:  #ECECEA;
  --hh-ok:           #141414;
  --hh-ok-soft:      #F0F0ED;
  --hh-down:         var(--hh-acento);

  /* ── Neutros puros ────────────────────────────────────── */
  --hh-text:  #141414;
  --hh-muted: #6F6F6C;
  --hh-faint: #9A9A96;
  --hh-line:  #E2E2DE;
  --hh-soft:  #F1F1EE;
  --hh-bg:    #F7F7F5;
  --hh-card:  #FFFFFF;

  --hh-shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);
  --hh-shadow-md: 0 2px 10px rgba(0, 0, 0, .07);

  /* Tipografías del tema (las páginas usan --font-h en títulos) */
  --font-h:    'Space Grotesk', 'Plus Jakarta Sans', sans-serif !important;
  --font-mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;
}

/* Tokens locales de la página Inicio */
:root, html {
  --idx-teal:       #4A4A47 !important;
  --idx-teal-dark:  #141414 !important;
  --idx-teal-soft:  #F1F1EE !important;
  --idx-cream:      #F7F7F5 !important;
  --idx-cream-card: #FFFFFF !important;
  --idx-coral:      var(--hh-acento) !important;
  --idx-coral-soft: #ECECEA !important;
  --idx-text:       #141414 !important;
  --idx-muted:      #6F6F6C !important;
  --idx-border:     #E2E2DE !important;
  --idx-bg:         #F7F7F5 !important;
  --idx-shadow:     0 1px 3px rgba(0,0,0,.05) !important;
}

/* Tokens locales de Reservas (Admin) */
:root, html {
  --adm-olive:  #4A4A47 !important;
  --adm-dark:   #141414 !important;
  --adm-terra:  var(--hh-acento) !important;
  --adm-muted:  #6F6F6C !important;
  --adm-cream:  #F1F1EE !important;
  --adm-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}

/* ═══ TIPOGRAFÍA ═══════════════════════════════════════════════ */
body { font-variant-numeric: tabular-nums; }

/* Números y datos en mono (detalle del estilo editorial) */
.idx-res-date, .idx-res-nights,
.idx-occ-top strong, .idx-occ-row strong, .idx-occ-row b,
.idx-stat-value, .idx-kpi-value, .idx-tbl td, .idx-co-meta,
.calm-d-num, .calm-d-price, .hh-gcal-day-num, .hh-gcal-day-price,
.adm-tbl td, .ad-number,
.hh-cal-summary {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

/* Marca */
.hh-brand-word { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.sb-logo .hh-brand { color: var(--hh-text); }
.navbar-brand .hh-brand { color: #fff; }

/* ═══ COMPONENTES GLOBALES ═════════════════════════════════════ */

/* Tarjetas: borde fino, casi sin sombra */
html .idx-card, .idx-soft-card, .adm-card, .adm-form-card, .adm-search,
.hh-surface {
  border: 1px solid #DEDEDA !important;
  box-shadow: none !important;
}

/* Verdes/teal del Inicio → neutro */
html .idx-res-tab-count--green { background: #141414 !important; color: #fff !important; }
html .idx-res-date--green      { background: #141414 !important; }
html .idx-res-item--encurso    { border-left: 3px solid var(--hh-acento) !important; }
html .idx-res-tab--pulse       { animation: none !important; }
html .idx-res-item--priority   { background: #F5F5F2 !important; }
html .idx-res-tab.activo       { background: #141414 !important; border-color: #141414 !important; }
html .idx-strip-dark, .idx-rendir { background: #141414 !important; }

/* Badges de portal (todo el sistema): neutros */
html .idx-portal-badge, .adm-portal-badge {
  background: #F1F1EE !important;
  color: #141414 !important;
  border: 1px solid #E2E2DE !important;
}

/* ═══ CALENDARIO (vista por casa) — estados en escala de grises ═══ */
html .calm-reserved { background: #E4E4E0 !important; color: #141414 !important; }
.calm-reserved .calm-d-price { color: #4A4A47 !important; }
html .calm-pending  { background: #F3F3EF !important; color: #141414 !important; }
html .calm-blocked  {
  background: repeating-linear-gradient(-45deg, #EFEFEC 0 6px, #E0E0DC 6px 12px) !important;
  color: #6F6F6C !important;
}
html .calm-canje    { background: #B9B9B5 !important; color: #141414 !important; }

/* Leyenda: mismos tonos */
html .calm-leg-reserved { background: #E4E4E0 !important; border: 1px solid #C9C9C5; }
html .calm-leg-pending  { background: #F3F3EF !important; border: 1px solid #C9C9C5; }
html .calm-leg-blocked  { background: repeating-linear-gradient(-45deg, #EFEFEC 0 3px, #D6D6D2 3px 6px) !important; border: 1px solid #C9C9C5; }
html .calm-leg-canje    { background: #B9B9B5 !important; }

/* Puntos de portal: blanco (Directa) / gris (Booking) / acento (Airbnb) */
.calm-ch-directa::after { background: #FFFFFF !important; box-shadow: 0 0 0 1.5px #141414; }
.calm-ch-booking::after { background: #8C8C88 !important; }
.calm-ch-airbnb::after  { background: #141414 !important; box-shadow: 0 0 0 1.5px #FFFFFF; }
.calm-ch-dot-directa { background: #FFFFFF !important; box-shadow: 0 0 0 1.5px #141414; }
.calm-ch-dot-booking { background: #8C8C88 !important; }
.calm-ch-dot-airbnb  { background: #141414 !important; box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 2.5px #C9C9C5; }
html.hh-dark .calm-ch-directa::after,
html.hh-dark .calm-ch-dot-directa { background: #1A1A1A !important; box-shadow: 0 0 0 1.5px #F5F5F2; }

/* "Hoy": aro de acento para que se distinga de una reserva */
html .calm-today { background: #141414 !important; color: #fff !important; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #141414; }
html.hh-dark .calm-today { background: #F5F5F2 !important; color: #141414 !important; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #141414; }

/* ═══ CALENDARIO (vista general / Gantt) — barras en grises ═══ */
html .hh-gcal-bar--directa { background: #2FA65E !important; }
html .hh-gcal-bar--booking { background: #2C7BE5 !important; }
html .hh-gcal-bar--airbnb  { background: #FF385C !important; color: #fff !important; }
html .hh-gcal-bar--airbnb * { color: #fff !important; }

/* Fines de semana y feriados sin rojos/amarillos: solo grises */
html .hh-gcal-day-hd--weekend { background: #E8E8E4 !important; color: #141414 !important; }
html .hh-gcal-day-hd--weekend .hh-gcal-day-num { color: #141414 !important; font-weight: 700; }
html .hh-gcal-day-hd--feriado { background: #141414 !important; }
html .hh-gcal-cell--weekend { background: #EFEFEC !important; }
html .hh-gcal-cell--weekend .hh-gcal-day-price { color: #6F6F6C !important; }
html .hh-gcal-cell--feriado { background: #E8E8E4 !important; }

/* ═══ RESERVAS (Admin): estados sin verde/amarillo ═════════════ */
/* Cobrada = neutro resuelto · Pendiente = acento (requiere acción) */
html .b-directa {
  background: #F1F1EE !important; color: #141414 !important;
  border: 1px solid #DEDEDA;
}
/* Cobrada = verde mate (mismo de las tarjetas: tokens --u-occ) */
html .b-cobrada {
  background: var(--u-occ-bg) !important; color: var(--u-occ-fg) !important;
  border: 1px solid transparent !important;
}
/* Pendiente = contorno negro (pide acción); Cobrada = gris resuelto */
html .b-pend {
  background: #FFFFFF !important; color: #141414 !important;
  border: 1.5px solid #141414 !important;
}
html .adm-legend .adm-lsq { border: 1px solid #C9C9C5; }
html .adm-legend span:nth-child(1) .adm-lsq { background: #F1F1EE !important; }
html .adm-legend span:nth-child(2) .adm-lsq { background: #FFFFFF !important; border: 1.5px solid #141414 !important; }

/* Etiquetas de formulario en gris (el acento queda para acciones) */
html .adm-sf label { color: #6F6F6C !important; }

/* ═══ MODO OSCURO: neutros puros ═══════════════════════════════ */
html.hh-dark {
  --hh-text:  #ECECEA;
  --hh-muted: #A3A3A0;
  --hh-faint: #7A7A76;
  --hh-line:  #2E2E2C;
  --hh-soft:  #1E1E1C;
  --hh-bg:    #141412;
  --hh-card:  #1A1A18;

  --idx-cream:#1A1A18 !important; --idx-cream-card:#1A1A18 !important;
  --idx-teal-soft:#222220 !important; --idx-text:#ECECEA !important;
  --idx-muted:#A3A3A0 !important; --idx-border:#2E2E2C !important;
  --idx-coral-soft:#262624 !important; --idx-bg:#141412 !important;
}
html.hh-dark .idx-card, html.hh-dark .idx-soft-card,
html.hh-dark .adm-card, html.hh-dark .adm-form-card, html.hh-dark .adm-search {
  border-color: #2E2E2C !important;
}

/* ═══ ÍCONOS DE MENÚ — línea fina, mismo trazo que la tipografía ═══ */
/* El markup usa <span class="sb-icon" data-ico="..."> y acá se pinta
   la forma con máscara: el color sale de currentColor del ítem. */
.sb-icon[data-ico] {
  display: inline-block;
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  font-size: 0;              /* oculta cualquier resto de texto */
}
.sb-icon[data-ico="home"]      { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>'); }
.sb-icon[data-ico="clipboard"] { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>'); }
.sb-icon[data-ico="calendar"]  { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>'); }
.sb-icon[data-ico="chat"]      { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>'); }
.sb-icon[data-ico="user"]      { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>'); }
.sb-icon[data-ico="building"]  { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M8 10h.01M16 10h.01M12 10h.01M8 14h.01M16 14h.01M12 14h.01"/></svg>'); }
.sb-icon[data-ico="dollar"]    { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>'); }
.sb-icon[data-ico="chart"]     { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>'); }
.sb-icon[data-ico="tools"]     { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>'); }
.sb-icon[data-ico="receipt"]   { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>'); }
.sb-icon[data-ico="file"]      { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M13 2v7h7"/></svg>'); }
.sb-icon[data-ico="trend"]     { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/></svg>'); }
.sb-icon[data-ico="exit"]      { --ico: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg>'); }

/* ═══ BOTÓN DE TEMA: luna en claro, sol en oscuro ═══════════════ */
.hh-theme-btn { display: inline-flex; align-items: center; justify-content: center; }
.hh-theme-btn .ico-sol  { display: none; }
.hh-theme-btn.modo-oscuro .ico-sol  { display: inline; }
.hh-theme-btn.modo-oscuro .ico-luna { display: none; }

/* ═══ TIPOGRAFÍA v2: etiquetas en MONO mayúscula (estilo ref) ═══ */
html .idx-ph-eye, html .adm-ph-eye, html .hh-ph-eye,
html .adm-search-title, html .adm-sf label, html .adm-field > label,
html .idx-tbl th, html .adm-tbl th,
html .idx-soft-title, html .idx-occ-top span,
html .calm-legend .calm-leg, html .calm-leg-label {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 500;
}

/* ═══ AIRE: más respiro entre bloques (estilo ref) ══════════════ */
html .idx-ph  { margin-bottom: 30px; }
html .adm-ph  { margin-bottom: 28px; }
html .idx-soft-hd { padding: 16px 20px; }
html .idx-admin-quick { gap: 22px; margin-bottom: 26px; }
html .adm-search { padding: 20px 22px; margin-bottom: 16px; }
html .adm-form-card { padding: 26px 26px; }
html .idx-co-row { padding: 13px 20px; }

/* Sombras de color de las barras del Gantt: fuera */
html .hh-gcal-bar { box-shadow: none !important; }
html .hh-gcal-cell--released, html .hh-gcal-cell--checkout { background: #F1F1EE !important; }

/* Lista de reservas del mes (calendario por casa): estados y pills */
html .calm-res-pend { background: #FFFFFF !important; color: #141414 !important; border: 1.5px solid #141414; }
html .hh-gcal-res-detail .hh-gcal-res-detail-pill { background: #F1F1EE !important; color: #141414 !important; }

/* ═══ COMISIONES: chips KPI y badges en neutro ═════════════════ */
html .com-kpi-icon,
html .com-kpi-icon--dp, html .com-kpi-icon--night, html .com-kpi-icon--occ {
  background: #F1F1EE !important;
  color: #141414 !important;
  border: 1px solid #E2E2DE;
  font-family: var(--font-mono);
}

/* ═══ COLORES FUNCIONALES DE PORTAL (pedido del usuario) ═══════
   Base monocroma, pero cada portal se identifica por su borde:
   Directa = verde oliva oscuro · Airbnb = rojo · Booking = azul */
:root {
  --portal-directa: #2FA65E;
  --portal-airbnb:  #FF385C;
  --portal-booking: #2C7BE5;
}

/* Reservas: el cartel de las directas en verde oliva oscuro */
html .b-directa {
  background: var(--portal-directa) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Calendario por casa: borde del cuadro pintado según portal */
html .calm-ch-directa { box-shadow: inset 0 0 0 2px var(--portal-directa) !important; }
html .calm-ch-airbnb  { box-shadow: inset 0 0 0 2px var(--portal-airbnb) !important; }
html .calm-ch-booking { box-shadow: inset 0 0 0 2px var(--portal-booking) !important; }
/* Los puntitos ahora acompañan el color del borde */
html .calm-ch-directa::after, html .calm-ch-dot-directa { background: var(--portal-directa) !important; box-shadow: none !important; }
html .calm-ch-airbnb::after,  html .calm-ch-dot-airbnb  { background: var(--portal-airbnb) !important;  box-shadow: none !important; }
html .calm-ch-booking::after, html .calm-ch-dot-booking { background: var(--portal-booking) !important; box-shadow: none !important; }

/* Vista general: barras SÓLIDAS por portal (igual que en modo oscuro) */
html .hh-gcal-bar--directa { background: #2FA65E !important; color: #fff !important; border: none !important; }
html .hh-gcal-bar--booking { background: #2C7BE5 !important; color: #fff !important; border: none !important; }
html .hh-gcal-bar--airbnb  { background: #FF385C !important; color: #fff !important; border: none !important; }

/* El "hoy" mantiene su doble aro monocromo por encima del estado */

/* Texto oscuro por defecto (bloqueos), BLANCO en las barras de portal */
html .hh-gcal-bar, html .hh-gcal-bar * { color: #141414 !important; }
html .hh-gcal-bar .hh-gcal-bar-icon { background: #141414 !important; color: #FFFFFF !important; }
html .hh-gcal-bar--directa, html .hh-gcal-bar--directa *,
html .hh-gcal-bar--booking, html .hh-gcal-bar--booking *,
html .hh-gcal-bar--airbnb,  html .hh-gcal-bar--airbnb *  { color: #fff !important; }
html .hh-gcal-bar--directa .hh-gcal-bar-icon,
html .hh-gcal-bar--booking .hh-gcal-bar-icon,
html .hh-gcal-bar--airbnb  .hh-gcal-bar-icon { background: rgba(255,255,255,.22) !important; color: #fff !important; }

/* ═══ BLOQUEOS SIN AMARILLO NI AZUL ════════════════════════════ */
html .hh-gcal-bar--bloqueo-prop {
  background: repeating-linear-gradient(-45deg, #EFEFEC 0 6px, #DEDEDA 6px 12px) !important;
  color: #4A4A47 !important;
  border: 1.5px dashed #8C8C88 !important;
  box-shadow: none !important;
}
html .hh-gcal-bar--bloqueo-admin {
  background: repeating-linear-gradient(-45deg, #D8D8D4 0 6px, #C9C9C5 6px 12px) !important;
  color: #141414 !important;
  border: 1.5px dashed #4A4A47 !important;
  box-shadow: none !important;
}
html .gcal-bloqueo-prop  { background: #EFEFEC !important; color: #4A4A47 !important; border: 1px dashed #8C8C88; }
html .gcal-bloqueo-admin { background: #E2E2DE !important; color: #141414 !important; border: 1px dashed #4A4A47; }

/* ═══ LOGO ABEJA ═══════════════════════════════════════════════ */
.hh-brand-abeja {
  border-radius: 50%;
  width: 40px !important;
  height: 40px !important;
  object-fit: cover;
}
.sb-logo .hh-brand-abeja { width: 48px !important; height: 48px !important; }
@media (max-width: 575.98px) {
  .navbar-brand .hh-brand-abeja { width: 34px !important; height: 34px !important; }
}

/* ═══ MODALES DEL CALENDARIO ADMIN — estilo del sistema ════════════
   Dos modales: gcalModal (editar dia: precio/bloqueo) y calm-sheet
   (panel de reserva al tocar una celda). Antes usaban verde oliva
   #3f4f3c, rojo #dc2626 y grises sueltos. */

/* Contenedor + tipografia */
html .gcal-modal, html .calm-sheet {
  font-family: 'Space Grotesk', sans-serif !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.28) !important;
}
html .gcal-modal { border-radius: 16px !important; }
html .gcal-modal-titulo, html .calm-sheet-name {
  font-family: 'Space Grotesk', sans-serif !important;
  text-transform: uppercase; letter-spacing: .01em;
}

/* Tabs (precio / bloqueo): activo en negro */
html .gcal-modal-tab { color: var(--hh-muted) !important; font-family: var(--font-mono) !important;
                       text-transform: uppercase; letter-spacing: .05em; }
html .gcal-modal-tab.activo { color: #141414 !important; border-bottom-color: #141414 !important; }
html .gcal-modal-tabs { border-bottom-color: var(--hh-line) !important; }

/* Labels e inputs */
html .gcal-modal label { color: var(--hh-muted) !important; font-family: var(--font-mono) !important;
                         text-transform: uppercase; letter-spacing: .04em; font-size: .7rem !important; }
html .gcal-modal input[type=number], html .gcal-modal input[type=text], html .gcal-modal input[type=date] {
  border: 1.5px solid var(--hh-line) !important; border-radius: 9px !important;
  background: var(--hh-soft) !important; color: var(--hh-text) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}
html .gcal-modal input:focus { border-color: #141414 !important; outline: none; }

/* Botones: negro para acciones, contorno para cancelar */
html .gcal-modal-btn { border-radius: 10px !important; font-family: 'Space Grotesk', sans-serif !important;
                       font-weight: 700 !important; padding: 10px 18px !important; min-height: 42px; }
html .gcal-modal-btn-primary, html .gcal-modal-btn-danger { background: var(--hh-text) !important; color: var(--hh-bg) !important; }
html .gcal-modal-btn-secondary { background: transparent !important; color: var(--hh-muted) !important;
                                 border: 1.5px solid var(--hh-line) !important; }
html .gcal-modal-close { color: var(--hh-muted) !important; border: 1px solid var(--hh-line) !important; border-radius: 9px !important; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1rem !important; padding: 0 !important; }
html .gcal-modal-close:hover { color: var(--hh-text) !important; border-color: var(--hh-muted) !important; }
html .gcal-modal-close:hover { background: var(--hh-soft) !important; }

/* ── Panel de reserva (calm-sheet) ── */
html .calm-sheet { border-radius: 18px 18px 0 0 !important; }
html .calm-sheet-x { color: var(--hh-muted) !important; }
/* WhatsApp = contorno, "Ver en el panel" = negro pleno (ambos neutros) */
html .calm-sheet-wa { background: transparent !important; color: #141414 !important;
                      border: 1.5px solid var(--hh-line) !important; }
html .calm-sheet-edit { background: #141414 !important; color: #fff !important; }

/* Chip de portal en el panel de reserva: color del portal (contorno) */
html .calm-sheet-ch { background: transparent !important; border: 1.5px solid; }
html .calm-ch-bdg-directa { color: var(--portal-directa) !important; border-color: var(--portal-directa) !important; }
html .calm-ch-bdg-airbnb  { color: var(--portal-airbnb)  !important; border-color: var(--portal-airbnb)  !important; }
html .calm-ch-bdg-booking { color: var(--portal-booking) !important; border-color: var(--portal-booking) !important; }
/* Pendiente en el panel: neutro (mono), sin rojo */
html .calm-sh-pend { color: #141414 !important; }

/* Iconos del menú "Editar día": color vivo por categoría (los define calendario.css).
   Antes esto los forzaba a gris/negro monocromo — se quitó para el tema vibrante. */

/* Etiquetas de tipo de bloqueo: monocromo (Admin=negro, Propietario=contorno, Canje=gris) */
html .gcal-bloq-badge--admin { background: #141414 !important; color: #fff !important; }
html .gcal-bloq-badge--prop  { background: #fff !important; color: #141414 !important; border: 1.5px solid #141414; }
html .gcal-bloq-badge--canje { background: #C9C9C5 !important; color: #141414 !important; }

/* Badges de bloqueo en modo oscuro: invertir para que se lean */
html.hh-dark .gcal-bloq-badge--admin { background: #F5F5F2 !important; color: #141414 !important; }
html.hh-dark .gcal-bloq-badge--prop  { background: transparent !important; color: #F5F5F2 !important; border-color: #F5F5F2 !important; }
html.hh-dark .gcal-bloq-badge--canje { background: #5A5A57 !important; color: #F5F5F2 !important; }

/* ═══ PRECIOS / COMPETIDORES / RECOMENDACIONES — monocromo ═════════ */
/* Variables que precios.css usa con fallback verde/gris */
:root, html { --hh-green: #141414 !important; --hh-accent: #141414 !important; }

/* Botones y tabs de la pagina de Precios */
html .pc-btn-pri { background: #141414 !important; color: #fff !important; }
html .pc-btn-actualizar { background: #141414 !important; color: #fff !important; }
html .pc-btn-actualizar:hover { background: #000 !important; }
html .pc-prop-tab.sel { background: #141414 !important; border-color: #141414 !important; color: #fff !important; }
html .pc-prop-tab:hover { border-color: #141414 !important; color: #141414 !important; }
html .pc-eyebrow { color: var(--hh-muted) !important; font-family: var(--font-mono) !important; }

/* Badges activo/inactivo neutros */
html .pc-badge-activo   { background: #141414 !important; color: #fff !important; }
html .pc-badge-inactivo { background: #F1F1EE !important; color: #6F6F6C !important; border: 1px solid #E2E2DE; }

/* Recomendaciones: cajas de estado (aceptada/pendiente/info) en grises */
html .rec-badge-ok, html .rec-ok      { background: #141414 !important; color: #fff !important; border: none !important; }
html .rec-badge-warn, html .rec-warn  { background: #FFFFFF !important; color: #141414 !important; border: 1.5px solid #141414 !important; }
html .rec-badge-info, html .rec-info  { background: #F1F1EE !important; color: #141414 !important; border: 1px solid #E2E2DE !important; }

/* Panel "Actualizar precios por propiedad" (era celeste) → neutro */
html .pc-actualizar-strip { background: var(--hh-soft) !important; border: 1px solid var(--hh-line) !important; }
html .pc-actualizar-label { color: var(--hh-text) !important; font-family: var(--font-mono) !important;
                            text-transform: uppercase; letter-spacing: .04em; }

/* Dashboard de mercado / plataformas: azules y verdes → neutro,
   salvo los badges de plataforma que siguen los colores de portal. */
html .mcd-diff-barato { background: #F1F1EE !important; color: #141414 !important; }
html .mcd-diff-caro   { background: #FFFFFF !important; color: #141414 !important; border: 1.5px solid #141414 !important; }
html .plat-badge.booking { background: transparent !important; color: var(--portal-booking) !important; border: 1.5px solid var(--portal-booking) !important; }
html .plat-badge.airbnb  { background: transparent !important; color: var(--portal-airbnb)  !important; border: 1.5px solid var(--portal-airbnb)  !important; }
html .mcd-link-booking { background: var(--hh-soft) !important; color: #141414 !important; }

/* Recomendaciones: chips de proyección (eran celestes) → contorno neutro */
html .btn-prop-proyeccion { background: transparent !important; color: #141414 !important; border: 1.5px solid var(--hh-line) !important; }
html .btn-prop-proyeccion:hover,
html .btn-prop-proyeccion.btn-prop-activo { background: #141414 !important; color: #fff !important; border-color: #141414 !important; }

/* Mercado: caja "sin precios" y fila propia → sin amarillo ni azul */
html .mcd-sin-precios { border-color: var(--hh-line) !important; }
html .mcd-fila-propia td { background: var(--hh-soft) !important; border-bottom: 1px solid var(--hh-line) !important; }
html .mcd-fila-propia-badge { color: #141414 !important; }
html .mcd-mi-precio-inline { color: #141414 !important; }

/* ═══════════════════════════════════════════════════════════════
   MODO OSCURO — colores de portal y estados
   Las reglas de arriba (html .xxx !important) pintan todo claro para
   el tema híbrido. En oscuro esos claros quedaban como bloques blancos
   ilegibles, así que acá se redefinen con fondos oscuros tintados por
   portal (usan !important + html.hh-dark para ganarle a las de arriba).
   ═══════════════════════════════════════════════════════════════ */

/* ── Calendario general (Gantt): barras tintadas oscuras ── */
html.hh-dark .hh-gcal-bar--directa {
  background: #2FA65E !important; color: #fff !important;
  border: none !important;
}
html.hh-dark .hh-gcal-bar--booking {
  background: #2C7BE5 !important; color: #fff !important;
  border: none !important;
}
html.hh-dark .hh-gcal-bar--airbnb {
  background: #FF385C !important; color: #fff !important;
  border: none !important;
}
html.hh-dark .hh-gcal-bar,
html.hh-dark .hh-gcal-bar * { color: #ECECEA !important; }
html.hh-dark .hh-gcal-bar .hh-gcal-bar-icon {
  background: rgba(255,255,255,.18) !important; color: #ECECEA !important;
}

/* Bloqueos en oscuro (rayado gris oscuro, no blanco) */
html.hh-dark .hh-gcal-bar--bloqueo-prop {
  background: repeating-linear-gradient(-45deg, #2a2a26 0 6px, #33332e 6px 12px) !important;
  color: #cfcfca !important; border: 1.5px dashed #6f6f68 !important;
}
html.hh-dark .hh-gcal-bar--bloqueo-admin {
  background: repeating-linear-gradient(-45deg, #33332e 0 6px, #3f3f38 6px 12px) !important;
  color: #ECECEA !important; border: 1.5px dashed #8a8a80 !important;
}

/* Celdas liberadas / checkout: gris oscuro en vez de crema */
html.hh-dark .hh-gcal-cell--released,
html.hh-dark .hh-gcal-cell--checkout { background: #20241f !important; }

/* ── Reservas (Admin): fila cobrada y pills de estado ── */
html.hh-dark .tbl-res tr.cobrada td { background: rgba(134,217,146,.12) !important; }
html.hh-dark .tbl-res tr.cobrada:hover td { background: rgba(134,217,146,.18) !important; }
html.hh-dark .b-cobrada {
  background: #2E9E5B !important; color: #fff !important;
  border: 1px solid transparent !important;
}
html.hh-dark .b-pend {
  background: #ECECEA !important; color: #141414 !important;
  border: 1.5px solid #ECECEA !important;
}
html.hh-dark .b-directa {
  background: #2FA65E !important; color: #fff !important; border: none !important;
}
html.hh-dark .b-booking {
  background: #2C7BE5 !important; color: #fff !important; border: none !important;
}
html.hh-dark .b-airbnb {
  background: #FF385C !important; color: #fff !important; border: none !important;
}

/* ── Inicio: item de reserva con check-in cercano (era blanco) ── */
html.hh-dark .idx-res-item--priority {
  background: #17241b !important; border-left-color: #4a9e6d !important;
}