/* ============================================================
   Sistema Cotizador JBP — estilos compartidos
   ============================================================ */
:root{
  --navy:#0c2e63; --navy2:#0a2650; --azul:#14477f;
  --verde:#2e9e4f; --verde2:#25823f;
  --celeste:#eef4fb; --tinta:#1f2733; --gris:#5b6472; --linea:#e2e8f0;
}
*{box-sizing:border-box}
body{
  font-family:"Inter",system-ui,Arial,sans-serif;
  background:#f4f6fa;color:var(--tinta);min-height:100vh;margin:0;
}
h1,h2,h3,h4,h5,.h3{font-family:"Poppins",sans-serif;color:var(--navy)}

/* ===== Menú lateral ===== */
#sidebar{
  width:240px;min-height:100vh;position:fixed;top:0;left:0;
  background:var(--navy);color:#cdd8ec;
}
#sidebar .brand{
  display:flex;align-items:center;gap:11px;
  padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.10);
}
#sidebar .brand .logo{
  width:40px;height:40px;border-radius:8px;background:var(--verde);
  color:#fff;display:grid;place-items:center;font-family:"Poppins";font-weight:700;font-size:1rem;
}
#sidebar .brand b{color:#fff;font-family:"Poppins";font-size:1rem;line-height:1.1}
#sidebar .brand span{display:block;font-size:.68rem;color:#9fb0cf;letter-spacing:1px;text-transform:uppercase}
#sidebar .grupo{text-transform:uppercase;font-size:.7rem;color:#7f92b8;padding:16px 20px 6px;letter-spacing:1px}
#sidebar a{
  display:block;color:#cdd8ec;text-decoration:none;
  padding:.7rem 20px;border-left:3px solid transparent;font-weight:500;
}
#sidebar a:hover{background:var(--navy2);color:#fff}
#sidebar a.active{background:var(--navy2);color:#fff;border-left-color:var(--verde)}

#contenido{margin-left:240px;padding:1.7rem 2rem;min-height:calc(100vh - 46px)}
.page-title{margin:0 0 1.2rem;font-size:1.6rem}

/* ===== Tema para las grillas (Bootstrap) ===== */
.card{border:1px solid var(--linea);border-radius:12px;box-shadow:0 2px 10px rgba(12,46,99,.05)}
.table>thead th{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}
.table-hover>tbody>tr:hover>*{background:var(--celeste)}
.btn-primary{background:var(--verde);border-color:var(--verde)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--verde2)!important;border-color:var(--verde2)!important}
.btn-success{background:var(--verde);border-color:var(--verde)}
.btn-success:hover{background:var(--verde2);border-color:var(--verde2)}
.badge.bg-success{background:var(--verde)!important}
.form-control:focus,.form-select:focus{border-color:var(--verde);box-shadow:0 0 0 .2rem rgba(46,158,79,.20)}
.modal-title{font-family:"Poppins";color:var(--navy)}

/* ===== Dashboard ===== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:20px 22px;box-shadow:0 2px 10px rgba(12,46,99,.05)}
.kpi .lbl{font-size:.82rem;color:var(--gris);font-weight:600}
.kpi .val{font-family:"Poppins";font-weight:700;font-size:1.9rem;margin-top:4px}
.kpi.v1 .val{color:var(--navy)} .kpi.v2 .val{color:var(--verde)}
.kpi.v3 .val{color:var(--azul)} .kpi.v4 .val{color:#7a4dcc}

.dash-row{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.panel{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:20px 22px;box-shadow:0 2px 10px rgba(12,46,99,.05)}
.panel h3{font-size:1.1rem;margin:0 0 14px}
.panel img{width:100%;height:auto;display:block}

.disc{display:grid;gap:12px}
.disc .row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px;font-size:.9rem}
.disc .bar{height:14px;border-radius:4px;background:var(--verde)}

.mov{list-style:none;margin:0;padding:0}
.mov li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--linea);font-size:.9rem}
.mov li:last-child{border-bottom:0}
.mov .tag{font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:20px}
.tag.ok{background:#e1f5ea;color:var(--verde2)}
.tag.env{background:#e6effb;color:var(--azul)}
.tag.edit{background:#fef2e0;color:#8a5a0b}
.tag.no{background:#fbe7e6;color:#b3261e}

/* ===== Pie de página ===== */
.app-footer{
  margin-left:240px;background:var(--navy2);color:#9fb0cf;
  text-align:center;padding:14px;font-size:.85rem;letter-spacing:.3px;
}

@media(max-width:820px){
  #sidebar{width:100%;min-height:auto;position:static}
  #contenido,.app-footer{margin-left:0}
  .kpis,.dash-row{grid-template-columns:1fr}
}