/* SincroNube · Documentos electrónicos — sistema visual.
   La marca de cada empresa entra por variables (--primario, --acento, --deco-*…)
   que pone App.aplicarTema(); los tonos derivados salen de color-mix(), así un
   cliente nuevo solo trae sus colores y su logo. */
:root {
  --primario: #0b3d8b; --profundo: #051b49; --acento: #9cff76; --acento-tx: #0d1526; --primario-tx: #fff;
  --suave: #e9f8ff; --deco-1: #ffe060; --deco-2: #08baf8; --deco-3: #20f6a5;
  --fuente-titulos: 'Inter', system-ui, sans-serif;
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fondo: #f6f9fc; --panel: #fff; --borde: #e3eaf2; --borde-2: #cfdae6; --muted: #f3f6fa;
  --tx: #0d1526; --tx-2: #4a5870; --tx-3: #7f8ba0;
  --ok: #16703a; --ok-bg: #e1f7e8; --warn: #8a5300; --warn-bg: #fff2c7;
  --err: #c0141c; --err-bg: #fde6e7; --info: #1d5aa6; --info-bg: #e5effb; --neutro: #4a5870; --neutro-bg: #edf1f6;

  --p-5: color-mix(in srgb, var(--primario) 5%, white);
  --p-10: color-mix(in srgb, var(--primario) 10%, white);
  --p-18: color-mix(in srgb, var(--primario) 18%, white);
  --p-35: color-mix(in srgb, var(--primario) 35%, white);
  --a-25: color-mix(in srgb, var(--acento) 25%, white);

  --r-xl: 24px; --r: 16px; --r-sm: 11px;
  --sombra: 0 1px 2px rgba(13, 21, 38, .05), 0 14px 34px -22px color-mix(in srgb, var(--primario) 60%, transparent);
  --sombra-alta: 0 30px 80px -24px rgba(5, 20, 50, .45);
  --lateral: 268px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 14.5px/1.5 var(--fuente); color: var(--tx); background: var(--fondo);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01';
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 6% -6%, color-mix(in srgb, var(--deco-1) 26%, transparent), transparent 72%),
    radial-gradient(640px 460px at 104% 6%, color-mix(in srgb, var(--deco-2) 15%, transparent), transparent 72%),
    radial-gradient(640px 440px at 55% 110%, color-mix(in srgb, var(--deco-3) 14%, transparent), transparent 72%);
}
body.sin-decoracion::before { display: none; }
h1, h2, h3, h4 { font-family: var(--fuente-titulos); margin: 0; letter-spacing: -.015em; color: var(--tx); }
p { margin: 0; }
a { color: var(--primario); }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.mut { color: var(--tx-2); }
.suave-tx { color: var(--tx-3); }
.der { text-align: right; }
.nowrap { white-space: nowrap; }
.oculto { display: none !important; }
svg.ic { flex: 0 0 auto; display: block; }

/* ------------------------------------------------------------ estructura */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.contenido { padding: 6px 34px 56px; width: 100%; max-width: 1380px; outline: none; }
.lienzo { display: flex; flex-direction: column; gap: 22px; }
.lienzo.entra { animation: entrar .35s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ menú lateral */
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
  display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 14px; color: #fff;
  background:
    radial-gradient(380px 240px at -10% -5%, color-mix(in srgb, var(--deco-2) 24%, transparent), transparent 70%),
    radial-gradient(320px 260px at 110% 105%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--primario) 72%, var(--profundo)) 0%, var(--profundo) 100%);
}
.lateral-marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.lateral-marca strong { display: block; font-family: var(--fuente-titulos); font-size: 17px; line-height: 1.15; letter-spacing: -.01em; }
.lateral-marca span { display: block; font-size: 12px; color: rgba(255, 255, 255, .62); margin-top: 2px; }

.logo { position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; background: #fff; }
.logo img { width: 88%; height: 88%; object-fit: contain; }
.logo b { display: none; font-family: var(--fuente-titulos); font-weight: 700; color: var(--primario); }
.logo.sin-img { background: var(--acento); }
.logo.sin-img b { display: block; color: var(--acento-tx); }
.logo-lateral { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.logo-lateral b { font-size: 18px; }
.logo-mini { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--borde); }
.logo-mini b { font-size: 10px; }
.logo-grande { width: 64px; height: 64px; border-radius: 18px; border: 1px solid var(--borde); }
.logo-grande b { font-size: 22px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-grupo { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .5); padding: 16px 12px 6px; font-weight: 600; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px;
  color: rgba(255, 255, 255, .84); text-decoration: none; font-weight: 500; font-size: 14.5px;
  transition: background .15s, color .15s, transform .15s;
}
.nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nav a.activo {
  background: var(--acento); color: var(--acento-tx); font-weight: 650;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--acento) 85%, transparent);
}
.nav a .contador {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center;
  font-style: normal; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .16); color: #fff;
}
.nav a.activo .contador { background: color-mix(in srgb, var(--acento-tx) 14%, transparent); color: var(--acento-tx); }

