/* ═══════════════════════════════════════════════════════════════════
 * Editor del wizard — vive dentro de #sec-editor del dashboard.
 * ═══════════════════════════════════════════════════════════════════ */

#sec-editor .editor-topbar {
    background: linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
    border:1px solid #d8dfe8; border-radius:12px;
    padding: 12px 16px; margin-bottom:14px;
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    box-shadow: 0 2px 8px rgba(15,40,60,.04);
}
#sec-editor .editor-topbar .status-pill {
    font-size:11px; padding:3px 10px; border-radius:12px;
    background:#ecfdf5; color:#065f46; font-weight:600;
}
#sec-editor .editor-topbar .status-pill.dirty { background:#fffbeb; color:#92400e; }
#sec-editor .editor-topbar .spacer { flex:1; }
#sec-editor .editor-topbar .lbl { font-size:12px; color:#5e768d; font-weight:500; }

/* ─── Tarjeta "Tarifa en edición" ──────────────────── */
#sec-editor .cfg-card {
    position: relative;
    /* z-index alto en el cfg-card para que su dropdown hijo se pinte
       encima del sidebar lateral (que está en z-index:100). Sin esto,
       el transform del :hover crea stacking context y el dropdown
       queda atrapado debajo del sidebar. */
    z-index: 200;
    display:flex; align-items:center; gap:14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0faf6 100%);
    border: 2px solid #15986c;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    min-width: 280px;
    transition: all .15s;
    user-select: none;
}
#sec-editor .cfg-card:hover {
    box-shadow: 0 4px 14px rgba(21,152,108,.18);
    transform: translateY(-1px);
}
/* Cuando el dropdown está abierto subimos aún más, por si hay otros
   elementos topbar con transforms que podrían escalar. */
#sec-editor .cfg-card.open { z-index: 300; }
#sec-editor .cfg-card .cfg-card-content { flex:1; min-width:0; }
#sec-editor .cfg-card .cfg-card-label {
    font-size: 10.5px; color:#15986c; font-weight:700;
    text-transform:uppercase; letter-spacing:.6px; margin-bottom:2px;
}
#sec-editor .cfg-card .cfg-card-name {
    font-size: 15px; font-weight:700; color:#17334c;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#sec-editor .cfg-card .cfg-card-badges { margin-top:3px; display:flex; gap:5px; flex-wrap:wrap; }
#sec-editor .cfg-card .cfg-card-badges .badge {
    font-size:10px; font-weight:600; padding:1px 7px; border-radius:8px;
}
#sec-editor .cfg-card .cfg-card-badges .badge.active-b { background:#15986c; color:#fff; }
#sec-editor .cfg-card .cfg-card-badges .badge.seed-b { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
#sec-editor .cfg-card .cfg-card-arrow {
    color:#15986c; font-size:18px; line-height:1; transition: transform .15s;
}
#sec-editor .cfg-card.open .cfg-card-arrow { transform: rotate(180deg); }

/* Dropdown panel debajo de la tarjeta */
/* Dropdown como portal al document.body (lo añade editor.js con
   position:fixed y coordenadas calculadas). Mantenemos el selector sin
   el prefijo #sec-editor porque el elemento vive fuera de #sec-editor. */
.cfg-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid #d8dfe8;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15,40,60,.16);
    /* Sidebar lateral está en z-index:100. Como ahora vivimos en el body
       (no dentro del editor con stacking context atrapado), un z-index
       generoso basta. */
    z-index: 1000;
    max-height: 380px; overflow-y: auto;
    padding: 6px;
}
/* Re-aplicamos los estilos internos sin el ancestro #sec-editor porque
   el dropdown ya no vive dentro. */
.cfg-dropdown .cfg-dropdown-section {
    font-size: 10.5px; color:#5e768d; text-transform:uppercase; letter-spacing:.5px;
    padding: 8px 10px 4px;
}
.cfg-dropdown .cfg-dropdown-item {
    display:flex; align-items:center; gap:10px;
    padding: 8px 10px; cursor: pointer; border-radius: 6px;
    font-size: 13.5px; color:#17334c;
}
.cfg-dropdown .cfg-dropdown-item:hover { background:#f4faf7; }
.cfg-dropdown .cfg-dropdown-item.current { background:#ecfdf5; font-weight:600; }
.cfg-dropdown .cfg-dropdown-item .name-block { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cfg-dropdown .cfg-dropdown-item .badge {
    font-size:10px; font-weight:600; padding:1px 7px; border-radius:8px;
}
.cfg-dropdown .cfg-dropdown-item .badge.active-b { background:#15986c; color:#fff; }
.cfg-dropdown .cfg-dropdown-item .badge.seed-b { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
html[data-theme="dark"] .cfg-dropdown {
    background: var(--card); border-color: var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
html[data-theme="dark"] .cfg-dropdown .cfg-dropdown-item { color: var(--text); }
html[data-theme="dark"] .cfg-dropdown .cfg-dropdown-item:hover { background: var(--surface-2); }
html[data-theme="dark"] .cfg-dropdown .cfg-dropdown-item.current { background: rgba(22,199,132,.14); }
#sec-editor .cfg-dropdown .cfg-dropdown-section {
    font-size: 10.5px; color:#5e768d; text-transform:uppercase; letter-spacing:.5px;
    padding: 8px 10px 4px;
}
#sec-editor .cfg-dropdown .cfg-dropdown-item {
    display:flex; align-items:center; gap:10px;
    padding: 8px 10px; cursor: pointer; border-radius: 6px;
    font-size: 13.5px; color:#17334c;
}
#sec-editor .cfg-dropdown .cfg-dropdown-item:hover { background:#f4faf7; }
#sec-editor .cfg-dropdown .cfg-dropdown-item.current { background:#eaf3ee; font-weight:600; }
#sec-editor .cfg-dropdown .cfg-dropdown-item .name-block { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sec-editor .cfg-dropdown .cfg-dropdown-item .badge { font-size:10px; padding:1px 6px; border-radius:8px; flex-shrink:0; }
#sec-editor .cfg-dropdown .cfg-dropdown-item .badge.active-b { background:#15986c; color:#fff; }
#sec-editor .cfg-dropdown .cfg-dropdown-item .badge.seed-b { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* ─── Breadcrumb "Editando: X" en cada pestaña ─────── */
#sec-editor .tab-breadcrumb {
    background:#f4faf7;
    border-left: 3px solid #15986c;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #15986c;
    border-radius: 0 6px 6px 0;
    margin: 0 0 18px;
    display: inline-block;
}
#sec-editor .tab-breadcrumb strong { color:#0f6d4d; }

/* ─── Tabs horizontales ───────────────────────────────── */
#sec-editor .editor-tabs {
    display:flex; gap:0; overflow-x:auto; margin-bottom:14px;
    border-bottom:1px solid #d8dfe8; background:#fff;
    border-radius:10px 10px 0 0; padding: 0 8px;
}
#sec-editor .editor-tabs::-webkit-scrollbar { height:0; }
#sec-editor .editor-tabs .tab-btn {
    border:none; background:transparent; cursor:pointer;
    padding: 11px 16px; font-size:13.5px; color:#3a5c78;
    border-bottom:3px solid transparent; white-space:nowrap;
    border-radius: 8px 8px 0 0;
    display:flex; align-items:center; gap:8px;
    transition: color .18s ease, border-color .18s ease, background .18s ease, font-weight .18s ease;
}
#sec-editor .editor-tabs .tab-btn:hover {
    color:#15986c;
    background: rgba(21, 152, 108, 0.05);
}
#sec-editor .editor-tabs .tab-btn.active {
    color:#15986c;
    border-bottom-color:#15986c;
    font-weight:700;
    background: rgba(21, 152, 108, 0.10);
    box-shadow: inset 0 -1px 0 rgba(21, 152, 108, 0.18);
}
#sec-editor .editor-tabs .tab-btn .ic { font-size:14px; opacity:.8; transition: opacity .18s ease; }
#sec-editor .editor-tabs .tab-btn.active .ic { opacity:1; }
#sec-editor .editor-tabs .tab-sep {
    width:1px; background:#e3e9f1; margin: 8px 4px;
}

/* ─── Main panel ─────────────────────────────────────── */
#sec-editor .editor-main { padding: 0 4px 80px; overflow-x: auto; }
#sec-editor .editor-main h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color:#17334c; }
#sec-editor .editor-main .sub { color:#5e768d; font-size:13.5px; margin: 0 0 18px; }
#sec-editor .editor-card {
    background:#fff; border-radius:12px;
    box-shadow:0 4px 16px rgba(15,40,60,.05);
    padding:18px 20px; margin-bottom:14px;
}
#sec-editor .editor-card h3 { margin:0 0 14px; font-size:14px; font-weight:700; }

