/* UNIPROFIT · Agente IA. Identidad UNIPROFIT: verde plano sobre oscuro (o sobre claro, según el tema), Space Grotesk para la marca,
   Geist, minimalista. Sin dependencias. Tipografía servida desde /panel/fuentes (Geist, licencia SIL OFL).
   Los nombres --dorado* quedan como alias de --acento* para no reescribir cada regla. */

@font-face {
  font-family: 'Geist';
  src: url('/panel/fuentes/Geist.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/panel/fuentes/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/panel/fuentes/GeistMono.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fondo: #080c0a;
  --fondo-2: #0c110e;
  --fondo-3: #111814;
  --fondo-4: #172019;
  --superficie: #0e1410;
  --superficie-2: #141b17;
  --borde: rgba(255, 255, 255, 0.08);
  --borde-2: rgba(255, 255, 255, 0.14);
  --texto: #f3f8f5;
  --texto-2: #a3ada7;
  --texto-3: #6f7a74;
  --acento: #22e58c;
  --acento-2: #6df2b4;
  --acento-rgb: 34, 229, 140;
  --acento-tinte: rgba(34, 229, 140, 0.12);
  --acento-texto: #06140d;
  --dorado: var(--acento);
  --dorado-2: var(--acento-2);
  --dorado-tinte: var(--acento-tinte);
  --dorado-texto: var(--acento-texto);
  --accionando: #f9b400;
  --azul: #2ee6d6;
  --azul-tinte: rgba(46, 230, 214, 0.14);
  --peligro: #ff5c5c;
  --peligro-tinte: rgba(255, 92, 92, 0.12);
  --ok: #3ddc84;
  --ok-tinte: rgba(61, 220, 132, 0.12);
  --atencion: #f5b301;
  --atencion-tinte: rgba(245, 179, 1, 0.12);
  --primario: var(--acento);
  --primario-texto: var(--acento-texto);
  --burbuja-entrante: #161d19;
  --burbuja-saliente: #0f3a2a;
  --hover: var(--hover);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radio: 14px;
  --radio-chico: 9px;
  --lateral: 250px;
  --sans: 'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --marca: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --visual: #0b2b20;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
}
html[data-tema="claro"] {
  color-scheme: light;
  --fondo: #f4f8f6;
  --fondo-2: #ffffff;
  --fondo-3: #eef3f0;
  --fondo-4: #e3eae6;
  --superficie: #ffffff;
  --superficie-2: #f7faf8;
  --borde: rgba(10, 30, 20, 0.09);
  --borde-2: rgba(10, 30, 20, 0.16);
  --texto: #0b1410;
  --texto-2: #4e5a54;
  --texto-3: #7a857f;
  --acento: #0fbf6e;
  --acento-2: #0a9b59;
  --acento-rgb: 15, 191, 110;
  --acento-tinte: rgba(15, 191, 110, 0.12);
  --acento-texto: #ffffff;
  --azul: #0891b2;
  --azul-tinte: rgba(8, 145, 178, 0.12);
  --peligro: #d93030;
  --peligro-tinte: rgba(217, 48, 48, 0.1);
  --ok: #0f9d58;
  --ok-tinte: rgba(15, 157, 88, 0.12);
  --atencion: #b7791f;
  --atencion-tinte: rgba(183, 121, 31, 0.12);
  --burbuja-entrante: #eef3f0;
  --burbuja-saliente: #dcf5e9;
  --hover: rgba(0, 0, 0, 0.03);
  --sombra: 0 10px 30px rgba(20, 40, 30, 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14.5px/1.5 var(--sans);
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
h1, h2, h3 { margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
h1 { font-family: var(--marca); font-size: 1.6rem; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: 1.08rem; }
h3 { font-size: 0.98rem; }
h4 { margin: 16px 0 8px; font-size: 0.9rem; color: var(--texto-2); font-weight: 600; }
p { margin: 0 0 10px; }
a { color: var(--dorado-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.suave { color: var(--texto-2); font-size: 0.92em; }
.centrado { text-align: center; }
.error { color: var(--peligro); }
.mono { font-family: var(--mono); font-size: 0.88em; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.cargando { padding-top: 40vh; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sin-margen { margin: 0; }
.cabecera-vista.compacta { margin-bottom: 14px; }
button.icono { padding: 6px; }
button.icono svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabla .etiqueta + .etiqueta { margin-left: 4px; }
::selection { background: rgba(var(--acento-rgb), 0.35); }

/* Controles */
input, textarea, select, button { font: inherit; color: inherit; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="month"], input[type="file"], textarea, select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borde-2);
  border-radius: var(--radio-chico);
  background: var(--fondo-2);
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px var(--dorado-tinte);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
input[type="checkbox"] { accent-color: var(--dorado); width: 16px; height: 16px; }
textarea { resize: vertical; line-height: 1.5; }
label { display: block; margin-bottom: 14px; font-size: 0.9em; color: var(--texto-2); font-weight: 500; }
label > input, label > textarea, label > select { margin-top: 6px; color: var(--texto); font-weight: 400; font-size: 1.05em; }
button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--borde-2);
  border-radius: var(--radio-chico);
  background: var(--fondo-3);
  color: var(--texto);
  cursor: pointer;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, opacity 0.15s;
}
button:hover, .boton:hover { background: var(--fondo-4); border-color: var(--borde-2); text-decoration: none; }
button:active, .boton:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: default; transform: none; }
button.primario, .boton.primario { background: var(--dorado); color: var(--dorado-texto); border-color: transparent; font-weight: 600; }
button.primario:hover, .boton.primario:hover { background: var(--dorado-2); }
button.secundario, .boton.secundario { background: transparent; }
button.secundario:hover, .boton.secundario:hover { background: var(--fondo-3); }
button.peligro { color: var(--peligro); }
button.peligro:hover { background: var(--peligro-tinte); border-color: rgba(255, 92, 92, 0.4); }
button.chico, .boton.chico { padding: 6px 11px; font-size: 0.86em; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px 22px;
  box-shadow: var(--sombra);
  margin-bottom: 18px;
}
.tarjeta > h2, .tarjeta > h3, .tarjeta > .fila.entre > h2, .tarjeta > .fila.entre > h3 { margin-bottom: 4px; }
.tarjeta > .fila.entre { margin-bottom: var(--esp-3); }
.fila { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.fila > input[type="search"] { flex: 1; min-width: 200px; }
.fila-check { display: flex; gap: 10px; align-items: flex-start; }
.fila-check input { margin-top: 3px; flex-shrink: 0; }
.grilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--esp-4); }
.grilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--esp-4); }
.acciones-form { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); flex-wrap: wrap; margin-top: 6px; }
/* Ficha de datos (bloque Base de la ficha del cliente en la administración) */
dl.grilla-3 { margin: 10px 0 12px; gap: 10px 18px; }
dl.grilla-3 dt { font-size: 0.8em; color: var(--texto-2); margin-bottom: 2px; }
dl.grilla-3 dd { margin: 0; overflow-wrap: anywhere; }
#base-botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* Etiquetas (pastillas con punto) */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 500;
  color: var(--texto-2);
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  white-space: nowrap;
  vertical-align: middle;
}
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.etiqueta.ok { color: var(--ok); background: var(--ok-tinte); border-color: rgba(61, 220, 132, 0.25); }
.etiqueta.atencion { color: var(--atencion); background: var(--atencion-tinte); border-color: rgba(var(--acento-rgb), 0.3); }
.etiqueta.peligro { color: var(--peligro); background: var(--peligro-tinte); border-color: rgba(255, 92, 92, 0.3); }
.etiqueta.azul { color: #7ea2ff; background: rgba(47, 107, 255, 0.14); border-color: rgba(47, 107, 255, 0.35); }
.globo {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--dorado);
  color: var(--dorado-texto);
  font-size: 0.72em;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.aviso {
  position: sticky;
  top: 12px;
  z-index: 5;
  padding: 10px 14px;
  border-radius: var(--radio-chico);
  background: var(--fondo-4);
  border: 1px solid var(--borde-2);
  box-shadow: var(--sombra);
  margin-bottom: 14px;
}
.aviso.error { border-color: rgba(255, 92, 92, 0.5); background: var(--peligro-tinte); }

/* Marca: isotipo SVG + nombre en texto (Space Grotesk) + pastilla de la unidad. Nunca se recorta; sigue el tema. */
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); }
.marca svg { width: 32px; height: 32px; flex-shrink: 0; }
.marca-texto { font-family: var(--marca); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1; }
.marca-texto b { color: var(--acento); font-weight: 700; }
.unidad { display: inline-block; padding: 3px 8px 2px; border-radius: 3px; background: var(--unidad); color: var(--unidad-texto); font-family: var(--marca); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; vertical-align: middle; white-space: nowrap; }