.lateral-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.ambiente {
  display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1);
}
.ambiente .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--deco-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--deco-1) 25%, transparent); flex: 0 0 auto; }
.ambiente strong, .usuario strong { display: block; font-size: 13px; }
.ambiente small, .usuario small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.usuario { display: flex; gap: 10px; align-items: center; padding: 4px 6px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--acento) 85%, white); color: var(--acento-tx);
}
.avatar.grande { width: 52px; height: 52px; font-size: 18px; }
.avatar.claro { background: var(--p-10); color: var(--primario); }
.hecho-con { font-size: 11px; color: rgba(255, 255, 255, .45); padding: 0 6px; }
.hecho-con b { color: rgba(255, 255, 255, .7); font-weight: 600; }

/* ------------------------------------------------------------ barra superior */
.barra {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 18px 34px 14px; background: color-mix(in srgb, var(--fondo) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.barra-titulo { min-width: 0; flex: 1; }
.barra-titulo h1 { font-size: 27px; font-weight: 700; line-height: 1.15; }
.barra-titulo p { color: var(--tx-2); font-size: 13.5px; margin-top: 3px; }
.barra-acciones { display: flex; align-items: center; gap: 10px; }
.pildora-demo {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--deco-1) 55%, white); color: #5b4300; border: 1px solid color-mix(in srgb, var(--deco-1) 70%, #c79a00);
}
.btn-empresa {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 7px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--borde); cursor: pointer; font-weight: 600; font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, .05);
}
.btn-empresa:hover { border-color: var(--borde-2); }
.solo-movil { display: none !important; }

/* menú desplegable */
.desplegable {
  position: absolute; z-index: 60; min-width: 280px; padding: 8px; border-radius: 16px; background: var(--panel);
  border: 1px solid var(--borde); box-shadow: var(--sombra-alta); animation: entrar .18s ease both;
}
.desplegable h5 { margin: 6px 10px 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.desplegable a, .desplegable button.opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 11px; border: 0; background: none;
  text-align: left; cursor: pointer; text-decoration: none; color: var(--tx);
}
.desplegable a:hover, .desplegable button.opcion:hover { background: var(--muted); }
.desplegable a small, .desplegable button.opcion small { display: block; color: var(--tx-3); font-size: 12px; }
.desplegable .marca-activa { margin-left: auto; color: var(--primario); }
.desplegable hr { border: 0; border-top: 1px solid var(--borde); margin: 6px 4px; }

/* ------------------------------------------------------------ botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 17px;
  border-radius: 999px; border: 1px solid var(--borde-2); background: var(--panel); color: var(--tx);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s, filter .15s;
}
.btn:hover { border-color: color-mix(in srgb, var(--primario) 40%, var(--borde-2)); background: var(--p-5); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--primario); color: var(--primario-tx); border-color: transparent; }
.btn-primario:hover { background: color-mix(in srgb, var(--primario) 88%, black); border-color: transparent; }
.btn-acento {
  background: var(--acento); color: var(--acento-tx); border-color: transparent;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--acento) 90%, black);
}
.btn-acento:hover { background: var(--acento); filter: brightness(1.04) saturate(1.05); border-color: transparent; box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--acento) 90%, black); }
.btn-peligro { color: var(--err); }
.btn-peligro:hover { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 40%, white); }
.btn-fantasma { background: transparent; border-color: transparent; }
.btn-fantasma:hover { background: var(--muted); border-color: transparent; }
.btn-claro { background: rgba(255, 255, 255, .75); border-color: var(--borde); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn-icono {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--borde);
  background: var(--panel); cursor: pointer; position: relative; color: var(--tx-2);
}
.btn-icono:hover { color: var(--tx); border-color: var(--borde-2); }
.btn-icono.sm { width: 32px; height: 32px; }
.punto-alerta { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--err); border: 2px solid var(--panel); }
.giro {
  width: 16px; height: 16px; border-radius: 50%; border: 2.2px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite; display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ tarjetas */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-xl); box-shadow: var(--sombra); }
