/* ══════════════════════════════════════════════════════════════════
   HH-THEME.CSS — Happy House Design System v2.2
   ──────────────────────────────────────────────────────────────────
   Reescrito limpio sin duplicados, especificidad reforzada para
   ganar al site.css legacy sin necesidad de !important.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ══════ TOKENS LIGHT ══════ */
:root,
html[data-theme="light"] {
    --hh-primary: 350 72% 48%;
    --hh-primary-strong: 350 72% 40%;
    --hh-accent-dark: 220 24% 14%;
    --hh-bg: 220 20% 98%;
    --hh-surface: 0 0% 100%;
    --hh-surface-raised: 220 15% 96%;
    --hh-surface-sunken: 220 15% 93%;
    --hh-surface-hover: 220 15% 94%;
    --hh-text: 220 25% 14%;
    --hh-text-muted: 220 10% 45%;
    --hh-text-subtle: 220 8% 60%;
    --hh-border: 220 15% 88%;
    --hh-border-subtle: 220 15% 92%;
    --hh-border-strong: 220 15% 78%;
    --hh-ring: 350 72% 48%;

    /* Semánticos — valores principales (textos, iconos fuertes) */
    --hh-success: 152 55% 36%;
    --hh-warning: 38 92% 44%;
    --hh-danger: 0 72% 46%;
    --hh-info: 210 80% 44%;

    /* Fondos de badges — TONOS PASTEL SUAVES (alta luminosidad, baja saturación) */
    --hh-success-bg: 152 40% 94%;
    --hh-warning-bg: 38 85% 94%;
    --hh-danger-bg: 0 70% 96%;
    --hh-info-bg: 210 75% 95%;

    /* Bordes de badges — medio tono */
    --hh-success-border: 152 45% 78%;
    --hh-warning-border: 38 80% 80%;
    --hh-danger-border: 0 65% 85%;
    --hh-info-border: 210 70% 82%;

    --hh-shadow-xs: 0 1px 2px hsl(220 25% 14% / 0.04);
    --hh-shadow-sm: 0 2px 6px hsl(220 25% 14% / 0.06);
    --hh-shadow-md: 0 4px 12px hsl(220 25% 14% / 0.08);
    --hh-shadow-lg: 0 12px 28px hsl(220 25% 14% / 0.12);
    --hh-shadow-glow: 0 0 0 3px hsl(var(--hh-ring) / 0.18);
}

/* ══════ TOKENS DARK ══════ */
html[data-theme="dark"] {
    --hh-primary: 350 72% 58%;
    --hh-primary-strong: 350 72% 68%;
    --hh-accent-dark: 220 20% 6%;
    --hh-bg: 220 20% 8%;
    --hh-surface: 220 20% 12%;
    --hh-surface-raised: 220 20% 15%;
    --hh-surface-sunken: 220 20% 6%;
    --hh-surface-hover: 220 20% 18%;
    --hh-text: 220 10% 95%;
    --hh-text-muted: 220 10% 65%;
    --hh-text-subtle: 220 8% 50%;
    --hh-border: 220 15% 22%;
    --hh-border-subtle: 220 15% 18%;
    --hh-border-strong: 220 15% 30%;
    --hh-ring: 350 72% 62%;

    /* Semánticos — valores vibrantes para destacar sobre fondo oscuro */
    --hh-success: 152 55% 62%;
    --hh-warning: 38 92% 62%;
    --hh-danger: 0 72% 64%;
    --hh-info: 210 80% 64%;

    /* Fondos de badges — TONOS OSCUROS PROFUNDOS (baja luminosidad, media saturación) */
    --hh-success-bg: 152 40% 14%;
    --hh-warning-bg: 38 50% 14%;
    --hh-danger-bg: 0 45% 15%;
    --hh-info-bg: 210 50% 15%;

    /* Bordes de badges — tono medio */
    --hh-success-border: 152 40% 28%;
    --hh-warning-border: 38 55% 30%;
    --hh-danger-border: 0 55% 32%;
    --hh-info-border: 210 55% 32%;

    --hh-shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.4);
    --hh-shadow-sm: 0 2px 6px hsl(0 0% 0% / 0.5);
    --hh-shadow-md: 0 4px 12px hsl(0 0% 0% / 0.55);
    --hh-shadow-lg: 0 12px 28px hsl(0 0% 0% / 0.6);
    --hh-shadow-glow: 0 0 0 3px hsl(var(--hh-ring) / 0.25);
}

/* ══════ BASE — html + body ══════ */
html[data-theme] { background: hsl(var(--hh-bg)); }

html[data-theme] body.hh-body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: hsl(var(--hh-text));
    background: hsl(var(--hh-bg));
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

