/* ==========================================================================
   Cotizador Emprendu — estilos del front (pagina /cotizador/)
   --------------------------------------------------------------------------
   Base: el prototipo de diseño/cotizador-emprendu (tokens, componentes y
   responsive, prefijo .ec-), copiado tal cual. Al final, "PLUGIN": lo que
   el prototipo no tenia y el plugin real necesita (planos por sede,
   errores del servidor, pantalla de exito, vistas con sesion, campos del
   registro que se agreguen despues).

   Responsive: escritorio > 1180 px con sidebar · tablet 761–1180 px con
   rail de iconos y barra fija de precio · movil <= 760 px con app bar,
   barra inferior y tablas convertidas en tarjetas.
   ========================================================================== */

/* ---------- Tokens ---------- */
/* Tipografia de marca para los titulos: Choplin Medium (archivo local).
   Un solo peso: se declara para todo el rango para que el navegador no
   invente negritas ni versiones delgadas. */
@font-face {
  font-family: 'Choplin';
  src: url('../fonts/choplin-medium.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ec-bg: #0A0A0B;
  --ec-panel: #141416;
  --ec-panel-2: #1C1C1F;
  --ec-panel-3: #18181B;
  --ec-topbar: #0E0E10;
  --ec-line: rgba(255, 255, 255, 0.09);
  --ec-line-2: rgba(255, 255, 255, 0.14);
  --ec-line-soft: rgba(255, 255, 255, 0.06);

  --ec-ink: #F4F3EF;
  --ec-ink-2: #A8A7A1;
  --ec-ink-3: #8D8C86;
  --ec-ink-4: #74736E;

  --ec-ivory: #EBE9E4;
  --ec-ivory-2: #F5F4F1;
  --ec-on-ivory: #17171A;
  --ec-on-ivory-2: #5A594F;
  --ec-on-ivory-3: #8B8A80;
  --ec-ivory-line: rgba(23, 23, 26, 0.14);
  --ec-ivory-line-2: rgba(23, 23, 26, 0.10);

  /* Estados — paleta validada para daltonismo y contraste sobre fondo oscuro */
  --ec-verde: #34A882;   --ec-verde-txt: #5FD1A9;
  --ec-ambar: #BE8320;   --ec-ambar-txt: #E7B463;
  --ec-rosa: #D9536B;    --ec-rosa-txt: #E8798C;
  --ec-violeta: #7C7DE2; --ec-violeta-txt: #A6A7F0;
  --ec-neutro: #8D8C86;  --ec-neutro-txt: #A8A7A1;
  --ec-contexto: #45454C;
  --ec-alerta-ivory: #B0304A;

  --ec-r-sm: 10px;
  --ec-r: 12px;
  --ec-r-md: 14px;
  --ec-r-lg: 18px;
  --ec-r-xl: 24px;

  --ec-font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ec-font-display: 'Choplin', 'DM Sans', system-ui, sans-serif;

  --ec-sidebar-w: 248px;
}

/* ---------- Base ---------- */
.ec-body { margin: 0; background: var(--ec-bg); color: var(--ec-ink); font-family: var(--ec-font); -webkit-font-smoothing: antialiased; }
.ec-app *, .ec-app *::before, .ec-app *::after { box-sizing: border-box; }
:where(.ec-app) a { color: inherit; text-decoration: none; } /* :where = especificidad 0, no pisa .ec-btn */
.ec-app button, .ec-app input, .ec-app select, .ec-app textarea { font-family: inherit; }
.ec-app button { cursor: pointer; }
.ec-app :focus-visible { outline: 2px solid var(--ec-ivory); outline-offset: 2px; }
.ec-sheet :focus-visible { outline-color: var(--ec-on-ivory); }
.ec-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-show-sm { display: none; }
.ec-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ec-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ec-icon--sm { width: 15px; height: 15px; }
.ec-icon--xs { width: 12px; height: 12px; stroke-width: 2.4; }

/* ---------- Layout del app ---------- */
.ec-app { display: grid; grid-template-columns: var(--ec-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.ec-main { min-width: 0; display: flex; flex-direction: column; }
.ec-view { display: flex; flex-direction: column; min-height: 100vh; }
.ec-view[hidden] { display: none; }
.ec-content { padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Sidebar ---------- */
.ec-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding: 28px 20px; background: var(--ec-panel); border-right: 1px solid var(--ec-line); }
.ec-brand { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.ec-brand__name { font-family: var(--ec-font-display); font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: 0.01em; }
.ec-brand__tag { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ec-ink-3); }
.ec-brand__logo { display: block; width: 150px; height: auto; }
.ec-brand__mono { display: none; font-family: var(--ec-font-display); font-weight: 300; font-size: 28px; line-height: 1; }
.ec-nav { display: flex; flex-direction: column; gap: 6px; }
.ec-nav__label { padding: 0 8px 4px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ec-ink-3); }
.ec-nav__label + .ec-nav__link { margin-top: 0; }
.ec-nav__label--gap { padding-top: 16px; }
.ec-nav__link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--ec-r); color: var(--ec-ink-2); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.ec-nav__link:hover { background: rgba(255,255,255,0.04); color: var(--ec-ink); }
.ec-nav__link.is-active { background: rgba(255,255,255,0.08); color: var(--ec-ink); }
.ec-nav__link.is-disabled { opacity: .55; }
.ec-sidebar__spacer { flex-grow: 1; }
.ec-user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ec-r-md); border: 1px solid var(--ec-line); background: var(--ec-panel-2); }
.ec-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--ec-ivory); color: var(--ec-on-ivory); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.ec-avatar--sm { width: 26px; height: 26px; font-size: 10px; background: rgba(255,255,255,0.09); color: var(--ec-ink); }
.ec-user__name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-user__role { font-size: 11px; color: var(--ec-ink-3); }
.ec-user__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* ---------- Barra superior de cada vista ---------- */
.ec-topbar { position: sticky; top: 0; z-index: 5; min-height: 76px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ec-line); background: rgba(14,14,16,0.92); backdrop-filter: blur(10px); }
.ec-topbar--steps { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding-top: 18px; }
.ec-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ec-topbar__heading { display: flex; flex-direction: column; gap: 3px; }
.ec-topbar__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ec-ink-3); }
.ec-topbar__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.ec-topbar__title--serif { font-family: var(--ec-font-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: 0; }
.ec-topbar__sub { font-size: 12px; color: var(--ec-ink-3); }
.ec-topbar__actions { display: flex; align-items: center; gap: 12px; }

.ec-badge-sample { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(190,131,32,0.38); background: rgba(190,131,32,0.14); color: var(--ec-ambar-txt); font-size: 12px; font-weight: 500; white-space: nowrap; }
.ec-badge-sample .ec-icon { width: 13px; height: 13px; stroke: #E0A94F; stroke-width: 1.8; }

/* ---------- Botones ---------- */
.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-size: 13px; font-weight: 600; white-space: nowrap; transition: transform .1s, background .15s; }
.ec-btn:active { transform: translateY(1px); }
.ec-btn--primary { background: var(--ec-ivory); color: var(--ec-on-ivory); }
.ec-btn--primary:hover { background: #fff; }
.ec-btn--ghost { background: transparent; border-color: var(--ec-line-2); color: var(--ec-ink); font-weight: 500; }
.ec-btn--ghost:hover { background: rgba(255,255,255,0.05); }
.ec-btn--block { width: 100%; height: 52px; border-radius: 15px; font-size: 15px; }
.ec-icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--ec-line-2); background: transparent; color: var(--ec-ink-2); display: inline-flex; align-items: center; justify-content: center; }
.ec-icon-btn:hover { color: var(--ec-ink); background: rgba(255,255,255,0.05); }

/* ---------- Selects oscuros ---------- */
.ec-select-dark { appearance: none; height: 40px; padding: 0 34px 0 14px; border-radius: var(--ec-r); border: 1px solid var(--ec-line-2); background: var(--ec-panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A7A1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ec-ink); font-size: 13px; }