/* ─── Tabla de precios ───────────────────────────────── */
#sec-editor .price-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
#sec-editor .price-toolbar select, #sec-editor .price-toolbar input {
    padding:8px 10px; border:1px solid #cfd8e3; border-radius:7px; font-size:13px;
}
#sec-editor table.price-grid { width:100%; border-collapse:collapse; font-size:13.5px; }
#sec-editor table.price-grid th {
    background:#f4f8fd; text-align:left; padding:10px 12px; font-weight:600;
    border-bottom:2px solid #15986c; color:#3a5c78; font-size:12px;
    text-transform:uppercase; letter-spacing:.4px;
}
#sec-editor table.price-grid th.num { text-align:right; }
#sec-editor table.price-grid td { padding:8px 12px; border-bottom:1px solid #eef2f7; vertical-align: middle; }
#sec-editor table.price-grid td.action-name { color:#17334c; font-weight:500; }
#sec-editor table.price-grid input.price-cell {
    width:100%; max-width: 110px; padding:6px 8px; text-align:right;
    border:1px solid #d8dfe8; border-radius:6px; font-size:13.5px; font-variant-numeric: tabular-nums;
    background:#fff; color:#17334c; transition: all .15s;
}
#sec-editor table.price-grid input.price-cell:focus { outline:none; border-color:#15986c; box-shadow: 0 0 0 3px rgba(21,152,108,.12); }
#sec-editor table.price-grid input.price-cell.changed { background:#fffbeb; border-color:#f59e0b; }
#sec-editor table.price-grid tr.empty-row td { color:#8499af; font-style:italic; padding:14px 12px; }

/* ─── Modificadores y form básico ─────────────────── */
#sec-editor .field-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#sec-editor .field { display:flex; flex-direction:column; gap:4px; }
#sec-editor .field label { font-size:12px; color:#5e768d; font-weight:600; }
#sec-editor .field .hint { font-size:11.5px; color:#8499af; margin-top:2px; }
#sec-editor .field input {
    padding: 10px 12px; font-size: 14px; border:1px solid #cfd8e3; border-radius:8px;
    background:#fff; color:#17334c; font-variant-numeric: tabular-nums;
}
#sec-editor .field input:focus { outline:none; border-color:#15986c; box-shadow:0 0 0 3px rgba(21,152,108,.15); }

/* ─── Banners ─────────────────────────────────────── */
#sec-editor .info-banner {
    background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; padding:10px 14px;
    border-radius:8px; font-size:13px; margin-bottom:18px;
}
#sec-editor .info-banner.warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }

/* ─── Toggle switch ───────────────────────────────── */
#sec-editor .switch { position:relative; display:inline-block; width:38px; height:20px; }
#sec-editor .switch input { opacity:0; width:0; height:0; }
#sec-editor .switch .slider {
    position:absolute; cursor:pointer; inset:0;
    background:#cfd8e3; border-radius:20px; transition:.18s;
}
#sec-editor .switch .slider:before {
    content:""; position:absolute; height:14px; width:14px; left:3px; top:3px;
    background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.15);
}
#sec-editor .switch input:checked + .slider { background:#15986c; }
#sec-editor .switch input:checked + .slider:before { transform: translateX(18px); }

/* ─── Estructura: tabla compacta ─────────────────── */
#sec-editor .struct-row td input[type="text"], #sec-editor .struct-row td input[type="number"] {
    width:100%; padding:6px 8px; border:1px solid #d8dfe8; border-radius:6px; font-size:13px;
    background:#fff; color:#17334c;
}
#sec-editor .struct-row td input.changed { background:#fffbeb; border-color:#f59e0b; }
#sec-editor .struct-row td.muted { color:#8499af; font-family: ui-monospace, Menlo, monospace; font-size:11.5px; }
#sec-editor .struct-row td.tags { font-size:11.5px; color:#3a5c78; }
#sec-editor .struct-row td.tags .tag { display:inline-block; padding:1px 6px; background:#eef2f7; border-radius:8px; margin:1px 2px; }

/* ─── Tabla overrides por tipo ───────────────────── */
#sec-editor .ov-block { background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(15,40,60,.05); padding:18px 20px; margin-bottom:14px; }
#sec-editor .ov-block h3 { margin:0 0 12px; font-size:14px; font-weight:700; color:#15986c; }
#sec-editor .ov-row { display:grid; grid-template-columns: 220px 1fr; gap:10px; padding:6px 0; border-bottom:1px solid #f1f4f9; align-items:center; }
#sec-editor .ov-row:last-child { border-bottom:none; }
#sec-editor .ov-row label { font-size:12.5px; color:#3a5c78; }
#sec-editor .ov-row input { padding:7px 10px; border:1px solid #d8dfe8; border-radius:6px; font-size:13px; background:#fff; }
#sec-editor .ov-row input:focus { outline:none; border-color:#15986c; box-shadow:0 0 0 2px rgba(21,152,108,.15); }
#sec-editor .ov-row input.changed { background:#fffbeb; border-color:#f59e0b; }

/* ═══════════════════════════════════════════════════════════════════
 * H3: tarjetas WYSIWYG para Tipos / Zonas / Trabajos
 * ═══════════════════════════════════════════════════════════════════ */
#sec-editor .wy-grid {
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
#sec-editor .wy-card {
    position:relative; background:#fff; border:2px solid #e3e9f1;
    border-radius:14px; padding:18px 16px;
    cursor:pointer; transition: all .18s;
    text-align:center; min-height: 130px;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
}
#sec-editor .wy-card:hover { border-color:#15986c; transform: translateY(-2px); box-shadow:0 6px 20px rgba(21,152,108,.12); }
#sec-editor .wy-card.hidden-state { opacity: .42; background:#f5f7fb; border-style: dashed; }
#sec-editor .wy-card .wy-icon { font-size: 28px; opacity: .8; }
#sec-editor .wy-card .wy-label { font-weight:700; color:#17334c; font-size:14.5px; line-height:1.25; }
#sec-editor .wy-card .wy-desc { font-size:11.5px; color:#5e768d; line-height:1.35; }
#sec-editor .wy-card .wy-badge {
    position:absolute; top:8px; right:8px;
    font-size:10px; padding:2px 7px; border-radius:8px;
    background:#fef2f2; color:#991b1b; font-weight:600;
}
#sec-editor .wy-card .wy-edit-pen {
    position:absolute; top:8px; left:8px;
    font-size:12px; color:#8499af; opacity: 0; transition: opacity .15s;
}
#sec-editor .wy-card:hover .wy-edit-pen { opacity:1; }

/* ─── Drag-reorder ─────────────────────────────────── */
#sec-editor .wy-card[draggable="true"] { cursor: grab; }
#sec-editor .wy-card[draggable="true"]:active { cursor: grabbing; }
#sec-editor .wy-card.dragging {
    opacity: .55;
    transform: scale(.97);
    border-color: #15986c !important;
    box-shadow: 0 0 0 3px rgba(21,152,108,.35), 0 6px 18px rgba(21,152,108,.18);
    background: #f4faf7;
}
#sec-editor .wy-card.drop-target {
    box-shadow: 0 0 0 3px #15986c, 0 8px 22px rgba(21,152,108,.28);
    border-color: #15986c;
    transform: translateY(-2px);
    background: #f4faf7;
}
#sec-editor .wy-card .wy-drag-handle {
    position:absolute; bottom:6px; right:8px;
    font-size:14px; color:#cfd8e3; pointer-events:none;
    transition: color .15s;
}
#sec-editor .wy-card:hover .wy-drag-handle { color:#8499af; }
#sec-editor .wy-grid-hint {
    font-size:12px; color:#5e768d; margin: -8px 0 12px;
    display:flex; align-items:center; gap:6px;
}
#sec-editor .wy-grid-hint::before { content:"⇕"; font-size:14px; color:#8499af; }

/* ─── Popover lateral de edición de tarjeta ───────── *
 * Estos selectores NO están scopados a #sec-editor porque el overlay
 * se inserta en document.body (para que cubra toda la pantalla).
 */