html[data-theme][data-layout="horizontal"] body.hh-body {
    padding-top: 58px;
}
html[data-theme][data-layout="vertical"] body.hh-body {
    padding-left: 240px;
}
@media (max-width: 900px) {
    html[data-theme][data-layout="vertical"] body.hh-body {
        padding-top: 58px;
        padding-left: 0;
    }
}
html[data-theme] body.hh-body.hh-body--fullscreen {
    padding: 0;
}

html[data-theme] body.hh-body h1,
html[data-theme] body.hh-body h2,
html[data-theme] body.hh-body h3,
html[data-theme] body.hh-body h4,
html[data-theme] body.hh-body h5,
html[data-theme] body.hh-body h6 {
    font-family: 'DM Sans', sans-serif;
    color: hsl(var(--hh-text));
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    line-height: 1.2;
}
html[data-theme] body.hh-body a { color: hsl(var(--hh-primary)); text-decoration: none; }
html[data-theme] body.hh-body a:hover { color: hsl(var(--hh-primary-strong)); }

/* ══════ NAVBAR HORIZONTAL ══════ */
html[data-layout="horizontal"] .hh-nav-root {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 58px;
    background: hsl(var(--hh-surface));
    border-bottom: 1px solid hsl(var(--hh-border));
    z-index: 1000;
}
html[data-layout="horizontal"] .hh-nav-root.is-scrolled {
    box-shadow: var(--hh-shadow-sm);
}
html[data-layout="horizontal"] .hh-nav-inner {
    display: flex;
    align-items: center;
    height: 58px;
    padding: 0 20px;
    max-width: 1600px;
    margin: 0 auto;
}
html[data-layout="horizontal"] .hh-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 14px;
    flex-shrink: 0;
}
html[data-layout="horizontal"] .hh-nav-group-title { display: none; }
html[data-layout="horizontal"] .hh-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
}
html[data-layout="horizontal"] .hh-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--hh-text-muted));
    text-decoration: none;
    white-space: nowrap;
    transition: all 120ms;
}
html[data-layout="horizontal"] .hh-nav-link:hover {
    background: hsl(var(--hh-surface-hover));
    color: hsl(var(--hh-text));
}
html[data-layout="horizontal"] .hh-nav-link.is-active {
    background: hsl(var(--hh-primary));
    color: #fff;
}
html[data-layout="horizontal"] .hh-nav-link.is-active:hover {
    background: hsl(var(--hh-primary-strong));
    color: #fff;
}
html[data-layout="horizontal"] .hh-nav-link i { font-size: 12px; opacity: 0.9; }
html[data-layout="horizontal"] .hh-nav-divider {
    width: 1px;
    height: 28px;
    background: hsl(var(--hh-border));
    margin: 0 12px;
    flex-shrink: 0;
}
html[data-layout="horizontal"] .hh-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ══════ NAVBAR VERTICAL ══════ */
html[data-layout="vertical"] .hh-nav-root {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    background: hsl(var(--hh-surface));
    border-right: 1px solid hsl(var(--hh-border));
    z-index: 1000;
    overflow-y: auto;
}
html[data-layout="vertical"] .hh-nav-inner {
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    gap: 8px;
    min-height: 100%;
}
html[data-layout="vertical"] .hh-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid hsl(var(--hh-border-subtle));
    flex-shrink: 0;
}
html[data-layout="vertical"] .hh-nav-group-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: hsl(var(--hh-text-subtle));
    margin: 8px 12px 4px;
}
html[data-layout="vertical"] .hh-nav-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
html[data-layout="vertical"] .hh-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--hh-text-muted));
    text-decoration: none;
    transition: all 120ms;
}
html[data-layout="vertical"] .hh-nav-link:hover {
    background: hsl(var(--hh-surface-hover));
    color: hsl(var(--hh-text));
}
html[data-layout="vertical"] .hh-nav-link.is-active {
    background: hsl(var(--hh-primary));
    color: #fff;
    font-weight: 600;
}
html[data-layout="vertical"] .hh-nav-link i {
    width: 16px;
    text-align: center;
    font-size: 12px;
}
html[data-layout="vertical"] .hh-nav-divider {
    height: 1px;
    width: 100%;
    background: hsl(var(--hh-border-subtle));
    margin: 12px 0;
}
html[data-layout="vertical"] .hh-nav-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid hsl(var(--hh-border-subtle));
}
@media (max-width: 900px) {
    html[data-layout="vertical"] .hh-nav-root {
        bottom: auto; right: 0; width: 100%; height: 58px;
        border-right: none; border-bottom: 1px solid hsl(var(--hh-border));
    }
    html[data-layout="vertical"] .hh-nav-inner {
        flex-direction: row; padding: 0 20px; align-items: center;
    }
    html[data-layout="vertical"] .hh-nav-group-title { display: none; }
    html[data-layout="vertical"] .hh-nav-links { flex-direction: row; gap: 4px; overflow-x: auto; }
    html[data-layout="vertical"] .hh-nav-right {
        flex-direction: row; margin-top: 0; padding-top: 0; border-top: none;
    }
}

