/*
 * RichardPantallas — Rediseño visual SaaS
 * Archivo: css/richardpantallas-redesign.css
 *
 * IMPORTANTE:
 * - Se carga DESPUÉS de styles.css, themes.css y styles-premium.css.
 * - No depende de Tailwind para la identidad visual.
 * - No cambia IDs ni data-*.
 * - Todos los colores de interfaz parten de las variables del sistema de temas:
 *   --color-bg, --color-bg-secondary, --color-bg-card, --color-text,
 *   --color-text-secondary, --color-border, --color-primary,
 *   --color-primary-dark, --color-primary-light, --color-accent.
 */

/* body, no :root: --color-* se redefine por tema en body[data-theme="X"]
   (themes.css). Si estos tokens se calculan en :root (html, un ancestro
   de body), el color-mix() se resuelve con los valores por defecto ahí
   mismo y se queda pegado a un solo tema para siempre — confirmado en
   vivo, --rp-surface-1 seguía dando el string de "midnight" con
   cualquier otro tema activo. Calculándolos en body, cada tema los
   recalcula correctamente. */
body {
    --rp-surface-0: var(--color-bg);
    --rp-surface-1: color-mix(in srgb, var(--color-bg-secondary) 82%, var(--color-bg));
    --rp-surface-2: var(--color-bg-card);
    --rp-surface-3: color-mix(in srgb, var(--color-bg-card) 72%, var(--color-bg));
    --rp-surface-hover: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card));
    --rp-surface-active: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card));

    --rp-border-soft: color-mix(in srgb, var(--color-border) 58%, transparent);
    --rp-border-strong: color-mix(in srgb, var(--color-border) 88%, var(--color-primary));
    --rp-focus: color-mix(in srgb, var(--color-primary) 24%, transparent);

    --rp-text-strong: var(--color-text);
    --rp-text: var(--color-text);
    --rp-muted: var(--color-text-secondary);
    --rp-faint: color-mix(in srgb, var(--color-text-secondary) 72%, var(--color-bg));

    /* Estados derivados del tema para conservar contraste entre los 9 temas. */
    --rp-success: color-mix(in srgb, var(--color-primary) 88%, var(--color-text));
    --rp-warning: var(--color-accent);
    --rp-danger: color-mix(in srgb, var(--color-accent) 78%, var(--color-text));
    --rp-info: var(--color-primary-light);

    --rp-radius-sm: 8px;
    --rp-radius-md: 12px;
    --rp-radius-lg: 16px;
    --rp-radius-xl: 20px;

    --rp-shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-bg) 28%, transparent);
    --rp-shadow-md: 0 12px 30px color-mix(in srgb, var(--color-bg) 30%, transparent);
    --rp-shadow-lg: 0 24px 70px color-mix(in srgb, var(--color-bg) 34%, transparent);

    --rp-speed: 180ms;
    --rp-ease: cubic-bezier(.2,.8,.2,1);
}

/* ==========================================================================
   BASE
   ========================================================================== */

html {
    background: var(--color-bg) !important;
    color-scheme: normal;
}

body {
    background:
        radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 64%),
        radial-gradient(800px 480px at 100% 0%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 66%),
        var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Números tabulares: precios/días/montos en columnas (tabla de cuentas,
   tarjetas de Estadísticas) alinean por dígito en vez de bailar según el
   ancho de cada cifra. */
#consolidado-table-body,
#stats-section,
#dashboard-section,
#team-stats-grid {
    font-variant-numeric: tabular-nums;
}

/* Títulos con salto de línea más equilibrado (soportado por navegadores
   modernos; se ignora sin romper nada en los que no lo soportan). */
h1, h2, h3 {
    text-wrap: balance;
}

/* Ver applyTheme() en themes.js: cambiar de tema en caliente dejaba algunos
   fondos pegados al color anterior porque la transición de themes.css
   (`* { transition: background-color .3s }`) se atascaba al encadenar
   cambios rápido. Apagarla durante el cambio de atributo lo evita. */
body.theme-switching,
body.theme-switching * {
    transition: none !important;
}

body::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text) 3%, transparent) 1px, transparent 1px) !important;
    opacity: .22 !important;
}

::selection {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: var(--color-text);
}

*:focus-visible {
    outline: 2px solid var(--color-primary-light) !important;
    outline-offset: 2px;
}

/* ==========================================================================
   SCROLLBARS
   ========================================================================== */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--color-bg-secondary) !important;
}

::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-border) !important;
    border: 2px solid var(--color-bg-secondary);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary) !important;
}

/* ==========================================================================
   LOGIN
   ========================================================================== */

/* Primer momento "wow": el fondo respira, la tarjeta entra con un
   fade+scale, y cada campo del formulario aparece en cascada en vez de
   golpear la pantalla todo junto de una vez. */
@keyframes rp-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(26px, -18px) scale(1.12); }
}

@keyframes rp-card-in {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes rp-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rp-login-orb {
    animation: rp-orb-float 9s ease-in-out infinite;
}

.rp-login-orb-2 {
    animation-duration: 11s;
    animation-delay: -4s;
}

.rp-login-card {
    animation: rp-card-in .65s var(--rp-ease, cubic-bezier(.2,.8,.2,1)) both;
}

.rp-login-in {
    animation: rp-fade-up .5s ease-out both;
}

.rp-d1 { animation-delay: .12s; }
.rp-d2 { animation-delay: .18s; }
.rp-d3 { animation-delay: .24s; }
.rp-d4 { animation-delay: .32s; }
.rp-d5 { animation-delay: .38s; }
.rp-d6 { animation-delay: .46s; }

#login-overlay {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
}

#login-overlay .rp-login-backdrop {
    background:
        radial-gradient(circle at 21% 18%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 29%),
        radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 31%),
        var(--color-bg) !important;
}

#login-overlay > .rp-login-orb {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

#login-overlay > .rp-login-orb-2 {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important;
}

#login-overlay > .rp-login-card {
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent) !important;
    border: 1px solid var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-xl) !important;
    box-shadow: var(--rp-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-text) 3%, transparent) inset !important;
    backdrop-filter: blur(22px) saturate(120%);
}

#login-overlay .text-white {
    color: var(--color-text) !important;
}

#login-overlay form label {
    color: var(--color-text-secondary) !important;
}

#login-overlay input,
#login-overlay select {
    min-height: 48px;
    background: var(--rp-surface-1) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
    box-shadow: none !important;
}

#login-overlay input::placeholder {
    color: var(--rp-faint) !important;
}

#login-overlay input:hover,
#login-overlay select:hover {
    border-color: var(--rp-border-strong) !important;
    background: var(--rp-surface-hover) !important;
}

#login-overlay input:focus,
#login-overlay select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px var(--rp-focus) !important;
}

#login-form button[type="submit"] {
    min-height: 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-text) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary-light) 45%, transparent) !important;
    border-radius: var(--rp-radius-md) !important;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

#login-form button[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

#login-error {
    background: color-mix(in srgb, var(--rp-danger) 10%, transparent) !important;
    color: var(--rp-danger) !important;
    border-color: color-mix(in srgb, var(--rp-danger) 28%, transparent) !important;
}

/* Acceso como primera impresión de producto: composición editorial a dos
   columnas, con la marca como contexto y el formulario como única acción. */
.rp-login-grid {
    opacity: .32;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text) 7%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, transparent, black 16%, black 84%, transparent);
}

.rp-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
    min-height: min(650px, calc(100vh - 48px));
    border: 1px solid var(--rp-border-soft);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--rp-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-text) 3%, transparent) inset;
    animation: rp-card-in .65s var(--rp-ease, cubic-bezier(.2,.8,.2,1)) both;
}

.rp-login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 6vw, 70px);
    color: var(--color-text);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 17%, var(--color-bg-secondary)) 0%, var(--color-bg-secondary) 58%, color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-secondary)) 100%);
}

.rp-login-brand::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius: 50%;
    transform: translate(30%, 34%);
    box-shadow: 0 0 0 44px color-mix(in srgb, var(--color-text) 3%, transparent), 0 0 0 88px color-mix(in srgb, var(--color-text) 2%, transparent);
    pointer-events: none;
}

.rp-login-brand-top { display: flex; align-items: center; gap: 12px; }
.rp-login-mark {
    display: grid; place-items: center; width: 42px; height: 42px;
    background: var(--color-primary); color: white; border-radius: 13px;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.rp-login-wordmark { font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.rp-login-wordmark span, .rp-login-brand em { color: var(--color-primary-light); font-style: normal; }
.rp-login-brand-copy { position: relative; z-index: 1; margin: auto 0; max-width: 500px; }
.rp-login-kicker { margin: 0 0 14px; color: var(--color-primary-light); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.rp-login-brand h1 { margin: 0; color: var(--color-text); font-size: clamp(2.35rem, 4.6vw, 4.35rem); line-height: .98; letter-spacing: -.065em; font-weight: 800; }
.rp-login-brand-copy > p:last-child { max-width: 390px; margin: 25px 0 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.7; }
.rp-login-signals { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; }
.rp-login-signals div { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; background: color-mix(in srgb, var(--color-bg) 30%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: 9px; color: var(--color-text-secondary); font-size: 11px; font-weight: 700; }
.rp-login-signals i { color: var(--color-primary-light); }
.rp-login-brand-foot { position: relative; z-index: 1; margin: 32px 0 0; color: var(--rp-faint); font-size: 9px; font-weight: 800; letter-spacing: .15em; }

.rp-login-card {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(30px, 5vw, 58px);
    background: color-mix(in srgb, var(--color-bg-card) 94%, transparent);
    backdrop-filter: blur(22px) saturate(120%);
}
.rp-login-auth-head { margin-bottom: 34px; }
.rp-login-auth-head h2 { margin: 0; color: var(--color-text); font-size: 27px; line-height: 1.1; letter-spacing: -.045em; font-weight: 800; }
.rp-login-auth-head > p:last-child { margin: 9px 0 0; color: var(--color-text-secondary); font-size: 13px; }
.rp-login-card #login-form { position: relative; z-index: 1; }
.rp-login-security { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--color-text-secondary); font-size: 11px; }
.rp-login-security i { color: #10b981; }
.rp-login-credit { margin: 14px 0 0; color: var(--rp-faint); font-size: 10px; }
.rp-login-credit strong { color: var(--color-text-secondary); font-weight: 700; }

@media (max-width: 720px) {
    .rp-login-shell { display: block; min-height: 0; max-width: 460px; border-radius: 22px; }
    .rp-login-brand { min-height: 205px; padding: 28px; }
    .rp-login-brand-copy { margin: auto 0 0; }
    .rp-login-brand h1 { font-size: 2.25rem; }
    .rp-login-brand-copy > p:last-child, .rp-login-signals, .rp-login-brand-foot { display: none; }
    .rp-login-card { padding: 30px 28px 32px; }
    .rp-login-auth-head { margin-bottom: 25px; }
}

/* ==========================================================================
   APP SHELL / SIDEBAR
   ========================================================================== */

#app-container {
    background: var(--color-bg) !important;
}

#app-container > aside {
    width: 286px !important;
    background: var(--color-bg-secondary) !important;
    border-right: 1px solid var(--rp-border-soft) !important;
    box-shadow: 18px 0 50px color-mix(in srgb, var(--color-bg) 20%, transparent) !important;
}

#app-container > aside::after {
    background: linear-gradient(
        180deg,
        transparent,
        color-mix(in srgb, var(--color-primary) 42%, transparent),
        transparent
    ) !important;
}

#app-container > aside > div:first-child {
    padding: 20px !important;
    border-color: var(--rp-border-soft) !important;
}

