/*
 * FASE 5.2 · ESTILO GLOBAL PARA TODAS LAS HOJAS OTI
 * Capa visual transversal. No modifica flujos, datos ni permisos.
 * Se carga al final de las hojas visuales para unificar el sistema.
 */
:root{
  --oti-blue:#003B88;
  --oti-blue-2:#0A4E9F;
  --oti-cyan:#00B5DC;
  --oti-cyan-2:#079CBF;
  --oti-green:#5BBD49;
  --oti-ink:#101828;
  --oti-ink-2:#344054;
  --oti-muted:#667085;
  --oti-line:#E4E7EC;
  --oti-bg:#EFF2F5;
  --oti-card:#FFFFFF;
  --oti-soft-blue:#EDF4FF;
  --oti-soft-cyan:#ECFAFD;
  --oti-soft-green:#F0FAED;
  --oti-danger:#D92D20;
  --oti-warning:#F79009;
  --oti-radius-xl:28px;
  --oti-radius-lg:22px;
  --oti-radius-md:16px;
  --oti-shadow:0 16px 36px rgba(16,24,40,.06);
  --oti-shadow-lg:0 28px 70px rgba(16,24,40,.12);
  --oti-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

html{background:var(--oti-bg)}
body.oti-global-page{
  margin:0;
  font-family:var(--oti-font)!important;
  color:var(--oti-ink)!important;
  background:
    radial-gradient(circle at 92% -10%,rgba(0,181,220,.09),transparent 27%),
    radial-gradient(circle at 8% 4%,rgba(91,189,73,.045),transparent 24%),
    var(--oti-bg)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.oti-global-page *{box-sizing:border-box}
body.oti-global-page ::selection{background:rgba(0,181,220,.18);color:var(--oti-blue)}
body.oti-global-page :focus-visible{outline:3px solid rgba(0,181,220,.22)!important;outline-offset:2px!important}
body.oti-global-page a{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}

/* ---------- Superficies / contenedores de páginas independientes ---------- */
body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > .container,
body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > .wrap,
body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > .page,
body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > main.page{
  width:min(1420px,calc(100% - 32px));
  margin:18px auto!important;
}
body.oti-global-page > .container,
body.oti-global-page > .wrap,
body.oti-global-page > .page,
body.oti-global-page > main.page{
  border-radius:var(--oti-radius-xl)!important;
}

/* ---------- Cabeceras blancas ---------- */
body.oti-global-page > .container > .header,
body.oti-global-page > .page > .topbar,
body.oti-global-page .page-shell > .topbar,
body.oti-global-page .attention-topbar,
body.oti-global-page .rr-topbar,
body.oti-global-page .conformity-topbar{
  border:1px solid rgba(17,24,39,.06)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 10px 30px rgba(16,24,40,.055)!important;
  backdrop-filter:blur(18px) saturate(145%);
}
body.oti-global-page > .container > .header h1,
body.oti-global-page > .page > .topbar h1,
body.oti-global-page .page-shell > .topbar h1{
  color:var(--oti-ink)!important;
  letter-spacing:-.045em!important;
  font-weight:720!important;
}
body.oti-global-page .subtitle,
body.oti-global-page .sub,
body.oti-global-page .print-meta{color:var(--oti-muted)!important}

/* ---------- Hero corporativo ---------- */
body.oti-global-page > .wrap > .hero,
body.oti-global-page > .page > .hero,
body.oti-global-page > main.page > .hero,
body.oti-global-page .report-hero,
body.oti-global-page .attention-hero,
body.oti-global-page .rr-hero,
body.oti-global-page .conformity-hero,
body.oti-global-page .ticket-hero{
  position:relative;
  overflow:hidden;
  border:0!important;
  border-radius:var(--oti-radius-xl)!important;
  background:
    radial-gradient(circle at 90% 18%,rgba(0,181,220,.30),transparent 30%),
    radial-gradient(circle at 63% 125%,rgba(91,189,73,.20),transparent 32%),
    linear-gradient(135deg,#003B88 0%,#07539B 58%,#087E96 100%)!important;
  color:#fff!important;
  box-shadow:0 22px 54px rgba(0,59,136,.16)!important;
}
body.oti-global-page > .wrap > .hero::after,
body.oti-global-page > .page > .hero::after,
body.oti-global-page > main.page > .hero::after,
body.oti-global-page .report-hero::after,
body.oti-global-page .attention-hero::after,
body.oti-global-page .rr-hero::after,
body.oti-global-page .conformity-hero::after,
body.oti-global-page .ticket-hero::after{
  content:"";
  position:absolute;
  right:-75px;
  top:-95px;
  width:300px;
  height:300px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 40px rgba(255,255,255,.025),0 0 0 88px rgba(255,255,255,.016);
  pointer-events:none;
}
body.oti-global-page > .wrap > .hero h1,
body.oti-global-page > .page > .hero h1,
body.oti-global-page > main.page > .hero h1,
body.oti-global-page .report-hero h1,
body.oti-global-page .attention-hero h1,
body.oti-global-page .rr-hero h1,
body.oti-global-page .conformity-hero h1,
body.oti-global-page .ticket-hero h1{
  position:relative;
  z-index:1;
  color:#fff!important;
  letter-spacing:-.045em!important;
  font-weight:720!important;
}
body.oti-global-page > .wrap > .hero p,
body.oti-global-page > .page > .hero p,
body.oti-global-page > main.page > .hero p,
body.oti-global-page .report-hero p,
body.oti-global-page .attention-hero p,
body.oti-global-page .rr-hero p,
body.oti-global-page .conformity-hero p,
body.oti-global-page .ticket-hero p{position:relative;z-index:1;color:rgba(255,255,255,.78)!important}
body.oti-global-page .eyebrow,
body.oti-global-page .section-kicker{font-weight:820!important;letter-spacing:.13em!important}

/* ---------- Cards Bento ---------- */
body.oti-global-page .card,
body.oti-global-page .panel,
body.oti-global-page .kpi,
body.oti-global-page .summary-card,
body.oti-global-page .rr-card,
body.oti-global-page .rr-decision-card,
body.oti-global-page .user-management-card,
body.oti-global-page .storage-health-card,
body.oti-global-page .admin-control-zone,
body.oti-global-page .production-zone,
body.oti-global-page .report-card,
body.oti-global-page .health,
body.oti-global-page .filters,
body.oti-global-page .filter-tabs,
body.oti-global-page .info-box{
  border:1px solid rgba(17,24,39,.065)!important;
  border-radius:var(--oti-radius-lg)!important;
  background:#fff!important;
  box-shadow:var(--oti-shadow)!important;
}
body.oti-global-page .kpi,
body.oti-global-page .summary-card{
  position:relative;
  overflow:hidden;
}
body.oti-global-page .kpi::after,
body.oti-global-page .summary-card::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:10px;height:15px;
  background:repeating-linear-gradient(90deg,var(--oti-cyan) 0 3px,transparent 3px 8px);
  opacity:.10;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);
  mask-image:linear-gradient(180deg,transparent,#000);
  pointer-events:none;
}
body.oti-global-page .kpi span,
body.oti-global-page .summary-card span{
  color:var(--oti-muted)!important;
  font-size:9px!important;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:800!important;
}
body.oti-global-page .kpi strong,
body.oti-global-page .summary-card strong{
  color:var(--oti-ink)!important;
  letter-spacing:-.045em!important;
  font-weight:700!important;
}

/* ---------- Títulos de secciones ---------- */
body.oti-global-page h1,
body.oti-global-page h2,
body.oti-global-page h3{letter-spacing:-.025em}
body.oti-global-page .section-title,
body.oti-global-page .panel-title h3,
body.oti-global-page .card h2,
body.oti-global-page .card h3{color:var(--oti-ink)!important}

/* ---------- Formularios ---------- */
body.oti-global-page input:not([type="checkbox"]):not([type="radio"]),
body.oti-global-page select,
body.oti-global-page textarea{
  border:1px solid #DDE3EA!important;
  border-radius:12px!important;
  background:#FAFBFC!important;
  color:var(--oti-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
body.oti-global-page input:not([type="checkbox"]):not([type="radio"]):hover,
body.oti-global-page select:hover,
body.oti-global-page textarea:hover{background:#fff!important;border-color:#C9D4DF!important}
body.oti-global-page input:not([type="checkbox"]):not([type="radio"]):focus,
body.oti-global-page select:focus,
body.oti-global-page textarea:focus{
  outline:none!important;
  background:#fff!important;
  border-color:var(--oti-cyan)!important;
  box-shadow:0 0 0 4px rgba(0,181,220,.09)!important;
}
body.oti-global-page label{color:#24364B!important;font-weight:700!important}

/* ---------- Botones ---------- */
body.oti-global-page .btn,
body.oti-global-page button.btn,
body.oti-global-page a.btn,
body.oti-global-page button[type="submit"]{
  border-radius:12px!important;
  font-family:var(--oti-font)!important;
  font-weight:760!important;
}
body.oti-global-page .btn:not(.gray):not(.green):not(.light):not(.outline):not(.secondary),
body.oti-global-page a.btn.primary,
body.oti-global-page button.btn.primary{
  background:var(--oti-blue)!important;
  color:#fff!important;
  border-color:var(--oti-blue)!important;
  box-shadow:0 8px 18px rgba(0,59,136,.14)!important;
}
body.oti-global-page .btn.green{background:var(--oti-green)!important;color:#fff!important}
body.oti-global-page .btn.gray,
body.oti-global-page .btn.light,
body.oti-global-page .btn.outline{
  background:#fff!important;
  color:var(--oti-blue)!important;
  border:1px solid #DDE5EE!important;
  box-shadow:none!important;
}
body.oti-global-page .btn:hover,
body.oti-global-page button[type="submit"]:hover{transform:translateY(-1px)}

/* ---------- Tablas ---------- */
body.oti-global-page table{border-collapse:separate;border-spacing:0}
body.oti-global-page table thead th{
  background:#F7F9FB!important;
  color:#778195!important;
  border-bottom:1px solid #E6EAF0!important;
  font-size:9px!important;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:820!important;
}
body.oti-global-page table tbody td{
  border-bottom:1px solid #EEF1F4!important;
  color:#344054!important;
}
body.oti-global-page table tbody tr:hover td{background:#FAFBFC!important}

/* ---------- Badges / estados ---------- */
body.oti-global-page .badge,
body.oti-global-page .status,
body.oti-global-page .status-pill,
body.oti-global-page .pill-state,
body.oti-global-page .pill-user{
  border-radius:999px!important;
  font-weight:760!important;
}

/* =========================================================
   USUARIOS · misma estética del dashboard
   ========================================================= */
body.oti-global-page .full-users-modal{
  width:min(1360px,95vw)!important;
  max-height:94vh!important;
  padding:16px!important;
  border:1px solid rgba(17,24,39,.07)!important;
  border-radius:28px!important;
  background:#F8FAFC!important;
  box-shadow:var(--oti-shadow-lg)!important;
}
body.oti-global-page .users-modal-hero{
  min-height:112px!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:14px!important;
  padding:20px 64px 20px 18px!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(0,181,220,.34),transparent 31%),
    linear-gradient(135deg,#003B88,#087B9A)!important;
}
body.oti-global-page .users-hero-icon{width:54px!important;height:54px!important;border-radius:16px!important}
body.oti-global-page .users-hero-copy>span{font-size:9px!important;letter-spacing:.16em!important}
body.oti-global-page .users-hero-copy h2{margin:4px 0 3px!important;font-size:23px!important;line-height:1.08!important}
body.oti-global-page .users-hero-copy p{font-size:12px!important;line-height:1.45!important}
body.oti-global-page .users-back-button{min-height:40px!important;padding:0 14px!important;border-radius:12px!important;font-size:11px!important}
body.oti-global-page .users-stat-grid.users-stat-grid-hierarchy{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;margin:12px 0 14px!important}
body.oti-global-page .users-stat-card{min-height:84px!important;padding:14px 15px 13px!important;border-radius:18px!important;background:#fff!important}
body.oti-global-page .users-stat-card:after{height:4px!important}
body.oti-global-page .users-stat-card .stat-icon{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:12px!important;font-size:15px!important}
body.oti-global-page .users-stat-card small{font-size:8.8px!important;letter-spacing:.11em!important}
body.oti-global-page .users-stat-card strong{font-size:20px!important;margin:4px 0 2px!important}
body.oti-global-page .users-stat-card p{font-size:9.5px!important;line-height:1.32!important}
body.oti-global-page .user-management-card{padding:16px!important;border-radius:22px!important}
body.oti-global-page .users-team-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
body.oti-global-page .users-team-card{padding:12px!important;border-radius:16px!important;min-height:128px!important;background:linear-gradient(145deg,#fff,#F8FBFE)!important}
body.oti-global-page .team-card-head strong{font-size:12px!important}
body.oti-global-page .team-member{padding:7px 8px!important;border-radius:10px!important}
body.oti-global-page .bulk-users-stats-four{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
body.oti-global-page .bulk-users-stats>div{padding:12px!important;border-radius:14px!important}
body.oti-global-page .bulk-users-stats>div>strong{font-size:19px!important}
body.oti-global-page .bulk-users-actions-master{padding:10px 12px!important;border:1px solid #E5EDF4!important;border-radius:14px!important;background:#F7FAFC!important}
body.oti-global-page .create-user-form-pro{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;padding:16px!important;border-radius:18px!important;background:#F7F9FC!important}
body.oti-global-page .create-user-form-pro input,
body.oti-global-page .create-user-form-pro select{height:42px!important}
body.oti-global-page .users-filter-bar{border-radius:15px!important;background:#F6F9FC!important}
body.oti-global-page .users-admin-table-wrap{border-radius:16px!important;max-height:410px!important}

/* =========================================================
   REGISTRO MANUAL
   ========================================================= */
body.oti-global-page.oti-register-page{padding:18px!important}
body.oti-global-page.oti-register-page > .wrap{max-width:1040px!important}
body.oti-global-page.oti-register-page .card{padding:18px!important;border-radius:28px!important}
body.oti-global-page.oti-register-page .head{
  position:relative;
  overflow:hidden;
  padding:24px!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(0,181,220,.3),transparent 30%),
    linear-gradient(135deg,#003B88,#087B9A)!important;
  box-shadow:0 16px 34px rgba(0,59,136,.14)!important;
}
body.oti-global-page.oti-register-page .head h1{font-size:30px!important;letter-spacing:-.045em!important}
body.oti-global-page.oti-register-page .grid{gap:15px!important}
body.oti-global-page.oti-register-page label{font-size:12px!important}
body.oti-global-page.oti-register-page input,
body.oti-global-page.oti-register-page select{min-height:44px!important}
body.oti-global-page.oti-register-page textarea{min-height:130px!important}
body.oti-global-page.oti-register-page .actions a.btn{background:#fff!important;color:var(--oti-blue)!important;border:1px solid #D9E2EB!important}
body.oti-global-page.oti-register-page .actions button{background:var(--oti-blue)!important;min-height:44px!important}

/* =========================================================
   VERIFICACIÓN DE TICKET
   ========================================================= */
body.oti-global-page.oti-verify-page{min-height:100vh;display:grid;place-items:center;padding:20px!important}
body.oti-global-page.oti-verify-page > .card{width:min(700px,100%)!important;overflow:hidden;border-radius:30px!important}
body.oti-global-page.oti-verify-page .head{
  padding:28px!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(0,181,220,.3),transparent 32%),
    linear-gradient(135deg,#003B88,#087B9A)!important;
}
body.oti-global-page.oti-verify-page .head h1{font-size:30px!important;letter-spacing:-.045em!important}
body.oti-global-page.oti-verify-page .body{padding:26px!important}
body.oti-global-page.oti-verify-page .grid div{background:#F7F9FB!important;border-color:#E5EAF0!important;border-radius:15px!important}

/* =========================================================
   PORTAL PÚBLICO DE CONSULTA DE TICKET
   ========================================================= */
body.oti-global-page.oti-public-ticket-page{min-height:100vh;background:var(--oti-bg)!important}
body.oti-global-page.oti-public-ticket-page .card-oti{
  border:1px solid rgba(17,24,39,.065)!important;
  border-radius:30px!important;
  box-shadow:var(--oti-shadow-lg)!important;
  background:#fff!important;
}
body.oti-global-page.oti-public-ticket-page .titulo{color:var(--oti-ink)!important;letter-spacing:-.045em;font-weight:720!important}
body.oti-global-page.oti-public-ticket-page .logo{width:150px!important}
body.oti-global-page.oti-public-ticket-page .btn-oti{background:var(--oti-blue)!important;border-radius:12px!important;box-shadow:0 8px 18px rgba(0,59,136,.14)!important}
body.oti-global-page.oti-public-ticket-page .progress-oti,
body.oti-global-page.oti-public-ticket-page .timeline-item,
body.oti-global-page.oti-public-ticket-page .info-box{background:#F8FAFC!important;border-color:#E5EAF0!important}
body.oti-global-page.oti-public-ticket-page .progress-dot{box-shadow:0 0 0 5px rgba(0,181,220,.08)}

/* =========================================================
   PÁGINAS INSTITUCIONALES SIMPLES (privacidad / horario / datos)
   ========================================================= */
body.oti-global-page.oti-info-page{padding:24px!important;min-height:100vh}
body.oti-global-page.oti-info-page .oti-page{width:min(980px,100%);margin:0 auto!important}
body.oti-global-page.oti-info-page .oti-card{
  padding:28px!important;
  border:1px solid rgba(17,24,39,.065)!important;
  border-radius:30px!important;
  background:#fff!important;
  box-shadow:var(--oti-shadow-lg)!important;
}
body.oti-global-page.oti-info-page .oti-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding-bottom:18px!important;
  margin-bottom:22px!important;
  border-bottom:1px solid #E8ECF1!important;
}
body.oti-global-page.oti-info-page .oti-head img{max-width:160px!important}
body.oti-global-page.oti-info-page h1{font-size:32px!important;color:var(--oti-ink)!important;letter-spacing:-.05em!important}
body.oti-global-page.oti-info-page h2{font-size:18px!important;color:var(--oti-blue)!important;margin-top:24px!important}
body.oti-global-page.oti-info-page p,
body.oti-global-page.oti-info-page li{color:#526176!important;line-height:1.7!important}
body.oti-global-page.oti-info-page .info{border:1px solid #DCE7F0!important;border-radius:16px!important;background:linear-gradient(145deg,#F7FBFF,#F4FAF5)!important;padding:16px!important}
body.oti-global-page.oti-info-page .back{display:inline-flex!important;align-items:center!important;min-height:38px!important;padding:0 13px!important;border:1px solid #DDE5EE!important;border-radius:12px!important;background:#fff!important;color:var(--oti-blue)!important;text-decoration:none!important;font-weight:760!important}
body.oti-global-page.oti-info-page .badge-oti{color:var(--oti-cyan-2)!important}

/* =========================================================
   REPORTE GERENCIAL MENSUAL / CONFIG / BACKUP / BITÁCORAS
   ========================================================= */
body.oti-global-page.oti-report-page > .container{padding:20px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(17,24,39,.055)!important;box-shadow:0 22px 56px rgba(16,24,40,.075)!important}
body.oti-global-page.oti-report-page > .container > .header{padding:20px!important;margin-bottom:14px!important}
body.oti-global-page.oti-report-page .kpi-grid,
body.oti-global-page.oti-report-page .kpis,
body.oti-global-page.oti-report-page .card-grid{gap:12px!important}
body.oti-global-page.oti-report-page .kpi,
body.oti-global-page.oti-report-page .card{border-radius:20px!important}

/* ---------- Scrollbar ---------- */
body.oti-global-page *{scrollbar-width:thin;scrollbar-color:#CDD4DC transparent}
body.oti-global-page *::-webkit-scrollbar{width:8px;height:8px}
body.oti-global-page *::-webkit-scrollbar-thumb{background:#CDD4DC;border-radius:99px}
body.oti-global-page *::-webkit-scrollbar-track{background:transparent}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  body.oti-global-page .users-stat-grid.users-stat-grid-hierarchy{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.oti-global-page .users-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.oti-global-page .bulk-users-stats-four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:920px){
  body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > .container,
  body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > .wrap,
  body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > .page,
  body.oti-global-page:not(.oti-login-page):not(.attention-workspace-page):not(.rr-page) > main.page{width:min(100% - 20px,1420px);margin:10px auto!important}
  body.oti-global-page .users-modal-hero{grid-template-columns:1fr!important;padding:18px 52px 18px 16px!important;min-height:auto!important}
  body.oti-global-page .users-back-button{justify-self:start!important}
  body.oti-global-page .create-user-form-pro{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  body.oti-global-page .users-stat-grid.users-stat-grid-hierarchy,
  body.oti-global-page .users-team-grid,
  body.oti-global-page .bulk-users-stats-four,
  body.oti-global-page .create-user-form-pro{grid-template-columns:1fr!important}
  body.oti-global-page.oti-info-page{padding:10px!important}
  body.oti-global-page.oti-info-page .oti-card{padding:20px!important;border-radius:22px!important}
  body.oti-global-page.oti-info-page .oti-head{align-items:flex-start!important;flex-direction:column!important}
  body.oti-global-page.oti-info-page h1{font-size:27px!important}
}

/* ---------- Impresión: conservar documentos limpios ---------- */
@media print{
  body.oti-global-page{background:#fff!important}
  body.oti-global-page > .container,
  body.oti-global-page > .wrap,
  body.oti-global-page > .page,
  body.oti-global-page > main.page{width:100%!important;margin:0!important;box-shadow:none!important;border:0!important}
  body.oti-global-page .btn,
  body.oti-global-page .top-actions,
  body.oti-global-page .hero-actions,
  body.oti-global-page .actions{box-shadow:none!important}
  body.oti-global-page .card,
  body.oti-global-page .panel,
  body.oti-global-page .kpi,
  body.oti-global-page .summary-card{box-shadow:none!important}
}