/* ══════ PAGE ══════ */
html[data-theme] body.hh-body .hh-page {
    padding: 24px 32px;
    max-width: 1600px;
    margin: 0 auto;
}
html[data-theme] body.hh-body .hh-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid hsl(var(--hh-border));
}
html[data-theme] body.hh-body .hh-page-header__content { flex: 1; min-width: 0; }
html[data-theme] body.hh-body .hh-page-header__actions {
    display: flex; gap: 8px; flex-shrink: 0;
}
html[data-theme] body.hh-body .hh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: hsl(var(--hh-primary));
    margin-bottom: 8px;
}
html[data-theme] body.hh-body .hh-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: hsl(var(--hh-primary));
}
html[data-theme] body.hh-body .hh-page-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: hsl(var(--hh-text));
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}
html[data-theme] body.hh-body .hh-page-sub {
    font-size: 14px;
    color: hsl(var(--hh-text-muted));
    margin: 0;
}
html[data-theme] body.hh-body .hh-section-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: hsl(var(--hh-text-subtle));
    margin: 24px 0 12px;
}

/* ══════ CARDS ══════ */
html[data-theme] body.hh-body .hh-card {
    background: hsl(var(--hh-surface));
    border: 1px solid hsl(var(--hh-border));
    border-radius: 10px;
    box-shadow: var(--hh-shadow-xs);
    transition: all 180ms;
    overflow: hidden;
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .hh-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid hsl(var(--hh-border-subtle));
    background: hsl(var(--hh-surface));
}
html[data-theme] body.hh-body .hh-card__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: hsl(var(--hh-text));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
html[data-theme] body.hh-body .hh-card__title i {
    font-size: 13px;
    color: hsl(var(--hh-primary));
}
html[data-theme] body.hh-body .hh-card__body {
    padding: 20px;
    color: hsl(var(--hh-text));
}

/* ══════ KPI CARDS — ASEGURAR VISIBILIDAD DE NÚMEROS ══════ */
html[data-theme] body.hh-body .hh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
html[data-theme] body.hh-body .hh-kpi {
    background: hsl(var(--hh-surface));
    border: 1px solid hsl(var(--hh-border));
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 180ms;
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .hh-kpi:hover {
    box-shadow: var(--hh-shadow-md);
    transform: translateY(-2px);
    border-color: hsl(var(--hh-border-strong));
}
html[data-theme] body.hh-body .hh-kpi__icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
html[data-theme] body.hh-body .hh-kpi--red .hh-kpi__icon   { background: hsl(var(--hh-danger-bg));  color: hsl(var(--hh-danger)); }
html[data-theme] body.hh-body .hh-kpi--green .hh-kpi__icon { background: hsl(var(--hh-success-bg)); color: hsl(var(--hh-success)); }
html[data-theme] body.hh-body .hh-kpi--blue .hh-kpi__icon  { background: hsl(var(--hh-info-bg));    color: hsl(var(--hh-info)); }
html[data-theme] body.hh-body .hh-kpi--amber .hh-kpi__icon { background: hsl(var(--hh-warning-bg)); color: hsl(var(--hh-warning)); }

html[data-theme] body.hh-body .hh-kpi__body {
    flex: 1;
    min-width: 0;
}
html[data-theme] body.hh-body .hh-kpi__value {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: hsl(var(--hh-text));
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    display: block;
}
html[data-theme] body.hh-body .hh-kpi__label {
    font-size: 12.5px;
    color: hsl(var(--hh-text-muted));
    font-weight: 500;
    display: block;
}
html[data-theme] body.hh-body .hh-kpi__trend {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
html[data-theme] body.hh-body .hh-kpi__trend--up { color: hsl(var(--hh-success)); }
html[data-theme] body.hh-body .hh-kpi__trend--down { color: hsl(var(--hh-danger)); }

/* ══════ BOTONES ══════ */
html[data-theme] body.hh-body .hh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 120ms;
    text-decoration: none;
    white-space: nowrap;
    background: none;
}
html[data-theme] body.hh-body .hh-btn:active { transform: scale(0.98); }

html[data-theme] body.hh-body .hh-btn--primary {
    background: hsl(var(--hh-primary));
    color: #fff;
    border-color: hsl(var(--hh-primary));
}
html[data-theme] body.hh-body .hh-btn--primary:hover {
    background: hsl(var(--hh-primary-strong));
    color: #fff;
}
html[data-theme] body.hh-body .hh-btn--outline {
    background: hsl(var(--hh-surface));
    color: hsl(var(--hh-text));
    border-color: hsl(var(--hh-border));
}
html[data-theme] body.hh-body .hh-btn--outline:hover {
    background: hsl(var(--hh-surface-hover));
    border-color: hsl(var(--hh-border-strong));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .hh-btn--ghost {
    background: transparent;
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .hh-btn--ghost:hover {
    background: hsl(var(--hh-surface-hover));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .hh-btn--danger {
    background: hsl(var(--hh-danger));
    color: #fff;
    border-color: hsl(var(--hh-danger));
}
html[data-theme] body.hh-body .hh-btn--sm { padding: 5px 10px; font-size: 11px; }
html[data-theme] body.hh-body .hh-btn--lg { padding: 12px 22px; font-size: 14px; }
html[data-theme] body.hh-body .hh-btn--block { width: 100%; }
html[data-theme] body.hh-body .hh-btn--icon { padding: 8px; width: 36px; justify-content: center; }

/* ══════ INPUTS ══════ */
html[data-theme] body.hh-body .hh-input,
html[data-theme] body.hh-body .hh-select,
html[data-theme] body.hh-body .hh-textarea {
    width: 100%;
    padding: 9px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: hsl(var(--hh-text));
    background: hsl(var(--hh-surface));
    border: 1px solid hsl(var(--hh-border));
    border-radius: 8px;
    outline: none;
    transition: all 120ms;
}
html[data-theme] body.hh-body .hh-input:focus,
html[data-theme] body.hh-body .hh-select:focus {
    border-color: hsl(var(--hh-ring));
    box-shadow: var(--hh-shadow-glow);
}
html[data-theme] body.hh-body .hh-input::placeholder {
    color: hsl(var(--hh-text-subtle));
}
html[data-theme] body.hh-body .hh-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
html[data-theme] body.hh-body .hh-label {
    font-size: 12.5px;
    font-weight: 600;
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .hh-input-group { position: relative; }
html[data-theme] body.hh-body .hh-input-group .hh-input { padding-left: 38px; }
html[data-theme] body.hh-body .hh-input-group__icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--hh-text-subtle));
    font-size: 12.5px;
    pointer-events: none;
}

/* Switch */
html[data-theme] body.hh-body .hh-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
html[data-theme] body.hh-body .hh-switch input { opacity: 0; width: 0; height: 0; }
html[data-theme] body.hh-body .hh-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: hsl(var(--hh-border-strong));
    border-radius: 999px;
    transition: background 180ms;
}
html[data-theme] body.hh-body .hh-switch__slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 180ms;
}
html[data-theme] body.hh-body .hh-switch input:checked + .hh-switch__slider {
    background: hsl(var(--hh-primary));
}
html[data-theme] body.hh-body .hh-switch input:checked + .hh-switch__slider::before {
    transform: translateX(16px);
}

