/* ============================================================================
   SayProposals · Editor PRO (precios y planes)
   Página completa del panel: barra superior, panel de secciones a la
   izquierda (380 px) y vista previa a la derecha. Mismo lenguaje que el
   shell (navy, celeste, radius 10-14, Open Sans). Cero emojis, cero
   pastillas: los conmutadores son un track gris chico, como el del alta de
   cliente. Todo texto sobre blanco va en navy o en --gris (4,8:1), nunca en
   --gris2, que no llega a 4,5:1.
   ========================================================================== */

#editorPro{flex:1;min-width:0;}
.ep{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);}

/* ---------- Barra superior ---------- */
.ep-top{display:flex;align-items:center;gap:16px;height:60px;padding:0 20px 0 14px;
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;}
.ep-volver{display:inline-flex;align-items:center;gap:4px;background:none;border:0;
  border-radius:8px;padding:8px 10px 8px 6px;font-family:inherit;font-size:13.5px;font-weight:700;
  color:var(--navy);cursor:pointer;transition:background .15s;}
.ep-volver:hover{background:#f2f5f8;}
.ep-volver .ico{width:17px;height:17px;}
.ep-tit{display:flex;flex-direction:column;min-width:0;padding-left:14px;border-left:1px solid var(--line);}
.ep-tit b{font-size:15px;font-weight:800;letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ep-tit span{font-size:12px;font-weight:600;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* El nombre de la funcionalidad, al lado del de la propuesta. El rectángulo
   de PRO es .marca-pro (ui.css); acá solo va el "Editor" que lo precede. */
.ep-pro{flex:none;font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;}

.ep-estado{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;font-weight:700;color:var(--gris);}
.ep-estado .punto{width:8px;height:8px;border-radius:50%;background:#c3cdd9;}
.ep-estado.sucio{color:var(--navy);}
.ep-estado.sucio .punto{background:var(--navy);}
.ep-acc{display:flex;align-items:center;gap:10px;}
.ep-acc .btn .ico{width:13px;height:13px;}

/* ---------- Cuerpo: panel + previa ---------- */
.ep-cuerpo{display:flex;flex:1;min-height:0;}
.ep-lado{width:380px;flex:none;background:#fff;border-right:1px solid var(--line);
  height:calc(100vh - 60px);position:sticky;top:60px;overflow-y:auto;overscroll-behavior:contain;}
.ep-lado-cab{padding:18px 18px 14px;border-bottom:1px solid var(--line);}
.ep-lado-cab b{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}
.ep-lado-cab span{display:block;font-size:12px;color:var(--gris);font-weight:600;margin-top:4px;line-height:1.45;}

.ep-sec{border-bottom:1px solid var(--line);}
.ep-sec-cab{display:flex;align-items:center;gap:10px;width:100%;padding:12px 18px;background:none;border:0;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--txt);text-align:left;cursor:pointer;
  transition:background .14s;}
.ep-sec-cab span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ep-sec-cab .ico{width:15px;height:15px;flex:none;color:var(--gris);}
.ep-sec.bloq .ep-sec-cab{font-weight:600;color:var(--gris);}
.ep-sec.bloq .ep-sec-cab:hover{background:#fafbfd;color:var(--navy);}
.ep-sec.activa .ep-sec-cab{background:var(--celeste-soft);color:var(--navy);}
.ep-sec.activa .ep-sec-cab .ico{color:var(--navy);transform:rotate(180deg);}
.ep-sec-cuerpo{padding:16px 18px 22px;}
.ep-nota{font-size:12.5px;color:var(--gris);font-weight:600;line-height:1.5;}

/* ---------- Vista previa ---------- */
.ep-previa{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:14px 20px 20px;
  height:calc(100vh - 60px);position:sticky;top:60px;}
.ep-previa-barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ep-previa-et{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);}
.ep-previa-nota{margin-left:auto;font-size:12px;font-weight:600;color:var(--gris);}

/* Track gris chico, nunca dos cápsulas (mismas medidas que el alta de cliente). */
.ep-seg{display:inline-flex;background:#EEF2F7;border-radius:6px;padding:3px;}
/* El botón apagado va en #5b6b85 (4,8:1 sobre el track); --gris daría 4,2. */
.ep-seg button{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:600;
  color:#5b6b85;background:none;border:0;border-radius:4px;padding:5px 12px;cursor:pointer;}
.ep-seg button .ico{width:14px;height:14px;}
.ep-seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(15,25,45,.1);}

.ep-marco{flex:1;min-height:0;display:flex;justify-content:center;background:#e9edf2;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.ep-marco iframe{border:0;width:100%;height:100%;background:#fff;display:block;transition:width .2s;}
.ep-marco.mobile iframe{width:375px;flex:none;border-left:1px solid var(--line);border-right:1px solid var(--line);}

@media(max-width:980px){
  .ep-cuerpo{flex-direction:column;}
  .ep-lado{width:100%;height:auto;position:static;}
  .ep-previa{height:70vh;position:static;}
}

/* ---------- Panel de precios ---------- */
.ep-grupo{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.ep-grupo:last-of-type{border-bottom:0;margin-bottom:0;}
.ep-grupo h4{font-size:13px;font-weight:800;margin-bottom:4px;}
.ep-grupo > p{font-size:12px;color:var(--gris);font-weight:600;margin-bottom:12px;line-height:1.45;}
.ep-grupo > .ep-campo{margin-bottom:12px;}
.ep-sub{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin:16px 0 8px;}

/* Controles compactos: en 380 px cada píxel cuenta. */
.ep-campo input,.ep-campo textarea{padding:9px 11px;font-size:13.5px;border-radius:9px;}
.ep-campo textarea{min-height:0;}
.ep-campo label{font-size:10px;margin-bottom:5px;}
.ep-campo .campo-ayuda{color:var(--gris);}
.ep input::placeholder,.ep textarea::placeholder{color:var(--gris);opacity:1;}
.ep-mal{border-color:var(--rojo)!important;background:#fff!important;}
.ep-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px;}

/* Filas con acciones a la derecha (formatos, líneas, escalones). */
.ep-lista{display:flex;flex-direction:column;gap:8px;}
.ep-fila{display:flex;align-items:flex-start;gap:6px;}
.ep-fila > .ep-campo{flex:1;min-width:0;}
.ep-fila-acc{display:flex;align-items:center;gap:2px;flex:none;padding-top:1px;}
.ep-fila-escalon .ep-fila-acc{padding-top:22px;}
/* Filas con cinco acciones (líneas de la tarjeta, notas, píldoras): los
   botones van más angostos para que el texto conserve su ancho. */
.ep-fila-linea .ep-ico{width:26px;}
.ep-fila-linea .ep-fila-acc .ep-check{padding:8px 2px 8px 0;}
.ep-ico{display:flex;align-items:center;justify-content:center;width:32px;height:36px;flex:none;
  background:none;border:0;border-radius:8px;color:var(--gris);cursor:pointer;transition:background .14s,color .14s;}
.ep-ico:hover{background:#f2f5f8;color:var(--navy);}
.ep-ico:disabled{opacity:.3;cursor:default;background:none;}
.ep-ico .ico{width:15px;height:15px;}
.ep-agregar{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:8px 0 0;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;}
.ep-agregar:hover{text-decoration:underline;}
.ep-agregar .ico{width:14px;height:14px;}

/* Check de la casa (mismo dibujo que el alta de cliente). */
.ep-checks{display:flex;flex-direction:column;gap:4px;}
.ep-check{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:4px 0;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--txt);cursor:pointer;text-align:left;}
.ep-check .caja{display:flex;align-items:center;justify-content:center;width:17px;height:17px;flex:none;
  border:1.5px solid #c3cdd9;border-radius:5px;background:#fff;color:#fff;}
.ep-check .caja .ico{width:11px;height:11px;opacity:0;}
.ep-check.on .caja{background:var(--navy);border-color:var(--navy);}
.ep-check.on .caja .ico{opacity:1;}
.ep-fila-acc .ep-check{padding:8px 6px 8px 2px;}
.ep-fila-acc .ep-check > span:last-child{display:none;}

/* Planes en acordeón. */
.ep-planes{display:flex;flex-direction:column;gap:8px;}
.ep-plan{border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;}
.ep-plan.abierto{border-color:var(--celeste);}
.ep-plan-cab{display:flex;align-items:center;gap:8px;width:100%;padding:11px 12px 11px 14px;background:none;border:0;
  font-family:inherit;font-size:13.5px;font-weight:800;color:var(--txt);text-align:left;cursor:pointer;}
.ep-plan-cab:hover{background:#fafbfd;}
.ep-plan-nombre{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ep-plan-tag{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);}
.ep-plan-cab .ico{width:15px;height:15px;flex:none;color:var(--gris);transition:transform .16s;}
.ep-plan.abierto .ep-plan-cab .ico{transform:rotate(180deg);color:var(--navy);}
.ep-plan-err{display:none;width:8px;height:8px;border-radius:50%;background:var(--rojo);flex:none;}
.ep-plan.con-error .ep-plan-err{display:block;}
.ep-plan.con-error .ep-plan-cab{color:var(--rojo);}
.ep-plan-cuerpo{display:none;padding:4px 14px 16px;border-top:1px solid var(--line);}
.ep-plan.abierto .ep-plan-cuerpo{display:block;}
.ep-plan-cuerpo > .ep-campo{margin:12px 0;}
.ep-plan-acc{display:flex;align-items:center;gap:4px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.ep-plan-acc .btn .ico{width:13px;height:13px;}
.ep-plan-acc .ep-quitar{margin-left:auto;color:var(--rojo);}
.ep-plan-acc .ep-quitar:disabled{color:var(--gris);}
.ep-pie{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}

/* Enlace al Editor PRO desde el modal de edición (js/editor.js). */
.form-sub p a.ed-pro{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* ---------- Selección en la previa (sesión H1) ---------- */
/* El control del campo que corresponde al elemento seleccionado en la previa. */
.ep-campo .ep-sel{border-color:var(--navy)!important;box-shadow:0 0 0 3px var(--celeste-soft);}
/* La barra flotante pegada al elemento seleccionado, sobre el iframe: cinco
   acciones con ícono y etiqueta (los textos solo Editar). Va dentro del
   marco, que la recorta si el elemento está en el borde. */
.ep-marco{position:relative;}
.ep-barra{position:absolute;left:4px;top:4px;z-index:3;display:flex;align-items:center;gap:2px;padding:4px;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px rgba(28,43,72,.14);}
.ep-barra[hidden]{display:none;}
.ep-barra-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:7px;padding:6px 9px;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--navy);cursor:pointer;white-space:nowrap;transition:background .14s;}
.ep-barra-btn .ico{width:14px;height:14px;}
.ep-barra-btn:hover{background:var(--celeste-soft);}
.ep-barra-btn.peligro:hover{background:var(--rojo-soft);color:var(--rojo);}
.ep-barra-btn:disabled,.ep-barra-btn.off{opacity:.35;cursor:default;background:none;color:var(--navy);}
.ep-barra-btn.off.peligro:hover{background:none;color:var(--navy);}
/* Notas y líneas en textarea de un renglón (pueden llevar saltos: Shift+Enter en la previa). */
.ep-fila-linea textarea{resize:none;field-sizing:content;max-height:120px;}

/* ---------- Popover de los números (sesión I) ----------
   Cada número de la tarjeta se edita acá, con el cálculo a la vista: el
   precio con su costo por video, el sello con el precio de lista, una línea
   calculada con un campo por token. Va en coordenadas de la ventana (sirve
   para la previa y para el lápiz del panel), lleva cruz visible y NO es un
   modal: el click afuera confirma y no hay overlay. Nunca una pastilla. */
.ep-pop{position:fixed;z-index:60;width:264px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 30px rgba(28,43,72,.18);}
.ep-pop[hidden]{display:none;}
.ep-pop-cab{display:flex;align-items:center;gap:8px;padding:10px 8px 10px 14px;border-bottom:1px solid var(--line);}
.ep-pop-cab b{flex:1;min-width:0;font-size:12.5px;font-weight:800;color:var(--navy);}
.ep-pop-x{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  background:none;border:0;border-radius:7px;color:var(--gris);cursor:pointer;transition:background .14s,color .14s;}
.ep-pop-x:hover{background:#f2f5f8;color:var(--navy);}
.ep-pop-x .ico{width:14px;height:14px;}
.ep-pop-cuerpo{padding:12px 14px 14px;}
.ep-pop-campo + .ep-pop-campo,.ep-pop-campo + .ep-pop-dato{margin-top:10px;}
.ep-pop-campo label{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);margin-bottom:5px;}
.ep-pop-caja{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:9px;
  background:#fff;padding:0 10px;transition:border-color .14s,box-shadow .14s;}
.ep-pop-caja:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--celeste-soft);}
.ep-pop-un{flex:none;font-size:11.5px;font-weight:700;color:var(--gris);}
.ep-pop-un.der{margin-left:auto;}
.ep-pop-caja input{flex:1;min-width:0;border:0;background:none;padding:9px 0;font-family:inherit;
  font-size:15px;font-weight:700;color:var(--navy);outline:none;}
.ep-pop-caja input:disabled{color:var(--gris);}
.ep-pop-campo.off .ep-pop-caja{background:#f7f9fb;}
.ep-pop-ayuda{font-size:11.5px;font-weight:600;color:var(--gris);margin-top:5px;line-height:1.4;}
.ep-pop-dato{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 0;}
.ep-pop-dato span{font-size:11.5px;font-weight:600;color:var(--gris);}
.ep-pop-dato b{font-size:13px;font-weight:800;color:var(--navy);}
.ep-pop-cuenta{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--gris);line-height:1.45;}
.ep-pop-cuenta b{font-weight:800;color:var(--navy);}
.ep-pop-nota{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--gris);line-height:1.45;}
.ep-pop-asi{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.ep-pop-asi span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);margin-bottom:4px;}
.ep-pop-asi p{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.45;white-space:pre-line;}
.ep-pop-asi p b{font-weight:800;}
.ep-pop-avz{margin-top:10px;}
.ep-pop-avz label{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);margin-bottom:5px;}
.ep-pop-avz textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;
  font-family:inherit;font-size:13px;color:var(--txt);resize:none;field-sizing:content;max-height:120px;outline:none;}
.ep-pop-avz textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--celeste-soft);}
.ep-pop-link{display:inline-block;margin-top:10px;background:none;border:0;padding:0;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.ep-pop-quitar{display:block;width:100%;margin-top:12px;background:none;border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--rojo);cursor:pointer;
  transition:background .14s;}
.ep-pop-quitar:hover{background:var(--rojo-soft);}

/* ---------- El panel sin fórmulas (sesión I) ----------
   Los campos derivados (costo por video, descuento) se ven como cualquier
   otro; las líneas y las notas calculadas se muestran resueltas, con la
   etiqueta "Calculada" y un lápiz que abre el popover. Los textos con
   tokens quedan en un acordeón Avanzado, cerrado. */
.ep-campo.off input{background:#f7f9fb;color:var(--gris);}
.ep-precio-pie{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px;}
.ep-precio-pie .campo-ayuda{color:var(--gris);text-align:right;}

.ep-calc{flex:1;min-width:0;display:flex;align-items:flex-start;gap:8px;padding:9px 11px;
  border:1.5px solid var(--line);border-radius:9px;background:#fafbfd;}
.ep-calc p{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--txt);line-height:1.4;white-space:pre-line;}
.ep-calc p b{font-weight:800;color:var(--navy);}
.ep-calc-tag{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);padding-top:2px;}
.ep-campo .ep-calc.ep-sel,.ep-calc.ep-sel{border-color:var(--navy);box-shadow:0 0 0 3px var(--celeste-soft);}

.ep-avz-grupo{border-bottom:0;}
.ep-avz-cab{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;background:none;
  border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:13px;font-weight:800;
  color:var(--txt);text-align:left;cursor:pointer;transition:background .14s;}
.ep-avz-cab:hover{background:#fafbfd;}
.ep-avz-cab span{flex:1;min-width:0;}
.ep-avz-cab .ico{width:15px;height:15px;flex:none;color:var(--gris);transition:transform .16s;}
.ep-avz-cab[aria-expanded="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--celeste);}
.ep-avz-cab[aria-expanded="true"] .ico{transform:rotate(180deg);color:var(--navy);}
.ep-avz-cuerpo{padding:14px 12px 16px;border:1.5px solid var(--celeste);border-top:0;
  border-radius:0 0 12px 12px;}
.ep-avz-cuerpo > .ep-campo{margin-bottom:12px;}