/* Login: la unidad en grande a la izquierda con el motion graphic de la función; formulario a la derecha */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.login-visual { background: #0a0a0a; border-right: 1px solid #232325; color: #ededed; padding: 40px 56px 32px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; min-height: 100vh; }
.login-visual .marca { color: #f5faf7; }
.login-visual .marca-texto b { color: #22e58c; }
.login-kicker { margin: 0 0 6px; font-family: var(--marca); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #22e58c; }
.login-visual-titulo h2 { margin: 0 0 10px; font-family: var(--marca); font-size: clamp(3rem, 6vw, 5.2rem); line-height: 0.95; letter-spacing: -0.04em; color: #f5faf7; }
.login-visual-titulo p:last-child { margin: 0; color: #a1a1a1; font-size: 1.05em; max-width: 46ch; }
.login-motion { width: 100%; max-width: 640px; height: auto; align-self: center; justify-self: center; }
.mg-linea { fill: none; stroke: #2a2a2d; stroke-width: 1.5; }
.mg-destello { fill: none; stroke: #22e58c; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 14 200; stroke-dashoffset: 14; }
.mg-texto { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; fill: #8a8a8a; }
.mg-centro { fill: #22e58c; font-weight: 700; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .mg-destello, .login-motion animate { display: none; } }
.login-visual-pie { margin: 0; font-size: 0.85em; color: #707070; }
.login-panel { position: relative; display: grid; place-items: center; padding: 40px 24px; background: var(--fondo); }
.login-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--puntos, #2a2a2d) 1.2px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%); pointer-events: none; }
html[data-tema="claro"] .login-panel::before { --puntos: #cfcfcf; }
.login-tarjeta { position: relative; width: 100%; max-width: 400px; margin: 0; padding: 32px 30px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; }
.login-donde { margin: 0 0 22px; font-size: 0.9em; color: var(--texto-2); display: flex; align-items: center; gap: 10px; }
.login-tarjeta h1 { font-size: 2rem; margin-bottom: 22px; }
.login-tarjeta label { margin-bottom: 16px; }
.login-tarjeta button { width: 100%; margin-top: 6px; padding: 13px; font-size: 1.02em; }
.login-ayuda { margin: 18px 0 0; font-size: 0.85em; color: var(--texto-3); }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-visual { min-height: 0; padding: 22px 22px 18px; grid-template-rows: auto auto auto; gap: 10px; }
  .login-visual-titulo h2 { font-size: 2.6rem; }
  .login-visual-titulo p:last-child, .login-visual-pie { display: none; }
  .login-motion { max-width: 420px; }
  .login-panel { align-items: start; padding-top: 28px; }
}

/* Aplicación: barra lateral + contenido */
.app { min-height: 100%; display: flex; }
.lateral {
  width: var(--lateral);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  background: var(--fondo-2);
  border-right: 1px solid var(--borde);
}
.lateral-marca { padding: 0 8px 18px; }
.lateral-marca .marca { flex-wrap: wrap; gap: 8px 10px; }
.lateral-marca .unidad { margin-left: 42px; }
.lateral-contexto {
  margin: 0 4px 14px;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  line-height: 1.25;
}
.lateral-contexto .suave { display: block; font-size: 0.74em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); margin-bottom: 3px; }
.lateral-contexto strong { display: block; font-size: 0.98em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radio-chico);
  color: var(--texto-2);
  font-weight: 500;
  font-size: 0.95em;
  transition: background 0.12s, color 0.12s;
}
.nav a:hover { background: var(--fondo-3); color: var(--texto); text-decoration: none; }
.nav a.activa { background: var(--dorado-tinte); color: var(--dorado-2); }
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.nav a .globo { margin-left: auto; }
.lateral-pie { border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--acento);
  color: var(--dorado-texto);
  font-weight: 700;
  font-size: 0.85em;
  flex-shrink: 0;
}
.lateral-usuario { flex: 1; min-width: 0; line-height: 1.2; }
.lateral-usuario strong { display: block; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario span { font-size: 0.78em; color: var(--texto-3); }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contenido { flex: 1; padding: 28px 32px 40px; max-width: 1320px; width: 100%; }
.cabecera-vista { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera-vista p { margin: 4px 0 0; color: var(--texto-2); }
.cabecera-vista .fila { flex-wrap: nowrap; }

/* Tablero (KPIs) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-4); margin-bottom: var(--esp-4); }
.kpi {
  position: relative;
  padding: 18px 20px 16px;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  overflow: hidden;
  color: inherit;
  display: block;
}
a.kpi:hover { text-decoration: none; border-color: var(--borde-2); }
.kpi::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: var(--dorado); opacity: 0.55; border-radius: 2px 2px 0 0; }
.kpi.azul::after { background: var(--azul); }
.kpi.ok::after { background: var(--ok); }
.kpi.peligro::after { background: var(--peligro); }
.kpi .kpi-titulo { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); font-weight: 600; }
.kpi .kpi-valor { font-size: 2.05rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .kpi-detalle { font-size: 0.85em; color: var(--texto-2); }
.dos-columnas { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--esp-4); align-items: start; }
.lista-resumen { list-style: none; margin: 0; padding: 0; }
.lista-resumen li { display: flex; gap: var(--esp-3); align-items: center; padding: var(--esp-3) 0; border-bottom: 1px solid var(--borde); cursor: pointer; }
.lista-resumen li:last-child { border-bottom: 0; }
.lista-resumen li:hover .nombre { color: var(--dorado-2); }
.lista-resumen .cuerpo { flex: 1; min-width: 0; }
.lista-resumen .nombre { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.lista-resumen .ultimo { color: var(--texto-2); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-resumen .fecha { color: var(--texto-3); font-size: 0.82em; white-space: nowrap; }
.datos { list-style: none; margin: 0; padding: 0; }
.datos li { display: flex; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-2) 0; border-bottom: 1px solid var(--borde); font-size: 0.95em; }
.datos li:last-child { border-bottom: 0; }
.datos li > span:first-child { color: var(--texto-2); }

/* Conversaciones */
.conversaciones {
  display: grid;
  grid-template-columns: 330px 1fr;
  --ficha-ancho: 320px;
  gap: 18px;
  height: calc(100vh - 150px);
  min-height: 480px;
}
.lista-panel {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.lista-cabecera { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--borde); }
.lista { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.lista li { padding: 10px 12px; border-radius: var(--radio-chico); cursor: pointer; margin-bottom: 2px; border-left: 3px solid transparent; }
.lista li:hover { background: var(--fondo-3); }
.lista li.activa { background: var(--dorado-tinte); border-left-color: var(--dorado); }
.lista .linea1 { display: flex; justify-content: space-between; gap: 8px; }
.lista .nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .fecha { color: var(--texto-3); font-size: 0.8em; white-space: nowrap; }
.lista .linea2 { display: flex; justify-content: space-between; gap: 8px; color: var(--texto-2); font-size: 0.88em; }
.lista .ultimo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .linea2 > span:last-child { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.chat {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.chat-vacio { align-self: center; justify-self: center; color: var(--texto-3); }
.chat-cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; background: var(--fondo-2); }
.chat-titulo { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 120px; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: transparent; }
.burbuja {
  max-width: 76%;
  padding: 9px 13px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.burbuja.entrante { align-self: flex-start; background: var(--burbuja-entrante); border-bottom-left-radius: 4px; }
.burbuja.saliente { align-self: flex-end; background: var(--burbuja-saliente); border-bottom-right-radius: 4px; }
.burbuja .meta { display: block; margin-top: 4px; font-size: 0.72em; color: var(--texto-3); text-align: right; }
.burbuja .tipo { font-size: 0.8em; color: var(--texto-2); font-style: italic; }
.chat-envio { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borde); background: var(--fondo-2); }
.chat-envio textarea { flex: 1; }
.solo-movil { display: none; }

/* Tablas y listas */
.tabla-envoltorio { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.tabla th { text-align: left; padding: 8px 10px; font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); font-weight: 600; border-bottom: 1px solid var(--borde-2); white-space: nowrap; }
.tabla td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--hover); }
.tabla th.num, .tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td > strong, .tabla td > a > strong { white-space: nowrap; }
.tabla td.detalle { font-family: var(--mono); font-size: 0.82em; color: var(--texto-2); max-width: 380px; word-break: break-word; }
.tabla .botones { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.tabla tr.clicable { cursor: pointer; }
.tabla tr.clicable:hover td { background: var(--dorado-tinte); }
.tabla td .fila-check { margin: 0; }
.tabla td a strong { color: var(--texto); }
.tabla td a:hover strong { color: var(--dorado-2); }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { padding: var(--esp-3) 0; border-bottom: 1px solid var(--borde); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple .cabecera { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lista-simple .cuerpo { white-space: pre-wrap; margin-top: 4px; color: var(--texto-2); }
.lista-simple .botones { display: flex; gap: 8px; margin-top: 10px; }
.lista-simple pre { margin: 8px 0 0; padding: 10px 12px; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio-chico); overflow-x: auto; font-size: 0.84em; font-family: var(--mono); }
.lista-compacta { list-style: none; margin: 0; padding: 0; }
.lista-compacta li { margin-bottom: 4px; }
.vacio { color: var(--texto-3); padding: 18px 0; text-align: center; }

/* Administración de la plataforma */
.barra-admin {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--dorado);
  color: var(--dorado-texto);
  font-size: 0.93em;
  font-weight: 500;
}
.barra-admin button { background: rgba(0, 0, 0, 0.18); color: var(--dorado-texto); border-color: transparent; }
.barra-admin button:hover { background: rgba(0, 0, 0, 0.3); }
fieldset {
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 12px 16px 2px;
  margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.012);
}
legend { padding: 0 8px; font-weight: 600; font-size: 0.86em; color: var(--dorado-2); text-transform: uppercase; letter-spacing: 0.06em; }
.aviso-contrasena {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--acento-rgb), 0.45);
  border-radius: var(--radio-chico);
  background: var(--dorado-tinte);
}
.aviso-contrasena code { font-size: 1.05em; user-select: all; font-family: var(--mono); }
.fila > label.fila { margin: 0; }
.fila > label.fila > input, .fila > label.fila > select { width: auto; margin: 0 0 0 6px; }
.volver { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-2); font-size: 0.9em; margin-bottom: 12px; }
.volver:hover { color: var(--dorado-2); text-decoration: none; }

/* Pantallas medianas y móvil */
@media (max-width: 1100px) {
  .dos-columnas, .tres-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; padding: 12px 12px 8px; border-right: 0; border-bottom: 1px solid var(--borde); }
  .lateral-marca { padding: 2px 4px 10px; }
  .lateral-contexto { display: none; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 6px; }
  .nav a { padding: 7px 10px; font-size: 0.9em; white-space: nowrap; }
  .lateral-pie { border-top: 0; padding-top: 6px; margin-top: 0; }
  .contenido { padding: 16px 16px 30px; }
  .cabecera-vista { margin-bottom: 14px; }
  .conversaciones, .conversaciones.con-ficha { grid-template-columns: 1fr; height: calc(100vh - 230px); }
  .conversaciones.viendo-chat .lista-panel, .conversaciones.viendo-chat .chat-vacio { display: none; }
  .conversaciones:not(.viendo-chat) .chat, .conversaciones:not(.viendo-chat) .ficha { display: none; }
  .conversaciones.viendo-chat.con-ficha .chat { display: none; }
  .solo-movil { display: inline-flex; }
  .burbuja { max-width: 90%; }
  .tarjeta { padding: 16px; }
  .tabla-envoltorio { margin: 0 -16px; padding: 0 16px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 14px 14px 12px; }
  .kpi .kpi-valor { font-size: 1.6rem; }
  .kpi .kpi-titulo { font-size: 0.7em; }
}

/* Configuración guiada del agente (agente.js): pestañas, opciones, chips, días */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; padding: 4px; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 12px; width: fit-content; max-width: 100%; }
.pestanas button { border: 0; background: transparent; color: var(--texto-2); padding: 8px 14px; border-radius: 8px; font-weight: 500; }
.pestanas button:hover { background: var(--fondo-3); color: var(--texto); }
.pestanas button.activa { background: var(--dorado); color: var(--dorado-texto); font-weight: 600; }
.pestana { padding: 24px 26px 18px; }
.pestana > h2 { margin-bottom: 2px; }
.pestana > .suave { margin-bottom: 20px; }
.formulario label { margin-bottom: var(--esp-4); }
.formulario .grilla-2, .formulario .grilla-3 { gap: 0 var(--esp-6); }
.campo { margin-bottom: var(--esp-5); }
.rotulo { display: block; font-size: var(--fs-sm); color: var(--texto-2); font-weight: 500; margin-bottom: var(--esp-2); }
.ayuda { display: block; margin-top: 6px; font-size: 0.82em; color: var(--texto-3); font-weight: 400; }
label > .ayuda { margin-top: 6px; }
.subseccion { padding: 16px 18px 4px; margin: 0 0 20px; border: 1px dashed var(--borde-2); border-radius: var(--radio-chico); background: rgba(255, 255, 255, 0.015); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones.vertical { flex-direction: column; gap: 6px; max-width: 560px; }
.opcion { position: relative; margin: 0; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde-2); background: var(--fondo-2); color: var(--texto-2); font-size: 0.93em; font-weight: 500; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.opcion > span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--texto-3); flex-shrink: 0; }
.opcion:hover > span { border-color: rgba(255, 255, 255, 0.28); color: var(--texto); }
.opcion input:checked + span { background: var(--dorado-tinte); border-color: rgba(var(--acento-rgb), 0.6); color: var(--dorado-2); }
.opcion input:checked + span strong { color: var(--dorado-2); }
.opcion input:checked + span::before { background: var(--dorado); border-color: var(--dorado); }
.opcion input:focus-visible + span { outline: 2px solid var(--dorado); outline-offset: 2px; }
.opciones.vertical .opcion > span { border-radius: var(--radio-chico); width: 100%; align-items: flex-start; padding: 10px 14px; }
.opcion .opcion-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion .opcion-cuerpo strong { font-weight: 600; color: var(--texto); }
.opcion .opcion-cuerpo small { font-size: 0.86em; color: var(--texto-3); font-weight: 400; line-height: 1.35; }
.opciones:not(.vertical) .opcion .opcion-cuerpo small { display: none; }
.opciones.vertical .opcion > span::before { margin-top: 5px; }
.opciones.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; max-width: none; }
.opciones.tarjetas .opcion > span { width: 100%; height: 100%; border-radius: var(--radio); flex-direction: column; align-items: flex-start; padding: 14px 16px; gap: 6px; }
.opciones.tarjetas .opcion > span::before { display: none; }
.opciones.tarjetas .opcion .opcion-cuerpo small { display: block; }
.opciones.tarjetas .costo { margin-top: auto; font-size: 0.82em; color: var(--dorado-2); font-family: var(--mono); }
.opciones.tarjetas .opcion.actual > span { box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), 0.35); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--borde-2); border-radius: var(--radio-chico); background: var(--fondo-2); min-height: 46px; cursor: text; }
.chips:focus-within { border-color: var(--dorado); box-shadow: 0 0 0 3px var(--dorado-tinte); }
.chips-lista { display: contents; list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--fondo-4); border: 1px solid var(--borde-2); font-size: 0.9em; max-width: 100%; }
.chip span { white-space: normal; overflow-wrap: anywhere; }
.chips.largas .chip { border-radius: 8px; width: 100%; padding: 8px 8px 8px 12px; }
.chips.largas .chip span { white-space: normal; max-width: none; flex: 1; }
.chip-quitar { border: 0; background: transparent; color: var(--texto-3); padding: 0 4px; font-size: 1.1em; line-height: 1; cursor: pointer; border-radius: 50%; }
.chip-quitar:hover { color: var(--peligro); background: var(--peligro-tinte); }
.chip-entrada { flex: 1; min-width: 180px; border: 0 !important; background: transparent !important; padding: 6px 4px !important; box-shadow: none !important; }
.chips.largas .chip-entrada { width: 100%; }
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dia { position: relative; margin: 0; cursor: pointer; }
.dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dia span { display: inline-block; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--borde-2); background: var(--fondo-2); color: var(--texto-2); font-weight: 500; font-size: 0.9em; }
.dia.activo span { background: var(--dorado-tinte); border-color: rgba(var(--acento-rgb), 0.6); color: var(--dorado-2); }
.detalle { margin-top: 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 10px 14px; }
.detalle summary { cursor: pointer; font-weight: 500; color: var(--texto-2); }
.detalle[open] summary { margin-bottom: 8px; color: var(--texto); }
.prompt-generado { margin: 0; padding: 14px; background: var(--fondo-2); border-radius: var(--radio-chico); white-space: pre-wrap; font-family: var(--mono); font-size: 0.82em; line-height: 1.55; max-height: 480px; overflow: auto; color: var(--texto-2); }
input[type="time"] { width: 100%; padding: 9px 12px; border: 1px solid var(--borde-2); border-radius: var(--radio-chico); background: var(--fondo-2); color: var(--texto); }
textarea { min-height: 72px; }
.fila-bloqueo { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-bottom: 14px; }
@media (max-width: 860px) { .fila-bloqueo { grid-template-columns: 1fr; } }
.aviso-tope { margin: -6px 0 18px; padding: 10px 14px; border-radius: var(--radio-chico); background: var(--peligro-tinte); border: 1px solid rgba(255, 92, 92, 0.4); color: var(--texto); font-size: 0.93em; }
.lista-simple li.sin-leer .cabecera > span:first-child { font-weight: 600; }
.lista-simple li.sin-leer .cabecera > span:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dorado); margin-right: 8px; vertical-align: middle; }
.telegram-paso { margin-top: 12px; padding: 14px 16px; border: 1px dashed rgba(var(--acento-rgb), 0.5); border-radius: var(--radio-chico); background: var(--dorado-tinte); }
.telegram-paso .boton { margin: 6px 0; }
.telegram-paso code { display: block; margin: 6px 0 10px; word-break: break-all; color: var(--texto-2); }

