:root{
  --dtb-azul:#0b3d91;
  --dtb-azul-osc:#081a3a;
  --dtb-verde:#2f6b2d;
  --dtb-crema:#f5f1e8;
  --dtb-texto:#1f2937;
  --dtb-fondo:#f3f6fb;
  --dtb-borde:rgba(15,23,42,.08);
  --dtb-card:#ffffff;
  --dtb-sombra:0 14px 36px rgba(15,23,42,.08);
  --dtb-radius:22px;

  --chart-h-principal:310px;
  --chart-h-normal:280px;
  --chart-h-corto:270px;
}

*{box-sizing:border-box}

html,body{
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--dtb-fondo);
  color:var(--dtb-texto);
  font-size:16px;
}

/* =========================
   NAVBAR
   ========================= */

.navbar{
  background:#495060 !important;
  box-shadow:0 8px 24px rgba(2,6,23,.18);
}

.navbar-brand img{
  height:40px;
  width:auto;
}

.navbar .btn{
  border-radius:12px;
  padding:.48rem .9rem;
  font-weight:700;
}

/* =========================
   HERO GENERAL
   ========================= */

.hero{
  position:relative;
  overflow:hidden;
  min-height:132px;
  background:#0b2a57;
}

.hero-content{
  position:relative;
  z-index:2;
  padding:44px 0 28px;
}

.hero .subtitle{
  font-size:1.05rem;
  color:rgba(255,255,255,.96);
  max-width:900px;
  line-height:1.58;
}

.hero-title{
  font-size:clamp(1.9rem,2.9vw,3rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:#fff;
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:.58rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  color:#fff;
  font-weight:700;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  padding:.68rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:18px;
}

.hero-btn,
.portal-entry-btn{
  border-radius:14px;
  padding:.78rem 1.2rem;
  font-weight:800;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
}

/* fondo visible del edificio para index y comparendos */

.hero .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero:not(.hero-portal) .hero-bg{
  background:
    linear-gradient(90deg,
      rgba(7,24,48,.76) 0%,
      rgba(9,47,98,.50) 46%,
      rgba(9,47,98,.28) 78%,
      rgba(9,47,98,.10) 100%
    ),
    url("../img/dtb_edificio_hero.png") center center / cover no-repeat !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}

/* portal conserva criminalística */

.hero-portal{
  min-height:680px;
}

.hero-portal .hero-bg{
  background:
    linear-gradient(100deg, rgba(5,14,28,.82) 0%, rgba(11,61,145,.50) 34%, rgba(47,107,45,.42) 68%, rgba(5,14,28,.65) 100%),
    url("../img/portal_criminalistica.png") center/cover no-repeat !important;
  opacity:1 !important;
}

.hero-portal .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 18% 22%, rgba(152,193,29,.28) 0%, rgba(152,193,29,0) 28%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.24));
}

.hero-portal::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:150px;
  background:linear-gradient(180deg, rgba(243,246,251,0), rgba(243,246,251,.95) 72%, rgba(243,246,251,1) 100%);
}

.portal-hero-shell{
  max-width:980px;
  margin:0 auto;
  text-align:center;
  padding:18px 18px 8px;
}

.portal-hero-logo{
  width:min(300px,72vw);
  max-width:100%;
  display:block;
  margin:0 auto 18px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.28));
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  padding:12px 16px;
  backdrop-filter:blur(8px);
}

.portal-subtitle-heading{
  margin:0 0 12px;
  color:var(--dtb-crema);
  font-weight:800;
  letter-spacing:.02em;
  font-size:1.2rem;
  text-transform:uppercase;
}

/* =========================
   CONTENIDO Y TARJETAS
   ========================= */

main.container{
  margin-top:26px!important;
  margin-bottom:26px!important;
}

.card{
  background:var(--dtb-card);
  border:1px solid var(--dtb-borde);
  border-radius:var(--dtb-radius);
  box-shadow:var(--dtb-sombra);
}

.filter-panel{
  position:sticky;
  top:18px;
}

.section-title{
  color:#111827;
  font-weight:900;
  letter-spacing:-.01em;
  font-size:1.15rem;
}

.small-note{
  color:#6b7280;
  font-size:.92rem;
  line-height:1.45;
}

.soft-note{
  color:#64748b;
  font-size:.95rem;
  line-height:1.45;
}

/* =========================
   FILTROS
   ========================= */

.obs-filter-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  padding:.9rem !important;
}

.obs-filter-accordion .accordion-item{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px!important;
  overflow:hidden;
  margin-bottom:8px;
  background:#fff;
}

.obs-filter-accordion .accordion-button{
  font-weight:800;
  color:#0f172a;
  background:#f8fafc;
  box-shadow:none!important;
  padding:.62rem .8rem;
  font-size:.9rem;
}

