/*
 * Fase 3.12 · Sistema visual premium OTI
 * Línea visual limpia, contemporánea y accesible inspirada en interfaces de producto modernas.
 * Esta hoja se carga al final para unificar tipografía, iconos, superficies, botones y formularios
 * sin alterar la lógica funcional de la Mesa de Ayuda.
 */

:root{
  --ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Inter,Arial,sans-serif;
  --ui-bg:#f5f7fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-blue:#f2f8fd;
  --ui-line:#e5eaf1;
  --ui-line-strong:#d8e0ea;
  --ui-text:#172033;
  --ui-text-2:#506078;
  --ui-text-3:#7d899b;
  --ui-navy:#073b66;
  --ui-blue:#0878b9;
  --ui-cyan:#11a8c5;
  --ui-green:#16a765;
  --ui-amber:#d88900;
  --ui-red:#db3a45;
  --ui-purple:#7755d9;
  --ui-radius-xs:9px;
  --ui-radius-sm:12px;
  --ui-radius-md:16px;
  --ui-radius-lg:22px;
  --ui-radius-xl:28px;
  --ui-shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --ui-shadow-sm:0 6px 18px rgba(15,23,42,.06);
  --ui-shadow-md:0 18px 45px rgba(15,23,42,.09);
  --ui-shadow-lg:0 30px 80px rgba(15,23,42,.18);
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}