/* ══════ PILLS ══════ */
html[data-theme] body.hh-body .hh-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.4;
    border: 1px solid transparent;
}
html[data-theme] body.hh-body .hh-pill--success { background: hsl(var(--hh-success-bg)); color: hsl(var(--hh-success)); border-color: hsl(var(--hh-success-border)); }
html[data-theme] body.hh-body .hh-pill--warning { background: hsl(var(--hh-warning-bg)); color: hsl(var(--hh-warning)); border-color: hsl(var(--hh-warning-border)); }
html[data-theme] body.hh-body .hh-pill--danger  { background: hsl(var(--hh-danger-bg));  color: hsl(var(--hh-danger));  border-color: hsl(var(--hh-danger-border)); }
html[data-theme] body.hh-body .hh-pill--info    { background: hsl(var(--hh-info-bg));    color: hsl(var(--hh-info));    border-color: hsl(var(--hh-info-border)); }
html[data-theme] body.hh-body .hh-pill--primary { background: hsl(var(--hh-primary) / 0.1); color: hsl(var(--hh-primary)); border-color: hsl(var(--hh-primary) / 0.3); }
html[data-theme] body.hh-body .hh-pill--neutral { background: hsl(var(--hh-surface-sunken)); color: hsl(var(--hh-text-muted)); border-color: hsl(var(--hh-border)); }

html[data-theme] body.hh-body .hh-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
html[data-theme] body.hh-body .hh-pill--success .hh-dot { background: hsl(var(--hh-success)); }
html[data-theme] body.hh-body .hh-pill--warning .hh-dot { background: hsl(var(--hh-warning)); }
html[data-theme] body.hh-body .hh-pill--danger .hh-dot  { background: hsl(var(--hh-danger)); }
html[data-theme] body.hh-body .hh-pill--info .hh-dot    { background: hsl(var(--hh-info)); }

html[data-theme] body.hh-body .hh-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: hsl(var(--hh-success-bg));
    color: hsl(var(--hh-success));
    border: 1px solid hsl(var(--hh-success-border));
}
html[data-theme] body.hh-body .hh-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: hsl(var(--hh-success));
}