/* ---------- Tarjetas oscuras ---------- */
.ec-card { padding: 22px 24px; border-radius: var(--ec-r-lg); border: 1px solid var(--ec-line); background: var(--ec-panel); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ec-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ec-card__title { margin: 0; font-size: 15px; font-weight: 600; }
.ec-card__sub { margin: 3px 0 0; font-size: 12px; color: var(--ec-ink-3); }
.ec-link-muted { font-size: 13px; font-weight: 500; color: var(--ec-ink-2); }
.ec-link-muted:hover { color: var(--ec-ink); }
.ec-grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.ec-grid-2--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

/* ---------- KPIs ---------- */
.ec-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ec-kpi { padding: 20px; border-radius: var(--ec-r-lg); border: 1px solid var(--ec-line); background: var(--ec-panel); display: flex; flex-direction: column; gap: 10px; }
.ec-kpi__label { font-size: 12px; color: var(--ec-ink-3); }
.ec-kpi__value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ec-kpi__delta { font-size: 12px; color: var(--ec-ink-3); }
.ec-kpi__delta strong { font-weight: 600; }
.is-up { color: var(--ec-verde-txt); }
.is-down { color: var(--ec-rosa-txt); }

/* ---------- Gráfico de barras agrupadas ---------- */
.ec-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ec-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ec-ink-2); }
.ec-legend__swatch { width: 10px; height: 10px; border-radius: 3px; }
.ec-bars { position: relative; display: flex; align-items: flex-end; height: 216px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.ec-bars__group { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 0 8px; border-radius: 10px 10px 0 0; border: 0; background: transparent; }
.ec-bars__group:hover, .ec-bars__group:focus-visible { background: rgba(255,255,255,0.05); }
.ec-bars__bar { width: 26px; max-width: 40%; border-radius: 4px 4px 0 0; transition: height .4s ease; }
.ec-bars__bar--ctx { background: var(--ec-contexto); }
.ec-bars__bar--main { background: var(--ec-verde); }
.ec-bars__tip { position: absolute; bottom: calc(100% - 16px); left: 50%; transform: translateX(-50%); padding: 8px 11px; border-radius: 10px; background: var(--ec-ivory); color: var(--ec-on-ivory); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 2; }
.ec-bars__group:hover .ec-bars__tip, .ec-bars__group:focus-visible .ec-bars__tip { opacity: 1; }
.ec-bars__axis { display: flex; }
.ec-bars__axis span { flex: 1; text-align: center; font-size: 12px; color: var(--ec-ink-3); }

/* ---------- Embudo ---------- */
.ec-funnel { display: flex; flex-direction: column; gap: 14px; }
.ec-funnel__row { display: flex; flex-direction: column; gap: 7px; }
.ec-funnel__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.ec-funnel__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.ec-funnel__n small { font-size: 12px; font-weight: 400; color: var(--ec-ink-3); }
.ec-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.ec-track__fill { height: 100%; border-radius: 999px; }
.ec-funnel__foot { padding-top: 14px; border-top: 1px solid var(--ec-line); display: flex; gap: 22px; }
.ec-mini { display: flex; flex-direction: column; gap: 2px; }
.ec-mini__label { font-size: 12px; color: var(--ec-ink-3); }
.ec-mini__value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Barras horizontales por sede ---------- */
.ec-hbars { display: flex; flex-direction: column; gap: 13px; }
.ec-hbar { display: flex; align-items: center; gap: 14px; }
.ec-hbar__name { width: 104px; flex-shrink: 0; font-size: 13px; }
.ec-hbar__track { flex: 1; min-width: 0; }
.ec-hbar__fill { height: 22px; border-radius: 4px; background: var(--ec-ivory); transition: width .4s ease; }
.ec-hbar__value { width: 92px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ec-hbar__count { width: 58px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--ec-ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Tablas ---------- */
.ec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ec-table th { text-align: left; padding: 0 12px 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ec-ink-3); border-bottom: 1px solid var(--ec-line); white-space: nowrap; }
.ec-table td { padding: 12px; border-bottom: 1px solid var(--ec-line-soft); vertical-align: middle; }
.ec-table th:first-child, .ec-table td:first-child { padding-left: 0; }
.ec-table th:last-child, .ec-table td:last-child { padding-right: 0; }
.ec-table .is-right { text-align: right; }
.ec-table .is-muted { color: var(--ec-ink-2); }
.ec-table .is-dim { color: var(--ec-ink-3); }
.ec-table .is-strong { font-weight: 600; }
.ec-table .is-nowrap { white-space: nowrap; }
.ec-cell-stack { display: flex; flex-direction: column; gap: 2px; }
.ec-cell-stack small { font-size: 12px; color: var(--ec-ink-3); }
.ec-cell-person { display: flex; align-items: center; gap: 10px; }
.ec-actions-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.ec-table-card { padding: 0; overflow: hidden; gap: 0; }
.ec-table-card .ec-table thead tr { background: var(--ec-panel-3); }
.ec-table-card .ec-table th { padding-top: 13px; padding-bottom: 13px; }
.ec-table-card .ec-table th:first-child, .ec-table-card .ec-table td:first-child { padding-left: 20px; }
.ec-table-card .ec-table th:last-child, .ec-table-card .ec-table td:last-child { padding-right: 20px; }
.ec-table-card .ec-table td { padding-top: 14px; padding-bottom: 14px; }
.ec-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--ec-line); background: var(--ec-panel-3); font-size: 12px; color: var(--ec-ink-3); }
.ec-pages { display: flex; gap: 6px; }
.ec-page { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--ec-line-2); background: transparent; color: var(--ec-ink-2); font-size: 13px; }
.ec-page.is-current { background: var(--ec-ivory); border-color: var(--ec-ivory); color: var(--ec-on-ivory); font-weight: 600; }
.ec-empty { padding: 36px 20px; text-align: center; color: var(--ec-ink-3); font-size: 13px; }

/* ---------- Chips de estado ---------- */
.ec-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 500; white-space: nowrap; }
.ec-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ec-status--borrador  { color: var(--ec-violeta-txt); background: rgba(124,125,226,0.15); border-color: rgba(124,125,226,0.35); }
.ec-status--enviada,
.ec-status--vista     { color: var(--ec-ambar-txt);   background: rgba(190,131,32,0.15);  border-color: rgba(190,131,32,0.35); }
.ec-status--aceptada  { color: var(--ec-verde-txt);   background: rgba(52,168,130,0.15);  border-color: rgba(52,168,130,0.35); }
.ec-status--rechazada { color: var(--ec-rosa-txt);    background: rgba(217,83,107,0.15);  border-color: rgba(217,83,107,0.35); }
.ec-status--vencida   { color: var(--ec-neutro-txt);  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }

.ec-vig--ok { color: var(--ec-ink-2); }
.ec-vig--warn { color: var(--ec-ambar-txt); }
.ec-vig--bad { color: var(--ec-rosa-txt); }
.ec-vig--muted { color: var(--ec-ink-4); }

/* ---------- Historial ---------- */
.ec-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ec-stat { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--ec-line); background: var(--ec-panel); display: flex; flex-direction: column; gap: 6px; }
.ec-stat__label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ec-ink-3); }
.ec-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ec-stat__value { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.ec-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-search { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; }
.ec-search .ec-icon { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--ec-ink-3); }
.ec-search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border-radius: var(--ec-r); border: 1px solid rgba(255,255,255,0.12); background: var(--ec-panel); color: var(--ec-ink); font-size: 14px; }
.ec-search input::placeholder { color: var(--ec-ink-3); }
.ec-filters .ec-select-dark { height: 42px; background-color: var(--ec-panel); }

