/*
 * Fase 3.12.2 · Escala, legibilidad y proporciones
 * Refuerza lectura en escritorio, corrige accesos rápidos y mejora densidad.
 * No modifica flujos, estados ni permisos.
 */

:root{
  --ui-text:#10233c;
  --ui-text-2:#3f526a;
  --ui-text-3:#5e7086;
  --ui-line:#d6e0ea;
  --ui-line-strong:#c5d1de;
  --ui-bg:#eef3f8;
}

body.oti-premium-app{
  font-size:15px!important;
  line-height:1.48!important;
  background:
    radial-gradient(circle at 82% 4%,rgba(20,164,195,.07),transparent 25%),
    linear-gradient(180deg,#f5f8fb 0%,#eef3f8 100%)!important;
  color:var(--ui-text)!important;
}

/* Contenedor principal: más presencia sin estirar en exceso */
.oti-premium-app .oti-app{grid-template-columns:270px minmax(0,1fr)!important}
.oti-premium-app .oti-sidebar{width:270px!important;padding:17px 16px 24px!important}
.oti-premium-app .oti-main{padding:16px 24px 30px!important}

/* Identidad y navegación lateral */
.oti-premium-app .brand-block.sidebar-brand-pro{padding:16px 15px!important;border-radius:22px!important}
.oti-premium-app .brand-block.sidebar-brand-pro img{width:148px!important;max-height:55px!important}
.oti-premium-app .sidebar-brand-eyebrow{font-size:10.5px!important}
.oti-premium-app .sidebar-brand-copy h1{font-size:16px!important;line-height:1.25!important}
.oti-premium-app .sidebar-brand-copy small{font-size:11.5px!important;line-height:1.4!important;color:#52657c!important}
.oti-premium-app .brand-claim.sidebar-claim-pro{min-height:72px!important;padding:14px 15px!important;margin:13px 0 15px!important}
.oti-premium-app .sidebar-claim-pro strong,
.oti-premium-app .sidebar-claim-pro p{font-size:12px!important;line-height:1.42!important}
.oti-premium-app .side-nav-label{font-size:10.5px!important;padding:12px 10px 7px!important;color:#718197!important}
.oti-premium-app .side-nav.side-nav-pro{gap:6px!important}
.oti-premium-app .side-nav.side-nav-pro a{
  min-height:49px!important;
  padding:10px 12px!important;
  font-size:14px!important;
  border-radius:14px!important;
}
.oti-premium-app .side-nav .nav-icon{width:34px!important;height:34px!important;border-radius:10px!important}
.oti-premium-app .side-nav .nav-icon svg{width:19px!important;height:19px!important;stroke-width:1.9!important}
.oti-premium-app .nav-count{min-width:24px!important;height:24px!important;font-size:11px!important}
.oti-premium-app .sidebar-help-clean{padding:17px!important;margin-top:18px!important}
.oti-premium-app .sidebar-card-heading h3,
.oti-premium-app .sidebar-help-clean h3{font-size:17px!important}
.oti-premium-app .sidebar-card-heading small{font-size:10.5px!important}
.oti-premium-app .mini-stat{padding:11px 0!important}
.oti-premium-app .mini-stat span{font-size:11.5px!important}
.oti-premium-app .mini-stat strong{font-size:18px!important}
.oti-premium-app .sidebar-help-clean button{min-height:43px!important;font-size:12.5px!important}

/* Topbar */
.oti-premium-app .topbar{min-height:66px!important;padding:10px 16px!important;border-radius:20px!important}
.oti-premium-app .topbar-left{gap:12px!important}
.oti-premium-app .topbar-left img{width:145px!important;height:43px!important}
.oti-premium-app .topbar-left strong{font-size:15px!important}
.oti-premium-app .menu-btn,
.oti-premium-app .icon-btn{width:41px!important;height:41px!important;min-width:41px!important;border-radius:12px!important}
.oti-premium-app .profile{gap:10px!important}
.oti-premium-app .profile .avatar{width:41px!important;height:41px!important;font-size:16px!important}
.oti-premium-app .profile strong{font-size:13.5px!important}
.oti-premium-app .profile span{font-size:11px!important;color:#566a80!important}
.oti-premium-app .logout{font-size:12.5px!important;min-height:39px!important;padding:0 12px!important}

/* Hero y accesos rápidos */
.oti-premium-app .hero-panel{
  min-height:178px!important;
  padding:24px 27px!important;
  grid-template-columns:minmax(0,1fr) 440px!important;
  column-gap:34px!important;
  border-radius:24px!important;
}
.oti-premium-app .hero-copy h2{font-size:31px!important;line-height:1.12!important;margin-bottom:7px!important}
.oti-premium-app .hero-copy p{font-size:14px!important;line-height:1.45!important;margin-bottom:15px!important;color:rgba(255,255,255,.9)!important}
.oti-premium-app .hello-mark{width:31px!important;height:31px!important}
.oti-premium-app .hero-search{width:min(500px,100%)!important;height:47px!important;border-radius:14px!important}
.oti-premium-app .hero-search input{font-size:13.5px!important;padding:0 17px!important}
.oti-premium-app .hero-search button{width:47px!important;height:47px!important}
.oti-premium-app .quick-actions{
  width:440px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:center!important;
  gap:10px!important;
  overflow:visible!important;
}
.oti-premium-app .quick-actions h3{grid-column:1/-1!important;font-size:11px!important;margin:0 0 2px!important}
.oti-premium-app .quick-actions a{
  min-width:0!important;
  min-height:46px!important;
  padding:0 14px!important;
  font-size:12.5px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  border-radius:13px!important;
}
.oti-premium-app .quick-actions a::before{width:20px!important;height:20px!important;flex:0 0 20px!important}
.oti-premium-app .hero-register-btn,
.oti-premium-app .fase2-board-create{min-height:43px!important;font-size:12.5px!important;padding:0 17px!important}

/* KPI: mayor escala y mejor lectura. Admin pasa a 4 columnas (4 + 3). */
.oti-premium-app .kpi-row{gap:13px!important;margin:14px 0!important}
.oti-premium-app .kpi-row.kpi-admin{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.oti-premium-app .kpi-card{min-height:106px!important;padding:17px 18px!important;border-radius:18px!important}
.oti-premium-app .kpi-card span,
.oti-premium-app .fase2-ops-card span,
.oti-premium-app .fase2-command-card span{font-size:10.5px!important;letter-spacing:.105em!important;color:#435770!important}
.oti-premium-app .kpi-card strong,
.oti-premium-app .fase2-ops-card strong,
.oti-premium-app .fase2-command-card strong{font-size:29px!important;line-height:1.05!important}
.oti-premium-app .kpi-card small,
.oti-premium-app .fase2-ops-card small,
.oti-premium-app .fase2-command-card small{font-size:12px!important;line-height:1.38!important;color:#42566f!important}

/* Control operativo */
.oti-premium-app .fase2-command-panel{gap:13px!important;margin-bottom:15px!important}
.oti-premium-app .fase2-command-card,
.oti-premium-app .fase2-ops-card{min-height:92px!important;padding:16px 17px!important;border-radius:18px!important}

/* Gráficos */
.oti-premium-app .chart-grid{gap:13px!important;margin-bottom:14px!important}
.oti-premium-app .chart-card{padding:20px!important;min-height:178px!important;border-radius:19px!important}
.oti-premium-app .chart-head h3{font-size:16px!important}
.oti-premium-app .chart-head span{font-size:12px!important;color:#43566e!important}
.oti-premium-app .chart-card li,
.oti-premium-app .chart-card label,
.oti-premium-app .time-value p{font-size:12.5px!important;color:#354a63!important}
.oti-premium-app .time-value strong{font-size:28px!important}
.oti-premium-app .time-value .clock{width:46px!important;height:46px!important}

/* Bandeja y filtros */
.oti-premium-app .recent-panel{padding:19px!important;border-radius:20px!important}
.oti-premium-app .fase2-board-head{padding-bottom:14px!important}
.oti-premium-app .fase2-board-eyebrow{font-size:10.5px!important}
.oti-premium-app .fase2-board-title,
.oti-premium-app .fase2-board-title h3{font-size:17px!important}
.oti-premium-app .fase2-board-history{font-size:12.5px!important;min-height:40px!important}
.oti-premium-app .fase2-table-toolbar{padding:12px!important;gap:11px!important;border-radius:16px!important}
.oti-premium-app .fase2-toolbar-copy strong{font-size:12.5px!important}
.oti-premium-app .fase2-toolbar-copy span{font-size:11px!important;color:#53677e!important}
.oti-premium-app .fase2-chip{
  min-height:38px!important;
  padding:0 13px!important;
  font-size:11px!important;
  border-radius:999px!important;
}
.oti-premium-app .fase2-clear-filter{min-height:38px!important;font-size:11px!important;padding:0 13px!important}
.oti-premium-app .fase2-table-lite{margin-top:12px!important;border-radius:16px!important}
.oti-premium-app .fase2-table-lite table{min-width:1040px!important}
.oti-premium-app .fase2-table-lite thead th{
  padding:14px 15px!important;
  font-size:10.5px!important;
  letter-spacing:.08em!important;
  color:#3e536c!important;
}
.oti-premium-app .fase2-table-lite tbody td{padding:15px!important;font-size:12.5px!important;color:#1f344d!important}
.oti-premium-app .fase2-ticket-code{font-size:12.5px!important}
.oti-premium-app .fase2-ticket-code::before{width:24px!important;height:24px!important;font-size:11.5px!important}
.oti-premium-app .status-pill,
.oti-premium-app .priority-pill,
.oti-premium-app .service-pill{padding:7px 10px!important;font-size:10.5px!important}
.oti-premium-app .dash-btn,
.oti-premium-app .mini-link.modal-link{min-height:37px!important;padding:0 12px!important;font-size:11px!important}

/* Estado vacío */
.oti-premium-app .fase2-empty-state{min-height:190px!important;padding:28px!important;gap:14px!important}
.oti-premium-app .fase2-empty-state > span{width:58px!important;height:58px!important;border-radius:18px!important;font-size:23px!important}
.oti-premium-app .fase2-empty-state strong{font-size:16px!important}
.oti-premium-app .fase2-empty-state small{font-size:12px!important;color:#53677e!important}
.oti-premium-app .fase2-empty-action{min-height:42px!important;padding:0 16px!important;font-size:12px!important}

/* Accesos inferiores */
.oti-premium-app .shortcut-row > div,
.oti-premium-app .bottom-features > div{min-height:78px!important;padding:15px 17px!important}
.oti-premium-app .shortcut-row strong,
.oti-premium-app .bottom-features strong{font-size:13px!important}
.oti-premium-app .shortcut-row p,
.oti-premium-app .bottom-features p{font-size:11.5px!important;color:#52667e!important}
.oti-premium-app .shortcut-row > div > span,
.oti-premium-app .bottom-features > div > span{width:40px!important;height:40px!important}

/* Formularios y vistas administrativas */
.oti-premium-app label{font-size:12.5px!important;color:#203a57!important}
.oti-premium-app input,
.oti-premium-app select,
.oti-premium-app textarea{font-size:13.5px!important;color:#152b44!important}
.oti-premium-app .users-directory-table thead th{font-size:10.5px!important}
.oti-premium-app .users-directory-table tbody td{font-size:12.5px!important}

/* Pantallas muy amplias */
@media (min-width:1680px){
  .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{
    max-width:1580px!important;
  }
}

@media (max-width:1400px){
  .oti-premium-app .oti-app{grid-template-columns:250px minmax(0,1fr)!important}
  .oti-premium-app .oti-sidebar{width:250px!important}
  .oti-premium-app .oti-main{padding-left:18px!important;padding-right:18px!important}
  .oti-premium-app .hero-panel{grid-template-columns:minmax(0,1fr) 390px!important}
  .oti-premium-app .quick-actions{width:390px!important}
  .oti-premium-app .kpi-card strong{font-size:27px!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:16px!important}
  .oti-premium-app .kpi-row.kpi-admin{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .oti-premium-app .fase2-command-panel{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

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

@media (max-width:640px){
  body.oti-premium-app{font-size:14px!important}
  .oti-premium-app .oti-main{padding:8px!important}
  .oti-premium-app .hero-copy h2{font-size:25px!important}
  .oti-premium-app .hero-copy p{font-size:13px!important}
  .oti-premium-app .quick-actions{grid-template-columns:1fr!important}
  .oti-premium-app .kpi-row.kpi-admin,
  .oti-premium-app .kpi-row.kpi-tecnico,
  .oti-premium-app .fase2-command-panel{grid-template-columns:1fr!important}
  .oti-premium-app .kpi-card{min-height:96px!important}
  .oti-premium-app .fase2-chip{font-size:10.5px!important;min-height:36px!important}
  .oti-premium-app .fase2-table-lite tbody td{font-size:12px!important}
}