/* ══════ ALERTS ══════ */
html[data-theme] body.hh-body .hh-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 13.5px;
    margin-bottom: 14px;
}
html[data-theme] body.hh-body .hh-alert i { font-size: 16px; margin-top: 2px; flex-shrink: 0; }
html[data-theme] body.hh-body .hh-alert strong { font-weight: 600; }
html[data-theme] body.hh-body .hh-alert--info { background: hsl(var(--hh-info-bg)); border-color: hsl(var(--hh-info-border)); color: hsl(var(--hh-info)); }
html[data-theme] body.hh-body .hh-alert--success { background: hsl(var(--hh-success-bg)); border-color: hsl(var(--hh-success-border)); color: hsl(var(--hh-success)); }
html[data-theme] body.hh-body .hh-alert--warning { background: hsl(var(--hh-warning-bg)); border-color: hsl(var(--hh-warning-border)); color: hsl(var(--hh-warning)); }
html[data-theme] body.hh-body .hh-alert--danger  { background: hsl(var(--hh-danger-bg));  border-color: hsl(var(--hh-danger-border));  color: hsl(var(--hh-danger)); }

/* ══════ TABLAS — ARREGLAR HOVER BLANCO ══════ */
html[data-theme] body.hh-body .hh-table-wrap {
    background: hsl(var(--hh-surface));
    border: 1px solid hsl(var(--hh-border));
    border-radius: 10px;
    overflow: hidden;
}
html[data-theme] body.hh-body .hh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: hsl(var(--hh-text));
    background: hsl(var(--hh-surface));
}
html[data-theme] body.hh-body .hh-table thead th {
    background: hsl(var(--hh-surface-sunken));
    color: hsl(var(--hh-text-muted));
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid hsl(var(--hh-border));
}
html[data-theme] body.hh-body .hh-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--hh-border-subtle));
    color: hsl(var(--hh-text));
    background: transparent;
}
html[data-theme] body.hh-body .hh-table tbody tr {
    transition: background-color 120ms;
}

/* HOVER EXPLÍCITO light/dark — contenido SIEMPRE visible */
html[data-theme="light"] body.hh-body .hh-table tbody tr:hover td {
    background: hsl(220 15% 95%);
    color: hsl(var(--hh-text));
}
html[data-theme="dark"] body.hh-body .hh-table tbody tr:hover td {
    background: hsl(220 20% 18%);
    color: hsl(var(--hh-text));
}
/* Dentro del hover, los links y textos muted mantienen contraste */
html[data-theme] body.hh-body .hh-table tbody tr:hover td a { color: hsl(var(--hh-primary)); }
html[data-theme] body.hh-body .hh-table tbody tr:hover td .hh-text-muted { color: hsl(var(--hh-text-muted)); }

html[data-theme] body.hh-body .hh-table tbody tr:last-child td { border-bottom: none; }
html[data-theme] body.hh-body .hh-td-end { text-align: right; }
html[data-theme] body.hh-body .hh-td-center { text-align: center; }
html[data-theme] body.hh-body .hh-td-num { font-variant-numeric: tabular-nums; }

/* ══════ PROTECCIÓN GLOBAL DE HOVERS ══════ */
/* Ningún hover debería dejar texto con el mismo color del fondo */
html[data-theme] body.hh-body button:not(.hh-btn--primary):not(.hh-btn--danger):hover {
    /* Los botones no-primary/danger mantienen texto legible en hover */
    color: hsl(var(--hh-text));
}
/* Links genéricos en hover mantienen color visible */
html[data-theme] body.hh-body a:hover {
    text-decoration: none;
}
/* Divs con onmouseover inline: asegurar que no tapen el texto */
html[data-theme] body.hh-body *:hover {
    transition-property: background-color, border-color, color, box-shadow, transform;
}

/* Progress */
html[data-theme] body.hh-body .hh-progress {
    height: 6px;
    background: hsl(var(--hh-surface-sunken));
    border-radius: 999px;
    overflow: hidden;
}
html[data-theme] body.hh-body .hh-progress__bar {
    height: 100%;
    background: hsl(var(--hh-primary));
    transition: width 180ms;
}
html[data-theme] body.hh-body .hh-progress__bar--success { background: hsl(var(--hh-success)); }
html[data-theme] body.hh-body .hh-progress__bar--warning { background: hsl(var(--hh-warning)); }
html[data-theme] body.hh-body .hh-progress__bar--danger  { background: hsl(var(--hh-danger)); }