.ec-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ec-line-2); background: transparent; color: var(--ec-ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.ec-chip:hover { color: var(--ec-ink); }
.ec-chip[aria-pressed="true"] { background: var(--ec-ivory); border-color: var(--ec-ivory); color: var(--ec-on-ivory); }
.ec-chip__n { opacity: .7; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   COTIZADOR
   ========================================================================== */
.ec-steps { display: flex; list-style: none; margin: 0; padding: 0; }
.ec-step { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.ec-step__head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--ec-ink-3); }
.ec-step__dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.ec-step__bar { height: 2px; margin-right: 8px; border-radius: 2px; background: rgba(255,255,255,0.12); transition: background .25s; }
.ec-step.is-done .ec-step__head { color: var(--ec-ink); }
.ec-step.is-done .ec-step__dot { background: var(--ec-ivory); border-color: var(--ec-ivory); color: var(--ec-on-ivory); }
.ec-step.is-done .ec-step__bar { background: var(--ec-ivory); }

.ec-builder { display: grid; grid-template-columns: minmax(0, 1fr) 396px; gap: 20px; align-items: start; }

/* La hoja ivory */
.ec-sheet { border-radius: var(--ec-r-xl); background: var(--ec-ivory); color: var(--ec-on-ivory); overflow: hidden; }
.ec-section { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; border: 0; margin: 0; min-width: 0; }
.ec-section + .ec-section { border-top: 1px solid var(--ec-ivory-line-2); }
.ec-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ec-section__title { display: flex; align-items: baseline; gap: 14px; }
.ec-section__num { font-family: var(--ec-font-display); font-weight: 400; font-size: 34px; line-height: .9; color: rgba(23,23,26,0.28); }
.ec-section__name { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ec-section__hint { display: block; margin-top: 2px; font-size: 12px; color: var(--ec-on-ivory-2); }

.ec-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ec-label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-label em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ec-help { font-size: 11px; color: var(--ec-on-ivory-2); }
.ec-fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }

.ec-input { width: 100%; height: 50px; padding: 0 16px; border-radius: var(--ec-r-md); border: 1px solid var(--ec-ivory-line); background: var(--ec-ivory-2); color: var(--ec-on-ivory); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.ec-input::placeholder { color: var(--ec-on-ivory-3); }
.ec-input:focus { outline: none; border-color: var(--ec-on-ivory); box-shadow: 0 0 0 3px rgba(23,23,26,0.08); }
.ec-input--dashed { background: transparent; border-style: dashed; border-color: rgba(23,23,26,0.24); }
textarea.ec-input { height: auto; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.ec-input-wrap { position: relative; display: flex; align-items: center; }
.ec-input-wrap .ec-icon { position: absolute; left: 15px; width: 17px; height: 17px; color: var(--ec-on-ivory-3); pointer-events: none; }
.ec-input-wrap .ec-input { padding-left: 44px; }
.ec-input-wrap__aside { position: absolute; right: 16px; font-size: 12px; color: var(--ec-on-ivory-2); pointer-events: none; }
.ec-input--lg { height: 52px; padding-right: 130px; }

.ec-pill-select { appearance: none; height: 38px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid rgba(23,23,26,0.16); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317171A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center; color: var(--ec-on-ivory); font-size: 13px; font-weight: 600; }
.ec-inline-label { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ec-on-ivory-2); }

/* Tarjetas seleccionables (radio / checkbox reales, estilizados) */
.ec-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ec-choice { position: relative; display: flex; border-radius: var(--ec-r-md); border: 1px solid rgba(23,23,26,0.16); background: transparent; color: var(--ec-on-ivory); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ec-choice:hover { border-color: rgba(23,23,26,0.4); }
.ec-choice:has(input:checked) { background: var(--ec-on-ivory); border-color: var(--ec-on-ivory); color: var(--ec-ivory-2); }
.ec-choice:has(input:focus-visible) { outline: 2px solid var(--ec-on-ivory); outline-offset: 2px; }

.ec-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.ec-tile { min-height: 76px; padding: 14px 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
.ec-tile__name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.ec-tile__meta { font-size: 10px; opacity: .7; }

.ec-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ec-service { padding: 16px; align-items: center; gap: 13px; }
.ec-service__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: rgba(23,23,26,0.07); display: flex; align-items: center; justify-content: center; }
.ec-choice:has(input:checked) .ec-service__icon { background: rgba(255,255,255,0.12); }
.ec-service__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-service__name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ec-service__desc { font-size: 11px; opacity: .72; }

/* Precio */
.ec-price-row { display: flex; gap: 14px; }
.ec-price-hero { flex: 1; min-width: 0; padding: 18px 22px; border-radius: var(--ec-r-lg); border: 1px solid rgba(23,23,26,0.16); background: var(--ec-ivory-2); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; }
.ec-price-hero:focus-within { border-color: var(--ec-on-ivory); box-shadow: 0 0 0 3px rgba(23,23,26,0.08); }
.ec-price-hero__line { display: flex; align-items: baseline; gap: 8px; }
.ec-price-hero__cur { font-size: 30px; font-weight: 300; color: var(--ec-on-ivory-3); }
.ec-price-hero__input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; background: transparent; color: var(--ec-on-ivory); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ec-price-hero__input:focus { outline: none; }
.ec-price-hero__unit { font-size: 15px; color: var(--ec-on-ivory-2); }

.ec-counter-card { width: 210px; flex-shrink: 0; padding: 18px 20px; border-radius: var(--ec-r-lg); border: 1px solid rgba(23,23,26,0.12); display: flex; flex-direction: column; gap: 12px; }
.ec-counter { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ec-counter__btn { width: 44px; height: 44px; border-radius: var(--ec-r); border: 1px solid rgba(23,23,26,0.16); background: var(--ec-ivory-2); color: var(--ec-on-ivory); display: flex; align-items: center; justify-content: center; }
.ec-counter__btn:hover { border-color: var(--ec-on-ivory); }
.ec-counter__value { width: 64px; border: 0; background: transparent; text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ec-on-ivory); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ec-counter__value::-webkit-outer-spin-button, .ec-counter__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ec-plans-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ec-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ec-plan { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 7px; border-radius: 16px; }
.ec-plan__top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.ec-plan__radio { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(23,23,26,0.3); display: flex; align-items: center; justify-content: center; }
.ec-plan__radio::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.ec-choice:has(input:checked) .ec-plan__radio { border-color: rgba(255,255,255,0.7); }
.ec-choice:has(input:checked) .ec-plan__radio::after { background: var(--ec-ivory-2); }
.ec-plan__tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(23,23,26,0.07); color: var(--ec-on-ivory-2); }
.ec-choice:has(input:checked) .ec-plan__tag { background: rgba(255,255,255,0.14); color: var(--ec-ivory-2); }
.ec-plan__price { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ec-plan__save { font-size: 11px; opacity: .75; }

.ec-validity { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ec-validity .ec-field { width: 210px; }
.ec-validity .ec-input { height: 46px; }
.ec-quick { display: flex; gap: 8px; }
.ec-quick__btn { height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(23,23,26,0.16); background: transparent; color: var(--ec-on-ivory); font-size: 13px; font-weight: 600; }
.ec-quick__btn[aria-pressed="true"] { background: var(--ec-on-ivory); border-color: var(--ec-on-ivory); color: var(--ec-ivory-2); }

/* Beneficios como píldoras */
.ec-cupo { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; color: var(--ec-on-ivory-2); }
.ec-cupo__dots { display: flex; gap: 3px; }
.ec-cupo__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(23,23,26,0.18); }
.ec-cupo__dots span.is-on { background: var(--ec-on-ivory); }
.ec-cupo.is-full, .ec-cupo.is-full .ec-cupo__dots span.is-on { color: var(--ec-alerta-ivory); background-color: transparent; }
.ec-cupo.is-full .ec-cupo__dots span.is-on { background: var(--ec-alerta-ivory); }

.ec-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.ec-pill { height: 42px; padding: 0 16px 0 13px; align-items: center; gap: 9px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ec-on-ivory-3); }
.ec-pill__mark { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(23,23,26,0.22); }
.ec-choice.ec-pill:has(input:checked) .ec-pill__mark { background: rgba(255,255,255,0.16); color: var(--ec-ivory-2); }
.ec-credits { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px dashed rgba(23,23,26,0.24); font-size: 12px; color: var(--ec-on-ivory-2); }
.ec-credits__btn { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(23,23,26,0.16); background: transparent; color: var(--ec-on-ivory); display: flex; align-items: center; justify-content: center; }
.ec-credits__value { width: 26px; border: 0; background: transparent; text-align: center; font-size: 14px; font-weight: 700; color: var(--ec-on-ivory); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ec-credits__value::-webkit-outer-spin-button, .ec-credits__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ec-extras { display: flex; flex-direction: column; gap: 10px; }
.ec-extra { display: flex; align-items: center; gap: 10px; }
.ec-extra .ec-input { height: 46px; flex: 1; }
.ec-extra__handle { width: 16px; height: 16px; color: var(--ec-on-ivory-3); flex-shrink: 0; }
.ec-extra__remove { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; border: 1px solid var(--ec-ivory-line); background: transparent; color: var(--ec-on-ivory-2); display: flex; align-items: center; justify-content: center; }
.ec-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px dashed rgba(23,23,26,0.24); background: transparent; color: var(--ec-on-ivory); font-size: 13px; font-weight: 600; }
.ec-add:hover { border-style: solid; }

/* Columna derecha: vista previa + acciones */
.ec-aside { position: sticky; top: 132px; display: flex; flex-direction: column; gap: 14px; }
.ec-aside__label { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ec-ink-3); }
.ec-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ec-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ec-verde); animation: ec-pulse 2s infinite; }
@keyframes ec-pulse { 50% { opacity: .35; } }

