/*
 * Fase 3.12.3 · Distribución y aprovechamiento del espacio
 * Último ajuste visual del dashboard. No modifica lógica, estados ni permisos.
 */

:root{
  --ui-text:#0d2540;
  --ui-text-2:#344c66;
  --ui-text-3:#536980;
  --ui-line:#cfdae6;
}

/* Aprovechamiento real del ancho disponible */
.oti-premium-app .oti-app{
  grid-template-columns:252px minmax(0,1fr)!important;
}
.oti-premium-app .oti-sidebar{
  width:252px!important;
  padding:15px 14px 22px!important;
}
.oti-premium-app .oti-main{
  min-width:0!important;
  padding:13px 17px 25px!important;
}
.oti-premium-app .oti-main > .topbar,
.oti-premium-app .oti-main > .hero-panel,
.oti-premium-app .oti-main > .kpi-row,
.oti-premium-app .oti-main > .fase2-command-panel,
.oti-premium-app .oti-main > .chart-grid,
.oti-premium-app .oti-main > .recent-panel,
.oti-premium-app .oti-main > .shortcut-row,
.oti-premium-app .oti-main > .bottom-features{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Hero compacto, manteniendo presencia institucional */
.oti-premium-app .hero-panel{
  min-height:150px!important;
  padding:18px 22px!important;
  grid-template-columns:minmax(0,1fr) 430px!important;
  column-gap:28px!important;
}
.oti-premium-app .hero-copy h2{
  font-size:29px!important;
  margin-bottom:5px!important;
}
.oti-premium-app .hero-copy p{
  margin-bottom:12px!important;
  color:rgba(255,255,255,.94)!important;
}
.oti-premium-app .hero-search{
  height:44px!important;
  width:min(520px,100%)!important;
}
.oti-premium-app .hero-search button{
  width:44px!important;
  height:44px!important;
}
.oti-premium-app .quick-actions{
  width:430px!important;
  gap:8px!important;
}
.oti-premium-app .quick-actions a{
  min-height:42px!important;
  padding:0 13px!important;
  font-size:12px!important;
}

/* Estados: siete tarjetas en una sola fila cuando el espacio lo permite */
.oti-premium-app .kpi-row.kpi-admin{
  display:grid!important;
  gap:10px!important;
  align-items:stretch!important;
}
.oti-premium-app .kpi-card{
  min-height:91px!important;
  padding:14px 15px!important;
}
.oti-premium-app .kpi-card span{
  color:#3f566f!important;
}
.oti-premium-app .kpi-card small{
  color:#354d68!important;
}

@media (min-width:1480px){
  .oti-premium-app .kpi-row.kpi-admin{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }
  .oti-premium-app .kpi-row.kpi-admin .kpi-card{
    grid-column:auto!important;
    min-width:0!important;
  }
  .oti-premium-app .kpi-row.kpi-admin .kpi-card strong{
    font-size:27px!important;
  }
  .oti-premium-app .kpi-row.kpi-admin .kpi-card small{
    font-size:11px!important;
  }
}

/* En laptop: 4 + 3 centradas para eliminar el vacío lateral */
@media (min-width:1181px) and (max-width:1479px){
  .oti-premium-app .kpi-row.kpi-admin{
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
  }
  .oti-premium-app .kpi-row.kpi-admin .kpi-card{
    grid-column:span 3!important;
  }
  .oti-premium-app .kpi-row.kpi-admin .kpi-card:nth-child(5){grid-column:2 / span 3!important}
  .oti-premium-app .kpi-row.kpi-admin .kpi-card:nth-child(6){grid-column:5 / span 3!important}
  .oti-premium-app .kpi-row.kpi-admin .kpi-card:nth-child(7){grid-column:8 / span 3!important}
}

/* Control operativo y gráficas más densos, sin perder lectura */
.oti-premium-app .fase2-command-panel{
  gap:10px!important;
  margin-bottom:11px!important;
}
.oti-premium-app .fase2-command-card,
.oti-premium-app .fase2-ops-card{
  min-height:82px!important;
  padding:14px 15px!important;
}
.oti-premium-app .fase2-command-card small,
.oti-premium-app .fase2-ops-card small{
  color:#354d68!important;
}
.oti-premium-app .chart-grid{
  gap:10px!important;
  margin-bottom:11px!important;
}
.oti-premium-app .chart-card{
  min-height:157px!important;
  padding:17px!important;
}
.oti-premium-app .chart-head span,
.oti-premium-app .chart-card li,
.oti-premium-app .chart-card label,
.oti-premium-app .time-value p{
  color:#3d526b!important;
}

/* Bandeja: más arriba, más clara y con vacío compacto */
.oti-premium-app .recent-panel{
  padding:16px!important;
  margin-top:0!important;
}
.oti-premium-app .fase2-board-head{
  padding-bottom:10px!important;
}
.oti-premium-app .fase2-table-toolbar{
  padding:9px 10px!important;
}
.oti-premium-app .fase2-table-lite{
  margin-top:9px!important;
}
.oti-premium-app .fase2-table-lite thead th{
  color:#354c66!important;
}
.oti-premium-app .fase2-empty-state{
  min-height:135px!important;
  padding:18px 22px!important;
  gap:9px!important;
}
.oti-premium-app .fase2-empty-state > span{
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
  font-size:20px!important;
}
.oti-premium-app .fase2-empty-state strong{
  font-size:15px!important;
}
.oti-premium-app .fase2-empty-state small{
  font-size:11.5px!important;
  color:#4f647c!important;
}
.oti-premium-app .fase2-empty-action{
  min-height:36px!important;
  margin-top:6px!important;
  padding:0 14px!important;
}

/* Contraste fino en textos funcionales */
.oti-premium-app .fase2-toolbar-copy span,
.oti-premium-app .shortcut-row p,
.oti-premium-app .bottom-features p,
.oti-premium-app .profile span{
  color:#50657d!important;
}
.oti-premium-app .fase2-board-eyebrow,
.oti-premium-app .side-nav-label{
  color:#65768b!important;
}

/* Pantallas grandes: sidebar ligeramente más compacto y dashboard expansivo */
@media (min-width:1680px){
  .oti-premium-app .oti-app{
    grid-template-columns:248px minmax(0,1fr)!important;
  }
  .oti-premium-app .oti-sidebar{
    width:248px!important;
  }
  .oti-premium-app .oti-main{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

@media (max-width:1180px){
  .oti-premium-app .oti-app{grid-template-columns:224px minmax(0,1fr)!important}
  .oti-premium-app .oti-sidebar{width:224px!important}
  .oti-premium-app .hero-panel{grid-template-columns:1fr!important}
  .oti-premium-app .quick-actions{width:100%!important;margin-top:14px!important}
  .oti-premium-app .kpi-row.kpi-admin{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .oti-premium-app .kpi-row.kpi-admin .kpi-card{
    grid-column:auto!important;
  }
}

@media (max-width:900px){
  .oti-premium-app .kpi-row.kpi-admin{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px){
  .oti-premium-app .oti-main{padding:8px!important}
  .oti-premium-app .hero-panel{padding:18px!important}
  .oti-premium-app .kpi-row.kpi-admin{grid-template-columns:1fr!important}
  .oti-premium-app .fase2-empty-state{min-height:150px!important;padding:20px 14px!important}
}