/* =====================================================================
   SimuladorPMP - Estilos institucionales
   Paleta: azul corporativo #0B2545/#002B49 · acento rojo #D90429 ·
           fondo gris #F8F9FA · texto #212529 · blanco #FFFFFF
   ===================================================================== */

:root {
    --azul-institucional: #0B2545;
    --azul-oscuro: #002B49;
    --azul-medio: #13315C;
    --rojo-accent: #D90429;
    --rojo-hover: #b40322;
    --fondo-gris: #F8F9FA;
    --texto: #212529;
    --gris-suave: #e9ecef;
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--texto); background: var(--fondo-gris); }

.bg-institucional { background: linear-gradient(135deg, var(--azul-institucional), var(--azul-oscuro)); }
.text-accent { color: var(--rojo-accent); }
.brand-mark { display:inline-flex; }
.navbar-brand .brand-mark i { color: var(--rojo-accent); font-size:1.4rem; }
.btn-accent { background: var(--rojo-accent); border-color: var(--rojo-accent); color:#fff; }
.btn-accent:hover, .btn-accent:focus { background: var(--rojo-hover); border-color: var(--rojo-hover); color:#fff; }
.btn-outline-accent { border-color: var(--rojo-accent); color: var(--rojo-accent); }
.btn-outline-accent:hover { background: var(--rojo-accent); color:#fff; }
.btn-institucional { background: var(--azul-institucional); border-color: var(--azul-institucional); color:#fff; }
.btn-institucional:hover, .btn-institucional:focus { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color:#fff; }
.admin-nav a.active { background: var(--rojo-accent); color:#fff; }

/* ---------------- Landing ---------------- */
.hero-institucional {
    background: radial-gradient(1200px 600px at 85% -10%, #1b3a6b 0%, transparent 60%),
                linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-institucional) 60%, #081a33 100%);
}
.badge-hero { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:.45rem 1rem; border-radius:50rem; font-size:.85rem; }
.badge-section { background: var(--rojo-accent); color:#fff; padding:.35rem 1rem; border-radius:50rem; font-size:.8rem; font-weight:600; letter-spacing:.03em; }
.hero-card { border-radius:1.25rem; overflow:hidden; transform: rotate(1deg); }
.avatar-score { width:48px;height:48px;border-radius:50%;background:var(--azul-institucional);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.score-ring { --score:86; width:150px;height:150px;border-radius:50%;
    background: conic-gradient(var(--rojo-accent) calc(var(--score)*1%), var(--gris-suave) 0);
    display:flex;align-items:center;justify-content:center; }
.score-inner { width:118px;height:118px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.trust-item { padding:.5rem; }
.plan-card { border-radius:1rem; position:relative; transition:transform .15s ease, box-shadow .15s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(11,37,69,.12) !important; }
.plan-destacado { border:2px solid var(--rojo-accent); }
.plan-ribbon { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--rojo-accent); color:#fff; font-size:.75rem; font-weight:700; padding:.3rem .9rem; border-radius:50rem; white-space:nowrap; }
.plan-precio { font-size:2rem; font-weight:800; color:var(--azul-institucional); }
.plan-features li { padding:.3rem 0; display:flex; gap:.5rem; }
.tipo-icon { width:48px;height:48px;border-radius:.8rem; background:rgba(11,37,69,.08); color:var(--azul-institucional); display:flex;align-items:center;justify-content:center;font-size:1.4rem; flex-shrink:0; }
.paso-num { width:56px;height:56px;margin:0 auto;border-radius:50%;background:var(--azul-institucional);color:#fff;font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center; }
.cta-institucional { background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-institucional)); }
.footer-institucional { background:#081a33; color:rgba(255,255,255,.8); }

/* ---------------- Auth ---------------- */
.auth-card { border-radius:1rem; }
.auth-logo { width:64px;height:64px;border-radius:50%;background:var(--azul-institucional);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem; }
.auth-logo i { color: var(--rojo-accent); }

/* ---------------- Dashboard ---------------- */
.stat-card { border-radius:1rem; }
.stat-card .stat-icon { width:52px;height:52px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.sim-card { border-radius:1rem; transition:transform .15s; }
.sim-card:hover { transform:translateY(-3px); }
.sim-card .sim-icon { width:56px;height:56px;border-radius:.9rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center; }
.progress { background: var(--gris-suave); }

/* ---------------- Admin ---------------- */
.admin-body { background: var(--fondo-gris); }
.admin-shell { display:flex; min-height:100vh; }
.admin-sidebar { width:250px; background:linear-gradient(180deg, var(--azul-oscuro), var(--azul-institucional)); color:#fff; padding:1.25rem 1rem; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.admin-brand { display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:800; font-size:1.15rem; text-decoration:none; padding:.5rem .75rem; }
.admin-brand:hover { color:#fff; }
.admin-brand .brand-mark i { color: var(--rojo-accent); }
.admin-side-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; opacity:.6; padding:.75rem .75rem .25rem; }
.admin-nav { list-style:none; padding:0; margin:0; }
.admin-nav a { display:flex; align-items:center; gap:.65rem; color:rgba(255,255,255,.82); text-decoration:none; padding:.6rem .75rem; border-radius:.55rem; margin-bottom:.15rem; font-size:.95rem; transition:background .15s; }
.admin-nav a:hover { background:rgba(255,255,255,.1); color:#fff; }
.admin-nav a i { width:1.2rem; text-align:center; }
.admin-side-foot { margin-top:auto; padding-top:1rem; }
.admin-main { flex:1; padding:1.75rem 2rem; min-width:0; }
@media (max-width: 991.98px) { .admin-shell{flex-direction:column;} .admin-sidebar{width:100%;height:auto;position:static;} }

/* ---------------- Examen ---------------- */
.exam-body { background:#fff; }
.exam-topbar { background:linear-gradient(135deg, var(--azul-oscuro), var(--azul-institucional)); }
.timer-box { font-variant-numeric:tabular-nums; }
.timer-danger { color:#fff; background:var(--rojo-accent); border-radius:.6rem; padding:.1rem .6rem; }
.option-label { width:34px;height:34px;border-radius:50%;background:var(--azul-institucional);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0; }
.exam-option { display:flex; gap:.9rem; align-items:flex-start; border:1.5px solid var(--gris-suave); border-radius:.7rem; padding:.85rem 1rem; cursor:pointer; transition:border-color .12s, background .12s; margin-bottom:.6rem; }
.exam-option:hover { border-color:var(--azul-medio); background:#f2f5f9; }
.exam-option.selected { border-color:var(--rojo-accent); background:#fdf2f4; }
.exam-option.selected .option-label { background:var(--rojo-accent); }
.grid-preguntas { display:grid; grid-template-columns:repeat(auto-fill,minmax(2.4rem,1fr)); gap:.4rem; }
.qchip { width:100%; aspect-ratio:1; border-radius:.5rem; border:1.5px solid var(--gris-suave); background:#fff; font-size:.85rem; font-weight:600; display:flex;align-items:center;justify-content:center; cursor:pointer; color:var(--texto); padding:0; }
.qchip.respondida { background:var(--azul-institucional); border-color:var(--azul-institucional); color:#fff; }
.qchip.marcada { border-color:var(--rojo-accent); color:var(--rojo-accent); }
.qchip.respondida.marcada { background:var(--rojo-accent); border-color:var(--rojo-accent); }
.qchip.actual { outline:3px solid var(--azul-medio); outline-offset:1px; }
.review-banner { background:#fff3cd; border:1px solid #ffe69c; border-radius:.6rem; padding:.6rem .9rem; }

/* Resultado */
.donut { --pct:0; width:150px;height:150px;border-radius:50%;
  background:conic-gradient(var(--color-donut,#198754) calc(var(--pct)*1%), #e9ecef 0);
  display:flex;align-items:center;justify-content:center; }
.donut-inner { width:112px;height:112px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center; }

@media print { .no-print{display:none !important;} }

/* Testimonios y FAQ (SEO landing) */
.avatar-inicial { width:40px; height:40px; min-width:40px; border-radius:50%; background:#0B2545; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; }
.faq-cheveron { transition:transform .2s ease; }
details[open] summary .bi-chevron-down { transform:rotate(180deg); transition:transform .2s ease; }

/* Blog (prosa legible para SEO) */
.blog-prose { font-size:1.05rem; line-height:1.85; color:#2b3445; }
.blog-prose h2 { font-size:1.5rem; font-weight:700; margin:2.2rem 0 1rem; color:#0B2545; }
.blog-prose h3 { font-size:1.25rem; font-weight:700; margin:1.8rem 0 .8rem; color:#0B2545; }
.blog-prose h4 { font-size:1.1rem; font-weight:700; margin:1.4rem 0 .6rem; }
.blog-prose p { margin-bottom:1.1rem; }
.blog-prose ul, .blog-prose ol { margin-bottom:1.2rem; padding-left:1.4rem; }
.blog-prose li { margin-bottom:.45rem; }
.blog-prose blockquote { border-left:4px solid #D90429; background:#f8f9fb; padding:.8rem 1.1rem; border-radius:0 .5rem .5rem 0; margin:1.2rem 0; color:#44506b; }
.blog-prose code { background:#eef1f6; padding:.15rem .4rem; border-radius:.3rem; font-size:.92em; }
.blog-prose a { color:#D90429; }

/* Hero badge: mejor legibilidad en móviles */
@media (max-width: 575.98px) {
  .badge-hero { font-size:.72rem; padding:.4rem .75rem; line-height:1.5; display:inline-block; }
}