:root{
    --pqr-primario:#0b5394;
    --pqr-oscuro:#083152;
    --pqr-acento:#f2a900;
}
html,body{min-height:100%;}
body{display:flex;flex-direction:column;min-height:100vh;background:#f4f6f9;color:#1f2d3d;}
a{color:var(--pqr-primario);}
.navbar .nav-link.active{font-weight:600;text-decoration:underline;}
.hero{
    background:linear-gradient(135deg,var(--pqr-primario),var(--pqr-oscuro));
    color:#fff;border-radius:1rem;
}
.card-accion{transition:transform .15s ease, box-shadow .15s ease;border:none;}
.card-accion:hover{transform:translateY(-4px);box-shadow:0 .75rem 1.5rem rgba(8,49,82,.15);}
.card-accion .icono{
    width:56px;height:56px;border-radius:.85rem;display:grid;place-items:center;
    font-size:1.6rem;background:rgba(11,83,148,.1);color:var(--pqr-primario);
}
.btn-primary{background:var(--pqr-primario);border-color:var(--pqr-primario);}
.btn-primary:hover{background:var(--pqr-oscuro);border-color:var(--pqr-oscuro);}
.text-primary{color:var(--pqr-primario)!important;}
.timeline{position:relative;padding-left:1.75rem;}
.timeline::before{content:"";position:absolute;left:.55rem;top:.25rem;bottom:.25rem;width:2px;background:#dbe2ea;}
.timeline-item{position:relative;margin-bottom:1.1rem;}
.timeline-item::before{
    content:"";position:absolute;left:-1.45rem;top:.2rem;width:.85rem;height:.85rem;
    border-radius:50%;background:var(--pqr-primario);box-shadow:0 0 0 3px #fff;
}
.rating-estrellas{direction:rtl;display:inline-flex;gap:.25rem;font-size:1.9rem;}
.rating-estrellas input{display:none;}
.rating-estrellas label{color:#d0d5dd;cursor:pointer;transition:color .1s;}
.rating-estrellas label:hover,
.rating-estrellas label:hover ~ label,
.rating-estrellas input:checked ~ label{color:var(--pqr-acento);}
.paso-num{width:32px;height:32px;border-radius:50%;background:var(--pqr-primario);color:#fff;display:grid;place-items:center;font-weight:600;}
.req::after{content:" *";color:#dc3545;}

/* --- Mockups de ayuda ("pantallazos" ilustrativos) --- */
.mock{border:1px solid #d7deea;border-radius:.6rem;overflow:hidden;box-shadow:0 .5rem 1rem rgba(8,49,82,.08);background:#fff;}
.mock-bar{background:#eef2f7;border-bottom:1px solid #d7deea;padding:.4rem .6rem;display:flex;align-items:center;gap:.35rem;}
.mock-bar .dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;display:inline-block;}
.mock-bar .dot.r{background:#f87171;} .mock-bar .dot.y{background:#fbbf24;} .mock-bar .dot.g{background:#34d399;}
.mock-bar .url{flex:1;background:#fff;border:1px solid #d7deea;border-radius:.4rem;font-size:.72rem;color:#64748b;padding:.1rem .5rem;margin-left:.4rem;}
.mock-nav{background:var(--pqr-primario);color:#fff;padding:.45rem .7rem;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:.5rem;}
.mock-nav .sp{margin-left:auto;font-weight:400;opacity:.9;font-size:.72rem;}
.mock-body{padding:.9rem;font-size:.8rem;}
.mock-field{background:#f8fafc;border:1px solid #dbe2ea;border-radius:.4rem;padding:.35rem .5rem;margin-bottom:.4rem;color:#475569;font-size:.75rem;}
.mock-field .lbl{display:block;font-size:.65rem;color:#94a3b8;margin-bottom:.05rem;}
.mock-btn{display:inline-block;background:var(--pqr-primario);color:#fff;border-radius:.4rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600;}
.mock-btn.g{background:#16a34a;} .mock-btn.w{background:#d97706;} .mock-btn.o{background:#fff;color:var(--pqr-primario);border:1px solid var(--pqr-primario);}
.paso-guia{counter-reset:pg;}
.paso-guia .paso{position:relative;padding-left:2.4rem;margin-bottom:1rem;}
.paso-guia .paso::before{counter-increment:pg;content:counter(pg);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--pqr-primario);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;}
.ayuda-toc a{display:block;padding:.3rem .5rem;border-radius:.4rem;color:#334155;text-decoration:none;font-size:.9rem;}
.ayuda-toc a:hover{background:#eef2f7;}