/* Mejoras */
.mejoras { display: flex; flex-direction: column; gap: var(--esp-3); }
.mejora { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: var(--esp-3) var(--esp-4); background: var(--fondo-2); }
.mejora .cabecera { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mejora input[type="text"] { font-weight: 600; }
.mejora textarea { min-height: 96px; }
.mejora .botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.mejora .origen { font-size: 0.85em; color: var(--texto-3); margin-top: 4px; }
.mejora .marca-completar { color: var(--peligro); font-size: 0.85em; }
.chat-analisis { padding: 8px 16px; border-bottom: 1px solid var(--borde); background: var(--fondo-2); font-size: 0.88em; color: var(--texto-2); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lista .animo { font-size: 0.85em; }
.nota { display: inline-block; min-width: 26px; text-align: center; padding: 0 5px; border-radius: 6px; font-size: 0.78em; font-weight: 600; background: var(--fondo-3); border: 1px solid var(--borde); }
.nota.buena { color: var(--ok); border-color: rgba(61, 220, 132, 0.3); }
.nota.mala { color: var(--peligro); border-color: rgba(255, 92, 92, 0.3); }

/* Conocimiento */
.plantillas { margin-bottom: 16px; }
.plantillas .fila { gap: 6px; }
.plantillas button { font-size: 0.86em; padding: 6px 11px; }
.temas { display: flex; flex-direction: column; gap: 6px; }
.tema summary { cursor: pointer; padding: 8px 4px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.tema summary::-webkit-details-marker { display: none; }
.tema summary::before { content: '▸'; color: var(--texto-3); margin-right: 8px; }
.tema[open] summary::before { content: '▾'; }
.tema ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 22px; }
.tema li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 0.93em; }
.tema li:last-child { border-bottom: 0; }
.tema li a { color: var(--texto); }
.tema li a:hover { color: var(--dorado-2); }
#detalle-secciones .cuerpo { white-space: pre-wrap; }
.tema summary > span:first-of-type { flex: 1; text-align: left; }

/* Sala de prueba */
.prueba { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; height: calc(100vh - 170px); min-height: 480px; }
.prueba-chat { height: 100%; }
.prueba-detalle { position: sticky; top: 16px; max-height: calc(100vh - 170px); overflow: auto; }
.burbuja .acciones { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.burbuja .acciones button { padding: 2px 8px; font-size: 0.78em; opacity: 0.75; }
.burbuja .acciones button:hover { opacity: 1; }
.burbuja.pensando { color: var(--texto-3); font-style: italic; }
.cita { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--dorado); background: var(--fondo-2); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; white-space: pre-wrap; color: var(--texto-2); }
@media (max-width: 1100px) { .prueba { grid-template-columns: 1fr; height: auto; } .prueba-chat { height: 60vh; } .prueba-detalle { position: static; max-height: none; } }

/* Flujo (mapa del bot) */
.flujo-mapa { position: relative; display: flex; flex-direction: column; gap: 56px; padding: 10px 0 20px; }
.flujo-lineas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.flujo-lineas .linea { fill: none; stroke: rgba(var(--acento-rgb), 0.35); stroke-width: 1.5; stroke-dasharray: 5 5; animation: fluir 1.2s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -20; } }
.flujo-fila { position: relative; z-index: 1; display: flex; gap: 14px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.flujo-fila.medio { flex-wrap: nowrap; align-items: stretch; }
.flujo-fila.medio .flecha { align-self: center; }
.flecha { flex: 0 0 26px; height: 2px; background: rgba(var(--acento-rgb), 0.6); position: relative; }
.flecha::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid rgba(var(--acento-rgb), 0.8); }
.nodo { display: flex; gap: 12px; align-items: flex-start; min-width: 190px; max-width: 300px; flex: 1 1 200px; padding: var(--esp-3) var(--esp-4); border-radius: var(--radio); border: 1px solid var(--borde-2); background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); transition: border-color 0.15s, transform 0.15s; }
.nodo:hover { border-color: rgba(var(--acento-rgb), 0.6); transform: translateY(-2px); text-decoration: none; }
.nodo.chico { flex: 0 1 190px; min-width: 160px; }
.nodo.apagado { opacity: 0.6; border-style: dashed; }
.nodo.vivo { border-color: rgba(61, 220, 132, 0.6); box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.12), var(--sombra); }
.nodo-icono { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--dorado-tinte); color: var(--dorado-2); }
.nodo.vivo .nodo-icono { background: var(--ok-tinte); color: var(--ok); }
.nodo-icono svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nodo-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nodo-titulo { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.nodo-dato { font-size: 1.1em; font-weight: 600; letter-spacing: -0.01em; }
.nodo-detalle { font-size: 0.83em; color: var(--texto-2); line-height: 1.35; }
.nodo-lista { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 0.85em; }
.nodo-item { display: flex; justify-content: space-between; gap: 8px; }
.nodo-item.inactiva { color: var(--texto-3); text-decoration: line-through; }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: latir 1.6s ease-out infinite; }
@keyframes latir { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } }
@media (max-width: 1100px) {
  .flujo-mapa { gap: 24px; }
  .flujo-lineas { display: none; }
  .flujo-fila.medio { flex-wrap: wrap; }
  .flecha { display: none; }
  .nodo, .nodo.chico { flex: 1 1 240px; max-width: none; }
}

/* CRM (bloque 6): filtros de la lista, "lo atiendo yo", ficha del cliente, leads y tickets */
.lista-filtros { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--borde); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.lista-filtros::-webkit-scrollbar { display: none; }
.lista-filtros button { border: 1px solid transparent; background: transparent; color: var(--texto-2); padding: 4px 9px; border-radius: 999px; font-size: 0.82em; font-weight: 500; white-space: nowrap; }
.lista-filtros button:hover { background: var(--fondo-3); color: var(--texto); }
.lista-filtros button.activa { background: var(--dorado-tinte); color: var(--dorado-2); border-color: rgba(var(--acento-rgb), 0.35); }
.etiquetas-mini { display: flex; flex-wrap: wrap; gap: 4px; }
.etiqueta-mini { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--fondo-4); border: 1px solid var(--borde-2); font-size: 0.78em; color: var(--texto-2); white-space: nowrap; }
.etiqueta-mini.interesado, .etiqueta-mini.compro { color: var(--ok); border-color: rgba(61, 220, 132, 0.3); background: var(--ok-tinte); }
.etiqueta-mini.reclamo, .etiqueta-mini.spam { color: var(--peligro); border-color: rgba(255, 92, 92, 0.3); background: var(--peligro-tinte); }
.etiqueta-mini.seguir { color: var(--dorado-2); border-color: rgba(var(--acento-rgb), 0.3); background: var(--dorado-tinte); }
.etiqueta-mini button { border: 0; background: transparent; color: inherit; padding: 0 0 0 2px; font-size: 1.05em; line-height: 1; cursor: pointer; opacity: 0.7; }
.etiqueta-mini button:hover { opacity: 1; color: var(--peligro); }
.etiquetas-mini.sugeridas { margin-top: 8px; }
.etiquetas-mini.sugeridas .etiqueta-mini { cursor: pointer; border-style: dashed; }
.etiquetas-mini.sugeridas .etiqueta-mini:hover { border-color: var(--dorado); color: var(--dorado-2); }
.lista .linea3 { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.menu { position: relative; }
.menu-opciones { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; display: flex; flex-direction: column; padding: 6px; background: var(--superficie); border: 1px solid var(--borde-2); border-radius: var(--radio-chico); box-shadow: var(--sombra); }
.menu-opciones button { border: 0; background: transparent; color: var(--texto); text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 0.92em; }
.menu-opciones button:hover { background: var(--dorado-tinte); color: var(--dorado-2); }
.conversaciones.con-ficha { grid-template-columns: 330px 1fr var(--ficha-ancho); }
.ficha { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.ficha-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borde); background: var(--fondo-2); }
.ficha-cuerpo { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.ficha-bloque { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.ficha-bloque:last-child { border-bottom: 0; }
.ficha-bloque h3 { margin: 0 0 8px; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ficha-bloque .ayuda { margin: -4px 0 8px; }
.ficha-bloque .fila { margin-top: 8px; }
.ficha-bloque .fila > input[type="text"] { flex: 1; min-width: 0; }
.ficha-bloque textarea { width: 100%; min-height: 64px; }
.ficha-bloque select { width: 100%; }
.ficha-bloque .datos li { padding: 6px 0; font-size: 0.9em; }
.lista-simple.compacta li { padding: 6px 0; font-size: 0.9em; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.lista-simple.compacta li span { flex: 1; overflow-wrap: anywhere; }
.ficha-ticket { padding: var(--esp-2) var(--esp-3); border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo-2); margin-bottom: 8px; font-size: 0.9em; }
.ficha-ticket .cabecera { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin-bottom: 4px; }
.ficha-ticket .cabecera strong { font-family: var(--mono); font-size: 0.95em; }
.tabla select.enlinea { width: auto; min-width: 130px; padding: 5px 30px 5px 9px; font-size: 0.9em; }
.tabla td .resumen { display: block; color: var(--texto-3); font-size: 0.85em; margin-top: 2px; max-width: 420px; white-space: pre-wrap; }
.tabla td .notas { display: block; color: var(--texto-3); font-size: 0.85em; margin-top: 2px; max-width: 320px; white-space: pre-wrap; }
.tabla td.cliente strong { display: block; }
.tabla td.cliente .suave { font-size: 0.82em; }
.pestanas .contador { margin-left: 6px; font-size: 0.85em; opacity: 0.8; font-variant-numeric: tabular-nums; }

/* Estadísticas (bloque 7): gráficos SVG, barras horizontales, progreso del tope */
.dos-columnas.parejas { grid-template-columns: 1fr 1fr; margin-top: var(--esp-4); }
.tres-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); align-items: start; margin-top: var(--esp-4); }
.pestanas.sin-margen { margin-bottom: 0; }
#vista-estadisticas > .fila.entre { margin-bottom: var(--esp-4); }
#estadisticas-kpis { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { #estadisticas-kpis { grid-template-columns: repeat(2, 1fr); } }
.subtitulo { margin: var(--esp-4) 0 var(--esp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); font-weight: 600; }
.grafico { margin-top: 10px; }
.grafico-svg { width: 100%; height: auto; display: block; }
.grafico-svg .guia { stroke: var(--borde); stroke-width: 1; }
.grafico-svg .eje { fill: var(--texto-3); font-size: 11px; }
.grafico-svg .barra { opacity: 0.85; transition: opacity 0.15s; }
.grafico-svg .barra:hover { opacity: 1; }
.barras { list-style: none; margin: 0; padding: 0; }
.barra-h { display: grid; grid-template-columns: minmax(110px, 1.5fr) 2fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 0.9em; }
.barra-h-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h-pista { height: 8px; border-radius: 999px; background: var(--fondo-3); overflow: hidden; }
.barra-h-relleno { display: block; height: 100%; border-radius: 999px; background: var(--dorado); transition: width 0.3s; }
.barra-h.ok .barra-h-relleno { background: var(--ok); }
.barra-h.atencion .barra-h-relleno { background: var(--atencion); }
.barra-h.peligro .barra-h-relleno { background: var(--peligro); }
.barra-h.suave .barra-h-relleno { background: var(--texto-3); }
.barra-h-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.progreso { height: 10px; border-radius: 999px; background: var(--fondo-3); overflow: hidden; margin: 8px 0; }
.progreso-relleno { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width 0.3s; }
.progreso-relleno.atencion { background: var(--atencion); }
.progreso-relleno.peligro { background: var(--peligro); }
.p0 { width: 0%; }
.p5 { width: 5%; }
.p10 { width: 10%; }
.p15 { width: 15%; }
.p20 { width: 20%; }
.p25 { width: 25%; }
.p30 { width: 30%; }
.p35 { width: 35%; }
.p40 { width: 40%; }
.p45 { width: 45%; }
.p50 { width: 50%; }
.p55 { width: 55%; }
.p60 { width: 60%; }
.p65 { width: 65%; }
.p70 { width: 70%; }
.p75 { width: 75%; }
.p80 { width: 80%; }
.p85 { width: 85%; }
.p90 { width: 90%; }
.p95 { width: 95%; }
.p100 { width: 100%; }
@media (max-width: 1100px) { .tres-columnas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .dos-columnas.parejas, .tres-columnas { grid-template-columns: 1fr; } }

/* Canales (bloque 8) */
.dos-columnas.parejas.sin-margen-arriba { margin-top: 0; margin-bottom: var(--esp-4); }
#vista-canales input[type="color"] { width: 64px; height: 40px; padding: 4px; border: 1px solid var(--borde-2); border-radius: var(--radio-chico); background: var(--fondo-2); cursor: pointer; }
#vista-canales .chips .secundario { margin-left: auto; }
#vista-canales .fila > input[type="password"] { flex: 1; min-width: 180px; }

/* Asistente paso a paso (Canales › Telegram) */
.pasos { display: flex; flex-direction: column; gap: var(--esp-3); margin: var(--esp-3) 0; }
.paso { display: flex; gap: var(--esp-4); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo-2); }
.paso.apagado { opacity: 0.55; }
.paso.listo { border-color: rgba(61, 220, 132, 0.35); }
.paso-numero { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--dorado); color: var(--dorado-texto); }
.paso.listo .paso-numero { background: var(--ok); color: #06210f; }
.paso-cuerpo { flex: 1; min-width: 0; }
.paso-cuerpo h3 { margin: 2px 0 6px; font-size: 1em; }
.paso-cuerpo p { margin: 0 0 8px; }
.comandos { margin: 8px 0; padding-left: 20px; }
.comandos li { margin-bottom: 6px; }
.comandos code, .paso code { font-family: var(--mono); font-size: 0.9em; padding: 2px 7px; border-radius: 6px; background: var(--fondo-4); border: 1px solid var(--borde-2); user-select: all; }
.paso .detalle { margin-top: 8px; background: var(--fondo-3); }
.paso .detalle summary { color: var(--texto); }
.paso .detalle p { margin: 8px 0 4px; line-height: 1.5; }
.paso .formulario label { margin-bottom: 14px; }

/* Guías con esquemas (Canales › WhatsApp) */
.guia-imagen { display: block; width: 100%; max-width: 760px; height: auto; margin: 10px 0 8px; border: 1px solid var(--borde-2); border-radius: var(--radio-chico); background: #f4f5f8; }
.aviso-caja { margin: 12px 0 16px; padding: 14px 18px; border: 1px solid rgba(var(--acento-rgb), 0.35); border-radius: var(--radio-chico); background: var(--dorado-tinte); line-height: 1.5; }
.aviso-caja ul { margin: 8px 0 0; padding-left: 20px; }
.aviso-caja li { margin-bottom: 6px; }
.prompt-generado.compacta { max-height: none; padding: 8px 10px; margin: 6px 0 8px; font-size: 0.85em; white-space: pre-wrap; word-break: break-all; }
.tarjeta.compacta-abajo { margin-bottom: var(--esp-4); }
.paso .grilla-2 label { display: flex; flex-direction: column; }

/* Campañas */
.tarjeta-interna { margin: var(--esp-3) 0; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo-2); }
#campana-plantilla-cuerpo:empty { display: none; }

/* Tema claro/oscuro */
.boton-tema { margin-right: 6px; }
.boton-tema .sol, .boton-tema .luna { display: none; }
html[data-tema="claro"] .boton-tema .sol { display: block; }
html:not([data-tema="claro"]) .boton-tema .luna { display: block; }
html[data-tema="claro"] .kpi::after { opacity: 0.9; }
html[data-tema="claro"] .burbuja.saliente { color: #0b1410; }
html[data-tema="claro"] .guia-imagen { background: #fff; }

/* ======================================================================
   Sistema UNIPROFIT (rige sobre todo lo anterior). Referencia: paneles sobrios tipo Vercel / Cloudflare.
   - Base neutra (gris casi negro / blanco). Sin transparencias, sin sombras, esquinas 6 px.
   - El verde de marca aparece SÓLO en: el logo, la pastilla de la unidad, el indicador del menú activo,
     el foco y los estados positivos. Nunca en botones ni en fondos grandes.
   - Botones primarios: blanco sobre oscuro / negro sobre claro (como Vercel). Secundarios: sólo borde.
   - Menú angosto (208 px), íconos de 16 px, texto de 13 px. Contenido centrado con ancho máximo.
   ====================================================================== */
:root {
  /* Tokens de espaciado, tipografía y alturas: KPIs, tarjetas, tablas, formularios, botones e inputs miden con esto.
     Espaciado: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48. Tipografía: xs rótulos en mayúsculas y etiquetas, sm texto
     secundario y botones chicos, md cuerpo y controles, lg títulos de tarjeta, xl título de vista, 2xl número de KPI.
     Alturas: todos los controles (botón, input, select) miden lo mismo; las filas de tabla también. */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-7: 32px; --esp-8: 48px;
  --fs-xs: 10px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 16px; --fs-xl: 24px; --fs-2xl: 28px;
  --alto-control: 36px; --alto-control-chico: 28px; --alto-fila: 40px;
  --radio: 6px; --radio-chico: 6px; --lateral: 208px; --sombra: none;
  --fondo: #0a0a0a; --fondo-2: #0f0f10; --fondo-3: #161617; --fondo-4: #1f1f21;
  --superficie: #0a0a0a; --superficie-2: #111112;
  --borde: #232325; --borde-2: #2e2e31;
  --texto: #ededed; --texto-2: #a1a1a1; --texto-3: #707070;
  --hover: #161617;
  --primario: #ededed; --primario-texto: #0a0a0a;
  --unidad: #22e58c; --unidad-texto: #06140d;
  --burbuja-entrante: #161617; --burbuja-saliente: #0f2a1d;
}
html[data-tema="claro"] {
  --fondo: #fafafa; --fondo-2: #ffffff; --fondo-3: #f2f2f2; --fondo-4: #e8e8e8;
  --superficie: #ffffff; --superficie-2: #fafafa;
  --borde: #e6e6e6; --borde-2: #d4d4d4;
  --texto: #171717; --texto-2: #666666; --texto-3: #8f8f8f;
  --hover: #f2f2f2;
  --primario: #171717; --primario-texto: #ffffff;
  --acento: #0fa968; --acento-2: #0b8a55; --acento-rgb: 15, 169, 104; --acento-tinte: rgba(15, 169, 104, 0.1);
  --unidad: #0fa968; --unidad-texto: #ffffff;
  --burbuja-entrante: #f2f2f2; --burbuja-saliente: #e3f7ec;
}
* { box-shadow: none !important; }
body { font-size: var(--fs-md); }
h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-lg); }
a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--borde-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--texto-2); }
.nav a, .kpi, .lista-resumen li, .boton, .lista li, .tabla td a, .nodo, .chip a, .marca { text-decoration: none; }