.obs-filter-accordion .accordion-button:not(.collapsed){
  background:#eef4ff;
  color:#0b3d91;
}

.obs-filter-accordion .accordion-body{
  padding:.62rem .72rem;
}

.check-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.18rem;
}

.check-grid-scroll{
  max-height:130px;
  overflow:auto;
  padding-right:2px;
}

.check-item{
  display:flex;
  align-items:flex-start;
  gap:.42rem;
  padding:.16rem 0;
}

.check-item input{
  margin-top:.12rem;
  transform:scale(.95);
}

.check-item label{
  font-size:.84rem;
  color:#334155;
  line-height:1.18;
  cursor:pointer;
}

.check-item input:checked{
  accent-color:#0b3d91;
}

/* =========================
   KPI GENERALES
   ========================= */

.kpi{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-height:76px;
}

.kpi .label{
  font-size:1rem;
  color:#0f172a;
  font-weight:700;
  line-height:1.25;
}

.kpi .value{
  font-size:1.85rem;
  font-weight:900;
  line-height:1.1;
  color:#111827;
  margin-top:4px;
}

.kpi .badge{
  font-size:.72rem;
  font-weight:800;
  background:#eef2ff;
  color:#0b3d91;
}

.kpi.red .value{
  color:#dc2626;
}

.kpi.blue .value{
  color:#0b3d91;
}

/* espacio para comparativos tipo VERSUS */
.kpi-versus,
[data-kpi-sub]{
  display:block;
  min-height:18px;
  font-size:.78rem;
  font-weight:800;
  color:#64748b;
}

.kpi-versus.up,
[data-kpi-sub].up{
  color:#dc2626;
}

.kpi-versus.down,
[data-kpi-sub].down{
  color:#16a34a;
}

.kpi-versus.neutral,
[data-kpi-sub].neutral{
  color:#64748b;
}

/* =========================
   GRÁFICAS SINIESTROS
   ========================= */

.sin-grid-match > [class*="col-"]{
  display:flex;
}

.sin-grid-match .comp-chart-card{
  border-radius:18px;
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
  overflow:hidden;
}

.sin-grid-match .section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-height:78px;
  margin-bottom:10px;
}

.sin-grid-match .section-head > div{
  flex:1;
  min-width:0;
}

.sin-grid-match .section-head .badge{
  font-size:.78rem;
  padding:.45rem .7rem;
  border-radius:999px;
}

.sin-grid-match .chart-box{
  position:relative;
  width:100%;
  min-height:var(--chart-h-normal);
  height:var(--chart-h-normal);
  flex:1 1 auto;
}

.sin-grid-match .chart-box-compact{
  min-height:var(--chart-h-principal);
  height:var(--chart-h-principal);
}

.sin-grid-match .chart-box-short{
  min-height:var(--chart-h-corto);
  height:var(--chart-h-corto);
}

.sin-grid-match canvas{
  width:100% !important;
  height:100% !important;
}

/* mejora de lectura de tarjetas de gráficas */
.comp-chart-card .section-title,
.sin-grid-match .section-title{
  font-size:1.18rem;
  font-weight:900;
}

.comp-chart-card .soft-note,
.sin-grid-match .soft-note{
  font-size:.95rem;
}

/* =========================
   COMPARENDOS · LOOK PREMIUM
   ========================= */

.comp-shell .hero-content{
  padding:40px 0 30px;
}

.comp-shell .hero .subtitle{
  max-width:900px;
}

.comp-shell .comp-info-card,
.comp-shell .comp-report-card,
.comp-shell .comp-chart-card,
.comp-shell .comp-kpi-card{
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 30px rgba(15,23,42,.07);
}

.comp-shell .comp-info-card{
  background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 54%,#f4fbf7 100%);
  position:relative;
  overflow:hidden;
}

.comp-shell .comp-info-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg,#0b3d91,#2f6b2d);
}

.comp-shell .comp-info-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.38rem .8rem;
  border-radius:999px;
  background:#dbeafe;
  color:#0b3d91;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.comp-shell .comp-logo-wrap{
  width:72px;
  height:72px;
  min-width:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}

.comp-shell .comp-logo-wrap img{
  max-width:52px;
  max-height:52px;
  width:auto;
  height:auto;
}

.comp-shell .comp-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.comp-shell .comp-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.5rem .85rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  color:#475569;
  font-size:.9rem;
}

.comp-shell .comp-report-card{
  background:#fff;
}

.comp-shell .comp-report-title{
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:-.02em;
  color:#0f172a;
}

.comp-shell .comp-kpi-card{
  height:100%;
}