#app-container > aside > div:first-child > div {
    justify-content: flex-start !important;
}

#app-container > aside > div:first-child > div > div:first-child {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}

#app-container > aside h1,
#app-container > aside .text-white {
    color: var(--color-text) !important;
}

#app-container > aside h1 span {
    color: var(--color-primary-light) !important;
}

/* Navegación superior: Gestión / Precios / Otros */

#tab-accounts,
#tab-prices,
#tab-otros {
    min-height: 40px;
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

#tab-accounts:hover,
#tab-prices:hover,
#tab-otros:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
}

#tab-accounts.active,
#tab-prices.active,
#tab-otros.active,
.tab-btn.active {
    color: var(--color-text) !important;
    background: var(--rp-surface-active) !important;
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
    box-shadow: var(--rp-shadow-sm) !important;
}

/* Filtros */

#filters-container input,
#filters-container select,
#rows-per-page-select,
#status-filter {
    min-height: 40px;
    color: var(--color-text) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
    box-shadow: none !important;
}

#filters-container input::placeholder {
    color: var(--rp-faint) !important;
}

#filters-container input:hover,
#filters-container select:hover,
#rows-per-page-select:hover {
    background: var(--rp-surface-hover) !important;
    border-color: var(--rp-border-strong) !important;
}

#filters-container input:focus,
#filters-container select:focus,
#rows-per-page-select:focus,
#status-filter:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--rp-focus) !important;
}

#filters-container label {
    color: var(--color-text-secondary) !important;
}

#filters-container > label {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
}

#filters-container > label:hover {
    background: var(--rp-surface-hover) !important;
    border-color: var(--rp-border-strong) !important;
}

#clear-filters-btn,
#clear-family-filter-btn {
    color: var(--color-text-secondary) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
}

#clear-filters-btn:hover,
#clear-family-filter-btn:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)) !important;
}

#family-filter-badge {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

#family-filter-label {
    color: var(--color-primary-light) !important;
}

/* Navegación secundaria */

.otros-nav-btn,
.price-nav-btn {
    min-height: 43px;
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--rp-radius-md) !important;
    transition:
        transform var(--rp-speed) var(--rp-ease),
        background var(--rp-speed) var(--rp-ease),
        border-color var(--rp-speed) var(--rp-ease),
        color var(--rp-speed) var(--rp-ease) !important;
}

.otros-nav-btn:hover,
.price-nav-btn:hover {
    transform: translateX(2px);
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
    border-color: var(--rp-border-soft) !important;
}

.otros-nav-btn.active,
.price-nav-btn.active {
    color: var(--color-text) !important;
    background: var(--rp-surface-active) !important;
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
}

/* Los chips de icono del menú "Otros"/"Precios" traen un color pastel
   distinto por categoría en el propio HTML (bg-blue-500/10, bg-pink-500/10...)
   para poder ubicar cada sección de un vistazo — antes esta regla los
   aplanaba a todos al mismo tinte del tema, confirmado en vivo (13
   iconos, casi todos iguales). Se quita: ya se ven bien sobre cualquier
   tema al ser tintes muy translúcidos (10% de opacidad). */

/* Mismo problema pero con el color del propio ícono: themes.css trae
   reglas .text-blue-400/.text-indigo-400/etc genéricas (pensadas para
   texto normal) que también pisaban el color de estos iconos de
   categoría. Se restauran aquí con más especificidad — son colores
   decorativos fijos a propósito, como los de Rendimiento del Equipo,
   no deben cambiar con el tema. */
.otros-nav-btn > div .text-blue-500, .price-nav-btn > div .text-blue-500 { color: #3b82f6 !important; }
.otros-nav-btn > div .text-purple-500, .price-nav-btn > div .text-purple-500 { color: #a855f7 !important; }
.otros-nav-btn > div .text-yellow-500, .price-nav-btn > div .text-yellow-500 { color: #eab308 !important; }
.otros-nav-btn > div .text-orange-500, .price-nav-btn > div .text-orange-500 { color: #f97316 !important; }
.otros-nav-btn > div .text-pink-500, .price-nav-btn > div .text-pink-500 { color: #ec4899 !important; }
.otros-nav-btn > div .text-green-500, .price-nav-btn > div .text-green-500 { color: #22c55e !important; }
.otros-nav-btn > div .text-blue-400, .price-nav-btn > div .text-blue-400 { color: #60a5fa !important; }
.otros-nav-btn > div .text-green-400, .price-nav-btn > div .text-green-400 { color: #4ade80 !important; }
.otros-nav-btn > div .text-pink-400, .price-nav-btn > div .text-pink-400 { color: #f472b6 !important; }
.otros-nav-btn > div .text-indigo-400, .price-nav-btn > div .text-indigo-400 { color: #818cf8 !important; }
.otros-nav-btn > div .text-cyan-400, .price-nav-btn > div .text-cyan-400 { color: #22d3ee !important; }
.otros-nav-btn > div .text-yellow-400, .price-nav-btn > div .text-yellow-400 { color: #facc15 !important; }
.otros-nav-btn > div .text-red-400, .price-nav-btn > div .text-red-400 { color: #f87171 !important; }
.otros-nav-btn > div .text-emerald-400, .price-nav-btn > div .text-emerald-400 { color: #34d399 !important; }
.otros-nav-btn > div .text-purple-400, .price-nav-btn > div .text-purple-400 { color: #c084fc !important; }
.otros-nav-btn > div .text-sky-400, .price-nav-btn > div .text-sky-400 { color: #38bdf8 !important; }
.otros-nav-btn > div .text-teal-400, .price-nav-btn > div .text-teal-400 { color: #2dd4bf !important; }
.otros-nav-btn > div .text-violet-400, .price-nav-btn > div .text-violet-400 { color: #a78bfa !important; }

/* Footer sidebar */

#app-container > aside > div:last-child {
    background: var(--color-bg-secondary) !important;
    border-color: var(--rp-border-soft) !important;
}

#work-session-toggle-btn {
    color: var(--color-text-secondary) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
}

#work-session-toggle-btn:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
    border-color: var(--rp-border-strong) !important;
}

#connection-indicator {
    color: var(--color-text-secondary) !important;
}

#conn-label {
    color: var(--color-text-secondary) !important;
}

#conn-dot {
    background: var(--rp-success) !important;
    box-shadow: 0 0 7px color-mix(in srgb, var(--rp-success) 70%, transparent) !important;
}

#logout-btn {
    min-height: 46px;
    background: color-mix(in srgb, var(--rp-danger) 88%, var(--color-primary-dark)) !important;
    color: var(--color-text) !important;
    border: 1px solid color-mix(in srgb, var(--rp-danger) 35%, transparent) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--rp-danger) 13%, transparent) !important;
}

#logout-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* ==========================================================================
   TRANSICIONES DE VISTA — antes las pestañas y sub-secciones cambiaban de
   golpe (solo se quitaba/ponía .hidden). Al reaparecer, el navegador
   reinicia la animación sola (no corre en display:none), así que basta con
   dejarla puesta siempre — no hace falta re-dispararla desde JS.
   ========================================================================== */

@keyframes rp-view-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rp-spin {
    to { transform: rotate(360deg); }
}

.rp-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--rp-border-strong);
    border-top-color: var(--color-primary);
    animation: rp-spin 0.7s linear infinite;
    flex-shrink: 0;
}

#accounts-view:not(.hidden),
#prices-view:not(.hidden),
#otros-view:not(.hidden),
.otros-section:not(.hidden),
.price-section:not(.hidden) {
    animation: rp-view-in .32s ease-out both;
}

/* ==========================================================================
   MAIN / HEADER
   ========================================================================== */

#main-content {
    background:
        radial-gradient(700px 380px at 88% 0%, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 70%),
        var(--color-bg) !important;
}

#accounts-view,
#prices-view {
    max-width: 1800px;
    margin-inline: auto;
}

#accounts-view {
    padding: clamp(18px, 2.2vw, 34px) !important;
}

#accounts-view > header {
    margin-bottom: 24px !important;
}

#accounts-view h2 {
    color: var(--color-text) !important;
    letter-spacing: -.035em;
}

#accounts-view h2 svg {
    color: var(--color-primary-light) !important;
}

#results-summary {
    color: var(--color-text-secondary) !important;
}

#initial-sync-banner {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
    color: var(--color-text-secondary) !important;
}

/* Botones de acción */

#open-renewal-btn {
    background: linear-gradient(135deg, var(--rp-success), var(--color-primary-dark)) !important;
    border-color: color-mix(in srgb, var(--rp-success) 38%, transparent) !important;
    color: var(--color-text) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--rp-success) 12%, transparent) !important;
}

#open-renewal-btn:hover,
#create-account-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