/* Layout: menú angosto, contenido centrado */
.lateral { background: var(--fondo); border-right: 1px solid var(--borde); padding: 16px 10px 12px; }
.lateral-marca { padding: 2px 8px 14px; }
.lateral-marca .marca { flex-wrap: wrap; gap: 6px 8px; }
.lateral-marca .marca svg { width: 22px; height: 22px; }
.lateral-marca .marca-texto { font-size: 1.05rem; }
.lateral-marca .unidad { margin-left: 30px; }
.lateral-contexto { margin: 0 2px 10px; padding: 8px 10px; background: transparent; border: 1px solid var(--borde); border-radius: 6px; }
.lateral-contexto .suave { font-size: 0.68em; }
.lateral-contexto strong { font-size: 0.9em; }
/* Con cuatro grupos el menú entra en 800 px de alto; si no entra, se desplaza él y el pie queda a la vista */
.nav { gap: 1px; min-height: 0; overflow-y: auto; scrollbar-width: thin; margin: 0 -10px; padding: 0 10px; }
.nav a { gap: 9px; padding: 5px 10px; font-size: var(--fs-md); font-weight: 500; color: var(--texto-2); border-radius: 6px; }
.nav a svg { width: 16px; height: 16px; opacity: 1; }
.nav a:hover { background: var(--fondo-3); color: var(--texto); }
.nav a.activa { background: var(--fondo-3); color: var(--texto); font-weight: 500; position: relative; }
.nav a.activa::before { content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 2px; background: var(--acento); border-radius: 1px; }
.globo { background: var(--fondo-4); color: var(--texto); border-radius: 4px; font-size: 0.7em; padding: 0 5px; min-width: 18px; font-weight: 600; }
.lateral-pie { border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 10px; gap: 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--fondo-4); color: var(--texto); font-size: 0.72em; }
.lateral-usuario strong { font-size: 0.86em; }
.lateral-usuario span { font-size: 0.74em; }
.lateral-usuario span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-pie button.icono { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lateral-pie button.icono svg { width: 14px; height: 14px; }
.lateral-pie { gap: 6px; }
.barra-admin { background: var(--fondo-2); color: var(--texto-2); border-bottom: 1px solid var(--borde); padding: 7px 16px; font-size: 0.86em; }
.barra-admin strong { color: var(--texto); }
.barra-admin button { background: transparent; border: 1px solid var(--borde-2); color: var(--texto); padding: 4px 10px; font-size: 0.9em; }
.barra-admin button:hover { background: var(--fondo-3); }
.contenido { max-width: 1180px; margin: 0 auto; padding: var(--esp-7) 40px var(--esp-8); }
.cabecera-vista { margin-bottom: var(--esp-5); padding-bottom: var(--esp-4); border-bottom: 1px solid var(--borde); gap: var(--esp-4); }
.cabecera-vista p { font-size: var(--fs-md); }
@media (max-width: 860px) { .contenido { padding: var(--esp-4) var(--esp-4) var(--esp-7); } .lateral { padding: 10px 12px 6px; } }

/* Superficies: mismo fondo que la página, sólo borde. Tres niveles de relleno: tarjeta (20 × 24), KPI (16 × 20) y
   tarjeta interna —capacidad, plan, recarga, paso, mejora, cajita, nodo— (12 × 16). Entre tarjetas siempre 16. */
.tarjeta, .kpi, .lista-panel, .chat, .ficha, .paso, .mejora, .nodo, .tarjeta-interna, .detalle, .menu-opciones, .aviso, .aviso-caja, .ficha-ticket, .chips, .opcion > span, .opciones.vertical .opcion > span, .opciones.tarjetas .opcion > span, .guia-imagen, .pestana, .burbuja-demo, .tarjeta-demo, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="month"], input[type="file"], textarea, select, button, .boton, .prompt-generado { border-radius: 6px; }
.tarjeta { background: var(--fondo); border: 1px solid var(--borde); padding: var(--esp-5) var(--esp-6); margin-bottom: var(--esp-4); }
.tarjeta > h2, .tarjeta > .fila.entre > h2 { font-weight: 600; }
.tarjeta > .fila.entre { margin-bottom: var(--esp-3); }
.kpis { gap: var(--esp-4); margin-bottom: var(--esp-4); }
.kpi { background: var(--fondo); border: 1px solid var(--borde); padding: var(--esp-4) var(--esp-5); }
.kpi::after { display: none; }
.kpi .kpi-titulo { font-size: var(--fs-xs); letter-spacing: 0.06em; }
.kpi .kpi-valor { font-size: var(--fs-2xl); font-weight: 600; margin: var(--esp-1) 0 2px; }
.kpi .kpi-detalle { font-size: var(--fs-sm); }
.kpi.peligro .kpi-valor { color: var(--peligro); }
.kpi.ok .kpi-valor { color: var(--texto); }
a.kpi:hover { border-color: var(--borde-2); background: var(--fondo-2); }
.dos-columnas, .tres-columnas, .dos-columnas.parejas { gap: var(--esp-4); }
.dos-columnas.parejas, .tres-columnas { margin-top: var(--esp-4); }
.etiqueta { border-radius: 4px; padding: 1px 7px; font-size: var(--fs-xs); background: transparent; border: 1px solid var(--borde-2); color: var(--texto-2); }
.etiqueta::before { display: none; }
.etiqueta.ok { color: var(--ok); border-color: var(--ok); background: transparent; }
.etiqueta.atencion { color: var(--atencion); border-color: var(--atencion); background: transparent; }
.etiqueta.peligro { color: var(--peligro); border-color: var(--peligro); background: transparent; }
.etiqueta.azul { color: var(--texto-2); border-color: var(--borde-2); background: transparent; }
.etiqueta-mini { border-radius: 4px; background: transparent; border: 1px solid var(--borde-2); }
.chip { border-radius: 4px; background: var(--fondo-3); border: 1px solid var(--borde-2); }
.tabla { font-size: var(--fs-sm); }
.tabla th { background: transparent; color: var(--texto-3); font-size: var(--fs-xs); padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--borde); }
.tabla td { padding: var(--esp-2) var(--esp-3); height: var(--alto-fila); border-bottom: 1px solid var(--borde); }
.tabla tbody tr:hover td { background: var(--fondo-2); }
.tabla-envoltorio { margin: 0 calc(-1 * var(--esp-6)); padding: 0 var(--esp-6); }
.lista li { border-radius: 6px; border-left: 0; }
.lista li.activa { background: var(--fondo-3); border-left: 0; }
.lista-filtros button.activa { background: var(--fondo-4); color: var(--texto); border-color: transparent; }
.burbuja { border-radius: 8px; }
.aviso { background: var(--fondo-2); border: 1px solid var(--borde-2); color: var(--texto); }
.aviso-caja { background: var(--fondo-2); border: 1px solid var(--borde); }