.tarjeta-cab { display: flex; align-items: center; gap: 12px; padding: 18px 22px 0; }
.tarjeta-cab h3 { font-size: 17px; font-weight: 700; }
.tarjeta-cab p { color: var(--tx-2); font-size: 13px; }
.tarjeta-cab .empuja { margin-left: auto; }
.tarjeta-cuerpo { padding: 18px 22px 22px; }
.rejilla-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; }
.rejilla-2b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }

/* indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kpi { display: flex; gap: 14px; padding: 18px 18px 17px; align-items: flex-start; }
.kpi-icono {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--p-10); color: var(--primario);
}
.kpi.verde .kpi-icono { background: var(--a-25); color: color-mix(in srgb, var(--acento) 30%, #0d3d16); }
.kpi.amarillo .kpi-icono { background: color-mix(in srgb, var(--deco-1) 35%, white); color: #7a5600; }
.kpi.cielo .kpi-icono { background: color-mix(in srgb, var(--deco-2) 16%, white); color: color-mix(in srgb, var(--deco-2) 55%, #062a48); }
.kpi-texto { min-width: 0; }
.kpi-texto span { display: block; font-size: 13px; color: var(--tx-2); font-weight: 500; }
.kpi-texto strong { display: block; font-family: var(--fuente-titulos); font-size: 25px; font-weight: 700; line-height: 1.2; margin-top: 3px; letter-spacing: -.02em; }
.kpi-texto small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--tx-2); }
.delta { font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 999px; }
.delta.sube { background: var(--ok-bg); color: var(--ok); }
.delta.baja { background: var(--err-bg); color: var(--err); }

/* chips de estado */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-err { background: var(--err-bg); color: var(--err); }
.chip-info { background: var(--info-bg); color: var(--info); }
.chip-neutro { background: var(--neutro-bg); color: var(--neutro); }
.chip-warn.vivo i { animation: latir 1.4s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .25; } }
.etiqueta {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; background: var(--p-10); color: var(--primario);
}

