/*
 * Fase 3.12.1 · Refinamiento visual y de legibilidad
 * Ajusta proporciones, contraste, densidad e interacción sin alterar la lógica.
 */

:root{
  --ui-text:#132238;
  --ui-text-2:#46586f;
  --ui-text-3:#64748b;
  --ui-line:#dfe6ee;
  --ui-line-strong:#cfd9e5;
  --ui-bg:#f4f7fb;
}

/* Base tipográfica y contraste */
body.oti-premium-app{
  font-size:14px!important;
  line-height:1.45!important;
}
.oti-premium-app small,
.oti-premium-app .muted,
.oti-premium-app .helper,
.oti-premium-app .field-help{
  color:var(--ui-text-2)!important;
}
.oti-premium-app .ui-icon,
.oti-premium-app .icon-btn::before,
.oti-premium-app .menu-btn::before,
.oti-premium-app .hero-search button::before,
.oti-premium-app .hero-register-btn::before,
.oti-premium-app .fase2-board-create::before,
.oti-premium-app .quick-actions a::before{
  width:19px!important;
  height:19px!important;
  flex-basis:19px!important;
}

/* Shell y navegación: más legible, manteniendo densidad */
.oti-premium-app .oti-app{grid-template-columns:252px minmax(0,1fr)!important}
.oti-premium-app .oti-sidebar{width:252px!important;padding:15px 15px 22px!important}
.oti-premium-app .oti-main{padding:14px 20px 26px!important}
.oti-premium-app .brand-block.sidebar-brand-pro{padding:14px 13px!important}
.oti-premium-app .brand-block.sidebar-brand-pro img{width:134px!important;max-height:50px!important}
.oti-premium-app .sidebar-brand-eyebrow{font-size:10px!important}
.oti-premium-app .sidebar-brand-copy h1{font-size:15px!important;line-height:1.25!important}
.oti-premium-app .sidebar-brand-copy small{font-size:11px!important;line-height:1.35!important}
.oti-premium-app .brand-claim.sidebar-claim-pro{min-height:64px!important;padding:12px 14px!important}
.oti-premium-app .sidebar-claim-pro strong,
.oti-premium-app .sidebar-claim-pro p{font-size:11.5px!important;line-height:1.4!important}
.oti-premium-app .side-nav-label{font-size:10px!important;padding:10px 10px 6px!important}
.oti-premium-app .side-nav.side-nav-pro a{
  min-height:45px!important;
  padding:9px 11px!important;
  font-size:13px!important;
  font-weight:680!important;
}
.oti-premium-app .side-nav .nav-icon{width:31px!important;height:31px!important}
.oti-premium-app .side-nav .nav-icon svg{width:17px!important;height:17px!important}
.oti-premium-app .sidebar-help-clean{padding:16px!important;margin-top:15px!important}
.oti-premium-app .sidebar-card-heading h3,
.oti-premium-app .sidebar-help-clean h3{font-size:16px!important}
.oti-premium-app .sidebar-card-heading small{font-size:10px!important}
.oti-premium-app .mini-stat span{font-size:11px!important}
.oti-premium-app .mini-stat strong{font-size:16px!important}
.oti-premium-app .sidebar-help-clean button{font-size:12px!important;min-height:41px!important}