.wy-popover-overlay {
    position:fixed; inset:0; background:rgba(15,40,60,.4);
    z-index:9999; display:flex; justify-content:flex-end;
}
.wy-popover-overlay .wy-popover {
    background:#fff; width: 380px; max-width:95vw; height:100vh;
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
    display:flex; flex-direction:column;
    animation: wy-slide-in .22s ease-out;
    overflow:hidden;
}
@keyframes wy-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.wy-popover-overlay .wy-popover-head {
    padding: 16px 20px; border-bottom:1px solid #e3e9f1;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
.wy-popover-overlay .wy-popover-head h3 { margin:0; font-size:14px; font-weight:700; color:#17334c; font-family:system-ui,sans-serif; }
.wy-popover-overlay .wy-popover-head .close-x {
    background:transparent; border:none; font-size:22px; cursor:pointer; color:#5e768d;
    padding:4px 10px; border-radius:6px; line-height:1;
}
.wy-popover-overlay .wy-popover-head .close-x:hover { background:#f4f8fd; color:#17334c; }
.wy-popover-overlay .wy-popover-body { padding: 18px 20px; overflow-y:auto; flex:1; font-family:system-ui,sans-serif; }
.wy-popover-overlay .wy-popover-body .field { margin-bottom: 14px; display:flex; flex-direction:column; }
.wy-popover-overlay .wy-popover-body .field label { display:block; margin-bottom:5px; font-size:12px; color:#5e768d; font-weight:600; }
.wy-popover-overlay .wy-popover-body input[type="text"],
.wy-popover-overlay .wy-popover-body input[type="number"],
.wy-popover-overlay .wy-popover-body textarea {
    width:100%; padding: 10px 12px; font-size:14px;
    border:1px solid #cfd8e3; border-radius:8px; background:#fff;
    color:#17334c; box-sizing:border-box; font-family:inherit;
}
.wy-popover-overlay .wy-popover-body textarea { min-height: 60px; resize:vertical; }
.wy-popover-overlay .wy-popover-body input:focus,
.wy-popover-overlay .wy-popover-body textarea:focus {
    outline:none; border-color:#15986c; box-shadow:0 0 0 3px rgba(21,152,108,.15);
}
.wy-popover-overlay .wy-popover-body .field-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding: 10px 0; border-top:1px solid #f1f4f9;
}
.wy-popover-overlay .wy-popover-body .field-row .lbl-block { flex:1; }
.wy-popover-overlay .wy-popover-body .field-row .lbl-block strong { display:block; font-size:13.5px; color:#17334c; }
.wy-popover-overlay .wy-popover-body .field-row .lbl-block small { font-size:11.5px; color:#5e768d; }
.wy-popover-overlay .wy-popover-body .switch { position:relative; display:inline-block; width:38px; height:20px; flex-shrink:0; }
.wy-popover-overlay .wy-popover-body .switch input { opacity:0; width:0; height:0; }
.wy-popover-overlay .wy-popover-body .switch .slider {
    position:absolute; cursor:pointer; inset:0;
    background:#cfd8e3; border-radius:20px; transition:.18s;
}
.wy-popover-overlay .wy-popover-body .switch .slider:before {
    content:""; position:absolute; height:14px; width:14px; left:3px; top:3px;
    background:#fff; border-radius:50%; transition:.18s;
}
.wy-popover-overlay .wy-popover-body .switch input:checked + .slider { background:#15986c; }
.wy-popover-overlay .wy-popover-body .switch input:checked + .slider:before { transform: translateX(18px); }
.wy-popover-overlay .wy-popover-foot {
    padding: 14px 20px; border-top:1px solid #e3e9f1;
    display:flex; justify-content:flex-end; gap:8px; flex-shrink:0;
    font-family:system-ui,sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
 * H2: tarjetas de tarifas (lista de configuraciones)
 * ═══════════════════════════════════════════════════════════════════ */
#sec-editor .tariff-grid {
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-bottom: 24px;
}
#sec-editor .tariff-card {
    background:#fff; border:1px solid #e3e9f1; border-radius:12px;
    padding:16px; transition: all .2s cubic-bezier(.22,.9,.32,1); position:relative;
    cursor:pointer;
}
#sec-editor .tariff-card:hover { border-color:#15986c; box-shadow:0 4px 16px rgba(21,152,108,.08); transform: translateY(-1px); }
#sec-editor .tariff-card:active,
#sec-editor .tariff-card.is-pressed {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(21, 152, 108, 0.10);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1),
                box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}

/* Activa: mismo gradient que el botón ★ Activar (btn-primary): azul-verdoso → verde */
#sec-editor .tariff-card.active {
    background: linear-gradient(140deg, #14678b 0%, #19a677 100%);
    border-color: rgba(11, 69, 100, 0.42); border-width: 1px;
    color: #fff;
}
#sec-editor .tariff-card.active:hover {
    background: linear-gradient(140deg, #0f5777 0%, #14956a 100%);
    box-shadow: 0 8px 18px rgba(12, 81, 97, 0.22);
}
#sec-editor .tariff-card.active h4 { color:#fff; }
#sec-editor .tariff-card.active .meta { color: rgba(255,255,255,.82); }
#sec-editor .tariff-card.active .badge.active-b { background:#fff; color:#14678b; }
#sec-editor .tariff-card.active .badge.seed-b { background:rgba(255,255,255,.92); color:#92400e; border-color: transparent; }
/* Badge "Seleccionada" (lápiz) sobre fondo gradient: contraste blanco */
#sec-editor .tariff-card.active .badge[style*="0f6d4d"] {
    background:#fff !important; color:#14678b !important;
}
#sec-editor .tariff-card.active .actions .btn { font-size:12px; }
#sec-editor .tariff-card.active .actions .btn-ghost { background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.3); }
#sec-editor .tariff-card.active .actions .btn-ghost:hover { background:rgba(255,255,255,.28); }

/* Sistema (seed): borde discontinuo, fondo claro */
#sec-editor .tariff-card.seed-tariff { border-style:dashed; background:#fffdf7; }

/* Seleccionada: borde verde grueso + halo (es la tarifa que el usuario está editando) */
#sec-editor .tariff-card.selected {
    border-color: #15986c;
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(21,152,108,.18), 0 6px 22px rgba(21,152,108,.16);
    transform: translateY(-2px);
}
#sec-editor .tariff-card.selected.active {
    box-shadow: 0 0 0 3px rgba(21,152,108,.35), 0 6px 22px rgba(21,152,108,.28);
}

/* ─── Animación de "emparejamiento" entre tarjeta clickada y tarjeta-en-edición ───
 * Ambas tarjetas hacen el mismo pulso al unísono cuando se selecciona una para editar.
 * Comunica subliminalmente que están conectadas (la de arriba refleja la de abajo).
 */
@keyframes cfg-pair-pulse {
    0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(21,152,108,0); }
    25%  { transform: scale(1.028); box-shadow: 0 0 0 8px rgba(21,152,108,.30), 0 6px 20px rgba(21,152,108,.22); }
    60%  { transform: scale(1.012); box-shadow: 0 0 0 4px rgba(21,152,108,.16); }
    100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(21,152,108,0); }
}
#sec-editor .cfg-pair-pulse {
    animation: cfg-pair-pulse .72s cubic-bezier(.22,.9,.32,1) both;
    will-change: transform, box-shadow;
}

#sec-editor .tariff-card h4 { margin:0 0 4px; font-size:15px; font-weight:700; color:#17334c; }
#sec-editor .tariff-card .meta { font-size:11.5px; color:#5e768d; margin-bottom:12px; }
#sec-editor .tariff-card .badges { margin-bottom:10px; }
#sec-editor .tariff-card .badge {
    display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600;
    margin-right: 4px;
}
#sec-editor .tariff-card .badge.active-b { background:#15986c; color:#fff; }
#sec-editor .tariff-card .badge.seed-b   { background:#fffbeb; color:#92400e; }
#sec-editor .tariff-card .actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
#sec-editor .tariff-card .actions .btn { font-size:12px; padding:5px 10px; }

#sec-editor .tariff-section-title {
    font-size:11px; color:#5e768d; text-transform:uppercase; letter-spacing:.6px;
    margin: 16px 0 10px; padding-bottom:6px; border-bottom:1px solid #e3e9f1;
}

/* ─── Animación al cambiar de pestaña del editor ──────────────
   Cuando se cambia de "Mis tarifas" a "Editor visual", "Precios" o
   "Configuración avanzada", el contenido de la nueva pestaña entra
   con un fade-in + slide-up suave (mismo patrón que el .wy-step-enter
   del editor visual). El highlight de la pestaña activa se anima
   aparte vía FLIP en showTab(). */
@keyframes ed-tab-enter-anim {
  0%   { opacity: 0; transform: translateY(8px) scale(0.992); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#sec-editor .editor-main > section[data-tab-content].ed-tab-enter {
  animation: ed-tab-enter-anim 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #sec-editor .editor-main > section[data-tab-content].ed-tab-enter {
    animation: none;
  }
}

