/* ══════════════════════════════════════════════
       ROADMAP INTERACTIVO — estilos del componente
       (hero, configurador, fases, tareas, sidebar)
    ══════════════════════════════════════════════ */

    /* HERO */
    .rm-hero{ padding:5rem 0 3rem; text-align:center; border-bottom:1px solid var(--border); }
    .rm-hero-label{ font-family:var(--font-mono); font-size:.75rem; font-weight:700; text-transform:none; letter-spacing:.07em; color:var(--accent); margin-bottom:.75rem; }
    .rm-hero h1{ max-width:760px; margin:0 auto .75rem; line-height:1.2; }
    .rm-hero h1 span{ color:var(--accent); }
    .rm-hero-desc{ color:var(--ink-muted); font-size:1rem; max-width:640px; margin:0 auto; line-height:1.6; }

    /* CONFIGURADOR */
    .config-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem; background:var(--bg-card); border:1.5px solid var(--border); border-radius:8px; padding:1.25rem 1.5rem; margin:2rem 0 1rem; }
    .config-field{ display:flex; flex-direction:column; gap:.35rem; flex:1 1 160px; min-width:150px; }
    .config-label{ font-size:.75rem; font-weight:600; color:var(--ink-muted); }
    .config-select{ padding:.6rem .75rem; border:1.5px solid var(--border-dark); border-radius:8px; font-size:.85rem; font-family:var(--font-sans); color:var(--ink); background:var(--bg-card); }
    .config-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
    .btn-apply{ padding:.65rem 1.25rem; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:.85rem; font-weight:700; cursor:pointer; white-space:nowrap; }
    .btn-apply:hover{ background:var(--accent-dark); }
    .btn-download-pdf{ padding:.65rem 1rem; border:1.5px solid var(--border-dark); border-radius:8px; font-size:.85rem; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap; background:var(--bg-card,#fff); font-family:inherit; cursor:pointer; }
    .btn-download-pdf:hover{ border-color:var(--accent); color:var(--accent-dark); }
    .btn-unlock-cta{ padding:.65rem 1.25rem; background:#3347d6; color:#fff; border:none; border-radius:8px; font-size:.85rem; font-weight:700; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; font-family:inherit; }
    .btn-unlock-cta:hover{ background:#3347d6; }
    .purchase-confirm-banner{ background:#f4f6f6; border:1.5px solid #9aa6f2; border-radius:6px; padding:1.1rem 1.35rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
    .purchase-confirm-banner .pcb-icon{ font-size:1.5rem; }
    .purchase-confirm-banner .pcb-text{ flex:1; min-width:200px; font-size:.88rem; color:#047857; line-height:1.5; }
    .purchase-confirm-banner .pcb-text strong{ display:block; font-size:.95rem; margin-bottom:.15rem; }

    .download-hint{ display:flex; align-items:flex-start; gap:.6rem; background:var(--accent-light); border:1px solid var(--accent-muted); border-radius:5px; padding:.85rem 1.1rem; font-size:.82rem; color:var(--ink-light); line-height:1.5; margin-bottom:2rem; }

    /* LAYOUT PRINCIPAL + SIDEBAR */
    .rm-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:2rem; align-items:start; }
    @media (max-width:900px){ .rm-layout{ grid-template-columns:1fr; } }
    .rm-sidebar{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow-y:auto; }
    @media (max-width:900px){ .rm-sidebar{ position:static; max-height:none; overflow:visible; } }

    /* RESUMEN / ESTADÍSTICAS */
    .rm-summary{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.75rem; margin-bottom:1.25rem; }
    @media (max-width:640px){ .rm-summary{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
    .rm-stat{ background:var(--bg-card); border:1.5px solid var(--border); border-radius:6px; padding:1rem; text-align:center; }
    .rm-stat-num{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--ink); }
    .rm-stat.stat-done .rm-stat-num{ color:var(--success); }
    .rm-stat.stat-warn .rm-stat-num{ color:var(--error); }
    .rm-stat-label{ font-size:.75rem; color:var(--ink-muted); margin-top:.25rem; line-height:1.3; }

    /* BARRA DE PROGRESO GLOBAL */
    .rm-progress-wrap{ margin-bottom:1.5rem; }
    .rm-progress-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
    .rm-progress-label{ font-size:.82rem; font-weight:600; color:var(--ink); }
    .rm-progress-pct{ font-family:var(--font-mono); font-size:.82rem; font-weight:700; color:var(--accent); }
    .rm-progress-track{ height:8px; background:var(--bg-soft); border-radius:3px; overflow:hidden; }
    .rm-progress-fill{ height:100%; background:var(--accent); border-radius:3px; transition:width .3s ease; }

    /* FASES */
    .rm-phases{ display:flex; flex-direction:column; gap:.85rem; }
    .rm-phase{ background:var(--bg-card); border:1.5px solid var(--border); border-left:4px solid var(--border-dark); border-radius:6px; overflow:hidden; }
    .rm-phase.phase-active{ border-left-color:var(--accent); }
    .rm-phase.phase-done{ border-left-color:var(--success); }
    .rm-phase.phase-next{ border-left-color:#12212a; }
    .rm-phase.phase-future{ border-left-color:var(--border-dark); }

    .rm-phase-header{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.35rem; cursor:pointer; }
    .phase-num{ width:32px; height:32px; border-radius:50%; background:var(--bg-soft); color:var(--ink-muted); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-mono); font-size:.85rem; flex-shrink:0; }
    .rm-phase.phase-active .phase-num{ background:var(--accent); color:#fff; }
    .rm-phase.phase-done .phase-num{ background:var(--success); color:#fff; }
    .phase-meta{ flex:1; min-width:0; }
    .phase-title{ font-size:1rem; font-weight:700; color:var(--ink); margin:0; }
    .phase-subtitle{ font-size:.8rem; color:var(--ink-muted); margin-top:.2rem; }
    .phase-badge{ font-size:.75rem; font-weight:700; padding:.3rem .7rem; border-radius:3px; background:var(--bg-soft); color:var(--ink-muted); white-space:nowrap; flex-shrink:0; }
    .rm-phase.phase-active .phase-badge{ background:var(--accent-light); color:var(--accent-dark); }
    .rm-phase.phase-done .phase-badge{ background:#dbe3e6; color:#047857; }
    .rm-phase.phase-next .phase-badge{ background:#dbe3e6; color:#12212a; }
    .phase-chevron{ color:var(--ink-faint); transition:transform .2s ease; flex-shrink:0; }
    .rm-phase.open .phase-chevron{ transform:rotate(180deg); }

    .rm-phase-body{ display:none; border-top:1px solid var(--border); }
    .rm-phase.open .rm-phase-body{ display:block; }
    .phase-inner{ padding:1.25rem 1.35rem; }
    .rm-guides{ margin-top:1.1rem; padding-top:1rem; border-top:1px dashed var(--border); }
    .rm-guides-h{ font-size:.82rem; font-weight:700; color:var(--ink-muted); margin:0 0 .6rem; }
    .rm-guides ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.4rem .9rem; }
    .rm-guides a{ display:block; font-size:.86rem; line-height:1.35; color:var(--accent-dark,var(--accent)); text-decoration:none; padding:.3rem 0; }
    .rm-guides a:hover{ text-decoration:underline; }


    /* TAREAS */
    .task-list{ display:flex; flex-direction:column; gap:.6rem; }
    .task-item{ display:flex; align-items:flex-start; gap:.75rem; padding:.75rem .9rem; border:1px solid var(--border); border-radius:5px; cursor:pointer; transition:border-color .15s, background .15s; }
    .task-item:hover{ border-color:var(--accent); background:var(--accent-light); }
    .task-check{ width:20px; height:20px; border-radius:6px; border:2px solid var(--border-dark); flex-shrink:0; margin-top:.1rem; position:relative; }
    .task-item.task-checked .task-check{ background:var(--success); border-color:var(--success); }
    .task-item.task-checked .task-check::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; font-weight:700; line-height:1; }
    .task-item.task-checked .task-title{ text-decoration:line-through; color:var(--ink-faint); }
    .task-content{ flex:1; min-width:0; }
    .task-title{ font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:.15rem; }
    .task-desc{ font-size:.78rem; color:var(--ink-muted); line-height:1.5; margin-bottom:.4rem; }
    .task-tags{ display:flex; gap:.35rem; flex-wrap:wrap; }
    .task-tag{ font-size:.75rem; font-weight:700; padding:.2rem .55rem; border-radius:3px; background:var(--bg-soft); color:var(--ink-muted); }
    .task-tag.tag-aiact{ background:var(--accent-light); color:var(--accent-dark); }
    .task-tag.tag-dg{ background:#dbe3e6; color:#3347d6; }
    .task-tag.tag-nis2{ background:#dbe3e6; color:#12212a; }
    .task-tag.tag-rgpd{ background:#f4f6f6; color:#dc2626; }
    .task-tag.tag-iso{ background:#e8ebfb; color:#2536b0; }
    .task-tag.tag-rrhh{ background:#e8ebfb; color:#566770; }
    .task-tag.tag-tech{ background:#e8ebfb; color:#12212a; }
    .task-effort{ font-size:.75rem; color:var(--ink-faint); font-family:var(--font-mono); white-space:nowrap; flex-shrink:0; margin-top:.15rem; }
    .task-resource-link{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.4rem; font-size:.75rem; color:var(--ink-faint); text-decoration:none; border-bottom:1px dotted var(--ink-faint); padding-bottom:1px; }
    .task-resource-link:hover{ color:var(--accent-dark); border-bottom-color:var(--accent-dark); }
    .task-resource-soon{ cursor:default; opacity:.55; border-bottom-style:dashed; }
    .task-resource-soon:hover{ color:var(--ink-faint); border-bottom-color:var(--ink-faint); }

    /* SIDEBAR: URGENCIA */
    .urgency-box{ background:var(--header-bg); border-radius:8px; padding:1.25rem 1.4rem; }
    .urgency-title{ font-size:.85rem; font-weight:700; color:#dbe3e6; margin-bottom:.5rem; }
    .urgency-body{ font-size:.8rem; color:rgba(255,255,255,.65); line-height:1.5; }
    .urgency-countdown{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:#fff; margin:.4rem 0; }

    /* SIDEBAR: TARJETAS */
    .sidebar-card{ background:var(--bg-card); border:1.5px solid var(--border); border-radius:8px; padding:1.1rem 1.25rem; }
    .sidebar-title{ font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:.75rem; }
    .pr-chip{ display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem; border:1px solid var(--border); border-radius:8px; font-size:.8rem; font-weight:600; color:var(--ink-light); text-decoration:none; transition:border-color .15s, background .15s; }
    .pr-chip:hover{ border-color:var(--accent); background:var(--accent-light); color:var(--accent-dark); }
    .pr-price{ font-family:var(--font-mono); font-weight:700; color:var(--accent); }

    /* IMPRESIÓN / PDF — se activa solo al imprimir (botón ⬇ PDF) */
    @media print {
      header, .config-bar, .download-hint, .rm-sidebar, #ia-btn, #ia-panel,
      #cookie-banner, section:has(.btn-path-primary), footer, .phase-chevron,
      #faq-section, #how-it-works, section[style*="padding:2rem 0 3.5rem"] { display:none !important; }
      .rm-layout{ display:block !important; }
      .rm-phase-body{ display:block !important; }
      .task-item{ break-inside: avoid; }
      .rm-phase{ break-inside: avoid; border:1px solid #dbe3e6 !important; }
      body{ background:#fff !important; }
      .bg-grid, .bg-gradient{ display:none !important; }
    }