/* ====================================================================
   RECCITELLI — CAPA "CRISTAL" (v5.9.18)
   Se carga DESPUÉS de styles.css y le da a todo el sistema el aspecto
   de vidrio, luces de fondo y animaciones. No cambia botones, textos ni
   posiciones: solo cómo se ven. Incluye el modo claro (html[data-theme=light]).
   ==================================================================== */

:root {
  --cx-ease: cubic-bezier(.16, 1, .3, 1);
  --cx-spring: cubic-bezier(.3, 1.4, .5, 1);
  --cx-glass: linear-gradient(160deg, rgba(30,45,74,.55), rgba(14,22,38,.62));
  --cx-glass-strong: linear-gradient(160deg, rgba(24,37,61,.86), rgba(11,17,31,.9));
  --cx-card: linear-gradient(160deg, rgba(30,45,74,.5), rgba(14,22,38,.66));
  --cx-line: rgba(148,163,184,.16);
  --cx-line-hover: rgba(186,230,253,.38);
  --cx-hi: inset 0 1px 0 rgba(255,255,255,.08);
  --cx-shadow: 0 18px 44px rgba(0,0,0,.42);
  --cx-shadow-hover: 0 28px 60px rgba(0,0,0,.55);
  --cx-spot: rgba(255,255,255,.12);
  --cx-bg: #060a13;
  --cx-blob-1: rgba(42,59,97,.85);
  --cx-blob-2: rgba(166,25,46,.32);
  --cx-blob-3: rgba(2,132,199,.2);
  --cx-grid: rgba(148,163,184,.05);
  --cx-topbar: rgba(6,10,19,.62);
  --cx-num-grad: linear-gradient(180deg, #ffffff 35%, #a5b4c8);
}

/* ---------- Fondo vivo: luces que se mueven + grilla tenue ---------- */
html { background-color: var(--cx-bg) !important; }
body { position: relative; background: transparent !important; }
body::before, body::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1; border-radius: 50%;
  filter: blur(110px); will-change: transform; animation: cx-drift 26s ease-in-out infinite;
}
body::before { width: 52vw; height: 60vh; left: -14vw; top: -26vh; background: var(--cx-blob-1); }
body::after { width: 42vw; height: 52vh; right: -12vw; top: -22vh; background: var(--cx-blob-2); animation-delay: -9s; }
.app-layout, .portal-container, .login-wrap { position: relative; isolation: isolate; }
.app-layout::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(40vw 34vh at 62% 108%, var(--cx-blob-3), transparent 70%),
    linear-gradient(var(--cx-grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--cx-grid) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
}
@keyframes cx-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8vw, 6vh) scale(1.15); }
  66% { transform: translate(-5vw, 10vh) scale(.92); }
}

/* ---------- Barra superior de vidrio ---------- */
.app-topbar {
  background: var(--cx-topbar) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--cx-line) !important;
}
.btn-toggle-menu {
  width: 44px; height: 44px; justify-content: center; border-radius: 14px !important;
  background: rgba(19,29,48,.6) !important; border: 1px solid var(--cx-line) !important;
}
.topbar-icon-btn { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
.topbar-branch-selector { border-radius: 999px !important; }
.dollar-ticker-sleek { border-radius: 999px !important; background: rgba(7,11,20,.6) !important; border: 1px solid var(--cx-line) !important; }
.topbar-user-avatar { box-shadow: 0 0 0 2px rgba(56,189,248,.5), 0 6px 18px rgba(2,132,199,.4); }
.cx-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: cx-pulse 2.4s infinite; }
@keyframes cx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 60% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } }

/* ---------- Mini perfil (menú del avatar) ---------- */
#topbar-user-menu {
  background: var(--cx-glass-strong) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--cx-line) !important; border-radius: 18px !important;
  box-shadow: var(--cx-hi), 0 24px 60px rgba(0,0,0,.55) !important;
  transform-origin: top right; animation: cx-pop .35s var(--cx-ease) both;
}
#topbar-user-menu .btn { border-radius: 10px !important; min-height: 40px; }
#topbar-user-menu .btn:hover { background: rgba(148,163,184,.12) !important; transform: translateX(3px) !important; box-shadow: none !important; }
@keyframes cx-pop { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
.cx-theme-row { display: flex; align-items: center; gap: 6px; padding: 6px 4px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--cx-line); }
.cx-theme-label { flex: 1; white-space: nowrap; font-size: 12px; font-weight: 700; color: #94a3b8; padding-left: 6px; }
.cx-theme-switch {
  position: relative; display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: 999px;
  background: rgba(4,7,14,.7); border: 1px solid var(--cx-line); cursor: pointer; font: inherit;
}
.cx-theme-switch span {
  position: relative; z-index: 1; width: 40px; height: 34px; display: grid; place-items: center; border-radius: 999px;
  font-size: 18px; color: #64748b; transition: color .35s var(--cx-ease) !important;
}
.cx-theme-switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 40px; height: 34px; border-radius: 999px;
  background: linear-gradient(140deg, #1e3a5f, #0b1220); box-shadow: 0 4px 14px rgba(2,132,199,.45), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateX(40px); transition: transform .45s var(--cx-spring), background .35s !important;
}
.cx-theme-switch .cx-moon { color: #bae6fd; }
html[data-theme="light"] .cx-theme-switch::before { transform: translateX(0); background: linear-gradient(140deg, #fde68a, #f59e0b); box-shadow: 0 4px 14px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.5); }
html[data-theme="light"] .cx-theme-switch .cx-sun { color: #78350f; }
html[data-theme="light"] .cx-theme-switch .cx-moon { color: #94a3b8; }
.cx-theme-switch:hover { transform: none !important; }
html.cx-theme-anim, html.cx-theme-anim * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }

/* ---------- Barra lateral: panel de vidrio flotante ---------- */
.sidebar {
  top: 12px !important; bottom: 12px !important; left: 12px !important; width: 272px !important;
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,31,53,.8), rgba(9,14,26,.86)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--cx-line) !important;
  box-shadow: var(--cx-hi), 0 30px 80px rgba(0,0,0,.6) !important;
  transform: translateX(calc(-100% - 24px)) !important;
  transition: transform .5s var(--cx-ease) !important;
}
.sidebar.open { transform: translateX(0) !important; }
.sidebar-backdrop { background: rgba(2,6,15,.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sidebar-header { border-bottom: 1px solid var(--cx-line) !important; background: transparent !important; }
.nav-btn { min-height: 44px; border-radius: 12px !important; position: relative; width: 100%; }
.nav-btn.active { padding-right: 28px !important; }
.nav-btn:hover { background: rgba(148,163,184,.1) !important; transform: translateX(5px) !important; box-shadow: none !important; }
.nav-btn.active {
  background: linear-gradient(100deg, rgba(166,25,46,.85), rgba(42,59,97,.6)) !important;
  border: 1px solid rgba(248,113,113,.4) !important;
  box-shadow: 0 10px 26px rgba(166,25,46,.35), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.nav-btn.active::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: #34d399; animation: cx-pulse 2.4s infinite;
}
.sidebar.open .nav-links > * { animation: cx-side .6s var(--cx-ease) both; }
.sidebar.open .nav-links > *:nth-child(1) { animation-delay: .04s; } .sidebar.open .nav-links > *:nth-child(2) { animation-delay: .07s; }
.sidebar.open .nav-links > *:nth-child(3) { animation-delay: .10s; } .sidebar.open .nav-links > *:nth-child(4) { animation-delay: .13s; }
.sidebar.open .nav-links > *:nth-child(5) { animation-delay: .16s; } .sidebar.open .nav-links > *:nth-child(6) { animation-delay: .19s; }
.sidebar.open .nav-links > *:nth-child(7) { animation-delay: .22s; } .sidebar.open .nav-links > *:nth-child(8) { animation-delay: .25s; }
.sidebar.open .nav-links > *:nth-child(9) { animation-delay: .28s; } .sidebar.open .nav-links > *:nth-child(10) { animation-delay: .31s; }
.sidebar.open .nav-links > *:nth-child(n+11) { animation-delay: .34s; }
@keyframes cx-side { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.sidebar-footer { border-top: 1px solid var(--cx-line) !important; background: transparent !important; }
.user-card { border-radius: 20px !important; box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }

/* ---------- Tarjetas de vidrio ---------- */
.stat-card, .crm-stat-card, .table-container, .card-box, .c360-sec, .crm-form-section, .hero-search-box,
.quadrant-card, .priority-card, .voice-recorder-box, .client-row-card, .ch-card, .cx-glass, .friday-banner {
  background: var(--cx-glass) !important;
  border: 1px solid var(--cx-line) !important;
  box-shadow: var(--cx-hi), var(--cx-shadow) !important;
}
.stat-card, .crm-stat-card, .card-box, .c360-sec, .crm-form-section, .hero-search-box, .table-container, .quadrant-card, .ch-card {
  border-radius: 22px !important;
}
.stat-card, .crm-stat-card, .hero-search-box, .card-box {
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
.product-card, .c360-card {
  background: var(--cx-card) !important;
  border: 1px solid var(--cx-line) !important; border-radius: 18px !important;
  box-shadow: var(--cx-hi), 0 12px 28px rgba(0,0,0,.35) !important;
}
.modal-card, .modal-content {
  background: var(--cx-glass-strong) !important;
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--cx-line) !important; border-radius: 24px !important;
  box-shadow: var(--cx-hi), 0 40px 100px rgba(0,0,0,.65) !important;
  animation: cx-modal .5s var(--cx-ease) both !important;
}
.modal-overlay { background: rgba(2,6,15,.62) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@keyframes cx-modal { from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Luz de color en la esquina de cada tarjeta de números */
.stat-card, .crm-stat-card { position: relative; isolation: isolate; overflow: hidden; }
.stat-card::before, .crm-stat-card::before {
  content: ""; position: absolute; z-index: -1; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: var(--glow, rgba(56,189,248,.28)); filter: blur(42px); pointer-events: none; transition: transform .6s var(--cx-ease) !important;
}
.stat-card.cx-hover::before, .crm-stat-card.cx-hover::before { transform: scale(1.5); }
.stat-card:nth-child(4n+1), .crm-stat-card:nth-child(4n+1) { --glow: rgba(52,211,153,.26); }
.stat-card:nth-child(4n+2), .crm-stat-card:nth-child(4n+2) { --glow: rgba(56,189,248,.3); }
.stat-card:nth-child(4n+3), .crm-stat-card:nth-child(4n+3) { --glow: rgba(251,191,36,.26); }
.stat-card:nth-child(4n+4), .crm-stat-card:nth-child(4n+4) { --glow: rgba(168,85,247,.3); }
html[data-theme="light"] .stat-card::before, html[data-theme="light"] .crm-stat-card::before { opacity: .55; }

/* Inclinación 3D + reflejo que sigue al mouse (lo activa cristal.js con .cx-tilt) */
.cx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) !important; }
.cx-tilt.cx-hover { --ty: -3px; border-color: var(--cx-line-hover) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--cx-shadow-hover) !important; }
.cx-spot { position: relative; overflow: hidden; }
.cx-spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--cx-spot), transparent 65%);
  transition: opacity .35s ease !important;
}
.cx-spot.cx-hover::after { opacity: 1; }

/* Entrada en cascada de lo que aparece en pantalla */
.cx-in { animation: cx-up .8s var(--cx-ease) both; animation-delay: var(--cx-d, 0s); }
@keyframes cx-up { from { opacity: 0; transform: translateY(22px) scale(.975); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.main-content { animation: none !important; }

/* Números grandes con brillo */
.stat-val, .crm-stat-card .crm-stat-val, .stat-value { text-shadow: 0 0 26px rgba(148,163,184,.25); }
.page-title h1, .page-header h1 {
  background: var(--cx-num-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  letter-spacing: -.8px;
}

/* ---------- Botones ---------- */
.btn { border-radius: 12px !important; min-height: 40px; position: relative; overflow: hidden; }
.btn-sm { min-height: 34px; }
.btn-primary { box-shadow: 0 10px 26px rgba(166,25,46,.42) !important; border: 1px solid rgba(255,255,255,.14) !important; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%);
  transform: translateX(-130%); animation: cx-sheen 4.2s ease-in-out infinite;
}
@keyframes cx-sheen { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
.btn-secondary, .btn-navy { background: rgba(30,45,74,.55) !important; border: 1px solid var(--cx-line) !important; }
.btn-secondary:hover, .btn-navy:hover { border-color: var(--cx-line-hover) !important; background: rgba(42,59,97,.7) !important; }
.input, .form-input, select.input, .search-main-input, textarea.input {
  border-radius: 12px !important; background: rgba(4,7,14,.6) !important; border: 1px solid var(--cx-line) !important;
}
.input:focus, .form-input:focus, .search-main-input:focus { border-color: rgba(56,189,248,.6) !important; box-shadow: 0 0 0 4px rgba(56,189,248,.15) !important; }
.pill { border-radius: 999px !important; }
th { background: rgba(4,7,14,.45) !important; }
tr:hover td { background: rgba(56,189,248,.06) !important; }

/* ---------- Portal de entrada (oscuro, cristal) ---------- */
.portal-container {
  background: transparent !important; color: #f8fafc !important; animation: none !important;
}
.portal-container::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,10,19,.78), rgba(6,10,19,.94)),
    url('/brand/brand_p10_img1_835x626.jpeg') center / cover no-repeat;
  opacity: .9;
}
.portal-container::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--cx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 72%);
}
.portal-isotype-img { filter: drop-shadow(0 18px 40px rgba(166,25,46,.5)) !important; animation: cx-bob 5s ease-in-out 1s infinite; }
@keyframes cx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.portal-brand-title {
  background: linear-gradient(180deg, #ffffff 30%, #94a3b8) !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important;
}
.portal-brand-subtitle { color: #f87171 !important; letter-spacing: 7px !important; }
.portal-slogan-badge { background: rgba(2,132,199,.14) !important; border: 1px solid rgba(56,189,248,.45) !important; color: #7dd3fc !important; border-radius: 999px !important; }
.portal-header p { color: #cbd5e1 !important; }
.portal-header > * { animation: cx-up .9s var(--cx-ease) both; }
.portal-header > *:nth-child(2) { animation-delay: .08s; } .portal-header > *:nth-child(3) { animation-delay: .14s; }
.portal-header > *:nth-child(4) { animation-delay: .2s; } .portal-header > *:nth-child(5) { animation-delay: .26s; }
.portal-card {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, rgba(30,45,74,.7), rgba(10,16,29,.9)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1.5px solid transparent !important; border-radius: 26px !important; color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 50px rgba(0,0,0,.5) !important;
  animation: cx-up .9s var(--cx-ease) both;
}
.portal-card:nth-child(1) { animation-delay: .3s; } .portal-card:nth-child(2) { animation-delay: .4s; } .portal-card:nth-child(3) { animation-delay: .5s; }
.portal-card.card-pibes { --hc: #34d399; background: linear-gradient(160deg, rgba(16,44,48,.94), rgba(10,16,29,.95)) !important; }
.portal-card.card-stock { --hc: #38bdf8; background: linear-gradient(160deg, rgba(14,40,66,.94), rgba(10,16,29,.95)) !important; }
.portal-card.card-comercial { --hc: #f87171; background: linear-gradient(160deg, rgba(60,18,30,.94), rgba(10,16,29,.95)) !important; }
/* borde de luz girando */
.portal-card::before {
  content: "" !important; position: absolute !important; inset: -60% !important; z-index: -2 !important; height: auto !important; width: auto !important;
  background: conic-gradient(from 0deg, transparent 0 68%, var(--hc, #38bdf8) 86%, transparent 100%) !important;
  animation: cx-spin 6s linear infinite !important; opacity: 1 !important; transform-origin: center;
}
.portal-card > * { position: relative; z-index: 1; }
.portal-card .cx-inner-bg { position: absolute !important; inset: 1.5px; border-radius: 25px; z-index: -1 !important; background: inherit; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
.portal-card-title { color: #f8fafc !important; }
.portal-card-desc { color: #cbd5e1 !important; }
.portal-card-icon { filter: drop-shadow(0 0 18px var(--hc, #38bdf8)); }
.portal-card-btn { border-radius: 14px !important; position: relative; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.portal-card-btn::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  animation: cx-sheen 3.4s ease-in-out infinite;
}
.portal-card-btn span:last-child { transition: transform .35s var(--cx-ease) !important; }
.portal-card:hover .portal-card-btn span:last-child { transform: translateX(6px); }
.portal-card .pill { background: rgba(255,255,255,.08) !important; border-color: color-mix(in srgb, var(--hc) 60%, transparent) !important; color: var(--hc) !important; }

/* ---------- Técnicos Especialistas ---------- */
.cx-tech-head {
  background: var(--cx-glass) !important; border: 1px solid var(--cx-line) !important; border-radius: 24px !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--cx-hi), var(--cx-shadow);
}
.cx-tile {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px !important; min-height: 150px;
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 22px 50px rgba(0,0,0,.45) !important;
  transition: transform .3s var(--cx-ease), box-shadow .3s !important;
}
.cx-tile::before {
  content: ""; position: absolute; width: 240px; height: 240px; right: -50px; top: -100px; border-radius: 50%;
  background: var(--orb, rgba(125,211,252,.55)); filter: blur(50px); z-index: -1; animation: cx-orb 9s ease-in-out infinite;
}
.cx-tile:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 34px 70px rgba(0,0,0,.55), 0 0 60px var(--orb, rgba(56,189,248,.35)) !important; }
.cx-tile:active { transform: scale(.985) !important; }
.cx-tile > div > div:first-child > div:first-child { transition: transform .4s var(--cx-spring) !important; }
.cx-tile:hover > div > div:first-child > div:first-child { transform: scale(1.1) rotate(-5deg); }
.cx-tile > div > div:last-child { transition: transform .35s var(--cx-ease) !important; }
.cx-tile:hover > div > div:last-child { transform: translateX(8px); }
.cx-tile-blue { --orb: rgba(125,211,252,.5); }
.cx-tile-green { --orb: rgba(110,231,183,.45); }
.cx-tile-rust { --orb: rgba(251,146,60,.42); }
.cx-tile-amber { --orb: rgba(253,224,71,.42); }
#wo-badge { animation: cx-ping 1.6s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(251,191,36,.3); }
@keyframes cx-ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes cx-orb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, 18px); } }
#pibes-clock { text-shadow: 0 0 22px rgba(56,189,248,.6); font-family: var(--font-mono); }

/* ---------- Escala: iPhone, PC grande y TV ---------- */
@media (max-width: 640px) {
  .main-content { padding: 14px 12px calc(20px + env(safe-area-inset-bottom)) !important; }
  .app-topbar { padding-left: max(12px, env(safe-area-inset-left)) !important; padding-right: max(12px, env(safe-area-inset-right)) !important; }
  .sidebar { top: 8px !important; bottom: 8px !important; left: 8px !important; width: min(300px, calc(100vw - 16px)) !important; }
  .cx-tile { min-height: 118px; border-radius: 22px !important; }
  .cx-tile div[style*="font-size:22px"] { font-size: 17px !important; }
  body::before, body::after { filter: blur(70px); }
  .dollar-ticker-sleek { display: none !important; }
  .topbar-right-dock { overflow-x: auto; scrollbar-width: none; max-width: 62vw; }
  .topbar-right-dock::-webkit-scrollbar { display: none; }
}
@media (min-width: 1920px) { .main-content { max-width: 1840px !important; } }
@media (min-width: 2400px) { body { zoom: 1.3; } }
@media (min-width: 3200px) { body { zoom: 1.75; } }

/* ---------- Menos movimiento si el equipo lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .cx-in, .portal-card, .portal-card::before, .btn-primary::after, .portal-card-btn::after,
  .cx-tile::before, #wo-badge, .portal-isotype-img, .portal-header > *, .sidebar.open .nav-links > * { animation: none !important; }
  .cx-tilt { transform: none !important; }
}
/* Equipos lentos: cristal.js agrega .cx-lite y se apagan los desenfoques pesados */
html.cx-lite body::before, html.cx-lite body::after { animation: none; }
html.cx-lite .stat-card, html.cx-lite .crm-stat-card, html.cx-lite .hero-search-box, html.cx-lite .card-box, html.cx-lite .portal-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ====================================================================
   MODO CLARO
   ==================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --bg-app: #eef2f8; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f5f8fc; --bg-input: #ffffff;
  --border: #d9e1ec; --border-color: #d9e1ec; --surface: #ffffff;
  --text-main: #0f172a; --text-muted: #475569; --text-dim: #64748b;
  --text-red: #b91c1c; --text-green: #047857; --text-blue: #0369a1; --text-yellow: #a16207;
  --cx-glass: linear-gradient(160deg, rgba(255,255,255,.88), rgba(244,247,252,.78));
  --cx-glass-strong: linear-gradient(160deg, rgba(255,255,255,.97), rgba(246,248,252,.95));
  --cx-card: linear-gradient(160deg, #ffffff, #f6f8fc);
  --cx-line: rgba(15,23,42,.1); --cx-line-hover: rgba(2,132,199,.4);
  --cx-hi: inset 0 1px 0 rgba(255,255,255,.9);
  --cx-shadow: 0 14px 34px rgba(15,23,42,.08); --cx-shadow-hover: 0 24px 50px rgba(15,23,42,.14);
  --cx-spot: rgba(2,132,199,.08);
  --cx-bg: #eef2f8;
  --cx-blob-1: rgba(147,197,253,.55); --cx-blob-2: rgba(252,165,165,.35); --cx-blob-3: rgba(125,211,252,.35);
  --cx-grid: rgba(15,23,42,.05);
  --cx-topbar: rgba(255,255,255,.72);
  --cx-num-grad: linear-gradient(180deg, #0f172a 40%, #334155);
}
html[data-theme="light"] body { color: #0f172a; }
html[data-theme="light"] .brand-logo-text { color: #1d2946 !important; }
html[data-theme="light"] .btn-toggle-menu, html[data-theme="light"] .topbar-icon-btn { background: rgba(255,255,255,.75) !important; color: #334155 !important; border: 1px solid var(--cx-line) !important; }
html[data-theme="light"] .dollar-ticker-sleek { background: rgba(255,255,255,.8) !important; }
html[data-theme="light"] .dollar-ticker-sleek .d-of { color: #047857 !important; }
html[data-theme="light"] .dollar-ticker-sleek .d-bl { color: #1d4ed8 !important; }
html[data-theme="light"] .topbar-branch-selector { background: rgba(255,255,255,.8) !important; color: #0369a1 !important; }
html[data-theme="light"] .sidebar { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,245,251,.92)) !important; box-shadow: 0 30px 80px rgba(15,23,42,.18) !important; }
html[data-theme="light"] .sidebar .modal-close { color: #334155 !important; }
html[data-theme="light"] .nav-btn { color: #334155 !important; }
html[data-theme="light"] .nav-btn:hover { background: rgba(2,132,199,.08) !important; color: #0f172a !important; }
html[data-theme="light"] .nav-btn.active { color: #fff !important; background: linear-gradient(100deg, #A6192E, #1d2946) !important; }
html[data-theme="light"] .nav-btn.cyber-btn { color: #0f172a !important; }
html[data-theme="light"] .sidebar-backdrop { background: rgba(15,23,42,.25) !important; }
html[data-theme="light"] .stat-val, html[data-theme="light"] .stat-value { color: #0f172a; text-shadow: none; }
html[data-theme="light"] .btn-secondary, html[data-theme="light"] .btn-navy { background: rgba(255,255,255,.85) !important; color: #0f172a !important; }
html[data-theme="light"] .btn-navy { background: #1d2946 !important; color: #fff !important; }
html[data-theme="light"] .input, html[data-theme="light"] .form-input, html[data-theme="light"] .search-main-input,
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #fff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
html[data-theme="light"] th { background: #f1f5f9 !important; color: #475569 !important; }
html[data-theme="light"] td { border-bottom-color: #eef2f7 !important; }
html[data-theme="light"] tr:hover td { background: rgba(2,132,199,.05) !important; }
html[data-theme="light"] .pill-success { color: #047857; background: rgba(16,185,129,.14); }
html[data-theme="light"] .pill-danger { color: #b91c1c; background: rgba(239,68,68,.12); }
html[data-theme="light"] .pill-warning { color: #a16207; background: rgba(245,158,11,.16); }
html[data-theme="light"] .pill-info { color: #0369a1; background: rgba(2,132,199,.12); }
html[data-theme="light"] .modal-overlay { background: rgba(15,23,42,.35) !important; }
html[data-theme="light"] #topbar-user-menu { box-shadow: 0 24px 60px rgba(15,23,42,.2) !important; }
html[data-theme="light"] #topbar-user-menu div[style*="color:#fff"] { color: #0f172a !important; }
html[data-theme="light"] #topbar-user-menu .btn[style*="color:#cbd5e1"] { color: #334155 !important; }
html[data-theme="light"] #topbar-user-menu .btn { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="light"] #topbar-user-menu .btn:hover { background: rgba(2,132,199,.08) !important; }
html[data-theme="light"] .cx-theme-switch { background: #eef2f8; }
html[data-theme="light"] .cx-theme-label { color: #475569; }
html[data-theme="light"] footer { color: #64748b !important; border-top-color: rgba(15,23,42,.06) !important; }
html[data-theme="light"] .portal-container { color: #0f172a !important; }
html[data-theme="light"] .portal-container::before { background: linear-gradient(180deg, rgba(240,246,255,.86), rgba(238,242,248,.96)), url('/brand/brand_p10_img1_835x626.jpeg') center / cover no-repeat; }
html[data-theme="light"] .portal-brand-title { background: linear-gradient(180deg, #1d2946 40%, #475569) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html[data-theme="light"] .portal-header p { color: #334155 !important; }
html[data-theme="light"] .portal-slogan-badge { color: #0369a1 !important; }
html[data-theme="light"] .portal-card { background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(244,247,252,.94)) !important; color: #0f172a !important; box-shadow: 0 22px 50px rgba(15,23,42,.12) !important; }
html[data-theme="light"] .portal-card-title { color: #0f172a !important; }
html[data-theme="light"] .portal-card-desc { color: #475569 !important; }
html[data-theme="light"] .portal-card .pill { background: rgba(15,23,42,.04) !important; filter: brightness(.75); }

/* Colores escritos a mano en las pantallas (fondos oscuros fijos) → versión clara */
html[data-theme="light"] [style*="background:#0f172a"], html[data-theme="light"] [style*="background: #0f172a"],
html[data-theme="light"] [style*="background:#1e293b"], html[data-theme="light"] [style*="background: #1e293b"],
html[data-theme="light"] [style*="background:#020617"], html[data-theme="light"] [style*="background:#070d18"],
html[data-theme="light"] [style*="background:#0b1220"], html[data-theme="light"] [style*="background:#070d1a"],
html[data-theme="light"] [style*="background:#172033"], html[data-theme="light"] [style*="background:#070f1e"],
html[data-theme="light"] [style*="background:#060b14"], html[data-theme="light"] [style*="background:#0b1528"],
html[data-theme="light"] [style*="background:#060a12"], html[data-theme="light"] [style*="background:#0d1b2a"],
html[data-theme="light"] [style*="background:#0b1120"], html[data-theme="light"] [style*="background:#091222"],
html[data-theme="light"] [style*="background:#090e1c"], html[data-theme="light"] [style*="background:#0d1527"],
html[data-theme="light"] [style*="background-color:#0f172a"], html[data-theme="light"] [style*="background:#334155"],
html[data-theme="light"] [style*="background:rgba(15,23,42"], html[data-theme="light"] [style*="background: rgba(15,23,42"],
html[data-theme="light"] .crm-stat-card, html[data-theme="light"] .client-row-card {
  background: #ffffff !important; border-color: #dbe3ee !important;
}
html[data-theme="light"] [style*="background:#020617"], html[data-theme="light"] [style*="background:#000"] { background: #f1f5f9 !important; }
html[data-theme="light"] [style*="border:1px solid #1e293b"], html[data-theme="light"] [style*="border:1px solid #334155"],
html[data-theme="light"] [style*="border: 1px solid #1e293b"], html[data-theme="light"] [style*="border-bottom:1px solid #1e293b"] { border-color: #dbe3ee !important; }
/* textos claros escritos a mano → oscuros */
html[data-theme="light"] [style*="color:#fff"], html[data-theme="light"] [style*="color: #fff"], html[data-theme="light"] [style*="color:#f8fafc"],
html[data-theme="light"] [style*="color:#e2e8f0"], html[data-theme="light"] [style*="color:#f1f5f9"] { color: #0f172a !important; }
html[data-theme="light"] [style*="color:#cbd5e1"], html[data-theme="light"] [style*="color: #cbd5e1"] { color: #334155 !important; }
html[data-theme="light"] [style*="color:#94a3b8"], html[data-theme="light"] [style*="color: #94a3b8"] { color: #475569 !important; }
html[data-theme="light"] [style*="color:#38bdf8"], html[data-theme="light"] [style*="color: #38bdf8"], html[data-theme="light"] [style*="color:#7dd3fc"] { color: #0369a1 !important; }
html[data-theme="light"] [style*="color:#fbbf24"], html[data-theme="light"] [style*="color: #fbbf24"], html[data-theme="light"] [style*="color:#fde68a"] { color: #a16207 !important; }
html[data-theme="light"] [style*="color:#34d399"], html[data-theme="light"] [style*="color: #34d399"], html[data-theme="light"] [style*="color:#4ade80"] { color: #047857 !important; }
html[data-theme="light"] [style*="color:#f87171"], html[data-theme="light"] [style*="color: #f87171"], html[data-theme="light"] [style*="color:#fca5a5"] { color: #b91c1c !important; }
html[data-theme="light"] [style*="color:#a78bfa"], html[data-theme="light"] [style*="color:#c4b5fd"], html[data-theme="light"] [style*="color:#a855f7"], html[data-theme="light"] [style*="color:#c084fc"] { color: #6d28d9 !important; }
/* resto de textos claros (generado a partir de los colores usados en las pantallas) */
html[data-theme="light"] [style*="color:#f59e0b"], html[data-theme="light"] [style*="color: #f59e0b"] { color: #a26603 !important; }
html[data-theme="light"] [style*="color:#10b981"], html[data-theme="light"] [style*="color: #10b981"] { color: #08845b !important; }
html[data-theme="light"] [style*="color:#22c55e"], html[data-theme="light"] [style*="color: #22c55e"] { color: #13823c !important; }
html[data-theme="light"] [style*="color:#00ff88"], html[data-theme="light"] [style*="color: #00ff88"], html[data-theme="light"] [style*="color:#0f8"] { color: #008547 !important; }
html[data-theme="light"] [style*="color:#93c5fd"], html[data-theme="light"] [style*="color: #93c5fd"] { color: #0070ed !important; }
html[data-theme="light"] [style*="color:#86efac"], html[data-theme="light"] [style*="color: #86efac"] { color: #0f863a !important; }
html[data-theme="light"] [style*="color:#f472b6"], html[data-theme="light"] [style*="color: #f472b6"] { color: #e00c7b !important; }
html[data-theme="light"] [style*="color:#fecaca"], html[data-theme="light"] [style*="color: #fecaca"] { color: #e80000 !important; }
html[data-theme="light"] [style*="color:#00f0ff"], html[data-theme="light"] [style*="color: #00f0ff"] { color: #007d85 !important; }
html[data-theme="light"] [style*="color:#facc15"], html[data-theme="light"] [style*="color: #facc15"] { color: #8a6f00 !important; }
html[data-theme="light"] [style*="color:#fda4af"], html[data-theme="light"] [style*="color: #fda4af"] { color: #e9001d !important; }
html[data-theme="light"] [style*="color:#fcd34d"], html[data-theme="light"] [style*="color: #fcd34d"] { color: #916f00 !important; }
html[data-theme="light"] [style*="color:#ddd6fe"], html[data-theme="light"] [style*="color: #ddd6fe"] { color: #6f50ff !important; }
html[data-theme="light"] [style*="color:#a7f3d0"], html[data-theme="light"] [style*="color: #a7f3d0"] { color: #0f824d !important; }
html[data-theme="light"] [style*="color:#25d366"], html[data-theme="light"] [style*="color: #25d366"] { color: #137f3b !important; }
html[data-theme="light"] [style*="color:#6ee7b7"], html[data-theme="light"] [style*="color: #6ee7b7"] { color: #128155 !important; }
html[data-theme="light"] [style*="color:#99f6e4"], html[data-theme="light"] [style*="color: #99f6e4"] { color: #087e67 !important; }
html[data-theme="light"] [style*="color:#2dd4bf"], html[data-theme="light"] [style*="color: #2dd4bf"] { color: #188376 !important; }
html[data-theme="light"] [style*="color:#e0f2fe"], html[data-theme="light"] [style*="color: #e0f2fe"] { color: #0273bf !important; }
html[data-theme="light"] [style*="color:#eab308"], html[data-theme="light"] [style*="color: #eab308"] { color: #8b6901 !important; }
html[data-theme="light"] [style*="color:#fef08a"], html[data-theme="light"] [style*="color: #fef08a"] { color: #7f6f00 !important; }
html[data-theme="light"] [style*="color:#bfdbfe"], html[data-theme="light"] [style*="color: #bfdbfe"] { color: #006bf1 !important; }
html[data-theme="light"] [style*="color:#d1fae5"], html[data-theme="light"] [style*="color: #d1fae5"] { color: #0b8446 !important; }
html[data-theme="light"] [style*="color:#fb923c"], html[data-theme="light"] [style*="color: #fb923c"] { color: #bd5500 !important; }
/* …salvo dentro de botones y fichas de color (siguen en blanco) */
html[data-theme="light"] .cx-tile, html[data-theme="light"] .cx-tile *,
html[data-theme="light"] [style*="linear-gradient(135deg, #0"] [style*="color"], html[data-theme="light"] [style*="linear-gradient(135deg, #f"] [style*="color"],
html[data-theme="light"] [style*="linear-gradient(135deg, #7"] [style*="color"], html[data-theme="light"] [style*="linear-gradient(135deg, #d"] [style*="color"],
html[data-theme="light"] [style*="background:#0284c7"], html[data-theme="light"] [style*="background:#0284c7"] *,
html[data-theme="light"] [style*="background:#059669"], html[data-theme="light"] [style*="background:#059669"] *,
html[data-theme="light"] [style*="background:#10b981"], html[data-theme="light"] [style*="background:#10b981"] *,
html[data-theme="light"] [style*="background:#dc2626"], html[data-theme="light"] [style*="background:#dc2626"] *,
html[data-theme="light"] [style*="background:#a6192e"], html[data-theme="light"] [style*="background:#A6192E"], html[data-theme="light"] [style*="background:#A6192E"] *,
html[data-theme="light"] [style*="background:#7c3aed"], html[data-theme="light"] [style*="background:#ef4444"],
html[data-theme="light"] [style*="background:#f59e0b"], html[data-theme="light"] [style*="background:#ca8a04"], html[data-theme="light"] [style*="background:#0ea5e9"],
html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-primary *, html[data-theme="light"] .btn-danger:not([style*="transparent"]),
html[data-theme="light"] .portal-card-btn, html[data-theme="light"] .portal-card-btn *,
html[data-theme="light"] .user-card, html[data-theme="light"] .user-card *, html[data-theme="light"] .nav-btn.active, html[data-theme="light"] .nav-btn.active * {
  color: #fff !important;
}
html[data-theme="light"] .cx-tech-head [style*="color"] { color: inherit; }
html[data-theme="light"] .cx-tech-head h1 { color: #0f172a !important; }
html[data-theme="light"] .cx-tech-head [style*="background:#020617"] #pibes-clock { color: #0369a1 !important; text-shadow: none; }
html[data-theme="light"] .cx-tech-head .btn-navy, html[data-theme="light"] .cx-tech-head .btn-navy * { color: #fff !important; }
html[data-theme="light"] .cx-tech-head .btn-navy [style*="color:#38bdf8"] { color: #bae6fd !important; }

/* Clientes 360 en modo claro */
html[data-theme="light"] .c360-box, html[data-theme="light"] .c360-row { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a; }
html[data-theme="light"] .c360-f { color: #334155 !important; border-color: #cbd5e1 !important; background: #fff !important; }
html[data-theme="light"] .c360-f.on { color: #fff !important; background: #b91c1c !important; border-color: #b91c1c !important; }
html[data-theme="light"] .c360-k { color: #475569 !important; }
html[data-theme="light"] [style*="color:#64748b"], html[data-theme="light"] [style*="color: #64748b"] { color: #475569 !important; }