/* Botones: primario blanco/negro, secundario borde, nada verde */
button, .boton { border: 1px solid var(--borde-2); background: var(--fondo); color: var(--texto); font-weight: 500; padding: var(--esp-1) var(--esp-4); min-height: var(--alto-control); font-size: var(--fs-md); }
button:hover, .boton:hover { background: var(--fondo-3); border-color: var(--borde-2); }
button.primario, .boton.primario { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); font-weight: 500; }
button.primario:hover, .boton.primario:hover { background: var(--texto-2); border-color: var(--texto-2); color: var(--primario-texto); }
html[data-tema="claro"] button.primario:hover, html[data-tema="claro"] .boton.primario:hover { background: #333333; border-color: #333333; }
button.secundario, .boton.secundario { background: transparent; }
button.secundario:hover, .boton.secundario:hover { background: var(--fondo-3); }
button.peligro { color: var(--peligro); border-color: var(--borde-2); }
button.peligro:hover { border-color: var(--peligro); background: var(--peligro-tinte); }
button.chico, .boton.chico { padding: 2px 10px; min-height: var(--alto-control-chico); font-size: var(--fs-sm); }
/* Botones que no son controles de formulario (filtros, chips, pestañas, menús): sin la altura mínima */
.lista-filtros button, .pestanas button, .menu-opciones button, .chip-quitar, .etiqueta-mini button, .burbuja .acciones button, .barra-admin button, .lateral-pie button.icono, .marcas-ia button { min-height: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="month"], input[type="file"], input[type="time"], textarea, select { border: 1px solid var(--borde-2); background: var(--fondo); padding: var(--esp-2) var(--esp-3); font-size: var(--fs-md); line-height: 1.3; min-height: var(--alto-control); }
textarea { line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--texto-2); box-shadow: none !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }
label { font-size: var(--fs-sm); margin-bottom: var(--esp-4); }
label > input, label > textarea, label > select { font-size: var(--fs-md); margin-top: var(--esp-1); }
.formulario label { margin-bottom: var(--esp-4); }
.campo { margin-bottom: var(--esp-5); }
.rotulo { font-size: var(--fs-sm); margin-bottom: var(--esp-2); }
.subtitulo, .ficha-bloque h3, .nodo-titulo, .cajita h3, .nav-grupo, .lateral-contexto .suave { font-size: var(--fs-xs); }
.acciones-form { gap: var(--esp-2); }
/* Un botón chico al lado de un input mide como el input */
.fila > input + button, .fila > input + .boton, .lista-cabecera > input + button { min-height: var(--alto-control); }

/* Pestañas: subrayado */
.pestanas { background: transparent; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; padding: 0; gap: 0; width: 100%; }
.pestanas button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 9px 14px; background: transparent; color: var(--texto-2); font-weight: 500; }
.pestanas button:hover { background: transparent; color: var(--texto); }
.pestanas button.activa { background: transparent; color: var(--texto); border-bottom-color: var(--texto); font-weight: 500; }

/* Opciones (radios con descripción) */
.opcion > span { border: 1px solid var(--borde); background: var(--fondo); color: var(--texto-2); }
.opcion:hover > span { border-color: var(--borde-2); }
.opcion input:checked + span { background: var(--fondo-3); border-color: var(--texto-2); color: var(--texto); }
.opcion input:checked + span strong { color: var(--texto); }
.opcion > span::before { border-radius: 50%; }
.opcion input:checked + span::before { background: var(--acento); border-color: var(--acento); }
.opciones.tarjetas .opcion.actual > span { border-color: var(--texto-2); }
.opciones.tarjetas .costo { color: var(--texto-2); }

/* Varios */
.progreso, .progreso-relleno, .barra-h-pista, .barra-h-relleno { border-radius: 2px; }
.barra-h-relleno { background: var(--texto-2); }
.barra-h.ok .barra-h-relleno { background: var(--ok); }
.progreso-relleno { background: var(--texto-2); }
.paso-numero { border-radius: 4px; background: var(--fondo-4); color: var(--texto); }
.paso.listo .paso-numero { background: var(--ok); color: #06140d; }
.paso { background: var(--fondo); }
.nodo.vivo { border-color: var(--ok); }
.nodo-icono { background: var(--fondo-3); color: var(--texto); }
.flujo-lineas .linea { stroke: var(--borde-2); }
.flecha { background: var(--borde-2); }
.flecha::after { border-left-color: var(--borde-2); }
.chat-envio, .chat-cabecera, .lista-cabecera, .ficha-cabecera, .chat-analisis { background: var(--fondo); }
.boton-tema { margin-right: 4px; }

/* Tarjetas internas: mismo relleno (12 × 16) para pasos, mejoras, cajitas y tarjetas internas (las de más abajo —capacidad,
   plan, recarga, comparación— lo llevan en su propia regla) */
.paso, .mejora, .tarjeta-interna, .ficha-ticket { padding: var(--esp-3) var(--esp-4); }
.pasos { gap: var(--esp-3); margin: var(--esp-3) 0; }
.mejoras { gap: var(--esp-3); }
.tarjeta.compacta-abajo, .dos-columnas.parejas.sin-margen-arriba, .arranque { margin-bottom: var(--esp-4); }

/* Grupos del menú (rótulos chicos, como Tienda Nube / Shopify) */
.nav-grupo { display: block; margin: 10px 10px 3px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.nav a .globo { margin-left: auto; }
@media (max-width: 860px) { .nav-grupo { display: none; } }

/* Ayuda contextual: botón "?" chico y discreto al lado del rótulo; globo anclado con qué es / para qué sirve / qué hacer.
   Sin verde: el botón es gris y sólo se marca al pasar el mouse o cuando está abierto. */
.ayuda-boton { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; min-height: 0; padding: 0; margin-left: 6px; border: 1px solid var(--borde-2); border-radius: 50%; background: transparent; color: var(--texto-3); font: 600 10px/1 var(--sans); letter-spacing: 0; text-transform: none; vertical-align: middle; cursor: pointer; flex-shrink: 0; opacity: 0.85; }
.ayuda-boton:hover, .ayuda-boton.abierto { color: var(--texto); border-color: var(--texto-2); background: var(--fondo-3); opacity: 1; }
.ayuda-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.kpi-titulo .ayuda-boton, th .ayuda-boton, .subtitulo .ayuda-boton, .nav-grupo .ayuda-boton { width: 14px; height: 14px; font-size: 9px; margin-left: 5px; vertical-align: -2px; }
.tarjeta > h2 .ayuda-boton, .tarjeta > .fila.entre > h2 .ayuda-boton, .tarjeta > .fila > h2 .ayuda-boton, h3 .ayuda-boton { margin-left: 0; }
.ficha-bloque h3 .ayuda-boton { margin-left: auto; }
.ayuda-ancla { display: inline-flex; align-items: center; }
.ayuda-ancla .ayuda-boton { margin-left: 0; }
.cabecera-vista .ayuda-ancla { align-self: center; }
.ayuda-globo { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4) var(--esp-4); background: var(--fondo); color: var(--texto); border: 1px solid var(--borde-2); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important; font-size: var(--fs-md); line-height: 1.5; overflow: auto; }
html[data-tema="claro"] .ayuda-globo { box-shadow: 0 12px 32px rgba(20, 20, 20, 0.16) !important; }
.ayuda-globo:focus { outline: none; }
.ayuda-globo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.ayuda-globo-cabecera strong { font-weight: 600; font-size: var(--fs-md); }
.ayuda-cerrar { width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--texto-3); font-size: 18px; line-height: 1; border-radius: 4px; }
.ayuda-cerrar:hover { color: var(--texto); background: var(--fondo-3); }
.ayuda-globo-cuerpo { margin: 0; display: grid; gap: 2px var(--esp-3); }
.ayuda-globo-cuerpo dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); margin-top: var(--esp-1); }
.ayuda-globo-cuerpo dd { margin: 0 0 var(--esp-1); color: var(--texto-2); }
.ayuda-tutorial { align-self: flex-start; font-size: var(--fs-sm); color: var(--texto); text-decoration: underline; text-decoration-color: var(--borde-2); }
.ayuda-tutorial:hover { text-decoration-color: var(--texto-2); }
.pestanas .ayuda-boton { align-self: center; margin-left: var(--esp-2); }
.lista-cabecera .ayuda-ancla { align-self: center; }
/* Estados vacíos: texto centrado y angosto, con la próxima acción como link; en la lista de chats ocupa el panel */
.vacio { max-width: 560px; margin-left: auto; margin-right: auto; }
.vacio a { color: var(--texto); }
.lista:empty { display: none; }
.lista-panel > .vacio { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--esp-6) var(--esp-5); }
/* En el celular, las tarjetas y los KPIs se aprietan un escalón (la regla de arriba, más vieja, quedaba tapada) */
@media (max-width: 860px) {
  .tarjeta { padding: var(--esp-4); }
  .tabla-envoltorio { margin: 0 calc(-1 * var(--esp-4)); padding: 0 var(--esp-4); }
  .kpi { padding: var(--esp-3) var(--esp-4); }
  .kpis { gap: var(--esp-3); }
}