#create-account-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    border-color: color-mix(in srgb, var(--color-primary-light) 35%, transparent) !important;
    color: var(--color-text) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 13%, transparent) !important;
}

#logout-btn {
    background: linear-gradient(135deg, var(--rp-danger), color-mix(in srgb, var(--rp-danger) 70%, black)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--rp-danger) 18%, transparent) !important;
}

#logout-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

#renewal-urgency-badge,
#board-unread-badge {
    background: var(--rp-danger) !important;
    color: var(--color-bg) !important;
    border-color: var(--color-bg-card) !important;
}

/* Botones de acción en modales — genéricos por combinación de clases
   Tailwind (no por ID: son decenas repartidos en distintos modales).
   Sin esto, "Guardar"/"Crear"/"Aplicar" salían azul o verde fijo sin
   importar el tema elegido, mientras el resto de la app sí cambiaba —
   quedaban como pegados de otra página. Mismo patrón de gradiente que
   #create-account-btn/#open-renewal-btn, solo que aplicado por clase
   para cubrir todos los modales de una sola vez. */
[class*="from-blue-600"][class*="to-indigo-600"],
[class*="from-purple-600"][class*="to-blue-600"] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
}

[class*="from-green-600"][class*="to-emerald-600"] {
    background: linear-gradient(135deg, var(--rp-success), color-mix(in srgb, var(--rp-success) 70%, black)) !important;
}

[class*="from-blue-600"][class*="to-indigo-600"]:hover,
[class*="from-purple-600"][class*="to-blue-600"]:hover,
[class*="from-green-600"][class*="to-emerald-600"]:hover {
    filter: brightness(1.08);
}

/* Cabeceras de modal — mismo problema, otra combinación de clases:
   violeta/índigo/gris fijos en vez de derivar del tema. */
[class*="from-violet-950"],
[class*="from-indigo-950"] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-bg-card)), var(--color-bg-card)) !important;
}

/* Toolbar */

#accounts-view header .w-px {
    background: var(--rp-border-soft) !important;
}

#accounts-view header .flex.gap-2.bg-gray-800\/50 {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
}

#copy-all-btn,
#bulk-edit-btn,
#copy-settings-btn,
#customization-btn,
#board-btn {
    color: var(--color-text-secondary) !important;
    border-radius: var(--rp-radius-sm) !important;
}

#copy-all-btn:hover,
#bulk-edit-btn:hover,
#copy-settings-btn:hover,
#customization-btn:hover,
#board-btn:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
}

/* ==========================================================================
   SERVICE TABS / TABLE TOOLBAR
   ========================================================================== */

#service-tabs-container {
    gap: 6px !important;
}

#service-tabs-container > * {
    color: var(--color-text-secondary) !important;
    background: var(--rp-surface-1) !important;
    border: 1px solid var(--rp-border-soft) !important;
    border-radius: 999px !important;
    transition: all var(--rp-speed) var(--rp-ease);
}

#service-tabs-container > *:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
    border-color: var(--rp-border-strong) !important;
}

#service-tabs-container > *.active,
#service-tabs-container > *[aria-selected="true"] {
    color: var(--color-text) !important;
    background: var(--rp-surface-active) !important;
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 9%, transparent);
}

#consolidado-view h3 {
    color: var(--color-text-secondary) !important;
}

#column-toggle-btn,
#export-csv-btn {
    color: var(--color-text-secondary) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
    box-shadow: var(--rp-shadow-sm) !important;
}

#column-toggle-btn:hover,
#export-csv-btn:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

#column-toggle-panel {
    background: var(--color-bg-card) !important;
    border-color: var(--rp-border-strong) !important;
    border-radius: var(--rp-radius-lg) !important;
    box-shadow: var(--rp-shadow-lg) !important;
}

#column-toggle-panel > div:first-child {
    border-color: var(--rp-border-soft) !important;
}

#column-toggle-panel .text-white {
    color: var(--color-text) !important;
}

/* ==========================================================================
   TABLA DE CUENTAS
   ========================================================================== */

#consolidado-view > .bg-gray-900,
#consolidado-view table {
    background: var(--color-bg-card) !important;
}

#consolidado-view > .bg-gray-900 {
    border: 1px solid var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-lg) !important;
    box-shadow: var(--rp-shadow-md) !important;
}

#consolidado-table-head {
    background: var(--rp-surface-1) !important;
    color: var(--color-text-secondary) !important;
    border-bottom: 1px solid var(--rp-border-soft) !important;
}

#consolidado-table-head th {
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}

#consolidado-table-body {
    color: var(--color-text) !important;
}

#consolidado-table-body tr {
    background: transparent !important;
    border-color: var(--rp-border-soft) !important;
    transition: background var(--rp-speed) var(--rp-ease), box-shadow var(--rp-speed) var(--rp-ease);
}

#consolidado-table-body tr:hover {
    background: var(--rp-surface-hover) !important;
}

#consolidado-table-body td {
    color: var(--color-text) !important;
    border-color: var(--rp-border-soft) !important;
}

#consolidado-table-body td .text-gray-400,
#consolidado-table-body td .text-gray-500 {
    color: var(--color-text-secondary) !important;
}

/* Zebra: conserva la preferencia existente, pero dependiente del tema. */
body.zebra-rows #consolidado-table-body tr:nth-child(even) td {
    background: color-mix(in srgb, var(--color-text) 2.5%, transparent) !important;
}

/* Estados de filas: semántica + contraste sin introducir colores fijos. */
#consolidado-table-body .row-expired {
    border-left: 3px solid var(--rp-danger) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--rp-danger) 30%, transparent);
}

#consolidado-table-body .row-expired:not(.expanded):not(:hover) {
    background: color-mix(in srgb, var(--rp-danger) 6%, transparent) !important;
}

#consolidado-table-body .row-urgent {
    border-left: 3px solid var(--rp-warning) !important;
}

#consolidado-table-body .row-urgent:not(.expanded):not(:hover) {
    background: color-mix(in srgb, var(--rp-warning) 6%, transparent) !important;
}

#consolidado-table-body .row-mother {
    border-left: 3px solid var(--color-primary-light) !important;
}

#consolidado-table-body .row-mother:not(.expanded):not(:hover) {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}

#consolidado-table-body .row-child {
    border-left: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

body.no-row-highlights #consolidado-table-body .row-expired,
body.no-row-highlights #consolidado-table-body .row-urgent {
    border-left: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Ícono de copiar y candado "heredado" junto a los campos de una cuenta
   expandida (correo, contraseña...): se centraban con top:50% + transform:
   translateY(-50%), que en Chrome/Edge con escalado de pantalla distinto de
   100% (125%/150%, lo habitual en laptops Windows) puede saltar 1px al
   pasar el mouse — el hover promueve el botón a su propia capa compuesta y
   el navegador vuelve a redondear la posición del transform por separado
   del layout, sin que ambos redondeos coincidan siempre. Centrar con
   inset + margin:auto se resuelve en un solo paso de layout y no depende
   de esa segunda capa, así que no puede des-sincronizarse. */
.copy-input-btn,
svg[data-lucide="lock"].absolute,
i[data-lucide="lock"].absolute {
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

#consolidado-pagination button {
    color: var(--color-text-secondary) !important;
    background: var(--rp-surface-1) !important;
    border: 1px solid var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-sm) !important;
}

#consolidado-pagination button:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
    border-color: var(--rp-border-strong) !important;
}

#consolidado-pagination button.active,
#consolidado-pagination button[aria-current="page"] {
    color: var(--color-text) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

#rows-per-page-select {
    color: var(--color-text) !important;
}

/* ==========================================================================
   CARDS / SECCIONES DE PRECIOS Y RESTO DE VISTAS
   ========================================================================== */

#prices-view {
    padding: clamp(18px, 2.2vw, 34px) !important;
}

#prices-view .price-section,
#prices-view > div:not(.hidden),
#prices-view .bg-gray-800,
#prices-view .bg-gray-900,
#prices-view [class*="bg-[#0f172a]"],
#prices-view [class*="bg-[#1e293b]"] {
    background: var(--color-bg-card) !important;
    border-color: var(--rp-border-soft) !important;
    color: var(--color-text) !important;
}

#prices-view .price-section {
    border-radius: var(--rp-radius-xl) !important;
    box-shadow: var(--rp-shadow-md) !important;
}

#price-quick-bar .quick-rate-input {
    width: 72px;
    min-width: 0;
}

#prices-view h3,
#prices-view h4,
#prices-view .text-white {
    color: var(--color-text) !important;
}

#prices-view .text-gray-400,
#prices-view .text-gray-500 {
    color: var(--color-text-secondary) !important;
}

#prices-view input,
#prices-view select,
#prices-view textarea {
    color: var(--color-text) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
}

#prices-view input::placeholder,
#prices-view textarea::placeholder {
    color: var(--rp-faint) !important;
}

#prices-view input:focus,
#prices-view select:focus,
#prices-view textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--rp-focus) !important;
}

#prices-view button {
    transition:
        transform var(--rp-speed) var(--rp-ease),
        filter var(--rp-speed) var(--rp-ease),
        background var(--rp-speed) var(--rp-ease),
        border-color var(--rp-speed) var(--rp-ease);
}

#prices-view button:hover {
    filter: brightness(1.04);
}

#prices-view button:active {
    transform: translateY(1px);
}

#save-price-btn,
#save-rate-bcv-btn,
#save-rate-binance-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: var(--color-text) !important;
    border-color: color-mix(in srgb, var(--color-primary-light) 34%, transparent) !important;
}

#price-update-hint {
    color: var(--rp-warning) !important;
    background: color-mix(in srgb, var(--rp-warning) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--rp-warning) 26%, transparent) !important;
}

.price-label-chip {
    color: var(--color-text-secondary) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
}

.price-label-chip:hover {
    color: var(--color-primary-light) !important;
    background: var(--rp-surface-hover) !important;
    border-color: color-mix(in srgb, var(--color-primary) 34%, transparent) !important;
}

