/* =====================================================================
   EMBIO · interfaz del CRM: modo claro y oscuro, movimiento y acabados.
   Se carga solo con BRAND_TEMA=embio, después de tema.css y oscuro.css.
   Guía: laboratorio de diseño EMBIO (temas Clínico y Tecnología) y el
   sistema visual v3. No mueve nada de lugar ni cambia lo que hace cada
   pantalla: solo cómo se ve y cómo responde.
   ===================================================================== */

/* ------------------------------------------------------------ tokens */
:root {
  --e-azul: #003D79; --e-azul-2: #0B4F96; --e-azul-l: #8DBDF0;
  --e-verde: #208D71; --e-verde-t: #18735C; --e-verde-l: #3CC29A;
  --e-noche: #061A33; --e-noche-2: #0A2342; --e-noche-3: #103158;
  --e-accion: linear-gradient(100deg, #0F7F5A, #1366AE);
  --e-ease: cubic-bezier(.2,.7,.1,1); --e-snap: cubic-bezier(.7,0,.2,1); --e-back: cubic-bezier(.3,1.35,.5,1);
  /* modo claro (Clínico) */
  --e-fondo: #F2F6F9; --e-sup: #FFFFFF; --e-sup-2: #F6F9FC; --e-hundido: #EEF3F8;
  --e-tx: #12263E; --e-tx-2: #4B5A6B; --e-tit: #0B2545; --e-enlace: #1366AE;
  --e-linea: rgba(0,61,121,.12); --e-linea-2: rgba(0,61,121,.24); --e-campo: #FFFFFF; --e-campo-borde: #C3D0DF;
  --e-sombra: 0 1px 0 rgba(0,61,121,.04), 0 14px 30px -20px rgba(0,61,121,.42);
  --e-sombra-alta: 0 2px 0 rgba(0,61,121,.04), 0 24px 46px -24px rgba(0,61,121,.5);
  --e-foco: #1366AE;
  color-scheme: light;
}
:root[data-modo="oscuro"] {
  /* modo oscuro (Tecnología) */
  --e-fondo: #061A33; --e-sup: #0C2A4D; --e-sup-2: #0E2F55; --e-hundido: #09213E;
  --e-tx: #E6EFF8; --e-tx-2: #A7B9CC; --e-tit: #FFFFFF; --e-enlace: #8DBDF0;
  --e-linea: rgba(160,200,240,.14); --e-linea-2: rgba(160,200,240,.30); --e-campo: #0A2342; --e-campo-borde: #4E6A8A;
  --e-sombra: 0 0 0 1px rgba(141,189,240,.05), 0 22px 42px -26px rgba(0,0,0,.8);
  --e-sombra-alta: 0 0 0 1px rgba(141,189,240,.08), 0 30px 60px -28px rgba(0,0,0,.9);
  --e-foco: #7FD9FF;
  color-scheme: dark;
  /* Variables de la plantilla que cambian con el modo. Las demás (acentos) se quedan. */
  --text: #E6EFF8; --gray: #A7B9CC; --line: rgba(160,200,240,.14); --bg: #061A33; --card: #0C2A4D;
  --coral-soft: rgba(141,189,240,.14); --teal-soft: rgba(60,194,154,.14);
  --shadow: 0 0 0 1px rgba(141,189,240,.05), 0 22px 42px -26px rgba(0,0,0,.8);
  --shadow-hover: 0 0 0 1px rgba(141,189,240,.1), 0 30px 60px -28px rgba(0,0,0,.95);
}

/* ------------------------------------------------------------ base y transición de modo */
body[data-tema="embio"] { background: var(--e-fondo); }
:root.e-cambiando body[data-tema="embio"] * { transition: none !important; }
body[data-tema="embio"] .content { animation-duration: .35s; }
body[data-tema="embio"] :focus-visible { outline: 2px solid var(--e-foco); outline-offset: 3px; }
:root[data-modo="oscuro"] body[data-tema="embio"] { color: var(--e-tx); }
:root[data-modo="oscuro"] body[data-tema="embio"] .main {
  background: radial-gradient(1100px 640px at 88% -12%, rgba(43,140,255,.09), transparent 62%),
              radial-gradient(900px 560px at -4% 108%, rgba(60,194,154,.06), transparent 62%); }
:root[data-modo="oscuro"] body[data-tema="embio"] ::selection { background: rgba(141,189,240,.35); color: #fff; }
:root[data-modo="oscuro"] body[data-tema="embio"] ::-webkit-scrollbar-thumb { background: #23446B; border-color: var(--e-fondo); }
:root[data-modo="oscuro"] body[data-tema="embio"] ::-webkit-scrollbar-thumb:hover { background: #3A6390; }

/* ------------------------------------------------------------ menú lateral */
body[data-tema="embio"] .sidebar { scrollbar-width: thin; scrollbar-color: rgba(141,189,240,.2) transparent; }
body[data-tema="embio"] .nav-item { transition: background-color .2s var(--e-ease), color .2s, border-color .2s; }
body[data-tema="embio"] .nav-item svg { transition: transform .35s var(--e-back); }
body[data-tema="embio"] .nav-item:hover svg { transform: translateX(2px) scale(1.08); }
body[data-tema="embio"] .nav-item.activo { position: relative; overflow: hidden; }
/* luz que recorre la opción activa, cada tanto */
body[data-tema="embio"] .nav-item.activo::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-110%); animation: eBrillo 5.5s var(--e-ease) 1.2s infinite; }
@keyframes eBrillo { 0%, 62% { transform: translateX(-110%); } 82%, 100% { transform: translateX(110%); } }
:root[data-modo="oscuro"] body[data-tema="embio"] .sidebar {
  background: radial-gradient(420px 260px at -10% -6%, rgba(43,184,255,.10), transparent 62%),
              linear-gradient(180deg, #04142A 0%, #020B18 100%);
  border-right-color: rgba(141,189,240,.10); }

/* ------------------------------------------------------------ barra superior */
body[data-tema="embio"] .topbar { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
:root[data-modo="oscuro"] body[data-tema="embio"] .topbar { background: rgba(6,26,51,.78); border-bottom-color: var(--e-linea); }
:root[data-modo="oscuro"] body[data-tema="embio"] .topbar h1 { color: var(--e-tit); }
:root[data-modo="oscuro"] body[data-tema="embio"] .topbar .sub { color: var(--e-tx-2); }
:root[data-modo="oscuro"] body[data-tema="embio"] .buscador input { background: rgba(255,255,255,.05); border-color: rgba(160,200,240,.22); color: var(--e-tx); }
:root[data-modo="oscuro"] body[data-tema="embio"] .buscador input::placeholder { color: #8BA0B8; }
:root[data-modo="oscuro"] body[data-tema="embio"] .buscador input:focus { background: rgba(255,255,255,.08); border-color: #7FD9FF; box-shadow: 0 0 0 3px rgba(127,217,255,.18); }
:root[data-modo="oscuro"] body[data-tema="embio"] .buscador svg { color: #8BA0B8; }
:root[data-modo="oscuro"] body[data-tema="embio"] .campanita { background: rgba(255,255,255,.05); border-color: rgba(160,200,240,.22); color: var(--e-tx); }
:root[data-modo="oscuro"] body[data-tema="embio"] .campanita:hover { border-color: #7FD9FF; color: #fff; }
:root[data-modo="oscuro"] body[data-tema="embio"] .hamb { color: var(--e-tx); }
/* La campana se mueve sola cuando hay alertas pendientes. */
body[data-tema="embio"] .campanita:has(.punto) svg { transform-origin: 50% 8%; animation: eCampana 3.6s ease-in-out infinite; }
@keyframes eCampana { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 79% { transform: rotate(-12deg); } 84% { transform: rotate(8deg); } 89% { transform: rotate(-5deg); } 94% { transform: rotate(2deg); } }
body[data-tema="embio"] .campanita .punto { box-shadow: 0 0 0 0 rgba(229,72,77,.55); animation: eLatePunto 2.4s ease-out infinite; }
@keyframes eLatePunto { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(229,72,77,0); } }

/* ------------------------------------------------------------ interruptor claro / oscuro */
.e-modo { position: relative; flex: none; width: 70px; height: 38px; padding: 4px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--e-campo-borde); background: var(--e-sup); color: var(--e-tx-2);
  display: inline-flex; align-items: center; transition: border-color .25s, background-color .25s; }
.e-modo:hover { border-color: var(--e-foco); }
.e-modo:focus-visible { outline: 2px solid var(--e-foco); outline-offset: 3px; }
.e-modo-pista { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; height: 100%; }
.e-modo-pista svg { position: relative; z-index: 1; justify-self: center; width: 16px; height: 16px; transition: color .3s, transform .5s var(--e-back); }
.e-modo-perilla { position: absolute; top: 0; left: 0; width: 50%; height: 100%; border-radius: 100px;
  background: var(--e-accion); box-shadow: 0 6px 14px -6px rgba(19,102,174,.8); transition: transform .55s var(--e-snap); }
.e-modo-perilla::after { content: ''; position: absolute; right: 5px; top: 5px; width: 4px; height: 4px; background: #9FF5D6; }
.e-modo .sol { color: #fff; }
.e-modo[aria-pressed="true"] .e-modo-perilla { transform: translateX(100%); }
.e-modo[aria-pressed="true"] .sol { color: var(--e-tx-2); transform: rotate(-90deg) scale(.85); }
.e-modo[aria-pressed="true"] .luna { color: #fff; transform: rotate(-20deg); }
:root[data-modo="oscuro"] .e-modo { background: rgba(255,255,255,.05); border-color: rgba(160,200,240,.22); }

/* Cortina de bloques al cambiar de modo (laboratorio B-11). */
.e-cortina { position: fixed; inset: 0; z-index: 99999; pointer-events: none; display: grid; }
.e-cortina i { display: block; transform: scaleY(0); }

/* ------------------------------------------------------------ superficies y controles en oscuro */
:root[data-modo="oscuro"] body[data-tema="embio"] .card,
:root[data-modo="oscuro"] body[data-tema="embio"] .mini-kpi,
:root[data-modo="oscuro"] body[data-tema="embio"] .dash-card,
:root[data-modo="oscuro"] body[data-tema="embio"] .dash-kpi {
  background: linear-gradient(165deg, #0E2F55, #0B284A); border-color: var(--e-linea); box-shadow: var(--e-sombra), inset 0 1px 0 rgba(255,255,255,.04); }
:root[data-modo="oscuro"] body[data-tema="embio"] :is(.input, select, textarea, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="month"], input[type="time"]) {
  background-color: var(--e-campo); border-color: var(--e-campo-borde); color: var(--e-tx); }
:root[data-modo="oscuro"] body[data-tema="embio"] :is(.input, input, textarea)::placeholder { color: #7F95AE; }
:root[data-modo="oscuro"] body[data-tema="embio"] :is(.input, select, textarea, input):focus { border-color: #7FD9FF; box-shadow: 0 0 0 3px rgba(127,217,255,.16); }
:root[data-modo="oscuro"] body[data-tema="embio"] select option { background: #0A2342; color: #E6EFF8; }
:root[data-modo="oscuro"] body[data-tema="embio"] .btn-suave { background: rgba(255,255,255,.04); border-color: rgba(160,200,240,.26); color: var(--e-tx); }
:root[data-modo="oscuro"] body[data-tema="embio"] .btn-suave:hover { border-color: #7FD9FF; color: #fff; }
:root[data-modo="oscuro"] body[data-tema="embio"] .btn-mini:not(.btn-teal):not(.btn-primario) { background: rgba(255,255,255,.04); border-color: rgba(160,200,240,.24); color: #C9D8E8; }
:root[data-modo="oscuro"] body[data-tema="embio"] .btn-mini:not(.btn-teal):not(.btn-primario):hover:not(:disabled) { border-color: #7FD9FF; color: #fff; background: rgba(127,217,255,.08); }
:root[data-modo="oscuro"] body[data-tema="embio"] .btn-peligro { background: rgba(255,123,123,.14); color: #FFB1B1; }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabs { background: rgba(255,255,255,.03); border-color: var(--e-linea); }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabs a { color: #B9CBE0; }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabs a.activo { color: #fff; }
:root[data-modo="oscuro"] body[data-tema="embio"] .paginacion a, :root[data-modo="oscuro"] body[data-tema="embio"] .paginacion span { background: rgba(255,255,255,.04); border-color: var(--e-linea-2); color: #C9D8E8; }
:root[data-modo="oscuro"] body[data-tema="embio"] .paginacion .activo { background: var(--e-accion); border-color: transparent; color: #fff; }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabla th { color: #9FB3CA; }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabla tbody tr { background: #0A2546; }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabla tbody tr:hover td { background: #10345E; }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabla tbody tr:hover { box-shadow: 0 10px 24px -14px rgba(0,0,0,.8); }
:root[data-modo="oscuro"] body[data-tema="embio"] .tabla tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #7FD9FF; }
:root[data-modo="oscuro"] body[data-tema="embio"] .modal-capa { background: rgba(2,10,22,.68); }
:root[data-modo="oscuro"] body[data-tema="embio"] .modal-caja { background: linear-gradient(165deg, #0F3058, #0B264A); border: 1px solid var(--e-linea-2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
:root[data-modo="oscuro"] body[data-tema="embio"] .icono-chip.ink { background: linear-gradient(135deg, #2A5DB0, #103158); }
:root[data-modo="oscuro"] body[data-tema="embio"] .mini-kpi .num { color: #fff; }
/* Estados: mismo significado, tintes que se leen sobre azul noche. */
:root[data-modo="oscuro"] body[data-tema="embio"] .chip.ok { background: rgba(61,220,151,.14); color: #8EF0C4; }
:root[data-modo="oscuro"] body[data-tema="embio"] .chip.warn { background: rgba(250,178,25,.15); color: #FFD38A; }
:root[data-modo="oscuro"] body[data-tema="embio"] .chip.bad { background: rgba(255,123,123,.15); color: #FFB8B8; }
:root[data-modo="oscuro"] body[data-tema="embio"] .chip.info { background: rgba(141,189,240,.16); color: #BFDBFA; }
:root[data-modo="oscuro"] body[data-tema="embio"] .chip.neutro { background: rgba(160,200,240,.12); color: #C9D8E8; }
:root[data-modo="oscuro"] body[data-tema="embio"] .alerta.ok { background: rgba(61,220,151,.12); color: #A7F0CF; }
:root[data-modo="oscuro"] body[data-tema="embio"] .alerta.bad { background: rgba(255,123,123,.12); color: #FFC4C4; }
/* Mapas en oscuro: los mosaicos se invierten; pines y rutas quedan con su color. */
:root[data-modo="oscuro"] body[data-tema="embio"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.55); }
:root[data-modo="oscuro"] body[data-tema="embio"] .leaflet-container { background: #0A2342; }
:root[data-modo="oscuro"] body[data-tema="embio"] .leaflet-bar a { background: #0C2A4D; color: #E6EFF8; border-color: rgba(160,200,240,.2); }
:root[data-modo="oscuro"] body[data-tema="embio"] .leaflet-popup-content-wrapper, :root[data-modo="oscuro"] body[data-tema="embio"] .leaflet-popup-tip { background: #0E2F55; color: #E6EFF8; }

/* ------------------------------------------------------------ tarjetas de cifra (todas las pantallas) */
body[data-tema="embio"] .mini-kpi { border: 1px solid var(--e-linea); box-shadow: var(--e-sombra); transition: transform .3s var(--e-ease), box-shadow .3s, border-color .3s; }
body[data-tema="embio"] .mini-kpi:hover { transform: translateY(-3px); box-shadow: var(--e-sombra-alta); border-color: var(--e-linea-2); }
body[data-tema="embio"] .mini-kpi .num, body[data-tema="embio"] .kpi-solid .val { font-variant-numeric: tabular-nums; }
body[data-tema="embio"] .mini-kpi .num { font-family: 'Sora', sans-serif; font-weight: 600; letter-spacing: -.02em; }
body[data-tema="embio"] .icono-chip { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 20px -12px rgba(6,26,51,.6); }
body[data-tema="embio"] .icono-chip::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 46%); pointer-events: none; }
body[data-tema="embio"] .kpi-solid { isolation: isolate; }
body[data-tema="embio"] .kpi-solid::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(120% 90% at 100% 0%, #000, transparent 70%); }
body[data-tema="embio"] .kpi-solid .e-ico-vivo { position: absolute; right: 16px; bottom: 14px; width: 54px; height: 54px; z-index: 1; color: rgba(255,255,255,.9); opacity: .9; }

/* ------------------------------------------------------------ encabezado de módulo: escena EMBIO */
body[data-tema="embio"] .banner-mod.e-banner { overflow: hidden; isolation: isolate; min-height: 104px; padding: 20px 28px; animation: aparecer .5s ease both;
  border: 1px solid rgba(160,210,255,.14); box-shadow: 0 18px 40px -26px rgba(6,26,51,.75), inset 0 1px 0 rgba(255,255,255,.1); }
body[data-tema="embio"] .banner-mod.e-banner::before { z-index: -1; background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
body[data-tema="embio"] .e-banner::after { content: ''; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.13) 48%, transparent 58%);
  transform: translateX(-60%); animation: eBarrido 7s var(--e-ease) 1s infinite; }
@keyframes eBarrido { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
body[data-tema="embio"] .e-banner-txt { position: relative; z-index: 2; max-width: 62ch; }
body[data-tema="embio"] .e-banner h2 { font-size: 1.42rem; font-weight: 300; letter-spacing: -.015em; }
body[data-tema="embio"] .e-banner p { font-size: .88rem; opacity: .88; margin-top: 4px; }
body[data-tema="embio"] .e-banner-esc { position: absolute; right: 0; top: 0; bottom: 0; width: min(46%, 420px); z-index: 1; pointer-events: none; }
body[data-tema="embio"] .e-banner-ruta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body[data-tema="embio"] .e-banner-ruta .t { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.6; stroke-dasharray: 3 7; animation: eRuta 1.6s linear infinite; }
body[data-tema="embio"] .e-banner-ruta .p { fill: rgba(255,255,255,.9); }
body[data-tema="embio"] .e-banner-ruta .p.v { fill: #9FF5D6; }
@keyframes eRuta { to { stroke-dashoffset: -20; } }
body[data-tema="embio"] .e-orbe { position: absolute; right: 34px; top: 50%; width: 76px; height: 76px; margin-top: -38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.07) 62%);
  border: 1px solid rgba(255,255,255,.3); box-shadow: 0 16px 34px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-tema="embio"] .e-orbe::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.35); animation: eGira 18s linear infinite; }
body[data-tema="embio"] .e-orbe::after { content: ''; position: absolute; left: 50%; top: -15px; width: 7px; height: 7px; margin-left: -3.5px; background: #9FF5D6; box-shadow: 0 0 10px #9FF5D6;
  transform-origin: 3.5px 53px; animation: eGira 6s linear infinite; }
@keyframes eGira { to { transform: rotate(360deg); } }
body[data-tema="embio"] .e-orbe svg { width: 38px; height: 38px; }
body[data-tema="embio"] .banner-mod.e-banner.sun { color: #fff; }
body[data-tema="embio"] .banner-mod.e-banner.sun { background-image: radial-gradient(420px 160px at 92% 0%, rgba(255,214,120,.25), transparent 60%), linear-gradient(110deg, #6E4700, #A06E06 60%, #C98500); }
body[data-tema="embio"] .banner-mod.e-banner.sun h2, body[data-tema="embio"] .banner-mod.e-banner.sun p { color: #fff; }
:root[data-modo="oscuro"] body[data-tema="embio"] .banner-mod.e-banner { border-color: rgba(160,210,255,.18); box-shadow: 0 24px 50px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08); }
@media (max-width: 760px) { body[data-tema="embio"] .e-banner-esc { width: 120px; } body[data-tema="embio"] .e-orbe { right: 18px; width: 58px; height: 58px; margin-top: -29px; } body[data-tema="embio"] .e-orbe svg { width: 30px; height: 30px; } body[data-tema="embio"] .e-banner-ruta { display: none; } }

/* ------------------------------------------------------------ iconos animados en bucle (laboratorio) */
.ev { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ev * { transform-box: fill-box; }
/* caja: la tapa se cierra y la cinta la sella */
.ev-caja .tapa { transform-origin: 0% 100%; animation: evTapa 3s var(--e-snap) infinite; }
.ev-caja .cinta { stroke-dasharray: 14; animation: evCinta 3s var(--e-snap) infinite; }
@keyframes evTapa { 0%, 12% { transform: rotate(-24deg); } 36%, 86% { transform: none; } 100% { transform: rotate(-24deg); } }
@keyframes evCinta { 0%, 40% { stroke-dashoffset: 14; } 60%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }
/* camioneta: llantas que giran, camino que corre */
.ev-camion .via { stroke-dasharray: 2.5 3.5; animation: evVia .55s linear infinite; opacity: .7; }
.ev-camion .cuerpo { animation: evBote .32s ease-in-out infinite alternate; }
.ev-camion .r { stroke-dasharray: 8.5 4; transform-origin: 50% 50%; animation: evGiro .7s linear infinite; }
.ev-camion .cruz { fill: currentColor; stroke: none; opacity: .9; }
@keyframes evVia { to { stroke-dashoffset: -6; } }
@keyframes evBote { to { transform: translateY(-.6px); } }
@keyframes evGiro { to { transform: rotate(360deg); } }
/* reloj */
.ev-reloj .aro { opacity: .35; }
.ev-reloj .arco { stroke-dasharray: 56.6; stroke-dashoffset: 56.6; transform-origin: 50% 50%; transform: rotate(-90deg); animation: evArco 4s linear infinite; }
.ev-reloj .aguja { transform-origin: 50% 100%; animation: evGiro 4s linear infinite; }
@keyframes evArco { to { stroke-dashoffset: 0; } }
/* barras que suben y bajan */
.ev-barras .b { transform-origin: 50% 100%; animation: evEq 1.4s ease-in-out infinite; }
.ev-barras .b2 { animation-delay: .18s; } .ev-barras .b3 { animation-delay: .36s; } .ev-barras .b4 { animation-delay: .54s; }
@keyframes evEq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
/* campana */
.ev-campana .cuerpo { transform-origin: 50% 0%; animation: eCampana 3s ease-in-out infinite; }
.ev-campana .badajo { animation: evBadajo 3s ease-in-out infinite; }
@keyframes evBadajo { 0%, 70%, 100% { transform: none; } 76% { transform: translateX(1.2px); } 82% { transform: translateX(-1px); } }
/* pin con onda */
.ev-pin .pn { transform-origin: 50% 100%; animation: evPin .9s var(--e-ease) infinite alternate; }
.ev-pin .onda { transform-origin: 50% 50%; animation: evOnda 1.8s ease-out infinite; }
@keyframes evPin { to { transform: translateY(-2.4px); } }
@keyframes evOnda { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
/* escudo con palomita */
.ev-escudo .ck { stroke-dasharray: 11; animation: evCk 2.6s var(--e-snap) infinite; }
@keyframes evCk { 0%, 25% { stroke-dashoffset: 11; } 50%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 11; } }
/* trofeo con destello */
.ev-trofeo .chispa { transform-origin: 50% 50%; animation: evChispa 2.4s ease-in-out infinite; }
@keyframes evChispa { 0%, 60%, 100% { transform: scale(0); opacity: 0; } 72% { transform: scale(1); opacity: 1; } 86% { transform: scale(.4); opacity: 0; } }
/* personas: la segunda llega */
.ev-personas .b { animation: evLlega 3s var(--e-ease) infinite; }
@keyframes evLlega { 0%, 15% { transform: translateX(3px); opacity: 0; } 35%, 85% { transform: none; opacity: 1; } 100% { transform: translateX(3px); opacity: 0; } }
/* capas que se apilan */
.ev-capas .c1 { animation: evCapa 2.8s var(--e-ease) infinite; }
@keyframes evCapa { 0%, 100% { transform: translateY(-1.6px); } 50% { transform: translateY(0); } }
/* etiqueta que se mece */
.ev-etiqueta .tg { transform-origin: 85% 15%; animation: evMece 2.6s ease-in-out infinite; }
@keyframes evMece { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
/* corazón con pulso */
.ev-pulso .ecg { stroke-dasharray: 26 60; animation: evEcg 1.8s linear infinite; }
@keyframes evEcg { from { stroke-dashoffset: 26; } to { stroke-dashoffset: -60; } }
/* documento que se escribe */
.ev-doc .ln { stroke-dasharray: 9; animation: evEscribe 3.2s var(--e-snap) infinite; }
.ev-doc .ln2 { animation-delay: .25s; } .ev-doc .ln3 { animation-delay: .5s; }
@keyframes evEscribe { 0%, 15% { stroke-dashoffset: 9; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 9; } }
/* calendario */
.ev-cal .dia { animation: evDia 2.4s steps(1) infinite; }
.ev-cal .d2 { animation-delay: .8s; } .ev-cal .d3 { animation-delay: 1.6s; }
@keyframes evDia { 0%, 33% { opacity: 1; } 34%, 100% { opacity: .25; } }
/* megáfono */
.ev-megafono .on { animation: evOn 1.6s ease-out infinite; opacity: 0; }
.ev-megafono .on2 { animation-delay: .5s; }
@keyframes evOn { 0% { opacity: 0; transform: translateX(-1px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(2px); } }
/* cruz de la marca que se arma (también es el cargador) */
.ev-cruz .k { transform-origin: 50% 50%; animation: evBloque 2.4s var(--e-snap) infinite; }
.ev-cruz .k2 { animation-delay: .1s; } .ev-cruz .k3 { animation-delay: .2s; } .ev-cruz .k4 { animation-delay: .3s; } .ev-cruz .k5 { animation-delay: .38s; }
@keyframes evBloque { 0% { transform: scale(0); opacity: 0; } 22%, 70% { transform: none; opacity: 1; } 90%, 100% { transform: scale(0); opacity: 0; } }

/* Iconos sencillos del menú y de las tarjetas: se mueven al pasar el cursor. */
body[data-tema="embio"] .icono-chip svg[data-ico], body[data-tema="embio"] .kpi-solid .icono svg[data-ico] { animation: evFlota 3.6s ease-in-out infinite; }
@keyframes evFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ------------------------------------------------------------ botones */
body[data-tema="embio"] .btn { transition: transform .18s var(--e-ease), box-shadow .25s, filter .25s, background-color .2s, border-color .2s, color .2s; }
body[data-tema="embio"] .btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
body[data-tema="embio"] .btn-primario, body[data-tema="embio"] .btn-teal:not(.btn-mini) { position: relative; overflow: hidden; isolation: isolate; }
body[data-tema="embio"] .btn-primario:hover:not(:disabled), body[data-tema="embio"] .btn-teal:not(.btn-mini):hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(19,102,174,.7); }
/* luz que sigue al cursor dentro del botón principal */
body[data-tema="embio"] .btn-primario::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.32), transparent 70%); }
body[data-tema="embio"] .btn-primario:hover::before { opacity: 1; }
/* destello periódico en el botón principal */
body[data-tema="embio"] .btn-primario::after { content: ''; display: block !important; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: eDestello 6s var(--e-ease) 2s infinite; }
@keyframes eDestello { 0%, 78% { left: -60%; } 100% { left: 130%; } }

/* ------------------------------------------------------------ carga inicial: la cruz que se arma */
body[data-tema="embio"] #cargaInicial { background: var(--e-fondo); }
body[data-tema="embio"] #cargaInicial .adn { display: none; }
body[data-tema="embio"] #cargaInicial::before { content: ''; width: 92px; height: 92px; background: url("../../img/embio/carga-cruz.svg") center/contain no-repeat; }
:root[data-modo="oscuro"] body[data-tema="embio"] #cargaInicial img { filter: brightness(0) invert(1); opacity: .92; }

/* ------------------------------------------------------------ escritorio en modo claro */
:root:not([data-modo="oscuro"]) .cr { --tx: #12263E; --tx2: #4B5A6B; --tx3: #5C6C7F; --borde: rgba(0,61,121,.12); --borde2: rgba(0,61,121,.24);
  --campo: #FFFFFF; --bien: #1B8A5C; --aviso: #9A5B00; --alerta: #C53636; --sup: #FFFFFF; --cian: #1366AE; }
:root:not([data-modo="oscuro"]) .cr :focus-visible { outline-color: #1366AE; }
:root:not([data-modo="oscuro"]) .cr-card { background: #fff; border-color: rgba(0,61,121,.10); box-shadow: 0 1px 0 rgba(0,61,121,.04), 0 18px 36px -26px rgba(0,61,121,.45); }
:root:not([data-modo="oscuro"]) .cr-card::before { display: none; }
:root:not([data-modo="oscuro"]) body[data-tema] .cr .cr-enlace { color: #1366AE; }
:root:not([data-modo="oscuro"]) .cr-chispa .antes { stroke: #A3B2C4; }
:root:not([data-modo="oscuro"]) .cr-chispa .fin { stroke: #fff; }
:root:not([data-modo="oscuro"]) .cr-seg { background: #EEF3F8; border-color: rgba(0,61,121,.1); }
:root:not([data-modo="oscuro"]) .cr-seg button[aria-pressed="true"] { background: #fff; color: #0B2545; box-shadow: 0 2px 8px -2px rgba(0,61,121,.25); }
:root:not([data-modo="oscuro"]) .cr-gv .rej { stroke: rgba(0,61,121,.08); }
:root:not([data-modo="oscuro"]) .cr-gv .base { stroke: rgba(0,61,121,.22); }
:root:not([data-modo="oscuro"]) .cr-gv .eje, :root:not([data-modo="oscuro"]) .cr-gv .mes { fill: #5C6C7F; }
:root:not([data-modo="oscuro"]) .cr-gv .t2 { fill: #4B5A6B; }
:root:not([data-modo="oscuro"]) .cr-gv .t1 { fill: #12263E; }
:root:not([data-modo="oscuro"]) .cr-gv .linea { stroke: #1366AE; }
:root:not([data-modo="oscuro"]) .cr-gv .fin, :root:not([data-modo="oscuro"]) .cr-gv .punto { fill: #1366AE; stroke: #fff; }
:root:not([data-modo="oscuro"]) .cr-gv .col { fill: rgba(19,102,174,.06); }
:root:not([data-modo="oscuro"]) .cr-gv .cruz { stroke: rgba(19,102,174,.45); }
:root:not([data-modo="oscuro"]) .cr-tip { background: #fff; border-color: rgba(0,61,121,.14); box-shadow: 0 18px 40px -18px rgba(0,61,121,.45); }
:root:not([data-modo="oscuro"]) .cr-tip div b { color: #0B2545; }
:root:not([data-modo="oscuro"]) .cr-resumen-g { border-top-color: rgba(0,61,121,.1); }
:root:not([data-modo="oscuro"]) .cr-tabla td, :root:not([data-modo="oscuro"]) .cr-lista li, :root:not([data-modo="oscuro"]) .cr-lotes td, :root:not([data-modo="oscuro"]) .cr-rot td { border-bottom-color: rgba(0,61,121,.08); }
:root:not([data-modo="oscuro"]) .cr-dona-svg .pista { stroke: rgba(0,61,121,.07); }
:root:not([data-modo="oscuro"]) .cr-ley button:hover, :root:not([data-modo="oscuro"]) .cr-ley button:focus-visible { background: rgba(19,102,174,.06); }
:root:not([data-modo="oscuro"]) .cr-lista time { color: #0B4F96; }
:root:not([data-modo="oscuro"]) .cr-top5 .barra, :root:not([data-modo="oscuro"]) .cr-rot .medidor { background: rgba(0,61,121,.07); }
:root:not([data-modo="oscuro"]) .cr-vacio { background: #F6F9FC; border-color: rgba(0,61,121,.18); }
:root:not([data-modo="oscuro"]) .cr-estado { background: rgba(0,61,121,.07); }
:root:not([data-modo="oscuro"]) .cr-estado.bien { background: rgba(27,138,92,.1); }
:root:not([data-modo="oscuro"]) .cr-estado.aviso { background: rgba(168,106,0,.1); }
:root:not([data-modo="oscuro"]) .cr-estado.alerta { background: rgba(197,54,54,.1); }
:root:not([data-modo="oscuro"]) .cr-estado.ruta { background: rgba(19,102,174,.1); }
:root:not([data-modo="oscuro"]) .cr-estado.ruta i { box-shadow: none; }
/* El encabezado sigue siendo la escena oscura de la marca en ambos modos: es la pieza que se luce. */
:root:not([data-modo="oscuro"]) .cr-hero { --tx: #EAF1FA; --tx2: #B3C4DA; --tx3: #8FA4C0; --bien: #3DDC97; --aviso: #FAB219; --alerta: #FF7B7B; --borde: rgba(140,200,255,.15); --cian: #7FE9FF;
  border-color: transparent; box-shadow: 0 30px 60px -36px rgba(0,61,121,.75); background: linear-gradient(120deg, #0E2A54, #061A33 55%, #04142A); }
:root:not([data-modo="oscuro"]) .cr-hero :focus-visible { outline-color: #7FD9FF; }
/* Escritorio en oscuro: el fondo general ya viene del modo. */
:root[data-modo="oscuro"] .cr-card { background: linear-gradient(165deg, rgba(18,48,92,.62), rgba(7,22,48,.78)); }

/* ------------------------------------------------------------ pausas y movimiento reducido */
/* Fuera de pantalla o con la pestaña oculta, los ciclos se detienen solos (ahorran batería). */
.e-fuera, .e-fuera *, .e-fuera::before, .e-fuera::after, .e-fuera *::before, .e-fuera *::after,
:root.e-oculta body *, :root.e-oculta body *::before, :root.e-oculta body *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-tema="embio"] .ev *, body[data-tema="embio"] .e-banner::after, body[data-tema="embio"] .e-orbe::before, body[data-tema="embio"] .e-orbe::after,
  body[data-tema="embio"] .e-banner-ruta .t, body[data-tema="embio"] .nav-item.activo::before, body[data-tema="embio"] .btn-primario::after,
  body[data-tema="embio"] .campanita svg, body[data-tema="embio"] .campanita .punto, body[data-tema="embio"] svg[data-ico] { animation: none !important; }
  .e-modo-perilla, .e-modo-pista svg { transition: none; }
}
:root[data-modo="oscuro"] body[data-tema="embio"] #cargaInicial::before { background-image: url("../../img/embio/carga-cruz-oscura.svg"); }

/* ------------------------------------------------------------ estados vacíos, avisos y asistente */
body[data-tema="embio"] .vacio::before { content: ''; display: block; width: 56px; height: 56px; margin: 0 auto 12px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cstyle%3E.l%7Bfill%3Anone%3Bstroke%3A%236F88A3%3Bstroke-width%3A3%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%7D.t%7Bfill%3A%233CC29A%3Btransform-box%3Afill-box%3Btransform-origin%3A0%20100%25%3Banimation%3At%204s%20cubic-bezier%28.7%2C0%2C.2%2C1%29%20infinite%7D.c%7Bfill%3A%238DBDF0%3Btransform-box%3Afill-box%3Btransform-origin%3A50%25%200%3Banimation%3Ac%204s%20cubic-bezier%28.7%2C0%2C.2%2C1%29%20infinite%7D%40keyframes%20t%7B0%25%2C10%25%7Btransform%3Arotate%28-38deg%29%7D35%25%2C85%25%7Btransform%3Anone%7D100%25%7Btransform%3Arotate%28-38deg%29%7D%7D%40keyframes%20c%7B0%25%2C40%25%7Btransform%3AscaleY%280%29%7D60%25%2C88%25%7Btransform%3AscaleY%281%29%7D100%25%7Btransform%3AscaleY%280%29%7D%7D%40media%20%28prefers-reduced-motion%3Areduce%29%7B.t%2C.c%7Banimation%3Anone%7D%7D%3C/style%3E%3Crect%20class%3D%22l%22%20x%3D%2212%22%20y%3D%2228%22%20width%3D%2240%22%20height%3D%2226%22%20rx%3D%222%22/%3E%3Cpath%20class%3D%22t%22%20d%3D%22M12%2028h40l-6-10H18z%22/%3E%3Crect%20class%3D%22c%22%20x%3D%2229%22%20y%3D%2218%22%20width%3D%226%22%20height%3D%2236%22/%3E%3C/svg%3E") center/contain no-repeat; opacity: .9; }
body[data-tema="embio"] .content > .alerta, body[data-tema="embio"] .content > div > .alerta { animation: eAviso .55s var(--e-back) both; }
@keyframes eAviso { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
body[data-tema="embio"] #botBurbuja::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(19,102,174,.45);
  animation: eAura 3.4s ease-out infinite; pointer-events: none; }
@keyframes eAura { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.32); opacity: 0; } }
:root[data-modo="oscuro"] body[data-tema="embio"] #botBurbuja { background: #0C2A4D; border-color: #5B9BEA; }
:root[data-modo="oscuro"] body[data-tema="embio"] #botBurbuja::after { border-color: rgba(127,217,255,.5); }
/* El logo a color no se lee sobre azul noche: en oscuro va su versión luminosa. */
:root[data-modo="oscuro"] body[data-tema="embio"] .content img[src*="img/embio/logo.svg"] { content: url("../../img/embio/logo-claro.svg"); }
@media (prefers-reduced-motion: reduce) { body[data-tema="embio"] #botBurbuja::after, body[data-tema="embio"] .content > .alerta { animation: none; } }

/* Menú lateral: los iconos animados esperan quietos; se mueven con el cursor y en la opción activa. */
body[data-tema="embio"] .nav-item .ev-menu { width: 18px; height: 18px; flex: none; }
/* Quietos se ven completos (sin animación); con el cursor o en la opción activa, el ciclo corre. */
body[data-tema="embio"] .nav-item:not(:hover):not(:focus-visible):not(.activo) .ev-menu * { animation: none; }
body[data-tema="embio"] .nav-item:hover .ev-menu { transform: none; }
/* Modo oscuro: retícula tenue de fondo (acento «holográfico» del laboratorio, solo en el CRM). */
:root[data-modo="oscuro"] body[data-tema="embio"] { background-image: radial-gradient(rgba(141,189,240,.075) 1px, transparent 1.2px); background-size: 26px 26px; background-attachment: fixed; }
/* El texto del encabezado nunca pasa por debajo del orbe. */
body[data-tema="embio"] .e-banner-txt { max-width: min(62ch, calc(100% - 150px)); }
/* En el celular el interruptor queda en un botón redondo: el modo actual, toca para cambiar. */
@media (max-width: 760px) {
  body[data-tema="embio"] .e-banner-txt { max-width: calc(100% - 92px); }
  .topbar .e-modo { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .topbar .e-modo .e-modo-perilla { display: none; }
  .topbar .e-modo .e-modo-pista { display: grid; place-items: center; }
  .topbar .e-modo .e-modo-pista svg { grid-area: 1 / 1; width: 18px; height: 18px; color: var(--e-tx); transform: none; }
  .topbar .e-modo[aria-pressed="true"] .sol, .topbar .e-modo[aria-pressed="false"] .luna { display: none; }
}
/* Barra superior en el celular: el buscador cede espacio para que la campana y el interruptor siempre quepan. */
@media (max-width: 760px) {
  body[data-tema="embio"] .topbar { gap: 10px; padding-left: 14px; padding-right: 14px; }
  body[data-tema="embio"] .topbar > div:not(.e-modo) { flex: 0 1 auto; min-width: 0; max-width: 48%; }
  body[data-tema="embio"] .topbar h1 { font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-tema="embio"] .topbar .sub { display: none; }
  body[data-tema="embio"] .buscador { flex: 1 1 0; min-width: 40px; }
  body[data-tema="embio"] .buscador input, body[data-tema="embio"] .buscador input:focus { width: 100%; min-width: 0; }
  body[data-tema="embio"] .campanita, body[data-tema="embio"] .hamb, .topbar .e-modo { flex: none; }
}
/* Mosaicos de icono: ámbar más profundo (el icono blanco necesita contraste) y sin magenta fuera de la paleta. */
body[data-tema="embio"] .icono-chip.sun { background: linear-gradient(135deg, #D79A12, #9A6200); }
body[data-tema="embio"] .icono-chip.berry { background: linear-gradient(135deg, #9085E9, #5B57C9); }
body[data-tema="embio"] .icono-chip.coral { background: linear-gradient(135deg, #3987E5, #1366AE); }
body[data-tema="embio"] .icono-chip.teal { background: linear-gradient(135deg, #2BAE88, #17735C); }
body[data-tema="embio"] .icono-chip.grape { background: linear-gradient(135deg, #5B9BEA, #2A6BC2); }

/* ------------------------------------------------------------ validación de Finanzas: hoja, sellos y cámara */
/* La entrada de .content no deja puesto un transform al terminar. Si lo dejara, las capas fijas
   (la cámara al sellar, el aviso de privacidad) se medirían contra .content y no contra la ventana:
   en una hoja larga quedaban cortadas arriba o abajo. */
body[data-tema="embio"] .content { animation-fill-mode: backwards; }
body[data-tema="embio"] .camara-capa, body[data-tema="embio"] .modal-aviso { background: rgba(3,12,28,.72); -webkit-backdrop-filter: blur(6px) saturate(1.15); backdrop-filter: blur(6px) saturate(1.15); }
body[data-tema="embio"] .camara-capa { overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
/* La caja siempre cabe: el visor guarda su 4:3 (lo pide el seguimiento del rostro), así que el
   ancho se ajusta a la altura disponible. Si ni así cabe (contraseña en un celular acostado),
   la capa se desplaza en vez de cortar la caja. */
body[data-tema="embio"] .camara-caja { margin: auto; width: min(430px, 100%, max(280px, calc((100vh - 32px - 236px) * 4 / 3)));
  border-radius: 22px; background: var(--e-sup); box-shadow: 0 0 0 1px var(--e-linea), 0 40px 90px -30px rgba(0,0,0,.7); }
@supports (height: 100dvh) { body[data-tema="embio"] .camara-caja { width: min(430px, 100%, max(280px, calc((100dvh - 32px - 236px) * 4 / 3))); } }
body[data-tema="embio"] .camara-cab { position: relative; overflow: hidden; padding: 16px 20px; background: linear-gradient(110deg, #0B4F96, #003D79 55%, #0F7F5A); }
body[data-tema="embio"] .camara-cab::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-18deg); animation: eDestello 5s var(--e-ease) .6s infinite; }
body[data-tema="embio"] .camara-cab strong { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; }
body[data-tema="embio"] .camara-cab small { opacity: .86; }
body[data-tema="embio"] .visor { background: radial-gradient(circle at 50% 40%, #0E2C52, #030C1C); }
body[data-tema="embio"] .visor-red { background-image: linear-gradient(rgba(127,233,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(127,233,255,.09) 1px, transparent 1px); }
body[data-tema="embio"] .visor-scan { background: linear-gradient(90deg, transparent, #3CE0A8, #7FE9FF, #3CE0A8, transparent); box-shadow: 0 0 18px #3CE0A8; }
body[data-tema="embio"] .visor-eti { background: rgba(3,12,28,.74); }
body[data-tema="embio"] .visor-eti.ok { background: rgba(32,141,113,.92); }
body[data-tema="embio"] .visor-ovalo.detectado { border-color: #3DDC97; box-shadow: 0 0 0 6px rgba(61,220,151,.2), 0 0 40px rgba(61,220,151,.4); }
body[data-tema="embio"] .visor-ovalo.detectado::before { border-color: rgba(61,220,151,.7); }
body[data-tema="embio"] .visor-ovalo.detectado::after { border-color: rgba(61,220,151,.4); }
body[data-tema="embio"] .camara-estado { color: var(--e-tit); font-weight: 600; }
body[data-tema="embio"] .camara-nota { color: var(--e-tx-2); }
/* Con la cámara abierta, el botón del asistente no se cruza encima. */
body[data-tema="embio"]:has(.camara-capa.abierta) #botBurbuja { opacity: 0; pointer-events: none; }

/* Tarjetas de sello: papel de la marca; el sello elegido se marca en verde EMBIO. */
body[data-tema="embio"] .sello-card { background: var(--e-sup); }
body[data-tema="embio"] .sello-card:not(.elegido):not(.puesto) { border: 2px dashed var(--e-linea-2); }
body[data-tema="embio"] .sello-card:not(.elegido):not(.puesto):hover { border-color: var(--e-verde-l); box-shadow: 0 18px 34px -16px rgba(0,61,121,.45); }
body[data-tema="embio"] .sello-card::before { background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); }
body[data-tema="embio"] .sello-card.elegido { border: 2px solid var(--e-verde); background: linear-gradient(160deg, rgba(32,141,113,.1), var(--e-sup));
  box-shadow: 0 0 0 3px rgba(32,141,113,.2), 0 12px 28px -12px rgba(32,141,113,.5); }
body[data-tema="embio"] .sello-card.elegido::after { background: var(--e-verde); }
body[data-tema="embio"] .sello-card.elegido .sello-pie { color: var(--e-verde-t); }
body[data-tema="embio"] .sello-card.puesto, body[data-tema="embio"] .sello-card.puesto:hover { border: 2px solid rgba(61,186,140,.4); background: linear-gradient(160deg, rgba(61,220,151,.09), var(--e-sup)); }
body[data-tema="embio"] .avance-punto:not(.lleno) { background: var(--e-linea-2); }
body[data-tema="embio"] .sello-hoja.previo small { color: var(--e-tx-2); }
body[data-tema="embio"] .val-fila .val-sellitos { background: var(--e-hundido); }
body[data-tema="embio"] .hoja-tabla th { background: var(--e-hundido); }
/* El título de la hoja va en blanco sobre su franja azul (el h3 general del tema lo dejaba azul sobre azul). */
body[data-tema="embio"] .hoja-cab h3 { color: #fff; }
body[data-tema="embio"] .rostro-panel { background: linear-gradient(165deg, #0C2A4D, #030C1C); box-shadow: 0 22px 55px -20px rgba(3,12,28,.6); }
body[data-tema="embio"] .rostro-panel::before { background: radial-gradient(circle, rgba(60,194,154,.22), transparent 68%); }
:root[data-modo="oscuro"] body[data-tema="embio"] .sello-card::before { background: linear-gradient(100deg, transparent, rgba(141,189,240,.16), transparent); }
:root[data-modo="oscuro"] body[data-tema="embio"] .sello-card.elegido .sello-pie { color: #8EF0C4; }
:root[data-modo="oscuro"] body[data-tema="embio"] .hoja-cab { background: #04142A; }
/* El sello es tinta para papel: en oscuro va sobre una ficha clara para que se lea. */
:root[data-modo="oscuro"] body[data-tema="embio"] :is(.sello-card, .sello-hoja, .val-sellitos) img { background: #F2F6F9; border-radius: 8px; padding: 4px 8px; }
@media (prefers-reduced-motion: reduce) { body[data-tema="embio"] .camara-cab::after { animation: none; } }
/* Con la contraseña a la vista la cámara ya está apagada: el visor se encoge para que todo quepa. */
body[data-tema="embio"] .camara-caja:has(#zonaPassword[style*="block"]) .visor { aspect-ratio: auto; height: clamp(84px, 15vh, 132px); }
body[data-tema="embio"] .camara-caja:has(#zonaPassword[style*="block"]) .visor :is(.visor-ovalo, .visor-esq, .visor-red, .visor-scan) { display: none; }

/* ------------------------------------------------------------ tableros con vida (escritorio, Dirección, equipo, reportes…) */
/* Foco: luz y borde que siguen al cursor sobre la tarjeta. Es una capa aparte (ui.js): no toca la tarjeta. */
.e-foco { position: fixed; z-index: 35; pointer-events: none; opacity: 0; transition: opacity .25s; }
.e-foco.ver { opacity: 1; }
.e-foco i { position: absolute; inset: 0; border-radius: inherit; }
.e-foco .luz { background: radial-gradient(380px circle at var(--fx, 50%) var(--fy, 50%), rgba(19,102,174,.07), transparent 62%); }
.e-foco .borde { padding: 1.5px;
  background: radial-gradient(230px circle at var(--fx, 50%) var(--fy, 50%), rgba(19,102,174,.6), rgba(32,141,113,.38) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
:root[data-modo="oscuro"] .e-foco .luz { background: radial-gradient(380px circle at var(--fx, 50%) var(--fy, 50%), rgba(127,217,255,.1), transparent 62%); }
:root[data-modo="oscuro"] .e-foco .borde { background: radial-gradient(230px circle at var(--fx, 50%) var(--fy, 50%), rgba(127,233,255,.8), rgba(60,224,168,.45) 42%, transparent 72%); }
.e-foco.sobre-color .luz { background: radial-gradient(300px circle at var(--fx, 50%) var(--fy, 50%), rgba(255,255,255,.2), transparent 60%); }
.e-foco.sobre-color .borde { background: radial-gradient(210px circle at var(--fx, 50%) var(--fy, 50%), rgba(255,255,255,.9), transparent 70%); }
/* Las tarjetas de cifra se inclinan apenas hacia el cursor (como una pieza física). */
body[data-tema="embio"] :is(.cr-kpi, .mini-kpi, .dash-kpi, .kpi-solid, .rep-caja) { transition: transform .5s var(--e-ease), box-shadow .3s, border-color .3s; }
body[data-tema="embio"] :is(.cr-kpi, .mini-kpi, .dash-kpi, .kpi-solid, .rep-caja).e-con-foco {
  transform: perspective(900px) rotateX(var(--e-rx, 0deg)) rotateY(var(--e-ry, 0deg)) translateY(-3px); transition: transform .14s linear, box-shadow .3s, border-color .3s; }
/* La cifra «llega»: un destello breve cuando termina de contar. */
body[data-tema="embio"] .e-llego { animation: eLlego .9s var(--e-ease); }
@keyframes eLlego { 0%, 100% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 18px rgba(19,102,174,.38); } }
:root[data-modo="oscuro"] body[data-tema="embio"] .e-llego { animation-name: eLlegoOsc; }
@keyframes eLlegoOsc { 0%, 100% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 20px rgba(127,233,255,.6); } }
/* Tarjetas de color: el círculo de fondo deriva despacio. */
body[data-tema="embio"] .kpi-solid::before { animation: eDeriva 11s ease-in-out infinite alternate; }
body[data-tema="embio"] .kpi-solid:nth-child(2n)::before { animation-duration: 13s; animation-delay: -4s; }
@keyframes eDeriva { from { translate: 0 0; scale: 1; } to { translate: -26px 18px; scale: 1.14; } }
/* Tarjetas con franja de color: una luz recorre la franja. */
body[data-tema="embio"] .dash-kpi::after { content: ''; position: absolute; top: 0; left: 0; width: 34%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); transform: translateX(-110%); animation: eFranja 6s var(--e-ease) 1.2s infinite; }
body[data-tema="embio"] .dash-kpi:nth-child(2n)::after { animation-delay: 2.4s; }
body[data-tema="embio"] .dash-kpi:nth-child(3n)::after { animation-delay: 3.6s; }
@keyframes eFranja { 0%, 62% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
/* Barras de avance y de ranking: crecen al entrar y un brillo las recorre cada tanto. */
body[data-tema="embio"] .bar-via span { position: relative; overflow: hidden; transform-origin: left; animation: eCrece 1.1s var(--e-ease) .15s backwards; }
body[data-tema="embio"] .bar-via span::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: eBrilloBarra 5.5s var(--e-ease) 1.8s infinite; }
body[data-tema="embio"] .bar-fila:nth-child(2n) .bar-via span::after { animation-delay: 2.6s; }
body[data-tema="embio"] .bar-fila:nth-child(3n) .bar-via span::after { animation-delay: 3.4s; }
@keyframes eCrece { from { transform: scaleX(0); } }
@keyframes eBrilloBarra { 0%, 68% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
body[data-tema="embio"] .bar-fila { transition: background-color .2s; border-radius: 10px; }
body[data-tema="embio"] .bar-fila:hover { background: var(--e-hundido); }
/* Antigüedad de cartera: cada recuadro con relieve y su color. */
body[data-tema="embio"] .aging > div { position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -18px rgba(0,61,121,.5); transition: transform .3s var(--e-ease); }
body[data-tema="embio"] .aging > div:hover { transform: translateY(-2px); }

/* Gráficas (graficas.js): punto que late en el último dato, barrido de luz y aro en las donas. */
.e-graf-pulso { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; display: none; }
.e-graf-pulso::before, .e-graf-pulso i { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; }
.e-graf-pulso::before { background: var(--c, #1366AE); box-shadow: 0 0 0 3px var(--e-sup), 0 0 16px var(--c, #1366AE); }
.e-graf-pulso i { border: 2px solid var(--c, #1366AE); animation: eRadar 2.4s ease-out infinite; }
.e-graf-pulso i + i { animation-delay: 1.2s; }
@keyframes eRadar { from { transform: scale(1); opacity: .85; } to { transform: scale(3.8); opacity: 0; } }
.e-graf-barrido { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 6px; }
.e-graf-barrido::after { content: ''; position: absolute; top: 0; bottom: 0; left: -28%; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(19,102,174,.07), transparent); animation: eBarrGraf 8s var(--e-ease) 1s infinite; }
:root[data-modo="oscuro"] .e-graf-barrido::after { background: linear-gradient(90deg, transparent, rgba(127,233,255,.08), transparent); }
@keyframes eBarrGraf { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(460%); } }
.e-graf-aro { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; border: 1px dashed var(--e-linea-2); animation: eGira 40s linear infinite; }
.e-graf-aro::after { content: ''; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #3CC29A; box-shadow: 0 0 10px #3CC29A; }

@media (prefers-reduced-motion: reduce) {
  body[data-tema="embio"] .kpi-solid::before, body[data-tema="embio"] .dash-kpi::after, body[data-tema="embio"] .bar-via span,
  body[data-tema="embio"] .bar-via span::after, body[data-tema="embio"] .e-llego { animation: none !important; }
  .e-graf-pulso i, .e-graf-barrido, .e-graf-aro { display: none !important; }
  body[data-tema="embio"] :is(.cr-kpi, .mini-kpi, .dash-kpi, .kpi-solid, .rep-caja).e-con-foco { transform: none; }
}

/* ------------------------------------------------------------ listas anchas (pedidos) */
/* La lista de pedidos nunca se sale de su tarjeta: si en una pantalla angosta no cabe, se desplaza dentro
   de ella. (Sus ventanas ya van a nivel de <body>, así que el desplazamiento no las recorta.) Solo las tablas
   anchas: en una tarjeta dentro de una retícula, el desplazamiento la dejaría encoger y cambiaría el acomodo. */
body[data-tema="embio"] .content .card:has(> .tabla > thead > tr > th:nth-child(10)) { overflow-x: auto; scrollbar-width: thin; }
/* Tablas de 10 columnas o más (la lista de pedidos): más compactas, para que quepan sin desplazarse.
   La letra Sora es más ancha que la de HormoLand; con la densidad de la plantilla se pasaba de la tarjeta. */
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) { font-size: .84rem; }
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) :is(td, th) { padding-left: 5px; padding-right: 5px; }
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) :is(td, th):first-child { padding-left: 12px; }
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) :is(td, th):last-child { padding-right: 10px; }
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) td { padding-top: 10px; padding-bottom: 10px; }
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) .chip { font-size: .7rem; padding: 3px 8px; white-space: nowrap; }
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) .btn-mini { padding: 4px 8px; font-size: .74rem; }
body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) .acciones .btn-mini { margin-left: 2px; padding-left: 7px; padding-right: 7px; }
/* Laptops de 1280 a 1366 px: un punto más chica la letra de la lista, para que no haga falta desplazarse. */
@media (max-width: 1400px) {
  body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) { font-size: .8rem; }
  body[data-tema="embio"] .tabla:has(> thead > tr > th:nth-child(10)) .acciones .btn-mini { margin-left: 1px; padding-left: 6px; padding-right: 6px; }
}