/* ══════ DROPDOWNS (user menu, switch) ══════ */
html[data-theme] body.hh-body .hh-user-menu {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

html[data-theme] body.hh-body .hh-avatar--btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

html[data-theme] body.hh-body .hh-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    min-width: 280px;
    max-width: 320px;
    background: hsl(var(--hh-surface));
    border: 1px solid hsl(var(--hh-border));
    border-radius: 10px;
    box-shadow: var(--hh-shadow-lg);
    z-index: 1500;
    overflow: hidden;
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .hh-dropdown.is-open {
    display: block;
}
html[data-theme] body.hh-body .hh-dropdown--right { right: 0; }
html[data-theme] body.hh-body .hh-dropdown--left { left: 0; }

/* ── En LAYOUT VERTICAL, el dropdown sale a la DERECHA del sidebar ── */
/* Usa POSITION:FIXED para escapar del overflow:auto del .hh-nav-root */
html[data-theme][data-layout="vertical"] body.hh-body .hh-dropdown--right,
html[data-theme][data-layout="vertical"] body.hh-body .hh-dropdown--left {
    position: fixed;
    top: auto;
    bottom: 80px;             /* anclado por arriba del avatar (que está al fondo) */
    left: 252px;              /* sidebar 240px + 12px de aire */
    right: auto;
    z-index: 9999;
    max-height: 80vh;
    overflow-y: auto;
}
/* Permite que el contenedor del avatar respete posiciones */
html[data-theme][data-layout="vertical"] body.hh-body .hh-nav-right {
    position: relative;
    overflow: visible;
}
/* En móvil, vertical colapsa a horizontal → comportamiento normal */
@media (max-width: 900px) {
    html[data-theme][data-layout="vertical"] body.hh-body .hh-dropdown--right,
    html[data-theme][data-layout="vertical"] body.hh-body .hh-dropdown--left {
        position: absolute;
        top: calc(100% + 8px);
        left: auto;
        right: 0;
        bottom: auto;
        max-height: none;
    }
    html[data-theme][data-layout="vertical"] body.hh-body .hh-dropdown--left {
        left: 0;
        right: auto;
    }
}

html[data-theme] body.hh-body .hh-dropdown__header {
    padding: 14px 16px;
    border-bottom: 1px solid hsl(var(--hh-border-subtle));
    background: hsl(var(--hh-surface-sunken));
}
html[data-theme] body.hh-body .hh-dropdown__user-email {
    font-weight: 600;
    font-size: 13.5px;
    color: hsl(var(--hh-text));
    word-break: break-word;
}
html[data-theme] body.hh-body .hh-dropdown__user-role {
    font-size: 11.5px;
    color: hsl(var(--hh-text-muted));
    margin-top: 2px;
}

html[data-theme] body.hh-body .hh-dropdown__section {
    padding: 6px;
}
html[data-theme] body.hh-body .hh-dropdown__section--divider {
    border-top: 1px solid hsl(var(--hh-border-subtle));
    padding: 4px 6px;
}
html[data-theme] body.hh-body .hh-dropdown__section-title {
    padding: 6px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: hsl(var(--hh-text-muted));
}

/* Toggle rows — con gap y ancho correcto para evitar solapamiento */
html[data-theme] body.hh-body .hh-dropdown__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 10px;
    border-radius: 6px;
}
html[data-theme] body.hh-body .hh-dropdown__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: hsl(var(--hh-text));
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}
html[data-theme] body.hh-body .hh-dropdown__toggle-label i {
    width: 16px;
    text-align: center;
    color: hsl(var(--hh-text-muted));
    font-size: 12px;
    flex-shrink: 0;
}

/* Acciones del dropdown (botones, links) */
html[data-theme] body.hh-body .hh-dropdown__action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    font-size: 12.5px;
    color: hsl(var(--hh-text));
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background var(--hh-transition-fast);
    font-family: inherit;
}
html[data-theme] body.hh-body .hh-dropdown__action:hover {
    background: hsl(var(--hh-surface-hover));
    color: hsl(var(--hh-text));
    text-decoration: none;
}
html[data-theme] body.hh-body .hh-dropdown__action i {
    width: 14px;
    text-align: center;
    font-size: 11px;
    color: hsl(var(--hh-text-muted));
    flex-shrink: 0;
}
html[data-theme] body.hh-body .hh-dropdown__action--danger {
    color: hsl(var(--hh-danger));
}
html[data-theme] body.hh-body .hh-dropdown__action--danger:hover {
    background: hsl(var(--hh-danger-bg));
    color: hsl(var(--hh-danger));
}
html[data-theme] body.hh-body .hh-dropdown__action--danger i {
    color: hsl(var(--hh-danger));
}