.ec-preview { border-radius: var(--ec-r-lg); background: var(--ec-ivory); color: var(--ec-on-ivory); overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
.ec-preview__cover { padding: 22px 24px 20px; background: var(--ec-on-ivory); color: var(--ec-ink); display: flex; flex-direction: column; gap: 16px; }
.ec-preview__brandrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ec-preview__logo { display: block; width: 104px; height: auto; }
.ec-preview__brand { font-family: var(--ec-font-display); font-weight: 300; font-size: 21px; line-height: 1; }
.ec-preview__brand small { display: block; font-family: var(--ec-font); font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ec-ink-3); }
.ec-preview__kicker { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ec-ink-3); }
.ec-preview__client { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ec-preview__company { font-size: 12px; color: var(--ec-ink-2); margin-top: 3px; }
.ec-preview__body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.ec-preview__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-preview__tag { padding: 4px 10px; border-radius: 999px; background: rgba(23,23,26,0.07); font-size: 11px; font-weight: 600; }
.ec-preview__kicker--dark { color: var(--ec-on-ivory-2); }
.ec-preview__space { font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 5px; }
.ec-preview__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ec-preview__amount { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ec-preview__per { font-size: 12px; color: var(--ec-on-ivory-2); }
.ec-preview__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ec-preview__bullets li { display: flex; gap: 9px; font-size: 11.5px; line-height: 1.4; }
.ec-preview__bullets .ec-icon { width: 13px; height: 13px; stroke-width: 2.4; margin-top: 2px; }
.ec-preview__foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(23,23,26,0.12); font-size: 10px; color: var(--ec-on-ivory-2); }
.ec-preview__foot strong { color: var(--ec-on-ivory); }

.ec-summary { display: flex; flex-direction: column; gap: 9px; }
.ec-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ec-ink-2); }
.ec-summary__row strong { font-size: 14px; color: var(--ec-ink); font-variant-numeric: tabular-nums; }
.ec-summary__row small { color: var(--ec-ink-4); }
.ec-summary__row--total { padding-top: 9px; border-top: 1px solid var(--ec-line); }
.ec-summary__row--total strong { color: var(--ec-verde-txt); }

.ec-toggle { display: flex; gap: 8px; }
.ec-toggle__btn { flex: 1; height: 42px; border-radius: 999px; border: 1px solid var(--ec-line-2); background: transparent; color: var(--ec-ink-2); font-size: 13px; font-weight: 600; }
.ec-toggle__btn[aria-pressed="true"] { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28); color: var(--ec-ink); }

.ec-outputs { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; font-size: 12px; color: var(--ec-ink-2); }
.ec-outputs div { display: flex; align-items: center; gap: 10px; }
.ec-outputs .ec-icon { width: 15px; height: 15px; color: var(--ec-verde-txt); stroke-width: 1.8; }
.ec-outputs b { color: var(--ec-ink); font-weight: 500; }

/* Barra fija inferior (tablet / móvil) */
.ec-mobilebar { display: none; }

/* Toast */
.ec-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 13px 18px; border-radius: 14px; background: var(--ec-ivory); color: var(--ec-on-ivory); font-size: 14px; font-weight: 500; box-shadow: 0 12px 30px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: calc(100vw - 32px); }
.ec-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Elementos solo móvil */
.ec-appbar, .ec-bottomnav { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---- Escritorio compacto ---- */
@media (max-width: 1320px) {
  .ec-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ec-builder { grid-template-columns: minmax(0, 1fr) 360px; }
  .ec-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Tablet: sidebar colapsa a rail de iconos, cotizador en una columna ---- */
@media (max-width: 1180px) {
  :root { --ec-sidebar-w: 76px; }
  .ec-sidebar { padding: 22px 0; align-items: center; gap: 18px; }
  .ec-brand { padding: 0; }
  .ec-brand__logo, .ec-brand__name, .ec-brand__tag, .ec-nav__label, .ec-nav__text, .ec-user__text { display: none; }
  .ec-brand__mono { display: block; }
  .ec-nav { align-items: center; gap: 8px; }
  .ec-nav__link { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: var(--ec-r-md); }
  .ec-nav__label--gap { display: block; width: 24px; height: 1px; padding: 0; margin: 6px 0; background: var(--ec-line); font-size: 0; }
  .ec-user { padding: 0; border: 0; background: none; flex-direction: column; gap: 8px; }

  .ec-topbar { padding: 0 22px; }
  .ec-content { padding: 20px 22px 32px; }
  .ec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ec-grid-2, .ec-grid-2--even { grid-template-columns: minmax(0, 1fr); }

  .ec-builder { grid-template-columns: minmax(0, 1fr); }
  .ec-aside { position: static; }
  .ec-aside__actions { display: none; }
  .ec-mobilebar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--ec-line); background: rgba(20,20,22,0.96); backdrop-filter: blur(10px); }
  .ec-mobilebar__price { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .ec-mobilebar__label { font-size: 11px; color: var(--ec-ink-3); }
  .ec-mobilebar__value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .ec-mobilebar .ec-btn { height: 50px; padding: 0 22px; border-radius: 14px; font-size: 14px; }
  .ec-preview { max-width: 460px; }
  .ec-aside { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .ec-aside__label { width: 100%; }
}

/* ---- Móvil ---- */
@media (max-width: 760px) {
  .ec-app { display: block; padding-bottom: 76px; }
  .ec-sidebar { display: none; }

  .ec-appbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ec-line); background: var(--ec-panel); }
  .ec-appbar .ec-brand__logo { display: block; width: 116px; }
  .ec-appbar .ec-brand__name { display: block; font-size: 24px; }
  .ec-appbar .ec-brand__tag { display: block; font-size: 8px; }
  .ec-appbar__right { display: flex; align-items: center; gap: 10px; }

  .ec-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; gap: 4px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ec-line); background: var(--ec-panel); }
  .ec-bottomnav a { flex: 1; min-height: 52px; border-radius: var(--ec-r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--ec-ink-3); }
  .ec-bottomnav a.is-active { background: rgba(255,255,255,0.08); color: var(--ec-ink); }

  .ec-view { min-height: 0; }
  .ec-topbar { position: static; min-height: 0; padding: 16px; flex-wrap: wrap; gap: 12px; }
  .ec-topbar--steps { padding: 16px 16px 0; }
  .ec-topbar__row { flex-wrap: wrap; gap: 12px; }
  .ec-topbar__title { font-size: 18px; }
  .ec-topbar__title--serif { font-size: 24px; }
  .ec-topbar__sub { display: none; }
  .ec-topbar__actions { width: 100%; }
  .ec-topbar__actions .ec-btn--primary { margin-left: auto; }
  .ec-hide-sm { display: none !important; }
  .ec-step__head span:last-child { display: none; }
  .ec-step.is-current .ec-step__head span:last-child { display: inline; }

  .ec-content { padding: 16px 16px 24px; gap: 14px; }
  .ec-kpis { gap: 10px; }
  .ec-kpi { padding: 14px; gap: 6px; }
  .ec-kpi__value { font-size: 22px; }
  .ec-kpi__note { display: none; }
  .ec-card { padding: 16px; gap: 14px; }
  .ec-bars { height: 140px; }
  .ec-bars__group { padding: 0 3px; gap: 3px; }
  .ec-bars__bar { width: 13px; }
  .ec-hbar { gap: 10px; }
  .ec-hbar__name { width: 84px; font-size: 12px; }
  .ec-hbar__fill { height: 14px; }
  .ec-hbar__value { width: 72px; font-size: 11px; }
  .ec-hbar__count { display: none; }

  /* Tablas → tarjetas */
  .ec-table--stack thead { display: none; }
  .ec-table--stack, .ec-table--stack tbody, .ec-table--stack tr, .ec-table--stack td { display: block; width: 100%; }
  .ec-table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--ec-line-soft); display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
  .ec-table--stack td { padding: 0 !important; border: 0; text-align: left; }
  .ec-table--stack td { grid-column: 1 / -1; }
  .ec-table--stack td[data-col="empresa"] { grid-column: 1; grid-row: 1; }
  .ec-table--stack td[data-col="valor"]   { grid-column: 2; grid-row: 1; text-align: right; }
  .ec-table--stack td[data-col="codigo"]  { grid-column: 1; grid-row: 2; }
  .ec-table--stack td[data-col="estado"]  { grid-column: 2; grid-row: 2; text-align: right; }
  .ec-table--stack td[data-col="sede"] { display: none; }
  .ec-table--stack td[data-col="codigo"], .ec-table--stack td[data-col="servicio"], .ec-table--stack td[data-col="asesora"] { font-size: 12px; color: var(--ec-ink-3); }
  .ec-table--stack td[data-col="acciones"] { padding-top: 6px !important; }
  .ec-show-sm { display: inline !important; }
  .ec-table:not(.ec-table--stack) { font-size: 12px; }
  .ec-table:not(.ec-table--stack) th { padding: 0 6px 10px; letter-spacing: 0.06em; }
  .ec-table:not(.ec-table--stack) td { padding: 12px 6px; }
  .ec-table--stack td[data-col="acciones"] .ec-actions-row { justify-content: flex-start; }
  .ec-table--stack .ec-icon-btn { width: 40px; height: 40px; }
  .ec-table-card { padding: 0 16px; }
  .ec-table-card .ec-table td:first-child, .ec-table-card .ec-table td:last-child { padding: 0; }
  .ec-table-foot { margin: 0 -16px; }

  .ec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ec-stat { padding: 12px 14px; }
  .ec-stat:last-child { grid-column: 1 / -1; }
  .ec-filters .ec-select-dark { flex: 1; min-width: calc(50% - 5px); }
  .ec-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .ec-chips::-webkit-scrollbar { display: none; }

  /* Cotizador */
  .ec-sheet { border-radius: var(--ec-r-lg); }
  .ec-section { padding: 20px 16px; gap: 16px; }
  .ec-section__num { font-size: 28px; }
  .ec-fields-2 { grid-template-columns: minmax(0, 1fr); }
  .ec-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-services { grid-template-columns: minmax(0, 1fr); }
  .ec-price-row { flex-direction: column; }
  .ec-counter-card { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .ec-price-hero__input { font-size: 30px; }
  .ec-plans { grid-template-columns: minmax(0, 1fr); }
  .ec-validity .ec-field { width: 100%; }
  .ec-quick { width: 100%; }
  .ec-quick__btn { flex: 1; }
  .ec-input--lg { padding-right: 16px; }
  .ec-input-wrap__aside { display: none; }
  .ec-mobilebar { bottom: 76px; padding: 12px 16px; }
  .ec-toast { bottom: 150px; }
}

