/*!
     * Calculadora BeCall — Stylesheet
     * @author    Alejandro Pérez Fernández <alejandroperez1924@gmail.com>
     * @copyright 2026 Alejandro Pérez Fernández — desarrollado para BeCall (A OneSource Company)
     * @license   Propietario · uso interno BeCall
     *
     * NO ELIMINAR ESTA CABECERA · Firma del desarrollador (parte del contrato con BeCall).
     */
    :root{
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#1f2937;
      --muted:#6b7280;
      --primary:#f97316;
      --primary-dark:#ea580c;
      --border:#e5e7eb;
      --ok:#059669;
      --shadow:0 10px 25px rgba(0,0,0,.08);
      --radius:16px;
      /* Tonos auxiliares para fondos secundarios y rows alternativas */
      --surface-1:#f8fafc;       /* fondos suaves (editor, group headers) */
      --surface-2:#f1f5f9;       /* segment toggles, hover */
      --surface-3:#fefce8;       /* row resaltado (qty>0) */
      --highlight:#fef3c7;       /* badge selected, tooltips */
      --input-bg:#ffffff;
    }

    /* MODO OSCURO */
    body.dark{
      --bg:#0b1220;
      --card:#111827;
      --text:#e5e7eb;
      --muted:#94a3b8;
      --border:#1f2937;
      --shadow:0 10px 25px rgba(0,0,0,.45);
      --surface-1:#0f172a;
      --surface-2:#1e293b;
      --surface-3:#1e2c1f;
      --highlight:#3a2f0a;
      --input-bg:#0f172a;
    }
    body.dark .card{
      box-shadow:0 10px 25px rgba(0,0,0,.5);
    }
    body.dark input,
    body.dark select,
    body.dark textarea{
      background:var(--input-bg);
      color:var(--text);
      border-color:var(--border);
    }
    body.dark .editor-section{ background:var(--card); }
    body.dark .editor-tarifa{ background:var(--surface-1); border-color:var(--border); }
    body.dark .editor-rl-row{ background:var(--surface-2); }
    body.dark .editor-section > h3{ background:var(--surface-2); color:var(--text); }
    body.dark .editor-section > h3:hover{ background:var(--surface-1); }
    body.dark .modality-card{ background:var(--surface-1); border-color:var(--border); }
    body.dark .modality-card .mc-comp{ color:var(--muted); border-top-color:var(--border); }
    body.dark .options-block{ background:var(--surface-1); border-color:var(--border); }
    body.dark .extras-table{ border-color:var(--border); }
    body.dark .extras-group-header{ background:var(--surface-1); color:var(--muted); border-bottom-color:var(--border); }
    body.dark .extras-group-header:hover{ background:var(--surface-2); }
    body.dark .extras-row{ border-bottom-color:var(--surface-1); }
    body.dark .extras-row.has-qty{ background:var(--surface-3); }
    body.dark .extras-row .qty-stepper{ background:var(--surface-1); border-color:var(--border); }
    body.dark .extras-row .qty-stepper button{ background:var(--surface-1); color:var(--text); }
    body.dark .extras-row .qty-stepper button:hover:not(:disabled){ background:var(--surface-2); color:var(--text); }
    body.dark .extras-row .qty-stepper .qty-value{ border-color:var(--border); }
    body.dark .extras-row .row-total{ color:var(--text); }
    body.dark .summary-panel{ background:linear-gradient(135deg,#0f172a 0%, #111827 100%); border-color:var(--border); }
    body.dark .summary-row{ border-bottom-color:var(--border); }
    body.dark .segment-toggle{ background:var(--surface-1); border-color:var(--border); }
    body.dark .segment-toggle button{ color:var(--muted); }
    body.dark .segment-toggle button.active{ background:var(--card); color:var(--text); }
    body.dark .quote-action-btn{ background:var(--card); color:var(--text); border-color:var(--border); }
    body.dark .quote-action-btn:hover{ background:var(--surface-1); }
    body.dark .quote-action-btn.danger{ background:#3f1011; color:#fca5a5; border-color:#7f1d1d; }
    body.dark .editor-search-wrap{ background:var(--card); border-bottom-color:var(--border); }
    body.dark .editor-search-wrap input{ background:var(--input-bg); border-color:var(--border); }
    body.dark .compare-table{ color:var(--text); }
    body.dark .compare-table th, body.dark .compare-table td{ border-color:var(--border); }
    body.dark .compare-table tr.best{ background:#0e2a1c; }
    body.dark .selected-badge{ background:#3a2f0a; color:#fde68a; border-color:#78532b; }
    body.dark table thead{ background:var(--surface-1); }
    /* Tintes de campaña en editor — más oscuros pero conservando tono */
    body.dark .editor-section.plenitude > h3{ background:#0e2a1c; color:#86efac; }
    body.dark .editor-section.repsol > h3{ background:#2a1605; color:#fdba74; }
    body.dark .editor-section.gana > h3{ background:#0e1d3a; color:#93c5fd; }
    body.dark .editor-section.adt > h3{ background:#0a1f33; color:#7dd3fc; }
    body.dark .editor-section.segurma > h3{ background:#2a1605; color:#fdba74; }
    body.dark .editor-section.securitas > h3{ background:#3a0a0d; color:#fca5a5; }
    body.dark .editor-section.custom > h3{ background:var(--surface-2); }

    /* Texto y elementos con color hardcodeado: normalizar contraste en dark */
    body.dark .modality-card .mc-label{ color:var(--text); }
    body.dark .modality-card .mc-price{ color:#cbd5e1; }
    body.dark .modality-card .mc-price small{ color:var(--muted); }
    body.dark .modality-card .mc-comp{ color:#cbd5e1; border-top-color:var(--border); }
    body.dark .modality-card .mc-restrict{ color:#fcd34d; }
    body.dark .modality-card.active .mc-label{ color:var(--text); }
    body.dark .summary-row{ color:var(--text); }
    body.dark .summary-row.big{ color:var(--text); }
    body.dark .summary-row.big .v{ color:#34d399; }
    body.dark .summary-panel h3{ color:var(--muted); }
    body.dark .extras-row .name{ color:var(--text); }
    body.dark .extras-row .price-info{ color:var(--muted); }
    body.dark .editor-tarifa h4{ color:var(--text); }
    body.dark .reset-btn,
    body.dark .calc-btn.ghost{ color:var(--text); border-color:var(--border); }
    body.dark .hint{ color:var(--muted); }
    body.dark h1, body.dark h2, body.dark h3:not(.editor-section > h3), body.dark h4{ color:var(--text); }

    /* Boxes de campaña en dark — fondo oscuro y texto pastel del color de campaña */
    body.dark .box{ background:#1e293b; border-color:var(--border); color:#fde68a; }
    body.dark .box.intro{
      background:linear-gradient(135deg,#1e2438 0%,#0f1530 100%);
      border-color:var(--border);
      color:var(--text);
    }
    body.dark .box.plenitude{ background:#0e2a1c; color:#86efac; border-color:#15522a; }
    body.dark .box.gana{ background:#0e1d3a; color:#93c5fd; border-color:#1e40af; }
    body.dark .box.alarmas{ background:#1e293b; color:#cbd5e1; border-color:var(--border); }
    body.dark .box.securitas{ background:#3a0a0d; color:#fca5a5; border-color:#7f1d1d; }
    body.dark .box.segurma{ background:#2a1605; color:#fdba74; border-color:#7c2d12; }
    body.dark .box.adt{ background:#0a1f33; color:#93c5fd; border-color:#003D72; }

    /* Compare table (Plenitude/Gana) — colores de cells */
    body.dark .compare-table{ background:transparent; color:var(--text); }
    body.dark .compare-table th{ background:var(--surface-1); color:var(--muted); border-color:var(--border); }
    body.dark .compare-table td{ background:transparent; color:var(--text); border-color:var(--border); }
    body.dark .compare-table tr.best{ background:#0e2a1c; }
    body.dark .compare-table tr.best td{ background:#0e2a1c; color:#86efac; }
    body.dark .compare-table tr.best td.name::after{ color:#34d399; }
    body.dark .compare-table .name{ color:var(--text); }
    body.dark .compare-empty{ background:var(--surface-1); color:var(--muted); border-color:var(--border); }

    /* Tabla genérica de notas regulatorias (sólo Energía) */
    body.dark .card > table,
    body.dark #energiaNotesPanel{
      background:transparent;
      color:var(--text);
    }
    body.dark .card > table th,
    body.dark #energiaNotesPanel th{
      background:var(--surface-1);
      color:var(--muted);
      border-color:var(--border);
    }
    body.dark .card > table td,
    body.dark #energiaNotesPanel td{
      background:transparent;
      color:var(--text);
      border-color:var(--border);
    }

    /* Editor menu (mode-btn) y editor-meta tienen tonos morados pastel hardcoded */
    body.dark .editor-meta{
      background:#1a1f3d;
      border-color:#3730a3;
      color:#c7d2fe;
    }
    body.dark .mode-btn{
      background:linear-gradient(135deg,#1a1f3d 0%,#2a1d3d 100%);
      border-color:#3730a3;
      color:#c7d2fe;
      box-shadow:0 4px 12px rgba(0,0,0,.30);
    }
    body.dark .mode-btn:hover{
      background:linear-gradient(135deg,#252a52 0%,#352450 100%);
      box-shadow:0 8px 18px rgba(0,0,0,.45);
    }
    body.dark .mode-btn.danger{
      background:linear-gradient(135deg,#3a0a0d 0%,#3a0c1f 100%);
      border-color:#7f1d1d;
      color:#fca5a5;
    }
    body.dark .mode-btn.danger:hover{
      background:linear-gradient(135deg,#4d0e13 0%,#4d1228 100%);
    }
    body.dark .mode-btn.danger .mode-text strong{ color:#fca5a5; }
    body.dark .mode-btn.danger .mode-text small{ color:#fda4af; }
    body.dark .mode-text strong{ color:#e0e7ff; }
    body.dark .mode-text small{ color:#a5b4fc; }

    /* Editor CTA en página principal — fondo morado claro hardcoded */
    body.dark .editor-cta{
      background:linear-gradient(135deg,#1a1f3d 0%,#2a1d3d 100%);
      border-color:#3730a3;
      color:#c7d2fe;
      box-shadow:0 4px 12px rgba(0,0,0,.30);
    }
    body.dark .editor-cta:hover{
      background:linear-gradient(135deg,#252a52 0%,#352450 100%);
    }
    body.dark .editor-cta-text strong{ color:#e0e7ff; }
    body.dark .editor-cta-text small{ color:#a5b4fc; }
    body.dark .editor-cta-icon{ color:#c7d2fe; }

    /* Botones generales en dark */
    body.dark .calc-btn.ghost{ background:transparent; color:var(--text); border-color:var(--border); }
    body.dark .calc-btn.ghost:hover{ background:var(--surface-2); }
    body.dark .back-btn{ background:#475569; color:#f1f5f9; }
    body.dark .back-btn:hover{ background:#334155; }

    /* Resultados (.result) — usado en monedero virtual Gana */
    body.dark .result{
      background:linear-gradient(135deg,#0f172a 0%, #111827 100%);
      border-color:var(--border);
      color:var(--text);
    }
    body.dark .result-row{ border-bottom-color:var(--border); color:var(--text); }
    body.dark .result-row strong{ color:var(--text); }
    body.dark .result-row .total{ color:#34d399; }

    /* Checkboxes de comparador — items no seleccionados */
    body.dark .checkbox-grid label{
      background:var(--surface-1);
      color:var(--text);
      border-color:var(--border);
    }
    body.dark .checkbox-grid label:has(input:checked){
      background:#0e2a1c;
      border-color:#15803d;
      color:#86efac;
    }
    body.dark .checkbox-grid label span{ color:inherit; }

    /* Editor add/remove */
    body.dark .tariff-row{ background:var(--surface-1); border-color:var(--border); }
    body.dark .new-tariff-form{ background:var(--surface-1); border-color:var(--border); }
    body.dark .editor-status.ok{ background:#0e2a1c; color:#86efac; border-color:#15522a; }
    body.dark .editor-status.err{ background:#3a0a0d; color:#fca5a5; border-color:#7f1d1d; }

    /* Modos del editor (mode-btn) */
    body.dark .mode-btn{ background:var(--surface-1); border-color:var(--border); color:var(--text); }
    body.dark .mode-btn:hover{ background:var(--surface-2); }
    body.dark .mode-btn small{ color:var(--muted); }
    body.dark .mode-btn.danger{ background:#3a0a0d; color:#fca5a5; border-color:#7f1d1d; }

    /* CTA del editor en página principal */
    body.dark .editor-cta{ background:var(--surface-1); color:var(--text); border-color:var(--border); }
    body.dark .editor-cta:hover{ background:var(--surface-2); }
    body.dark .meta-footer{ color:var(--muted); }

    /* Scrollbar del editor (sutil) */
    body.dark ::-webkit-scrollbar{ background:var(--surface-1); }
    body.dark ::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:6px; }
    body.dark ::-webkit-scrollbar-thumb:hover{ background:#475569; }

    /* Historial de cambios (tabla) */
    .history-table{
      width:100%;
      border-collapse:collapse;
      margin-top:8px;
      font-size:13.5px;
    }
    .history-table th, .history-table td{
      padding:9px 12px;
      text-align:left;
      border-bottom:1px solid var(--border);
    }
    .history-table th{
      background:var(--surface-1);
      font-size:11.5px;
      text-transform:uppercase;
      letter-spacing:.04em;
      color:var(--muted);
      font-weight:700;
    }
    .history-table td.user{
      font-weight:700;
    }
    .history-table td.user.admin{
      color:#9a3412;
    }
    .history-table td.user.mel,
    .history-table td.user.vir{
      color:#1e40af;
    }
    .history-table td.timestamp{
      color:var(--muted);
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }
    .history-table td.version{
      font-family:ui-monospace, "SF Mono", Consolas, monospace;
      color:var(--muted);
    }
    .history-table tr:hover{
      background:var(--surface-1);
    }
    body.dark .history-table tr:hover{ background:var(--surface-2); }
    .history-summary{
      background:var(--surface-1);
      border:1px solid var(--border);
      border-radius:10px;
      padding:12px 14px;
      margin-bottom:14px;
      font-size:13px;
      color:var(--muted);
    }

    /* Footer con meta + botón recargar tarifas */
    .meta-footer-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      margin-top:14px;
      flex-wrap:wrap;
    }
    .reload-btn{
      border:1px solid var(--border);
      background:var(--card);
      width:30px;
      height:30px;
      border-radius:50%;
      cursor:pointer;
      font-size:13px;
      padding:0;
      transition:transform .25s ease, background .15s ease;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height:1;
    }
    .reload-btn:hover{
      background:var(--surface-2);
      transform:rotate(120deg);
    }
    .reload-btn.spinning{
      animation:reloadSpin .9s linear infinite;
    }
    @keyframes reloadSpin{
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    body.dark .reload-btn{ background:var(--card); border-color:var(--border); }

    /* Flash rojo cuando un input se auto-corrige (valor fuera de rango / NaN) */
    .input-error-flash{
      border-color:#ef4444 !important;
      animation:errorFlash 1.3s ease-in-out;
    }
    @keyframes errorFlash{
      0%, 100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
      30%      { box-shadow:0 0 0 5px rgba(239,68,68,.30); border-color:#dc2626; }
      70%      { box-shadow:0 0 0 3px rgba(239,68,68,.15); }
    }
    body.dark .input-error-flash{
      border-color:#fca5a5 !important;
    }

    /* Botón "Instalar como app" (PWA) — visible cuando Chrome/Edge lo permiten */
    .install-pwa-wrap{
      margin:14px 0 0;
    }
    .install-pwa-btn{
      display:flex;
      align-items:center;
      gap:14px;
      width:100%;
      padding:16px 20px;
      background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);
      border:2px solid #86efac;
      border-radius:14px;
      cursor:pointer;
      transition:.18s ease;
      font-family:inherit;
      color:#14532d;
      text-align:left;
    }
    .install-pwa-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 18px rgba(34,197,94,.20);
      background:linear-gradient(135deg,#bbf7d0 0%,#86efac 100%);
    }
    .install-pwa-icon{ font-size:28px; line-height:1; }
    .install-pwa-text{ display:flex; flex-direction:column; gap:2px; }
    .install-pwa-text strong{ font-size:15px; font-weight:800; }
    .install-pwa-text small{ font-size:11.5px; color:#166534; font-weight:500; }
    body.dark .install-pwa-btn{
      background:linear-gradient(135deg,#0e2a1c 0%,#0a1f17 100%);
      border-color:#15803d;
      color:#86efac;
    }
    body.dark .install-pwa-btn:hover{ background:linear-gradient(135deg,#0a3925 0%,#0a1f17 100%); }
    body.dark .install-pwa-text small{ color:#86efac; }

    /* Footer visible (siempre presente en todas las vistas) */
    .page-footer{
      text-align:center;
      padding:24px 16px 36px;
      color:var(--muted);
      font-size:12px;
      letter-spacing:.03em;
      line-height:1.6;
    }
    .page-footer .copyright{
      font-weight:600;
    }
    .page-footer .dev-credit{
      margin-top:4px;
      opacity:.85;
    }
    .page-footer a{
      color:var(--muted);
      text-decoration:none;
      border-bottom:1px dotted var(--muted);
      transition:color .15s ease;
    }
    .page-footer a:hover{
      color:#f59e0b;
      border-bottom-color:#f59e0b;
    }

    /* Firma del autor — oculta visualmente pero presente en el DOM y para lectores de pantalla.
       Esta clase usa el patrón estándar "screen-reader only" para no afectar al diseño.
       NO ELIMINAR — forma parte de la atribución del desarrollador. */
    .bc-credit{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip:rect(0 0 0 0) !important;
      white-space:nowrap !important;
      border:0 !important;
    }

    /* =================================================
       Quick actions en groupView (Mis cotizaciones / Mi actividad)
       ================================================= */
    .bc-quick-actions{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:12px;
      margin:14px 0 18px;
    }
    .bc-quick-btn{
      display:flex;
      align-items:center;
      gap:14px;
      padding:14px 18px;
      background:linear-gradient(135deg,#f8fafc 0%, #f1f5f9 100%);
      border:1px solid var(--border);
      border-radius:14px;
      cursor:pointer;
      transition:.18s ease;
      text-align:left;
      width:100%;
      font-family:inherit;
      color:var(--text);
    }
    .bc-quick-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 6px 18px rgba(0,0,0,.08);
      border-color:#94a3b8;
    }
    .bc-quick-btn .bc-quick-icon{ font-size:26px; line-height:1; }
    .bc-quick-btn .bc-quick-text{ display:flex; flex-direction:column; gap:2px; }
    .bc-quick-btn .bc-quick-text strong{ font-size:14px; font-weight:700; }
    .bc-quick-btn .bc-quick-text small{ font-size:11.5px; color:var(--muted); font-weight:500; }
    body.dark .bc-quick-btn{ background:linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%); border-color:var(--border); color:var(--text); }
    body.dark .bc-quick-btn:hover{ background:linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%); }
    body.dark .bc-quick-btn .bc-quick-text small{ color:var(--muted); }

    /* =================================================
       Banner global (#3) — aviso de coordinadoras
       ================================================= */
    .global-notice{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:12px 16px;
      border-radius:12px;
      margin:0 0 16px;
      font-size:14px;
      line-height:1.45;
      animation:noticeSlideIn .35s ease-out;
      border:1px solid transparent;
    }
    .global-notice.hidden{ display:none; }
    .global-notice .gn-icon{ font-size:20px; flex-shrink:0; line-height:1.4; }
    .global-notice .gn-text{ flex:1; }
    .global-notice .gn-close{
      background:transparent;
      border:none;
      cursor:pointer;
      font-size:16px;
      color:inherit;
      opacity:.7;
      padding:0 4px;
      flex-shrink:0;
    }
    .global-notice .gn-close:hover{ opacity:1; }
    .global-notice.notice-info     { background:#dbeafe; color:#1e3a8a; border-color:#93c5fd; }
    .global-notice.notice-warning  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .global-notice.notice-success  { background:#dcfce7; color:#14532d; border-color:#86efac; }
    body.dark .global-notice.notice-info     { background:#0e1d3a; color:#bfdbfe; border-color:#1e3a8a; }
    body.dark .global-notice.notice-warning  { background:#3a2a05; color:#fde68a; border-color:#a16207; }
    body.dark .global-notice.notice-success  { background:#0e2a1c; color:#86efac; border-color:#15803d; }
    @keyframes noticeSlideIn{
      from { opacity:0; transform:translateY(-6px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* =================================================
       Modal genérico (#2 historial, #12 métricas)
       ================================================= */
    .bc-modal-overlay{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.6);
      backdrop-filter:blur(3px);
      z-index:300;
      display:none;
      align-items:flex-start;
      justify-content:center;
      padding:30px 16px;
      overflow-y:auto;
      animation:modalFadeIn .2s ease-out;
    }
    .bc-modal-overlay.open{ display:flex; }
    .bc-modal{
      background:var(--card);
      color:var(--text);
      border-radius:16px;
      max-width:720px;
      width:100%;
      max-height:calc(100vh - 60px);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      box-shadow:0 25px 50px rgba(0,0,0,.25);
      border:1px solid var(--border);
      animation:modalSlideUp .25s ease-out;
    }
    .bc-modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 20px;
      border-bottom:1px solid var(--border);
      background:var(--surface-1);
    }
    .bc-modal-title{
      margin:0;
      font-size:16px;
      font-weight:700;
      letter-spacing:.02em;
    }
    .bc-modal-close{
      background:transparent;
      border:1px solid transparent;
      width:32px;
      height:32px;
      border-radius:8px;
      cursor:pointer;
      font-size:14px;
      color:var(--muted);
      transition:.15s ease;
    }
    .bc-modal-close:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
    .bc-modal-body{
      padding:18px 20px;
      overflow-y:auto;
      flex:1;
    }
    @keyframes modalFadeIn{ from{opacity:0} to{opacity:1} }
    @keyframes modalSlideUp{
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* === Historial de cotizaciones === */
    .bc-history-actions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:14px;
      flex-wrap:wrap;
    }
    .bc-history-actions.inline{ margin:8px 0 0; }
    .bc-history-count{
      font-size:12px;
      color:var(--muted);
      margin-left:auto;
    }
    .bc-history-list{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .bc-history-item{
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px 14px;
      background:var(--surface-1);
    }
    .bc-history-meta{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:13px;
      flex-wrap:wrap;
      margin-bottom:8px;
    }
    .bc-history-time{
      color:var(--muted);
      font-size:12px;
      margin-left:auto;
    }
    .bc-history-summary{
      background:var(--card);
      padding:10px 12px;
      border-radius:8px;
      font-size:12.5px;
      max-height:140px;
      overflow:auto;
      white-space:pre-wrap;
      font-family:ui-monospace, "SF Mono", Consolas, monospace;
      border:1px solid var(--border);
      margin:0;
    }

    /* === Tags por campaña (badges en historial y métricas) === */
    .bc-history-badge, .bc-bar-fill{
      display:inline-block;
      padding:2px 9px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .bc-tag-plenitude{ background:#008051; color:#FFCD00; }
    .bc-tag-gana     { background:#1e3a8a; color:#fef3c7; }
    .bc-tag-repsol   { background:#ea580c; color:#fff; }
    .bc-tag-adt      { background:#003D72; color:#FFCC00; }
    .bc-tag-segurma  { background:#ea580c; color:#fff; }
    .bc-tag-securitas{ background:#e30613; color:#fff; }
    .bc-tag-custom   { background:#64748b; color:#fff; }

    /* === Métricas === */
    .bc-metrics-summary{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:10px;
      margin-bottom:18px;
    }
    .bc-metric-card{
      background:var(--surface-1);
      border:1px solid var(--border);
      border-radius:12px;
      padding:14px;
      text-align:center;
    }
    .bc-metric-card .num{
      font-size:30px;
      font-weight:800;
      color:#003D72;
      line-height:1;
    }
    body.dark .bc-metric-card .num{ color:#7dd3fc; }
    .bc-metric-card .lbl{
      font-size:11px;
      text-transform:uppercase;
      color:var(--muted);
      letter-spacing:.05em;
      margin-top:4px;
    }
    .bc-metrics-bars{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
    .bc-bar-row{ display:grid; grid-template-columns:120px 1fr 90px; align-items:center; gap:10px; font-size:13px; }
    .bc-bar-track{ background:var(--surface-2); border-radius:999px; height:18px; overflow:hidden; }
    .bc-bar-fill{ display:block; height:100%; padding:0; border-radius:999px; min-width:5px; transition:width .4s ease; }
    .bc-bar-value{ text-align:right; font-variant-numeric:tabular-nums; }
    .bc-bar-value small{ color:var(--muted); font-weight:400; }

    /* =================================================
       Indicador "cambios sin guardar" en el editor (#4)
       ================================================= */
    .editor-dirty{
      display:inline-block;
      padding:6px 12px;
      background:#fef3c7;
      color:#92400e;
      border:1px solid #fde68a;
      border-radius:8px;
      font-size:13px;
      font-weight:600;
      animation:dirtyPulse 1.6s ease-in-out infinite;
    }
    body.dark .editor-dirty{ background:#3a2a05; color:#fde68a; border-color:#a16207; }
    @keyframes dirtyPulse{
      0%, 100% { opacity:1; }
      50%      { opacity:.6; }
    }

    /* =================================================
       Tooltips contextuales (#9)
       ================================================= */
    .bc-help-icon{
      display:inline-block;
      margin-left:5px;
      cursor:pointer;
      color:#94a3b8;
      font-size:13px;
      vertical-align:middle;
      user-select:none;
      transition:color .15s ease;
    }
    .bc-help-icon:hover{ color:#0ea5e9; }
    .bc-help-icon:focus{ outline:2px solid #0ea5e9; outline-offset:2px; border-radius:50%; }
    .bc-help-popup{
      max-width:300px;
      background:#0f172a;
      color:#f1f5f9;
      padding:12px 14px;
      border-radius:10px;
      font-size:13px;
      line-height:1.5;
      box-shadow:0 12px 30px rgba(0,0,0,.35);
      z-index:400;
      animation:helpPopupFade .15s ease-out;
    }
    body.dark .bc-help-popup{ background:#1e293b; border:1px solid var(--border); }
    .bc-help-popup-content{ padding-right:18px; }
    .bc-help-popup-close{
      position:absolute;
      top:6px;
      right:8px;
      background:transparent;
      color:#cbd5e1;
      border:none;
      cursor:pointer;
      font-size:13px;
      padding:0;
      width:18px;
      height:18px;
    }
    .bc-help-popup-close:hover{ color:#fff; }
    @keyframes helpPopupFade{
      from { opacity:0; transform:translateY(-4px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @media (max-width: 640px){
      .bc-metrics-summary{ grid-template-columns:1fr 1fr; }
      .bc-bar-row{ grid-template-columns:80px 1fr 70px; font-size:12px; }
    }

    /* Botón flotante de modo oscuro */
    .dark-toggle{
      position:fixed;
      top:14px;
      right:14px;
      z-index:200;
      width:44px;
      height:44px;
      border-radius:50%;
      border:1px solid var(--border);
      background:var(--card);
      cursor:pointer;
      font-size:20px;
      box-shadow:var(--shadow);
      transition:transform .2s ease, box-shadow .2s ease;
      line-height:1;
      padding:0;
    }
    .dark-toggle:hover{
      transform:translateY(-2px) rotate(15deg);
      box-shadow:0 8px 22px rgba(0,0,0,.18);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      background:var(--bg);
      color:var(--text);
      transition:background .35s ease;
      --camp-tint:transparent;
    }
    /* Tema dinámico por campaña: gradiente sutil arriba que fade al fondo normal */
    body[data-campaign]{
      background:linear-gradient(to bottom, var(--camp-tint) 0%, var(--bg) 320px);
    }
    body[data-campaign="plenitude"] { --camp-tint:#dcfce7; }
    body[data-campaign="repsol"]    { --camp-tint:#fff7ed; }
    body[data-campaign="gana"]      { --camp-tint:#dbeafe; }
    body[data-campaign="edp"]       { --camp-tint:#e8f8f0; }
    body[data-campaign="securitas"] { --camp-tint:#fee2e2; }
    body[data-campaign="segurma"]   { --camp-tint:#ffedd5; }
    body[data-campaign="adt"]       { --camp-tint:#e0f2fe; }
    body[data-campaign="custom"]    { --camp-tint:#f1f5f9; }
    /* Versión oscura del tema dinámico */
    body.dark[data-campaign="plenitude"] { --camp-tint:#0e2a1c; }
    body.dark[data-campaign="repsol"]    { --camp-tint:#2a1605; }
    body.dark[data-campaign="gana"]      { --camp-tint:#0e1d3a; }
    body.dark[data-campaign="edp"]       { --camp-tint:#0a2a1c; }
    body.dark[data-campaign="securitas"] { --camp-tint:#3a0a0d; }
    body.dark[data-campaign="segurma"]   { --camp-tint:#2a1605; }
    body.dark[data-campaign="adt"]       { --camp-tint:#0a1f33; }
    body.dark[data-campaign="custom"]    { --camp-tint:#1e293b; }

    .wrap{
      max-width:980px;
      margin:40px auto;
      padding:0 16px;
    }

    .card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:24px;
      border:1px solid var(--border);
    }

    h1{
      margin:0 0 8px;
      font-size:30px;
    }

    h1{
      text-align:center;
    }

    /* Frase motivacional del día — fondo pastel con gradiente animado */
    @keyframes dailyQuoteFlow{
      0%, 100% { background-position:   0% 50%; }
      50%      { background-position: 100% 50%; }
    }
    @keyframes dailyQuoteFloat{
      0%, 100% { transform:translateY(0); }
      50%      { transform:translateY(-2px); }
    }
    .daily-quote{
      position:relative;
      margin:6px auto 18px;
      max-width:560px;
      padding:14px 22px;
      border-radius:16px;
      font-size:15px;
      font-weight:600;
      line-height:1.45;
      text-align:center;
      color:var(--dq-text, #1f2937);
      background:linear-gradient(120deg,
        var(--dq-c1, #fef3c7) 0%,
        var(--dq-c2, #fde68a) 25%,
        var(--dq-c3, #fbbf24) 50%,
        var(--dq-c2, #fde68a) 75%,
        var(--dq-c1, #fef3c7) 100%);
      background-size:280% 280%;
      animation:dailyQuoteFlow 9s ease infinite, dailyQuoteFloat 4.5s ease-in-out infinite;
      box-shadow:0 4px 14px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.45);
      border:1px solid rgba(255,255,255,.4);
      letter-spacing:.01em;
    }
    .daily-quote .dq-text{
      display:block;
    }
    body.dark .daily-quote{
      color:var(--dq-text-dark, #f1f5f9);
      box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.06);
    }
    @media (max-width: 640px){
      .daily-quote{ font-size:14px; padding:12px 16px; }
    }

    /* Logo BeCall en página principal */
    .becall-logo{
      display:block;
      margin:8px auto 18px;
      max-width:320px;
      width:100%;
      height:auto;
      transition:filter .25s ease, transform .25s ease;
    }
    .becall-logo:hover{
      transform:scale(1.03);
    }
    /* En modo oscuro: el azul oscuro del logo se vería pálido — aumento brillo + halo blanco sutil */
    body.dark .becall-logo{
      filter:brightness(1.25) contrast(1.1) drop-shadow(0 0 16px rgba(255,255,255,.12));
    }
    @media (max-width: 640px){
      .becall-logo{ max-width:240px; }
    }

    h3.group-title{
      margin:20px 0 10px;
      font-size:16px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.06em;
      text-align:center;
    }

    .subtitle{
      color:var(--muted);
      margin-bottom:24px;
      text-align:center;
    }

    .section-title{
      text-align:center;
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:16px;
    }

    .energy-btn{
      display:block;
      width:100%;
      border:none;
      border-radius:14px;
      padding:20px;
      background:#fff7ed;
      color:#9a3412;
      font-size:18px;
      font-weight:700;
      cursor:pointer;
      transition:.2s ease;
      border:1px solid #fed7aa;
    }

    .energy-btn:hover{
      transform:translateY(-2px);
      background:#ffedd5;
    }

    /* Campañas: gradiente animado suave para todos los botones */
    .energy-btn.plenitude,
    .energy-btn.gana,
    .energy-btn.securitas,
    .energy-btn.segurma,
    .energy-btn.adt{
      background-size:200% 200%;
      animation:groupBtnGradient 7s ease infinite;
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .energy-btn.plenitude:hover,
    .energy-btn.gana:hover,
    .energy-btn.securitas:hover,
    .energy-btn.segurma:hover,
    .energy-btn.adt:hover{
      transform:translateY(-2px);
    }

    .energy-btn.plenitude{
      background-image:linear-gradient(120deg, #006b43 0%, #008051 25%, #00a065 50%, #008051 75%, #006b43 100%);
      color:#FFCD00;
      border-color:#006b43;
      box-shadow:0 4px 14px rgba(0,128,81,.20);
    }
    .energy-btn.plenitude:hover{
      box-shadow:0 8px 22px rgba(0,128,81,.35);
    }

    .energy-btn.gana{
      background-image:linear-gradient(120deg, #1e293b 0%, #1e3a8a 25%, #3b82f6 50%, #1e3a8a 75%, #1e293b 100%);
      color:#fef3c7;
      border-color:#1e3a8a;
      box-shadow:0 4px 14px rgba(30,58,138,.20);
    }
    .energy-btn.gana:hover{
      box-shadow:0 8px 22px rgba(30,58,138,.35);
    }

    .edp-pot-grid{
      display:grid;
      grid-template-columns:repeat(6, 1fr);
      gap:8px;
      margin-bottom:6px;
    }
    .edp-pot-grid > div{ display:flex; flex-direction:column; gap:3px; }
    .edp-pot-grid label{ font-size:12px; font-weight:600; color:var(--muted); margin:0; }
    .edp-pot-grid input{ width:100%; padding:8px 6px; text-align:center; }
    .edp-pot-grid > div.pot-off{ display:none; }
    @media (max-width:640px){
      .edp-pot-grid{ grid-template-columns:repeat(3, 1fr); }
    }

    /* EDP · modo oscuro — campos más visibles (los por defecto se funden con el fondo) */
    body.dark #edpHomeView input,
    body.dark #edpHomeView select{
      background:#1c2738;
      border:1px solid #3a4a63;
      color:#f1f5f9;
    }
    body.dark #edpHomeView input::placeholder{ color:#7c8ba3; }
    body.dark #edpHomeView input:hover,
    body.dark #edpHomeView select:hover{ border-color:#4f6a86; }
    body.dark #edpHomeView input:focus,
    body.dark #edpHomeView select:focus{
      outline:none;
      border-color:#15a36a;
      box-shadow:0 0 0 3px rgba(21,163,106,.30);
      background:#1f2e40;
    }
    body.dark #edpHomeView .edp-pot-grid input{
      background:#1c2738;
      border-color:#3a4a63;
    }
    body.dark #edpHomeView label{ color:#cbd5e1; }
    body.dark #edpHomeView .hint{ color:#94a3b8; }
    /* Bloque "importe que paga el cliente" legible en oscuro */
    body.dark #edpHomeView .summary-panel [style*="#ecfdf5"]{
      background:#0e2a1c !important;
      border-color:#15803d !important;
    }
    body.dark #edpHomeView .summary-panel [style*="#ecfdf5"] strong,
    body.dark #edpHomeView .summary-panel [style*="#ecfdf5"] .v,
    body.dark #edpHomeView .summary-panel [style*="#ecfdf5"] span{ color:#86efac !important; }

    .energy-btn.edp{
      background-image:linear-gradient(120deg, #0a3d2c 0%, #117a52 25%, #18b074 50%, #117a52 75%, #0a3d2c 100%);
      color:#eafff5;
      border-color:#117a52;
      box-shadow:0 4px 14px rgba(17,122,82,.20);
      background-size:200% 200%;
      animation:groupBtnGradient 7s ease infinite;
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .energy-btn.edp:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 22px rgba(17,122,82,.35);
    }

    /* Iconos animados de los botones de grupo (rayo + candado) — efectos llamativos */
    .btn-icon{
      display:inline-block;
      transform-origin:center;
      will-change:transform, filter;
      font-size:1.15em;
      vertical-align:middle;
      margin-right:6px;
    }

    /* RAYO — pulso suave con glow ámbar */
    .icon-bolt{
      animation:boltPulse 2.6s ease-in-out infinite;
    }
    @keyframes boltPulse{
      0%, 100% { transform:scale(1)    rotate(0deg);  filter:drop-shadow(0 0 4px rgba(245,158,11,.4)); }
      40%      { transform:scale(1.10) rotate(-3deg); filter:drop-shadow(0 0 8px rgba(252,211,77,.7)); }
      50%      { transform:scale(1.14);              filter:drop-shadow(0 0 12px rgba(252,211,77,.85)); }
      60%      { transform:scale(1.10) rotate(3deg);  filter:drop-shadow(0 0 8px rgba(252,211,77,.7)); }
    }

    /* CANDADO — balanceo suave con respiración + glow plateado */
    .icon-lock{
      animation:lockGuard 3.2s ease-in-out infinite;
    }
    @keyframes lockGuard{
      0%, 100% { transform:rotate(0deg)  scale(1);    filter:drop-shadow(0 0 4px rgba(148,163,184,.4)); }
      25%      { transform:rotate(-4deg) scale(1.05); filter:drop-shadow(0 0 6px rgba(203,213,225,.55)); }
      50%      { transform:rotate(0deg)  scale(1.10); filter:drop-shadow(0 0 10px rgba(203,213,225,.7)); }
      75%      { transform:rotate(4deg)  scale(1.05); filter:drop-shadow(0 0 6px rgba(203,213,225,.55)); }
    }

    /* Hover: aceleramos un poco las animaciones (no frenético) */
    .energy-btn.group-energia:hover .icon-bolt{
      animation-duration:1.3s;
    }
    .energy-btn.group-alarmas:hover .icon-lock{
      animation-duration:1.6s;
    }

    /* Selector de grupo (Energía / Alarmas) — gradiente suave animado */
    @keyframes groupBtnGradient{
      0%   { background-position:   0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position:   0% 50%; }
    }

    .energy-btn.group-energia,
    .energy-btn.group-alarmas{
      font-size:22px;
      padding:34px 20px;
      background-size:200% 200%;
      animation:groupBtnGradient 7s ease infinite;
      transition:transform .2s ease, box-shadow .2s ease;
    }

    .energy-btn.group-energia{
      background-image:linear-gradient(120deg, #fef3c7 0%, #fde68a 25%, #fbbf24 50%, #fde68a 75%, #fef3c7 100%);
      color:#7c2d12;
      border-color:#fbbf24;
      box-shadow:0 4px 14px rgba(245,158,11,.20);
    }
    .energy-btn.group-energia:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 22px rgba(245,158,11,.35);
    }

    .energy-btn.group-alarmas{
      background-image:linear-gradient(120deg, #cbd5e1 0%, #94a3b8 25%, #475569 50%, #94a3b8 75%, #cbd5e1 100%);
      color:#f8fafc;
      border-color:#64748b;
      text-shadow:0 1px 2px rgba(0,0,0,.18);
      box-shadow:0 4px 14px rgba(71,85,105,.25);
    }
    .energy-btn.group-alarmas:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 22px rgba(71,85,105,.40);
    }

    /* Campañas de alarmas */
    .energy-btn.securitas{
      background-image:linear-gradient(120deg, #a30910 0%, #e30613 25%, #f43f5e 50%, #e30613 75%, #a30910 100%);
      color:#ffffff;
      border-color:#a30910;
      box-shadow:0 4px 14px rgba(227,6,19,.22);
    }
    .energy-btn.securitas:hover{
      box-shadow:0 8px 22px rgba(227,6,19,.38);
    }

    .energy-btn.segurma{
      background-image:linear-gradient(120deg, #c2410c 0%, #ea580c 25%, #fb923c 50%, #ea580c 75%, #c2410c 100%);
      color:#ffffff;
      border-color:#c2410c;
      box-shadow:0 4px 14px rgba(234,88,12,.22);
    }
    .energy-btn.segurma:hover{
      box-shadow:0 8px 22px rgba(234,88,12,.38);
    }

    .energy-btn.adt{
      background-image:linear-gradient(120deg, #002952 0%, #003D72 25%, #1e40af 50%, #003D72 75%, #002952 100%);
      color:#FFCC00;
      border-color:#002952;
      box-shadow:0 4px 14px rgba(0,61,114,.25);
    }
    .energy-btn.adt:hover{
      box-shadow:0 8px 22px rgba(0,61,114,.40);
    }

    .hidden{display:none}

    .topbar{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
      margin-bottom:18px;
    }
    .topbar > :first-child{
      grid-column:2;
      justify-self:center;
      text-align:center;
    }
    .topbar > :last-child{
      grid-column:3;
      justify-self:end;
    }
    @media (max-width: 640px){
      .topbar{
        grid-template-columns:1fr;
        text-align:center;
      }
      .topbar > :first-child,
      .topbar > :last-child{
        grid-column:1;
        justify-self:center;
      }
    }

    .back-btn{
      border:none;
      background:#64748b;
      color:#fff;
      padding:10px 16px;
      border-radius:10px;
      cursor:pointer;
      font-weight:700;
      box-shadow:0 2px 6px rgba(100,116,139,.25);
      transition:.2s ease;
    }

    .back-btn:hover{
      background:#475569;
      transform:translateY(-1px);
      box-shadow:0 4px 10px rgba(71,85,105,.35);
    }

    .badge{
      display:inline-block;
      padding:4px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      margin-left:8px;
      vertical-align:middle;
    }
    .badge.repsol{ background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
    .badge.plenitude{ background:#dcfce7; color:#065f46; border:1px solid #86efac; }
    .badge.gana{ background:#dbeafe; color:#1e3a8a; border:1px solid #93c5fd; }
    .badge.securitas{ background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
    .badge.segurma{ background:#fff7ed; color:#9a3412; border:1px solid #fdba74; }
    .badge.adt{ background:#dbeafe; color:#003D72; border:1px solid #93c5fd; }

    .section-title{
      font-size:24px;
      margin:0;
    }

    .form-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:16px;
      margin-top:18px;
    }

    label{
      display:block;
      font-weight:700;
      margin-bottom:6px;
    }

    input, select{
      width:100%;
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:10px;
      font-size:15px;
      background:#fff;
    }

    .hint{
      color:var(--muted);
      font-size:12px;
      margin-top:6px;
      line-height:1.35;
    }

    .result{
      margin-top:24px;
      background:#f9fafb;
      border:1px solid var(--border);
      border-radius:14px;
      padding:20px;
    }

    .result-row{
      display:flex;
      justify-content:space-between;
      gap:16px;
      padding:10px 0;
      border-bottom:1px dashed var(--border);
    }

    .result-row:last-child{
      border-bottom:none;
    }

    .total{
      font-size:24px;
      font-weight:800;
      color:var(--ok);
    }

    .muted{
      color:var(--muted);
    }

    .calc-btn{
      margin-top:18px;
      border:none;
      background:var(--primary);
      color:white;
      padding:14px 18px;
      border-radius:12px;
      font-size:16px;
      font-weight:800;
      cursor:pointer;
    }

    .calc-btn:hover{
      background:var(--primary-dark);
    }

    .calc-btn.secondary{
      background:#475569;
    }
    .calc-btn.secondary:hover{
      background:#334155;
    }
    .calc-btn.ghost{
      background:#f3f4f6;
      color:#374151;
      border:1px solid var(--border);
    }
    .calc-btn.ghost:hover{
      background:#e5e7eb;
    }
    .btn-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:18px;
    }
    .btn-row .calc-btn{
      margin-top:0;
    }

    .box{
      margin-top:18px;
      padding:16px;
      background:#fff7ed;
      border:1px solid #fed7aa;
      border-radius:12px;
      color:#7c2d12;
      font-size:14px;
    }

    .box.plenitude{
      background:#f1f5f9;
      border-color:#cbd5e1;
      color:#1e293b;
      font-size:15.5px;
      line-height:1.5;
    }

    .box.plenitude.small{
      font-size:15.5px;
    }

    .box.gana{
      background:#eff6ff;
      border-color:#bfdbfe;
      color:#1e3a8a;
      font-size:15.5px;
      line-height:1.5;
    }

    .box.alarmas{
      background:#f1f5f9;
      border-color:#cbd5e1;
      color:#1e293b;
      font-size:15.5px;
      line-height:1.5;
    }

    .box.securitas{
      background:#fef2f2;
      border-color:#fecaca;
      color:#7f1d1d;
      font-size:15.5px;
      line-height:1.5;
    }

    .box.segurma{
      background:#fff7ed;
      border-color:#fed7aa;
      color:#7c2d12;
      font-size:15.5px;
      line-height:1.5;
    }

    .box.adt{
      background:#eff6ff;
      border-color:#bfdbfe;
      color:#003D72;
      font-size:15.5px;
      line-height:1.5;
    }

    .box.intro{
      background:linear-gradient(135deg,#fef3c7 0%,#e0e7ff 100%);
      border-color:#cbd5e1;
      color:#1e293b;
      font-size:15px;
      text-align:center;
    }

    .small{
      font-size:13px;
    }

    /* Comparador */
    .checkbox-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:10px;
      margin-top:10px;
      margin-bottom:18px;
    }
    .checkbox-grid label{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border:1px solid var(--border);
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
      font-size:14px;
      background:#fff;
      margin-bottom:0;
    }
    .checkbox-grid label:has(input:checked){
      background:#dcfce7;
      border-color:#86efac;
      color:#14532d;
    }
    .checkbox-grid input[type=checkbox]{
      width:18px;
      height:18px;
      padding:0;
      margin:0;
      accent-color:#008051;
    }

    .compare-table{
      width:100%;
      border-collapse:collapse;
      margin-top:10px;
      font-size:14px;
      background:#fff;
    }
    .compare-table th, .compare-table td{
      border:1px solid var(--border);
      padding:10px;
      text-align:right;
      white-space:nowrap;
    }
    .compare-table th{
      background:#f3f4f6;
      text-align:center;
      font-weight:700;
    }
    .compare-table td.name, .compare-table th.name{
      text-align:left;
      white-space:normal;
    }
    .compare-table tr.best{
      background:#ecfdf5;
    }
    .compare-table tr.best td{
      font-weight:700;
      color:#065f46;
    }
    .compare-table tr.best td.name::after{
      content:" ★ mejor precio";
      color:#059669;
      font-weight:700;
      font-size:12px;
      margin-left:6px;
    }
    .compare-empty{
      padding:20px;
      text-align:center;
      color:var(--muted);
      background:#f9fafb;
      border:1px dashed var(--border);
      border-radius:12px;
    }

    /* Contenedores de tablas comparativas: scroll horizontal cuando no caben */
    #plcLuzCompareTable,
    #plcGasCompareTable,
    #rlcLuzCompareTable,
    #rlcGasCompareTable{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      max-width:100%;
      margin-top:10px;
    }
    #plcLuzCompareTable table,
    #plcGasCompareTable table,
    #rlcLuzCompareTable table,
    #rlcGasCompareTable table{
      margin-top:0;
    }

    table{
      width:100%;
      border-collapse:collapse;
      margin-top:16px;
      font-size:14px;
    }

    th, td{
      border:1px solid var(--border);
      padding:10px;
      text-align:left;
      vertical-align:top;
    }

    th{
      background:#f3f4f6;
    }

    /* Editor de tarifas */
    .editor-section{
      background:#f9fafb;
      border:1px solid var(--border);
      border-radius:12px;
      padding:0;
      margin-bottom:14px;
      overflow:hidden;
      border-left:4px solid #94a3b8; /* color por defecto, sobreescrito por .editor-section.<camp> */
      transition:opacity .15s ease;
    }
    .editor-section > h3{
      margin:0;
      padding:14px 18px;
      font-size:14px;
      color:#0f172a;
      letter-spacing:.04em;
      text-transform:uppercase;
      cursor:pointer;
      user-select:none;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      background:#f1f5f9;
      transition:background .12s ease;
    }
    .editor-section > h3:hover{
      background:#e2e8f0;
    }
    .editor-section > h3 .chevron{
      font-size:14px;
      opacity:.6;
      transition:transform .2s ease;
    }
    .editor-section.collapsed > h3 .chevron{
      transform:rotate(-90deg);
    }
    .editor-section-body{
      padding:14px 16px;
    }
    .editor-section.collapsed .editor-section-body{
      display:none;
    }

    /* Tintes por campaña en el editor */
    .editor-section.plenitude { border-left-color:#008051; }
    .editor-section.plenitude > h3 { background:#dcfce7; color:#065f46; }
    .editor-section.plenitude > h3:hover { background:#bbf7d0; }

    .editor-section.repsol { border-left-color:#ea580c; }
    .editor-section.repsol > h3 { background:#fff7ed; color:#9a3412; }
    .editor-section.repsol > h3:hover { background:#fed7aa; }

    .editor-section.gana { border-left-color:#1e3a8a; }
    .editor-section.gana > h3 { background:#dbeafe; color:#1e3a8a; }
    .editor-section.gana > h3:hover { background:#bfdbfe; }

    .editor-section.adt { border-left-color:#003D72; }
    .editor-section.adt > h3 { background:#e0f2fe; color:#003D72; }
    .editor-section.adt > h3:hover { background:#bae6fd; }

    .editor-section.segurma { border-left-color:#c2410c; }
    .editor-section.segurma > h3 { background:#ffedd5; color:#7c2d12; }
    .editor-section.segurma > h3:hover { background:#fed7aa; }

    .editor-section.securitas { border-left-color:#e30613; }
    .editor-section.securitas > h3 { background:#fee2e2; color:#991b1b; }
    .editor-section.securitas > h3:hover { background:#fecaca; }

    .editor-section.custom { border-left-color:#64748b; }
    .editor-section.custom > h3 { background:#f1f5f9; color:#1e293b; }

    /* Búsqueda en editor */
    .editor-search-wrap{
      position:sticky;
      top:0;
      z-index:5;
      background:var(--card);
      padding:10px 0 12px;
      margin-bottom:12px;
      border-bottom:1px solid var(--border);
    }
    .editor-search-wrap input{
      width:100%;
      padding:11px 14px;
      font-size:14px;
      border:2px solid var(--border);
      border-radius:10px;
    }
    .editor-search-wrap input:focus{
      outline:none;
      border-color:#94a3b8;
    }
    .editor-search-wrap .search-hint{
      font-size:12px;
      color:var(--muted);
      margin-top:6px;
    }
    .editor-section.hidden-by-search{ display:none; }
    /* Cuando hay búsqueda activa que matchea, forzamos expansión aunque collapsed */
    .editor-section.collapsed.search-match .editor-section-body{ display:block; }
    .editor-section.collapsed.search-match > h3 .chevron{ transform:rotate(0deg); }
    .editor-tarifa{
      background:#fff;
      border:1px solid var(--border);
      border-radius:10px;
      padding:12px 14px;
      margin-bottom:10px;
    }
    .editor-tarifa h4{
      margin:0 0 10px;
      font-size:14px;
      color:#1e293b;
    }
    .editor-fields{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
      gap:10px 14px;
      align-items:end;
    }
    .editor-fields label{
      display:block;
      font-weight:600;
      font-size:12px;
      color:var(--muted);
      margin-bottom:4px;
    }
    .editor-fields input,
    .editor-tarifa input,
    .editor-rl-row input{
      padding:8px 10px;
      font-size:14px;
    }
    .editor-rl-row{
      display:grid;
      grid-template-columns:60px 1fr 1fr;
      gap:10px;
      align-items:center;
      margin-bottom:6px;
    }
    .editor-rl-row span{
      font-weight:700;
      color:#475569;
      font-size:13px;
    }
    .editor-meta{
      padding:10px 14px;
      background:#eef2ff;
      border:1px solid #c7d2fe;
      border-radius:10px;
      margin-bottom:14px;
      font-size:14px;
      color:#3730a3;
    }

    /* Selector de modo del editor */
    .mode-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:14px;
      margin:16px 0 18px;
    }
    .mode-btn{
      display:flex;
      align-items:center;
      gap:14px;
      padding:18px 22px;
      background:linear-gradient(135deg,#eef2ff 0%,#fae8ff 100%);
      border:1px solid #c7d2fe;
      border-radius:14px;
      box-shadow:0 4px 12px rgba(99,102,241,.10);
      cursor:pointer;
      transition:.2s ease;
      text-align:left;
      width:100%;
      color:#3730a3;
      font-size:14px;
      font-weight:600;
      margin-top:0;
    }
    .mode-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 18px rgba(99,102,241,.20);
      background:linear-gradient(135deg,#e0e7ff 0%,#f3e8ff 100%);
    }
    .mode-btn.danger{
      background:linear-gradient(135deg,#fee2e2 0%,#fce7f3 100%);
      border-color:#fca5a5;
      box-shadow:0 4px 12px rgba(220,38,38,.10);
      color:#7f1d1d;
    }
    .mode-btn.danger:hover{
      background:linear-gradient(135deg,#fecaca 0%,#fbcfe8 100%);
      box-shadow:0 8px 18px rgba(220,38,38,.20);
    }
    .mode-btn.danger .mode-text strong{ color:#7f1d1d; }
    .mode-btn.danger .mode-text small{ color:#b91c1c; }
    .mode-icon{ font-size:30px; line-height:1; }
    .mode-text{ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
    .mode-text strong{ font-size:16px; font-weight:800; color:#312e81; }
    .mode-text small{ font-size:12.5px; font-weight:500; color:#6366f1; }

    /* Formulario crear campaña + filas tarifa */
    .create-form .field, .addremove-form .field{
      margin-bottom:12px;
    }
    .create-form label, .addremove-form label{
      display:block;
      font-weight:700;
      font-size:13px;
      margin-bottom:6px;
      color:#374151;
    }
    .create-form input[type=color]{
      width:60px;
      height:40px;
      padding:2px;
      cursor:pointer;
    }
    .color-row{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .color-preview{
      flex:1;
      padding:14px 18px;
      border-radius:10px;
      border:1px solid var(--border);
      font-weight:700;
      text-align:center;
    }
    .checkbox-inline{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }
    .checkbox-inline label{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:600;
      cursor:pointer;
    }
    .checkbox-inline input{ width:18px; height:18px; }

    /* Lista tarifas en add/remove */
    .tariff-list{
      margin-top:12px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .tariff-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 14px;
      background:#f9fafb;
      border:1px solid var(--border);
      border-radius:10px;
      gap:10px;
    }
    .tariff-row strong{ font-size:14px; }
    .tariff-row small{ color:var(--muted); font-size:12px; display:block; }
    .btn-delete{
      background:#fee2e2;
      color:#991b1b;
      border:1px solid #fca5a5;
      padding:6px 12px;
      border-radius:8px;
      cursor:pointer;
      font-weight:700;
      font-size:13px;
    }
    .btn-delete:hover{ background:#fecaca; }
    .btn-confirm-delete{
      background:#991b1b;
      color:#fff;
      border:1px solid #7f1d1d;
    }
    .btn-confirm-delete:hover{ background:#7f1d1d; }

    .new-tariff-form{
      margin-top:14px;
      padding:14px 16px;
      background:#f0fdf4;
      border:1px solid #86efac;
      border-radius:12px;
    }
    .new-tariff-form h4{
      margin:0 0 10px;
      font-size:14px;
      color:#065f46;
    }
    .editor-status{
      margin-top:12px;
      padding:10px 14px;
      border-radius:10px;
      font-weight:600;
      display:none;
    }
    .editor-status.ok{
      display:block;
      background:#dcfce7;
      border:1px solid #86efac;
      color:#065f46;
    }
    .editor-status.err{
      display:block;
      background:#fee2e2;
      border:1px solid #fca5a5;
      color:#991b1b;
    }
    .meta-footer{
      text-align:center;
      margin-top:18px;
      font-size:12px;
      color:var(--muted);
    }
    /* CTA del Editor de tarifas en la pantalla inicial */
    .editor-cta-wrap{
      margin-top:22px;
      display:flex;
      justify-content:center;
    }
    .editor-cta{
      display:flex;
      align-items:center;
      gap:14px;
      padding:14px 22px;
      background:linear-gradient(135deg,#eef2ff 0%,#fae8ff 100%);
      border:1px solid #c7d2fe;
      border-radius:14px;
      box-shadow:0 4px 12px rgba(99,102,241,.12);
      cursor:pointer;
      transition:.2s ease;
      width:auto;
      min-width:280px;
      color:#3730a3;
      font-size:15px;
      font-weight:600;
      text-align:left;
      margin-top:0;
    }
    .editor-cta:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 18px rgba(99,102,241,.22);
      background:linear-gradient(135deg,#e0e7ff 0%,#f3e8ff 100%);
    }
    .editor-cta-icon{
      font-size:28px;
      line-height:1;
    }
    .editor-cta-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      line-height:1.3;
    }
    .editor-cta-text strong{
      font-size:17px;
      font-weight:800;
      color:#312e81;
    }
    .editor-cta-text small{
      font-size:12.5px;
      font-weight:500;
      color:#6366f1;
    }
    @media (max-width: 480px){
      .editor-cta{ min-width:0; width:100%; padding:12px 16px; }
      .editor-cta-icon{ font-size:24px; }
      .editor-cta-text strong{ font-size:15px; }
    }

    @media (max-width: 900px){
      .compare-table{ font-size:13px; }
      .compare-table th, .compare-table td{ padding:7px 8px; }
      .checkbox-grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
      .form-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
    }

    @media (max-width: 640px){
      h1{font-size:24px}
      .section-title{font-size:20px}
      .result-row{flex-direction:column}
      .compare-table{ font-size:12px; }
      .compare-table th, .compare-table td{ padding:5px 6px; }
      .checkbox-grid{ grid-template-columns:1fr 1fr; }
      .topbar{ gap:8px; }
      .back-btn{ padding:8px 12px; font-size:13px; }
      .card{ padding:16px; }
      .wrap{ margin:16px auto; }
    }

    @media (max-width: 420px){
      .checkbox-grid{ grid-template-columns:1fr; }
      .form-grid{ grid-template-columns:1fr; }
    }

    /* =========================================== */
    /* COMPONENTES COMPARTIDOS · COTIZADORES ALARMAS */
    /* =========================================== */

    /* Segment toggle (Hogar / Negocio) */
    .segment-toggle{
      display:inline-flex;
      background:#f1f5f9;
      border:1px solid #cbd5e1;
      border-radius:12px;
      padding:4px;
      gap:4px;
      margin:0 auto;
    }
    .segment-toggle button{
      border:none;
      background:transparent;
      padding:10px 22px;
      border-radius:8px;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      color:#475569;
      transition:.15s ease;
      line-height:1.2;
      text-align:center;
    }
    .segment-toggle button small{
      display:block;
      font-weight:500;
      opacity:.75;
      margin-top:2px;
    }
    .segment-toggle button.active{
      background:#fff;
      color:#1e293b;
      box-shadow:0 1px 3px rgba(0,0,0,.1);
    }
    .segment-wrap{
      display:flex;
      justify-content:center;
      margin-bottom:18px;
    }

    /* Tabla de extras (carrito tipo lista) */
    .extras-table{
      border:1px solid var(--border);
      border-radius:14px;
      overflow:hidden;
      margin-top:14px;
    }
    .extras-group{
      border-bottom:1px solid var(--border);
    }
    .extras-group:last-child{ border-bottom:none; }
    .extras-group-header{
      background:#f8fafc;
      padding:10px 16px;
      font-weight:700;
      font-size:14px;
      color:#475569;
      text-transform:uppercase;
      letter-spacing:.04em;
      display:flex;
      align-items:center;
      gap:8px;
      border-bottom:1px solid var(--border);
      cursor:pointer;
      user-select:none;
      justify-content:space-between;
      transition:background .12s ease;
    }
    .extras-group-header:hover{
      background:#f1f5f9;
    }
    .extras-group-header .group-meta{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      font-weight:500;
      color:var(--muted);
      text-transform:none;
      letter-spacing:0;
    }
    .extras-group-header .selected-badge{
      background:#fef3c7;
      color:#92400e;
      border:1px solid #fde68a;
      padding:2px 9px;
      border-radius:999px;
      font-weight:700;
      font-size:11px;
      text-transform:none;
      letter-spacing:0;
    }
    .extras-group-header .chevron{
      display:inline-block;
      transition:transform .2s ease;
      font-size:14px;
      opacity:.6;
    }
    .extras-group.collapsed .extras-group-header .chevron{
      transform:rotate(-90deg);
    }
    .extras-group.collapsed .extras-row{
      display:none;
    }
    .extras-group.collapsed .extras-group-header{
      border-bottom:none;
    }
    .extras-row{
      display:grid;
      grid-template-columns:1fr auto auto auto;
      align-items:center;
      gap:12px;
      padding:10px 16px;
      border-bottom:1px solid #f1f5f9;
      transition:background .15s ease;
    }
    .extras-row:last-child{ border-bottom:none; }
    .extras-row.has-qty{
      background:#fefce8;
    }
    .extras-row .name{
      font-weight:600;
      font-size:14px;
    }
    .extras-row .name small{
      display:block;
      font-weight:400;
      color:var(--muted);
      font-size:11.5px;
      margin-top:2px;
    }
    .extras-row .price-info{
      font-size:13px;
      color:var(--muted);
      text-align:right;
      min-width:90px;
    }
    .extras-row .qty-stepper{
      display:inline-flex;
      align-items:center;
      gap:0;
      background:#fff;
      border:1px solid var(--border);
      border-radius:8px;
      overflow:hidden;
    }
    .extras-row .qty-stepper button{
      border:none;
      background:#fff;
      width:32px;
      height:32px;
      cursor:pointer;
      font-size:18px;
      font-weight:700;
      color:#475569;
      transition:.15s ease;
    }
    .extras-row .qty-stepper button:hover:not(:disabled){
      background:#f1f5f9;
      color:#1e293b;
    }
    .extras-row .qty-stepper button:disabled{
      opacity:.3;
      cursor:not-allowed;
    }
    .extras-row .qty-stepper .qty-value{
      min-width:34px;
      text-align:center;
      font-weight:700;
      font-size:14px;
      border-left:1px solid var(--border);
      border-right:1px solid var(--border);
      padding:0 6px;
      line-height:32px;
    }
    .extras-row .row-total{
      font-weight:700;
      min-width:75px;
      text-align:right;
      font-size:14px;
      color:#1e293b;
    }
    .extras-row.has-qty .row-total{ color:#059669; }

    @media (max-width: 640px){
      .extras-row{
        grid-template-columns:1fr auto;
        grid-template-areas:
          "name name"
          "price total"
          "stepper stepper";
        gap:6px 12px;
      }
      .extras-row .name{ grid-area:name; }
      .extras-row .price-info{ grid-area:price; text-align:left; }
      .extras-row .qty-stepper{ grid-area:stepper; justify-self:center; margin-top:4px; }
      .extras-row .row-total{ grid-area:total; }
    }

    /* Cards de modalidad (estilo radio visual) */
    .modality-cards{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:14px;
      margin:8px 0 18px;
    }
    .modality-card{
      border:2px solid var(--border);
      border-radius:14px;
      padding:18px 16px;
      cursor:pointer;
      transition:.15s ease;
      background:#fff;
      text-align:left;
      display:flex;
      flex-direction:column;
      gap:6px;
      position:relative;
    }
    .modality-card:hover:not(.disabled){
      border-color:#94a3b8;
      transform:translateY(-1px);
      box-shadow:0 4px 12px rgba(0,0,0,.06);
    }
    .modality-card.disabled{
      opacity:.4;
      cursor:not-allowed;
      background:#f8fafc;
    }
    .modality-card .mc-label{
      font-weight:800;
      font-size:17px;
      color:#1e293b;
    }
    .modality-card .mc-price{
      font-size:26px;
      font-weight:800;
      color:#475569;
      line-height:1.1;
    }
    .modality-card .mc-price small{
      display:block;
      font-size:12px;
      color:var(--muted);
      font-weight:500;
      margin-top:2px;
    }
    .modality-card .mc-meta{
      font-size:12px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .modality-card .mc-comp{
      margin-top:8px;
      font-size:12.5px;
      color:#475569;
      line-height:1.45;
      border-top:1px dashed #e2e8f0;
      padding-top:8px;
    }
    .modality-card .mc-restrict{
      margin-top:6px;
      font-size:11.5px;
      color:#9a3412;
      font-style:italic;
    }
    /* Color activo: usa la variable --camp-accent que define cada campaña inline */
    .modality-card.active{
      border-color:var(--camp-accent, #ea580c);
      background:var(--camp-accent-bg, #fff7ed);
    }
    .modality-card.active .mc-price{
      color:var(--camp-accent, #ea580c);
    }
    .modality-card.active::after{
      content:'✓';
      position:absolute;
      top:10px;
      right:12px;
      width:24px;
      height:24px;
      background:var(--camp-accent, #ea580c);
      color:#fff;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:13px;
    }

    /* Bloque de opciones contextuales (variantes + batería) */
    .options-block{
      background:#f8fafc;
      border:1px solid var(--border);
      border-radius:12px;
      padding:14px 16px;
      margin-bottom:14px;
    }
    .options-block h4{
      margin:0 0 10px;
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:.05em;
      color:var(--muted);
    }
    .options-block label{
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-weight:500;
      font-size:14px;
      cursor:pointer;
      padding:6px 0;
    }
    .options-block label input[type=checkbox]{
      width:auto;
      margin-top:2px;
    }
    .options-block label small{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-top:2px;
      font-weight:400;
    }

    /* Acciones del cotizador (copiar / reset) */
    .quote-actions{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin:16px 0 0;
    }
    .quote-action-btn{
      border:1px solid var(--border);
      background:#fff;
      padding:10px 16px;
      border-radius:10px;
      font-weight:600;
      font-size:13px;
      cursor:pointer;
      color:#334155;
      transition:.15s ease;
    }
    .quote-action-btn:hover{
      background:#f1f5f9;
      border-color:#94a3b8;
      transform:translateY(-1px);
    }
    .quote-action-btn.danger{
      color:#7f1d1d;
      border-color:#fecaca;
      background:#fef2f2;
    }
    .quote-action-btn.danger:hover{
      background:#fee2e2;
      border-color:#fca5a5;
    }
    .copy-feedback{
      font-size:13px;
      font-weight:600;
      margin-left:auto;
      transition:opacity .2s ease;
      min-height:18px;
    }

    /* Panel de resumen (cuota + permanencia) */
    .summary-panel{
      margin-top:24px;
      background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
      border:2px solid var(--border);
      border-radius:16px;
      padding:20px 24px;
    }
    .summary-panel h3{
      margin:0 0 14px;
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--muted);
      text-align:center;
    }
    .summary-row{
      display:flex;
      justify-content:space-between;
      padding:8px 0;
      border-bottom:1px dashed #e2e8f0;
      font-size:14px;
    }
    .summary-row:last-child{ border-bottom:none; }
    .summary-row.big{
      font-size:18px;
      font-weight:800;
      color:#1e293b;
      padding:14px 0 6px;
      border-top:2px solid #cbd5e1;
      border-bottom:none;
      margin-top:6px;
    }
    .summary-row .v{
      font-weight:700;
      font-variant-numeric:tabular-nums;
    }
    .summary-row.big .v{
      color:#059669;
      font-size:22px;
    }