/* ══════ AVATAR ══════ */
html[data-theme] body.hh-body .hh-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: hsl(var(--hh-primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    border: none;
}

/* ══════ POPUP + OVERLAYS legacy ══════ */
html[data-theme] body.hh-body .popup {
    display: none;
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center;
    align-items: flex-start;
    padding-top: 40px;
}
html[data-theme] body.hh-body .popup.activo { display: flex; }
html[data-theme] body.hh-body .popup-contenido {
    background: hsl(var(--hh-surface));
    color: hsl(var(--hh-text));
    border-radius: 14px;
    padding: 24px;
    width: 92%;
    max-width: 1200px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--hh-shadow-lg);
    border: 1px solid hsl(var(--hh-border));
}
html[data-theme] body.hh-body .popup-contenido .cerrar {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 22px;
    cursor: pointer;
    color: hsl(var(--hh-text-muted));
    background: none;
    border: none;
}

#hh-switch-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
}
#hh-switch-overlay.visible { display: flex; }
#hh-switch-overlay span { color: #fff; font-size: 14px; font-weight: 500; }

/* ══════ LEGACY BOOTSTRAP / Tablas viejas ══════ */
html[data-theme] body.hh-body .divTable,
html[data-theme] body.hh-body .tabla-desplazable {
    background: hsl(var(--hh-surface));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .divTableRow,
html[data-theme] body.hh-body .divTableRow td,
html[data-theme] body.hh-body .tabla-desplazable td,
html[data-theme] body.hh-body .tabla-desplazable th {
    color: hsl(var(--hh-text));
    border-color: hsl(var(--hh-border-subtle));
}
html[data-theme] body.hh-body .divTableHead,
html[data-theme] body.hh-body .tabla-desplazable thead {
    background: hsl(var(--hh-surface-sunken));
    color: hsl(var(--hh-text-muted));
}
html[data-theme] body.hh-body .table,
html[data-theme] body.hh-body .table > tbody > tr > td,
html[data-theme] body.hh-body .table > thead > tr > th {
    color: hsl(var(--hh-text));
    border-color: hsl(var(--hh-border-subtle));
    background: transparent;
}
html[data-theme="light"] body.hh-body .table > tbody > tr:hover td { background: hsl(220 15% 95%); }
html[data-theme="dark"] body.hh-body .table > tbody > tr:hover td { background: hsl(220 20% 18%); }

html[data-theme] body.hh-body .card {
    background: hsl(var(--hh-surface));
    color: hsl(var(--hh-text));
    border-color: hsl(var(--hh-border));
}
html[data-theme] body.hh-body .card-header {
    background: hsl(var(--hh-surface-sunken));
    color: hsl(var(--hh-text));
    border-bottom-color: hsl(var(--hh-border-subtle));
}
html[data-theme] body.hh-body .form-control,
html[data-theme] body.hh-body .form-select {
    background: hsl(var(--hh-surface));
    color: hsl(var(--hh-text));
    border-color: hsl(var(--hh-border));
}

/* Bootstrap botones legacy — asegurar visibilidad en ambos temas */
html[data-theme] body.hh-body .btn {
    font-weight: 500;
    transition: all 120ms;
}
html[data-theme] body.hh-body .btn-primary {
    background: hsl(var(--hh-primary));
    border-color: hsl(var(--hh-primary));
    color: #fff;
}
html[data-theme] body.hh-body .btn-primary:hover {
    background: hsl(var(--hh-primary-strong));
    border-color: hsl(var(--hh-primary-strong));
    color: #fff;
}
html[data-theme] body.hh-body .btn-secondary {
    background: hsl(var(--hh-surface-sunken));
    border-color: hsl(var(--hh-border));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .btn-secondary:hover {
    background: hsl(var(--hh-surface-hover));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .btn-success {
    background: hsl(var(--hh-success));
    border-color: hsl(var(--hh-success));
    color: #fff;
}
html[data-theme] body.hh-body .btn-danger {
    background: hsl(var(--hh-danger));
    border-color: hsl(var(--hh-danger));
    color: #fff;
}
html[data-theme] body.hh-body .btn-warning {
    background: hsl(var(--hh-warning));
    border-color: hsl(var(--hh-warning));
    color: hsl(var(--hh-accent-dark));
}
html[data-theme] body.hh-body .btn-info {
    background: hsl(var(--hh-info));
    border-color: hsl(var(--hh-info));
    color: #fff;
}
html[data-theme] body.hh-body .btn-light {
    background: hsl(var(--hh-surface));
    border-color: hsl(var(--hh-border));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .btn-dark {
    background: hsl(var(--hh-accent-dark));
    border-color: hsl(var(--hh-accent-dark));
    color: #fff;
}
html[data-theme] body.hh-body .btn-outline-primary {
    background: transparent;
    border-color: hsl(var(--hh-primary));
    color: hsl(var(--hh-primary));
}
html[data-theme] body.hh-body .btn-outline-primary:hover {
    background: hsl(var(--hh-primary));
    color: #fff;
}
html[data-theme] body.hh-body .btn-outline-secondary {
    background: transparent;
    border-color: hsl(var(--hh-border-strong));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .btn-outline-secondary:hover {
    background: hsl(var(--hh-surface-hover));
    border-color: hsl(var(--hh-border-strong));
    color: hsl(var(--hh-text));
}
html[data-theme] body.hh-body .btn-outline-success {
    background: transparent;
    border-color: hsl(var(--hh-success));
    color: hsl(var(--hh-success));
}
html[data-theme] body.hh-body .btn-outline-success:hover {
    background: hsl(var(--hh-success));
    color: #fff;
}
html[data-theme] body.hh-body .btn-outline-danger {
    background: transparent;
    border-color: hsl(var(--hh-danger));
    color: hsl(var(--hh-danger));
}
html[data-theme] body.hh-body .btn-outline-danger:hover {
    background: hsl(var(--hh-danger));
    color: #fff;
}
/* Badges Bootstrap */
html[data-theme] body.hh-body .badge {
    font-weight: 600;
    padding: 4px 8px;
}
html[data-theme] body.hh-body .badge.bg-primary { background: hsl(var(--hh-primary)) !important; color: #fff; }
html[data-theme] body.hh-body .badge.bg-success { background: hsl(var(--hh-success)) !important; color: #fff; }
html[data-theme] body.hh-body .badge.bg-danger  { background: hsl(var(--hh-danger))  !important; color: #fff; }
html[data-theme] body.hh-body .badge.bg-warning { background: hsl(var(--hh-warning)) !important; color: hsl(var(--hh-accent-dark)); }
html[data-theme] body.hh-body .badge.bg-info    { background: hsl(var(--hh-info))    !important; color: #fff; }
html[data-theme] body.hh-body .badge.bg-secondary { background: hsl(var(--hh-text-muted)) !important; color: #fff; }
html[data-theme] body.hh-body .text-muted { color: hsl(var(--hh-text-muted)); }
html[data-theme] body.hh-body hr { border-color: hsl(var(--hh-border)); opacity: 1; }

/* ══════ UTILIDADES ══════ */
html[data-theme] body.hh-body .hh-text-muted   { color: hsl(var(--hh-text-muted)); }
html[data-theme] body.hh-body .hh-text-subtle  { color: hsl(var(--hh-text-subtle)); }
html[data-theme] body.hh-body .hh-text-primary { color: hsl(var(--hh-primary)); }
html[data-theme] body.hh-body .hh-text-success { color: hsl(var(--hh-success)); }
html[data-theme] body.hh-body .hh-text-danger  { color: hsl(var(--hh-danger)); }
html[data-theme] body.hh-body .hh-text-center  { text-align: center; }
html[data-theme] body.hh-body .hh-text-end     { text-align: right; }
html[data-theme] body.hh-body .hh-text-mono    { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; }

html[data-theme] body.hh-body .hh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
html[data-theme] body.hh-body .hh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
html[data-theme] body.hh-body .hh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
html[data-theme] body.hh-body .hh-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html[data-theme] body.hh-body .hh-row--between { justify-content: space-between; }
html[data-theme] body.hh-body .hh-row--end { justify-content: flex-end; }

@media (max-width: 1024px) {
    html[data-theme] body.hh-body .hh-grid-3,
    html[data-theme] body.hh-body .hh-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    html[data-theme] body.hh-body .hh-grid-2,
    html[data-theme] body.hh-body .hh-grid-3,
    html[data-theme] body.hh-body .hh-grid-4 { grid-template-columns: 1fr; }
    html[data-theme] body.hh-body .hh-page { padding: 16px 12px; }
}

html[data-theme] body.hh-body .hh-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid hsl(var(--hh-border));
    border-top-color: hsl(var(--hh-primary));
    border-radius: 50%;
    animation: hh-spin 0.7s linear infinite;
}
@keyframes hh-spin { to { transform: rotate(360deg); } }

html[data-theme] body.hh-body .hh-sparkline { height: 28px; width: 140px; }
html[data-theme] body.hh-body .hh-sparkline path { fill: none; stroke-width: 1.5; }

/* Hide utility */
.hh-hidden { display: none !important; }


/* ══════════════════════════════════════════════════════════════════
   FIN DEL SISTEMA v2 - Migración completa (Abril 2026)
   ──────────────────────────────────────────────────────────────────
   Parche de compatibilidad legacy ELIMINADO - ya no es necesario
   porque todas las páginas del sistema usan las clases v2 BEM
   (.hh-btn--primary, .hh-pill--success, etc.)

   Páginas migradas: Lotes, Productos, Publicaciones, Login, Inicio,
   CompararPrecio, Metricas, MetricasLotes, Admin/Index,
   Admin/Vigilante, Admin/Marcas, Admin/Configuracion,
   Admin/CargaPVP, Admin/Notificaciones
   ══════════════════════════════════════════════════════════════════ */