.comp-shell .comp-kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.comp-shell .comp-kpi-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.45rem;
  background:linear-gradient(135deg,#dbeafe,#eef5ff);
  color:#0b3d91;
  box-shadow:inset 0 0 0 1px rgba(11,61,145,.08);
}

.comp-shell .comp-kpi-card.kpi-green .comp-kpi-icon{
  background:linear-gradient(135deg,#dcfce7,#f0fdf4);
  color:#166534;
}

.comp-shell .comp-kpi-card.kpi-amber .comp-kpi-icon{
  background:linear-gradient(135deg,#fef3c7,#fff7ed);
  color:#b45309;
}

.comp-shell .comp-kpi-label{
  font-size:1.02rem;
  font-weight:900;
  color:#0f172a;
}

.comp-shell .comp-kpi-value{
  font-size:2rem;
  font-weight:900;
  line-height:1;
  color:#111827;
  margin-top:4px;
}

.comp-shell .comp-kpi-note{
  font-size:.86rem;
  color:#64748b;
  margin-top:6px;
}

.comp-shell .comp-chart-card{
  height:100%;
  background:#fff;
  display:flex;
  flex-direction:column;
}

.comp-shell .comp-chart-card .section-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
  min-height:78px;
}

.comp-shell .comp-chart-card .section-title{
  font-size:1.18rem;
  font-weight:900;
}

.comp-shell .comp-chart-card .soft-note{
  font-size:.95rem;
  color:#64748b;
}

.comp-shell .chart-box{
  position:relative;
  width:100%;
  height:var(--chart-h-normal);
  min-height:var(--chart-h-normal);
  flex:1 1 auto;
}

.comp-shell .chart-box.chart-box-compact{
  height:var(--chart-h-principal);
  min-height:var(--chart-h-principal);
}

.comp-shell .chart-box.chart-box-short{
  height:var(--chart-h-corto);
  min-height:var(--chart-h-corto);
}

.comp-shell canvas{
  width:100% !important;
  height:100% !important;
}

.comp-shell .obs-filter-card .form-control{
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
}

.comp-shell .obs-filter-card .form-control:focus{
  box-shadow:0 0 0 .2rem rgba(11,61,145,.12);
  border-color:rgba(11,61,145,.35);
}

.comp-shell .filter-subtitle{
  font-size:.78rem;
  font-weight:800;
  color:#0b3d91;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:.2rem 0 .5rem;
}

.comp-shell .nested-filter-block{
  padding:.5rem 0;
  border-top:1px dashed rgba(15,23,42,.08);
}

.comp-shell .nested-filter-block:first-child{
  border-top:0;
  padding-top:0;
}

.comp-shell .code-search{
  margin-bottom:.55rem;
}

.comp-shell .code-search::placeholder{
  color:#94a3b8;
}

.comp-shell .comp-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.comp-shell .comp-hero-actions .hero-btn{
  border-radius:16px;
  padding:.85rem 1.2rem;
  font-weight:800;
}

.comp-shell .compact-grid > [class*="col-"]{
  display:flex;
}

.comp-shell .compact-grid .comp-chart-card{
  width:100%;
}

.comp-shell .compact-grid .badge{
  font-weight:700;
}

/* =========================
   AJUSTES VISUALES GENERALES DE GRÁFICAS
   ========================= */

canvas{
  image-rendering:auto;
}

.chart-box,
.chart-box-compact,
.chart-box-short{
  overflow:hidden;
}

/* evita títulos apretados */
.section-head{
  line-height:1.35;
}

/* mejora lectura de badges */
.badge.text-bg-light{
  color:#0f172a !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.06);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width:1199.98px){
  :root{
    --chart-h-principal:300px;
    --chart-h-normal:270px;
    --chart-h-corto:260px;
  }

  .comp-shell .chart-box{
    height:var(--chart-h-normal);
  }

  .comp-shell .chart-box.chart-box-compact{
    height:var(--chart-h-principal);
  }
}

@media (max-width:991.98px){
  .filter-panel{
    position:static;
  }

  .hero-content{
    padding:30px 0 24px;
  }

  .hero-portal{
    min-height:580px;
  }

  .sin-grid-match > [class*="col-"]{
    display:block;
  }

  .sin-grid-match .section-head{
    min-height:unset;
  }

  .sin-grid-match .chart-box,
  .sin-grid-match .chart-box-compact,
  .sin-grid-match .chart-box-short{
    min-height:320px;
    height:320px;
  }

  .comp-shell .comp-logo-wrap{
    width:60px;
    height:60px;
    min-width:60px;
  }

  .comp-shell .comp-logo-wrap img{
    max-width:42px;
    max-height:42px;
  }
}

@media (max-width:767.98px){
  body{
    font-size:15px;
  }

  .navbar-brand img{
    height:34px;
  }

  .hero{
    min-height:150px;
  }

  .hero-portal{
    min-height:500px;
  }

  .hero-title{
    font-size:clamp(1.5rem,7vw,2.2rem);
  }

  .hero .subtitle{
    font-size:.94rem;
    line-height:1.42;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-btn,
  .portal-entry-btn{
    width:100%;
    text-align:center;
  }

  .portal-hero-logo{
    width:min(240px,78vw);
  }

  .obs-filter-card{
    padding:.75rem !important;
  }

  .obs-filter-accordion .accordion-button{
    padding:.56rem .7rem;
    font-size:.84rem;
  }

  .obs-filter-accordion .accordion-body{
    padding:.52rem .64rem;
  }

  .check-grid-scroll{
    max-height:110px;
  }

  .check-item label{
    font-size:.8rem;
  }

  .kpi .value{
    font-size:1.55rem;
  }

  .kpi .label{
    font-size:.92rem;
  }

  .sin-grid-match .chart-box,
  .sin-grid-match .chart-box-compact,
  .sin-grid-match .chart-box-short,
  .comp-shell .chart-box,
  .comp-shell .chart-box.chart-box-compact,
  .comp-shell .chart-box.chart-box-short{
    height:260px;
    min-height:260px;
  }

  .comp-shell .comp-report-title{
    font-size:1.2rem;
  }

  .comp-shell .comp-kpi-value{
    font-size:1.7rem;
  }

  .comp-shell .comp-kpi-icon{
    width:48px;
    height:48px;
    font-size:1.2rem;
    border-radius:14px;
  }
}
/* =========================================================
   AJUSTES EJECUTIVOS DTB - KPI VS Y GRÁFICAS LEGIBLES
   ========================================================= */
.kpi [data-kpi-sub],
.kpi-versus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:6px;
  padding:.22rem .55rem;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.82rem;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.01em;
  min-height:22px;
}

.kpi [data-kpi-sub]:empty{
  display:none;
}

.kpi [data-kpi-sub].up,
.kpi-versus.up{
  background:#fee2e2;
  color:#dc2626;
}

.kpi [data-kpi-sub].down,
.kpi-versus.down{
  background:#dcfce7;
  color:#15803d;
}

.kpi [data-kpi-sub].neutral,
.kpi-versus.neutral{
  background:#f1f5f9;
  color:#64748b;
}

.kpi .label{
  font-size:.96rem;
  font-weight:800;
}

.kpi .value{
  font-size:1.78rem;
  font-weight:950;
}

/* Gráficas más equilibradas sin agrandar letras */
.sin-grid-match .chart-box,
.sin-grid-match .chart-box-short{
  height:320px !important;
  min-height:320px !important;
}

.sin-grid-match .chart-box-compact{
  height:360px !important;
  min-height:360px !important;
}

.comp-shell .chart-box,
.comp-shell .chart-box-short{
  height:320px !important;
  min-height:320px !important;
}

.comp-shell .chart-box-compact{
  height:360px !important;
  min-height:360px !important;
}

.sin-grid-match .section-head,
.comp-shell .comp-chart-card .section-head{
  min-height:72px;
}

.sin-grid-match .section-title,
.comp-shell .comp-chart-card .section-title{
  font-size:1.08rem !important;
  line-height:1.25;
}

.sin-grid-match .soft-note,
.comp-shell .comp-chart-card .soft-note{
  font-size:.86rem !important;
  line-height:1.3;
}

@media (max-width:767.98px){
  .sin-grid-match .chart-box,
  .sin-grid-match .chart-box-short,
  .sin-grid-match .chart-box-compact,
  .comp-shell .chart-box,
  .comp-shell .chart-box-short,
  .comp-shell .chart-box-compact{
    height:290px !important;
    min-height:290px !important;
  }

  .kpi [data-kpi-sub],
  .kpi-versus{
    font-size:.70rem;
    padding:.2rem .45rem;
  }
}


/* =========================================================
   CORRECCION V2: KPI VS SIEMPRE VISIBLE Y GRAFICAS PDF MAS LIMPIAS
   ========================================================= */
.kpi .value{
  font-size:1.45rem !important;
}
.kpi [data-kpi-sub]{
  margin-top:8px !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  display:inline-flex !important;
}
.kpi [data-kpi-sub]:empty{
  display:none !important;
}
.sin-grid-match .chart-box,
.sin-grid-match .chart-box-short,
.comp-shell .chart-box,
.comp-shell .chart-box.chart-box-short{
  height:280px !important;
  min-height:280px !important;
}
.sin-grid-match .chart-box-compact,
.comp-shell .chart-box.chart-box-compact{
  height:310px !important;
  min-height:310px !important;
}