/* ============================================================
   BIS CCL Cat 5 Pt 2 — Government End-User Decision Tool
   styles.css — Todos los estilos visuales de la herramienta
   Vinculado desde: index.html
   EAR §740.17 · Part 744 · Category 5 Part 2
============================================================ */

/* ── Reset & Base ──────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
     background:#F4F6FA;color:#272320;min-height:100vh;display:flex;flex-direction:column}

/* ── Layout ────────────────────────────────────────────── */
.max-w{max-width:1280px;margin:0 auto;padding:0 24px}
.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.flex-wrap{flex-wrap:wrap}
.w-full{width:100%}
.grid-2{display:grid;grid-template-columns:1fr 320px;gap:24px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ── Colors ─────────────────────────────────────────────── */
:root{
  --navy:#1A3F6F;--green:#1B7B34;--red:#C0392B;--gray:#5A6472;
  --orange:#D97706;--white:#fff;--bg:#F4F6FA;
  --green-light:#f0fdf4;--green-border:#1B7B34;
  --red-light:#fef2f2;--red-border:#C0392B;
  --orange-light:#fffbeb;--orange-border:#D97706;
  --card-bg:#fff;--muted:#6b7280;--text:#272320;
}

/* ── Header ─────────────────────────────────────────────── */
header{background:var(--navy);padding:20px 0}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;
              justify-content:space-between;gap:12px}
