/* SIMA/BASE — Editor unificado de planes (window.sima.planmatrix, pestaña de Planes).
   Tokens --win-*, sin color hardcodeado. Reusa .sima-tbl, .sima-ct-*, .btn-confirm-success. */

#sima-panel .pe-top { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content:space-between; margin:4px 2px 12px; }
#sima-panel .pe-title { font-size:.98rem; color:var(--win-text); margin:0; display:flex; align-items:center; gap:7px; }
#sima-panel .pe-sub { font-size:.78rem; color:var(--win-muted); margin-top:3px; max-width:620px; }
#sima-panel .pe-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#sima-panel .pe-hidden-tg { font-size:.76rem; color:var(--win-muted); display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
#sima-panel .pe-status { font-size:.76rem; color:var(--win-muted); min-width:120px; }
/* Acciones del editor en la barra de título de la ventana (opuestas a los 3 botones). */
.mac-bar .mac-tools { margin-left:auto; display:flex; align-items:center; gap:8px; }
.mac-bar .pe-status { font-size:.74rem; color:var(--win-muted); white-space:nowrap; }
.mac-bar .pe-wt-btn { padding:5px 11px; font-size:.8rem; display:inline-flex; align-items:center; gap:5px; }
#sima-panel .pe-actions-fb { display:flex; align-items:center; gap:8px; justify-content:flex-end; margin:0 0 10px; flex-wrap:wrap; }

/* Responsividad por ANCHO DE LA VENTANA (data-pw del observador propio del editor): lg≥900 lado a
   lado; md(560–899) y sm(<560) la vista previa pasa ABAJO. Sin container-type (prohibido en BASE). */
.pe-cols { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:start; }
[data-pw="md"] .pe-cols, [data-pw="sm"] .pe-cols { grid-template-columns:1fr; }
#sima-panel .pe-left { min-width:0; }
#sima-panel .pe-left-tools { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
#sima-panel .pe-panel { background:var(--win-card); border:1px solid var(--win-border); border-radius:14px; padding:14px; min-width:0; }
#sima-panel .pe-h { font-size:.9rem; color:var(--win-text); margin:0 0 10px; }

/* Grilla */
#sima-panel .pe-gridwrap { border:1px solid var(--win-border); border-radius:12px;
    /* Sombra de scroll: indica que hay más planes a la derecha cuando la grilla desborda su caja. */
    background:
      linear-gradient(to right, var(--win-card) 30%, transparent) 0 0 / 24px 100% no-repeat,
      linear-gradient(to left, var(--win-card) 30%, transparent) 100% 0 / 24px 100% no-repeat,
      linear-gradient(to right, color-mix(in srgb, var(--win-accent, var(--win-text)) 30%, transparent), transparent) 0 0 / 10px 100% no-repeat,
      linear-gradient(to left, color-mix(in srgb, var(--win-accent, var(--win-text)) 30%, transparent), transparent) 100% 0 / 10px 100% no-repeat;
    background-attachment:local, local, scroll, scroll; }