/* Barra superior */
.oti-premium-app .topbar{min-height:60px!important;padding:9px 14px!important}
.oti-premium-app .topbar-left img{width:132px!important;height:40px!important}
.oti-premium-app .topbar-left strong{font-size:14px!important}
.oti-premium-app .menu-btn,
.oti-premium-app .icon-btn{width:38px!important;height:38px!important;min-width:38px!important}
.oti-premium-app .profile .avatar{width:38px!important;height:38px!important;font-size:15px!important}
.oti-premium-app .profile strong{font-size:12.5px!important}
.oti-premium-app .profile span{font-size:10.5px!important;color:#66758a!important}
.oti-premium-app .logout{font-size:12px!important;min-height:36px!important}

/* Hero más compacto y con accesos 2 x 2 */
.oti-premium-app .hero-panel{
  min-height:164px!important;
  padding:21px 24px!important;
  border-radius:22px!important;
  column-gap:28px!important;
}
.oti-premium-app .hero-copy h2{font-size:28px!important;line-height:1.12!important;margin-bottom:6px!important}
.oti-premium-app .hero-copy p{font-size:13.5px!important;line-height:1.45!important;margin-bottom:14px!important;color:rgba(255,255,255,.86)!important}
.oti-premium-app .hello-mark{width:29px!important;height:29px!important}
.oti-premium-app .hero-search{width:min(450px,100%)!important;height:44px!important}
.oti-premium-app .hero-search input{font-size:13px!important;padding:0 16px!important}
.oti-premium-app .hero-search button{width:44px!important;height:44px!important}
.oti-premium-app .quick-actions{
  width:370px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:center!important;
  gap:8px!important;
}
.oti-premium-app .quick-actions h3{
  grid-column:1/-1!important;
  font-size:10.5px!important;
  margin:0 0 1px!important;
}
.oti-premium-app .quick-actions a{
  min-height:42px!important;
  padding:0 13px!important;
  font-size:12px!important;
  border-radius:12px!important;
}
.oti-premium-app .hero-register-btn,
.oti-premium-app .fase2-board-create{min-height:41px!important;font-size:12px!important;padding:0 16px!important}

/* Métricas: tipografía más cómoda */
.oti-premium-app .kpi-row{gap:11px!important;margin:12px 0!important}
.oti-premium-app .kpi-card{min-height:94px!important;padding:15px 16px!important}
.oti-premium-app .kpi-card span,
.oti-premium-app .fase2-ops-card span{font-size:10px!important;letter-spacing:.105em!important;color:#53647b!important}
.oti-premium-app .kpi-card strong,
.oti-premium-app .fase2-ops-card strong{font-size:26px!important}
.oti-premium-app .kpi-card small,
.oti-premium-app .fase2-ops-card small{font-size:11.5px!important;line-height:1.35!important;color:#4f6076!important}
.oti-premium-app .fase2-ops-card{min-height:82px!important;padding:14px 15px!important}
.oti-premium-app .chart-card{padding:18px!important;min-height:160px!important}
.oti-premium-app .chart-head h3{font-size:15px!important}
.oti-premium-app .chart-head span{font-size:11.5px!important;color:#53647a!important}
.oti-premium-app .chart-card,
.oti-premium-app .chart-card *{text-rendering:optimizeLegibility}
.oti-premium-app .time-value strong{font-size:25px!important}
.oti-premium-app .time-value p,
.oti-premium-app .chart-card li,
.oti-premium-app .chart-card label{font-size:11.5px!important;color:#46586f!important}

/* Bandeja: mayor claridad y controles táctiles */
.oti-premium-app .recent-panel{padding:17px!important;border-radius:19px!important}
.oti-premium-app .fase2-board-head{padding-bottom:13px!important}
.oti-premium-app .fase2-board-eyebrow{font-size:10px!important;color:#65758a!important}
.oti-premium-app .fase2-board-title,
.oti-premium-app .fase2-board-title h3{font-size:16px!important;line-height:1.3!important}
.oti-premium-app .fase2-board-history{font-size:12px!important;min-height:38px!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important}
.oti-premium-app .fase2-table-toolbar{
  padding:10px 11px!important;
  border-radius:15px!important;
  gap:10px!important;
  background:#f7fafe!important;
}
.oti-premium-app .fase2-toolbar-copy strong{font-size:12px!important}
.oti-premium-app .fase2-toolbar-copy span{font-size:10.5px!important;color:#66758a!important}
.oti-premium-app .fase2-chip{
  min-height:34px!important;
  padding:0 12px!important;
  font-size:10.5px!important;
}
.oti-premium-app .fase2-clear-filter{min-height:34px!important;font-size:10.5px!important;padding:0 12px!important}
.oti-premium-app .fase2-table-lite{margin-top:10px!important;border-radius:15px!important}
.oti-premium-app .fase2-table-lite thead th{
  padding:12px 13px!important;
  font-size:10px!important;
  letter-spacing:.085em!important;
  color:#526176!important;
}
.oti-premium-app .fase2-table-lite tbody td{
  padding:13px!important;
  font-size:11.5px!important;
  color:#26364c!important;
}
.oti-premium-app .fase2-ticket-code{font-size:11.5px!important;font-weight:750!important}
.oti-premium-app .fase2-ticket-code::before{width:22px!important;height:22px!important;font-size:11px!important}
.oti-premium-app .status-pill,
.oti-premium-app .priority-pill,
.oti-premium-app .service-pill{padding:6px 9px!important;font-size:10px!important}
.oti-premium-app .dash-btn,
.oti-premium-app .mini-link.modal-link{min-height:34px!important;padding:0 11px!important;font-size:10.5px!important}

/* Estado vacío más útil y visualmente equilibrado */
.oti-premium-app .dashboard-no-results{padding:0!important}
.oti-premium-app .fase2-empty-state{
  min-height:170px!important;
  padding:24px!important;
  gap:13px!important;
  flex-direction:column!important;
  justify-content:center!important;
  text-align:center!important;
  background:linear-gradient(180deg,#fbfdff 0%,#f7fafc 100%)!important;
}
.oti-premium-app .fase2-empty-state > span{
  width:52px!important;
  height:52px!important;
  border-radius:16px!important;
  font-size:21px!important;
  box-shadow:inset 0 0 0 1px rgba(8,120,185,.08)!important;
}
.oti-premium-app .fase2-empty-state strong{font-size:15px!important;line-height:1.3!important}
.oti-premium-app .fase2-empty-state small{display:block!important;margin-top:3px!important;font-size:11.5px!important;line-height:1.5!important;color:#66758a!important}
.oti-premium-app .fase2-empty-action{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  margin-top:11px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:11px!important;
  background:#0e9f5b!important;
  color:#fff!important;
  font-size:11.5px!important;
  font-weight:750!important;
  box-shadow:0 8px 18px rgba(14,159,91,.18)!important;
  cursor:pointer!important;
}
.oti-premium-app .fase2-empty-action:hover{background:#0b8f51!important;transform:translateY(-1px)!important}

/* Accesos inferiores */
.oti-premium-app .shortcut-row > div,
.oti-premium-app .bottom-features > div{min-height:72px!important;padding:13px 15px!important}
.oti-premium-app .shortcut-row strong,
.oti-premium-app .bottom-features strong{font-size:12px!important}
.oti-premium-app .shortcut-row p,
.oti-premium-app .bottom-features p{font-size:10.5px!important;color:#64748b!important}
.oti-premium-app .shortcut-row > div > span,
.oti-premium-app .bottom-features > div > span{width:37px!important;height:37px!important}

/* Usuarios y vistas administrativas */
.oti-premium-app .users-directory-table thead th{font-size:10px!important;letter-spacing:.08em!important}
.oti-premium-app .users-directory-table tbody td{font-size:11.5px!important}
.oti-premium-app .users-page,
.oti-premium-app .page-shell,
.oti-premium-app .config-card,
.oti-premium-app .table-card{color:var(--ui-text)!important}
.oti-premium-app label{font-size:12px!important;color:#26384e!important}
.oti-premium-app input,
.oti-premium-app select,
.oti-premium-app textarea{font-size:13px!important;color:#1e2d42!important}

/* Pantallas amplias: evitar sensación de contenido estirado */
@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:1600px!important;
    margin-left:auto!important;
    margin-right:auto!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 .quick-actions{width:330px!important}
}

@media (max-width:1050px){
  .oti-premium-app .quick-actions{width:300px!important}
  .oti-premium-app .quick-actions a{font-size:11.5px!important}
}

@media (max-width:900px){
  .oti-premium-app .hero-panel{padding:20px!important}
  .oti-premium-app .quick-actions{width:100%!important}
  .oti-premium-app .fase2-table-toolbar{align-items:flex-start!important}
}

@media (max-width:640px){
  body.oti-premium-app{font-size:13px!important}
  .oti-premium-app .hero-panel{padding:18px 16px!important}
  .oti-premium-app .hero-copy h2{font-size:24px!important}
  .oti-premium-app .hero-copy p{font-size:12.5px!important}
  .oti-premium-app .quick-actions{grid-template-columns:1fr!important}
  .oti-premium-app .kpi-card span,
  .oti-premium-app .fase2-ops-card span{font-size:9.5px!important}
  .oti-premium-app .kpi-card small,
  .oti-premium-app .fase2-ops-card small{font-size:10.5px!important}
  .oti-premium-app .fase2-board-title,
  .oti-premium-app .fase2-board-title h3{font-size:15px!important}
  .oti-premium-app .fase2-chip{font-size:10px!important;min-height:33px!important}
  .oti-premium-app .fase2-empty-state{min-height:155px!important;padding:20px 14px!important}
  .oti-premium-app .fase2-empty-state strong{font-size:14px!important}
  .oti-premium-app .fase2-empty-state small{font-size:11px!important}
}
.oti-premium-app .fase2-empty-action::before{
  content:"";
  width:16px;
  height:16px;
  margin-right:7px;
  background:currentColor;
  -webkit-mask:url('../img/ui/plus.svg') center/contain no-repeat;
  mask:url('../img/ui/plus.svg') center/contain no-repeat;
}