/* ==========================================================================
   OTROS  (Dashboard, Estadísticas, Rendimiento, Clientes, Vendedores, Pines,
   Perfiles, Historial Cobros, Proveedores, Reporte de Correos, Facturación,
   Límites de Perfiles, Configuración) — mismo patrón que #prices-view.
   ========================================================================== */

#otros-view {
    padding: clamp(18px, 2.2vw, 34px) !important;
}

/* El [class*="bg-gray-800/"] (substring, sin cerrar el valor) es la pieza
   clave: Tailwind compila cada variante de opacidad (bg-gray-800/90, /60,
   /50...) como una clase con su propio rgba fijo — sin este selector se
   quedan transparentes/oscuras sobre un tema claro (confirmado en vivo en
   las tarjetas de Estadísticas antes de este arreglo). */
#otros-view .bg-gray-800,
#otros-view .bg-gray-900,
#otros-view [class*="bg-[#0f172a]"],
#otros-view [class*="bg-[#1e293b]"],
#otros-view [class*="bg-gray-800/"],
#otros-view [class*="bg-gray-900/"],
#otros-view [class*="bg-[#1e293b]/"],
#otros-view [class*="bg-[#0f172a]/"] {
    background: var(--color-bg-card) !important;
    border-color: var(--rp-border-soft) !important;
    color: var(--color-text) !important;
}

#otros-view .border-gray-700,
#otros-view .border-gray-800,
#otros-view .border-gray-600,
#otros-view [class*="border-gray-700/"] {
    border-color: var(--rp-border-soft) !important;
}

/* Especificidad por ID: las tarjetas de Rendimiento del Equipo pintan un
   acento de color por vendedor con border-left inline (team-stats.js) —
   los catch-alls de arriba (mismo peso, atributo) lo pisaban con el
   shorthand border-color y dejaban todas las tarjetas del mismo gris,
   confirmado en vivo. Este selector con ID gana sin tener que tocar los
   catch-alls (que siguen siendo correctos para todo lo demás). */
#team-stats-grid [style*="--vendor-accent"] {
    border-left-color: var(--vendor-accent) !important;
}

#otros-view h2,
#otros-view h3,
#otros-view h4,
#otros-view h5,
#otros-view .text-white {
    color: var(--color-text) !important;
}

#otros-view .text-gray-400,
#otros-view .text-gray-500,
#otros-view .text-gray-600 {
    color: var(--color-text-secondary) !important;
}

#otros-view input,
#otros-view select,
#otros-view textarea {
    color: var(--color-text) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
}

#otros-view input::placeholder,
#otros-view textarea::placeholder {
    color: var(--rp-faint) !important;
}

#otros-view input:focus,
#otros-view select:focus,
#otros-view textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--rp-focus) !important;
}

#otros-view button {
    transition:
        transform var(--rp-speed) var(--rp-ease),
        filter var(--rp-speed) var(--rp-ease),
        background var(--rp-speed) var(--rp-ease),
        border-color var(--rp-speed) var(--rp-ease);
}

#otros-view button:not(.otros-nav-btn):hover {
    filter: brightness(1.04);
}

#otros-view button:active {
    transform: translateY(1px);
}

/* Tarjetas "hero" con hover (Estadísticas/Dashboard/Team-stats) — mismo radio
   y sombra que ya usa el resto de la app, sobre la superficie del tema. */
#otros-view [class*="rounded-3xl"],
#otros-view [class*="rounded-2xl"] {
    box-shadow: var(--rp-shadow-sm);
}

/* ── Dashboard: tarjetas KPI superiores (Vencen Hoy/Mañana/7 días/Ingresos) ─
   Mismo arreglo que las tarjetas de Estadísticas de más abajo: reemplaza el
   look de plantilla (bg-gray-800/90, glow de colores fijos, hover que
   escala) por el lenguaje del resto de la app. Acento fijo (no theme token)
   por el mismo motivo que en Estadísticas: rojo/ámbar/azul/verde son
   semántica de urgencia, no decoración — deben verse igual en los 9 temas. */
#dash-stat-cards .dash-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--stat-accent) 7%, var(--rp-surface-2)), var(--rp-surface-2));
    border: 1px solid var(--rp-border-soft);
    border-radius: var(--rp-radius-xl);
    box-shadow: var(--rp-shadow-sm);
    transition: transform var(--rp-speed) var(--rp-ease), box-shadow var(--rp-speed) var(--rp-ease), border-color var(--rp-speed) var(--rp-ease);
}

#dash-stat-cards .dash-kpi-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--stat-accent) 38%, var(--rp-border-soft));
    box-shadow: var(--rp-shadow-md);
}

#dash-stat-cards .dash-kpi-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

#dash-stat-cards .dash-kpi-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--rp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--stat-accent) 14%, transparent);
    color: var(--stat-accent);
}

#dash-stat-cards .dash-kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rp-muted);
}

#dash-stat-cards .dash-kpi-number {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--stat-accent);
}

/* ── Estadísticas: tarjetas KPI (Total/Libres/Vendidas) ────────────────────
   Reemplaza el look de plantilla Tailwind (iconos neón saturados, bordes que
   cambian de color en hover) por el mismo lenguaje del resto de la app:
   superficie derivada del tema + acento vía color-mix, para que se vea bien
   en los 9 temas (no solo en el oscuro por defecto) sin reglas por tema. */
#stats-section .stat-kpi-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--stat-accent) 7%, var(--rp-surface-2)), var(--rp-surface-2));
    border: 1px solid var(--rp-border-soft);
    border-radius: var(--rp-radius-xl);
    box-shadow: var(--rp-shadow-sm);
    transition: transform var(--rp-speed) var(--rp-ease), box-shadow var(--rp-speed) var(--rp-ease), border-color var(--rp-speed) var(--rp-ease);
}

#stats-section .stat-kpi-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--stat-accent) 38%, var(--rp-border-soft));
    box-shadow: var(--rp-shadow-md);
}

#stats-section .stat-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

#stats-section .stat-kpi-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--rp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--stat-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--stat-accent) 28%, transparent);
    color: var(--stat-accent);
}

#stats-section .stat-kpi-value {
    text-align: right;
}

#stats-section .stat-kpi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stat-accent);
    margin-bottom: 2px;
}

#stats-section .stat-kpi-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--rp-text-strong);
}

#stats-section .stat-kpi-progress {
    margin-top: 24px;
}

#stats-section .stat-kpi-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rp-muted);
}

#stats-section .stat-kpi-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--stat-accent);
    background: color-mix(in srgb, var(--stat-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--stat-accent) 26%, transparent);
    border-radius: var(--rp-radius-sm);
    padding: 3px 8px;
}

#stats-section .stat-kpi-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--rp-surface-1);
    border: 1px solid var(--rp-border-soft);
}

#stats-section .stat-kpi-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 65%, transparent), var(--stat-accent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--stat-accent) 45%, transparent);
    transition: width 1000ms var(--rp-ease);
}

/* ── Estadísticas: Distribución de Inventario ──────────────────────────── */
#stats-section .stat-distribution-card {
    position: relative;
    padding: 26px;
    background: var(--rp-surface-2);
    border: 1px solid var(--rp-border-soft);
    border-radius: var(--rp-radius-xl);
    box-shadow: var(--rp-shadow-sm);
}

#stats-section .stat-distribution-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

#stats-section .stat-distribution-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--rp-text-strong);
}

#stats-section .stat-distribution-subtitle {
    font-size: 12px;
    color: var(--rp-muted);
    margin-top: 2px;
}

#stats-section .stat-distribution-legend {
    display: flex;
    gap: 16px;
}

#stats-section .stat-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rp-muted);
}

#stats-section .stat-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--stat-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--stat-accent) 60%, transparent);
}

#stats-section .stat-distribution-bar {
    width: 100%;
    height: 22px;
    display: flex;
    overflow: hidden;
    border-radius: 999px;
    background: var(--rp-surface-1);
    border: 1px solid var(--rp-border-soft);
}

#stats-section .stat-distribution-fill {
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--stat-accent) 65%, transparent), var(--stat-accent));
    box-shadow: 0 0 14px color-mix(in srgb, var(--stat-accent) 45%, transparent);
    transition: width 1000ms var(--rp-ease);
}

#stats-section .stat-distribution-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Estadísticas: Ingresos Brutos / Costos / Ganancia Neta ────────────── */
#stats-section .stat-money-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--stat-accent) 6%, var(--rp-surface-2)), var(--rp-surface-2));
    border: 1px solid var(--rp-border-soft);
    border-radius: var(--rp-radius-xl);
    box-shadow: var(--rp-shadow-sm);
    transition: border-color var(--rp-speed) var(--rp-ease), box-shadow var(--rp-speed) var(--rp-ease);
}

#stats-section .stat-money-card:hover {
    border-color: color-mix(in srgb, var(--stat-accent) 34%, var(--rp-border-soft));
    box-shadow: var(--rp-shadow-md);
}

#stats-section .stat-money-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rp-muted);
    margin-bottom: 4px;
}

#stats-section .stat-money-value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--stat-accent);
}

#stats-section .stat-money-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--stat-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--stat-accent) 30%, transparent);
    color: var(--stat-accent);
}

#stats-section .stat-money-card--hero {
    background: linear-gradient(160deg, color-mix(in srgb, var(--stat-accent) 14%, var(--rp-surface-2)), var(--rp-surface-2));
    border-color: color-mix(in srgb, var(--stat-accent) 40%, var(--rp-border-soft));
}

#stats-section .stat-money-card--hero .stat-money-value {
    font-size: 2.2rem;
}

#stats-section .stat-money-card--hero .stat-money-icon {
    width: 56px;
    height: 56px;
    box-shadow: 0 0 16px color-mix(in srgb, var(--stat-accent) 35%, transparent);
}

/* ==========================================================================
   MODALES — APPLICA A TODOS LOS MODALES EXISTENTES SIN TOCAR SUS IDS
   ========================================================================== */

[id$="-modal"] {
    color: var(--color-text) !important;
}

[id$="-modal"] > div,
[id$="-modal"] [role="dialog"] {
    color: var(--color-text) !important;
}

[id$="-modal"] .bg-gray-800,
[id$="-modal"] .bg-gray-900,
[id$="-modal"] [class*="bg-[#0f172a]"],
[id$="-modal"] [class*="bg-[#1e293b]"] {
    background: var(--color-bg-card) !important;
    color: var(--color-text) !important;
}