/* ------------------------------------------------------------ portada (inicio) */
.hero {
  position: relative; overflow: hidden; border-radius: 28px; padding: 30px 34px; min-height: 212px;
  background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: center;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(360px 240px at 0% 0%, color-mix(in srgb, var(--deco-1) 38%, transparent), transparent 70%),
    radial-gradient(420px 300px at 100% 20%, color-mix(in srgb, var(--deco-2) 26%, transparent), transparent 70%),
    radial-gradient(380px 260px at 70% 120%, color-mix(in srgb, var(--deco-3) 26%, transparent), transparent 70%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 70%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 70%);
}
.hero > * { position: relative; z-index: 1; }
.hero-etiqueta {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--deco-3) 22%, white); color: color-mix(in srgb, var(--deco-3) 25%, #063a26);
  border: 1px solid color-mix(in srgb, var(--deco-3) 35%, white);
}.hero h2 { font-size: 36px; font-weight: 800; line-height: 1.08; margin-top: 14px; color: var(--profundo); letter-spacing: -.03em; }
.hero h2 em {
  font-style: normal; background: linear-gradient(90deg, var(--primario), var(--deco-2) 60%, var(--deco-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin-top: 10px; color: var(--tx-2); font-size: 15px; max-width: 620px; }
.hero-acciones { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.hero-figuras { position: relative; height: 180px; }
.hero-figuras img, .hero-figuras .forma {
  position: absolute; width: 92px; height: 92px; object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(5, 27, 73, .18)); animation: flotar 6s ease-in-out infinite;
}
.hero-figuras > :nth-child(1) { left: 6%; top: 8%; transform: rotate(-8deg); }
.hero-figuras > :nth-child(2) { left: 46%; top: -2%; width: 78px; height: 78px; animation-delay: -1.5s; }
.hero-figuras > :nth-child(3) { left: 24%; top: 50%; width: 84px; height: 84px; animation-delay: -3s; }
.hero-figuras > :nth-child(4) { left: 66%; top: 46%; width: 74px; height: 74px; animation-delay: -4.2s; }
.hero-figuras .forma { border-radius: 30%; }
.hero-figuras .forma.f1 { background: var(--deco-1); }
.hero-figuras .forma.f2 { background: var(--deco-2); border-radius: 50%; }
.hero-figuras .forma.f3 { background: var(--deco-3); border-radius: 50% 50% 12px 50%; }
.hero-figuras .forma.f4 { background: var(--acento); border-radius: 12px; transform: rotate(14deg); }
@keyframes flotar { 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .hero-figuras img, .hero-figuras .forma, .lienzo.entra, .giro { animation: none; } }

/* pendientes y actividad */
.lista { display: flex; flex-direction: column; }
.fila-lista {
  display: flex; gap: 13px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--borde);
  text-decoration: none; color: inherit; border-radius: 10px;
}
.fila-lista:first-child { border-top: 0; }
a.fila-lista:hover { background: var(--muted); }
.fila-lista .ic-caja {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--p-10); color: var(--primario);
}
.fila-lista .ic-caja.err { background: var(--err-bg); color: var(--err); }
.fila-lista .ic-caja.warn { background: var(--warn-bg); color: var(--warn); }
.fila-lista .ic-caja.info { background: var(--info-bg); color: var(--info); }
.fila-lista .texto { min-width: 0; flex: 1; }
.fila-lista .texto strong { display: block; font-size: 14px; font-weight: 600; }
.fila-lista .texto small { display: block; color: var(--tx-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-lista .lado { text-align: right; flex: 0 0 auto; font-size: 13px; }
.fila-lista .lado small { display: block; color: var(--tx-3); font-size: 12px; }
.tipo-doc {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; background: var(--p-10); color: var(--primario);
}
.tipo-doc.NE { background: color-mix(in srgb, var(--deco-3) 20%, white); color: #0b5a3a; }
.tipo-doc.DS { background: color-mix(in srgb, var(--deco-1) 32%, white); color: #6d4c00; }
.tipo-doc.NC { background: var(--err-bg); color: var(--err); }
.tipo-doc.ev { background: color-mix(in srgb, var(--deco-2) 16%, white); color: #0b4e74; }

/* camino a producción */
.progreso { height: 9px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.progreso > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primario), var(--deco-2)); transition: width .4s ease; }
.progreso.acento > span { background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 70%, var(--deco-3)), var(--acento)); }
.camino { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.camino li { list-style: none; display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; }
.camino { padding: 0; margin-bottom: 0; }
.marca-paso {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px;
  border: 2px solid var(--borde-2); color: transparent;
}
.marca-paso.listo { background: var(--ok); border-color: var(--ok); color: #fff; }
.marca-paso.en_curso { border-color: var(--primario); }
.camino strong { display: block; font-size: 14px; font-weight: 600; }
.camino small { display: block; color: var(--tx-2); font-size: 12.5px; }

/* gráfica */
.grafica { width: 100%; height: auto; display: block; }
.grafica text { font-family: var(--fuente); }
.grafica .barra-g { transition: opacity .15s; }
.grafica .barra-g:hover { opacity: .85; }

/* ------------------------------------------------------------ barra de herramientas y tablas */
.herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.herramientas .empuja { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.buscador { position: relative; flex: 1 1 260px; max-width: 360px; }
.buscador svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tx-3); pointer-events: none; }
.buscador input { padding-left: 40px !important; border-radius: 999px !important; }
.pestanas { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--borde); }
.pestanas button {
  border: 0; background: none; height: 34px; padding: 0 15px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: var(--tx-2); display: inline-flex; align-items: center; gap: 7px;
}
.pestanas button:hover { color: var(--tx); }
.pestanas button.activa { background: var(--primario); color: var(--primario-tx); }
.pestanas button em { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--muted); color: var(--tx-2); }
.pestanas button.activa em { background: rgba(255, 255, 255, .2); color: inherit; }
.filtros-chip { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--tx-2);
}
.filtro b { font-weight: 700; color: var(--tx); }
.filtro.activo { border-color: var(--primario); background: var(--p-10); color: var(--primario); }
.filtro.activo b { color: var(--primario); }

