/*!
 * Cleored · Tema «Quantum» (v2.3): vidrio, neón y la ciudad de noche
 * Copyright (c) 2026 Cleopatra. Todos los derechos reservados.
 *
 * Se carga después de los estilos de cada página y solo cambia variables y apariencia; la estructura
 * de las pantallas es la misma. Oscuro por defecto (como el diseño aprobado); el botón de tema pasa a claro.
 * Lo usan el portal (index.html), la Bodega 3PL y los módulos que lo enlacen.
 */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #050A17; --surface: rgba(12, 24, 46, .72); --surface-2: rgba(4, 10, 24, .62); --line: rgba(56, 189, 248, .22); --ink: #E6F1FF; --muted: #8FA6C8;
  --brand: #22D3EE; --accent: #38BDF8; --gold: #E2B65A; --gold-soft: rgba(226, 182, 90, .14);
  --ok: #6EE7B7; --ok-soft: rgba(16, 185, 129, .14); --warn: #FCD34D; --warn-soft: rgba(245, 158, 11, .14); --bad: #FDA4AF; --bad-soft: rgba(244, 63, 94, .15);
  --s1: #22D3EE; --s2: #FB923C; --grid: rgba(56, 189, 248, .12); --shadow: 0 0 0 transparent;
  --glass: linear-gradient(160deg, rgba(17, 34, 62, .74), rgba(7, 15, 32, .82));
  --glass-plano: rgba(9, 19, 38, .72);
  --borde: rgba(56, 189, 248, .28); --borde-f: rgba(56, 189, 248, .6);
  --neon: #22D3EE; --neon2: #A78BFA; --neon3: #F472B6;
  --input: rgba(3, 8, 20, .66); --th: #7DD3FC;
  --sombra-panel: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px -30px rgba(0, 0, 0, .9), 0 0 32px -18px rgba(34, 211, 238, .75);
  --fondo: radial-gradient(1100px 620px at 8% -12%, rgba(34, 211, 238, .17), transparent 60%), radial-gradient(900px 620px at 100% -5%, rgba(167, 139, 250, .2), transparent 60%), radial-gradient(900px 500px at 50% 115%, rgba(56, 189, 248, .14), transparent 60%), linear-gradient(180deg, #050A17 0%, #081329 55%, #050A17 100%);
  --estrellas: .7; --ciudad: .75;
  --top-bg: linear-gradient(180deg, rgba(4, 9, 21, .94), rgba(5, 11, 25, .78));
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EAF1FB; --surface: rgba(255, 255, 255, .82); --surface-2: rgba(241, 247, 255, .9); --line: rgba(14, 116, 144, .18); --ink: #0B1630; --muted: #4B5D7A;
  --brand: #0E7490; --accent: #2563EB; --gold: #A16C12; --gold-soft: #FBF1DC;
  --ok: #047857; --ok-soft: #D7F5E7; --warn: #92400E; --warn-soft: #FEF3C7; --bad: #BE123C; --bad-soft: #FFE4E8;
  --s1: #0891B2; --s2: #EA580C; --grid: rgba(14, 116, 144, .12); --shadow: 0 0 0 transparent;
  --glass: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(240, 247, 255, .8));
  --glass-plano: rgba(255, 255, 255, .8);
  --borde: rgba(14, 116, 144, .2); --borde-f: rgba(14, 116, 144, .5);
  --neon: #0891B2; --neon2: #7C3AED; --neon3: #DB2777;
  --input: rgba(255, 255, 255, .95); --th: #0E7490;
  --sombra-panel: 0 18px 40px -26px rgba(15, 40, 80, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
  --fondo: radial-gradient(1000px 600px at 5% -10%, rgba(34, 211, 238, .22), transparent 60%), radial-gradient(900px 600px at 100% 0%, rgba(167, 139, 250, .2), transparent 60%), linear-gradient(180deg, #F2F7FF, #E6EEFA);
  --estrellas: 0; --ciudad: .12;
  --top-bg: rgba(255, 255, 255, .82);
}

/* ---------- fondo: degradados, estrellas y ciudad ---------- */
html { background: var(--fondo) fixed, var(--bg); }
body { background: transparent; min-height: 100vh; position: relative; }   /* el fondo va en html para que las estrellas y la ciudad (z-index -1) se vean */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--estrellas);
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent 60%), radial-gradient(1px 1px at 120px 80px, #9FE8FF, transparent 60%), radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent 60%), radial-gradient(1px 1px at 300px 40px, #C4B5FD, transparent 60%), radial-gradient(1px 1px at 380px 210px, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 60px 250px, #9FE8FF, transparent 60%);
  background-size: 420px 300px; animation: cleoTitila 9s ease-in-out infinite alternate; }