/* Modo claro: los estados van en color plano; en oscuro, de contorno (el fondo negro ya contrasta) */
html[data-tema="claro"] .etiqueta.ok { background: #0fa968; border-color: #0fa968; color: #ffffff; }
html[data-tema="claro"] .etiqueta.atencion { background: #b7791f; border-color: #b7791f; color: #ffffff; }
html[data-tema="claro"] .etiqueta.peligro { background: #d93030; border-color: #d93030; color: #ffffff; }
html[data-tema="claro"] .paso.listo .paso-numero { color: #ffffff; }

/* Impronta: baldosa con ícono en el título de cada vista, ícono en los KPIs, punto verde en los títulos
   de tarjeta y estado vacío con el isotipo en trazo. Detalles chicos, siempre monocromos salvo el punto. */
.cabecera-vista > div:first-child { flex: 1 1 0; min-width: 260px; }
.cabecera-vista > div.con-icono { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.cabecera-vista > div.con-icono > h1 { grid-column: 2; margin: 0; }
.cabecera-vista > div.con-icono > p { grid-column: 2; margin: 2px 0 0; }
.vista-icono { grid-row: 1 / span 2; width: 40px; height: 40px; border: 1px solid var(--borde-2); border-radius: 8px; background: var(--fondo-2); display: inline-flex; align-items: center; justify-content: center; color: var(--texto); }
.vista-icono svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kpi.con-icono .kpi-titulo { padding-right: 36px; }
.kpi-icono { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border: 1px solid var(--borde); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--texto-2); background: var(--fondo-2); }
.kpi-icono svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi.peligro .kpi-icono { color: var(--peligro); border-color: var(--peligro); }
.tarjeta > h2, .tarjeta > .fila.entre > h2, .tarjeta > .fila > h2 { display: flex; align-items: center; gap: 9px; }
.tarjeta > h2::before, .tarjeta > .fila.entre > h2::before, .tarjeta > .fila > h2::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); flex-shrink: 0; }
.vacio { padding: 26px 12px; color: var(--texto-3); }
.vacio::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 10px; opacity: 0.55; background: no-repeat center / 28px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23a1a1a1' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M24 4 L41 14 V34 L24 44 L7 34 V14 Z'/%3E%3Cpath d='M15.5 30.5 L24 16.5 L32.5 30.5 Z'/%3E%3Ccircle cx='24' cy='16.5' r='3.6'/%3E%3Ccircle cx='15.5' cy='30.5' r='3.6'/%3E%3Ccircle cx='32.5' cy='30.5' r='3.6'/%3E%3C/svg%3E"); border: 1px solid var(--borde); border-radius: 8px; }
.vacio.compacto { padding: 10px; }
.vacio.compacto::before { display: none; }
@media (max-width: 860px) { .vista-icono { width: 34px; height: 34px; } .vista-icono svg { width: 17px; height: 17px; } }
@media (max-width: 480px) { .kpi-icono { display: none; } .kpi.con-icono .kpi-titulo { padding-right: 0; } }
.nodo { min-width: 0; flex: 1 1 200px; }
.nodo.chico { flex: 1 1 170px; min-width: 0; }
.flujo-fila.medio .flecha { flex-shrink: 0; }
.flujo-fila.medio .nodo { max-width: none; padding: 12px 13px; gap: 10px; }
.flujo-fila.medio .nodo-icono { width: 32px; height: 32px; }
.flujo-fila.medio .nodo-icono svg { width: 17px; height: 17px; }
.flujo-fila.medio .flecha { flex-basis: 18px; }
.nodo-dato { font-size: 1.02em; }

/* Marcas reales (Simple Icons, CC0) con su color oficial. OpenAI es monocromo. UNIPROFIT en su verde. */
.marca-ico { width: 18px; height: 18px; fill: currentColor; stroke: none; flex-shrink: 0; vertical-align: -3px; }
.marca-ico.whatsapp { color: #25D366; }
.marca-ico.telegram { color: #26A5E4; }
.marca-ico.shopify { color: #7AB55C; }
.marca-ico.wordpress { color: #21759B; }
.marca-ico.wix { color: #0C6EFC; }
.marca-ico.anthropic { color: #D97757; }
.marca-ico.gemini { color: #8E75B2; }
.marca-ico.tiendanube { color: #0050C3; }
.marca-ico.uniprofit { color: var(--acento); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.marca-ico.openai { color: var(--texto); }
h2.con-marca, summary.con-marca { display: flex; align-items: center; gap: 9px; }
.tarjeta > .fila.entre > h2.con-marca::before, .tarjeta > h2.con-marca::before { display: none; }
h2.con-marca .marca-ico { width: 20px; height: 20px; }
.fila-marca { display: inline-flex; align-items: center; gap: 7px; }
.fila-marca .marca-ico { width: 16px; height: 16px; }
.canal-marca { display: inline-flex; align-items: center; }
.canal-marca .marca-ico { width: 14px; height: 14px; }
.opcion-marca { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--borde); background: var(--fondo); flex-shrink: 0; }
.opcion-marca .marca-ico { width: 16px; height: 16px; }
.nodo-icono.marca-whatsapp { color: #25D366; }
.nodo-icono.marca-whatsapp svg { fill: currentColor; stroke: none; }

/* Lo seleccionado va en verde plano (pedido del dueño): opciones, filtros, pestaña activa */
:root { --acento-texto: #06140d; --puntos: #1a1a1c; --puntos-2: #232326; }
html[data-tema="claro"] { --acento-texto: #ffffff; --puntos: #e2e2e2; --puntos-2: #d6d6d6; }
.opcion input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.opcion input:checked + span strong, .opcion input:checked + span .opcion-cuerpo small, .opcion input:checked + span .costo { color: var(--acento-texto); }
.opcion input:checked + span .opcion-cuerpo small, .opcion input:checked + span .costo { opacity: 0.85; }
.opcion input:checked + span::before { background: var(--acento-texto); border-color: var(--acento-texto); }
.opcion input:checked + span .opcion-marca { background: var(--fondo); border-color: transparent; }
.opcion:hover > span { border-color: var(--acento); }
.lista-filtros button.activa { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.pestanas button.activa { border-bottom-color: var(--acento); }
.vista-icono, .kpi-icono { color: var(--acento); }
.kpi.peligro .kpi-icono { color: var(--peligro); }

/* Puntillismo sutil de fondo en toda el área de contenido; las tarjetas quedan lisas encima. El Flujo es un lienzo con borde. */
.principal { background-color: var(--fondo); background-image: radial-gradient(var(--puntos) 1px, transparent 1.2px); background-size: 22px 22px; }
.barra-admin, .lateral { background-image: none; }
button.secundario, .boton.secundario { background: var(--fondo); }
.pestanas { background: transparent; }
.flujo-mapa { border: 1px solid var(--borde); border-radius: 8px; padding: 28px 20px 30px; background-color: var(--fondo-2); background-image: radial-gradient(var(--puntos-2) 1px, transparent 1.2px); background-size: 18px 18px; }
.nodo { background: var(--fondo); }
@media (max-width: 860px) { .flujo-mapa { padding: 16px 12px; } }
.chat, .lista-panel, .ficha, .tarjeta, .kpi, .aviso-caja, .paso, .mejora, .detalle, .ficha-ticket, .lista-resumen li, .prompt-generado, .chips { background-color: var(--fondo); }
.chat-vacio { padding: 26px 12px; }
.chat-vacio::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 10px; opacity: 0.55; background: no-repeat center / 28px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23a1a1a1' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M24 4 L41 14 V34 L24 44 L7 34 V14 Z'/%3E%3Cpath d='M15.5 30.5 L24 16.5 L32.5 30.5 Z'/%3E%3Ccircle cx='24' cy='16.5' r='3.6'/%3E%3Ccircle cx='15.5' cy='30.5' r='3.6'/%3E%3Ccircle cx='32.5' cy='30.5' r='3.6'/%3E%3C/svg%3E"); border: 1px solid var(--borde); border-radius: 8px; }

/* Tutorial: índice a la izquierda, capítulo a la derecha; capturas reales con marco; así sí / así no */
.tutorial { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.tut-indice { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1px; }
.tut-indice a { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 6px; color: var(--texto-2); font-size: 0.93em; font-weight: 500; text-decoration: none; position: relative; }
.tut-indice a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tut-indice a:hover { background: var(--fondo-3); color: var(--texto); }
.tut-indice a.activa { background: var(--fondo-3); color: var(--texto); }
.tut-indice a.activa::before { content: ''; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 2px; background: var(--acento); border-radius: 1px; }
.tut-capitulo { min-width: 0; max-width: 820px; }
.tut-cabecera { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 22px; }
.tut-cabecera h2 { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.tut-cabecera p { margin: 3px 0 0; color: var(--texto-2); font-size: 1em; }
.tut-bloque { margin-bottom: 30px; }
.tut-bloque h3 { font-size: 1rem; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.tut-bloque h3::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.tut-bloque p { margin: 0 0 10px; line-height: 1.6; font-size: 1em; }
.tut-figura { margin: 10px 0 0; border: 1px solid var(--borde-2); border-radius: 8px; overflow: hidden; background: var(--fondo); }
.tut-figura img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; cursor: zoom-in; }
.tut-figura figcaption { padding: 9px 12px; font-size: 0.86em; color: var(--texto-2); border-top: 1px solid var(--borde); background: var(--fondo-2); }
.tut-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.tut-pasos li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.tut-numero { width: 28px; height: 28px; border-radius: 6px; background: var(--acento); color: var(--acento-texto); font-weight: 700; font-size: 0.9em; display: inline-flex; align-items: center; justify-content: center; }
.tut-paso-cuerpo { min-width: 0; }
.tut-paso-cuerpo p { margin-bottom: 0; }
.tut-sino { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tut-si, .tut-no { border: 1px solid var(--borde); border-radius: 8px; padding: 14px 16px; background: var(--fondo); }
.tut-si { border-top: 3px solid var(--ok); }
.tut-no { border-top: 3px solid var(--peligro); }
.tut-sino h4 { margin: 0 0 8px; font-size: 0.9em; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.tut-si h4 { color: var(--ok); }
.tut-no h4 { color: var(--peligro); }
.tut-sino h4 svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tut-sino ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.95em; line-height: 1.5; }
.tut-problemas { margin: 0; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.tut-problemas dt { padding: 10px 14px 2px; font-weight: 600; }
.tut-problemas dd { margin: 0; padding: 0 14px 12px; color: var(--texto-2); line-height: 1.55; border-bottom: 1px solid var(--borde); }
.tut-problemas dd:last-child { border-bottom: 0; }
.tut-pie { display: flex; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--borde); }
.tut-lupa { border: 1px solid var(--borde-2); border-radius: 8px; padding: 0; background: var(--fondo); max-width: min(96vw, 1320px); cursor: zoom-out; }
.tut-lupa::backdrop { background: rgba(0, 0, 0, 0.75); }
.tut-lupa img { display: block; max-width: 100%; max-height: 82vh; height: auto; }
.tut-lupa p { margin: 0; padding: 10px 14px; color: var(--texto-2); font-size: 0.9em; border-top: 1px solid var(--borde); }
.ayuda-vista { align-self: center; width: 30px; height: 30px; border: 1px solid var(--borde-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--texto-2); text-decoration: none; flex-shrink: 0; }
.ayuda-vista:hover { color: var(--acento); border-color: var(--acento); background: var(--fondo); }
.ayuda-vista svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .tutorial { grid-template-columns: 1fr; gap: 14px; }
  .tut-indice { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .tut-indice a.activa::before { display: none; }
  .tut-sino { grid-template-columns: 1fr; }
}

/* Cerebros (bloque 2 del plan): marcas, tarjetas con créditos por respuesta, ejemplo real y comparación */
.marcas-ia { display: flex; gap: 8px; flex-wrap: wrap; }
.marcas-ia button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--borde-2); border-radius: var(--radio); background: var(--fondo-2); color: var(--texto); font-weight: 500; }
.marcas-ia button:hover { border-color: var(--texto-3); }
.marcas-ia button.activa { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.marcas-ia button.no-disponible { opacity: 0.55; }
.marcas-ia button small { color: var(--texto-3); font-weight: 400; }
.opciones.cerebros .opcion .cerebro-costo { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 0.92em; }
.opciones.cerebros .opcion .cerebro-costo strong { font-size: 1.05em; }
.opciones.cerebros .opcion .cerebro-velocidad { color: var(--texto-3); font-size: 0.86em; }
.opciones.cerebros .opcion details { margin-top: 6px; font-size: 0.86em; color: var(--texto-2); width: 100%; }
.opciones.cerebros .opcion details summary { cursor: pointer; color: var(--texto-3); }
.opciones.cerebros .opcion details ul { margin: 6px 0 0; padding-left: 16px; }
.opciones.cerebros .opcion details li + li { margin-top: 3px; }
.opciones.cerebros .opcion .cerebro-aviso { color: var(--atencion); }
/* En la tarjeta elegida (fondo verde) todo el texto secundario pasa al color de contraste: velocidad, modelo,
   "para qué sirve", viñetas y avisos se leían verde sobre verde. */
.opciones.cerebros .opcion input:checked + span .cerebro-velocidad,
.opciones.cerebros .opcion input:checked + span details,
.opciones.cerebros .opcion input:checked + span details summary,
.opciones.cerebros .opcion input:checked + span details li,
.opciones.cerebros .opcion input:checked + span .cerebro-aviso,
.opciones.cerebros .opcion input:checked + span small,
.opciones.cerebros .opcion input:checked + span .suave { color: var(--acento-texto); opacity: 0.92; }
.opciones.cerebros .opcion input:checked + span .cerebro-aviso { font-weight: 600; opacity: 1; }
.opciones.cerebros .opcion input:checked + span .cerebro-aviso strong { color: var(--acento-texto); }
.cerebro-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
.cajita { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--esp-3) var(--esp-4); background: var(--fondo-2); font-size: 0.94em; }
.cajita h3 { margin: 0 0 6px; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); }
.cajita table { width: 100%; border-collapse: collapse; }
.cajita td { padding: 3px 0; border-top: 1px solid var(--borde); }
.cajita td:last-child { text-align: right; }
.comparar-resultados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
@media (max-width: 720px) { .comparar-resultados { grid-template-columns: 1fr; } }
.comparar-columna { border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--esp-3) var(--esp-4); }
.comparar-columna h3 { margin: 0 0 8px; font-size: 1em; }
.comparar-columna .burbuja { max-width: 100%; margin: 6px 0; }
.comparar-columna .comparar-meta { color: var(--texto-3); font-size: 0.86em; margin-top: 8px; }
.comparar-columna .error { color: var(--peligro); }
.comparar-resultados > p { grid-column: 1 / -1; margin: 0; }

/* Agente (bloque 3 del plan): portada con seis preguntas, subsecciones por bloque, barra fija de guardado,
   interruptor prendido/apagado y tarjetas de capacidades. Mismo sistema sobrio: bordes, 6 px, verde sólo en estados. */
.agente-portada .cabecera-vista { align-items: center; }
.agente-acciones { align-items: center; gap: 12px; }
.agente-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); margin-bottom: var(--esp-4); }
.agente-tarjeta { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: var(--esp-5) var(--esp-6); border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); text-decoration: none; }
.agente-tarjeta:hover { border-color: var(--borde-2); background: var(--fondo-2); text-decoration: none; }
.agente-tarjeta h3 { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: flex-start; gap: 9px; }
.agente-tarjeta h3::before { content: ''; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--acento); flex-shrink: 0; }
.agente-tarjeta .agente-respuesta { margin: 0; color: var(--texto-2); line-height: 1.5; flex: 1; }
.agente-tarjeta .agente-respuesta .agente-cerebro-resumen { display: grid; gap: 2px; }
.agente-tarjeta .agente-respuesta strong { color: var(--texto); font-weight: 600; }
.agente-tarjeta .agente-accion { align-self: flex-start; margin-top: 6px; padding: 4px 10px; border: 1px solid var(--borde-2); border-radius: 6px; font-size: 0.86em; font-weight: 500; color: var(--texto); background: var(--fondo); }
.agente-tarjeta:hover .agente-accion { background: var(--fondo-3); }
.agente-portada > .detalle { margin: 0 0 8px; }
.agente-portada > #bot-presupuesto { margin: 0 0 var(--esp-4); }
@media (max-width: 1000px) { .agente-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .agente-tarjetas { grid-template-columns: 1fr; } .agente-tarjeta { min-height: 0; } .agente-acciones { width: 100%; justify-content: space-between; } }

/* Subsección: miga "‹ Agente", título de la pregunta, pestañas para saltar entre bloques */
.agente-sub .cabecera-vista.compacta { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
.miga { display: inline-block; margin-bottom: 6px; font-size: 0.86em; color: var(--texto-2); text-decoration: none; }
.miga:hover { color: var(--texto); text-decoration: none; }
.agente-sub .pestanas { margin-bottom: var(--esp-5); }
.agente-sub .bloque > .tarjeta { margin-bottom: var(--esp-4); }
.agente-sub .bloque > .tarjeta > .suave { margin-bottom: var(--esp-4); }
.agente-sub .bloque > .detalle { margin: 0 0 var(--esp-4); padding: var(--esp-3) var(--esp-4); }
.agente-sub .bloque > .detalle > .suave { margin: 4px 0 12px; }
.agente-sub { padding-bottom: 70px; } /* lugar para la barra fija */
.agente-sub #agente-capacidades { padding-bottom: 20px; }
.agente-sub #agente-capacidades > .suave { margin-bottom: 16px; }
.botones-linea { display: inline-flex; gap: 6px; flex-shrink: 0; }
.regla-edicion { align-items: center; }
.regla-edicion .regla-entrada { flex: 1; min-width: 200px; }

/* Barra fija de guardado: sólo cuando hay cambios. Fondo sólido y borde arriba. */
.barra-guardar { position: fixed; left: var(--lateral); right: 0; bottom: 0; z-index: 40; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 10px 40px; background: var(--fondo); border-top: 1px solid var(--borde-2); color: var(--texto-2); font-size: 0.93em; }
.barra-guardar[hidden] { display: none; }
@media (max-width: 860px) { .barra-guardar { left: 0; padding: 10px 16px; } }

/* Interruptor (switch) accesible: gris apagado, verde de "ok" sólo prendido */
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin: 0; font-weight: 500; color: var(--texto); user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-pista { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--fondo-4); border: 1px solid var(--borde-2); flex-shrink: 0; transition: background 0.15s, border-color 0.15s; }
.interruptor-pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--texto-2); transition: transform 0.15s, background 0.15s; }
.interruptor input:checked + .interruptor-pista { background: var(--ok); border-color: var(--ok); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(16px); background: #ffffff; }
.interruptor input:focus-visible + .interruptor-pista { outline: 2px solid var(--acento); outline-offset: 2px; }
.interruptor input:disabled + .interruptor-pista { opacity: 0.45; }
.interruptor input:disabled ~ .interruptor-texto { color: var(--texto-3); }
.interruptor.chico .interruptor-pista { width: 32px; height: 18px; }
.interruptor.chico .interruptor-pista::after { width: 12px; height: 12px; }
.interruptor.chico input:checked + .interruptor-pista::after { transform: translateX(14px); }
.interruptor.chico { font-size: 0.93em; }

/* Capacidades: un grupo por conector, tarjetas con estado, uso y controles */
.capacidades-grupo { margin-bottom: var(--esp-4); }
.capacidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--esp-3); margin-top: var(--esp-4); }
.capacidad { display: flex; flex-direction: column; gap: 6px; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); }
.capacidad.inactiva { color: var(--texto-2); }
.capacidad.inactiva h3 { color: var(--texto-2); }
.capacidad-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.capacidad-cabecera h3 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.capacidad p { margin: 0; line-height: 1.5; }
.capacidad-ejemplo { color: var(--texto-3); font-size: 0.9em; }
.capacidad-usos { color: var(--texto-3); font-size: 0.86em; margin-top: 2px; }
.capacidad-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--borde); }
.capacidad-controles .opciones { gap: 6px; }
.capacidad-controles .opcion > span { padding: 5px 11px; font-size: 0.88em; }
.capacidad-controles .opcion input:disabled + span { opacity: 0.5; cursor: default; }
.capacidad .ayuda { margin-top: 4px; }

/* Bloque 4 del plan: Conocimiento en cuatro tipos (cobertura, guía por rubro, borradores), lista de arranque en Inicio y
   asistente de primera configuración. Mismo sistema sobrio: bordes, verde sólo en estados y en lo elegido. */
.conocimiento-bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); align-items: start; margin-bottom: var(--esp-4); }
.conocimiento-bloques > .tarjeta { margin-bottom: 0; }
.conocimiento-bloques > .tarjeta > .fila.entre > h2 .suave { font-weight: 400; margin-left: 4px; }
.conocimiento-bloques .lista-simple .cabecera > .fila { gap: 8px; }
.conocimiento-bloques .lista-simple li.borrador strong { color: var(--texto-2); }
.conocimiento-bloques #form-archivo { margin: 6px 0 12px; padding: var(--esp-3) var(--esp-4); border: 1px dashed var(--borde-2); border-radius: var(--radio-chico); }
.conocimiento-bloques #form-archivo label { margin-bottom: 12px; }
.conocimiento-bloques #form-archivo .acciones-form { margin-top: 0; }
.sugerencias { margin: 4px 0 12px; padding: 10px 12px; border: 1px dashed var(--borde-2); border-radius: var(--radio-chico); background: var(--fondo-2); }
.sugerencias .rotulo { margin-bottom: 6px; }
.sugerencias .fila { gap: 6px; }
.sugerencias button { font-size: 0.86em; white-space: normal; text-align: left; }
.cobertura p { margin: 0; }
.cobertura .detalle { margin-top: 10px; }
.cobertura .detalle .lista-simple li { padding: 8px 0; }
.cobertura .detalle .ayuda { margin-top: 8px; }
.guia .guia-fichas li { padding: 9px 0; }
.guia .guia-fichas .cabecera { align-items: center; }
.guia .guia-fichas .cabecera > .fila { gap: 8px; }
.guia .guia-fichas li.cargada strong { color: var(--texto-2); }
.guia .guia-plegada summary { cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.guia .guia-plegada[open] summary { margin-bottom: 8px; }
.conocimiento-pedir { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 18px; padding: 10px 14px; border: 1px dashed var(--borde); border-radius: var(--radio-chico); color: var(--texto-2); font-size: 0.93em; }
@media (max-width: 900px) { .conocimiento-bloques { grid-template-columns: 1fr; } }

/* Inicio: tarjeta "Para arrancar" con los pasos y su estado */
.arranque { margin-bottom: var(--esp-4); }
.arranque-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; }
.arranque-pasos li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.arranque-tilde { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--borde-2); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.arranque-tilde svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.arranque-pasos li.hecho .arranque-tilde { background: var(--ok); border-color: var(--ok); color: #ffffff; }
.arranque-pasos li.hecho .arranque-titulo a { color: var(--texto-2); text-decoration: line-through; }
.arranque-titulo a { color: var(--texto); font-weight: 600; }
.arranque-titulo a:hover { color: var(--dorado-2); text-decoration: none; }
.arranque-cuerpo .suave { font-size: 0.88em; }
.arranque-plataforma { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--borde); }
.inicio-pie { margin: 6px 0 0; text-align: right; font-size: 0.86em; }
.inicio-pie a { color: var(--texto-3); }
.inicio-pie a:hover { color: var(--texto); }

/* Asistente de primera configuración: progreso por segmentos, una pantalla por vez, botones abajo */
.agente-asistente { max-width: 860px; }
.agente-asistente .cabecera-vista.compacta { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.asistente-aviso { background: var(--atencion-tinte); border-color: rgba(245, 179, 1, 0.4); }
.asistente-progreso { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.asistente-segmentos { display: flex; gap: 4px; flex: 1; }
.asistente-segmentos span { flex: 1; height: 6px; border-radius: 3px; background: var(--fondo-4); border: 1px solid var(--borde); }
.asistente-segmentos span.hecho { background: var(--acento); border-color: var(--acento); }
.asistente-pantalla { margin-bottom: 14px; }
.asistente-pantalla > h2 { margin-bottom: 4px; font-size: 1.25rem; }
.asistente-pantalla > .suave { margin-bottom: 18px; }
.asistente-pantalla label { display: block; margin-bottom: 18px; }
.asistente-pantalla label.opcion, .asistente-pantalla label.dia, .asistente-pantalla label.fila-check { display: inline-flex; margin-bottom: 0; }
.asistente-pantalla label.fila-check { display: flex; margin-bottom: 8px; }
.asistente-pantalla .subseccion { margin-top: 4px; }
.asistente-rubros, .asistente-tiendas { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.asistente-rubros .opcion > span, .asistente-tiendas .opcion > span { padding: 12px 14px; }
.asistente-tiendas .fila-marca { display: inline-flex; align-items: center; gap: 8px; }
.asistente-tiendas .marca-ico { width: 18px; height: 18px; }
.asistente-chips { margin: -8px 0 18px; gap: 6px; }
.asistente-tono { align-items: start; }
.asistente-ejemplo { margin-bottom: 20px; }
.asistente-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-2); }
.asistente-chat .burbuja { max-width: 92%; }
.asistente-resumen { padding: 14px 18px; border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: var(--radio-chico); background: var(--fondo-2); margin-bottom: 20px; }
.asistente-resumen p { margin: 0 0 6px; }
.asistente-resumen p:last-child { margin-bottom: 0; }
.asistente-fichas > .suave { margin-bottom: 10px; }
.asistente-botones { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.asistente-botones #asistente-siguiente { margin-left: auto; }
.asistente-error { color: var(--peligro); font-size: 0.92em; }
.asistente-listo { margin: 6px 0 14px; }
@media (max-width: 640px) { .asistente-tono { grid-template-columns: 1fr; } }

/* Plan y saldo (plan.js, créditos v2): avisos por prioridad, "Tu saldo" (número grande, barra, bolsas y proyección),
   "Qué consume cada respuesta" (los nueve cerebros con su ícono) y las tarjetas de planes, recargas, pago,
   facturación e historial. Sin verde en botones ni barras: el número grande y la barra van en neutro, "atención"
   cuando queda poco; el verde sólo en los chips "ok" (plan vigente, "tu cerebro"). Sin style= inline: la barra usa
   las clases .p0…p100 de Estadísticas. */
.aviso-plan { margin: -6px 0 18px; padding: 10px 14px; border-radius: var(--radio-chico); background: var(--fondo-2); border: 1px solid var(--borde-2); color: var(--texto); font-size: 0.93em; }
.aviso-plan.atencion { background: var(--atencion-tinte); border-color: rgba(245, 179, 1, 0.35); }
/* Tope diario de la sala de prueba (429): inline, debajo del formulario, sin el aviso rojo general */
.prueba-tope { margin: 8px 16px 12px; }
#plan-saldo-sin-plan { margin: -4px 0 var(--esp-4); }
.plan-saldo-grilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-4) var(--esp-7); align-items: start; }
.plan-numero { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; }
.plan-numero strong { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-numero.atencion strong { color: var(--atencion); }
.plan-plata { margin: 0 0 var(--esp-2); }
#plan-progreso { margin: var(--esp-2) 0 var(--esp-3); }
.plan-proyeccion { margin: 0; font-size: 0.92em; color: var(--texto-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-bolsas { list-style: none; margin: 0; padding: 0; }
.plan-bolsas li { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-2) 0; border-bottom: 1px solid var(--borde); }
.plan-bolsas li:last-child { border-bottom: 0; }
.plan-bolsa-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); font-size: 0.95em; }
.plan-bolsa-titulo > span:first-child { color: var(--texto-2); }
.plan-bolsa-titulo strong { font-weight: 600; white-space: nowrap; }
.plan-bolsa-detalle { color: var(--texto-3); font-size: 0.86em; }
.plan-saldo-acciones { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--borde); }
.plan-saldo-acciones p { margin: 0; font-size: 0.95em; }
.plan-saldo-acciones .fila-marca { display: inline; } /* en línea con el texto: el inline-flex subía el nombre del cerebro */
.plan-saldo-acciones .fila-marca .marca-ico { width: 15px; height: 15px; margin-right: 4px; }
.plan-modelos-tabla { margin: var(--esp-2) 0 var(--esp-3); }
.plan-modelos-tabla td:first-child { white-space: nowrap; }
.plan-modelos-tabla .fila-marca .marca-ico { width: 16px; height: 16px; }
.plan-modelos-tabla tr.plan-marca-inicio td { border-top: 1px solid var(--borde-2); }
.plan-modelos-tabla tr.actual td { color: var(--texto); font-weight: 600; }
.plan-tu-cerebro { margin-left: 8px; }
.plan-consumo-pie { line-height: 1.5; }
.plan-capacidades-detalle { margin-top: var(--esp-3); }
.plan-capacidades-detalle summary { cursor: pointer; font-weight: 500; }
.datos.compacta li { padding: 6px 0; font-size: 0.92em; }
.dialogo { border: 1px solid var(--borde-2); border-radius: 8px; padding: 22px 24px; background: var(--fondo); color: var(--texto); width: min(92vw, 460px); }
.dialogo::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialogo h2 { margin-bottom: 6px; }
.dialogo label { margin-top: 12px; }
.dialogo .acciones-form { justify-content: flex-end; margin-top: 14px; }
@media (max-width: 760px) { .plan-saldo-grilla { grid-template-columns: 1fr; } .plan-numero strong { font-size: 2.2rem; } }