[id$="-modal"] .border-gray-700,
[id$="-modal"] .border-gray-800,
[id$="-modal"] [class*="border-white"] {
    border-color: var(--rp-border-soft) !important;
}

[id$="-modal"] input,
[id$="-modal"] select,
[id$="-modal"] textarea {
    color: var(--color-text) !important;
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
}

[id$="-modal"] input::placeholder,
[id$="-modal"] textarea::placeholder {
    color: var(--rp-faint) !important;
}

[id$="-modal"] input:focus,
[id$="-modal"] select:focus,
[id$="-modal"] textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--rp-focus) !important;
}

[id$="-modal"] button {
    border-radius: var(--rp-radius-md);
}

[id$="-modal"] .text-white,
[id$="-modal"] .text-gray-50,
[id$="-modal"] .text-gray-100,
[id$="-modal"] .text-gray-200 {
    color: var(--color-text) !important;
}

[id$="-modal"] .text-gray-400,
[id$="-modal"] .text-gray-500 {
    color: var(--color-text-secondary) !important;
}

/* Autocompletados */

[id$="-modal"] ul,
#list-price-service,
#list-price-type {
    background: var(--color-bg-card) !important;
    border-color: var(--rp-border-strong) !important;
    box-shadow: var(--rp-shadow-lg) !important;
}

[id$="-modal"] li,
#list-price-service li,
#list-price-type li {
    color: var(--color-text-secondary) !important;
    border-color: var(--rp-border-soft) !important;
}

[id$="-modal"] li:hover,
#list-price-service li:hover,
#list-price-type li:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
}

/* ==========================================================================
   BULK EDIT / NOTAS — elimina colores rígidos del inline CSS existente
   ========================================================================== */

.bulk-field-row {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
}

.bulk-field-row:hover {
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-card)) !important;
    border-color: color-mix(in srgb, var(--color-accent) 28%, transparent) !important;
}

.bulk-field-row input,
.bulk-field-row select,
.bulk-field-row textarea {
    background: var(--rp-surface-2) !important;
    color: var(--color-text) !important;
    border-color: var(--rp-border-soft) !important;
}

.bulk-field-row input:focus,
.bulk-field-row select:focus,
.bulk-field-row textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent) !important;
}

.bulk-field-icon,
.bulk-field-label {
    color: var(--color-text-secondary) !important;
}

.bulk-field-check {
    accent-color: var(--color-accent);
}

#account-notes-input {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    color: var(--color-text) !important;
}

#account-notes-input:focus {
    border-color: var(--color-primary) !important;
}

#account-notes-send-btn {
    background: var(--color-primary) !important;
    color: var(--color-text) !important;
}

#account-notes-send-btn:hover {
    background: var(--color-primary-dark) !important;
}

/* ==========================================================================
   BADGES / CHIPS DINÁMICOS
   ========================================================================== */

.madre-badge {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)) !important;
    color: var(--color-primary-light) !important;
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

.row-expired .badge,
.row-expired [class*="badge"] {
    border-color: color-mix(in srgb, var(--rp-danger) 30%, transparent);
}

.row-urgent .badge,
.row-urgent [class*="badge"] {
    border-color: color-mix(in srgb, var(--rp-warning) 30%, transparent);
}

/* ==========================================================================
   ESTADOS DE TEXTO — reutiliza la paleta del tema
   ========================================================================== */

.text-green-400,
.text-green-500,
.text-emerald-400,
.text-emerald-500 {
    color: var(--rp-success) !important;
}

.text-red-400,
.text-red-500,
.text-rose-400,
.text-rose-500 {
    color: var(--rp-danger) !important;
}

.text-yellow-400,
.text-yellow-500,
.text-amber-400,
.text-amber-500 {
    color: var(--rp-warning) !important;
}

.text-blue-400,
.text-blue-500,
.text-cyan-400,
.text-cyan-500 {
    color: var(--color-primary-light) !important;
}

/* ==========================================================================
   MICROINTERACCIONES
   ========================================================================== */

button,
select,
input,
textarea {
    transition:
        color var(--rp-speed) var(--rp-ease),
        background-color var(--rp-speed) var(--rp-ease),
        border-color var(--rp-speed) var(--rp-ease),
        box-shadow var(--rp-speed) var(--rp-ease),
        transform var(--rp-speed) var(--rp-ease),
        opacity var(--rp-speed) var(--rp-ease);
}

button:not(:disabled):active {
    transform: translateY(1px);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: .55;
}

button:disabled {
    cursor: not-allowed;
}

/* Evita que el movimiento de la UI compita con la tabla. */
.row-in {
    animation-duration: 180ms !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Base (escritorio): el acordeón de .sidebar-nav-toggle-btn solo existe en
   móvil — ver la regla dentro de @media (max-width: 820px) más abajo. */
.sidebar-nav-toggle-btn {
    display: none;
}

@media (max-width: 1100px) {
    #app-container > aside {
        width: 250px !important;
    }

    #accounts-view,
    #prices-view {
        padding: 20px !important;
    }

    #accounts-view header .w-px {
        display: none !important;
    }
}

@media (max-width: 820px) {
    /* Sin esto, aside y main quedan lado a lado (flex-direction:row, el
       default del contenedor) pero aside con width:100% se come toda la
       fila y main queda tapado detrás — en el teléfono solo se veía la
       barra lateral, el contenido real (tabla, Otros...) nunca aparecía.
       Confirmado en vivo: aside y main medían 375px de ancho los dos,
       superpuestos en la misma posición. */
    #app-container {
        overflow: auto !important;
        flex-direction: column !important;
    }

    #app-container > aside {
        width: 100% !important;
        max-width: none;
        height: auto !important;
        min-height: 0;
        position: relative;
        box-shadow: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--rp-border-soft) !important;
    }

    #app-container > aside > div:nth-child(3) {
        max-height: 42vh;
    }

    #app-container > aside > div:last-child {
        position: sticky;
        bottom: 0;
    }

    #main-content {
        min-height: 58vh;
        overflow: visible !important;
    }

    #accounts-view,
    #prices-view {
        padding: 16px !important;
    }

    #accounts-view header > div:last-child {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    #service-tabs-container {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    #consolidado-view > .bg-gray-900 {
        border-radius: var(--rp-radius-md) !important;
    }

    #consolidado-table-head {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* Acordeón del menú "Otros"/"Precios" — en el teléfono, con las 13
       secciones de Administración desplegadas siempre, había que hacer
       scroll por toda la lista antes de llegar al contenido real cada vez
       que se entraba a esa pestaña. Colapsado por defecto en móvil (no en
       escritorio, donde .sidebar-nav-list se deja como estaba). */
    .sidebar-nav-toggle-btn {
        display: flex;
        min-height: 44px;
        cursor: pointer;
        background: transparent;
        border: none;
    }

    .sidebar-nav-toggle-icon {
        transition: transform 0.2s ease;
    }

    .sidebar-nav-toggle-btn.expanded .sidebar-nav-toggle-icon {
        transform: rotate(180deg);
    }

    .sidebar-nav-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .sidebar-nav-list.expanded {
        max-height: 2000px;
    }

    /* Botones de icono chicos (copiar, editar, eliminar en filas de tabla
       y tarjetas) — varios medían ~26-30px, por debajo del mínimo cómodo
       para el dedo. Se agranda el área de toque sin tocar el tamaño visual
       del ícono ni el layout de escritorio (todos ya usan flex centrado). */
    #consolidado-view button[class*="p-1"],
    #consolidado-view button[class*="p-2"],
    #email-report-list button[class*="p-1"],
    #team-stats-grid button[class*="p-1"],
    #price-quick-bar button,
    .copy-text-direct-btn,
    .edit-email-report-btn,
    .delete-email-report-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* Barra de acciones de una fila expandida (Copiar/Notas/Reasignar/
       Guardar/Eliminar…): con justify-between en una fila angosta, los dos
       grupos de botones quedaban apretados en dos columnas lado a lado en
       vez de en uno abajo del otro — "Guardar" terminaba pegado al borde
       derecho, casi cortado. Se apilan verticalmente para que cada grupo
       tenga el ancho completo para acomodar sus botones. */
    /* La fila expandida vive en una <td> de una tabla con table-layout:auto:
       el navegador calcula el ancho de esa celda (y de paso, de TODA la
       tabla) a partir del ancho "sin envolver" de su contenido — y un
       flex-wrap adentro no cuenta para ese cálculo salvo que se le dé
       min-width:0 explícito en la cadena de contenedores. Sin esto la
       barra de botones empujaba la celda (y la tabla completa) a ~480px
       de ancho en una pantalla de 375px. */
    .row-detail-wrapper,
    .row-detail-wrapper form {
        min-width: 0;
    }

    .row-actions-bar {
        flex-direction: column;
        align-items: stretch !important;
        min-width: 0;
    }

    .row-actions-bar > div {
        justify-content: flex-start !important;
        min-width: 0;
    }

    /* ======================================================================
       TABLA DE CUENTAS COMO TARJETAS EN MÓVIL
       ======================================================================
       La tabla tiene 9+ columnas — de ancho fijo o con scroll horizontal,
       ninguna se siente nativa de teléfono. En vez de reescribir el JS que
       genera las filas, se aprovecha que cada <td> YA trae data-key (usado
       para edición) y se convierte en tarjeta por CSS puro: encabezado
       oculto, cada <tr> pasa a ser una tarjeta con sus <td> apilados como
       pares etiqueta/valor (la etiqueta sale de ::before, una por cada
       data-key posible — mismo texto que ALL_CONSOLIDADO_COLUMNS en
       state.js). Se scopea a tr[data-original-index] (las filas de datos)
       para no tocar la fila de detalle expandida, que es un <td> ancho
       con su propio formulario y no debe recibir este tratamiento. */
    #consolidado-table-head {
        display: none;
    }

    #consolidado-view table,
    #consolidado-table-body {
        display: block;
        width: 100%;
    }

    #consolidado-table-body > tr {
        display: block;
    }

    #consolidado-table-body > tr[data-original-index] {
        margin-bottom: 10px;
        border-radius: var(--rp-radius-md);
        border: 1px solid var(--rp-border-soft);
        overflow: hidden;
    }

    #consolidado-table-body > tr[data-original-index] > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        border-right: none !important;
        border-bottom: 1px solid color-mix(in srgb, var(--rp-border-soft) 60%, transparent) !important;
        padding: 7px 12px !important;
    }

    #consolidado-table-body > tr[data-original-index] > td:last-child {
        border-bottom: none !important;
    }

    #consolidado-table-body > tr[data-original-index] > td > * {
        text-align: right;
        min-width: 0;
    }

    #consolidado-table-body > tr[data-original-index] > td::before {
        content: attr(data-key);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-secondary);
        flex-shrink: 0;
    }

    #consolidado-table-body td[data-key="cliente"]::before   { content: "Cliente"; }
    #consolidado-table-body td[data-key="servicio"]::before  { content: "Servicio"; }
    #consolidado-table-body td[data-key="nombre"]::before    { content: "Perfil"; }
    #consolidado-table-body td[data-key="vence"]::before     { content: "Vence"; }
    #consolidado-table-body td[data-key="dias"]::before      { content: "Días"; }
    #consolidado-table-body td[data-key="activa"]::before    { content: "Estado"; }
    #consolidado-table-body td[data-key="precio"]::before    { content: "Precio"; }
    #consolidado-table-body td[data-key="correo"]::before    { content: "Correo"; }
    #consolidado-table-body td[data-key="contraseña"]::before{ content: "Contraseña"; }
    #consolidado-table-body td[data-key="tipo"]::before      { content: "Tipo"; }
    #consolidado-table-body td[data-key="slots"]::before     { content: "Slots"; }
    #consolidado-table-body td[data-key="star"]::before      { content: ""; }

    /* Primera fila de la tarjeta (cliente) con más presencia — es la que
       identifica la cuenta de un vistazo, igual que en la tabla de
       escritorio esa columna va primero y en negrita. */
    #consolidado-table-body > tr[data-original-index] > td[data-key="cliente"] {
        background: var(--rp-surface-hover);
    }

    /* La última <td> (sin data-key) es solo el chevron de expandir — sin
       etiqueta, centrado, más chica. */
    #consolidado-table-body > tr[data-original-index] > td:not([data-key]) {
        justify-content: center;
        padding: 4px 12px 7px !important;
    }

    #consolidado-table-body > tr[data-original-index] > td:not([data-key])::before {
        content: "";
    }
}