body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 38vh; z-index: -1; pointer-events: none; opacity: var(--ciudad);
  background: url('../assets/ciudad.svg') bottom center / auto 100% repeat-x; -webkit-mask: linear-gradient(transparent, #000 45%); mask: linear-gradient(transparent, #000 45%); }
@keyframes cleoTitila { to { opacity: calc(var(--estrellas) * .55); } }

/* ---------- tipografía ---------- */
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); }
.panel h2, .panel h3, h1, h2 { font-family: 'Exo 2', 'Outfit', system-ui, sans-serif; letter-spacing: .01em; }
:root:not([data-theme="light"]) .panel h2 { text-shadow: 0 0 18px rgba(34, 211, 238, .35); }
a { color: var(--neon); }

/* ---------- encabezado ---------- */
header.top, .top { background: var(--top-bg) !important; backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--borde) !important; box-shadow: 0 12px 34px -22px rgba(34, 211, 238, .8); }
.marca img, header.top .logo { width: auto !important; height: 50px !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .35)); }
.marca b, header.top h1 { font-family: 'Exo 2', 'Outfit', sans-serif; font-weight: 800; background: linear-gradient(180deg, #FFF1C9, #E2B65A 55%, #B9862F); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .02em; }
:root[data-theme="light"] .marca b, :root[data-theme="light"] header.top h1 { background: linear-gradient(180deg, #B9862F, #7A5313); -webkit-background-clip: text; background-clip: text; }
.marca small { color: var(--muted) !important; }
#estadoNube, #usuario .pill { border: 1px solid var(--borde-f); background: rgba(34, 211, 238, .08); color: var(--th); }

/* ---------- pestañas de neón ---------- */
nav.tabs { gap: 8px !important; padding-top: 4px !important; padding-bottom: 12px !important; background: transparent !important; border: 0 !important; }
nav.tabs a { border: 1px solid var(--borde) !important; background: var(--glass-plano) !important; color: var(--ink) !important; border-radius: 12px !important; padding: 8px 14px !important; box-shadow: inset 0 0 14px -8px var(--neon), 0 0 12px -9px var(--neon); transition: .15s; }
nav.tabs a .ms { color: var(--neon); }
nav.tabs a:hover { border-color: var(--borde-f) !important; box-shadow: inset 0 0 16px -8px var(--neon), 0 0 16px -6px var(--neon); }
nav.tabs a[aria-current="page"] { background: linear-gradient(135deg, color-mix(in srgb, var(--neon2) 38%, transparent), color-mix(in srgb, var(--neon) 26%, transparent)) !important; border-color: var(--neon2) !important; color: #fff !important; box-shadow: 0 0 18px -3px color-mix(in srgb, var(--neon2) 85%, transparent), inset 0 0 14px -6px #fff; }
:root[data-theme="light"] nav.tabs a[aria-current="page"] { color: #1E1B4B !important; }
nav.tabs a[aria-current="page"] .ms { color: #fff; }
:root[data-theme="light"] nav.tabs a[aria-current="page"] .ms { color: var(--neon2); }

/* ---------- paneles de vidrio ---------- */
.panel, .tarjeta, .kpi, dialog { background: var(--glass) !important; border: 1px solid var(--borde) !important; box-shadow: var(--sombra-panel) !important; backdrop-filter: blur(14px) saturate(1.2); color: var(--ink); }
.panel { border-radius: 18px !important; position: relative; }
.panel::before { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon), var(--neon2), transparent); opacity: .9; pointer-events: none; }
.tarjeta { border-radius: 16px !important; }

/* KPI con color propio (--k) e ícono luminoso */
.kpi { position: relative; overflow: hidden; border-radius: 16px !important; --k: var(--neon); border-color: color-mix(in srgb, var(--k) 55%, transparent) !important; box-shadow: 0 0 26px -14px var(--k), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--k) 16%, rgba(8, 16, 34, .8)), rgba(6, 12, 26, .86)) !important; }
:root[data-theme="light"] .kpi { background: linear-gradient(160deg, color-mix(in srgb, var(--k) 12%, #fff), #fff) !important; }
.kpi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--k), transparent); opacity: .8; }
.kpi .l { color: color-mix(in srgb, var(--k) 70%, var(--ink)) !important; }
.kpi .v { color: var(--ink); }
:root:not([data-theme="light"]) .kpi .v { text-shadow: 0 0 16px color-mix(in srgb, var(--k) 70%, transparent); }
.kpi-ic { position: absolute; right: 12px; top: 10px; font-size: 34px !important; width: auto !important; color: var(--k); filter: drop-shadow(0 0 10px var(--k)); opacity: .9; }
.kpi .l, .kpi .v, .kpi .d { position: relative; padding-right: 42px; }

/* ---------- botones ---------- */
.btn, .b { border: 1px solid var(--borde-f) !important; background: var(--glass-plano) !important; color: var(--ink) !important; box-shadow: inset 0 0 12px -8px var(--neon); transition: box-shadow .15s, border-color .15s, transform .1s; }
.btn:hover, .b:hover { box-shadow: 0 0 16px -5px var(--neon), inset 0 0 12px -6px var(--neon); border-color: var(--neon) !important; }
.btn:active { transform: translateY(1px); }
.btn.pri, .b.pri { background: linear-gradient(135deg, #0EA5E9, #6366F1) !important; border-color: rgba(125, 211, 252, .75) !important; color: #fff !important; box-shadow: 0 0 20px -6px #22D3EE; }
.btn.oro { background: linear-gradient(135deg, #9C6F1E, #E2B65A) !important; border-color: rgba(253, 230, 138, .7) !important; color: #1B1203 !important; box-shadow: 0 0 20px -6px #E2B65A; }
.btn.ok { background: linear-gradient(135deg, #059669, #10B981) !important; color: #fff !important; }
.btn.peligro, .btn.mal { background: rgba(244, 63, 94, .14) !important; border-color: rgba(244, 63, 94, .55) !important; color: var(--bad) !important; }
.btn.neon-cian { border-color: #22D3EE !important; color: #CFFAFE !important; box-shadow: 0 0 18px -6px #22D3EE, inset 0 0 14px -6px #22D3EE; }
.btn.neon-rosa { border-color: #F472B6 !important; color: #FCE7F3 !important; box-shadow: 0 0 18px -6px #F472B6, inset 0 0 14px -6px #F59E0B; }
:root[data-theme="light"] .btn.neon-cian { color: #0E7490 !important; } :root[data-theme="light"] .btn.neon-rosa { color: #9D174D !important; }

/* ---------- formularios ---------- */
.sel, .input, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]) { background: var(--input) !important; border: 1px solid var(--borde) !important; color: var(--ink) !important; }
.input:focus, select:focus, textarea:focus, input:focus { outline: none !important; border-color: var(--neon) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 22%, transparent) !important; }
.form label, label.c { color: var(--muted) !important; }
.drop { border: 2px dashed var(--borde-f) !important; background: rgba(34, 211, 238, .05) !important; }
.drop .ms { color: var(--neon) !important; filter: drop-shadow(0 0 10px var(--neon)); }

/* ---------- tablas ---------- */
.tbl { border: 1px solid var(--borde) !important; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: 14px !important; }
th { background: rgba(34, 211, 238, .06) !important; color: var(--th) !important; letter-spacing: .06em !important; border-bottom: 1px solid var(--borde) !important; }
td { border-bottom: 1px solid color-mix(in srgb, var(--borde) 55%, transparent) !important; }
tbody tr:hover td { background: rgba(34, 211, 238, .045); }
td.vacio { color: var(--muted) !important; }

/* ---------- etiquetas y avisos ---------- */
.pill { border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.p-info { background: rgba(56, 189, 248, .1) !important; color: var(--th) !important; }
.p-ok { background: var(--ok-soft) !important; color: var(--ok) !important; }
.p-bad { background: var(--bad-soft) !important; color: var(--bad) !important; }
.p-warn { background: var(--warn-soft) !important; color: var(--warn) !important; }
.p-oro { background: var(--gold-soft) !important; color: var(--gold) !important; }
.aviso { background: rgba(56, 189, 248, .07) !important; border: 1px solid var(--borde) !important; color: var(--ink) !important; }
.aviso.ok { background: var(--ok-soft) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent) !important; color: var(--ok) !important; }
.aviso.bad { background: var(--bad-soft) !important; border-color: color-mix(in srgb, var(--bad) 45%, transparent) !important; color: var(--bad) !important; }
.aviso.warn { background: var(--warn-soft) !important; border-color: color-mix(in srgb, var(--warn) 50%, transparent) !important; color: var(--warn) !important; box-shadow: 0 0 18px -10px var(--warn); }
.aviso.info { background: rgba(56, 189, 248, .1) !important; color: var(--th) !important; }
.muted { color: var(--muted) !important; }
.mono { color: color-mix(in srgb, var(--th) 80%, var(--ink)); }

/* ---------- diálogos, avisos flotantes y pie ---------- */
dialog { border-radius: 20px !important; border-color: var(--borde-f) !important; }
dialog::backdrop { background: rgba(2, 6, 16, .7) !important; backdrop-filter: blur(4px); }
dialog .cab, dialog .pie { border-color: var(--borde) !important; }
.toast { background: rgba(6, 14, 30, .92) !important; border: 1px solid var(--borde-f); box-shadow: 0 0 24px -8px var(--neon) !important; color: #E6F1FF !important; backdrop-filter: blur(10px); }
footer { margin-bottom: 24px !important; border: 1px solid var(--borde); border-radius: 14px; background: var(--glass-plano); backdrop-filter: blur(10px); padding: 10px 16px !important; }
footer b { color: var(--gold); }

/* ====================================================== INICIO (portada) */
.hero { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 10px 22px; align-items: end; position: relative; border-radius: 26px; padding: 22px 22px 8px; overflow: hidden;
  background: linear-gradient(160deg, rgba(14, 30, 58, .62), rgba(6, 12, 28, .74)); border: 1px solid var(--borde); box-shadow: var(--sombra-panel); backdrop-filter: blur(12px); }
:root[data-theme="light"] .hero { background: linear-gradient(160deg, rgba(10, 22, 46, .92), rgba(16, 32, 64, .9)); color: #E6F1FF; --ink: #E6F1FF; --muted: #A9BCD9; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 380px at 14% 60%, rgba(34, 211, 238, .18), transparent 70%), radial-gradient(500px 300px at 90% 0%, rgba(167, 139, 250, .16), transparent 70%); }
.hero-cleo { position: relative; text-align: center; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-cleo img { width: 100%; max-width: 300px; height: auto; margin: 0 auto -6px; filter: drop-shadow(0 0 26px rgba(34, 211, 238, .35)); animation: cleoFlota 7s ease-in-out infinite; }
.hero-cleo .cap { font-family: 'Exo 2', sans-serif; font-weight: 700; color: #E6F1FF; font-size: 1rem; margin-bottom: 10px; }
.hero-cleo .cap small { display: block; font-weight: 500; color: #9FB4D4; font-size: .8rem; }
@keyframes cleoFlota { 50% { transform: translateY(-8px); } }
.hero-main { position: relative; display: flex; flex-direction: column; gap: 18px; padding-bottom: 14px; min-width: 0; }
.hero-tit h1 { margin: 0; font-family: 'Orbitron', 'Exo 2', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: .06em; line-height: 1; background: linear-gradient(180deg, #FFFFFF, #BDEBFF 60%, #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(34, 211, 238, .45)); }
.hero-tit h1 span { font-family: 'Exo 2', sans-serif; font-weight: 600; letter-spacing: .01em; font-size: .52em; background: none; -webkit-text-fill-color: #DCEBFF; color: #DCEBFF; }
.hero-tit p { margin: 8px 0 0; color: #A9BCD9; font-size: 1.02rem; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.neon-card { position: relative; border-radius: 20px; padding: 18px; background: linear-gradient(160deg, rgba(18, 36, 66, .78), rgba(8, 16, 34, .84)); box-shadow: 0 0 34px -16px var(--c1, #22D3EE), inset 0 1px 0 rgba(255, 255, 255, .06); color: #E6F1FF; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.neon-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--c1, #22D3EE), var(--c2, #A78BFA)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.neon-card h3 { margin: 0; font-family: 'Exo 2', sans-serif; font-size: 1.15rem; color: #F1F7FF; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.neon-card .muted { color: #A9BCD9 !important; }
.flechas { display: inline-flex; gap: 4px; }
.flechas button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(147, 169, 201, .35); background: rgba(255, 255, 255, .05); color: #DCEBFF; cursor: pointer; display: grid; place-items: center; }
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mod { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 14px; color: #DCEBFF; text-decoration: none; font-size: .86rem; font-weight: 600; border: 1px solid transparent; }
.mod:hover { border-color: rgba(34, 211, 238, .3); background: rgba(34, 211, 238, .05); }
.mod .ms { font-size: 44px !important; width: auto !important; color: var(--m); filter: drop-shadow(0 0 12px var(--m)); }
.mod small { color: #93A9C9; font-weight: 500; font-size: .72rem; }
.acc { display: flex; gap: 10px; flex-wrap: wrap; }
.neon-card .btn { color: #E6F1FF !important; }
.cliente-card { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; --c1: #38BDF8; --c2: #A78BFA; }
.cliente-card .icos { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cliente-card .icos .ms { font-size: 54px !important; width: auto !important; filter: drop-shadow(0 0 12px currentColor); }
.cliente-card .caja { border: 1px solid rgba(147, 169, 201, .3); border-radius: 14px; padding: 12px 14px; background: rgba(2, 8, 20, .35); }
.btn-grande { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .55); background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: 0 0 26px -8px rgba(255, 255, 255, .6); text-decoration: none; }
.btn-grande .ms { font-size: 30px !important; width: auto !important; }
.btn-grande:hover { box-shadow: 0 0 30px -4px rgba(34, 211, 238, .9); border-color: #22D3EE; }
.asis-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #CFFAFE; border: 1px solid rgba(45, 212, 191, .45); background: rgba(45, 212, 191, .1); border-radius: 999px; padding: 3px 10px; align-self: flex-start; }

/* ====================================================== PANEL, REPORTAR, BANDEJA, CLIENTES */
.sug-cab { display: flex; align-items: center; gap: 10px; }
.sug-ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--neon); box-shadow: 0 0 16px -2px var(--neon); }
.rep-caja { position: relative; }
#btnMic { width: 76px !important; height: 76px !important; background: radial-gradient(circle at 35% 30%, #1B3355, #050B18 72%) !important; border: 2px solid var(--neon) !important; color: #CFFAFE !important; box-shadow: 0 0 0 5px rgba(34, 211, 238, .08), 0 0 26px -2px var(--neon) !important; }
#btnMic .ms { font-size: 34px !important; width: auto !important; }
#btnMic.peligro { border-color: var(--neon3) !important; box-shadow: 0 0 0 6px rgba(244, 114, 182, .12), 0 0 34px 0 var(--neon3) !important; animation: cleoLatido 1s ease-in-out infinite; }
@keyframes cleoLatido { 50% { transform: scale(1.06); } }
#repTexto { min-height: 120px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2322D3EE'/%3E%3Cstop offset='.5' stop-color='%23A78BFA'/%3E%3Cstop offset='1' stop-color='%2322D3EE' stop-opacity='.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 30 Q15 5 30 30 T60 30 T90 30 Q105 8 120 30 T150 30 Q165 0 180 30 T210 30 Q225 12 240 30 T270 30 Q285 20 300 30 T360 30 Q375 24 390 30 T450 30 T510 30 T600 30' fill='none' stroke='url(%23a)' stroke-width='2'/%3E%3C/svg%3E"), linear-gradient(rgba(34, 211, 238, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .05) 1px, transparent 1px) !important;
  background-repeat: no-repeat, repeat, repeat !important; background-size: 100% 46px, 22px 22px, 22px 22px !important; background-position: left 58%, 0 0, 0 0 !important; }
.flujo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; background: rgba(34, 211, 238, .04); margin: 8px 0 12px; font-size: .85rem; }
.flujo .src { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--borde-f); color: var(--th); }
.flujo .linea { flex: 1; min-width: 30px; height: 2px; background: linear-gradient(90deg, var(--neon), var(--neon2)); box-shadow: 0 0 10px var(--neon); border-radius: 2px; }
.flujo .db { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--neon2); color: #fff; background: color-mix(in srgb, var(--neon2) 25%, transparent); box-shadow: 0 0 16px -4px var(--neon2); }
:root[data-theme="light"] .flujo .db { color: #3B0764; }
.emp-ava { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-family: 'Exo 2', sans-serif; font-weight: 800; color: #E6F1FF; background: radial-gradient(circle at 35% 30%, #284a7a, #0A1426); border: 1.5px solid var(--neon); box-shadow: 0 0 14px -4px var(--neon); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-cleo { order: 2; } .hero-cleo img { max-width: 200px; }
  .hero-grid { grid-template-columns: 1fr; }
  .cliente-card { grid-template-columns: 1fr; text-align: left; }
  .cliente-card .icos { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { body::before, .hero-cleo img, #btnMic.peligro { animation: none !important; } }
@media print { body::before, body::after { display: none !important; } .panel, .kpi, .tarjeta { background: #fff !important; color: #000 !important; box-shadow: none !important; } }

/* ---------- v2.3 · consola de empresas (Clientes) ---------- */
.btn-xl { padding: 14px 26px; font-size: 1.02rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 0 22px rgba(34, 211, 238, .45); }
.tabla-empresas td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.tabla-empresas .emp-ava { width: 52px; height: 52px; font-size: 1rem; }