/* ==========================================================================
   PLUGIN — lo que agrega la integracion con el cotizador real
   ========================================================================== */

/* Marca como enlace al sitio */
.ec-brand { color: inherit; }

/* Menu: modulos de la siguiente etapa y vistas con sesion */
.ec-nav__link.is-disabled { cursor: default; }
.ec-nav__lock { margin-left: auto; opacity: .6; }
.ec-bottomnav a.is-disabled { opacity: .45; }
.ec-avatar--ghost { background: rgba(255,255,255,0.09); color: var(--ec-ink); }
a.ec-user:hover { border-color: var(--ec-line-2); }

/* Botones extra */
.ec-btn--sm { height: 34px; padding: 0 14px; font-size: 12px; }
.ec-btn--dark { background: var(--ec-on-ivory); color: var(--ec-ivory-2); }
.ec-btn--dark:hover { background: #000; }
.ec-btn--outline { background: transparent; border-color: rgba(23,23,26,0.24); color: var(--ec-on-ivory); font-weight: 600; }
.ec-btn--outline:hover { border-color: var(--ec-on-ivory); }
.ec-topbar .ec-btn--ghost { color: var(--ec-ink-2); }
.ec-topbar__heading--inline { flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }

/* Aviso de error del servidor */
.ec-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--ec-r-md); border: 1px solid rgba(217,83,107,0.4); background: rgba(217,83,107,0.14); color: var(--ec-rosa-txt); font-size: 14px; }

/* Campo trampa: fuera de la vista y del foco */
.ec-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Errores por campo (vienen del validador del plugin) */
.ec-error { font-size: 12px; font-weight: 600; color: var(--ec-alerta-ivory); }
.ec-field.is-error .ec-input,
.ec-price-hero.is-error,
.ec-counter-card.is-error,
.ec-credits.is-error { border-color: var(--ec-alerta-ivory); }
.ec-field.is-error .ec-choice { border-color: rgba(176,48,74,0.5); }
.ec-field.is-error .ec-pill-select { border-color: var(--ec-alerta-ivory); }
.ec-field--inline { gap: 4px; align-items: flex-end; }

/* Pildoras, pisos y tarjetas ocultas por sede */
.ec-choice[hidden] { display: none !important; }
.ec-subsection { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px 18px 20px; border: 1px dashed rgba(23,23,26,0.2); border-radius: var(--ec-r-lg); min-width: 0; }
.ec-subsection[hidden] { display: none; }
.ec-subsection > legend { padding: 0 6px; }
.ec-empty-note { margin: 0; padding: 10px 14px; border-radius: var(--ec-r); background: rgba(23,23,26,0.05); font-size: 13px; color: var(--ec-on-ivory-2); }
.ec-empty-note[hidden] { display: none; }

/* Estados reales del plugin */
.ec-status--draft { color: var(--ec-violeta-txt); background: rgba(124,125,226,0.15); border-color: rgba(124,125,226,0.35); }
.ec-status--sent  { color: var(--ec-ambar-txt);   background: rgba(190,131,32,0.15);  border-color: rgba(190,131,32,0.35); }
.ec-sheet .ec-status--draft { color: #4b4cb0; }
.ec-sheet .ec-status--sent { color: #8a5a10; }

/* Nota informativa en tarjetas oscuras */
.ec-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--ec-line); font-size: 12px; color: var(--ec-ink-3); }

/* Vista que pide sesion */
.ec-locked { align-items: center; text-align: center; padding: 48px 24px; max-width: 560px; width: 100%; margin: 24px auto; }
.ec-locked__icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }

/* Pantalla de exito */
.ec-done { max-width: 760px; width: 100%; margin: 0 auto; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.ec-done__head { display: flex; align-items: center; gap: 16px; }
.ec-done__head > div { flex: 1; min-width: 0; }
.ec-done__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--ec-on-ivory); color: var(--ec-ivory-2); display: flex; align-items: center; justify-content: center; }
.ec-done__folio { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-done__title { margin: 2px 0 0; font-family: var(--ec-font-display); font-weight: 400; font-size: 32px; line-height: 1.05; }
.ec-done__data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ec-done__data div { padding: 14px 16px; border-radius: var(--ec-r-md); background: var(--ec-ivory-2); border: 1px solid var(--ec-ivory-line-2); }
.ec-done__data dt { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-done__data dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; }
.ec-share { display: flex; gap: 10px; }
.ec-share .ec-input { flex: 1; min-width: 0; font-size: 13px; }
.ec-share .ec-btn { height: 50px; border-radius: var(--ec-r-md); }
.ec-done__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ec-done__actions .ec-btn { height: 46px; }

/* Campos del registro que esta vista no conoce ("Otros datos") */
.ec-section--generic .cwq-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
.ec-section--generic .cwq-field { grid-column: span 6; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ec-section--generic .cwq-field--half { grid-column: span 3; }
.ec-section--generic .cwq-field--third { grid-column: span 2; }
.ec-section--generic .cwq-field__label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-section--generic .cwq-field__icon { width: 14px; height: 14px; }
.ec-section--generic .cwq-field__input { width: 100%; min-height: 46px; padding: 10px 16px; border-radius: var(--ec-r-md); border: 1px solid var(--ec-ivory-line); background: var(--ec-ivory-2); color: var(--ec-on-ivory); font: inherit; font-size: 14px; }
.ec-section--generic .cwq-field__hint { margin: 0; font-size: 11px; color: var(--ec-on-ivory-2); }
.ec-section--generic .cwq-field__error { margin: 0; font-size: 12px; font-weight: 600; color: var(--ec-alerta-ivory); }

/* Dashboard sin datos */
.ec-empty-chart { padding: 28px 0; text-align: center; font-size: 13px; color: var(--ec-ink-3); }

@media (max-width: 1180px) {
  .ec-nav__lock { display: none; }
}

@media (max-width: 760px) {
  .ec-done { padding: 20px 16px; }
  .ec-done__data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-done__title { font-size: 26px; }
  .ec-share { flex-direction: column; }
  .ec-section--generic .cwq-field--half, .ec-section--generic .cwq-field--third { grid-column: span 6; }
  .ec-field--inline { width: 100%; align-items: stretch; }
  .ec-field--inline .ec-inline-label { justify-content: space-between; }
  .ec-field--inline .ec-pill-select { flex: 1; min-width: 0; }
  .ec-subsection { padding: 14px; }
}

/* Historial: cambiar el estado de una cotizacion */
.ec-state-cell { align-items: flex-start; gap: 6px; }
.ec-state-actions { display: inline-flex; align-items: center; gap: 4px; }
.ec-state-btn { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(190,131,32,0.45); background: rgba(190,131,32,0.14); color: var(--ec-ambar-txt); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ec-state-btn:hover { background: rgba(190,131,32,0.24); }
.ec-state-btn.is-close { border-color: rgba(52,168,130,0.45); background: rgba(52,168,130,0.14); color: var(--ec-verde-txt); }
.ec-state-btn.is-close:hover { background: rgba(52,168,130,0.24); }
.ec-state-undo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--ec-line-2); color: var(--ec-ink-3); }
.ec-state-undo .ec-icon { width: 12px; height: 12px; }
.ec-state-undo:hover { color: var(--ec-ink); border-color: rgba(255,255,255,0.3); }
@media (max-width: 760px) { .ec-state-btn { height: 36px; } .ec-state-undo { width: 36px; height: 36px; } }

/* ==========================================================================
   Acceso individual (1.1.0)
   ========================================================================== */

/* Estado "Cerrada" (negocio ganado) */
.ec-status--closed { color: var(--ec-verde-txt); background: rgba(52,168,130,0.15); border-color: rgba(52,168,130,0.35); }
.ec-sheet .ec-status--closed { color: #1d7a5c; }

/* Asesora responsable, fija (la pone el sistema) */
.ec-owner { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 10px; border: 1px solid var(--ec-ivory-line); background: var(--ec-ivory-2); color: var(--ec-on-ivory); }
.ec-owner .ec-avatar--sm { background: var(--ec-on-ivory); color: var(--ec-ivory); }
.ec-owner__text { display: flex; flex-direction: column; line-height: 1.2; }
.ec-owner__label { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-owner__name { font-size: 13px; font-weight: 600; }
.ec-owner__lock { color: var(--ec-on-ivory-3); }

/* Cerrar sesion */
.ec-user__logout { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--ec-ink-3); border: 1px solid transparent; }
.ec-user__logout:hover { color: var(--ec-ink); border-color: var(--ec-line-2); }
@media (max-width: 1180px) { .ec-user__logout { margin-left: 0; } }

/* Una columna (dashboard de una asesora) */
.ec-stack { display: grid; gap: 18px; }

/* ---------- Pantalla de ingreso ---------- */
.ec-login, .ec-login *, .ec-login *::before, .ec-login *::after { box-sizing: border-box; }
.ec-login { min-height: 100vh; min-height: 100dvh; display: flex; gap: 16px; padding: 16px; background: var(--ec-bg); color: var(--ec-ink); font-family: var(--ec-font); }
.ec-login a { color: inherit; text-decoration: none; }

.ec-login__carousel { position: relative; flex: 1 1 auto; min-height: calc(100vh - 32px); border-radius: var(--ec-r-lg); overflow: hidden; background: var(--ec-panel); isolation: isolate; }
.ec-login__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.ec-login__slide.is-active { opacity: 1; }
.ec-login__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0.45) 0%, rgba(10,10,11,0) 32%, rgba(10,10,11,0.2) 55%, rgba(10,10,11,0.85) 100%); }
.ec-login__copy { position: absolute; left: 48px; right: 48px; bottom: 76px; z-index: 1; max-width: 620px; opacity: 0; transform: translateY(10px); transition: opacity .7s ease .15s, transform .7s ease .15s; }
.ec-login__slide.is-active .ec-login__copy { opacity: 1; transform: none; }
.ec-login__sede { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(10,10,11,0.45); border: 1px solid rgba(255,255,255,0.18); font-size: 12px; font-weight: 500; color: var(--ec-ink); backdrop-filter: blur(6px); }
.ec-login__headline { margin: 0 0 14px; font-family: var(--ec-font-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.ec-login__text { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.82); text-wrap: pretty; }
.ec-login__brand { position: absolute; top: 30px; left: 36px; z-index: 2; }
.ec-login__brand img { display: block; width: 150px; height: auto; }
.ec-login__back { position: absolute; top: 34px; right: 36px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: rgba(10,10,11,0.4); border: 1px solid rgba(255,255,255,0.16); font-size: 13px; font-weight: 500; color: #fff; backdrop-filter: blur(6px); }
.ec-login__back:hover { background: rgba(10,10,11,0.6); }
.ec-login__dots { position: absolute; left: 48px; bottom: 44px; z-index: 2; display: flex; gap: 8px; }
.ec-login__dot { width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); transition: background .3s, width .3s; }
.ec-login__dot.is-active { width: 38px; background: #fff; }

.ec-login__panel { flex: 0 0 480px; display: flex; flex-direction: column; justify-content: center; padding: 56px 48px; border-radius: var(--ec-r-lg); background: var(--ec-ivory); color: var(--ec-on-ivory); }
.ec-login__inner { width: 100%; max-width: 380px; margin: 0 auto; }
.ec-login__logo { display: none; width: 132px; height: auto; margin-bottom: 36px; }
.ec-login__eyebrow { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-login__title { margin: 0 0 10px; font-family: var(--ec-font-display); font-weight: 500; font-size: 38px; line-height: 1.1; letter-spacing: -0.01em; }
.ec-login__sub { margin: 0 0 30px; font-size: 14px; line-height: 1.55; color: var(--ec-on-ivory-2); }

.ec-login__alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border-radius: 10px; background: rgba(176,48,74,0.09); border: 1px solid rgba(176,48,74,0.3); color: #8e2239; font-size: 13px; line-height: 1.45; }
.ec-login__alert .ec-icon { flex-shrink: 0; margin-top: 1px; }
.ec-login__alert--ok { background: rgba(52,168,130,0.1); border-color: rgba(52,168,130,0.35); color: #1d6b51; }

.ec-login__form { display: flex; flex-direction: column; gap: 18px; }
.ec-login__field { display: flex; flex-direction: column; gap: 8px; }
.ec-login__label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-login .ec-input { height: 48px; border-radius: 10px; font-family: inherit; }
.ec-login__pwd { padding-right: 48px; }
.ec-login__eye { position: absolute; right: 6px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--ec-on-ivory-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ec-login__eye:hover { background: rgba(23,23,26,0.06); color: var(--ec-on-ivory); }
.ec-login .ec-input-wrap .ec-login__eye .ec-icon { position: static; width: 18px; height: 18px; color: currentColor; }

.ec-login__options { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.ec-login__check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ec-on-ivory); user-select: none; }
.ec-login__check input { position: absolute; opacity: 0; pointer-events: none; }
.ec-login__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(23,23,26,0.3); background: var(--ec-ivory-2); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.ec-login__box .ec-icon { width: 12px; height: 12px; color: var(--ec-ivory); opacity: 0; stroke-width: 3; }
.ec-login__check input:checked + .ec-login__box { background: var(--ec-on-ivory); border-color: var(--ec-on-ivory); }
.ec-login__check input:checked + .ec-login__box .ec-icon { opacity: 1; }
.ec-login__check input:focus-visible + .ec-login__box { outline: 2px solid var(--ec-on-ivory); outline-offset: 2px; }
.ec-login__forgot { color: var(--ec-on-ivory-2); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(23,23,26,0.25); text-underline-offset: 3px; }
.ec-login__forgot:hover { color: var(--ec-on-ivory); }

.ec-login__dest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ec-login__dest legend { width: 100%; margin-bottom: 8px; padding: 0; }
.ec-login__dest label { flex: 1; cursor: pointer; }
.ec-login__dest input { position: absolute; opacity: 0; pointer-events: none; }
.ec-login__dest span { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ec-ivory-line); background: var(--ec-ivory-2); font-size: 13px; font-weight: 500; color: var(--ec-on-ivory-2); transition: background .15s, color .15s, border-color .15s; }
.ec-login__dest input:checked + span { border-color: var(--ec-on-ivory); color: var(--ec-on-ivory); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ec-on-ivory); }
.ec-login__dest input:focus-visible + span { outline: 2px solid var(--ec-on-ivory); outline-offset: 2px; }

.ec-login__submit { height: 52px; margin-top: 6px; border: 0; border-radius: 10px; background: var(--ec-on-ivory); color: var(--ec-ivory); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, transform .05s; }
.ec-login__submit:hover { background: #000; }
.ec-login__submit:active { transform: translateY(1px); }
.ec-login__submit:disabled { opacity: .7; cursor: progress; }
.ec-login__foot { margin: 26px 0 0; text-align: center; font-size: 13px; color: var(--ec-on-ivory-2); }

@media (max-width: 1100px) {
  .ec-login__panel { flex-basis: 420px; padding: 48px 36px; }
  .ec-login__copy { left: 36px; right: 36px; }
  .ec-login__dots { left: 36px; }
}
@media (max-width: 900px) {
  .ec-login { padding: 0; }
  .ec-login__carousel { display: none; }
  .ec-login__panel { flex: 1 1 auto; min-height: 100vh; min-height: 100dvh; justify-content: flex-start; padding: 40px 20px 32px; border-radius: 0; }
  .ec-login__logo { display: block; }
  .ec-login__title { font-size: 32px; }
}
@media (max-width: 340px) {
  .ec-login__options { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Comparativo del equipo (#comparativo, pestaña del dashboard)
   Sin rojos: lo que empeora va en gris; lo que mejora, en verde.
   ========================================================================== */
.ec-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--ec-line); background: var(--ec-panel); align-self: flex-start; max-width: 100%; overflow-x: auto; }
.ec-tabs__tab { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ec-ink-3); white-space: nowrap; }
.ec-tabs__tab:hover { color: var(--ec-ink); }
.ec-tabs__tab.is-active { background: var(--ec-ivory); color: var(--ec-on-ivory); font-weight: 600; }

.ec-cmp-filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 16px 18px; }
.ec-cmp-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ec-cmp-filter[hidden] { display: none; }
.ec-cmp-filter--range { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ec-cmp-filter--range .ec-cmp-filter__label { align-self: center; }
.ec-cmp-filter__label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ec-ink-3); }
.ec-cmp-date { padding-right: 12px; background-image: none; color-scheme: dark; }
.ec-select-dark--sm { height: 34px; font-size: 12px; }

/* Selector de varias asesoras */
.ec-ms { position: relative; }
.ec-ms__summary { display: flex; align-items: center; min-width: 210px; list-style: none; cursor: pointer; line-height: 40px; }
.ec-ms__summary::-webkit-details-marker { display: none; }
.ec-ms[open] .ec-ms__summary { border-color: rgba(255,255,255,0.3); }
.ec-ms__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 280px; max-width: 86vw; padding: 10px; border-radius: 12px; border: 1px solid var(--ec-line-2); background: var(--ec-panel-2); box-shadow: 0 14px 34px rgba(0,0,0,0.5); }
.ec-ms__quick { display: flex; gap: 14px; padding: 2px 6px 10px; border-bottom: 1px solid var(--ec-line); margin-bottom: 6px; }
.ec-ms__quick button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; cursor: pointer; }
.ec-ms__list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.ec-ms__item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.ec-ms__item:hover { background: rgba(255,255,255,0.05); }
.ec-ms__item input { width: 16px; height: 16px; accent-color: var(--ec-ivory); }
.ec-ms__item small { color: var(--ec-ink-3); }
.ec-ms__empty { margin: 8px 6px; font-size: 13px; color: var(--ec-ink-3); }