/* ─── Condiciones e IVA — lista de tarjetas de tipos ──────────────── */
.ed-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ed-vat-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ed-vat-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 110px auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  transition: border-color .2s, box-shadow .2s;
}
.ed-vat-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(11,49,77,.06); }
.ed-vat-card.ed-vat-inactive { opacity: .55; }
.ed-vat-card label { font-size: 11px; color: #6b7280; font-weight: 500; display: block; margin-bottom: 3px; }
.ed-vat-card input[type="text"], .ed-vat-card input[type="number"] {
  width: 100%; padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13.5px;
  background: #fff; color: #111827;
}
.ed-vat-card input:focus { outline: 2px solid #10b981; outline-offset: -1px; border-color: #10b981; }
.ed-vat-percent-wrap, .ed-cond-mult-wrap { position: relative; }
.ed-vat-percent-wrap::after { content: '%'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 12.5px; pointer-events: none; }
.ed-cond-mult-wrap::after  { content: '×'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 13px; pointer-events: none; }
.ed-vat-percent-wrap input, .ed-cond-mult-wrap input { padding-right: 22px !important; }
.ed-vat-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #f3f4f6; color: #6b7280;
  font-size: 11.5px; font-weight: 600; user-select: none;
  transition: all .2s;
}
.ed-vat-toggle.is-on { background: #d1fae5; border-color: #6ee7b7; color: #047857; }
.ed-vat-del-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid #fecaca;
  background: #fef2f2; color: #b91c1c; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.ed-vat-del-btn:hover { background: #fee2e2; }
.ed-vat-empty { font-size: 12.5px; color: #6b7280; padding: 18px; text-align: center; border: 1px dashed #e5e7eb; border-radius: 12px; }
.ed-cond-info { font-size: 11px; color: #6b7280; font-style: italic; padding: 7px 0; }

/* ─── Catálogos: tipos / zonas / trabajos / capítulos ─────────── */
.ed-cat-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ed-cat-search {
  flex: 1; min-width: 220px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb; border-radius: 10px;
  font-size: 13.5px; background: #fff; color: #111827;
}
.ed-cat-search:focus { outline: 2px solid #10b981; outline-offset: -1px; border-color: #10b981; }
.ed-cat-stats { font-size: 12px; color: #6b7280; }
.ed-cat-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.ed-cat-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: #6b7280;
  cursor: pointer; transition: color .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.ed-cat-tab:hover { color: #111827; }
.ed-cat-tab.active { color: #15986c; border-bottom-color: #15986c; }
.ed-cat-count {
  font-size: 11px; font-weight: 700; color: #6b7280;
  background: #f3f4f6; padding: 1px 8px; border-radius: 999px;
}
.ed-cat-tab.active .ed-cat-count { background: #d1fae5; color: #047857; }
.ed-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ed-cat-grid[hidden] { display: none; }
.ed-cat-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 32px 18px;
  color: #6b7280; font-size: 13px;
  background: #f8fafc; border: 1px dashed #e5e7eb; border-radius: 12px;
}
/* Cards del Catálogo — look "tipo wizard": icono Material Symbols a la
   izquierda en círculo coloreado, label tipográfico, chips/meta debajo,
   lápiz ✎ flotante a la derecha. Importamos las fuentes ya cargadas por
   el editor (editor-wysiwyg.css importa Material Symbols Rounded). */
.ed-cat-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ed-cat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.ed-cat-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 10px rgba(11,49,77,.06); transform: translateY(-1px); }
.ed-cat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-cat-card-label { font-size: 13.5px; font-weight: 600; color: #111827; line-height: 1.25; }
.ed-cat-card-key { font-size: 10.5px; color: #9ca3af; font-family: 'Courier New', monospace; }
.ed-cat-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* Variante "tile" — la usada en el render de items del catálogo, con
   icono grande a la izquierda en círculo coloreado, similar a las
   option-card del wizard. */
.ed-cat-card-tile {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 44px 14px 72px; /* deja sitio al icono (izq) y al lápiz (der) */
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ed-cat-card-tile::before {
  content: attr(data-icon);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: "Material Symbols Rounded", sans-serif;
  font-size: 22px;
  color: #2f5d84;
  background-color: #e5f0fb;
  border: 1px solid rgba(124, 161, 188, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: background-color .25s ease, color .25s ease;
}
.ed-cat-card-tile:hover::before {
  background-color: #d6e8f7;
}
.ed-cat-tile-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ed-cat-tile-label {
  font-family: 'League Spartan', 'Montserrat', system-ui, sans-serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.3px;
  color: #17334c;
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-cat-tile-meta {
  font-size: 11.5px;
  color: #6b7280;
}
.ed-cat-tile-edit {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  color: #2f5d84;
  background: rgba(20, 103, 139, 0.06);
  border: 1px solid rgba(20, 103, 139, 0.18);
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.ed-cat-card-tile:hover .ed-cat-tile-edit,
.ed-cat-card-tile:focus-visible .ed-cat-tile-edit {
  opacity: 1;
}

/* Dark mode tweaks */
html[data-theme="dark"] .ed-cat-card { background: var(--card); }
html[data-theme="dark"] .ed-cat-tile-label { color: #e2e6f0; }
html[data-theme="dark"] .ed-cat-card-tile::before {
  background-color: rgba(63, 124, 168, 0.22);
  color: #b5d6ef;
  border-color: rgba(124, 161, 188, 0.22);
}
html[data-theme="dark"] .ed-cat-card-tile:hover::before {
  background-color: rgba(63, 124, 168, 0.32);
}
html[data-theme="dark"] .ed-cat-tile-edit {
  background: rgba(124, 161, 188, 0.16);
  color: #b5d6ef;
  border-color: rgba(124, 161, 188, 0.32);
}
.ed-cat-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.ed-cat-tag-system { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.ed-cat-tag-custom { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
/* Chips de zonas donde se aplica un trabajo — azul JUMA brand, suaves. */
.ed-cat-tag-zone { background: rgba(20, 103, 139, 0.10); color: #0f4d6b; border: 1px solid rgba(20, 103, 139, 0.22); }
.ed-cat-tag-zone-more { background: rgba(20, 103, 139, 0.18); color: #0f4d6b; border: 1px solid rgba(20, 103, 139, 0.32); cursor: help; }
.ed-cat-tag-zone-empty { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-style: italic; }
.ed-cat-tag-zone-all { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

/* Tarjeta "+ Crear" al final de cada grid del catálogo —
   verde PRESULINK semi-transparente con borde dashed, look call-to-action. */
.ed-cat-card-create {
  display: flex !important;
  flex-direction: column !important;
  align-items: center; justify-content: center;
  gap: 6px;
  border: 2px dashed rgba(22, 199, 132, 0.45) !important;
  background: rgba(22, 199, 132, 0.07) !important;
  box-shadow: none !important;
  cursor: pointer; text-align: center;
  padding: 18px 12px !important;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ed-cat-card-create:hover {
  background: rgba(22, 199, 132, 0.14) !important;
  border-color: rgba(22, 199, 132, 0.85) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 199, 132, 0.14);
}
.ed-cat-card-create:focus-visible {
  outline: none;
  border-color: #16C784 !important;
  box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.25);
}
.ed-cat-card-create .ed-cat-create-plus {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 300; line-height: 1;
  color: #0E8F68;
  border: 1.5px dashed rgba(22, 199, 132, 0.6);
  background: rgba(255, 255, 255, 0.55);
}
.ed-cat-card-create:hover .ed-cat-create-plus {
  border-color: #16C784;
  color: #0a6f51;
  background: rgba(255, 255, 255, 0.85);
}
.ed-cat-card-create .ed-cat-create-body { display: flex; flex-direction: column; gap: 2px; }
.ed-cat-card-create .ed-cat-create-body strong {
  color: #0E8F68; font-weight: 700; font-size: 13.5px; letter-spacing: -0.2px;
}
.ed-cat-card-create .ed-cat-create-body small {
  color: #4a7361; font-size: 11.5px; opacity: 0.95;
}

/* Modo oscuro */
html[data-theme="dark"] .ed-cat-card-create {
  background: rgba(22, 199, 132, 0.08) !important;
  border-color: rgba(22, 199, 132, 0.50) !important;
}
html[data-theme="dark"] .ed-cat-card-create:hover {
  background: rgba(22, 199, 132, 0.18) !important;
}
html[data-theme="dark"] .ed-cat-card-create .ed-cat-create-plus {
  background: rgba(255, 255, 255, 0.05);
  color: #6ee7b7;
}
html[data-theme="dark"] .ed-cat-card-create .ed-cat-create-body strong { color: #6ee7b7; }
html[data-theme="dark"] .ed-cat-card-create .ed-cat-create-body small { color: #a7c9bb; }

/* ─── Modal de edición rápida desde el Catálogo ─── */
.modal-card.cat-edit-modal {
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}
.cat-edit-modal .cem-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-soft, #e5e7eb);
}
.cat-edit-modal .cem-title {
  flex: 1; font-size: 15px; font-weight: 700; color: var(--text);
  line-height: 1.3;
}
.cat-edit-modal .cem-close {
  background: none; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 20px; color: var(--muted); line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.cat-edit-modal .cem-close:hover { background: var(--surface-2); color: var(--text); }
.cat-edit-modal .cem-form {
  padding: 14px 18px 4px;
  display: flex; flex-direction: column; gap: 12px;
}
.cat-edit-modal .cem-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text); }
.cat-edit-modal .cem-field > span { font-weight: 600; }
.cat-edit-modal .cem-field > span small { color: var(--muted); font-weight: 400; font-size: 11px; }
.cat-edit-modal .cem-field input[type="text"],
.cat-edit-modal .cem-field input[type="number"],
.cat-edit-modal .cem-field textarea,
.cat-edit-modal .cem-field select {
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 13px; font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cat-edit-modal .cem-field input:focus,
.cat-edit-modal .cem-field textarea:focus,
.cat-edit-modal .cem-field select:focus {
  outline: none;
  border-color: var(--primary, #14678b);
  box-shadow: 0 0 0 3px rgba(20, 103, 139, 0.14);
}
.cat-edit-modal .cem-field select:disabled { opacity: 0.6; cursor: not-allowed; }
.cat-edit-modal .cem-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text);
  cursor: pointer; padding: 2px 0;
}
.cat-edit-modal .cem-toggle input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary, #14678b);
}
.cat-edit-modal .cem-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border-soft, #e5e7eb);
  margin-top: 8px;
}
/* Fieldsets para agrupar campos del modal (Identidad / Precio /
   Comportamiento) — separación visual sutil, legend como mini-título. */
.cat-edit-modal .cem-fieldset {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border-soft, #e5e7eb);
}
.cat-edit-modal .cem-fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; }
.cat-edit-modal .cem-fieldset > legend {
  padding: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* 2 columnas dentro del modal (unidad + precio base) */
.cat-edit-modal .cem-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
/* Grid de checkboxes (tipos de reforma / trabajos que activan) */
.cat-edit-modal .cem-checkgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-2, #f7fafc);
  max-height: 140px; overflow-y: auto;
}
.cat-edit-modal .cem-checkgrid-tall { max-height: 200px; }
.cat-edit-modal .cem-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text); cursor: pointer;
  padding: 2px 0;
}
.cat-edit-modal .cem-check input[type="checkbox"] {
  width: 14px; height: 14px; flex-shrink: 0;
  cursor: pointer; accent-color: var(--primary, #14678b);
}
.cat-edit-modal .cem-empty {
  font-size: 11.5px; color: var(--muted); margin: 0;
  padding: 6px 0;
}
/* Bloque "Tiene cantidad (×)" del modal de Zona — borde + fields ocultos */
.cat-edit-modal .cem-mult-block {
  border: 1px solid var(--border); border-radius: 7px;
  padding: 10px 12px; background: var(--surface-2, #f7fafc);
  display: flex; flex-direction: column; gap: 10px;
}
.cat-edit-modal .cem-mult-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

/* Bloque "Precios por estancia" del modal de Trabajos modo ZONE_ACTION:
   filas estancia + input con sufijo €, contenedor con scroll si crece. */
.cat-edit-modal .cem-zone-prices {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2, #f7fafc);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 240px; overflow-y: auto;
}
.cat-edit-modal .cem-zone-prices-title {
  font-size: 12px; font-weight: 700; color: var(--text);
  letter-spacing: -0.005em;
}
.cat-edit-modal .cem-zone-price-row {
  display: grid; grid-template-columns: 1fr 140px; gap: 10px;
  align-items: center;
}
.cat-edit-modal .cem-zone-price-lbl {
  font-size: 12.5px; color: var(--text);
}
.cat-edit-modal .cem-zone-price-input {
  position: relative; display: block;
}
.cat-edit-modal .cem-zone-price-input input {
  width: 100%; padding: 6px 24px 6px 10px;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  font-size: 13px; font-family: inherit;
}
.cat-edit-modal .cem-zone-price-input input:focus {
  outline: none; border-color: var(--primary, #14678b);
  box-shadow: 0 0 0 3px rgba(20, 103, 139, 0.14);
}
.cat-edit-modal .cem-zone-price-suffix {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--muted); pointer-events: none;
}
/* Badge "Sistema"/"Personalizado" cuando comparte fila con chips de zonas —
   más pequeño y con opacidad para no robar protagonismo a las zonas. */
.ed-cat-tag-origin { opacity: 0.7; font-size: 9.5px; padding: 1px 6px; margin-left: auto; }
.ed-cat-card-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ed-cat-card-usage { font-size: 11px; color: #6b7280; }
.ed-cat-card-usage strong { color: #111827; font-weight: 600; }

/* ─── Logística y escombros (pestaña Reglas) ─────────── */
.ed-logistics-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ed-logistics-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text); }
.ed-logistics-field > span { font-weight: 600; line-height: 1.3; }
.ed-logistics-field > span small { color: var(--muted); font-weight: 400; font-size: 11px; display: block; margin-top: 1px; }
.ed-logistics-input { position: relative; display: block; }
.ed-logistics-input input {
  width: 100%; padding: 8px 56px 8px 10px;
  border-radius: 7px; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  font-size: 13px; font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ed-logistics-input input:focus {
  outline: none;
  border-color: var(--primary, #14678b);
  box-shadow: 0 0 0 3px rgba(20, 103, 139, 0.14);
}
.ed-logistics-input .ed-logistics-suffix {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--muted); pointer-events: none;
}
.ed-logistics-advanced { margin-top: 16px; border-top: 1px solid var(--border-soft, #e5e7eb); padding-top: 12px; }
.ed-logistics-advanced summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text);
  padding: 4px 0; user-select: none;
}
.ed-logistics-advanced summary:hover { color: var(--primary, #14678b); }
.ed-logistics-advanced[open] summary { margin-bottom: 8px; }

/* ─── Skip "Condiciones e IVA" ──────────────────────── */
.ed-skip-card { background: linear-gradient(180deg, #fffbeb 0%, #fff7e6 100%); border-color: #fde68a; }
.ed-skip-row { display: flex; flex-direction: column; gap: 4px; }
.ed-skip-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #92400e; user-select: none; }
.ed-skip-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #d97706; }
.ed-skip-help { margin: 0; color: #92400e; font-size: 12px; }
.ed-skip-section { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #fde68a; }
.ed-skip-section h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #78350f; text-transform: uppercase; letter-spacing: .04em; }
.ed-skip-vat-select { padding: 7px 10px; border: 1px solid #fde68a; border-radius: 8px; font-size: 13.5px; background: #fff; min-width: 240px; }
.ed-skip-pre-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ed-skip-pre-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #78350f; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid #fde68a; cursor: pointer; }
.ed-skip-pre-list label:hover { background: #fffbeb; }
.ed-skip-pre-list input[type="checkbox"] { width: 14px; height: 14px; accent-color: #d97706; cursor: pointer; }
@media (max-width: 720px) { .ed-skip-pre-list { grid-template-columns: 1fr 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   MODO OSCURO — overrides del editor (Reglas + Catálogos)
   ═══════════════════════════════════════════════════════════════ */

/* Tarjetas IVA y Condiciones */
html[data-theme="dark"] .ed-vat-card {
  background: #232638;
  border-color: var(--border, #2c3044);
}
html[data-theme="dark"] .ed-vat-card:hover { border-color: #3a4060; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .ed-vat-card label { color: #8892a8; }
html[data-theme="dark"] .ed-vat-card input[type="text"],
html[data-theme="dark"] .ed-vat-card input[type="number"] {
  background: #1c1f2d;
  border-color: var(--border, #2c3044);
  color: #e2e6f0;
}
html[data-theme="dark"] .ed-vat-percent-wrap::after,
html[data-theme="dark"] .ed-cond-mult-wrap::after { color: #8892a8; }
html[data-theme="dark"] .ed-vat-toggle {
  background: #1a1d2a; border-color: var(--border, #2c3044); color: #8892a8;
}
html[data-theme="dark"] .ed-vat-toggle.is-on { background: #0d2218; border-color: #1a4535; color: #6ee7b7; }
html[data-theme="dark"] .ed-vat-del-btn { background: #2a1010; border-color: #5a1f1f; color: #fca5a5; }
html[data-theme="dark"] .ed-vat-del-btn:hover { background: #3a1414; }
html[data-theme="dark"] .ed-vat-empty {
  background: #1a1d2a; color: #8892a8; border-color: #2c3044;
}
html[data-theme="dark"] .ed-cond-info { color: #8892a8; }

/* Card amarilla de "Saltar este paso" — oscurecida pero conservando ámbar */
html[data-theme="dark"] .ed-skip-card {
  background: linear-gradient(180deg, #2a1d0a 0%, #221a08 100%);
  border-color: #5a3f12;
}
html[data-theme="dark"] .ed-skip-toggle { color: #fbbf24; }
html[data-theme="dark"] .ed-skip-help { color: #fcd34d; }
html[data-theme="dark"] .ed-skip-section { border-top-color: #5a3f12; }
html[data-theme="dark"] .ed-skip-section h4 { color: #fcd34d; }
html[data-theme="dark"] .ed-skip-vat-select {
  background: #1c1f2d; border-color: #5a3f12; color: #e2e6f0;
}
html[data-theme="dark"] .ed-skip-pre-list label {
  background: #1c1f2d; border-color: #5a3f12; color: #fcd34d;
}
html[data-theme="dark"] .ed-skip-pre-list label:hover { background: #232638; }

/* Catálogos */
html[data-theme="dark"] .ed-cat-search {
  background: #232638; border-color: var(--border, #2c3044); color: #e2e6f0;
}
html[data-theme="dark"] .ed-cat-stats { color: #8892a8; }
html[data-theme="dark"] .ed-cat-tabs { border-bottom-color: var(--border, #2c3044); }
html[data-theme="dark"] .ed-cat-tab { color: #8892a8; }
html[data-theme="dark"] .ed-cat-tab:hover { color: #e2e6f0; }
html[data-theme="dark"] .ed-cat-tab.active { color: #34d399; border-bottom-color: #34d399; }
html[data-theme="dark"] .ed-cat-count { background: #232638; color: #8892a8; }
html[data-theme="dark"] .ed-cat-tab.active .ed-cat-count { background: #0d2218; color: #6ee7b7; }
html[data-theme="dark"] .ed-cat-empty {
  background: #1a1d2a; color: #8892a8; border-color: var(--border, #2c3044);
}
html[data-theme="dark"] .ed-cat-card {
  background: #1c1f2d; border-color: var(--border, #2c3044);
}
html[data-theme="dark"] .ed-cat-card:hover { border-color: #3a4060; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .ed-cat-card-label { color: #e2e6f0; }
html[data-theme="dark"] .ed-cat-card-key { color: #6a7388; }
html[data-theme="dark"] .ed-cat-tag-system { background: #2a1d0a; color: #fcd34d; border-color: #5a3f12; }
html[data-theme="dark"] .ed-cat-tag-custom { background: #0d2218; color: #6ee7b7; border-color: #1a4535; }
html[data-theme="dark"] .ed-cat-card-usage { color: #8892a8; }
html[data-theme="dark"] .ed-cat-card-usage strong { color: #e2e6f0; }

/* ─── Topbar y selector de tarifa en edición ─── */
html[data-theme="dark"] #sec-editor .editor-topbar {
  background: linear-gradient(180deg, #1c1f2d 0%, #232638 100%);
  border-color: #2c3044;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
html[data-theme="dark"] #sec-editor .editor-topbar .lbl { color: #8892a8; }
html[data-theme="dark"] #sec-editor .editor-topbar .status-pill { background: #0d2218; color: #6ee7b7; }
html[data-theme="dark"] #sec-editor .editor-topbar .status-pill.dirty { background: #2a1d0a; color: #fcd34d; }

/* Card "Tarifa estándar (mi tarifa)" — verde oscuro coherente */
html[data-theme="dark"] #sec-editor .cfg-card {
  background: linear-gradient(135deg, #0d2218 0%, #11302a 100%);
  border-color: #15986c;
}
html[data-theme="dark"] #sec-editor .cfg-card:hover { box-shadow: 0 4px 14px rgba(21,152,108,.35); }
html[data-theme="dark"] #sec-editor .cfg-card .cfg-card-name { color: #e2e6f0; }
html[data-theme="dark"] #sec-editor .cfg-card .cfg-card-label { color: #6ee7b7; }
html[data-theme="dark"] #sec-editor .cfg-card .cfg-card-arrow { color: #6ee7b7; }
html[data-theme="dark"] #sec-editor .cfg-card .cfg-card-badges .badge.seed-b { background: #2a1d0a; color: #fcd34d; border-color: #5a3f12; }

/* Dropdown lista de tarifas */
html[data-theme="dark"] #sec-editor .cfg-dropdown {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
html[data-theme="dark"] #sec-editor .cfg-dropdown .cfg-dropdown-section { color: #8892a8; }
html[data-theme="dark"] #sec-editor .cfg-dropdown .cfg-dropdown-item { color: #e2e6f0; }
html[data-theme="dark"] #sec-editor .cfg-dropdown .cfg-dropdown-item:hover { background: #232638; }
html[data-theme="dark"] #sec-editor .cfg-dropdown .cfg-dropdown-item.current { background: #0d2218; }
html[data-theme="dark"] #sec-editor .cfg-dropdown .cfg-dropdown-item .badge.seed-b { background: #2a1d0a; color: #fcd34d; border-color: #5a3f12; }

/* Breadcrumb "Editando: X" */
html[data-theme="dark"] #sec-editor .tab-breadcrumb {
  background: #0d2218;
  color: #6ee7b7;
  border-left-color: #15986c;
}
html[data-theme="dark"] #sec-editor .tab-breadcrumb strong { color: #34d399; }

/* Tabs horizontales del editor */
html[data-theme="dark"] #sec-editor .editor-tabs {
  background: #1c1f2d;
  border-bottom-color: var(--border);
}
html[data-theme="dark"] #sec-editor .editor-tabs .tab-btn { color: #8892a8; }
html[data-theme="dark"] #sec-editor .editor-tabs .tab-btn:hover { color: #e2e6f0; }
html[data-theme="dark"] #sec-editor .editor-tabs .tab-btn.active { color: #34d399; border-bottom-color: #34d399; }

/* Tablas de precios y otras grids del editor */
html[data-theme="dark"] #sec-editor table.price-grid {
  background: var(--card);
  color: var(--text);
}
html[data-theme="dark"] #sec-editor table.price-grid thead th {
  background: #232638;
  color: #c8d4e0;
  border-bottom-color: var(--border);
}
html[data-theme="dark"] #sec-editor table.price-grid tbody td {
  border-bottom-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] #sec-editor table.price-grid tbody tr:hover { background: #232638; }
html[data-theme="dark"] #sec-editor table.price-grid input.price-cell {
  background: #232638; color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] #sec-editor table.price-grid input.price-cell.changed {
  background: #2a1d0a; border-color: #f59e0b; color: #fcd34d;
}

/* Editor-card (cards genéricas dentro de las sub-tabs de Reglas) */
html[data-theme="dark"] #sec-editor .editor-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] #sec-editor .editor-card h3 { color: var(--text); }

/* Info banner amarillo */
html[data-theme="dark"] #sec-editor .info-banner {
  background: #2a1d0a;
  color: #fcd34d;
  border-color: #5a3f12;
}

/* Field grid (inputs sueltos con labels arriba) */
html[data-theme="dark"] #sec-editor .field label,
html[data-theme="dark"] #sec-editor .field-grid label { color: #c8d4e0; }
html[data-theme="dark"] #sec-editor .field input,
html[data-theme="dark"] #sec-editor .field select,
html[data-theme="dark"] #sec-editor .field textarea,
html[data-theme="dark"] #sec-editor .field-grid input,
html[data-theme="dark"] #sec-editor .field-grid select,
html[data-theme="dark"] #sec-editor .field-grid textarea {
  background: #232638; border-color: var(--border); color: var(--text);
}
html[data-theme="dark"] #sec-editor .field .hint,
html[data-theme="dark"] #sec-editor .field-grid .hint { color: #8892a8; }

/* Sub-nav de "Reglas" */
/* La sub-nav usa selectores con `section[data-tab-content="advanced"]`
   que son más específicos. Replicamos esa especificidad para ganar. */
html[data-theme="dark"] #sec-editor section[data-tab-content="advanced"] .adv-subnav {
  background: #1c1f2d;
  border-color: var(--border);
}
html[data-theme="dark"] #sec-editor section[data-tab-content="advanced"] .adv-subtab {
  color: #8892a8;
  background: transparent;
}
html[data-theme="dark"] #sec-editor section[data-tab-content="advanced"] .adv-subtab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e6f0;
}
html[data-theme="dark"] #sec-editor section[data-tab-content="advanced"] .adv-subtab.active {
  background: #232638;
  color: #34d399;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ─── Stats del panel derecho de Mis tarifas (.ts-stat etc.) ─── */
/* Modo claro: colores originales que estaban hardcoded en el JS */
.ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ts-stat { background: #f4f8fd; border-radius: 8px; padding: 10px 12px; }
.ts-stat-label {
  font-size: 11px; color: #5e768d;
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.ts-stat-value { font-size: 18px; font-weight: 700; color: #17334c; }
.ts-stat-num { color: #15986c; }
.ts-stat-total { color: #8499af; font-size: 13px; }
.ts-pill-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-mod-pill { background: #eef2ff; color: #3730a3; font-size: 11px; }
.ts-tipo-pill { background: #ecfdf5; color: #0f6d4d; font-size: 11px; }
.ts-badge-seed { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.ts-badge-editing { background: #eaf3ee; color: #0f6d4d; }
.ts-empty-stats { color: #8499af; font-size: 12.5px; padding: 20px 0; text-align: center; }

/* Modo oscuro */
html[data-theme="dark"] .ts-stat { background: #232638; }
html[data-theme="dark"] .ts-stat-label { color: #8892a8; }
html[data-theme="dark"] .ts-stat-value { color: #e2e6f0; }
html[data-theme="dark"] .ts-stat-num { color: #34d399; }
html[data-theme="dark"] .ts-stat-total { color: #6a7388; }
html[data-theme="dark"] .ts-mod-pill { background: #1e1f3a; color: #c4b5fd; }
html[data-theme="dark"] .ts-tipo-pill { background: #0d2218; color: #6ee7b7; }
html[data-theme="dark"] .ts-badge-seed { background: #2a1d0a; color: #fcd34d; border-color: #5a3f12; }
html[data-theme="dark"] .ts-badge-editing { background: #0d2218; color: #6ee7b7; }
html[data-theme="dark"] .ts-empty-stats { color: #8892a8; }

/* ─── tariff-cards en "Mis tarifas" del editor (las que NO están activas) ─── */
html[data-theme="dark"] #sec-editor .tariff-card {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] #sec-editor .tariff-card:hover {
  border-color: #34d399;
  box-shadow: 0 4px 16px rgba(52,211,153,.18);
}
html[data-theme="dark"] #sec-editor .tariff-card h4 { color: var(--text); }
html[data-theme="dark"] #sec-editor .tariff-card .meta { color: #8892a8; }
html[data-theme="dark"] #sec-editor .tariff-card.seed-tariff {
  background: #1f1c12;
  border-color: #5a3f12;
}
html[data-theme="dark"] #sec-editor .tariff-card .badge.active-b { background: #15986c; color: #fff; }
html[data-theme="dark"] #sec-editor .tariff-card .badge.seed-b { background: #2a1d0a; color: #fcd34d; }
html[data-theme="dark"] #sec-editor .tariff-section-title {
  color: #8892a8;
  border-bottom-color: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   TAB "REGLAS" (modifiers) — vista WYSIWYG que replica el paso 5
   del wizard (cs-section, cs-vat-grid, cs-cond-grid, cs-info-grid).
   Reusa las clases del wizard de presupuesto.css y añade:
   - ed-reglas-card: tarjeta editable con botón ⚙ y estado "inactivo"
   - ed-reglas-pill: píldora editable (info extra)
   - ed-reglas-add-btn: botón "+ Añadir" al lado del título de sección
   - ed-reglas-advanced: acordeón con la config técnica
═══════════════════════════════════════════════════════════════════ */
/* ── Clases del wizard reutilizadas en /app#editor (presupuesto.css no
   se carga en app.html). Scope: tab modifiers + sus descendientes. ─ */
section[data-tab-content="modifiers"] {
  --cs-green: #15986c; --cs-green-soft: #ecfdf5; --cs-border: #e5e7eb;
  --cs-text: #111827; --cs-muted: #6b7280;
}
section[data-tab-content="modifiers"] .cs-section { margin-bottom: 24px; }
section[data-tab-content="modifiers"] .cs-section-title { font-size: 14px; font-weight: 700; color: var(--cs-text); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
section[data-tab-content="modifiers"] .cs-section-tag { font-size: 10.5px; font-weight: 600; color: var(--cs-muted); background: #f1f5f9; padding: 2px 8px; border-radius: 999px; text-transform: lowercase; }
section[data-tab-content="modifiers"] .cs-section-help { font-size: 12.5px; color: var(--cs-muted); margin: 0 0 12px; }
section[data-tab-content="modifiers"] .cs-vat-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
section[data-tab-content="modifiers"] .cs-cond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
section[data-tab-content="modifiers"] .cs-info-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
section[data-tab-content="modifiers"] .cs-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fff;
  border: 1.5px solid var(--cs-border); border-radius: 14px;
  cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .25s;
}
section[data-tab-content="modifiers"] .cs-card-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--cs-border); background: #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
  flex-shrink: 0; transition: all .2s;
}
section[data-tab-content="modifiers"] .cs-card-check svg { opacity: 0; transition: opacity .15s; }
section[data-tab-content="modifiers"] .cs-card-vat { padding: 16px 18px; }
section[data-tab-content="modifiers"] .cs-vat-label { font-size: 14.5px; font-weight: 600; color: var(--cs-text); flex: 1; }
section[data-tab-content="modifiers"] .cs-card-cond .cs-card-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f6; color: var(--cs-muted); flex-shrink: 0;
}
section[data-tab-content="modifiers"] .cs-card-cond .cond-label { font-size: 13.5px; font-weight: 500; color: var(--cs-text); line-height: 1.3; flex: 1; }
section[data-tab-content="modifiers"] .cs-section-info { padding: 14px 16px; background: #f8fafc; border-radius: 14px; border: 1px dashed #e5e7eb; }
section[data-tab-content="modifiers"] .cs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: #fff;
  border: 1.5px solid var(--cs-border); border-radius: 999px;
  font-size: 13px; color: var(--cs-text); cursor: pointer; user-select: none;
}
section[data-tab-content="modifiers"] .cs-pill-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--cs-border); background: #fff; flex-shrink: 0;
}
/* En el editor las tarjetas NO tienen radio/check real (son click→modal),
   así que pintamos el check verde "siempre" cuando la tarjeta está activa. */
section[data-tab-content="modifiers"] .ed-reglas-card .cs-card-check {
  background: var(--cs-green); border-color: var(--cs-green);
}
section[data-tab-content="modifiers"] .ed-reglas-card .cs-card-check svg { opacity: 1; }
section[data-tab-content="modifiers"] .ed-reglas-card.ed-reglas-inactive .cs-card-check {
  background: #fff; border-color: var(--cs-border);
}
section[data-tab-content="modifiers"] .ed-reglas-card.ed-reglas-inactive .cs-card-check svg { opacity: 0; }
section[data-tab-content="modifiers"] .ed-reglas-pill .cs-pill-dot {
  background: var(--cs-green); border-color: var(--cs-green); box-shadow: inset 0 0 0 3px #fff;
}
section[data-tab-content="modifiers"] .ed-reglas-pill.ed-reglas-inactive .cs-pill-dot {
  background: #fff; box-shadow: none;
}
section[data-tab-content="modifiers"] .ed-reglas-card.cs-card-cond .cs-card-icon {
  background: var(--cs-green); color: #fff;
}
section[data-tab-content="modifiers"] .ed-reglas-card.cs-card-cond.ed-reglas-inactive .cs-card-icon {
  background: #f3f4f6; color: var(--cs-muted);
}

.ed-reglas-head { margin-bottom: 8px; }
.ed-reglas-section { margin-bottom: 22px; }
.ed-reglas-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.ed-reglas-add-btn {
  padding: 6px 12px; border: 1px dashed var(--border, #cbd5e1);
  background: transparent; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--muted, #6b7280); font-weight: 600;
  transition: all .15s;
}
.ed-reglas-add-btn:hover {
  border-color: #14678b; color: #14678b; background: #f0f7fb;
}

/* ── R7: panel de Pasos del wizard (pasos como datos) ──
   Prefijo #sec-editor + 2 clases para ganar a `#sec-editor .wy-card`
   (que es vertical) y pintar cada paso como una FILA. */
#sec-editor .ed-steps-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
#sec-editor .ed-steps-list .ed-step-card {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; text-align: left; min-height: 0; padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  background: var(--card, #fff); cursor: grab; transition: border-color .15s, box-shadow .15s;
}
#sec-editor .ed-steps-list .ed-step-card:hover { border-color: #14678b; transform: none; box-shadow: none; }
#sec-editor .ed-steps-list .ed-step-card.dragging { opacity: .5; }
#sec-editor .ed-steps-list .ed-step-card.drop-target { border-color: #14678b; box-shadow: 0 0 0 2px rgba(20,103,139,.25); }
#sec-editor .ed-steps-list .ed-step-card.ed-step-hidden { opacity: .55; }
#sec-editor .ed-step-grip { flex: none; color: var(--muted, #94a3b8); font-size: 15px; cursor: grab; user-select: none; }
#sec-editor .ed-step-num {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #14678b; color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
#sec-editor .ed-step-label {
  flex: 1 1 auto; min-width: 80px; padding: 6px 9px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 7px;
  font-size: 13.5px; font-weight: 600; background: var(--bg, #fff); color: inherit; text-align: left;
}
#sec-editor .ed-step-kind {
  flex: none; font-size: 11px; font-weight: 600; color: var(--muted, #6b7280);
  background: var(--bg-soft, #f1f5f9); padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
#sec-editor .ed-step-vis { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #6b7280); cursor: pointer; user-select: none; white-space: nowrap; }
#sec-editor .ed-step-vis input { width: 15px; height: 15px; accent-color: #14678b; cursor: pointer; margin: 0; }
#sec-editor .ed-step-del { flex: none; border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: .6; padding: 2px 4px; }
#sec-editor .ed-step-del:hover { opacity: 1; }
#sec-editor .ed-step-custom-card { border-color: #14678b; border-style: dashed; }
#sec-editor .ed-step-custom-body { margin: -2px 0 2px 32px; }
#sec-editor .ed-step-body {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  font: inherit; font-size: 12.5px; resize: vertical; background: var(--bg, #fff); color: inherit;
}
html[data-theme="dark"] #sec-editor .ed-step-body { background: #141826; border-color: #2c3142; }
/* R8 — editor de opciones de un paso CUSTOM */
#sec-editor .ed-step-ftrow { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
#sec-editor .ed-step-ftlabel { font-size: 12px; color: var(--muted, #6b7280); font-weight: 600; }
#sec-editor .ed-step-ft { padding: 5px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 7px; font: inherit; font-size: 12.5px; background: var(--bg, #fff); color: inherit; }
#sec-editor .ed-step-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
#sec-editor .ed-step-opt { display: flex; align-items: center; gap: 8px; }
#sec-editor .ed-opt-label { flex: 1 1 auto; padding: 6px 9px; border: 1px solid var(--border, #e2e8f0); border-radius: 7px; font: inherit; font-size: 12.5px; background: var(--bg, #fff); color: inherit; }
#sec-editor .ed-opt-price { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted, #6b7280); }
#sec-editor .ed-opt-price-in { width: 84px; padding: 6px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 7px; font: inherit; font-size: 12.5px; text-align: right; background: var(--bg, #fff); color: inherit; }
#sec-editor .ed-opt-del { border: none; background: transparent; cursor: pointer; font-size: 13px; opacity: .6; }
#sec-editor .ed-opt-del:hover { opacity: 1; }
html[data-theme="dark"] #sec-editor .ed-step-ft,
html[data-theme="dark"] #sec-editor .ed-opt-label,
html[data-theme="dark"] #sec-editor .ed-opt-price-in { background: #141826; border-color: #2c3142; }

/* M5 — recargos custom editables en Reglas */
#sec-editor .ed-surch-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#sec-editor .ed-surch-row { display: flex; align-items: center; gap: 8px; }
#sec-editor .ed-surch-row.ed-surch-off { opacity: .55; }
#sec-editor .ed-surch-label { flex: 1 1 auto; min-width: 120px; padding: 6px 9px; border: 1px solid var(--border, #e2e8f0); border-radius: 7px; font: inherit; font-size: 12.5px; background: var(--bg, #fff); color: inherit; }
#sec-editor .ed-surch-pct { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted, #6b7280); }
#sec-editor .ed-surch-pctin { width: 64px; padding: 6px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 7px; font: inherit; font-size: 12.5px; text-align: right; background: var(--bg, #fff); color: inherit; }
#sec-editor .ed-surch-active { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted, #6b7280); white-space: nowrap; cursor: pointer; }
#sec-editor .ed-surch-del { border: none; background: transparent; cursor: pointer; font-size: 13px; opacity: .6; padding: 2px 4px; }
#sec-editor .ed-surch-del:hover { opacity: 1; }
html[data-theme="dark"] #sec-editor .ed-surch-label,
html[data-theme="dark"] #sec-editor .ed-surch-pctin { background: #141826; border-color: #2c3142; }
#sec-editor .ed-steps-note { font-size: 12px; color: var(--muted, #6b7280); background: #f0f7fb; border: 1px dashed #bcdcec; border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
html[data-theme="dark"] #sec-editor .ed-steps-list .ed-step-card { background: #1c1f2d; border-color: #2c3142; }
html[data-theme="dark"] #sec-editor .ed-step-label { background: #141826; border-color: #2c3142; }
html[data-theme="dark"] #sec-editor .ed-step-kind { background: #141826; }
html[data-theme="dark"] #sec-editor .ed-steps-note { background: #14283a; border-color: #2b4a63; color: #9db8cc; }

.ed-reglas-grid { /* hereda de cs-vat-grid / cs-cond-grid / cs-info-grid */ }

/* Tarjeta editable: hereda cs-card pero añade indicador hover (no es radio) */
.ed-reglas-card {
  cursor: pointer !important;
  position: relative;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.ed-reglas-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,49,77,.10); border-color: #14678b; }
.ed-reglas-card:focus-visible { outline: 2px solid #14678b; outline-offset: 2px; }

/* Estado inactivo (campo activo=false en cfg): tarjeta tachada y opaca. */
.ed-reglas-card.ed-reglas-inactive,
.ed-reglas-pill.ed-reglas-inactive {
  opacity: .42;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(150,150,150,.05) 8px 16px);
}
.ed-reglas-card.ed-reglas-inactive::after,
.ed-reglas-pill.ed-reglas-inactive::after {
  content: 'OCULTA'; position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 700; color: #c00;
  background: rgba(255,255,255,.85); padding: 1px 5px; border-radius: 3px;
  letter-spacing: 0.5px;
}

/* Botón ⚙ esquina superior derecha */
.ed-reglas-edit-btn {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border: 1px solid transparent;
  background: rgba(255,255,255,.85); color: #6b7280;
  border-radius: 50%; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; padding: 0;
}
.ed-reglas-card:hover .ed-reglas-edit-btn,
.ed-reglas-pill:hover .ed-reglas-edit-btn {
  background: #14678b; color: #fff; border-color: #14678b;
}

.ed-reglas-warn-dot {
  position: absolute; top: 6px; right: 38px;
  background: #fff3cd; color: #7a5b00; padding: 1px 6px;
  border-radius: 10px; font-size: 11px; border: 1px solid #ffe08a;
}

.ed-reglas-pill {
  cursor: pointer !important; position: relative;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.ed-reglas-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(11,49,77,.08); border-color: #14678b; }
.ed-reglas-pill .ed-reglas-edit-btn {
  position: static; margin-left: 4px; width: 22px; height: 22px; font-size: 11px;
}

.ed-reglas-empty {
  padding: 24px; text-align: center; color: var(--muted);
  background: #f8fafc; border: 1px dashed var(--border); border-radius: 8px;
  font-size: 13px;
}

.ed-reglas-skip-link {
  background: none; border: 0; color: #14678b; cursor: pointer;
  padding: 0; font: inherit; text-decoration: underline; margin-left: 6px;
}
.ed-reglas-skip-link:hover { color: #0d4a6b; }

/* Acordeón de configuración avanzada (cosas técnicas, no salen al cliente). */
.ed-reglas-advanced {
  margin-top: 24px; border: 1px solid var(--border); border-radius: 8px;
  background: #fafbfc;
}
.ed-reglas-advanced > summary {
  padding: 12px 16px; cursor: pointer; font-weight: 600; color: var(--muted);
  font-size: 13px; list-style: none;
}
.ed-reglas-advanced > summary::-webkit-details-marker { display: none; }
.ed-reglas-advanced > summary::before {
  content: '▸ '; transition: transform .15s; display: inline-block;
}
.ed-reglas-advanced[open] > summary::before { transform: rotate(90deg); }
.ed-reglas-advanced-body { padding: 8px 16px 16px; }

html[data-theme="dark"] .ed-reglas-edit-btn { background: rgba(40,40,50,.85); color: #cbd5e1; }
html[data-theme="dark"] .ed-reglas-empty { background: #1a1f2e; }
html[data-theme="dark"] .ed-reglas-advanced { background: #1a1f2e; }
html[data-theme="dark"] .ed-reglas-card.ed-reglas-inactive::after,
html[data-theme="dark"] .ed-reglas-pill.ed-reglas-inactive::after {
  background: rgba(20,20,30,.85);
}

/* Botón "Volver" del editor: oculto en escritorio (el menú lateral navega). */
#sec-editor .ed-mobile-back { display: none; }

/* ─── Editor en MÓVIL: barra superior y pestañas que no se apretujen ─── */
@media (max-width: 820px) {
  /* "Volver" visible solo en móvil; y ocultamos el cuadradito flotante del
     menú de escritorio (sidebar-reveal-btn) que asomaba en el editor. */
  /* Botón "Volver" ANCHO que PERSIGUE al hacer scroll. position:sticky (no fixed:
     un ancestro con transform rompía el fixed y se iba con el scroll). */
  #sec-editor .ed-mobile-back {
    position: sticky; top: 8px; align-self: flex-start; z-index: 90;
    display: inline-flex; align-items: center; gap: 8px;
    width: auto; height: auto; margin: 0; padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--border, #d8dfe8); background: var(--card, #fff);
    color: var(--text, #132d46); font-weight: 700; font-size: 15px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
  #sec-editor .ed-mobile-back:active { transform: scale(.97); }
  #sec-editor .ed-mobile-back svg { width: 20px; height: 20px; flex-shrink: 0; }
  /* (sin hueco: el botón sticky va en flujo, no tapa el título). */
  body[data-section="editor"] .sidebar-reveal-btn { display: none !important; }
  /* Cabecera compacta en móvil: ocultamos la descripción (redundante: ya están
     el back ← y la tarjeta "Tarifa en edición") y achicamos el título, para
     recuperar ~100px de alto antes del lienzo de edición. */
  #sec-editor .ed-mobile-back { margin: 0 0 6px; }
  #sec-editor .page-header { margin-bottom: 10px; }
  #sec-editor .page-header p { display: none; }
  #sec-editor .page-header h1 { font-size: 20px; margin: 0; line-height: 1.15; }
  #sec-editor .editor-topbar { padding: 10px 12px; gap: 8px; }
  /* La tarifa en edición ocupa su propia fila completa. */
  #sec-editor .editor-topbar .cfg-card { flex: 1 1 100%; order: -1; }
  /* La pastilla "Activa" es redundante en móvil (la tarjeta ya muestra ★ACTIVA). */
  #sec-editor .editor-topbar .status-pill { display: none; }
  /* El "spacer" (empuja a la derecha en escritorio) no aplica en móvil. */
  #sec-editor .editor-topbar .spacer { display: none; }
  /* Los botones reparten el ancho en su(s) fila(s), táctiles. */
  #sec-editor .editor-topbar .btn-sm { flex: 1 1 auto; min-height: 40px; }
  /* Pestañas con scroll horizontal si no caben. */
  #sec-editor .editor-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  #sec-editor .editor-tabs .tab-btn { white-space: nowrap; flex: 0 0 auto; }
}