/* ════════════════════════════════════════════════════════════════════
   hh-ui.css — Sistema de diseño de Happy Host
   El "molde único" que usan todas las páginas. Colores mate, claro/oscuro.
   - Tokens (variables) con prefijo  --u-*
   - Clases de componentes con prefijo  .u-*
   El modo oscuro se activa con la clase  html.hh-dark  (igual que el resto).
   Cambiás un color acá y se actualiza en todo el sistema.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Tipografías (ya cargadas globalmente) */
    --u-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --u-mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;

    /* Neutros base (gris cálido, no gris puro) */
    --u-ground: #FBFAF7;
    --u-surface: #FFFFFF;
    --u-surface-2: #F4F2EC;
    --u-line: #E7E4DD;
    --u-line-strong: #D8D4CB;
    --u-ink: #2B2A27;
    --u-muted: #85807A;
    --u-faint: #A8A39B;

    /* Panel charcoal SIEMPRE oscuro (con texto blanco fijo), en ambos temas.
       Usar cuando el texto es #fff hardcodeado y no debe invertirse. */
    --u-panel-dark: #2B2A27;

    /* Colores mate por familia */
    --u-fam-cal: #7B73B0;   /* Casas Calafate */
    --u-fam-cruz: #B6923F;  /* Cruz del Sur */
    --u-fam-nil: #5E9B79;   /* Nílidas */
    --u-fam-gur: #C07B63;   /* Gurisa */
    --u-fam-pai: #6E93A8;   /* Paisajismo */
    --u-fam-pm: #5E9E9E;    /* Nueva Esperanza (Puerto Margarita) */

    /* Rellenos suaves para cards de número */
    --u-ing-bg: #FBE7E0; --u-ing-fg: #7A3B25;   /* coral (ingresos) */
    --u-cur-bg: #F1EAD9; --u-cur-fg: #6B551F;   /* ocre */
    --u-occ-bg: #E2EEE7; --u-occ-fg: #2E5540;   /* verde */
    --u-out-bg: #F7DAD4; --u-out-fg: #8A2E22;   /* rojo ladrillo (gastos) */
    --u-blu-bg: #E4EAEF; --u-blu-fg: #33505F;   /* azul apagado */

    /* Estados semánticos */
    --u-ok: #5E9B79;
    --u-warn: #B6923F;
    --u-danger: #BB5A44;

    /* Portales de reserva */
    --u-por-dir: #7E8C6A;   /* Directo */
    --u-por-air: #B26A5F;   /* Airbnb */
    --u-por-boo: #5E7CA0;   /* Booking */

    /* Chips / pills */
    --u-pill-bg: #F0EEE8;
    --u-pill-ink: #6B665F;

    /* Radios */
    --u-r: 16px;
    --u-r-sm: 10px;
}

html.hh-dark {
    --u-ground: #15171B;
    --u-surface: #20232A;
    --u-surface-2: #191B20;
    --u-line: #34383F;
    --u-line-strong: #41454D;
    --u-ink: #E8E5DF;
    --u-muted: #A8A29A;
    --u-faint: #726D66;

    /* Tints suaves (fondo tenue + texto claro): se usan como fondo de "tint cards"
       y también como TEXTO de color sobre superficies oscuras. NO tocar el -fg:
       tiene que seguir siendo claro para leerse sobre oscuro. */
    --u-ing-bg: #3A241D; --u-ing-fg: #F3B7A4;
    --u-cur-bg: #322E20; --u-cur-fg: #DDC896;
    --u-occ-bg: #1F3229; --u-occ-fg: #A7D0B8;
    --u-out-bg: #3A1D18; --u-out-fg: #EBA79C;
    --u-blu-bg: #1E2C34; --u-blu-fg: #A9C6D6;

    --u-pill-bg: #2A2E36;
    --u-pill-ink: #B4B0A8;
}

/* ── Layout helpers ──────────────────────────────────────────────── */
.u-grid { display: grid; gap: 12px; }
.u-g2 { grid-template-columns: repeat(2, 1fr); }
.u-g3 { grid-template-columns: repeat(3, 1fr); }
.u-g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .u-g3, .u-g4 { grid-template-columns: repeat(2, 1fr); } }

/* Etiqueta de sección (mono, mayúsculas) */
.u-sec {
    font-family: var(--u-mono);
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--u-muted); font-weight: 600; margin: 0 2px 12px;
}

/* ── Cards de número (KPI) ───────────────────────────────────────── */
.u-stat { border-radius: var(--u-r); padding: 15px 17px; display: flex; flex-direction: column; justify-content: center; }
.u-stat .l { font-size: .8rem; font-weight: 600; }
.u-stat .n { font-size: 1.7rem; font-weight: 700; line-height: 1; margin-top: 6px; font-family: var(--u-mono); font-variant-numeric: tabular-nums; }
.u-stat .s { font-size: .72rem; opacity: .8; margin-top: 3px; }
/* Paleta retro (2026-09-09): tarjetas KPI vibrantes, mismas en claro y oscuro.
   Solo se tocan las .u-stat--* (NO los tokens --u-*-bg/-fg, que otras piezas
   usan como TEXTO de color sobre superficies oscuras). Gastos = vainilla. */