.header-title{color:#fff;font-size:1.25rem;font-weight:700;line-height:1.3}
.header-sub{color:#a8c8f0;font-size:.8rem;margin-top:4px}
.bis-badge{display:inline-flex;align-items:center;gap:6px;
           background:rgba(255,255,255,.15);color:#fff;font-size:.75rem;
           font-weight:500;padding:6px 12px;border-radius:8px;
           text-decoration:none;border:1px solid rgba(255,255,255,.2)}
.bis-badge:hover{background:rgba(255,255,255,.25)}

/* Progress */
.progress-row{display:flex;justify-content:space-between;
              font-size:.75rem;color:#a8c8f0;margin:14px 0 6px}
.progress-track{width:100%;height:6px;background:rgba(255,255,255,.2);
                border-radius:99px;overflow:hidden}
.progress-fill{height:6px;background:#60a5fa;border-radius:99px;
               transition:width .5s ease}

/* ── Main ───────────────────────────────────────────────── */
main{flex:1;padding:28px 0}

/* ── Cards ──────────────────────────────────────────────── */
.card{background:var(--card-bg);border-radius:16px;padding:32px;
      box-shadow:0 4px 20px rgba(0,0,0,.07);
      animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.card-green{background:var(--green-light);border:2px solid var(--green-border)}
.card-red{background:var(--red-light);border:2px solid var(--red-border)}
.card-orange{background:var(--orange-light);border:2px solid var(--orange-border)}

/* ── Step badge ─────────────────────────────────────────── */
.step-badge{display:inline-block;background:#dbeafe;color:#1e40af;
            font-size:.7rem;font-weight:700;padding:3px 10px;
            border-radius:99px;margin-bottom:14px}

/* ── Typography ─────────────────────────────────────────── */
.q-title{font-size:1.2rem;font-weight:700;color:#111;margin-bottom:8px;line-height:1.4}
.q-guide{font-size:.85rem;color:var(--muted);font-style:italic;margin-bottom:4px}
.q-sub{font-size:.78rem;color:#9ca3af;font-style:italic;margin-bottom:18px}
.section-title{font-size:.85rem;font-weight:600;color:#374151;
               display:flex;align-items:center;gap:6px;margin-bottom:10px}

/* ── Answer buttons ─────────────────────────────────────── */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.answer-btn{flex:1;min-width:200px;padding:16px 20px;border-radius:12px;
            font-size:.9rem;font-weight:600;cursor:pointer;border:2px solid;
            text-align:center;transition:transform .15s,box-shadow .15s;
            background:none;min-height:52px}
.answer-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.1)}
.answer-btn:active{transform:translateY(0)}
.btn-green{background:#f0fdf4;border-color:#86efac;color:#166534}
.btn-green:hover{background:#dcfce7;border-color:#4ade80}
.btn-red{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.btn-red:hover{background:#fee2e2;border-color:#f87171}
.btn-orange{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.btn-orange:hover{background:#ffedd5}
.btn-gray-green{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.btn-gray-red{background:#fff1f2;border-color:#fecdd3;color:#881337}

/* ── Action buttons ─────────────────────────────────────── */
.action-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
            border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;
            border:none;transition:background .2s,transform .15s;min-height:44px}
.action-btn:hover{transform:translateY(-1px)}
.btn-primary{background:#1e3f6e;color:#fff}
.btn-primary:hover{background:#1a3560}
.btn-secondary{background:#e5e7eb;color:#374151}
.btn-secondary:hover{background:#d1d5db}

/* ── Accordion ──────────────────────────────────────────── */
.accordion-toggle{display:flex;align-items:center;gap:6px;background:none;border:none;
                  font-size:.85rem;font-weight:500;color:#2563eb;cursor:pointer;
                  padding:0;margin-bottom:10px}
.accordion-toggle:hover{color:#1d4ed8}
.acc-icon{transition:transform .3s;display:inline-block}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-body.open{max-height:600px}
.examples-box{background:#f8fafc;border-radius:10px;padding:14px}
.ex-label-green{font-size:.75rem;font-weight:600;color:var(--green);margin-bottom:4px}
.ex-label-red{font-size:.75rem;font-weight:600;color:var(--red);margin-bottom:4px}
.ex-list{list-style:none;font-size:.78rem;color:#4b5563}
.ex-list li{padding:1px 0}
.ex-list li::before{content:"• ";color:inherit}

/* ── Evidence / Flag boxes ──────────────────────────────── */
.evidence-box{border:2px dashed var(--orange);background:var(--orange-light);
              border-radius:10px;padding:14px;margin-top:14px}
.evidence-title{font-size:.78rem;font-weight:600;color:var(--orange);
                margin-bottom:8px;display:flex;align-items:center;gap:6px}
.evidence-list{list-style:none;font-size:.76rem;color:#374151}
.evidence-list li{padding:2px 0;display:flex;align-items:flex-start;gap:6px}
.evidence-list li::before{content:"›";color:var(--orange);font-weight:700;flex-shrink:0}

.redflag-box{background:#fef2f2;border:2px solid var(--red);
             border-radius:10px;padding:14px;margin-bottom:14px}
.redflag-title{font-size:.82rem;font-weight:700;color:var(--red);margin-bottom:8px}
.redflag-list{list-style:none;font-size:.76rem;color:#7f1d1d}
.redflag-list li{padding:2px 0}
.redflag-list li::before{content:"⚠ ";color:var(--red)}

.sanctions-box{background:#fef2f2;border:2px solid var(--red);
               border-radius:10px;padding:14px;margin-bottom:14px}
.sanctions-text{font-size:.84rem;font-weight:600;color:var(--red);line-height:1.5}

/* ── Back button ────────────────────────────────────────── */
.back-wrap{margin-top:18px;padding-top:14px;border-top:1px solid #e5e7eb}
.back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;
          font-size:.85rem;font-weight:500;color:var(--muted);cursor:pointer;padding:4px 0;
          min-height:44px}
.back-btn:hover{color:#111}

/* ── Trail ──────────────────────────────────────────────── */
#path-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
            margin-bottom:14px;font-size:.75rem;min-height:28px}
.trail-badge{display:inline-flex;align-items:center;padding:3px 10px;
             border-radius:99px;font-size:.72rem;font-weight:500}
.trail-green{background:#dcfce7;color:#166534}
.trail-red{background:#fee2e2;color:#991b1b}
.trail-gray{background:#f1f5f9;color:#475569}
.trail-orange{background:#fef3c7;color:#92400e}
.trail-current{background:#dbeafe;color:#1e40af;font-weight:600}
.trail-arrow{color:#9ca3af}

/* ── Result: icon circle ───────────────────────────────── */
.result-icon{width:56px;height:56px;border-radius:50%;
             display:flex;align-items:center;justify-content:center;flex-shrink:0;
             font-size:1.6rem}
.icon-green{background:#dcfce7}
.icon-red{background:#fee2e2}
.icon-orange{background:#fef3c7}
.result-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.result-title{font-size:1.35rem;font-weight:700;line-height:1.3}
.result-title-green{color:#14532d}
.result-title-red{color:#7f1d1d}
.result-title-orange{color:#7c2d12}
.result-date{font-size:.72rem;color:#9ca3af;margin-top:3px}
.result-body{font-size:.88rem;color:#374151;line-height:1.6;margin-bottom:8px}
.result-ref{font-size:.74rem;color:var(--muted);margin-bottom:18px;font-style:italic}

/* ── Checklist (next steps) ─────────────────────────────── */
.checklist{list-style:none;margin-bottom:22px}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;
              border-bottom:1px solid rgba(0,0,0,.05)}
.checklist li:last-child{border-bottom:none}
.checklist input[type="checkbox"]{width:17px;height:17px;flex-shrink:0;
                                   margin-top:1px;cursor:pointer;accent-color:var(--navy)}
.checklist label{font-size:.85rem;color:#374151;cursor:pointer;line-height:1.5}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar-card{background:#fff;border-radius:16px;padding:20px;
              box-shadow:0 4px 20px rgba(0,0,0,.07);
              position:sticky;top:20px}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;
                cursor:pointer;user-select:none}
.sidebar-title{font-size:.85rem;font-weight:600;color:#374151;
               display:flex;align-items:center;gap:6px}
.sidebar-toggle-icon{transition:transform .3s;font-size:.9rem;color:#9ca3af}
.sidebar-body{margin-top:14px}
.sidebar-checklist{list-style:none}
.sidebar-checklist li{display:flex;align-items:flex-start;gap:8px;padding:4px 0;
                       border-bottom:1px solid #f3f4f6}
.sidebar-checklist li:last-child{border-bottom:none}
.sidebar-checklist input[type="checkbox"]{width:15px;height:15px;flex-shrink:0;
                                           margin-top:2px;accent-color:var(--navy);cursor:pointer}
.sidebar-checklist label{font-size:.74rem;color:#4b5563;cursor:pointer;line-height:1.4}

/* ── Escalation note ────────────────────────────────────── */
.escalation-note{background:#fecaca;border:1px solid #fca5a5;border-radius:10px;
                 padding:10px 14px;margin-bottom:14px;
                 font-size:.78rem;font-weight:600;color:#7f1d1d;
                 display:flex;align-items:center;gap:8px}

/* ── Button row (result) ────────────────────────────────── */
.result-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ── Footer ─────────────────────────────────────────────── */
footer{background:#f8f9fb;border-top:1px solid #e5e7eb;padding:24px 0;text-align:center}
.footer-text{font-size:.73rem;color:#6b7280;line-height:1.6}
.footer-link{color:#2563eb;text-decoration:none;font-size:.73rem}
.footer-link:hover{text-decoration:underline}
.footer-note{font-size:.7rem;color:#9ca3af;margin-top:4px}

/* ── Print ──────────────────────────────────────────────── */
@media print{
  .no-print{display:none!important}
  body{background:#fff!important}
  .card,.card-green,.card-red{box-shadow:none!important;
                               border:1px solid #e5e7eb!important;
                               break-inside:avoid}
  .print-only{display:block!important}
}
.print-only{display:none}
.print-footer{margin-top:18px;padding-top:12px;border-top:1px solid #e5e7eb;
              font-size:.72rem;color:#6b7280;font-style:italic}