html{font-family:var(--ui-font)!important;color-scheme:light;scroll-behavior:smooth}
body.oti-premium-app,
body.oti-login-page.oti-premium-app{
  margin:0!important;
  font-family:var(--ui-font)!important;
  color:var(--ui-text)!important;
  background:
    radial-gradient(circle at 86% 3%,rgba(17,168,197,.08),transparent 25%),
    linear-gradient(180deg,#f8fafc 0%,var(--ui-bg) 100%)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.oti-premium-app *{box-sizing:border-box}
body.oti-premium-app button,
body.oti-premium-app input,
body.oti-premium-app select,
body.oti-premium-app textarea{font:inherit}
body.oti-premium-app a{color:inherit}
body.oti-premium-app ::selection{background:rgba(8,120,185,.18);color:var(--ui-navy)}
body.oti-premium-app :focus-visible{
  outline:3px solid rgba(17,168,197,.28)!important;
  outline-offset:2px!important;
}

/* Utilidades de iconos locales */
.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{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:currentColor;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.ui-icon.icon-menu,.oti-premium-app .menu-btn::before{-webkit-mask-image:url('../img/ui/menu.svg');mask-image:url('../img/ui/menu.svg')}
.ui-icon.icon-search,.oti-premium-app .icon-btn[data-icon="search"]::before,.oti-premium-app .hero-search button::before{-webkit-mask-image:url('../img/ui/search.svg');mask-image:url('../img/ui/search.svg')}
.ui-icon.icon-history,.oti-premium-app .icon-btn[data-icon="history"]::before,.oti-premium-app .quick-actions a[data-icon="history"]::before{-webkit-mask-image:url('../img/ui/history.svg');mask-image:url('../img/ui/history.svg')}
.ui-icon.icon-ticket,.oti-premium-app .quick-actions a[data-icon="ticket"]::before{-webkit-mask-image:url('../img/ui/tickets.svg');mask-image:url('../img/ui/tickets.svg')}
.ui-icon.icon-report,.oti-premium-app .quick-actions a[data-icon="report"]::before{-webkit-mask-image:url('../img/ui/report.svg');mask-image:url('../img/ui/report.svg')}
.ui-icon.icon-settings,.oti-premium-app .quick-actions a[data-icon="settings"]::before{-webkit-mask-image:url('../img/ui/settings.svg');mask-image:url('../img/ui/settings.svg')}
.ui-icon.icon-plus,.oti-premium-app .hero-register-btn::before,.oti-premium-app .fase2-board-create::before{-webkit-mask-image:url('../img/ui/plus.svg');mask-image:url('../img/ui/plus.svg')}
.ui-icon.icon-clock{-webkit-mask-image:url('../img/ui/clock.svg');mask-image:url('../img/ui/clock.svg')}
.ui-icon.icon-shield{-webkit-mask-image:url('../img/ui/shield.svg');mask-image:url('../img/ui/shield.svg')}
.ui-icon.icon-user{-webkit-mask-image:url('../img/ui/user.svg');mask-image:url('../img/ui/user.svg')}
.ui-icon.icon-spark{-webkit-mask-image:url('../img/ui/spark.svg');mask-image:url('../img/ui/spark.svg')}

/* Shell general */
.oti-premium-app .oti-app{grid-template-columns:244px minmax(0,1fr)!important}
.oti-premium-app .oti-sidebar{
  width:244px!important;
  padding:14px 14px 20px!important;
  background:rgba(255,255,255,.92)!important;
  border-right:1px solid rgba(216,224,234,.85)!important;
  box-shadow:12px 0 35px rgba(15,23,42,.035)!important;
  backdrop-filter:saturate(150%) blur(18px);
}
.oti-premium-app .oti-main{
  margin-left:0!important;
  padding:14px 18px 24px!important;
  min-height:100vh!important;
}
.oti-premium-app .brand-block.sidebar-brand-pro{
  padding:13px 12px!important;
  border:1px solid var(--ui-line)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.8)!important;
  box-shadow:var(--ui-shadow-xs)!important;
  min-height:auto!important;
  gap:10px!important;
}
.oti-premium-app .brand-block.sidebar-brand-pro img{width:126px!important;max-height:46px!important;object-fit:contain!important}
.oti-premium-app .sidebar-brand-copy{padding-top:8px!important;border-top:1px solid var(--ui-line)!important;margin-top:3px!important}
.oti-premium-app .sidebar-brand-eyebrow{
  color:var(--ui-cyan)!important;
  font-size:9px!important;
  letter-spacing:.14em!important;
  font-weight:800!important;
}
.oti-premium-app .sidebar-brand-copy h1{font-size:14px!important;letter-spacing:-.01em!important;color:var(--ui-navy)!important;margin:3px 0!important}
.oti-premium-app .sidebar-brand-copy small{font-size:10px!important;color:var(--ui-text-3)!important}
.oti-premium-app .brand-claim.sidebar-claim-pro{
  margin:12px 0 13px!important;
  min-height:68px!important;
  border-radius:17px!important;
  padding:13px 14px!important;
  background:linear-gradient(135deg,#064b78 0%,#087cb6 100%)!important;
  box-shadow:0 12px 28px rgba(6,75,120,.18)!important;
  color:white!important;
}
.oti-premium-app .sidebar-claim-pro .claim-accent{width:3px!important;background:#58d5df!important;border-radius:99px!important}
.oti-premium-app .sidebar-claim-pro strong,
.oti-premium-app .sidebar-claim-pro p{font-size:11px!important;line-height:1.35!important;letter-spacing:.055em!important;margin:0!important}
.oti-premium-app .side-nav-label{
  font-size:9px!important;
  letter-spacing:.15em!important;
  color:#95a0b1!important;
  padding:9px 10px 5px!important;
  font-weight:800!important;
}
.oti-premium-app .side-nav.side-nav-pro{gap:4px!important}
.oti-premium-app .side-nav.side-nav-pro a{
  min-height:43px!important;
  border-radius:13px!important;
  padding:8px 10px!important;
  font-size:12px!important;
  font-weight:650!important;
  color:#334155!important;
  border:1px solid transparent!important;
  transition:background .18s var(--ui-ease),color .18s var(--ui-ease),transform .18s var(--ui-ease),box-shadow .18s var(--ui-ease)!important;
}
.oti-premium-app .side-nav.side-nav-pro a:hover{
  background:#f1f6fa!important;
  color:var(--ui-navy)!important;
  transform:translateX(2px)!important;
}
.oti-premium-app .side-nav.side-nav-pro a.active{
  color:#fff!important;
  background:linear-gradient(135deg,#07507f,#087fb9)!important;
  box-shadow:0 8px 20px rgba(7,80,127,.18)!important;
}
.oti-premium-app .side-nav .nav-icon{
  width:29px!important;height:29px!important;border-radius:9px!important;
  background:rgba(8,120,185,.08)!important;color:var(--ui-blue)!important;
}
.oti-premium-app .side-nav a.active .nav-icon{background:rgba(255,255,255,.15)!important;color:#fff!important}
.oti-premium-app .side-nav .nav-icon svg{width:16px!important;height:16px!important;stroke-width:1.8!important}
.oti-premium-app .nav-count{
  min-width:22px!important;height:22px!important;border-radius:999px!important;
  font-size:10px!important;background:#e9f6fb!important;color:#0878a9!important;
}
.oti-premium-app .side-nav a.active .nav-count{background:#fff!important;color:var(--ui-navy)!important}

.oti-premium-app .sidebar-help-clean{
  margin-top:16px!important;
  padding:15px!important;
  border-radius:20px!important;
  background:linear-gradient(160deg,#073f68 0%,#075f8d 100%)!important;
  box-shadow:0 20px 38px rgba(7,63,104,.18)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.oti-premium-app .sidebar-card-heading h3,
.oti-premium-app .sidebar-help-clean h3{font-size:15px!important;letter-spacing:-.01em!important}
.oti-premium-app .sidebar-card-heading small{color:rgba(255,255,255,.63)!important;font-size:9px!important}
.oti-premium-app .sidebar-card-icon{width:34px!important;height:34px!important;border-radius:11px!important;background:rgba(255,255,255,.12)!important}
.oti-premium-app .mini-stat{padding:10px 0!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
.oti-premium-app .mini-stat span{font-size:10px!important;color:rgba(255,255,255,.72)!important}
.oti-premium-app .mini-stat strong{font-size:15px!important;color:#fff!important}
.oti-premium-app .sidebar-help-clean button{
  min-height:39px!important;border-radius:11px!important;margin-top:12px!important;
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.14)!important;
  font-size:11px!important;font-weight:700!important;color:#fff!important;
}
.oti-premium-app .sidebar-help-clean button:hover{background:rgba(255,255,255,.2)!important}

/* Barra superior */
.oti-premium-app .topbar{
  min-height:58px!important;
  border-radius:18px!important;
  padding:8px 13px!important;
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(216,224,234,.9)!important;
  box-shadow:var(--ui-shadow-sm)!important;
  backdrop-filter:saturate(160%) blur(18px)!important;
  position:sticky!important;
  top:10px!important;
  z-index:900!important;
}
.oti-premium-app .topbar-left{gap:10px!important}
.oti-premium-app .topbar-left img{width:126px!important;height:38px!important;object-fit:contain!important}
.oti-premium-app .topbar-left strong{font-size:13px!important;color:var(--ui-text)!important;font-weight:700!important}
.oti-premium-app .menu-btn,
.oti-premium-app .icon-btn{
  width:36px!important;height:36px!important;min-width:36px!important;
  padding:0!important;border-radius:11px!important;
  border:1px solid #e6edf4!important;background:#f5f8fc!important;color:#45617b!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:0!important;transition:all .18s var(--ui-ease)!important;
}
.oti-premium-app .menu-btn:hover,.oti-premium-app .icon-btn:hover{background:#eaf4fa!important;color:var(--ui-blue)!important;transform:translateY(-1px)!important}
.oti-premium-app .profile{padding:2px 6px 2px 2px!important;gap:8px!important}
.oti-premium-app .profile .avatar{
  width:36px!important;height:36px!important;border-radius:12px!important;
  background:linear-gradient(145deg,#0877af,#12a6c0)!important;
  box-shadow:0 6px 15px rgba(8,119,175,.22)!important;
  font-size:14px!important;
}
.oti-premium-app .profile strong{font-size:11px!important;color:var(--ui-text)!important}
.oti-premium-app .profile span{font-size:9px!important;color:var(--ui-text-3)!important}
.oti-premium-app .logout{
  min-height:34px!important;display:inline-flex!important;align-items:center!important;
  padding:0 10px!important;border-radius:10px!important;color:#c8323d!important;
  font-size:11px!important;font-weight:750!important;text-decoration:none!important;
}
.oti-premium-app .logout:hover{background:#fff1f2!important}

/* Hero */
.oti-premium-app .hero-panel{
  margin-top:12px!important;
  min-height:190px!important;
  padding:26px 28px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(101,216,225,.22),transparent 28%),
    linear-gradient(125deg,#06385f 0%,#075f90 58%,#0c82aa 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 18px 42px rgba(6,56,95,.16)!important;
  overflow:hidden!important;
}
.oti-premium-app .hero-panel::before{opacity:.28!important}
.oti-premium-app .hero-copy h2{
  margin:0 0 4px!important;font-size:30px!important;line-height:1.12!important;
  letter-spacing:-.035em!important;font-weight:720!important;color:#fff!important;
}
.oti-premium-app .hero-copy p{font-size:13px!important;color:rgba(255,255,255,.8)!important;margin:0 0 17px!important}
.oti-premium-app .hello-mark{
  width:30px;height:30px;border-radius:10px;display:inline-flex;vertical-align:-6px;
  align-items:center;justify-content:center;margin-left:5px;background:rgba(255,255,255,.13);color:#a9edf0;
}
.oti-premium-app .hello-mark .ui-icon{width:17px;height:17px}
.oti-premium-app .hero-search{
  width:min(420px,100%)!important;height:42px!important;border-radius:13px!important;
  background:rgba(255,255,255,.96)!important;border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:0 10px 26px rgba(4,38,67,.17)!important;overflow:hidden!important;
}
.oti-premium-app .hero-search input{height:100%!important;padding:0 15px!important;color:var(--ui-text)!important;font-size:12px!important;background:transparent!important}
.oti-premium-app .hero-search input::placeholder{color:#98a4b3!important}
.oti-premium-app .hero-search button{width:42px!important;height:42px!important;font-size:0!important;color:#35617d!important;background:#eef6fb!important;border:0!important}
.oti-premium-app .hero-register-btn,
.oti-premium-app .fase2-board-create{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  min-height:39px!important;border-radius:12px!important;padding:0 15px!important;
  border:0!important;background:#13a55d!important;color:#fff!important;
  box-shadow:0 9px 18px rgba(19,165,93,.2)!important;font-size:11px!important;font-weight:750!important;
  transition:transform .18s var(--ui-ease),box-shadow .18s var(--ui-ease),background .18s var(--ui-ease)!important;
}
.oti-premium-app .hero-register-btn:hover,.oti-premium-app .fase2-board-create:hover{transform:translateY(-1px)!important;background:#0f9553!important;box-shadow:0 12px 24px rgba(19,165,93,.24)!important}
.oti-premium-app .quick-actions{width:232px!important;gap:7px!important}
.oti-premium-app .quick-actions h3{font-size:10px!important;text-transform:uppercase!important;letter-spacing:.12em!important;color:rgba(255,255,255,.7)!important;margin-bottom:2px!important}
.oti-premium-app .quick-actions a{
  display:flex!important;align-items:center!important;
  min-height:39px!important;border-radius:12px!important;padding:0 13px!important;
  background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.13)!important;
  color:#fff!important;font-size:11px!important;font-weight:650!important;gap:9px!important;
  backdrop-filter:blur(12px)!important;transition:all .18s var(--ui-ease)!important;
}
.oti-premium-app .quick-actions a:hover{background:rgba(255,255,255,.18)!important;transform:translateX(-2px)!important}
.oti-premium-app .quick-actions a > span:not(.ui-icon){display:none!important}

/* Tarjetas, métricas y gráficas */
.oti-premium-app .kpi-row{gap:10px!important;margin:11px 0!important}
.oti-premium-app .kpi-card,
.oti-premium-app .fase2-ops-card,
.oti-premium-app .chart-card,
.oti-premium-app .recent-panel,
.oti-premium-app .shortcut-row > div,
.oti-premium-app .faculty-chart-card,
.oti-premium-app .faculty-status-card{
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--ui-line)!important;
  border-radius:17px!important;
  box-shadow:var(--ui-shadow-xs)!important;
}
.oti-premium-app .kpi-card{min-height:90px!important;padding:14px 15px!important;transition:transform .18s var(--ui-ease),box-shadow .18s var(--ui-ease)!important}
.oti-premium-app .kpi-card:hover,.oti-premium-app .fase2-ops-card:hover{transform:translateY(-2px)!important;box-shadow:var(--ui-shadow-sm)!important}
.oti-premium-app .kpi-card span,.oti-premium-app .fase2-ops-card span{
  font-size:9px!important;letter-spacing:.12em!important;color:#66758b!important;font-weight:800!important
}
.oti-premium-app .kpi-card strong,.oti-premium-app .fase2-ops-card strong{font-size:24px!important;letter-spacing:-.035em!important;color:var(--ui-text)!important;font-weight:720!important}
.oti-premium-app .kpi-card small,.oti-premium-app .fase2-ops-card small{font-size:10px!important;color:var(--ui-text-2)!important;line-height:1.35!important}
.oti-premium-app .fase2-ops-grid{gap:10px!important;margin-bottom:10px!important}
.oti-premium-app .fase2-ops-card{min-height:78px!important;padding:13px 14px!important}
.oti-premium-app .chart-grid{gap:10px!important;margin-bottom:11px!important}
.oti-premium-app .chart-card{padding:17px!important;min-height:150px!important}
.oti-premium-app .chart-head h3{font-size:14px!important;letter-spacing:-.02em!important;color:var(--ui-navy)!important}
.oti-premium-app .chart-head span{font-size:10px!important;color:var(--ui-text-2)!important}
.oti-premium-app .time-value .clock{font-size:0!important;width:42px!important;height:42px!important;border-radius:13px!important;background:#edf6fc!important;color:var(--ui-blue)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.oti-premium-app .time-value .clock::before{content:"";width:19px;height:19px;background:currentColor;-webkit-mask:url('../img/ui/clock.svg') center/contain no-repeat;mask:url('../img/ui/clock.svg') center/contain no-repeat}
.oti-premium-app .time-value strong{font-size:24px!important;letter-spacing:-.04em!important;color:var(--ui-navy)!important}

/* Bandeja y tablas */
.oti-premium-app .recent-panel{padding:15px!important;box-shadow:var(--ui-shadow-sm)!important}
.oti-premium-app .fase2-board-head{padding:0 1px 12px!important}
.oti-premium-app .fase2-board-eyebrow{font-size:9px!important;letter-spacing:.12em!important;color:#8190a3!important}
.oti-premium-app .fase2-board-title{font-size:15px!important;letter-spacing:-.02em!important;color:var(--ui-navy)!important}
.oti-premium-app .fase2-board-history{font-size:11px!important;color:#607087!important;font-weight:650!important;padding:8px 10px!important;border-radius:10px!important}
.oti-premium-app .fase2-board-history:hover{background:#f1f5f9!important;color:var(--ui-blue)!important}
.oti-premium-app .fase2-table-toolbar{
  padding:9px!important;border-radius:14px!important;background:#f7f9fc!important;border:1px solid #e8edf3!important;gap:8px!important;
}
.oti-premium-app .fase2-toolbar-copy{padding:0 5px!important}
.oti-premium-app .fase2-toolbar-copy strong{font-size:11px!important;color:var(--ui-navy)!important}
.oti-premium-app .fase2-toolbar-copy span{font-size:9px!important;color:#8190a4!important}
.oti-premium-app .fase2-chip{
  min-height:30px!important;padding:0 10px!important;border-radius:999px!important;
  font-size:9px!important;font-weight:700!important;background:#fff!important;color:#536177!important;
  border:1px solid #e3e8ef!important;box-shadow:none!important;transition:all .16s var(--ui-ease)!important;
}
.oti-premium-app .fase2-chip:hover{border-color:#b7cfdf!important;color:var(--ui-blue)!important}
.oti-premium-app .fase2-chip.is-active{background:var(--ui-navy)!important;color:#fff!important;border-color:var(--ui-navy)!important;box-shadow:0 5px 12px rgba(7,59,102,.15)!important}
.oti-premium-app .fase2-clear-filter{min-height:30px!important;border-radius:10px!important;background:#edf3f8!important;color:#315675!important;font-size:9px!important;border:0!important;padding:0 10px!important}
.oti-premium-app .fase2-table-lite{margin-top:9px!important;border:1px solid var(--ui-line)!important;border-radius:14px!important;overflow:auto!important;background:#fff!important}
.oti-premium-app .fase2-table-lite table{border-collapse:separate!important;border-spacing:0!important;min-width:900px!important}
.oti-premium-app .fase2-table-lite thead th{
  position:sticky!important;top:0!important;z-index:1!important;
  background:#f6f8fb!important;color:#677589!important;
  padding:11px 12px!important;font-size:8.5px!important;letter-spacing:.105em!important;font-weight:800!important;
  border-bottom:1px solid #e6ebf1!important;
}
.oti-premium-app .fase2-table-lite tbody td{padding:12px!important;font-size:10px!important;color:#334155!important;border-bottom:1px solid #eef1f5!important;vertical-align:middle!important}
.oti-premium-app .fase2-table-lite tbody tr{transition:background .15s ease!important}
.oti-premium-app .fase2-table-lite tbody tr:hover{background:#f8fbfd!important}
.oti-premium-app .fase2-ticket-code{font-size:10px!important;color:var(--ui-navy)!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;gap:6px!important}
.oti-premium-app .fase2-ticket-code::before{content:"#";width:20px;height:20px;border-radius:7px;background:#edf6fc;color:var(--ui-blue);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.oti-premium-app .status-pill,.oti-premium-app .priority-pill,.oti-premium-app .service-pill{
  border-radius:999px!important;padding:5px 8px!important;font-size:8.5px!important;font-weight:750!important;line-height:1.1!important;border:1px solid transparent!important;white-space:nowrap!important;
}
.oti-premium-app .status-pill.nuevo{background:#edf6ff!important;color:#1766a5!important;border-color:#d9eafa!important}
.oti-premium-app .status-pill.asignado{background:#fff5e6!important;color:#a15b00!important;border-color:#f9e4bd!important}
.oti-premium-app .status-pill.proceso{background:#e9f8fc!important;color:#087d9d!important;border-color:#d4eff5!important}
.oti-premium-app .status-pill.atendido{background:#f0ebff!important;color:#6e4fc0!important;border-color:#e1d8ff!important}
.oti-premium-app .priority-pill.media{background:#fff7df!important;color:#9a6500!important;border-color:#f4e5b2!important}
.oti-premium-app .priority-pill.alta{background:#fff0f0!important;color:#b92f38!important;border-color:#f6d6d9!important}
.oti-premium-app .priority-pill.baja{background:#eefaf3!important;color:#168354!important;border-color:#d4f0df!important}
.oti-premium-app .dash-btn,.oti-premium-app .mini-link.modal-link{
  min-height:31px!important;border-radius:10px!important;padding:0 10px!important;font-size:9px!important;font-weight:700!important;box-shadow:none!important;gap:5px!important;
}
.oti-premium-app .dash-btn.detail,.oti-premium-app .mini-link.modal-link{background:#f2f6f9!important;color:var(--ui-navy)!important;border:1px solid #e1e8ee!important}
.oti-premium-app .dash-btn.process{background:#1473e6!important;color:#fff!important}
.oti-premium-app .dash-btn.assign{background:#e9891b!important;color:#fff!important}
.oti-premium-app .dash-btn.validate{background:#7655d8!important;color:#fff!important}
.oti-premium-app .fase2-empty-state{min-height:104px!important;color:var(--ui-text-2)!important;gap:10px!important}
.oti-premium-app .fase2-empty-state > span{width:38px!important;height:38px!important;border-radius:12px!important;background:#eef7fb!important;color:var(--ui-blue)!important;font-size:17px!important}
.oti-premium-app .fase2-empty-state strong{font-size:12px!important;color:var(--ui-navy)!important}
.oti-premium-app .fase2-empty-state small{font-size:9.5px!important;color:#7b8798!important}

.oti-premium-app .shortcut-row,.oti-premium-app .bottom-features{gap:10px!important;margin-top:11px!important}
.oti-premium-app .shortcut-row > div,.oti-premium-app .bottom-features > div{min-height:68px!important;padding:12px 14px!important;transition:transform .18s var(--ui-ease),box-shadow .18s var(--ui-ease)!important}
.oti-premium-app .shortcut-row > div:hover,.oti-premium-app .bottom-features > div:hover{transform:translateY(-2px)!important;box-shadow:var(--ui-shadow-sm)!important}
.oti-premium-app .shortcut-row > div > span,.oti-premium-app .bottom-features > div > span{width:34px!important;height:34px!important;border-radius:11px!important;background:#eef6fc!important;color:var(--ui-blue)!important;font-size:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
.oti-premium-app .shortcut-row > div > span::before,.oti-premium-app .bottom-features > div > span::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:url('../img/ui/tickets.svg') center/contain no-repeat;mask:url('../img/ui/tickets.svg') center/contain no-repeat}
.oti-premium-app.role-faculty .bottom-features > div:nth-child(1) > span::before{-webkit-mask-image:url('../img/ui/plus.svg');mask-image:url('../img/ui/plus.svg')}
.oti-premium-app.role-admin .bottom-features > div:nth-child(1) > span::before,.oti-premium-app.role-technical .bottom-features > div:nth-child(1) > span::before{-webkit-mask-image:url('../img/ui/report.svg');mask-image:url('../img/ui/report.svg')}
.oti-premium-app.role-admin .bottom-features > div:nth-child(2) > span::before,.oti-premium-app.role-technical .bottom-features > div:nth-child(2) > span::before{-webkit-mask-image:url('../img/ui/tickets.svg');mask-image:url('../img/ui/tickets.svg')}
.oti-premium-app .shortcut-row > div:nth-child(3) > span::before,.oti-premium-app .bottom-features > div:nth-child(3) > span::before{-webkit-mask-image:url('../img/ui/history.svg');mask-image:url('../img/ui/history.svg')}
.oti-premium-app .shortcut-row > div:nth-child(4) > span::before,.oti-premium-app .bottom-features > div:nth-child(4) > span::before{-webkit-mask-image:url('../img/ui/shield.svg');mask-image:url('../img/ui/shield.svg')}
.oti-premium-app .shortcut-row strong,.oti-premium-app .bottom-features strong{font-size:11px!important;color:var(--ui-navy)!important}
.oti-premium-app .shortcut-row p,.oti-premium-app .bottom-features p{font-size:9px!important;color:#7d8999!important}

/* Modales */
.oti-premium-app .ticket-modal-backdrop,
.oti-premium-app .oti-modal-backdrop,
.oti-premium-app .modal-overlay,
.oti-premium-app .assignment-modal-overlay,
.oti-premium-app .users-modal-overlay{
  background:rgba(20,31,48,.56)!important;
  backdrop-filter:blur(13px) saturate(120%)!important;
}
.oti-premium-app .ticket-modal-card,
.oti-premium-app .oti-modal-card,
.oti-premium-app .assignment-modal-card,
.oti-premium-app .users-modal-card,
.oti-premium-app .modal-content{
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:var(--ui-shadow-lg)!important;
  background:rgba(255,255,255,.98)!important;
}
.oti-premium-app .ticket-modal-close,
.oti-premium-app .oti-modal-close,
.oti-premium-app .assignment-flow-close,
.oti-premium-app .users-modal-close,
.oti-premium-app .modal-close{
  width:40px!important;height:40px!important;border-radius:13px!important;
  background:#eff5f9!important;color:var(--ui-navy)!important;border:0!important;font-size:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;transition:all .18s var(--ui-ease)!important;
}
.oti-premium-app .ticket-modal-close::before,
.oti-premium-app .oti-modal-close::before,
.oti-premium-app .assignment-flow-close::before,
.oti-premium-app .users-modal-close::before,
.oti-premium-app .modal-close::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url('../img/ui/x.svg') center/contain no-repeat;mask:url('../img/ui/x.svg') center/contain no-repeat}
.oti-premium-app .ticket-modal-close:hover,.oti-premium-app .oti-modal-close:hover,.oti-premium-app .users-modal-close:hover{background:#e4eef5!important;transform:rotate(4deg)!important}
.oti-premium-app .ticket-modal-head,
.oti-premium-app .oti-registration-hero,
.oti-premium-app .assignment-flow-head,
.oti-premium-app .users-modal-hero{
  background:
    radial-gradient(circle at 100% 0%,rgba(92,211,220,.22),transparent 30%),
    linear-gradient(135deg,#063d68,#087fae)!important;
  border-radius:21px!important;
  box-shadow:none!important;
}
.oti-premium-app .ticket-modal-head h3,
.oti-premium-app .assignment-flow-head h3,
.oti-premium-app .users-modal-hero h2{letter-spacing:-.035em!important;font-weight:720!important}
.oti-premium-app .ticket-modal-grid div,
.oti-premium-app .ticket-detail-summary > div,
.oti-premium-app .ticket-detail-panel,
.oti-premium-app .assignment-summary-card,
.oti-premium-app .users-stat-card{
  background:#f8fafc!important;border:1px solid #e5eaf1!important;border-radius:15px!important;box-shadow:none!important;
}

/* Formularios y asistente */
.oti-premium-app input[type="text"],
.oti-premium-app input[type="search"],
.oti-premium-app input[type="password"],
.oti-premium-app input[type="email"],
.oti-premium-app select,
.oti-premium-app textarea{
  border:1px solid #dfe6ee!important;
  background:#f9fbfd!important;
  color:var(--ui-text)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.oti-premium-app input:hover,.oti-premium-app select:hover,.oti-premium-app textarea:hover{border-color:#c9d5e1!important;background:#fff!important}
.oti-premium-app input:focus,.oti-premium-app select:focus,.oti-premium-app textarea:focus{border-color:#6bb8d6!important;background:#fff!important;box-shadow:0 0 0 4px rgba(17,168,197,.11)!important;outline:none!important}
.oti-premium-app select{background-image:url('../img/ui/chevron-down.svg')!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px!important;padding-right:36px!important;-webkit-appearance:none!important;appearance:none!important}
.oti-premium-app label{color:var(--ui-navy)!important;font-weight:680!important}
.oti-premium-app .oti-wizard-steps{
  border:1px solid #e5eaf1!important;border-radius:17px!important;background:#fff!important;padding:8px!important;box-shadow:var(--ui-shadow-xs)!important;
}
.oti-premium-app .oti-wizard-step{border-radius:12px!important;min-height:50px!important}
.oti-premium-app .oti-wizard-step.is-active{background:#eaf6fb!important;color:#086d9e!important}
.oti-premium-app .oti-wizard-step.is-complete{color:#138354!important}
.oti-premium-app .oti-wizard-panel{background:#fff!important;border:1px solid #e4eaf1!important;border-radius:19px!important;padding:12px!important}
.oti-premium-app .oti-wizard-banner{border-radius:16px!important;padding:13px 15px!important;background:linear-gradient(135deg,#07517f,#0983ad)!important}
.oti-premium-app .oti-guided-section{border:1px solid #e5eaf1!important;border-radius:16px!important;background:#fbfcfe!important;padding:12px!important}
.oti-premium-app .oti-guided-option{
  min-height:52px!important;border-radius:13px!important;border:1px solid #e1e7ef!important;background:#fff!important;transition:all .16s var(--ui-ease)!important;
}
.oti-premium-app .oti-guided-option:hover{border-color:#b8d5e4!important;background:#f7fbfd!important;transform:translateY(-1px)!important}
.oti-premium-app .oti-guided-option.is-selected{background:#eaf7fc!important;border-color:#59b4d3!important;box-shadow:0 0 0 3px rgba(17,168,197,.09)!important}
.oti-premium-app .oti-guided-option .oti-option-control{border-width:1.5px!important}
.oti-premium-app .oti-wizard-actions{
  background:rgba(255,255,255,.9)!important;backdrop-filter:blur(14px)!important;border-top:1px solid #e6ebf1!important;padding:10px 13px!important;
}
.oti-premium-app .oti-wizard-next,.oti-premium-app .oti-wizard-submit,.oti-premium-app .btn.primary,
.oti-premium-app button[type="submit"]:not(.danger):not(.delete-btn){
  border-radius:12px!important;min-height:40px!important;font-weight:720!important;box-shadow:0 8px 18px rgba(8,120,185,.16)!important;
}
.oti-premium-app .oti-wizard-submit{background:#15a55f!important}
.oti-premium-app .oti-wizard-back,.oti-premium-app .oti-wizard-cancel{border-radius:12px!important;min-height:40px!important}
.oti-premium-app .oti-review-card{border-radius:17px!important;border:1px solid #e4eaf1!important;background:#f7fbfd!important}
.oti-premium-app .oti-review-item{border-radius:12px!important;background:#fff!important;border:1px solid #e6ebf0!important}
.oti-premium-app .oti-file-picker{border:1px dashed #bcd3e1!important;background:#f8fbfd!important;border-radius:14px!important}

/* Gestión de usuarios */
.oti-premium-app .users-modal-card{width:min(1100px,96vw)!important;padding:14px!important}
.oti-premium-app .users-modal-hero{padding:18px 20px!important}
.oti-premium-app .users-modal-hero h2{font-size:24px!important}
.oti-premium-app .users-stats-grid{gap:9px!important}
.oti-premium-app .users-stat-card{min-height:70px!important;padding:11px 12px!important}
.oti-premium-app .users-stat-card .stat-icon{width:34px!important;height:34px!important;border-radius:11px!important}
.oti-premium-app .users-stat-card strong{font-size:21px!important;letter-spacing:-.035em!important}
.oti-premium-app .users-create-panel,.oti-premium-app .users-directory-panel,.oti-premium-app .teams-panel{border:1px solid #e4eaf1!important;border-radius:19px!important;background:#fff!important;box-shadow:var(--ui-shadow-xs)!important}
.oti-premium-app .users-form-shell{background:#f8fafc!important;border:1px solid #e6ebf1!important;border-radius:15px!important}
.oti-premium-app .users-directory-table thead th{background:#073b66!important;font-size:8.5px!important;letter-spacing:.1em!important}
.oti-premium-app .users-directory-table tbody td{font-size:10px!important;border-bottom:1px solid #edf1f5!important}
.oti-premium-app .users-directory-table tbody tr:hover{background:#f8fbfd!important}
.oti-premium-app .user-avatar{border-radius:11px!important}
.oti-premium-app .user-role-pill,.oti-premium-app .user-status-pill{font-size:8.5px!important;border-radius:999px!important}
.oti-premium-app .user-action-btn{border-radius:10px!important;min-height:31px!important;font-size:9px!important}

/* Detalle rápido operativo */
.oti-premium-app .ticket-detail-operational-card{border-radius:26px!important}
.oti-premium-app .ticket-detail-operational-hero{border-radius:21px!important;background:linear-gradient(135deg,#063d68,#0981ae)!important}
.oti-premium-app .ticket-detail-operational-hero h3{font-weight:720!important;letter-spacing:-.04em!important}
.oti-premium-app .ticket-detail-section{border:1px solid #e5eaf1!important;background:#fff!important;border-radius:18px!important;box-shadow:var(--ui-shadow-xs)!important}
.oti-premium-app .ticket-detail-data-item{background:#f8fafc!important;border:1px solid #e6ebf1!important;border-radius:13px!important}
.oti-premium-app .ticket-detail-chip{border-radius:999px!important;font-size:9px!important}

/* Página completa de detalle */
.oti-premium-app .page-shell{min-height:100vh!important;background:transparent!important}
.oti-premium-app .page-shell > .topbar{margin:12px auto 0!important;max-width:1420px!important}
.oti-premium-app .page-shell .content{max-width:1420px!important;margin:0 auto!important;padding:16px 18px 30px!important}
.oti-premium-app .ticket-hero{
  border-radius:24px!important;padding:24px 26px!important;
  background:linear-gradient(125deg,#06395f,#0879a7)!important;
  box-shadow:0 18px 42px rgba(6,57,95,.15)!important;
}
.oti-premium-app .ticket-hero h1{letter-spacing:-.045em!important;font-weight:720!important}
.oti-premium-app .summary-grid{gap:10px!important}
.oti-premium-app .summary-grid article{border:1px solid #e4eaf1!important;border-radius:16px!important;background:#fff!important;box-shadow:var(--ui-shadow-xs)!important}
.oti-premium-app .workspace{gap:12px!important}
.oti-premium-app .card{border:1px solid #e4eaf1!important;border-radius:20px!important;background:#fff!important;box-shadow:var(--ui-shadow-xs)!important}
.oti-premium-app .section-head h2{font-weight:700!important;letter-spacing:-.025em!important;color:var(--ui-navy)!important}
.oti-premium-app .section-kicker{letter-spacing:.12em!important;color:#7790a5!important}
.oti-premium-app .request-box,.oti-premium-app .guided-report-card,.oti-premium-app .data-grid>div,.oti-premium-app .readonly-box,.oti-premium-app .role-context{border-radius:14px!important;border:1px solid #e5eaf1!important;background:#f8fafc!important}
.oti-premium-app .guided-report-chips b{border-radius:999px!important;background:#edf6fb!important;color:#176f9b!important;border:1px solid #d5eaf2!important}
.oti-premium-app .evidence-card{border:1px solid #e5eaf1!important;border-radius:16px!important;overflow:hidden!important;box-shadow:none!important}
.oti-premium-app .action-button{border-radius:14px!important;box-shadow:none!important}
.oti-premium-app .action-details{border-radius:14px!important;border-color:#e4eaf1!important}
.oti-premium-app .comment-form textarea{background:#f9fbfd!important}


/* Botones y navegación de páginas internas */
.oti-premium-app .btn{
  min-height:40px!important;padding:0 14px!important;border-radius:12px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  border:1px solid transparent!important;font-size:11px!important;font-weight:720!important;text-decoration:none!important;cursor:pointer!important;
}
.oti-premium-app .btn.primary{background:linear-gradient(135deg,#0875ad,#0b8eb4)!important;color:#fff!important;border-color:transparent!important}
.oti-premium-app .btn.ghost{background:#f3f6f9!important;color:var(--ui-navy)!important;border-color:#e2e8ef!important;box-shadow:none!important}
.oti-premium-app .btn.ghost:hover{background:#eaf2f7!important;color:var(--ui-blue)!important}
.oti-premium-app .btn.danger{background:#d93a46!important;color:#fff!important}
.oti-premium-app .page-shell .brand{gap:10px!important}
.oti-premium-app .page-shell .brand img{height:36px!important;width:auto!important}
.oti-premium-app .page-shell .crumb{font-size:11px!important;color:#66758a!important}
.oti-premium-app .page-shell .crumb a{font-weight:700!important;color:var(--ui-navy)!important}
.oti-premium-app .page-shell .userbox{gap:8px!important}
.oti-premium-app .page-shell .userbox .avatar{border-radius:11px!important;background:linear-gradient(145deg,#0876ad,#10a1bd)!important}
.oti-premium-app .page-shell .userbox strong{font-size:10.5px!important}
.oti-premium-app .page-shell .userbox small{font-size:9px!important;color:#7c899a!important}
.oti-premium-app .page-shell .userbox>a{padding:8px 9px!important;border-radius:10px!important;color:#c9333f!important;font-size:10px!important;font-weight:750!important}
.oti-premium-app .hero-actions{gap:8px!important}

/* Login */
.oti-login-page.oti-premium-app .login-shell{font-family:var(--ui-font)!important}
.oti-login-page.oti-premium-app .login-card,
.oti-login-page.oti-premium-app .login-visual{
  border-radius:26px!important;border:1px solid rgba(225,231,238,.9)!important;box-shadow:var(--ui-shadow-md)!important;
}
.oti-login-page.oti-premium-app .login-card{background:rgba(255,255,255,.95)!important;backdrop-filter:blur(16px)!important}
.oti-login-page.oti-premium-app .login-card h1{font-weight:720!important;letter-spacing:-.04em!important}
.oti-login-page.oti-premium-app .login-submit{border-radius:12px!important;background:linear-gradient(135deg,#07517f,#087fb1)!important}

/* Vistas administrativas genéricas */
.oti-premium-app .config-shell,.oti-premium-app .dashboard-shell,.oti-premium-app .page-container,.oti-premium-app .app-shell{font-family:var(--ui-font)!important}
.oti-premium-app .panel,.oti-premium-app .config-card,.oti-premium-app .metric-card,.oti-premium-app .table-card{
  border-radius:18px!important;border-color:#e4eaf1!important;box-shadow:var(--ui-shadow-xs)!important;
}

/* Micro-interacciones */
.oti-premium-app button,.oti-premium-app a,.oti-premium-app input,.oti-premium-app select,.oti-premium-app textarea{transition-duration:.17s!important;transition-timing-function:var(--ui-ease)!important}
@media (prefers-reduced-motion:reduce){
  .oti-premium-app *, .oti-premium-app *::before, .oti-premium-app *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Responsive */
@media (max-width:1180px){
  .oti-premium-app .oti-app{grid-template-columns:212px minmax(0,1fr)!important}
  .oti-premium-app .oti-sidebar{width:212px!important}
  .oti-premium-app .oti-main{margin-left:0!important}
  .oti-premium-app .quick-actions{width:210px!important}
  .oti-premium-app .hero-panel{padding:23px!important}
}
@media (max-width:900px){
  .oti-premium-app .oti-app{grid-template-columns:1fr!important}
  .oti-premium-app .oti-sidebar{position:fixed!important;left:0!important;top:0!important;height:100vh!important;width:min(280px,86vw)!important;transform:translateX(-105%)!important;box-shadow:25px 0 65px rgba(15,23,42,.18)!important;z-index:1000!important}
  body.oti-premium-app.fase2-sidebar-open .oti-sidebar,.oti-premium-app .oti-sidebar.sidebar-open,.oti-premium-app .oti-sidebar.is-open{transform:translateX(0)!important}
  .oti-premium-app .oti-main{margin-left:0!important;padding:10px!important}
  .oti-premium-app .topbar{top:6px!important}
  .oti-premium-app .hero-panel{grid-template-columns:1fr!important;min-height:auto!important;padding:22px!important}
  .oti-premium-app .quick-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .oti-premium-app .quick-actions h3{grid-column:1/-1!important}
  .oti-premium-app .chart-grid{grid-template-columns:1fr!important}
  .oti-premium-app .workspace{grid-template-columns:1fr!important}
  .oti-premium-app .side-column .sticky{position:static!important}
}
@media (max-width:640px){
  .oti-premium-app .oti-main{padding:7px!important}
  .oti-premium-app .topbar{border-radius:15px!important;padding:7px 9px!important}
  .oti-premium-app .topbar-left img{width:90px!important}
  .oti-premium-app .topbar-left strong{display:none!important}
  .oti-premium-app .profile>div:not(.avatar){display:none!important}
  .oti-premium-app .logout{padding:0 5px!important}
  .oti-premium-app .hero-panel{border-radius:19px!important;padding:19px 17px!important}
  .oti-premium-app .hero-copy h2{font-size:24px!important}
  .oti-premium-app .quick-actions{grid-template-columns:1fr!important}
  .oti-premium-app .kpi-row,.oti-premium-app .fase2-ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .oti-premium-app .kpi-card,.oti-premium-app .fase2-ops-card{min-height:82px!important}
  .oti-premium-app .recent-panel{padding:10px!important;border-radius:17px!important}
  .oti-premium-app .fase2-table-toolbar{align-items:stretch!important}
  .oti-premium-app .fase2-chip-group{overflow:auto!important;padding-bottom:2px!important;flex-wrap:nowrap!important}
  .oti-premium-app .shortcut-row,.oti-premium-app .bottom-features{grid-template-columns:1fr!important}
  .oti-premium-app .ticket-modal-card,.oti-premium-app .oti-modal-card,.oti-premium-app .users-modal-card{width:100%!important;max-height:96vh!important;border-radius:21px!important;padding:10px!important}
  .oti-premium-app .oti-guided-options{grid-template-columns:1fr!important}
  .oti-premium-app .oti-wizard-step small{display:none!important}
  .oti-premium-app .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .oti-premium-app .page-shell .content{padding:10px!important}
}

@media print{
  body.oti-premium-app{background:#fff!important;color:#111827!important}
  .oti-premium-app .topbar,
  .oti-premium-app .oti-sidebar,
  .oti-premium-app .hero-actions,
  .oti-premium-app .logout,
  .oti-premium-app .menu-btn,
  .oti-premium-app .icon-btn{box-shadow:none!important;backdrop-filter:none!important}
  .oti-premium-app .card,
  .oti-premium-app .summary-grid article,
  .oti-premium-app .panel,
  .oti-premium-app .table-card{box-shadow:none!important;background:#fff!important}
}