/* Selección de plan (solo en ventana muy angosta: una columna de plan a la vez). */
.pe-planpick { display:none; }
[data-pw="sm"] .pe-planpick { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
#sima-panel .pe-pp-lbl { font-size:.74rem; color:var(--win-muted); }
#sima-panel .pe-pp { font:inherit; font-size:.78rem; border-radius:999px; border:1px solid var(--win-border); background:var(--win-card); color:var(--win-muted); padding:5px 11px; cursor:pointer; }
#sima-panel .pe-pp.on { color:var(--win-accent, var(--win-text)); border-color:color-mix(in srgb, var(--win-accent, var(--win-text)) 55%, transparent); background:color-mix(in srgb, var(--win-accent, var(--win-text)) 12%, transparent); font-weight:600; }
#sima-panel .pe-scrollhint { display:none; font-size:.72rem; color:var(--win-muted); margin-bottom:6px; }
#sima-panel .pe-grid { font-size:.8rem; }
#sima-panel .pe-grid th, #sima-panel .pe-grid td { padding:5px 8px; vertical-align:middle; }
#sima-panel .pe-grid th.pe-plan { text-align:center; white-space:nowrap; color:var(--win-text); }
#sima-panel .pe-grid th.pe-plan-off { color:var(--win-muted); }
#sima-panel .pe-off { font-size:.64rem; color:var(--win-muted); font-weight:600; }
#sima-panel .pe-rowlabel { text-align:left; color:var(--win-text); min-width:150px; position:sticky; left:0; background:var(--win-card); z-index:1; }
#sima-panel .pe-sec td { background:color-mix(in srgb, var(--win-accent, var(--win-text)) 8%, var(--win-card)); color:var(--win-accent, var(--win-text)); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; position:sticky; left:0; white-space:normal; }
#sima-panel .pe-rowlabel { white-space:normal; }
#sima-panel .pe-sec .pe-sec-help { text-transform:none; letter-spacing:0; font-weight:400; font-size:.7rem; color:var(--win-muted); margin-left:10px; }
/* Ventana muy angosta (una columna de plan): el label se achica para dar aire a la columna del plan. */
[data-pw="sm"] .pe-rowlabel { min-width:92px !important; }
#sima-panel .pe-ctr { text-align:center; }
#sima-panel .pe-num { width:88px; font:inherit; color:var(--win-text); background:var(--win-bg); border:1px solid var(--win-border); border-radius:7px; padding:4px 6px; }
#sima-panel .pe-in { width:100%; font:inherit; color:var(--win-text); background:var(--win-bg); border:1px solid var(--win-border); border-radius:7px; padding:4px 6px; min-width:0; }
#sima-panel .pe-sel { font:inherit; color:var(--win-text); background:var(--win-bg); border:1px solid var(--win-border); border-radius:7px; padding:4px 5px; width:100%; max-width:120px; }
/* Celda de la comparativa: select y su input (texto o matiz) APILADOS, cada uno a todo el ancho de la
   celda — nunca lado a lado ni cortados. */
#sima-panel td.pe-mcell { padding:6px 8px; vertical-align:top; }
#sima-panel td.pe-mcell .pe-sel { display:block; width:100%; max-width:none; }
#sima-panel td.pe-mcell .pe-mtxt, #sima-panel td.pe-mcell .pe-mlink { display:block; width:100%; max-width:none; margin-top:4px; }
#sima-panel .pe-feat { cursor:pointer; width:17px; height:17px; }

/* Fila de comparativa / extra: handle + label + (desc/price para extra) */
#sima-panel .pe-draglabel { display:flex; align-items:flex-start; gap:6px; }
#sima-panel .pe-handle { cursor:grab; color:var(--win-muted); display:flex; flex-direction:column; align-items:center; line-height:1; user-select:none; touch-action:none; font-size:.9rem; }
#sima-panel .pe-handle button { border:0; background:none; padding:0 2px; font-size:10px; color:var(--win-muted); cursor:pointer; }
#sima-panel .pe-mlabel { flex:1; }
#sima-panel .pe-x { border:1px solid color-mix(in srgb, var(--danger, #e5534b) 40%, transparent); background:none; color:var(--danger, #e5534b); border-radius:6px; width:22px; height:22px; cursor:pointer; flex-shrink:0; }
#sima-panel tr.pe-drop td { box-shadow:inset 0 2px 0 var(--win-accent, var(--win-text)); }
#sima-panel .pe-xmeta { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
#sima-panel .pe-xprice { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#sima-panel .pe-chk { font-size:.72rem; color:var(--win-text); display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
#sima-panel .pe-xhint { font-size:.7rem; color:var(--win-muted); font-style:italic; }

/* Vínculo fila↔feature en la comparativa */
#sima-panel .pe-mlabwrap { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
#sima-panel .pe-featlink { max-width:200px; font-size:.72rem; color:var(--win-muted); }
#sima-panel .pe-linktag { font-size:.7rem; color:var(--win-accent, var(--win-text)); }
#sima-panel td.pe-linkedcell { text-align:center; background:color-mix(in srgb, var(--win-accent, var(--win-text)) 6%, transparent); }
#sima-panel td.pe-linkedcell .pe-ok { color:var(--win-accent, var(--win-text)); font-weight:700; }
#sima-panel td.pe-linkedcell .pe-nocell { color:var(--win-muted); }

/* Panel de detalle del plan */
#sima-panel .pe-detail { margin-top:16px; }
#sima-panel .pe-det-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
#sima-panel .pe-detsel { max-width:260px; font-weight:600; }
#sima-panel .pe-det-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; align-items:start; }
#sima-panel .pe-det-col { min-width:0; }
#sima-panel .pe-det-sec { font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--win-muted); margin:14px 0 8px; border-bottom:1px solid var(--win-border); padding-bottom:4px; }
/* Detalle del plan: números/precios con ancho acorde al dato (no estirados); nombre/descr a lo ancho.
   Altura cómoda (~40px) y grilla pareja; el label nunca pisa el input. */
#sima-panel .pe-det-row { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:end; }
#sima-panel .pe-det-row .pe-dfld { width:150px; }
#sima-panel .pe-dfld { display:flex; flex-direction:column; gap:5px; font-size:.74rem; color:var(--win-muted); margin-bottom:2px; }
#sima-panel .pe-dfld > span { font-size:.74rem; line-height:1.25; }
#sima-panel .pe-dfld .pe-in, #sima-panel .pe-dfld .pe-sel { width:100%; max-width:none; padding:9px 11px; }
#sima-panel .pe-det-col > .pe-dfld { max-width:520px; }
#sima-panel .pe-dvis { flex-direction:row; align-items:center; justify-content:space-between; gap:10px; background:var(--win-bg); border:1px solid var(--win-border); border-radius:9px; padding:8px 11px; margin-top:10px; color:var(--win-text); font-weight:600; }
#sima-panel .pe-dvis input { width:18px; height:18px; cursor:pointer; }
#sima-panel .pe-bullets { margin:4px 0 0; padding-left:18px; font-size:.8rem; color:var(--win-text); display:grid; gap:4px; }
#sima-panel .pe-bullets li.pe-hint { list-style:none; margin-left:-18px; }
#sima-panel .pe-hint { font-size:.72rem; color:var(--win-muted); font-weight:400; text-transform:none; letter-spacing:0; }

/* Vista previa */
#sima-panel .pe-prev-h { font-size:.78rem; color:var(--win-muted); margin:12px 0 6px; font-weight:600; }
/* Tarjetas: auto-fit intrínseco → 1 columna en cuanto no caben 3 a ≥200px cada una. Nunca letra a letra. */
#sima-panel .pe-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; }
#sima-panel .pe-pc, #sima-panel .pe-pc * { overflow-wrap:break-word; word-break:normal; }
#sima-panel .pe-pc-sub { white-space:normal; }
#sima-panel .pe-pc { border:1px solid var(--win-border); border-radius:10px; padding:10px; min-width:0; }
#sima-panel .pe-pc b { font-size:1rem; color:var(--win-text); }
/* Selector Mensual/Anual de «Así se ve en el landing» (pastillas, colores del tema). */
#sima-panel .pe-period { display:inline-flex; gap:2px; padding:2px; margin:0 0 10px; border:1px solid var(--win-border); border-radius:999px; }
#sima-panel .pe-period button { border:0; background:transparent; color:var(--win-muted); font:inherit; font-size:.78rem; font-weight:600; padding:4px 12px; border-radius:999px; cursor:pointer; }
#sima-panel .pe-period button.on { background:rgba(var(--accent-rgb),.16); color:var(--matrix-color); }
#sima-panel .pe-pc-strike { color:var(--win-muted); font-weight:400; font-size:.85em; }
#sima-panel .pe-pc-note { color:var(--win-muted); font-size:.75rem; margin-bottom:2px; }
#sima-panel .pe-pc-price { color:var(--win-accent, var(--win-text)); font-weight:700; margin:2px 0; }
#sima-panel .pe-pc-seats { font-size:.76rem; color:var(--win-text); font-weight:600; }
#sima-panel .pe-pc-sub { display:inline-block; font-size:.68rem; font-weight:700; color:var(--win-accent, var(--win-text)); background:color-mix(in srgb, var(--win-accent, var(--win-text)) 14%, transparent); border-radius:999px; padding:3px 8px; margin:6px 0 4px; }
#sima-panel .pe-pc ul { margin:4px 0 0; padding:0; list-style:none; display:grid; gap:3px; font-size:.76rem; color:var(--win-text); }
#sima-panel .pe-pc li::before { content:"✓ "; color:var(--win-accent, var(--win-text)); font-weight:700; }
#sima-panel .pe-pc-ex { margin-top:8px; font-size:.72rem; color:var(--win-muted); }
#sima-panel .pe-ptbl { font-size:.76rem; }
#sima-panel .pe-ptbl th, #sima-panel .pe-ptbl td { padding:6px 8px; text-align:center; }
#sima-panel .pe-ptbl th:first-child, #sima-panel .pe-ptbl td:first-child { text-align:left; }
#sima-panel .pe-ptbl .pe-ok { color:var(--win-accent, var(--win-text)); font-weight:700; }
#sima-panel .pe-ptbl .pe-nocell { color:var(--win-muted); }
#sima-panel .pe-warn { color:var(--warn, #d9a406); font-size:.74rem; margin:8px 0 0; display:flex; gap:5px; align-items:center; }
#sima-panel .pe-tblwrap { border:1px solid var(--win-border); border-radius:10px; }

/* spinner guardando */
#sima-panel .pe-actions .spin { display:inline-block; animation:pe-spin 1s linear infinite; }
@keyframes pe-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #sima-panel .pe-actions .spin { animation:none; } }

/* ── Modelo «una sola fuente» (rework 2026-10-02) ── */
/* Límites: etiqueta + check «Mostrar en landing» + nombre del landing + hint del valor generado. */
#sima-panel .pe-limlab { display:flex; flex-direction:column; gap:4px; }
#sima-panel .pe-showtg { font-size:.68rem; color:var(--win-muted); display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
#sima-panel .pe-showtg input { width:14px; height:14px; cursor:pointer; }
#sima-panel .pe-landlbl { font-size:.74rem; padding:3px 6px; }
#sima-panel .pe-nolanding { font-size:.66rem; color:var(--win-muted); font-style:italic; }
#sima-panel .pe-genhint { font-size:.68rem; color:var(--win-accent, var(--win-text)); margin-top:3px; white-space:nowrap; }

/* Funciones: meta de la fila (módulo vinculado / sin módulo + mostrar + borrar). */
#sima-panel .pe-fnmeta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#sima-panel .pe-nomod { font-size:.68rem; color:var(--win-muted); border:1px dashed var(--win-border); border-radius:999px; padding:1px 8px; }

/* Celda de función: toggle del módulo + matiz / aviso de diferencia. */
#sima-panel td.pe-fncell { min-width:150px; }
#sima-panel .pe-modtg { font-size:.7rem; color:var(--win-text); display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
#sima-panel .pe-modtg input { width:15px; height:15px; cursor:pointer; }
#sima-panel td.pe-fncell .pe-nuance { display:block; width:100%; max-width:none; margin-top:4px; font-size:.72rem; }
#sima-panel .pe-fncell .pe-nocell { color:var(--win-muted); margin-left:4px; }
/* Aviso visible: el landing no coincide con el módulo. */
#sima-panel .pe-warn-cell { margin-top:5px; font-size:.68rem; line-height:1.3; color:var(--warn, #d9a406);
    background:color-mix(in srgb, var(--warn, #d9a406) 12%, transparent); border:1px solid color-mix(in srgb, var(--warn, #d9a406) 40%, transparent);
    border-radius:7px; padding:4px 6px; display:flex; flex-direction:column; gap:4px; }
#sima-panel .pe-warn-cell > i { margin-right:3px; }
#sima-panel .pe-warn-btns { display:flex; gap:5px; flex-wrap:wrap; }
#sima-panel .pe-wb { font:inherit; font-size:.66rem; border-radius:6px; border:1px solid var(--win-border); background:var(--win-bg); color:var(--win-text); padding:3px 7px; cursor:pointer; }
#sima-panel .pe-wb-mod { border-color:color-mix(in srgb, var(--win-accent, var(--win-text)) 50%, transparent); color:var(--win-accent, var(--win-text)); }
#sima-panel .pe-wb:hover { background:color-mix(in srgb, var(--win-accent, var(--win-text)) 10%, transparent); }

/* Confirmación de tech_features (modal) */
.pe-conf { font-size:.85rem; color:var(--win-text); margin-bottom:10px; }
.pe-conf-plan { border:1px solid var(--win-border); border-radius:9px; padding:8px 10px; margin-bottom:8px; }
.pe-conf-h { font-weight:700; color:var(--win-text); font-size:.82rem; margin-bottom:4px; }
.pe-conf-add { font-size:.78rem; color:var(--success, #2c9d78); display:flex; gap:6px; align-items:flex-start; padding:2px 0; }
.pe-conf-del { font-size:.78rem; color:var(--danger, #e5534b); font-weight:600; display:flex; gap:6px; align-items:flex-start; padding:2px 0; }