/* ===========================================================================
   DIRECCIÓN VISUAL V2 — MARCO DE OPERACIONES
   Un cambio estructural perceptible sin tocar el HTML ni los flujos de trabajo.
   =========================================================================== */

@media (min-width: 821px) {
    #app-container > aside {
        width: 286px !important;
        flex: 0 0 286px !important;
        border-right: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--rp-border-soft)) !important;
        box-shadow: 20px 0 50px color-mix(in srgb, var(--color-bg) 45%, transparent) !important;
    }

    #main-content { padding: 16px 18px 18px 20px !important; }
    #accounts-view, #prices-view, #otros-view {
        max-width: none;
        min-height: calc(100vh - 34px);
        padding: 28px 30px 38px !important;
        border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
        border-radius: 26px;
        background: color-mix(in srgb, var(--color-bg) 72%, transparent);
        box-shadow: 0 28px 70px color-mix(in srgb, var(--color-bg) 38%, transparent);
    }

    #accounts-view > header,
    #otros-view > header {
        display: flex;
        align-items: center;
        min-height: 104px;
        margin: 0 0 24px !important;
        padding: 20px 24px !important;
        border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--rp-border-soft)) !important;
        border-radius: 20px;
        background:
            radial-gradient(480px 160px at 100% 0, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 75%),
            linear-gradient(110deg, color-mix(in srgb, var(--rp-surface-2) 96%, transparent), var(--rp-surface-1)) !important;
        box-shadow: 0 18px 36px color-mix(in srgb, var(--color-bg) 20%, transparent) !important;
    }

    #accounts-view > header::after,
    #otros-view > header::after { width: 112px; height: 3px; left: 24px; }

    #accounts-view > header h2,
    #otros-view > header > div > h2 {
        font-size: clamp(1.85rem, 2.8vw, 2.45rem) !important;
        line-height: 1 !important;
    }

    #accounts-view > header > div:first-child,
    #otros-view > header > div:first-child { padding-left: 2px; }

    #accounts-view > header > div:last-child {
        margin-left: auto;
        padding: 7px;
        border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
        border-radius: 15px;
        background: color-mix(in srgb, var(--color-bg) 18%, transparent);
    }
}

/* Marca e identidad: el lateral pasa de menú a barra de trabajo. */
#app-container > aside > div:first-child {
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
}

#app-container > aside > div:first-child h1 {
    font-size: 19px !important;
    text-shadow: 0 2px 14px color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.otros-nav-btn, .price-nav-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
}

.otros-nav-btn::after, .price-nav-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 72%);
    transition: opacity var(--rp-speed) var(--rp-ease);
}

.otros-nav-btn:hover::after, .price-nav-btn:hover::after,
.otros-nav-btn.active::after, .price-nav-btn.active::after { opacity: 1; }

.otros-nav-btn.active, .price-nav-btn.active {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--rp-surface-2)) !important;
}

.otros-nav-btn > *, .price-nav-btn > * { position: relative; z-index: 1; }

/* Gestión: herramientas y tabla leídas como una estación de trabajo. */
#consolidado-view {
    padding: 18px !important;
    border: 1px solid var(--rp-border-soft);
    border-radius: 22px;
    background: color-mix(in srgb, var(--rp-surface-1) 74%, transparent);
}

#consolidado-view > .flex:first-child,
#consolidado-view > div:first-child {
    padding: 6px 4px 16px;
}

#consolidado-view #service-tabs-container {
    gap: 7px !important;
    padding: 10px !important;
    border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--color-bg) 18%, transparent);
}

#consolidado-view #service-tabs-container button {
    border-radius: 9px !important;
    border: 1px solid transparent !important;
}

#consolidado-view #service-tabs-container button:hover {
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

#consolidado-view table {
    margin-top: 14px;
    border-radius: 15px !important;
}

/* Precios: la barra superior se convierte en una consola de tarifas explícita. */
#price-quick-bar {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px !important;
    padding: 16px 20px !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--rp-border-soft)) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--color-primary) 10%, var(--rp-surface-2)), var(--rp-surface-1) 58%, color-mix(in srgb, var(--color-accent) 7%, var(--rp-surface-1))) !important;
    box-shadow: var(--rp-shadow-md) !important;
}

#price-quick-bar::before {
    content: "TARIFAS Y VISUALIZACIÓN";
    position: absolute;
    top: -1px;
    left: 20px;
    transform: translateY(-50%);
    padding: 0 8px;
    color: var(--color-text-secondary);
    background: var(--rp-surface-2);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

#prices-view .price-list-inner {
    border: 1px solid var(--rp-border-soft);
    border-radius: 22px;
    background: color-mix(in srgb, var(--rp-surface-1) 76%, transparent);
    box-shadow: var(--rp-shadow-sm);
}

#prices-view .price-list-inner > :first-child { padding-top: 0; }

/* Lista de precios: catálogo compacto, no mosaico de tarjetas genéricas. */
#prices-view .price-list-inner {
    overflow: hidden;
}

#prices-view .rp-price-toolbar {
    position: relative;
    margin: 0 !important;
    padding: 18px 22px 15px;
    border-bottom: 1px solid var(--rp-border-soft);
    background: color-mix(in srgb, var(--rp-surface-2) 62%, transparent);
}

#prices-view .rp-price-toolbar h3 {
    color: var(--color-text-primary) !important;
    font-size: 1rem !important;
    letter-spacing: -.01em;
}

#prices-view .rp-price-toolbar p { color: var(--rp-muted) !important; }

#prices-view .rp-price-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--rp-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

#prices-view .rp-price-switcher {
    padding: 3px !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: 10px !important;
    background: var(--rp-surface-3) !important;
}

#prices-view .rp-price-toolbar .tab-price-btn {
    min-height: 32px;
    border-radius: 7px !important;
    box-shadow: none !important;
}

#prices-view .rp-price-tools {
    margin: 0 !important;
    padding: 12px 22px;
    border-bottom: 1px solid var(--rp-border-soft);
    background: var(--rp-surface-1);
}

#prices-view .rp-price-search input {
    min-height: 38px;
    border-color: var(--rp-border-soft) !important;
    border-radius: 8px !important;
    background: var(--rp-surface-2) !important;
    box-shadow: none !important;
}

#prices-view .rp-price-actions button {
    min-height: 38px;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#prices-view .rp-price-filters {
    margin: 0 !important;
    padding: 12px 22px;
    border-bottom: 1px solid var(--rp-border-soft);
    background: color-mix(in srgb, var(--rp-surface-1) 86%, transparent);
}

#prices-view .rp-price-filters button {
    border-color: var(--rp-border-soft) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

#prices-view .rp-price-content {
    padding: 18px 22px 28px !important;
}

#prices-view .rp-price-grid {
    gap: 14px !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    align-items: start;
}

#prices-view .rp-price-card {
    border-color: var(--rp-border-soft) !important;
    border-radius: 13px !important;
    background: var(--rp-surface-1) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background-color .16s ease !important;
}

#prices-view .rp-price-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--rp-border-soft)) !important;
    background: var(--rp-surface-2) !important;
}

#prices-view .rp-price-card-header {
    min-height: 44px;
    padding: 10px 13px !important;
    border-color: var(--rp-border-soft) !important;
    background: color-mix(in srgb, var(--rp-surface-2) 78%, transparent) !important;
}

#prices-view .rp-price-card-header h4 {
    color: var(--color-text-primary) !important;
    font-size: 11px !important;
    letter-spacing: .055em !important;
}

#prices-view .rp-price-card ul {
    padding: 3px 6px 6px !important;
}

#prices-view .rp-price-row {
    min-height: 48px;
    margin: 0 !important;
    padding: 8px 7px !important;
    border-radius: 7px !important;
}