.ec-cmp-note { margin: -4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ec-ink-3); }

.ec-cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ec-cmp-kpi { padding: 16px; gap: 8px; }
.ec-cmp-kpi .ec-kpi__label { min-height: 2.6em; line-height: 1.3; }
.ec-cmp-kpi .ec-kpi__value { font-size: 24px; }
.ec-cmp-kpi__team { font-size: 11px; color: var(--ec-ink-3); }
.ec-cmp-kpi__team strong { color: var(--ec-ink-2); font-weight: 600; }

.ec-cmp-var { display: inline-block; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ec-cmp-var.is-better { color: var(--ec-verde-txt); }
.ec-cmp-var.is-flat { color: var(--ec-ink-4); }

.ec-cmp-head { padding: 20px 20px 14px; }
.ec-cmp-scroll { overflow-x: auto; }
.ec-cmp-table th, .ec-cmp-table td, .ec-cmp-matrix th, .ec-cmp-matrix td { white-space: nowrap; }
.ec-cmp-table th:first-child, .ec-cmp-table td:first-child, .ec-cmp-matrix th:first-child, .ec-cmp-matrix td:first-child { padding-left: 20px; }
.ec-cmp-table th:last-child, .ec-cmp-table td:last-child, .ec-cmp-matrix th:last-child, .ec-cmp-matrix td:last-child { padding-right: 20px; }
.ec-cmp-table thead tr, .ec-cmp-matrix thead tr { background: var(--ec-panel-3); }
.ec-cmp-table thead th, .ec-cmp-matrix thead th { padding-top: 12px; padding-bottom: 12px; }
.ec-cmp-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ec-cmp-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ec-cmp-sort:hover, .ec-cmp-sort.is-on { color: var(--ec-ink); }
.ec-cmp-pos { width: 44px; }
.ec-cmp-metric { font-weight: 500; text-align: left; color: var(--ec-ink-2); }
.ec-cmp-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ec-ink-2); background: rgba(255,255,255,0.05); font-variant-numeric: tabular-nums; }
.ec-cmp-medal--1 { background: rgba(231,180,99,0.22); color: #F2CD8B; }
.ec-cmp-medal--2 { background: rgba(214,214,220,0.16); color: #DADAE0; }
.ec-cmp-medal--3 { background: rgba(190,131,80,0.2); color: #D9A67A; }
.ec-cmp-table tr.is-me td, .ec-cmp-matrix tr.is-me th, .ec-cmp-matrix tr.is-me td { background: rgba(235,233,228,0.05); }
.ec-cmp-table tfoot th, .ec-cmp-table tfoot td { border-top: 1px solid var(--ec-line-2); background: var(--ec-panel-3); font-weight: 600; text-align: left; }
.ec-cmp-table tfoot td { text-align: right; }
.ec-cmp-table tbody th, .ec-cmp-table tfoot th, .ec-cmp-matrix tbody th { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ec-ink); }
.ec-cmp-matrix tbody th { font-weight: 500; text-align: left; }
.ec-cmp-matrix tr.is-total th, .ec-cmp-matrix tr.is-total td { border-top: 1px solid var(--ec-line-2); background: var(--ec-panel-3); font-weight: 600; }

/* Barras por indicador */
.ec-cmp-bars { display: flex; flex-direction: column; gap: 12px; }
.ec-cmp-bar { display: flex; align-items: center; gap: 12px; }
.ec-cmp-bar__name { width: 130px; flex-shrink: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-cmp-bar.is-anon .ec-cmp-bar__name { color: var(--ec-ink-4); }
.ec-cmp-bar.is-me .ec-cmp-bar__name { font-weight: 600; }
.ec-cmp-bar__track { position: relative; flex: 1; min-width: 0; height: 26px; }
.ec-cmp-bar__fill { position: absolute; left: 0; top: 0; height: 16px; border-radius: 4px; background: rgba(235,233,228,0.55); transition: width .4s ease; }
.ec-cmp-bar.is-me .ec-cmp-bar__fill, .ec-cmp-bars:not(:has(.is-anon)) .ec-cmp-bar__fill { background: var(--ec-ivory); }
.ec-cmp-bar.is-anon .ec-cmp-bar__fill { background: rgba(235,233,228,0.22); }
.ec-cmp-bars.has-focus .ec-cmp-bar:not(.is-me) .ec-cmp-bar__fill { background: rgba(235,233,228,0.22); }
.ec-cmp-bars.has-focus .ec-cmp-bar:not(.is-me) .ec-cmp-bar__name { color: var(--ec-ink-3); }
.ec-cmp-bar__prev { position: absolute; left: 0; top: 19px; height: 5px; border-radius: 3px; background: var(--ec-contexto); }
.ec-cmp-bar__avg { position: absolute; top: -3px; bottom: -1px; width: 0; border-left: 2px dashed var(--ec-ambar-txt); }
.ec-cmp-bar__value { width: 88px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ec-legend__swatch--prev { background: var(--ec-contexto); height: 5px; margin: 2px 0; }
.ec-legend__swatch--avg { width: 0; height: 12px; border-left: 2px dashed var(--ec-ambar-txt); border-radius: 0; }

/* Estados apilados */
.ec-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--ec-line-2); flex-shrink: 0; }
.ec-seg__btn { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ec-ink-3); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.ec-seg__btn[aria-pressed="true"] { background: rgba(255,255,255,0.1); color: var(--ec-ink); }
.ec-cmp-stack { display: flex; flex-direction: column; gap: 12px; }
.ec-cmp-stack__row { display: flex; align-items: center; gap: 12px; }
.ec-cmp-stack__name { width: 130px; flex-shrink: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-cmp-stack__row.is-me .ec-cmp-stack__name, .ec-cmp-stack__row.is-total .ec-cmp-stack__name { font-weight: 600; }
.ec-cmp-stack__bar { flex: 1; min-width: 0; display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,0.05); }
.ec-cmp-stack__seg { height: 100%; }
.ec-cmp-stack__seg + .ec-cmp-stack__seg { border-left: 1px solid var(--ec-panel); }
.ec-cmp-stack__empty { padding-left: 8px; font-size: 11px; line-height: 16px; color: var(--ec-ink-4); }
.ec-cmp-stack__value { width: 78px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--ec-ink-3); font-variant-numeric: tabular-nums; }

/* Sugerencias */
.ec-cmp-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ec-cmp-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ec-line); background: var(--ec-panel-2); font-size: 13px; line-height: 1.5; color: var(--ec-ink-2); }
.ec-cmp-tip .ec-icon { flex-shrink: 0; margin-top: 2px; }
.ec-cmp-tip--ok .ec-icon { color: var(--ec-verde-txt); }
.ec-cmp-tip--idea .ec-icon { color: var(--ec-ambar-txt); }
.ec-cmp-tip--info .ec-icon { color: var(--ec-ink-3); }