/* Planes: interruptor mensual / anual (segmentado, neutro; el elegido en relieve), cuatro tarjetas en grilla, la matriz
   "Qué incluye cada plan" y el pie. Verde sólo en el borde de la tarjeta del plan actual y en sus chips "tu plan". */
.plan-ciclo { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--borde-2); border-radius: 6px; background: var(--fondo); }
.plan-ciclo button { border: 0; background: transparent; color: var(--texto-2); min-height: var(--alto-control-chico); padding: 2px 12px; border-radius: 4px; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.plan-ciclo button:hover { background: var(--fondo-3); color: var(--texto); }
.plan-ciclo button[aria-pressed="true"] { background: var(--fondo-4); color: var(--texto); font-weight: 600; }
.plan-ciclo .etiqueta { font-size: var(--fs-xs); padding: 0 6px; }
.plan-planes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4); margin: var(--esp-3) 0 var(--esp-4); align-items: stretch; }
.plan-tarjeta { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); min-width: 0; container-type: inline-size; }
.plan-tarjeta.actual { border-color: var(--ok); }
.plan-tarjeta-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.plan-tarjeta-nombre { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.plan-tarjeta-para { margin: 0; color: var(--texto-2); font-size: var(--fs-sm); line-height: 1.4; min-height: 2.8em; }
.plan-tarjeta-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.plan-tarjeta-precio strong { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-tarjeta-precio small { color: var(--texto-2); font-size: var(--fs-sm); }
.plan-tarjeta-antes { flex-basis: 100%; color: var(--texto-3); font-size: var(--fs-sm); line-height: 1; }
.plan-off { flex-basis: 100%; font-size: var(--fs-sm); color: var(--texto); font-weight: 500; }
.plan-tarjeta-cobro { flex-basis: 100%; font-size: var(--fs-sm); }
.plan-tarjeta-creditos { font-size: var(--fs-md); }
.plan-tarjeta-creditos strong { font-weight: 600; }
.plan-tarjeta-creditos .suave { display: block; }
.plan-modelos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.plan-modelos li { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); padding: 5px 0; border-bottom: 1px solid var(--borde); font-size: var(--fs-sm); color: var(--texto-2); }
.plan-modelos li .fila-marca { min-width: 0; white-space: nowrap; }
.plan-modelos li .fila-marca .marca-ico { width: 14px; height: 14px; }
.plan-modelos li .num { white-space: nowrap; color: var(--texto); }
.plan-modelos li.actual { color: var(--texto); font-weight: 600; }
/* En una tarjeta angosta (cuatro por fila en 1280 px) el cerebro y sus respuestas van en dos líneas, sin cortar nombres */
@container (max-width: 250px) { .plan-modelos li { flex-direction: column; align-items: flex-start; gap: 0; } .plan-modelos li .num { padding-left: 22px; } }
.plan-modelos-todos { margin-top: -6px; font-size: var(--fs-sm); }
.plan-modelos-todos summary { cursor: pointer; color: var(--texto-3); padding: 2px 0; }
.plan-modelos-todos[open] summary { color: var(--texto-2); margin-bottom: 4px; }
.plan-modelos-todos .plan-modelos { border-top: 0; }
.plan-capacidades-lista { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--texto); }
.plan-capacidades-lista li { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; line-height: 1.4; }
.plan-capacidades-lista li > span { min-width: 0; }
.plan-capacidades-lista li::before { content: '✓'; flex-shrink: 0; width: 1em; color: var(--texto-2); }
.plan-capacidades-lista li.no { color: var(--texto-3); }
.plan-capacidades-lista li.no::before { content: '–'; }
.plan-capacidades-lista li .suave { font-size: inherit; color: var(--texto-3); }
.plan-tarjeta-pie { margin-top: auto; padding-top: var(--esp-2); }
.plan-tarjeta-pie button { width: 100%; }
.plan-capacidades-tabla { margin: var(--esp-2) 0 var(--esp-3); }
.plan-capacidades-tabla th:first-child { width: 36%; }
.plan-capacidades-tabla th:not(:first-child), .plan-capacidades-tabla td:not(:first-child) { text-align: center; white-space: nowrap; width: 16%; }
.plan-capacidades-tabla th.actual { color: var(--texto); }
.plan-capacidades-tabla td.actual { background: var(--fondo-2); }
.plan-capacidades-tabla .plan-si { color: var(--texto); font-weight: 600; }
.plan-planes-pie { line-height: 1.5; }
.plan-pedido-listo { margin: -4px 0 var(--esp-3); padding: 10px 14px; border-radius: 6px; background: var(--fondo-2); border: 1px solid var(--borde-2); font-size: 0.93em; }