.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--tx-2); padding: 11px 14px; white-space: nowrap;
  background: var(--muted); border-bottom: 1px solid var(--borde);
}
.tabla th:first-child { border-top-left-radius: 14px; }
.tabla th:last-child { border-top-right-radius: 14px; }
.tabla td { padding: 13px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr { transition: background .12s; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr:hover { background: var(--p-5); }
.tabla tbody tr.marcada, .tabla tbody tr.marcada:hover { background: color-mix(in srgb, var(--acento) 24%, white); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .doc { font-weight: 700; color: var(--primario); white-space: nowrap; }
.tabla .doc.borr { color: var(--tx-3); font-weight: 600; font-style: italic; }
.tabla .princ { font-weight: 600; }
.tabla .sec { display: block; font-size: 12.5px; color: var(--tx-3); }
.tabla .valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--primario); cursor: pointer; }
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--tx-2); }
.paginacion div { display: flex; gap: 8px; }

/* vacío */
.vacio { text-align: center; padding: 56px 20px; color: var(--tx-2); }
.vacio .ic-vacio { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--p-10); color: var(--primario); }
.vacio h4 { font-size: 17px; margin-bottom: 6px; }

/* esqueleto de carga */
.esqueleto { display: flex; flex-direction: column; gap: 18px; }
.esqueleto div { border-radius: var(--r-xl); background: linear-gradient(90deg, var(--muted), #fff, var(--muted)); background-size: 200% 100%; animation: brillo 1.2s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* avisos destacados */
.nota {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 15px; font-size: 13.5px;
  background: var(--info-bg); color: #163f73; border: 1px solid color-mix(in srgb, var(--info) 18%, white);
}
.nota svg { margin-top: 1px; }
.nota.warn { background: var(--warn-bg); color: #5f3c00; border-color: color-mix(in srgb, var(--warn) 22%, white); }
.nota.err { background: var(--err-bg); color: #7d0d12; border-color: color-mix(in srgb, var(--err) 20%, white); }
.nota.ok { background: var(--ok-bg); color: #0f4a27; border-color: color-mix(in srgb, var(--ok) 20%, white); }
.nota strong { font-weight: 700; }

/* ------------------------------------------------------------ formularios */
.campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; grid-column: span 6; min-width: 0; }
.campo.c3 { grid-column: span 3; } .campo.c4 { grid-column: span 4; } .campo.c8 { grid-column: span 8; } .campo.c12 { grid-column: span 12; }
.campo > label, .etiqueta-campo { font-size: 12.5px; font-weight: 600; color: var(--tx-2); }
.campo small { font-size: 12px; color: var(--tx-3); }
.entrada, .campo input:not([type=checkbox]):not([type=color]):not([type=radio]), .campo select, .campo textarea, .buscador input, .tabla-edit input, .tabla-edit select {
  width: 100%; height: 42px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--borde-2); background-color: var(--panel);
  outline: none; transition: border-color .15s, box-shadow .15s; font-size: 14px;
}
.campo textarea { height: auto; min-height: 76px; padding: 10px 13px; resize: vertical; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus, .buscador input:focus, .tabla-edit input:focus, .tabla-edit select:focus {
  border-color: var(--primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 14%, transparent);
}
.campo input[readonly] { background: var(--muted); color: var(--tx-2); }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f8ba0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px !important; }
.select-chico { height: 40px; padding: 0 36px 0 14px; border-radius: 999px; border: 1px solid var(--borde); background-color: var(--panel); font-weight: 600; font-size: 13.5px; cursor: pointer; outline: none; }
.seccion-form { font-size: 13px; font-weight: 700; color: var(--tx); margin: 4px 0 -2px; display: flex; align-items: center; gap: 8px; grid-column: span 12; }

.tabla-edit { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.tabla-edit th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tx-2); padding: 0 6px; }
.tabla-edit td { padding: 0 4px; vertical-align: middle; }
.tabla-edit input, .tabla-edit select { height: 40px; }
.tabla-edit select { padding-left: 10px; padding-right: 30px !important; background-position: right 9px center; }
.tabla-edit .total-linea { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 8px; }
.totales { margin-left: auto; width: min(320px, 100%); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.totales div { display: flex; justify-content: space-between; gap: 20px; }
.totales .gran-total { padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--borde-2); font-size: 19px; font-weight: 800; font-family: var(--fuente-titulos); }

.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.interruptor input { appearance: none; width: 40px; height: 23px; border-radius: 999px; background: var(--borde-2); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.interruptor input::after { content: ''; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.interruptor input:checked { background: var(--primario); }
.interruptor input:checked::after { transform: translateX(17px); }

/* ------------------------------------------------------------ modal y cajón */
.capa {
  position: fixed; inset: 0; z-index: 100; background: rgba(6, 15, 35, .42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .2s;
}
.capa.abierta { opacity: 1; }
.modal {
  width: 100%; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--panel);
  border-radius: 26px; box-shadow: var(--sombra-alta); transform: translateY(12px) scale(.98); transition: transform .22s ease;
}
.capa.abierta .modal { transform: none; }
.modal-cab { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 4px; }
.modal-cab > div { flex: 1; min-width: 0; }
.modal-cab h3 { font-size: 21px; font-weight: 700; }
.modal-cab p { color: var(--tx-2); font-size: 13.5px; margin-top: 3px; }
.modal-cuerpo { padding: 18px 24px; overflow-y: auto; }
.modal-pie { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 14px 24px 20px; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.modal-pie .izq { margin-right: auto; color: var(--tx-2); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }

.capa.lado { justify-content: flex-end; padding: 0; }
.cajon {
  width: min(560px, 100%); height: 100vh; background: var(--panel); display: flex; flex-direction: column;
  box-shadow: var(--sombra-alta); transform: translateX(30px); transition: transform .25s ease;
}
.capa.abierta .cajon { transform: none; }
.cajon .modal-cab { padding-top: 24px; }
.cajon .modal-cuerpo { flex: 1; }

/* éxito tras emitir */
.exito { text-align: center; padding: 18px 10px 6px; }
.exito .sello {
  width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--acento); color: var(--acento-tx); box-shadow: 0 0 0 10px var(--a-25); animation: sello .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes sello { from { transform: scale(.4); opacity: 0; } }
.exito h4 { font-size: 22px; }
.exito p { color: var(--tx-2); margin-top: 6px; }
.codigo {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12px; word-break: break-all; color: var(--tx-2);
  background: var(--muted); border: 1px dashed var(--borde-2); border-radius: 12px; padding: 10px 12px; text-align: left;
}

/* avisos emergentes */
.avisos { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.aviso {
  display: flex; gap: 11px; align-items: center; max-width: 420px; padding: 12px 16px; border-radius: 16px; background: var(--profundo); color: #fff;
  box-shadow: var(--sombra-alta); font-size: 14px; animation: entrar .25s ease both;
}
.aviso .ic-aviso { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--acento-tx); flex: 0 0 auto; }
.aviso.err .ic-aviso { background: #ff6b72; color: #fff; }
.aviso.sale { opacity: 0; transform: translateY(6px); transition: all .25s; }

/* ------------------------------------------------------------ documento (representación) */
.documento { border: 1px solid var(--borde); border-radius: 20px; overflow: hidden; background: #fff; }
.documento-cab { display: flex; gap: 14px; align-items: center; padding: 18px; background: linear-gradient(120deg, var(--p-5), color-mix(in srgb, var(--deco-2) 8%, white)); border-bottom: 1px solid var(--borde); }
.documento-cab .quien { flex: 1; min-width: 0; }
.documento-cab .quien strong { display: block; font-family: var(--fuente-titulos); font-size: 16px; }
.documento-cab .quien small { display: block; color: var(--tx-2); font-size: 12px; }
.documento-cab .numero-doc { text-align: right; }
.documento-cab .numero-doc small { display: block; font-size: 11px; color: var(--tx-2); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.documento-cab .numero-doc strong { font-size: 20px; font-family: var(--fuente-titulos); color: var(--primario); }
.documento-cuerpo { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; font-size: 13.5px; }
.pares div small { display: block; color: var(--tx-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pares div span { display: block; font-weight: 600; }
.items-doc { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.items-doc th { text-align: left; font-size: 11.5px; color: var(--tx-3); font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.items-doc td { padding: 9px 0; border-bottom: 1px solid var(--borde); }
.items-doc td:last-child, .items-doc th:last-child { text-align: right; }

/* línea de tiempo vertical */
.tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tiempo li { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.tiempo li:last-child { padding-bottom: 0; }
.tiempo li::before { content: ''; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--borde); }
.tiempo li:last-child::before { display: none; }
.tiempo .marca-paso { margin-top: 0; }
.tiempo strong { display: block; font-size: 14px; }
.tiempo small { display: block; font-size: 12.5px; color: var(--tx-2); }
.tiempo li.hecho::before { background: var(--ok); }
.tiempo li.falla .marca-paso { background: var(--err); border-color: var(--err); color: #fff; }

/* eventos RADIAN en tabla: 030 → 032 → 033 */
.pasos-ev { display: inline-flex; align-items: center; }
.pasos-ev span {
  width: 30px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--muted); color: var(--tx-3); border: 1px solid var(--borde);
}
.pasos-ev span.si { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, white); }
.pasos-ev span.no { background: var(--err-bg); color: var(--err); border-color: color-mix(in srgb, var(--err) 25%, white); }
.pasos-ev span.sig { border: 1.5px dashed var(--primario); color: var(--primario); background: var(--p-5); }
.pasos-ev i { width: 8px; height: 2px; background: var(--borde-2); }

.tarjetas-ev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tarjeta-ev { padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.tarjeta-ev .codigo-ev { font-family: var(--fuente-titulos); font-weight: 800; font-size: 13px; color: var(--primario); background: var(--p-10); padding: 3px 8px; border-radius: 8px; }
.tarjeta-ev strong { display: block; font-size: 14px; margin-top: 7px; }
.tarjeta-ev small { display: block; color: var(--tx-2); font-size: 12.5px; margin-top: 2px; }
.tarjeta-ev b.cuenta { margin-left: auto; font-family: var(--fuente-titulos); font-size: 24px; }

[data-parte=masiva] { position: sticky; bottom: 18px; z-index: 25; }
.barra-masiva {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px 10px 18px; border-radius: 999px; background: var(--profundo); color: #fff; box-shadow: var(--sombra-alta);
  animation: entrar .2s ease both;
}
.barra-masiva strong { margin-right: auto; font-size: 14px; }
.barra-masiva .btn { height: 36px; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); }
.barra-masiva .btn:hover { background: rgba(255, 255, 255, .18); }
.barra-masiva .btn-acento { background: var(--acento); color: var(--acento-tx); border-color: transparent; }

/* ------------------------------------------------------------ nómina */
.periodos { display: flex; gap: 10px; flex-wrap: wrap; }
.periodo {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; min-width: 128px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--borde); background: var(--panel); transition: border-color .15s, box-shadow .15s;
}
.periodo:hover { border-color: var(--borde-2); }
.periodo strong { font-size: 14.5px; text-transform: capitalize; }
.periodo small { font-size: 12px; color: var(--tx-2); display: flex; align-items: center; gap: 6px; }
.periodo small i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.periodo small i.warn { background: #e0a100; }
.periodo small i.info { background: var(--info); }
.periodo.activo { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 14%, transparent); }

.resumen-periodo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.resumen-periodo .izq { padding: 22px 24px; }
.resumen-periodo .der { padding: 22px 24px; border-left: 1px solid var(--borde); background: linear-gradient(160deg, var(--p-5), transparent); border-radius: 0 var(--r-xl) var(--r-xl) 0; }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.cifras div small { display: block; font-size: 12.5px; color: var(--tx-2); }
.cifras div strong { display: block; font-family: var(--fuente-titulos); font-size: 22px; font-weight: 700; margin-top: 2px; letter-spacing: -.02em; }
.cifras div.neto strong { color: var(--primario); }
.plazo { display: flex; flex-direction: column; gap: 10px; }
.plazo .fecha-plazo { font-family: var(--fuente-titulos); font-size: 21px; font-weight: 700; line-height: 1.2; }
.plazo .faltan { font-size: 13px; color: var(--tx-2); }

.pasos { display: flex; gap: 0; list-style: none; margin: 18px 0 0; padding: 0; }
.pasos li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tx-3); position: relative; }
.pasos li:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--borde); margin: 0 10px; }
.pasos li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 2px solid var(--borde-2); background: var(--panel); flex: 0 0 auto; }
.pasos li.hecho { color: var(--ok); }
.pasos li.hecho span { background: var(--ok); border-color: var(--ok); color: #fff; }
.pasos li.hecho::after { background: var(--ok); }
.pasos li.actual { color: var(--primario); }
.pasos li.actual span { border-color: var(--primario); background: var(--p-10); color: var(--primario); }

.envio-lista { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; margin-top: 14px; }
.envio-lista div { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; font-size: 13.5px; }
.envio-lista div .estado-envio { margin-left: auto; font-size: 12.5px; color: var(--tx-3); display: flex; align-items: center; gap: 6px; }
.envio-lista div.listo .estado-envio { color: var(--ok); font-weight: 600; }
.envio-lista div.enviando { background: var(--p-5); }

.desglose { display: flex; flex-direction: column; gap: 0; }
.desglose div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--borde); font-size: 14px; }
.desglose div small { color: var(--tx-3); margin-left: 6px; }
.desglose div:last-child { border-bottom: 0; }
.bloque-titulo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin: 6px 0 4px; }
.neto-grande { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: 16px; background: var(--a-25); }
.neto-grande strong { font-family: var(--fuente-titulos); font-size: 24px; }

/* ------------------------------------------------------------ configuración */
.config { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.menu-config { display: flex; flex-direction: column; gap: 3px; padding: 8px; position: sticky; top: 92px; }
.menu-config button {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--tx-2); text-align: left;
}
.menu-config button:hover { background: var(--muted); color: var(--tx); }
.menu-config button.activo { background: var(--p-10); color: var(--primario); }
.apariencia { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.color-campo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--borde); }
.color-campo input[type=color] { width: 42px; height: 42px; border: 0; padding: 0; border-radius: 12px; cursor: pointer; background: none; flex: 0 0 auto; }
.color-campo input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-campo input[type=color]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; }
.color-campo div { min-width: 0; flex: 1; }
.color-campo strong { display: block; font-size: 13.5px; }
.color-campo small { display: block; font-size: 12px; color: var(--tx-3); }
.color-campo code { font-size: 12px; color: var(--tx-2); font-family: ui-monospace, Consolas, monospace; }
.logo-edicion { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; border: 1px dashed var(--borde-2); background: var(--muted); }
.logo-edicion .logo-grande { background: #fff; }
.muestra { overflow: hidden; position: sticky; top: 92px; }
.muestra-app { display: grid; grid-template-columns: 96px 1fr; min-height: 300px; }
.muestra-lat { background: linear-gradient(180deg, color-mix(in srgb, var(--primario) 72%, var(--profundo)), var(--profundo)); padding: 14px 10px; display: flex; flex-direction: column; gap: 7px; }
.muestra-lat i { display: block; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, .22); }
.muestra-lat i.act { background: var(--acento); height: 16px; }
.muestra-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--fondo); }
.muestra-cuerpo h4 { font-size: 19px; }
.ficha-fuente { font-family: var(--fuente-titulos); }

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1240px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjetas-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apariencia { grid-template-columns: 1fr; }
  .muestra { position: static; }
}
@media (max-width: 1080px) {
  .rejilla-2, .rejilla-2b { grid-template-columns: 1fr; }
  .resumen-periodo { grid-template-columns: 1fr; }
  .resumen-periodo .der { border-left: 0; border-top: 1px solid var(--borde); border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .hero { grid-template-columns: 1fr; }
  .hero-figuras { display: none; }
  .config { grid-template-columns: 1fr; }
  .menu-config { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; width: var(--lateral); transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--sombra-alta); }
  body.menu-abierto .lateral { transform: none; }
  body.menu-abierto::after { content: ''; position: fixed; inset: 0; background: rgba(6, 15, 35, .4); z-index: 35; }
  .solo-movil { display: inline-grid !important; }
  .barra { padding: 12px 16px; }
  .barra-titulo h1 { font-size: 21px; }
  .barra-titulo p { display: none; }
  .pildora-demo, .btn-empresa span { display: none; }
  .contenido { padding: 4px 16px 40px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo, .campo.c3, .campo.c4, .campo.c8 { grid-column: span 12; }
  .colores { grid-template-columns: 1fr; }
  .hero { padding: 24px 20px; }
  .hero h2 { font-size: 28px; }
  .pasos li { font-size: 0; }
  .pasos li:not(:last-child)::after { margin: 0 4px; }
}
@media (max-width: 560px) {
  .kpis, .tarjetas-ev { grid-template-columns: 1fr; }
  .pares { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ funciones a la medida */
.nav a .nuevo {
  margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--deco-1) 85%, white); color: #5b4300;
}
.nav a .nuevo + .contador { margin-left: 6px; }
.ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.idea { padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s; }
.idea:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(13, 21, 38, .05), 0 20px 40px -22px color-mix(in srgb, var(--primario) 70%, transparent); }
.idea-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.idea h4 { font-size: 16px; font-weight: 700; }
.idea p { color: var(--tx-2); font-size: 13.5px; flex: 1; }
.idea .btn { align-self: flex-start; }
@media (max-width: 1240px) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ideas { grid-template-columns: 1fr; } }

/* cerrar sesión, junto al nombre en el menú */
.usuario .salir {
  margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .8); display: grid; place-items: center; cursor: pointer;
}
.usuario .salir:hover { background: rgba(255, 255, 255, .14); color: #fff; }