.u-stat--ing { background: #F96635; color: #4A1109; }
.u-stat--cur { background: #F9A822; color: #4A2E00; }
.u-stat--occ { background: #93D3AE; color: #1B4230; }
.u-stat--out { background: #FAECB6; color: #5A4A15; box-shadow: inset 0 0 0 1px #E4D18A; }
.u-stat--blu { background: #2BBAA5; color: #08352E; }
html.hh-dark .u-stat--ing { background: #F96635; color: #4A1109; }
html.hh-dark .u-stat--cur { background: #F9A822; color: #4A2E00; }
html.hh-dark .u-stat--occ { background: #93D3AE; color: #1B4230; }
html.hh-dark .u-stat--out { background: #FAECB6; color: #5A4A15; box-shadow: inset 0 0 0 1px #E4D18A; }
html.hh-dark .u-stat--blu { background: #2BBAA5; color: #08352E; }

/* ── Card de superficie ──────────────────────────────────────────── */
.u-card { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-r); padding: 16px 18px; }
.u-card__title { font-family: var(--u-sans); font-size: .95rem; font-weight: 600; color: var(--u-ink); margin: 0 0 4px; }

/* ── Botones ─────────────────────────────────────────────────────── */
.u-btn {
    font-family: var(--u-sans); font-weight: 500; font-size: .875rem;
    border-radius: var(--u-r-sm); padding: 9px 18px; min-height: 40px;
    cursor: pointer; border: 1px solid transparent; transition: all .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.u-btn:active { transform: scale(.98); }
.u-btn--primary { background: var(--u-ink); color: var(--u-ground); border-color: var(--u-ink); }
.u-btn--primary:hover { opacity: .9; }
.u-btn--outline { background: var(--u-surface); color: var(--u-ink); border-color: var(--u-line-strong); }
.u-btn--outline:hover { border-color: var(--u-muted); }
.u-btn--ghost { background: transparent; color: var(--u-muted); }
.u-btn--ghost:hover { color: var(--u-ink); }
.u-btn--danger { background: transparent; color: var(--u-danger); border-color: var(--u-danger); }
.u-btn--danger:hover { background: var(--u-danger); color: #fff; }

/* ── Campos ──────────────────────────────────────────────────────── */
.u-field {
    font-family: var(--u-sans); font-size: .875rem;
    border: 1px solid var(--u-line-strong); background: var(--u-surface); color: var(--u-ink);
    border-radius: var(--u-r-sm); padding: 9px 12px; min-height: 40px; width: 100%;
}
.u-field:focus { outline: 2px solid var(--u-fam-cal); outline-offset: 1px; border-color: transparent; }
.u-label { font-size: .75rem; color: var(--u-muted); display: block; margin: 0 0 5px; }

/* ── Pills / badges ──────────────────────────────────────────────── */
.u-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--u-mono); font-size: .69rem;
    padding: 4px 10px; border-radius: 20px; background: var(--u-pill-bg); color: var(--u-pill-ink);
}
.u-pill--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.u-pill--ok { background: var(--u-occ-bg); color: var(--u-occ-fg); }
.u-pill--warn { background: var(--u-cur-bg); color: var(--u-cur-fg); }
.u-pill--dg { background: var(--u-out-bg); color: var(--u-out-fg); }

/* ── Notas / checklist ───────────────────────────────────────────── */
.u-task { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--u-line); }
.u-task:last-child { border-bottom: 0; }
.u-box {
    width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--u-line-strong);
    display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff;
    flex: 0 0 auto; background: var(--u-surface); cursor: pointer; padding: 0;
}
.u-task.is-done .u-box { background: var(--u-ok); border-color: var(--u-ok); }
.u-task .u-tx { font-size: .875rem; color: var(--u-ink); line-height: 1.35; }
.u-task.is-done .u-tx { text-decoration: line-through; color: var(--u-muted); }
.u-who {
    margin-left: auto; width: 22px; height: 22px; border-radius: 50%; color: #fff;
    font-family: var(--u-mono); font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* ── Fila de reserva / lista ─────────────────────────────────────── */
.u-lrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--u-line); }
.u-lrow:last-child { border-bottom: 0; }
.u-lbar { width: 6px; height: 34px; border-radius: 4px; flex: 0 0 auto; }
.u-lrow .u-g { font-size: .875rem; font-weight: 500; color: var(--u-ink); }
.u-lrow .u-m { font-size: .75rem; color: var(--u-muted); }
.u-lrow .u-r { margin-left: auto; font-family: var(--u-mono); font-size: .75rem; color: var(--u-muted); }

/* ── Tabla ───────────────────────────────────────────────────────── */
.u-table { width: 100%; border-collapse: collapse; }
.u-table th {
    font-family: var(--u-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--u-faint); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--u-line); font-weight: 400;
}
.u-table td { padding: 10px 12px; font-size: .84rem; border-bottom: 1px solid var(--u-line); color: var(--u-ink); }
.u-table tr:last-child td { border-bottom: 0; }
.u-table .num { text-align: right; font-family: var(--u-mono); font-variant-numeric: tabular-nums; }

/* ── Ventanas (modales) ──────────────────────────────────────────── */
.u-modal-backdrop {
    position: fixed; inset: 0; background: rgba(10, 8, 6, .55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1050;
}
.u-modal {
    background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 20px;
    padding: 20px; max-width: 420px; width: 100%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .03) inset;
    max-height: 90vh; overflow-y: auto;
}
.u-modal__title { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--u-ink); }
.u-modal__sub { margin: 0 0 16px; font-size: .84rem; color: var(--u-muted); }
.u-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* ── Modo "limpio" (bare): para embeber una página en un modal/iframe sin el chrome ── */
body.hh-bare .sidebar,
body.hh-bare .sb-overlay,
body.hh-bare .sb-toggle,
body.hh-bare .app-topbar,
body.hh-bare .hh-mobilebar,
body.hh-bare .mbn { display: none !important; }
body.hh-bare .app-main { margin-left: 0 !important; }
body.hh-bare main[role="main"] { padding: 16px !important; }
body.hh-bare { background: var(--u-ground); }