@media (max-width: 760px) {
  .ec-cmp-filters { flex-direction: column; align-items: stretch; }
  .ec-cmp-filter .ec-select-dark, .ec-ms__summary { width: 100%; }
  .ec-ms__panel { width: 100%; }
  .ec-cmp-bar__name, .ec-cmp-stack__name { width: 84px; font-size: 12px; }
  .ec-cmp-bar__value { width: 70px; font-size: 12px; }
  .ec-cmp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-cmp-kpi .ec-kpi__value { font-size: 20px; }
  .ec-card__head { flex-wrap: wrap; }
}

/* ==========================================================================
   Oficina virtual en el formulario (plan + periodo; el precio se carga solo)
   ========================================================================== */
[data-no-virtual][hidden], [data-solo-virtual][hidden] { display: none !important; }
.ec-vplans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.ec-vplan { min-height: 104px; padding: 14px 12px; flex-direction: column; align-items: flex-start; gap: 5px; }
.ec-vplan__name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.ec-vplan__meta { font-size: 10px; line-height: 1.3; opacity: .7; }
.ec-vplan__price { margin-top: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ec-vplan__warn { font-size: 9.5px; font-weight: 600; line-height: 1.25; color: #9a5b12; }
.ec-choice:has(input:checked) .ec-vplan__warn { color: #f0c27a; }
.ec-vplans.is-error .ec-vplan { border-color: var(--ec-alerta-ivory); }
.ec-vperiods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-width: 420px; }
.ec-vperiod { height: 42px; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border-radius: 10px; }
.ec-vsummary { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.ec-vsummary__main, .ec-vsummary__extra { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--ec-ivory-2); border: 1px solid var(--ec-ivory-line-2); }
.ec-vsummary__main { flex: 1 1 260px; }
.ec-vsummary__extra { flex: 0 1 200px; justify-content: center; font-size: 12px; color: var(--ec-on-ivory-2); }
.ec-vsummary__extra strong { font-size: 16px; color: var(--ec-on-ivory); }
.ec-vsummary__plan { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ec-on-ivory-2); }
.ec-vsummary__price { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ec-vfeatures__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ec-vlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.ec-vlist li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.ec-vlist--yes .ec-icon { flex-shrink: 0; margin-top: 2px; color: #1d7a5c; }
.ec-vlist--no { color: var(--ec-on-ivory-2); }
.ec-vlist__dash { flex-shrink: 0; width: 10px; height: 2px; margin-top: 8px; background: var(--ec-on-ivory-3); }
.ec-alert--soft { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border-color: rgba(190,131,32,0.35); background: rgba(190,131,32,0.1); color: #7a4a0c; font-size: 12px; }
.ec-vprice { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 10px; background: var(--ec-ivory-2); border: 1px solid var(--ec-ivory-line-2); }
.ec-vprice__line { display: flex; align-items: baseline; gap: 8px; }
.ec-vprice__amount { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ec-vprice__unit { font-size: 13px; color: var(--ec-on-ivory-2); }
.ec-note--sheet { border-top: 0; padding: 12px 14px; border-radius: 10px; background: var(--ec-ivory-2); color: var(--ec-on-ivory-2); }
@media (max-width: 1180px) { .ec-vplans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ec-vplans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-vfeatures__cols { grid-template-columns: 1fr; }
  .ec-vperiods { max-width: none; }
}

/* Mi resumen · comparar mi desempeño */
.ec-dash-cmp { margin-top: 0; }
.ec-dash-series { margin-top: 4px; border-top: 1px solid var(--ec-line); padding-top: 12px; overflow-x: auto; }
.ec-dash-series__table th, .ec-dash-series__table td { white-space: nowrap; padding-top: 9px; padding-bottom: 9px; }
.ec-dash-series__table thead th { font-size: 10.5px; }
.ec-dash-series__table tbody th { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ec-ink); font-weight: 500; text-align: left; }
.ec-dash-series__table .is-on { color: var(--ec-ink); font-weight: 700; }
.ec-dash-series__hint { margin: 0; color: var(--ec-ink-3); font-size: 12px; }

/* Grafica con varias series: barras flexibles (caben en el celular) y
   ayuda en varias lineas, alineada dentro de la grafica en los extremos. */
.ec-bars { overflow-x: clip; }
.ec-bars__group--multi { min-width: 0; gap: 3px; padding: 0 4px; }
.ec-bars__bar--flex { flex: 1 1 0; min-width: 3px; width: auto; }
.ec-bars__tip--multi { white-space: pre-line; text-align: left; line-height: 1.5; }
.ec-bars__group:first-child .ec-bars__tip--multi { left: 0; transform: none; }
.ec-bars__group:last-child .ec-bars__tip--multi { left: auto; right: 0; transform: none; }