#prices-view .rp-price-row:hover {
    background: var(--rp-surface-hover) !important;
}

#prices-view .rp-price-row > div:last-child > div:first-child {
    color: var(--color-text-primary) !important;
    font-size: 12px !important;
    font-weight: 700;
}

@media (max-width: 820px) {
    #prices-view .rp-price-toolbar,
    #prices-view .rp-price-tools,
    #prices-view .rp-price-filters,
    #prices-view .rp-price-content { padding-inline: 14px !important; }
    #prices-view .rp-price-grid { grid-template-columns: 1fr !important; }
}

/* Otros: paneles más reconocibles y menos tarjetas indiferenciadas. */
#otros-view .otros-section > .grid,
#otros-view #dashboard-section > .grid,
#otros-view #stats-section > .grid {
    gap: 16px !important;
}

#otros-view .otros-section > div,
#otros-view #dashboard-section > div,
#otros-view #stats-section > div {
    border-color: var(--rp-border-soft) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--color-bg) 16%, transparent) !important;
}

#otros-view .otros-section > div:hover,
#otros-view #dashboard-section > div:hover {
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--rp-border-soft)) !important;
}

@media (max-width: 820px) {
    #consolidado-view { margin-inline: -4px; padding: 12px !important; border-radius: 16px; }
    #consolidado-view #service-tabs-container { padding: 8px !important; }
    #price-quick-bar { margin-inline: -2px; padding: 16px 14px !important; }
    #prices-view .price-list-inner { border-radius: 16px; }
}

@media (max-width: 560px) {
    #accounts-view,
    #prices-view {
        padding: 12px !important;
    }

    #accounts-view h2 {
        font-size: 1.25rem !important;
    }

    #accounts-view header > div:last-child > button {
        flex: 1 1 auto;
        min-height: 42px;
    }

    #accounts-view header > div:last-child > .flex {
        flex: 1 1 100%;
    }

    #column-toggle-btn,
    #export-csv-btn {
        flex: 1 1 0;
        justify-content: center;
        padding-inline: 12px !important;
    }

    #filters-container .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #filters-container > div:nth-child(2) > div.grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .rp-login-card {
        padding: 22px !important;
        border-radius: var(--rp-radius-lg) !important;
    }

    .rp-login-auth-head h2 {
        font-size: 1.45rem !important;
    }
}

/* ==========================================================================
   MODO CLARO — protección adicional contra clases Tailwind rígidas
   ========================================================================== */

body[data-theme="light"] {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* Refuerzo de especificidad: el <body> trae la clase Tailwind bg-gray-900
   escrita a mano, y la regla genérica de themes.css para esa clase
   (`.bg-gray-900 { background-color: var(--color-bg-secondary) !important }`)
   le está ganando al selector de arriba en la práctica — quedaba con el
   valor oscuro de --color-bg-secondary pegado incluso con el tema claro ya
   aplicado (confirmado con getComputedStyle tras una recarga completa).
   Un selector compuesto body+clase+atributo tiene más especificidad que la
   sola clase y cierra el caso sin tocar themes.css. */
body[data-theme="light"].bg-gray-900,
body.bg-gray-900[data-theme="light"] {
    background-color: var(--color-bg) !important;
}

body[data-theme="light"] #app-container > aside,
body[data-theme="light"] #app-container > aside > div:last-child {
    background: var(--color-bg-secondary) !important;
}

body[data-theme="light"] #main-content {
    background: var(--color-bg) !important;
}

body[data-theme="light"] #consolidado-view > .bg-gray-900,
body[data-theme="light"] #consolidado-view table,
body[data-theme="light"] #prices-view .price-section,
body[data-theme="light"] #prices-view .bg-gray-800,
body[data-theme="light"] #prices-view .bg-gray-900,
body[data-theme="light"] [id$="-modal"] .bg-gray-800,
body[data-theme="light"] [id$="-modal"] .bg-gray-900,
body[data-theme="light"] #otros-view .bg-gray-800,
body[data-theme="light"] #otros-view .bg-gray-900,
body[data-theme="light"] #otros-view [class*="bg-gray-800/"],
body[data-theme="light"] #otros-view [class*="bg-gray-900/"],
body[data-theme="light"] #otros-view [class*="bg-[#0f172a]"],
body[data-theme="light"] #otros-view [class*="bg-[#1e293b]"] {
    background: var(--color-bg-card) !important;
}

body[data-theme="light"] #consolidado-table-head {
    background: var(--color-bg-secondary) !important;
}

body[data-theme="light"] #login-overlay > .relative {
    background: var(--color-bg-secondary) !important;
}

body[data-theme="light"] #login-overlay input,
body[data-theme="light"] #login-overlay select,
body[data-theme="light"] #filters-container input,
body[data-theme="light"] #filters-container select,
body[data-theme="light"] #prices-view input,
body[data-theme="light"] #prices-view select,
body[data-theme="light"] #prices-view textarea,
body[data-theme="light"] #otros-view input,
body[data-theme="light"] #otros-view select,
body[data-theme="light"] #otros-view textarea,
body[data-theme="light"] [id$="-modal"] input,
body[data-theme="light"] [id$="-modal"] select,
body[data-theme="light"] [id$="-modal"] textarea {
    background: var(--color-bg-secondary) !important;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

/* ===========================================================================
   OTROS — PANELES ADMINISTRATIVOS
   Clientes, vendedores y los módulos operativos usaban todavía el lenguaje
   visual anterior: gradientes azules/violetas, brillos por tarjeta y bordes
   de colores sin significado. Estos módulos son herramientas de trabajo, no
   tarjetas promocionales: se compactan en superficies neutras, con una sola
   jerarquía de borde/sombra y el color del tema reservado para foco y acción.
   Los verde/rojo/ámbar se conservan sólo donde informan un estado real.
   =========================================================================== */

#clientes-section > div,
#vendedores-section > div,
#profiles-section > div,
#cobros-history-section > div,
#proveedores-section > div,
#email-report-section > div,
#facturacion-section > div,
#perfiles-config-section > div,
#settings-section > div,
#pines-section > div {
    background: var(--rp-surface-2) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-xl) !important;
    box-shadow: var(--rp-shadow-sm) !important;
}

/* El encabezado de cada herramienta se siente parte del mismo sistema, sin
   que cada módulo invente una paleta propia. */
#clientes-section > div > div:first-child > div:first-child > div:first-child,
#vendedores-section > div > div:first-child > div:first-child > div:first-child,
#profiles-section > div > div:first-child > div:first-child,
#cobros-history-section > div > div:first-child > div:first-child > div:first-child,
#proveedores-section > div > div:first-child > div:first-child > div:first-child,
#email-report-section > div > div:first-child > div:first-child > div:first-child,
#facturacion-section > div > div:first-child > div:first-child > div:first-child {
    color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 11%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

/* Formularios de alta: área secundaria clara y una única señal de entrada,
   en lugar de franjas azules/cian/púrpuras distintas por pantalla. */
#clientes-section .add-client-form,
#vendedores-section .add-seller-form,
#profiles-section > div > div:not(#profile-list),
#facturacion-section #add-facturacion-form,
#proveedores-section #add-mother-client-form,
#email-report-section #add-email-report-form {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    box-shadow: none !important;
}

#clientes-section .add-client-form,
#vendedores-section .add-seller-form {
    border-left-color: var(--color-primary) !important;
}

/* Directorios: tarjetas densas y tranquilas. El avatar deja de ser un
   gradiente decorativo, conserva contraste y toma el color activo del tema. */
#client-list > div,
#seller-list > div,
#mother-client-list > div,
#profile-list > div,
#facturacion-list > div {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: var(--rp-radius-md) !important;
    box-shadow: none !important;
    transform: none !important;
}

#client-list > div:hover,
#seller-list > div:hover,
#mother-client-list > div:hover,
#profile-list > div:hover,
#facturacion-list > div:hover {
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--rp-border-soft)) !important;
    background: var(--rp-surface-hover) !important;
    box-shadow: var(--rp-shadow-sm) !important;
}

#client-list > div [class*="bg-gradient-to-"],
#seller-list > div [class*="bg-gradient-to-"] {
    background: var(--color-primary) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
    box-shadow: none !important;
}

#client-list > div [class*="bg-indigo"],
#client-list > div [class*="bg-purple"],
#seller-list > div [class*="bg-cyan"],
#seller-list > div [class*="bg-blue"] {
    color: var(--color-primary) !important;
}

/* Botones de operaciones frecuentes: sobrios en reposo, identificables al
   pasar el cursor. Las acciones destructivas se mantienen rojas. */
#client-list button:not(.delete-client-btn),
#seller-list button:not(.delete-seller-btn),
#mother-client-list button:not(.delete-mother-client-btn),
#profile-list button:not([class*="red"]),
#facturacion-list button:not([class*="red"]) {
    background: var(--rp-surface-3) !important;
    border-color: var(--rp-border-soft) !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}

#client-list button:not(.delete-client-btn):hover,
#seller-list button:not(.delete-seller-btn):hover,
#mother-client-list button:not(.delete-mother-client-btn):hover,
#profile-list button:not([class*="red"]):hover,
#facturacion-list button:not([class*="red"]):hover {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--rp-surface-3)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--rp-border-soft)) !important;
    color: var(--color-text) !important;
}

/* Bóveda de pines: se elimina el panel interior rígido. Amarillo sólo señala
   el tipo de PIN y verde sólo disponibilidad, ambos datos funcionales. */
#pines-section #pin-profiles-content,
#pines-section #pin-tabs-container,
#pines-section [class*="bg-gray-900"] {
    background: var(--rp-surface-1) !important;
}

#pines-section .group.relative.flex.flex-col {
    border-color: var(--rp-border-soft) !important;
    box-shadow: none !important;
}

/* Tablas operativas: encabezados más legibles, filas con contraste de foco y
   acciones compactas. No se cambia ninguna columna ni comportamiento. */
#email-report-list > div,
#email-report-list thead,
#cobros-history-list > div,
#cobros-history-list > article {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    box-shadow: none !important;
}

#email-report-list thead {
    background: var(--rp-surface-3) !important;
}