/* Recargar créditos: la escala en tarjetas chicas (precio tachado, % off, respuestas con tu cerebro) y "otro monto" */
.plan-recargas-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-3); margin: var(--esp-3) 0 var(--esp-4); }
.plan-recarga { display: flex; flex-direction: column; gap: 6px; padding: var(--esp-3) var(--esp-4); border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); min-width: 0; }
.plan-recarga.popular { border-color: var(--texto-2); }
.plan-recarga-cabecera { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--fs-md); }
.plan-recarga-precio { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-recarga-precio strong { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-recarga-antes { color: var(--texto-3); font-size: var(--fs-sm); }
.plan-recarga-respuestas { margin: 0; font-size: var(--fs-sm); }
.plan-recarga-pie { margin-top: auto; padding-top: 4px; }
.plan-recarga-pie button { width: 100%; }
.plan-recarga-libre { padding: var(--esp-4); border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo-2); margin-bottom: var(--esp-3); }
.plan-recarga-libre .rotulo { margin-bottom: var(--esp-2); }
.plan-recarga-campo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.plan-recarga-prefijo { color: var(--texto-2); font-size: var(--fs-sm); font-weight: 500; }
.plan-recarga-campo input { width: 120px; font-variant-numeric: tabular-nums; }
.plan-recarga-detalle, .plan-recarga-error { margin-top: var(--esp-2); }
.plan-recarga-error { font-size: 0.92em; }

/* Diálogo de confirmación: qué · créditos · precio · cuándo rige · lo que ya pagaste · cómo se paga */
.plan-dialogo { width: min(92vw, 540px); }
.plan-dialogo-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: var(--esp-3) 0 var(--esp-2); font-size: var(--fs-md); }
.plan-dialogo-datos dt { color: var(--texto-2); font-size: var(--fs-sm); padding-top: 1px; }
.plan-dialogo-datos dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.plan-dialogo .fila-check { margin: var(--esp-3) 0 0; font-size: var(--fs-md); color: var(--texto); font-weight: 400; }
.plan-dialogo .fila-check a { color: inherit; text-decoration: underline; }
.plan-dialogo-medio { margin: var(--esp-3) 0 0; padding: var(--esp-2) var(--esp-3) var(--esp-3); background: transparent; }
.plan-dialogo-medio legend { color: var(--texto-2); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 500; }
.plan-dialogo-medio .fila-check { margin: 6px 0 0; }
.plan-dialogo-medio .fila-check .suave { font-size: var(--fs-sm); }

/* Vuelta desde Mercado Pago: un solo renglón arriba de la vista (plan-pedido-listo o aviso-plan según cómo salió) */
#plan-retorno { margin: -6px 0 18px; }

/* Forma de pago: método en una línea, datos compactos, texto y botones */
.plan-pago-metodo { margin: 0 0 var(--esp-2); font-weight: 500; line-height: 1.45; }
.plan-pago-datos { margin: 0 0 var(--esp-3); }
.plan-pago-datos li > span:last-child { text-align: right; }
.plan-pago-texto { margin: 0 0 var(--esp-3); line-height: 1.5; }
.plan-pago-acciones { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.plan-pago-acciones:empty { display: none; }

/* Datos de facturación: dos columnas (una en móvil), el domicilio a lo ancho */
.plan-facturacion-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-4); margin-top: var(--esp-2); }
.plan-facturacion-grilla label { min-width: 0; margin-bottom: var(--esp-3); }
.plan-facturacion-grilla label .suave { font-weight: 400; }
.plan-facturacion-ancho { grid-column: 1 / -1; }
.plan-facturacion-form .acciones-form { margin-top: var(--esp-2); }
#plan-facturacion-error { margin-bottom: var(--esp-2); }

/* Compras y facturación: la tabla del resumen de cuenta */
.plan-historial-tabla { margin: var(--esp-2) 0 var(--esp-3); }
.plan-historial-fecha { white-space: nowrap; color: var(--texto-2); }
.plan-historial-concepto { min-width: 220px; }
.plan-historial-concepto > span { display: flex; flex-direction: column; gap: 2px; }
.plan-historial-nota { font-size: var(--fs-xs); }
.plan-historial-comprobante { max-width: 240px; font-size: var(--fs-sm); line-height: 1.35; }
.plan-historial-tabla td .etiqueta { white-space: nowrap; }
.plan-historial-pie { line-height: 1.5; }
@media (max-width: 640px) { .plan-facturacion-grilla { grid-template-columns: 1fr; } .plan-pago-datos li { flex-direction: column; gap: 2px; } .plan-pago-datos li > span:last-child { text-align: left; } }

/* /panel/pago: página aparte (CSP propia para el SDK de Mercado Pago), sobria, con el logo y una sola tarjeta */
.pago-pagina { min-height: 100vh; background: var(--fondo); }
.pago { max-width: 560px; margin: 0 auto; padding: 28px 20px 40px; }
.pago-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-5); }
.pago-cabecera .marca-texto { font-size: 1.05rem; }
.pago-cabecera .unidad { margin-left: 4px; }
.pago-volver { color: var(--texto-2); font-size: var(--fs-sm); }
.pago-volver:hover { color: var(--texto); }
.pago h1 { font-size: var(--fs-xl); margin: 0 0 6px; }
.pago-intro { margin: 0 0 var(--esp-3); line-height: 1.5; }
.pago-resumen { margin: 0 0 var(--esp-4); }
.pago-resumen li > span:last-child { text-align: right; }
.pago .fila-check { margin: 0 0 var(--esp-3); font-size: var(--fs-md); color: var(--texto); font-weight: 400; }
.pago .fila-check a { color: inherit; text-decoration: underline; }
.pago-brick { min-height: 40px; }
.pago-estado { margin: 0 0 var(--esp-3); }
.pago-falso { padding: var(--esp-3) var(--esp-4); border: 1px dashed var(--borde-2); border-radius: 6px; margin-bottom: var(--esp-3); }
.pago-falso p { margin: 0 0 var(--esp-2); }
.pago-falso-botones { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.pago-pie { margin: var(--esp-3) 0 0; line-height: 1.5; text-align: center; }
@media (max-width: 640px) { .pago-resumen li { flex-direction: column; gap: 2px; } .pago-resumen li > span:last-child { text-align: left; } }
@media (max-width: 1100px) { .plan-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-recargas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plan-planes, .plan-recargas-lista { grid-template-columns: 1fr; } .plan-tarjeta-para { min-height: 0; } .plan-dialogo-datos { grid-template-columns: 1fr; gap: 2px 0; } .plan-dialogo-datos dd { margin-bottom: 8px; } }

/* Inicio › Estado del agente: "Charlas disponibles" en dos líneas a la derecha (número y renovación) */
.datos li.dato-creditos > span:first-child { white-space: nowrap; }
.datos li.dato-creditos .dato-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; text-align: right; white-space: nowrap; }
.datos li.dato-creditos .dato-valor:hover span:first-child { text-decoration: underline; }

/* "Este chat: N respuestas · X créditos (cerebro)" arriba de los mensajes, mismo tono que el análisis; "Ver por día" despliega la lista */
.chat-consumo { padding: 6px 16px; border-bottom: 1px solid var(--borde); background: var(--fondo); font-size: 0.86em; color: var(--texto-2); }
.chat-consumo .consumo-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 3px 0; }
.chat-consumo .consumo-linea strong { color: var(--texto); }
.chat-consumo button { margin-top: 2px; }
.chat-consumo .consumo-dias { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.chat-consumo .consumo-dias li { white-space: nowrap; }

/* Ficha del cliente en Administración: bloque Plan y saldo */
.cplan-formularios { gap: 0 18px; margin-top: 6px; }
.cplan-form { padding: var(--esp-3) var(--esp-4) var(--esp-1); border: 1px solid var(--borde); border-radius: 6px; margin-bottom: var(--esp-4); }
.cplan-form h4 { margin-top: 0; }
.cplan-form label { margin-bottom: var(--esp-3); }
.cplan-form .acciones-form { margin-bottom: 10px; }
.cplan-rapidos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
#cliente-plan > h4 { margin-top: 6px; }