#email-report-list tbody tr:hover {
    background: var(--rp-surface-hover) !important;
}

#email-report-list th,
#email-report-list td {
    border-color: color-mix(in srgb, var(--rp-border-soft) 76%, transparent) !important;
}

/* Evita que las pequeñas etiquetas de servicio compitan visualmente con el
   correo principal; siguen siendo legibles en cualquiera de los temas. */
#email-report-list tbody td span[class*="rounded-full"] {
    background: var(--rp-surface-3) !important;
    border-color: var(--rp-border-soft) !important;
    color: var(--color-text-secondary) !important;
}

/* Pines: amarillo sólo para el inventario/categoría; las acciones siguen la
   jerarquía general del producto. Verde y rojo quedan reservados para marcar
   usado y eliminar, que son acciones con significado inequívoco. */
#pines-section button[class*="from-yellow-600"] {
    background: var(--color-primary) !important;
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--rp-border-soft)) !important;
    box-shadow: var(--rp-shadow-sm) !important;
}

#pines-section button[class*="from-yellow-600"]:hover {
    background: color-mix(in srgb, var(--color-primary) 86%, white) !important;
    box-shadow: var(--rp-shadow-md) !important;
}

#pines-section .copy-pin-btn {
    background: var(--rp-surface-3) !important;
    border: 1px solid var(--rp-border-soft) !important;
    color: var(--color-text-secondary) !important;
}

#pines-section .copy-pin-btn:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

/* Marcar Usado / Eliminar: la intención de arriba (verde y rojo reservados
   para estas dos) nunca se implementó — quedaron con el gris generico de
   Tailwind y, en el caso del check de "Marcar Usado", un trazo diagonal fino
   sobre una pildora ancha y vacia se pierde a simple vista pese a tener
   contraste correcto en teoria (confirmado comparando computed style contra
   el icono de basura, que si se nota por tener mas trazo). Un tinte de color
   permanente hace que ambos botones se identifiquen sin depender solo del
   contraste del icono. */
#pines-section .mark-pin-used-btn {
    background: color-mix(in srgb, #10b981 16%, var(--rp-surface-3)) !important;
    border: 1px solid color-mix(in srgb, #10b981 32%, transparent) !important;
    color: #10b981 !important;
}

#pines-section .mark-pin-used-btn:hover {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: white !important;
}

#pines-section .delete-pin-btn {
    background: var(--rp-surface-3) !important;
    border: 1px solid var(--rp-border-soft) !important;
    color: var(--color-text-secondary) !important;
}

#pines-section .delete-pin-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
}

@media (max-width: 820px) {
    #clientes-section > div,
    #vendedores-section > div,
    #profiles-section > div,
    #cobros-history-section > div,
    #proveedores-section > div,
    #email-report-section > div,
    #facturacion-section > div,
    #perfiles-config-section > div,
    #settings-section > div,
    #pines-section > div {
        border-radius: var(--rp-radius-lg) !important;
    }

    #client-list,
    #seller-list,
    #mother-client-list,
    #profile-list,
    #facturacion-list {
        gap: 10px !important;
    }

    #email-report-list > div {
        border-radius: var(--rp-radius-md) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    button:hover,
    .otros-nav-btn:hover,
    .price-nav-btn:hover,
    #open-renewal-btn:hover,
    #create-account-btn:hover {
        transform: none !important;
    }
}

/* ===========================================================================
   SALA DE CONTROL — RENOVACIÓN GLOBAL
   El login marca la dirección: bloques editoriales, profundidad discreta y
   una sola jerarquía de superficies. Esta capa no modifica ningún flujo.
   =========================================================================== */

#app-container {
    background: var(--color-bg) !important;
}

#main-content {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(900px 520px at 92% -12%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 60%),
        radial-gradient(650px 420px at 4% 100%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 65%),
        var(--color-bg) !important;
}

#main-content::before {
    content: "";
    position: fixed;
    inset: 0 0 0 286px;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 52%);
}

/* Navegación como columna de operaciones, con un borde de luz mínimo. */
#app-container > aside {
    position: relative;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary)), var(--color-bg-secondary) 30%, var(--color-bg-secondary)) !important;
}

#app-container > aside::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 132px;
    pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent);
}

#app-container > aside > div { position: relative; z-index: 1; }

#app-container > aside > div:first-child {
    padding: 23px 22px 18px !important;
}

#app-container > aside > div:first-child h1 {
    letter-spacing: -.05em !important;
    font-weight: 800 !important;
}

#app-container > aside > div:first-child > div > div:first-child {
    border-radius: 13px !important;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
}

#app-container > aside > div:nth-child(2) {
    margin: 2px 16px 10px;
    padding: 4px !important;
    background: color-mix(in srgb, var(--color-bg) 22%, transparent) !important;
    border: 1px solid var(--rp-border-soft) !important;
    border-radius: 14px !important;
}

#tab-accounts, #tab-prices, #tab-otros {
    min-height: 36px !important;
    border-radius: 10px !important;
    letter-spacing: .02em;
    font-size: 10px !important;
}

#app-container > aside > div:nth-child(3) {
    padding: 5px 14px 16px !important;
}

.otros-nav-btn, .price-nav-btn {
    min-height: 42px !important;
    padding-inline: 12px !important;
    margin-block: 2px;
}

.otros-nav-btn.active, .price-nav-btn.active {
    box-shadow: inset 3px 0 0 var(--color-primary), var(--rp-shadow-sm) !important;
}

/* Los tres espacios principales comparten el mismo margen respirable. */
#accounts-view, #prices-view, #otros-view {
    position: relative;
    z-index: 1;
    max-width: 1720px;
    padding: 30px 34px 42px !important;
}

#accounts-view > header,
#otros-view > header {
    position: relative;
    margin-bottom: 26px !important;
    padding: 4px 0 21px;
    border-bottom: 1px solid color-mix(in srgb, var(--rp-border-soft) 78%, transparent);
}

#accounts-view > header::after,
#otros-view > header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 74px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 99px;
}

#accounts-view > header h2,
#otros-view > header > div > h2 {
    letter-spacing: -.055em !important;
    font-weight: 800 !important;
}

#accounts-view > header h2 { font-size: clamp(1.55rem, 2.4vw, 2.05rem) !important; }
#otros-view > header > div > h2 { font-size: clamp(1.7rem, 2.7vw, 2.35rem) !important; }

/* Acciones: una única familia de botones, fuerte sólo cuando hay acción principal. */
#accounts-view header button,
#prices-view button,
#otros-view button {
    border-radius: 10px !important;
}

#accounts-view header button:not(#open-renewal-btn):not(#create-account-btn),
#dashboard-refresh-btn,
#price-quick-bar button {
    background: var(--rp-surface-1) !important;
    border-color: var(--rp-border-soft) !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}

#accounts-view header button:not(#open-renewal-btn):not(#create-account-btn):hover,
#dashboard-refresh-btn:hover,
#price-quick-bar button:hover {
    color: var(--color-text) !important;
    background: var(--rp-surface-hover) !important;
    border-color: var(--rp-border-strong) !important;
}

#open-renewal-btn, #create-account-btn {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
}

/* La tabla es el espacio de trabajo: menos cromo, mejor lectura y filas vivas. */
#consolidado-view > .bg-gray-900,
#consolidado-view table {
    background: color-mix(in srgb, var(--color-bg-card) 94%, transparent) !important;
    border-color: var(--rp-border-soft) !important;
    border-radius: 18px !important;
    box-shadow: var(--rp-shadow-md) !important;
}

#consolidado-view > .bg-gray-900 { overflow: hidden; }

#consolidado-table-head {
    background: color-mix(in srgb, var(--rp-surface-3) 82%, transparent) !important;
    border-bottom-color: var(--rp-border-strong) !important;
}

#consolidado-table-head th {
    height: 46px;
    color: var(--color-text-secondary) !important;
    font-size: 10px !important;
    letter-spacing: .08em;
}

#consolidado-table-body > tr {
    transition: background var(--rp-speed) var(--rp-ease), box-shadow var(--rp-speed) var(--rp-ease) !important;
}

#consolidado-table-body > tr:hover {
    background: color-mix(in srgb, var(--color-primary) 5%, var(--rp-surface-hover)) !important;
    box-shadow: inset 3px 0 0 var(--color-primary);
}

#consolidado-table-body > tr > td {
    border-color: color-mix(in srgb, var(--rp-border-soft) 65%, transparent) !important;
}

/* Las listas de precios y administración adquieren la misma arquitectura. */
#prices-view .price-section,
#otros-view .otros-section > div:not(.grid):not([id$="-list"]),
#otros-view #dashboard-section > div,
#otros-view #stats-section > div {
    border-radius: 18px;
}

#prices-view .price-section > div.bg-gray-800,
#otros-view .otros-section > div.bg-gray-800,
#otros-view .otros-section > div.bg-gray-900 {
    box-shadow: var(--rp-shadow-md) !important;
}

#prices-view .price-section > div > div:first-child,
#otros-view .otros-section > div > div:first-child {
    border-bottom-color: color-mix(in srgb, var(--rp-border-soft) 78%, transparent) !important;
}

/* Modales y avisos: superficie limpia, no bloques negros aislados. */
[id$="-modal"] > div,
.modal-content,
#customization-modal > div {
    border-radius: 20px !important;
    border-color: var(--rp-border-soft) !important;
    box-shadow: var(--rp-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-text) 3%, transparent) inset !important;
}

/* Estado de foco perceptible y consistente en toda la consola. */
#main-content button:focus-visible,
#main-content a:focus-visible,
#app-container > aside button:focus-visible {
    outline: 3px solid var(--rp-focus) !important;
    outline-offset: 2px;
}

@media (max-width: 1100px) {
    #main-content::before { left: 250px; }
    #accounts-view, #prices-view, #otros-view { padding: 24px !important; }
}

@media (max-width: 820px) {
    #main-content::before { display: none; }
    #accounts-view, #prices-view, #otros-view { padding: 18px 16px 30px !important; }
    #accounts-view > header, #otros-view > header { margin-bottom: 18px !important; padding-bottom: 16px; }
    #app-container > aside > div:nth-child(2) { margin-inline: 12px; }
}