/*
 * FASE 5 · BENTO CORPORATIVO OTI
 * Rediseño visual inspirado en interfaces SaaS modernas / Apple-like.
 * IMPORTANTE: esta hoja modifica únicamente presentación y experiencia visual.
 * No altera flujos, formularios, estados, permisos ni lógica PHP.
 */

:root{
  --oti-blue:#003B88;
  --oti-blue-2:#0A4E9F;
  --oti-blue-soft:#EDF4FF;
  --oti-green:#5BBD49;
  --oti-green-2:#4EAA3F;
  --oti-green-soft:#F0FAED;
  --oti-cyan:#00B5DC;
  --oti-cyan-2:#079CBF;
  --oti-cyan-soft:#ECFAFD;
  --oti-ink:#111827;
  --oti-ink-2:#344054;
  --oti-muted:#667085;
  --oti-muted-2:#98A2B3;
  --oti-bg:#EFF1F3;
  --oti-bg-2:#F6F7F8;
  --oti-card:#FFFFFF;
  --oti-line:#E5E7EB;
  --oti-line-2:#DDE2E8;
  --oti-danger:#D92D20;
  --oti-warning:#F79009;
  --oti-purple:#7A5AF8;
  --oti-radius:24px;
  --oti-radius-lg:30px;
  --oti-radius-sm:16px;
  --oti-shadow:0 16px 36px rgba(16,24,40,.055);
  --oti-shadow-hover:0 22px 50px rgba(16,24,40,.09);
  --oti-shadow-float:0 30px 70px rgba(16,24,40,.13);
  --oti-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

html{background:var(--oti-bg)!important}
body.oti-bento-v5,
body.oti-bento-v5.oti-premium-app,
body.oti-bento-v5.oti-login-page,
body.oti-bento-v5.attention-workspace-page,
body.oti-bento-v5.rr-page{
  font-family:var(--oti-font)!important;
  color:var(--oti-ink)!important;
  background:
    radial-gradient(circle at 86% -8%, rgba(0,181,220,.09), transparent 28%),
    radial-gradient(circle at 18% 4%, rgba(91,189,73,.055), transparent 22%),
    var(--oti-bg)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.oti-bento-v5 *{box-sizing:border-box}
body.oti-bento-v5 ::selection{background:rgba(0,181,220,.2);color:var(--oti-blue)}
body.oti-bento-v5 :focus-visible{outline:3px solid rgba(0,181,220,.23)!important;outline-offset:2px!important}

/* =========================================================
   SHELL PRINCIPAL / MESAOTI
   ========================================================= */
body.oti-bento-v5 .oti-app{
  min-height:100vh!important;
  grid-template-columns:250px minmax(0,1fr)!important;
  background:transparent!important;
}
body.oti-bento-v5 .oti-sidebar{
  width:226px!important;
  height:calc(100vh - 28px)!important;
  min-height:640px!important;
  margin:14px 0 14px 14px!important;
  padding:14px!important;
  border:1px solid rgba(17,24,39,.055)!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.93)!important;
  box-shadow:0 18px 55px rgba(16,24,40,.07)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-color:#DDE2E8 transparent;
}
body.oti-bento-v5 .oti-main{
  margin:0!important;
  padding:14px 18px 30px!important;
  min-width:0!important;
  background:transparent!important;
}

/* Branding minimalista */
body.oti-bento-v5 .brand-block.sidebar-brand-pro{
  min-height:auto!important;
  padding:10px 11px 13px!important;
  display:block!important;
  border:0!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .brand-block.sidebar-brand-pro img{
  width:125px!important;
  height:auto!important;
  max-height:48px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
body.oti-bento-v5 .sidebar-brand-copy{
  margin-top:10px!important;
  padding-top:10px!important;
  border-top:1px solid #EEF0F2!important;
}
body.oti-bento-v5 .sidebar-brand-eyebrow{
  color:var(--oti-cyan)!important;
  font-size:9px!important;
  letter-spacing:.16em!important;
  font-weight:850!important;
}
body.oti-bento-v5 .sidebar-brand-copy h1{
  margin:4px 0 3px!important;
  font-size:14px!important;
  letter-spacing:-.025em!important;
  color:var(--oti-ink)!important;
  font-weight:780!important;
}
body.oti-bento-v5 .sidebar-brand-copy small{font-size:10px!important;color:var(--oti-muted)!important}

body.oti-bento-v5 .brand-claim.sidebar-claim-pro{
  margin:10px 0 14px!important;
  min-height:66px!important;
  padding:13px 14px!important;
  border:0!important;
  border-radius:19px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 88% 22%,rgba(0,181,220,.65),transparent 34%),
    linear-gradient(145deg,#003B88 0%,#064B98 62%,#00799D 100%)!important;
  box-shadow:0 15px 30px rgba(0,59,136,.18)!important;
}
body.oti-bento-v5 .sidebar-claim-pro .claim-accent{
  width:4px!important;
  background:var(--oti-green)!important;
  box-shadow:0 0 0 4px rgba(91,189,73,.13)!important;
}
body.oti-bento-v5 .sidebar-claim-pro strong{font-size:11px!important;letter-spacing:.01em!important;font-weight:760!important}
body.oti-bento-v5 .sidebar-claim-pro p{margin:2px 0 0!important;font-size:10px!important;color:rgba(255,255,255,.76)!important}

/* Navegación */
body.oti-bento-v5 .side-nav.side-nav-pro{gap:4px!important}
body.oti-bento-v5 .side-nav-label{
  padding:9px 9px 5px!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  color:#A1A8B3!important;
}
body.oti-bento-v5 .side-nav.side-nav-pro a{
  min-height:44px!important;
  padding:7px 9px!important;
  gap:8px!important;
  border:0!important;
  border-radius:15px!important;
  color:#475467!important;
  font-size:12px!important;
  font-weight:680!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background .2s ease,color .2s ease,transform .2s ease!important;
}
body.oti-bento-v5 .side-nav.side-nav-pro a:hover{
  color:var(--oti-blue)!important;
  background:#F3F6F9!important;
  transform:translateX(2px)!important;
}
body.oti-bento-v5 .side-nav.side-nav-pro a.active{
  color:#fff!important;
  background:var(--oti-blue)!important;
  box-shadow:0 10px 24px rgba(0,59,136,.18)!important;
}
body.oti-bento-v5 .side-nav .nav-icon{
  width:30px!important;height:30px!important;
  flex:0 0 30px!important;
  border-radius:10px!important;
  color:var(--oti-blue)!important;
  background:#EDF4FF!important;
}
body.oti-bento-v5 .side-nav a.active .nav-icon{color:#fff!important;background:rgba(255,255,255,.15)!important}
body.oti-bento-v5 .side-nav .nav-icon svg{width:16px!important;height:16px!important;stroke-width:1.8!important}
body.oti-bento-v5 .nav-count{
  min-width:22px!important;height:22px!important;
  background:#EAF9FC!important;color:#007D99!important;
  border-radius:999px!important;font-size:10px!important;
}
body.oti-bento-v5 .side-nav a.active .nav-count{background:#fff!important;color:var(--oti-blue)!important}

/* Resumen del sidebar: blanco, ligero, tipo widget */
body.oti-bento-v5 .sidebar-help-clean{
  margin-top:15px!important;
  padding:14px!important;
  border:1px solid #E8EBEF!important;
  border-radius:21px!important;
  background:#F8F9FA!important;
  color:var(--oti-ink)!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .sidebar-card-heading{gap:9px!important;margin-bottom:6px!important}
body.oti-bento-v5 .sidebar-card-icon{
  width:34px!important;height:34px!important;border-radius:11px!important;
  background:#EAF9FC!important;color:var(--oti-cyan-2)!important;
}
body.oti-bento-v5 .sidebar-card-heading h3,
body.oti-bento-v5 .sidebar-help-clean h3{color:var(--oti-ink)!important;font-size:14px!important;font-weight:760!important}
body.oti-bento-v5 .sidebar-card-heading small{color:var(--oti-muted)!important;font-size:9px!important}
body.oti-bento-v5 .mini-stat{
  padding:9px 0!important;
  border-bottom:1px solid #E8EBEF!important;
  background:transparent!important;
}
body.oti-bento-v5 .mini-stat span{color:var(--oti-muted)!important;font-size:10px!important}
body.oti-bento-v5 .mini-stat strong{color:var(--oti-ink)!important;font-size:15px!important;font-weight:790!important}
body.oti-bento-v5 .sidebar-sla-track{background:#E9EDF2!important;height:5px!important;border-radius:99px!important;overflow:hidden!important}
body.oti-bento-v5 .sidebar-sla-track span{background:linear-gradient(90deg,var(--oti-cyan),var(--oti-green))!important}
body.oti-bento-v5 .sidebar-help-clean button,
body.oti-bento-v5 .sidebar-help-clean a{
  min-height:38px!important;
  margin-top:11px!important;
  border:1px solid #E1E5EA!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--oti-blue)!important;
  font-size:10.5px!important;
  font-weight:760!important;
  box-shadow:0 4px 12px rgba(16,24,40,.03)!important;
}
body.oti-bento-v5 .sidebar-help-clean button:hover,
body.oti-bento-v5 .sidebar-help-clean a:hover{background:var(--oti-blue)!important;color:#fff!important}

/* Barra superior flotante */
body.oti-bento-v5 .topbar{
  min-height:64px!important;
  position:sticky!important;
  top:14px!important;
  z-index:900!important;
  padding:9px 12px!important;
  border:1px solid rgba(17,24,39,.055)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 10px 28px rgba(16,24,40,.055)!important;
  backdrop-filter:blur(20px) saturate(155%)!important;
}
body.oti-bento-v5 .topbar-left{gap:10px!important}
body.oti-bento-v5 .topbar-left img{height:30px!important;max-width:105px!important;object-fit:contain!important}
body.oti-bento-v5 .topbar-left strong{font-size:13px!important;letter-spacing:-.015em!important;color:var(--oti-ink)!important}
body.oti-bento-v5 .menu-btn,
body.oti-bento-v5 .icon-btn{
  width:38px!important;height:38px!important;
  border:1px solid #E9ECEF!important;
  border-radius:12px!important;
  background:#F8F9FA!important;
  color:var(--oti-ink-2)!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .menu-btn:hover,
body.oti-bento-v5 .icon-btn:hover{background:#EDF4FF!important;color:var(--oti-blue)!important;transform:translateY(-1px)!important}
body.oti-bento-v5 .oti-live-status{
  min-height:34px!important;
  padding:0 11px!important;
  border:1px solid #E5EFE2!important;
  border-radius:999px!important;
  background:#F4FAF2!important;
  color:#3D7F32!important;
  font-size:10px!important;
  font-weight:700!important;
}
body.oti-bento-v5 .oti-live-dot{background:var(--oti-green)!important;box-shadow:0 0 0 4px rgba(91,189,73,.13)!important}
body.oti-bento-v5 .profile{
  gap:9px!important;
  padding:4px 8px 4px 5px!important;
  border:1px solid #EAECF0!important;
  border-radius:14px!important;
  background:#FAFAFB!important;
}
body.oti-bento-v5 .profile .avatar{
  width:34px!important;height:34px!important;border-radius:11px!important;
  color:#fff!important;background:linear-gradient(135deg,var(--oti-blue),var(--oti-cyan))!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .profile strong{font-size:11px!important;color:var(--oti-ink)!important}
body.oti-bento-v5 .profile span{font-size:9px!important;color:var(--oti-muted)!important}
body.oti-bento-v5 .logout{
  min-height:38px!important;padding:0 13px!important;border-radius:12px!important;
  background:#F4F5F6!important;border:1px solid #E8EAED!important;color:#475467!important;
  font-size:10.5px!important;font-weight:760!important;
}
body.oti-bento-v5 .logout:hover{background:#111827!important;color:#fff!important}

/* Hero: tarjeta bento principal */
body.oti-bento-v5 .hero-panel{
  position:relative!important;
  overflow:hidden!important;
  min-height:230px!important;
  margin-top:14px!important;
  padding:28px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.72fr)!important;
  gap:18px!important;
  border:0!important;
  border-radius:var(--oti-radius-lg)!important;
  background:
    radial-gradient(circle at 88% 18%, rgba(0,181,220,.26), transparent 28%),
    radial-gradient(circle at 64% 115%, rgba(91,189,73,.25), transparent 32%),
    linear-gradient(135deg,#003B88 0%,#064E9A 55%,#057794 100%)!important;
  color:#fff!important;
  box-shadow:0 24px 58px rgba(0,59,136,.17)!important;
}
body.oti-bento-v5 .hero-panel::after{
  content:"";
  position:absolute;
  right:-70px;top:-90px;
  width:330px;height:330px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 92px rgba(255,255,255,.018);
  pointer-events:none;
}
body.oti-bento-v5 .hero-copy{position:relative;z-index:2;align-self:center!important}
body.oti-bento-v5 .hero-copy h2{
  max-width:720px!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(29px,3vw,44px)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
  font-weight:720!important;
}
body.oti-bento-v5 .hello-mark{color:#C7F5B8!important}
body.oti-bento-v5 .hero-copy p{
  max-width:690px!important;
  margin:13px 0 0!important;
  color:rgba(255,255,255,.78)!important;
  font-size:13px!important;
  line-height:1.55!important;
  font-weight:470!important;
}
body.oti-bento-v5 .hero-search{
  max-width:720px!important;
  margin-top:22px!important;
  padding:5px!important;
  min-height:48px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.13)!important;
  backdrop-filter:blur(10px)!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .hero-search input{
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-size:12px!important;
}
body.oti-bento-v5 .hero-search input::placeholder{color:rgba(255,255,255,.66)!important}
body.oti-bento-v5 .hero-search button{
  width:38px!important;height:38px!important;
  border-radius:12px!important;
  background:#fff!important;color:var(--oti-blue)!important;
  box-shadow:0 7px 16px rgba(0,0,0,.09)!important;
}
body.oti-bento-v5 .hero-register-btn{
  min-height:44px!important;
  margin-top:14px!important;
  padding:0 17px!important;
  border:0!important;border-radius:14px!important;
  color:#183513!important;background:#CBF3BE!important;
  box-shadow:none!important;font-size:12px!important;font-weight:780!important;
}
body.oti-bento-v5 .hero-register-btn:hover{background:#B9EFA8!important;transform:translateY(-1px)!important}
body.oti-bento-v5 .quick-actions{
  position:relative!important;z-index:2!important;
  align-self:stretch!important;
  padding:17px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.11)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .quick-actions h3{
  margin:0 0 10px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:10px!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
}
body.oti-bento-v5 .quick-actions a{
  min-height:42px!important;
  padding:9px 11px!important;
  border:0!important;border-radius:13px!important;
  color:#fff!important;background:rgba(255,255,255,.08)!important;
  font-size:11px!important;font-weight:650!important;
}
body.oti-bento-v5 .quick-actions a:hover{background:#fff!important;color:var(--oti-blue)!important;transform:translateX(2px)!important}

/* Hero video tutorial para facultades */
body.oti-bento-v5 .hero-video-card{
  position:relative!important;
  z-index:2!important;
  align-self:stretch!important;
}
body.oti-bento-v5 .hero-video-launch{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
  cursor:pointer!important;
}
body.oti-bento-v5 .hero-video-visual{
  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:flex-start!important;
  min-height:230px!important;
  height:100%!important;
  padding:24px!important;
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 22% 82%, rgba(255,255,255,.12), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)),
    linear-gradient(135deg,#76d7e7 0%, #61d4df 22%, #55bee8 44%, #3e8ff1 72%, #2557e8 100%)!important;
  box-shadow:0 20px 50px rgba(8,27,90,.22)!important;
}
body.oti-bento-v5 .hero-video-visual::before{
  content:"";
  position:absolute!important;
  right:-46px!important; bottom:-56px!important;
  width:205px!important; height:205px!important;
  border-radius:50%!important;
  background:radial-gradient(circle, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 72%)!important;
}
body.oti-bento-v5 .hero-video-visual::after{
  content:"";
  position:absolute!important;
  right:20px!important; top:20px!important;
  width:112px!important; height:112px!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.08)!important;
  transform:rotate(9deg)!important;
}
body.oti-bento-v5 .hero-video-kicker,
body.oti-bento-v5 .hero-video-title,
body.oti-bento-v5 .hero-video-copy,
body.oti-bento-v5 .hero-video-tags,
body.oti-bento-v5 .hero-video-play,
body.oti-bento-v5 .hero-video-note{position:relative!important;z-index:2!important}
body.oti-bento-v5 .hero-video-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.16)!important;
  color:rgba(255,255,255,.9)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
body.oti-bento-v5 .hero-video-title{
  margin-top:15px!important;
  color:#fff!important;
  font-size:31px!important;
  line-height:1.03!important;
  letter-spacing:-.05em!important;
  font-weight:760!important;
  max-width:360px!important;
}
body.oti-bento-v5 .hero-video-copy{
  margin-top:12px!important;
  color:rgba(255,255,255,.86)!important;
  font-size:13px!important;
  line-height:1.55!important;
  max-width:370px!important;
}
body.oti-bento-v5 .hero-video-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:16px!important;
}
body.oti-bento-v5 .hero-video-tags span{
  padding:7px 11px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:700!important;
}
body.oti-bento-v5 .hero-video-play{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:18px!important;
  padding:12px 16px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.92)!important;
  color:#0B4A8D!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:0 12px 24px rgba(15,23,42,.16)!important;
}
body.oti-bento-v5 .hero-video-play-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  background:#0B4A8D!important;
  color:#fff!important;
  font-size:13px!important;
  box-shadow:0 8px 18px rgba(11,74,141,.28)!important;
}
body.oti-bento-v5 .hero-video-note{
  margin-top:12px!important;
  color:rgba(255,255,255,.8)!important;
  font-size:11.5px!important;
  line-height:1.45!important;
}
body.oti-bento-v5 .hero-video-launch:hover .hero-video-visual{transform:translateY(-2px)!important;transition:transform .18s ease!important}

body.oti-bento-v5 .tutorial-video-modal{
  position:fixed!important;
  inset:0!important;
  z-index:1800!important;
  display:none!important;
}
body.oti-bento-v5 .tutorial-video-modal.is-open{display:block!important}
body.oti-bento-v5 .tutorial-video-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(3,15,39,.55)!important;
  backdrop-filter:blur(8px)!important;
}
body.oti-bento-v5 .tutorial-video-shell{
  position:relative!important;
  width:min(860px,calc(100vw - 34px))!important;
  margin:42px auto!important;
  padding:24px!important;
  border-radius:30px!important;
  border:1px solid rgba(196,208,230,.45)!important;
  background:#F8FBFF!important;
  box-shadow:0 26px 70px rgba(15,23,42,.28)!important;
}
body.oti-bento-v5 .tutorial-video-close{
  position:absolute!important;
  right:18px!important;
  top:18px!important;
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  border:1px solid #D4E0EE!important;
  background:#fff!important;
  color:#0B4A8D!important;
  font-size:24px!important;
  line-height:1!important;
}
body.oti-bento-v5 .tutorial-video-head{padding-right:54px!important}
body.oti-bento-v5 .tutorial-video-eyebrow{
  display:inline-block!important;
  margin-bottom:8px!important;
  color:#0B4A8D!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
body.oti-bento-v5 .tutorial-video-head h3{
  margin:0!important;
  color:#101828!important;
  font-size:28px!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
}
body.oti-bento-v5 .tutorial-video-head p{
  margin:10px 0 0!important;
  color:#475467!important;
  font-size:13px!important;
  line-height:1.6!important;
}
body.oti-bento-v5 .tutorial-video-player-wrap{
  margin-top:18px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#071936!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
body.oti-bento-v5 .tutorial-video-player{
  display:block!important;
  width:100%!important;
  max-height:72vh!important;
  background:#071936!important;
}
body.oti-bento-v5 .tutorial-video-empty{
  margin-top:18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:28px!important;
  border-radius:24px!important;
  border:1px dashed #BFD0E2!important;
  background:linear-gradient(135deg,#EEF7FF 0%, #F9FCFF 100%)!important;
  color:#1D2939!important;
}
body.oti-bento-v5 .tutorial-video-empty-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:56px!important;
  height:56px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#12C6D8 0%, #2568F2 100%)!important;
  color:#fff!important;
  font-size:22px!important;
}
body.oti-bento-v5 .tutorial-video-empty strong{font-size:18px!important;color:#0F172A!important}
body.oti-bento-v5 .tutorial-video-empty p{margin:0!important;color:#475467!important;font-size:13px!important;line-height:1.6!important}
body.oti-bento-v5 .tutorial-video-empty code{
  padding:2px 6px!important;
  border-radius:8px!important;
  background:rgba(11,74,141,.08)!important;
  color:#0B4A8D!important;
}

/* KPI bento */
body.oti-bento-v5 .kpi-row{
  margin:14px 0!important;
  gap:12px!important;
}
body.oti-bento-v5 .kpi-row.kpi-admin{grid-template-columns:repeat(7,minmax(0,1fr))!important}
body.oti-bento-v5 .kpi-row.kpi-tecnico{grid-template-columns:repeat(5,minmax(0,1fr))!important}
body.oti-bento-v5 .kpi-row.kpi-facultad{grid-template-columns:repeat(4,minmax(0,1fr))!important}
body.oti-bento-v5 .kpi-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:128px!important;
  padding:17px 17px 15px!important;
  border:1px solid rgba(17,24,39,.055)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:var(--oti-shadow)!important;
  transform:none!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
body.oti-bento-v5 .kpi-card:hover{transform:translateY(-3px)!important;box-shadow:var(--oti-shadow-hover)!important;border-color:#DDE4EA!important}
body.oti-bento-v5 .kpi-card::before{
  content:""!important;
  position:absolute!important;left:17px!important;top:17px!important;
  width:9px!important;height:9px!important;border-radius:50%!important;
  background:var(--oti-cyan)!important;
  box-shadow:0 0 0 5px rgba(0,181,220,.10)!important;
}
body.oti-bento-v5 .kpi-card::after{
  content:""!important;
  position:absolute!important;
  left:17px!important;right:17px!important;bottom:14px!important;
  height:20px!important;
  background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px)!important;
  mask-image:linear-gradient(180deg,transparent 0,#000 100%)!important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 100%)!important;
  opacity:.10!important;
}
body.oti-bento-v5 .kpi-card > span{
  display:block!important;
  margin:0 0 7px 23px!important;
  color:var(--oti-muted)!important;
  font-size:9px!important;
  line-height:1.25!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  font-weight:820!important;
}
body.oti-bento-v5 .kpi-card > strong{
  display:block!important;
  margin:0!important;
  color:var(--oti-ink)!important;
  font-size:31px!important;
  line-height:1!important;
  letter-spacing:-.05em!important;
  font-weight:690!important;
}
body.oti-bento-v5 .kpi-card > small{
  position:relative!important;z-index:1!important;
  display:block!important;
  max-width:95%!important;
  margin-top:7px!important;
  color:var(--oti-muted)!important;
  font-size:9.5px!important;
  line-height:1.3!important;
  font-weight:520!important;
}
body.oti-bento-v5 .kpi-card.blue{color:var(--oti-blue)!important} body.oti-bento-v5 .kpi-card.blue::before{background:var(--oti-blue)!important;box-shadow:0 0 0 5px rgba(0,59,136,.09)!important}
body.oti-bento-v5 .kpi-card.green{color:var(--oti-green)!important} body.oti-bento-v5 .kpi-card.green::before{background:var(--oti-green)!important;box-shadow:0 0 0 5px rgba(91,189,73,.10)!important}
body.oti-bento-v5 .kpi-card.orange{color:var(--oti-warning)!important} body.oti-bento-v5 .kpi-card.orange::before{background:var(--oti-warning)!important;box-shadow:0 0 0 5px rgba(247,144,9,.09)!important}
body.oti-bento-v5 .kpi-card.cyan{color:var(--oti-cyan)!important}
body.oti-bento-v5 .kpi-card.purple{color:var(--oti-purple)!important} body.oti-bento-v5 .kpi-card.purple::before{background:var(--oti-purple)!important;box-shadow:0 0 0 5px rgba(122,90,248,.09)!important}
body.oti-bento-v5 .kpi-card.dark{color:#344054!important} body.oti-bento-v5 .kpi-card.dark::before{background:#344054!important;box-shadow:0 0 0 5px rgba(52,64,84,.08)!important}
body.oti-bento-v5 .kpi-card.red{color:var(--oti-danger)!important} body.oti-bento-v5 .kpi-card.red::before{background:var(--oti-danger)!important;box-shadow:0 0 0 5px rgba(217,45,32,.08)!important}
body.oti-bento-v5 .kpi-card.needs-action{border-color:rgba(122,90,248,.25)!important;background:linear-gradient(145deg,#fff,#FAF8FF)!important}

/* Segundo grupo de indicadores */
body.oti-bento-v5 .fase2-command-panel{
  margin:0 0 14px!important;
  display:grid!important;
  gap:12px!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
body.oti-bento-v5 .fase2-command-card{
  min-height:120px!important;
  padding:16px!important;
  border:1px solid rgba(17,24,39,.055)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:var(--oti-shadow)!important;
  color:var(--oti-ink)!important;
}
body.oti-bento-v5 .fase2-command-card span{color:var(--oti-muted)!important;font-size:9px!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-weight:800!important}
body.oti-bento-v5 .fase2-command-card strong{margin-top:7px!important;color:var(--oti-ink)!important;font-size:28px!important;letter-spacing:-.045em!important;font-weight:690!important}
body.oti-bento-v5 .fase2-command-card small{color:var(--oti-muted)!important;font-size:9.5px!important;line-height:1.35!important}
body.oti-bento-v5 .fase2-command-card.main{background:linear-gradient(145deg,#fff,#F4F8FE)!important;border-color:#E0EAF7!important}
body.oti-bento-v5 .fase2-command-card.success{background:linear-gradient(145deg,#fff,#F4FBF2)!important;border-color:#E2F0DE!important}
body.oti-bento-v5 .fase2-command-card.warning{background:linear-gradient(145deg,#fff,#FFFBF5)!important;border-color:#F3E9D8!important}
body.oti-bento-v5 .fase2-command-card.critical{background:linear-gradient(145deg,#fff,#FFF7F6)!important;border-color:#F5E2DF!important}
body.oti-bento-v5 .fase2-command-card.time{background:linear-gradient(145deg,#fff,#F2FAFC)!important;border-color:#DDF1F5!important}

/* Bento analítico */
body.oti-bento-v5 .content-grid{
  display:grid!important;
  grid-template-columns:1.28fr .86fr .86fr!important;
  gap:12px!important;
  margin-bottom:14px!important;
}
body.oti-bento-v5 .panel-card,
body.oti-bento-v5 .recent-panel,
body.oti-bento-v5 .embedded-workspace,
body.oti-bento-v5 .bottom-features > div{
  border:1px solid rgba(17,24,39,.055)!important;
  background:#fff!important;
  border-radius:24px!important;
  box-shadow:var(--oti-shadow)!important;
}
body.oti-bento-v5 .panel-card{min-height:255px!important;padding:20px!important}
body.oti-bento-v5 .panel-title h3{color:var(--oti-ink)!important;font-size:15px!important;letter-spacing:-.02em!important;font-weight:730!important}
body.oti-bento-v5 .panel-title span,
body.oti-bento-v5 .panel-title a{color:var(--oti-muted)!important;font-size:10px!important;font-weight:650!important}
body.oti-bento-v5 .donut{width:145px!important;height:145px!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)!important}
body.oti-bento-v5 .donut div{width:93px!important;height:93px!important;background:#fff!important;box-shadow:0 5px 16px rgba(16,24,40,.05)!important}
body.oti-bento-v5 .donut strong{color:var(--oti-ink)!important;font-size:28px!important;letter-spacing:-.05em!important}
body.oti-bento-v5 .donut span{color:var(--oti-muted)!important}
body.oti-bento-v5 .legend p{margin:7px 0!important;color:var(--oti-muted)!important;font-size:10.5px!important}
body.oti-bento-v5 .legend b{color:var(--oti-ink)!important;font-weight:780!important}
body.oti-bento-v5 .bar-item{margin:19px 0!important;color:var(--oti-ink-2)!important;font-size:11px!important}
body.oti-bento-v5 .bar-item div{height:7px!important;background:#EEF1F4!important}
body.oti-bento-v5 .bar-item .alta{background:linear-gradient(90deg,#FF8E84,var(--oti-danger))!important}
body.oti-bento-v5 .bar-item .media{background:linear-gradient(90deg,#FFD98A,var(--oti-warning))!important}
body.oti-bento-v5 .bar-item .baja{background:linear-gradient(90deg,#BDEDB2,var(--oti-green))!important}
body.oti-bento-v5 .clock{
  width:60px!important;height:60px!important;border-radius:18px!important;
  background:var(--oti-blue-soft)!important;color:var(--oti-blue)!important;
}
body.oti-bento-v5 .time-value strong{color:var(--oti-ink)!important;font-size:31px!important;letter-spacing:-.045em!important}
body.oti-bento-v5 .time-value span{color:var(--oti-muted)!important;font-size:10px!important}
body.oti-bento-v5 .sparkline{height:45px!important;gap:7px!important}
body.oti-bento-v5 .sparkline i{background:linear-gradient(180deg,var(--oti-cyan),var(--oti-blue))!important;opacity:.9!important}

/* Bandeja operativa */
body.oti-bento-v5 .recent-panel{
  margin-top:0!important;
  padding:20px!important;
  overflow:hidden!important;
}
body.oti-bento-v5 .fase2-board-eyebrow{
  color:var(--oti-cyan-2)!important;
  font-size:9px!important;
  letter-spacing:.14em!important;
  font-weight:820!important;
}
body.oti-bento-v5 .fase2-board-title h3{margin-top:4px!important;font-size:18px!important;color:var(--oti-ink)!important;letter-spacing:-.025em!important}
body.oti-bento-v5 .history-open-btn,
body.oti-bento-v5 .fase2-board-create{
  min-height:40px!important;padding:0 14px!important;border-radius:12px!important;
  font-size:10.5px!important;font-weight:760!important;
}
body.oti-bento-v5 .history-open-btn{background:#F5F6F7!important;color:#344054!important;border:1px solid #E6E8EB!important}
body.oti-bento-v5 .fase2-board-create{background:var(--oti-blue)!important;color:#fff!important;border:1px solid var(--oti-blue)!important;box-shadow:0 8px 18px rgba(0,59,136,.14)!important}
body.oti-bento-v5 .fase2-table-toolbar{
  margin:13px 0 10px!important;
  padding:10px 12px!important;
  border:1px solid #EAECF0!important;
  border-radius:15px!important;
  background:#F8F9FA!important;
}
body.oti-bento-v5 .fase2-toolbar-copy strong{font-size:11px!important;color:var(--oti-ink)!important}
body.oti-bento-v5 .fase2-toolbar-copy span{font-size:9px!important;color:var(--oti-muted)!important}
body.oti-bento-v5 .fase2-chip{
  min-height:30px!important;padding:0 10px!important;border:1px solid #E4E7EC!important;border-radius:999px!important;
  background:#fff!important;color:#667085!important;font-size:9.5px!important;font-weight:720!important;
}
body.oti-bento-v5 .fase2-chip.is-active{background:var(--oti-blue)!important;color:#fff!important;border-color:var(--oti-blue)!important}
body.oti-bento-v5 .recent-panel .table-wrap,
body.oti-bento-v5 .recent-panel .recent-table-wrap,
body.oti-bento-v5 .table-lite{
  border:1px solid #ECEEF1!important;
  border-radius:17px!important;
  overflow:auto!important;
  background:#fff!important;
}
body.oti-bento-v5 .recent-panel table{border-collapse:separate!important;border-spacing:0!important}
body.oti-bento-v5 .recent-panel table thead th,
body.oti-bento-v5 .table-lite th{
  position:sticky!important;top:0!important;z-index:2!important;
  padding:12px 11px!important;
  border-bottom:1px solid #E9ECEF!important;
  background:#F8F9FA!important;
  color:#7A8493!important;
  font-size:8.5px!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  font-weight:820!important;
}
body.oti-bento-v5 .recent-panel table tbody td,
body.oti-bento-v5 .table-lite td{
  padding:13px 11px!important;
  border-bottom:1px solid #F0F1F3!important;
  color:#344054!important;
  font-size:10.5px!important;
  background:#fff!important;
  vertical-align:middle!important;
}
body.oti-bento-v5 .recent-panel table tbody tr:hover td,
body.oti-bento-v5 .table-lite tbody tr:hover td{background:#FAFBFC!important}
body.oti-bento-v5 .ticket-cell-main{color:var(--oti-ink)!important;font-weight:720!important}
body.oti-bento-v5 .ticket-cell-sub{color:var(--oti-muted)!important;font-size:9px!important}
body.oti-bento-v5 .service-pill,
body.oti-bento-v5 .priority-pill,
body.oti-bento-v5 .status-pill{
  min-height:25px!important;align-items:center!important;
  padding:5px 8px!important;border-radius:999px!important;
  font-size:8.8px!important;font-weight:760!important;
}
body.oti-bento-v5 .status-pill.proceso{background:#EAF9FC!important;color:#007E99!important}
body.oti-bento-v5 .status-pill.atendido,
body.oti-bento-v5 .status-pill.validado_atencion{background:#EFF9EC!important;color:#3B7E31!important}
body.oti-bento-v5 .status-pill.validado{background:#EDF4FF!important;color:var(--oti-blue)!important}
body.oti-bento-v5 .status-pill.asignado{background:#FFF6E8!important;color:#A15C00!important}
body.oti-bento-v5 .dash-btn,
body.oti-bento-v5 .mini-link.modal-link{
  min-height:31px!important;
  padding:6px 10px!important;
  border-radius:10px!important;
  font-size:9px!important;
  font-weight:760!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .dash-btn.validate{background:var(--oti-blue)!important}
body.oti-bento-v5 .dash-btn.assign{background:#FFF4E5!important;color:#9A5B00!important;border:1px solid #F4E1C4!important}
body.oti-bento-v5 .dash-btn.process,
body.oti-bento-v5 .dash-btn.resolve{background:var(--oti-cyan)!important;color:#003C4A!important}
body.oti-bento-v5 .dash-btn.detail{background:var(--oti-blue)!important}
body.oti-bento-v5 .dash-btn.close{background:#111827!important}
body.oti-bento-v5 .dash-btn.ficha{background:#F6F7F8!important;color:#475467!important;border:1px solid #E4E7EC!important}
body.oti-bento-v5 .mini-link.modal-link{background:#F6F7F8!important;color:var(--oti-blue)!important;border:1px solid #E4E7EC!important}

/* Features inferiores */
body.oti-bento-v5 .bottom-features{gap:12px!important;margin-top:14px!important}
body.oti-bento-v5 .bottom-features > div{padding:16px!important;grid-template-columns:40px 1fr!important}
body.oti-bento-v5 .bottom-features > div > span{
  width:40px!important;height:40px!important;border-radius:13px!important;
  background:#EDF4FF!important;color:var(--oti-blue)!important;
}
body.oti-bento-v5 .bottom-features strong{color:var(--oti-ink)!important;font-size:12px!important}
body.oti-bento-v5 .bottom-features p{color:var(--oti-muted)!important;font-size:9.5px!important}

/* Modales / workspaces */
body.oti-bento-v5 .ticket-modal-backdrop{background:rgba(17,24,39,.52)!important;backdrop-filter:blur(10px)!important}
body.oti-bento-v5 .ticket-modal-card{
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:var(--oti-shadow-float)!important;
}
body.oti-bento-v5 .ticket-modal-head{
  border-radius:22px!important;
  background:linear-gradient(135deg,var(--oti-blue),#075A9D 65%,#0087A7)!important;
}
body.oti-bento-v5 .ticket-modal-close{background:#F3F5F7!important;color:var(--oti-ink)!important}
body.oti-bento-v5 .ticket-modal-grid div{border-color:#E8EBEF!important;background:#F8F9FA!important}
body.oti-bento-v5 .workspace-head{background:#FAFBFC!important;border-bottom-color:#E9ECEF!important}
body.oti-bento-v5 .workspace-head h3{color:var(--oti-ink)!important}
body.oti-bento-v5 .workspace-close{background:#F1F3F5!important;color:#344054!important;border-radius:11px!important}

/* =========================================================
   LOGIN
   ========================================================= */
body.oti-bento-v5.oti-login-page{
  min-height:100vh!important;
  padding:22px!important;
  display:grid!important;
  place-items:center!important;
}
body.oti-bento-v5 .oti-login-layout{width:min(1180px,100%)!important;min-height:auto!important;padding:0!important}
body.oti-bento-v5 .oti-login-shell{
  min-height:720px!important;
  border:1px solid rgba(17,24,39,.06)!important;
  border-radius:34px!important;
  background:#fff!important;
  box-shadow:0 30px 75px rgba(16,24,40,.11)!important;
  overflow:hidden!important;
}
body.oti-bento-v5 .oti-login-brand{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 92%,rgba(91,189,73,.28),transparent 26%),
    radial-gradient(circle at 88% 20%,rgba(0,181,220,.25),transparent 28%),
    linear-gradient(145deg,#003B88 0%,#064E9A 55%,#066E8A 100%)!important;
}
body.oti-bento-v5 .oti-login-brand::after{
  content:"";position:absolute;right:-140px;bottom:-170px;width:430px;height:430px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 115px rgba(255,255,255,.018);pointer-events:none;
}
body.oti-bento-v5 .oti-brand-badge{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.16)!important}
body.oti-bento-v5 .oti-brand-content h1{font-size:clamp(34px,4vw,54px)!important;line-height:1!important;letter-spacing:-.055em!important;font-weight:700!important}
body.oti-bento-v5 .oti-brand-content p{color:rgba(255,255,255,.74)!important;line-height:1.6!important}
body.oti-bento-v5 .oti-brand-feature{border-color:rgba(255,255,255,.11)!important;background:rgba(255,255,255,.06)!important;border-radius:17px!important}
body.oti-bento-v5 .oti-brand-feature-icon{background:rgba(255,255,255,.12)!important;color:#D5F8CA!important}
body.oti-bento-v5 .oti-login-form-panel{background:#fff!important}
body.oti-bento-v5 .oti-login-kicker{color:var(--oti-blue)!important;background:#EDF4FF!important;border-radius:999px!important}
body.oti-bento-v5 .oti-login-form-wrap h2{color:var(--oti-ink)!important;font-size:38px!important;letter-spacing:-.045em!important;font-weight:700!important}
body.oti-bento-v5 .oti-login-subtitle{color:var(--oti-muted)!important}
body.oti-bento-v5 .oti-input-wrap{border-color:#E2E5E9!important;border-radius:14px!important;background:#F9FAFB!important}
body.oti-bento-v5 .oti-input-wrap:focus-within{border-color:rgba(0,181,220,.8)!important;box-shadow:0 0 0 4px rgba(0,181,220,.09)!important;background:#fff!important}
body.oti-bento-v5 .oti-captcha-card{border-color:#E5E9EE!important;background:#F8F9FA!important;border-radius:18px!important}
body.oti-bento-v5 .oti-submit{
  min-height:52px!important;border-radius:15px!important;
  background:var(--oti-blue)!important;box-shadow:0 12px 28px rgba(0,59,136,.18)!important;
}
body.oti-bento-v5 .oti-submit:hover{background:#073F8F!important;transform:translateY(-1px)!important}
body.oti-bento-v5 .oti-security-note{background:#F3FAF1!important;border-color:#DFEFDB!important;border-radius:16px!important}
body.oti-bento-v5 .oti-security-note-icon{color:var(--oti-green-2)!important;background:#E9F7E5!important}

/* =========================================================
   DETALLE DE TICKET / EXPEDIENTE
   ========================================================= */
body.oti-bento-v5 .page-shell{max-width:1480px!important;margin:0 auto!important;padding:14px 18px 32px!important}
body.oti-bento-v5 .page-shell > .topbar{top:10px!important}
body.oti-bento-v5 .ticket-hero{
  margin-top:14px!important;
  padding:26px!important;
  border:0!important;
  border-radius:30px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 88% 25%,rgba(0,181,220,.25),transparent 30%),
    linear-gradient(135deg,var(--oti-blue),#07569B 65%,#07758C)!important;
  box-shadow:0 24px 55px rgba(0,59,136,.16)!important;
}
body.oti-bento-v5 .ticket-hero .eyebrow{color:#B9EAF5!important;font-size:9px!important;letter-spacing:.14em!important}
body.oti-bento-v5 .ticket-hero h1{font-size:38px!important;letter-spacing:-.05em!important;color:#fff!important}
body.oti-bento-v5 .ticket-hero p{color:rgba(255,255,255,.75)!important}
body.oti-bento-v5 .ticket-hero .btn.ghost{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.2)!important;color:#fff!important}
body.oti-bento-v5 .ticket-hero .btn.primary{background:#fff!important;color:var(--oti-blue)!important;border-color:#fff!important}
body.oti-bento-v5 .summary-grid{gap:12px!important;margin:14px 0!important}
body.oti-bento-v5 .summary-grid article{
  min-height:124px!important;
  padding:17px!important;
  border:1px solid rgba(17,24,39,.055)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:var(--oti-shadow)!important;
}
body.oti-bento-v5 .summary-grid article span{color:var(--oti-muted)!important;font-size:9px!important;letter-spacing:.07em!important;text-transform:uppercase!important}
body.oti-bento-v5 .summary-grid article strong{color:var(--oti-ink)!important;font-size:17px!important;letter-spacing:-.02em!important}
body.oti-bento-v5 .summary-grid article small{color:var(--oti-muted)!important;font-size:9.5px!important}
body.oti-bento-v5 .workspace{gap:14px!important}
body.oti-bento-v5 .workspace .card,
body.oti-bento-v5 .side-column .card,
body.oti-bento-v5 .main-column .card{
  border:1px solid rgba(17,24,39,.055)!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:var(--oti-shadow)!important;
}
body.oti-bento-v5 .section-kicker{color:var(--oti-cyan-2)!important;letter-spacing:.12em!important}
body.oti-bento-v5 .section-head h2{color:var(--oti-ink)!important;letter-spacing:-.025em!important}
body.oti-bento-v5 .request-box,
body.oti-bento-v5 .guided-report-card,
body.oti-bento-v5 .data-grid > div{border-color:#E8EBEF!important;background:#F8F9FA!important;border-radius:16px!important}
body.oti-bento-v5 .flow-dot{border-color:#D7DDE4!important;background:#fff!important;color:#667085!important}
body.oti-bento-v5 .flow-step.done .flow-dot{background:var(--oti-green)!important;border-color:var(--oti-green)!important;color:#fff!important}
body.oti-bento-v5 .flow-step.active .flow-dot{background:var(--oti-cyan)!important;border-color:var(--oti-cyan)!important;color:#003C4A!important}
body.oti-bento-v5 .history-item{border-color:#EEF0F2!important}

/* =========================================================
   ATENCIÓN TÉCNICA / REVISIÓN / CONFORMIDAD
   ========================================================= */
body.oti-bento-v5.attention-workspace-page,
body.oti-bento-v5.rr-page{padding:18px!important}
body.oti-bento-v5.attention-workspace-page .attention-shell,
body.oti-bento-v5.attention-workspace-page .workspace-shell,
body.oti-bento-v5.rr-page .rr-shell,
body.oti-bento-v5.rr-page .rr-page-shell{
  max-width:1440px!important;margin:0 auto!important;
}
body.oti-bento-v5.attention-workspace-page header,
body.oti-bento-v5.rr-page .rr-topbar,
body.oti-bento-v5.rr-page .rr-hero,
body.oti-bento-v5.rr-page .rr-card,
body.oti-bento-v5.rr-page .rr-decision-card{
  border-radius:24px!important;
}
body.oti-bento-v5.attention-workspace-page .card,
body.oti-bento-v5.attention-workspace-page section,
body.oti-bento-v5.rr-page .rr-card,
body.oti-bento-v5.rr-page .rr-decision-card{
  border-color:rgba(17,24,39,.06)!important;
  box-shadow:var(--oti-shadow)!important;
}
body.oti-bento-v5.attention-workspace-page .attention-hero,
body.oti-bento-v5.rr-page .rr-hero{
  background:linear-gradient(135deg,var(--oti-blue),#075499 68%,#087A91)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 22px 50px rgba(0,59,136,.16)!important;
}
body.oti-bento-v5.rr-page .rr-card > header > span{background:#EDF4FF!important;color:var(--oti-blue)!important}
body.oti-bento-v5.rr-page .rr-card h2,
body.oti-bento-v5.rr-page .rr-decision-card h2{color:var(--oti-ink)!important;letter-spacing:-.025em!important}
body.oti-bento-v5.rr-page .rr-action{border-color:#E7EAEE!important;border-radius:16px!important;background:#FAFBFC!important}
body.oti-bento-v5.rr-page .btn.green{background:var(--oti-green)!important}
body.oti-bento-v5.rr-page .btn.blue{background:var(--oti-blue)!important}
body.oti-bento-v5.rr-page .btn.amber{background:var(--oti-warning)!important}

/* =========================================================
   CONFIGURACIÓN / REPORTES / DOCUMENTOS (páginas independientes)
   ========================================================= */
body.oti-bento-v5 > .container,
body.oti-bento-v5 > .wrap,
body.oti-bento-v5 > main.page,
body.oti-bento-v5 > .page{
  max-width:1380px!important;
  margin:22px auto!important;
}
body.oti-bento-v5 > .container{
  padding:22px!important;
  border:1px solid rgba(17,24,39,.055)!important;
  border-radius:30px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 25px 60px rgba(16,24,40,.08)!important;
}
body.oti-bento-v5 > .container .header h1,
body.oti-bento-v5 > .wrap h1,
body.oti-bento-v5 > main.page h1{color:var(--oti-ink)!important;letter-spacing:-.04em!important;font-weight:700!important}
body.oti-bento-v5 > .container .subtitle{color:var(--oti-muted)!important}
body.oti-bento-v5 .panel,
body.oti-bento-v5 .card,
body.oti-bento-v5 .kpi,
body.oti-bento-v5 .admin-control-zone,
body.oti-bento-v5 .production-zone,
body.oti-bento-v5 .storage-health-card{
  border-radius:22px!important;
  border-color:rgba(17,24,39,.065)!important;
  box-shadow:none!important;
}
body.oti-bento-v5 .panel{background:#fff!important;padding:18px!important}
body.oti-bento-v5 .panel h3{color:var(--oti-ink)!important;letter-spacing:-.02em!important}
body.oti-bento-v5 input,
body.oti-bento-v5 select,
body.oti-bento-v5 textarea{
  border-color:#E0E4E8!important;
  border-radius:12px!important;
  background:#FAFBFC!important;
  color:var(--oti-ink)!important;
}
body.oti-bento-v5 input:focus,
body.oti-bento-v5 select:focus,
body.oti-bento-v5 textarea:focus{border-color:var(--oti-cyan)!important;box-shadow:0 0 0 4px rgba(0,181,220,.08)!important;outline:none!important;background:#fff!important}
body.oti-bento-v5 .btn{border-radius:12px!important;background:var(--oti-blue)!important;box-shadow:none!important}
body.oti-bento-v5 .btn.green{background:var(--oti-green)!important}
body.oti-bento-v5 .btn.gray{background:#667085!important}
body.oti-bento-v5 .btn.outline{background:#fff!important;color:var(--oti-blue)!important;border-color:#DDE5EE!important}
body.oti-bento-v5 .admin-control-zone{background:#F7F9FB!important;border-color:#E4E8ED!important}
body.oti-bento-v5 .admin-control-head span{color:var(--oti-cyan-2)!important}
body.oti-bento-v5 .admin-control-head h3{color:var(--oti-ink)!important}
body.oti-bento-v5 .admin-control-main{background:var(--oti-blue)!important;border-radius:12px!important}
body.oti-bento-v5 .admin-control-icon{background:#EAF9FC!important;color:var(--oti-cyan-2)!important}

/* Centro de reportes / tarjetas libres */
body.oti-bento-v5 > .wrap .hero,
body.oti-bento-v5 > main.page .hero{
  border-radius:28px!important;
  background:
    radial-gradient(circle at 90% 20%,rgba(0,181,220,.27),transparent 30%),
    linear-gradient(135deg,var(--oti-blue),#07549A 65%,#087A91)!important;
  box-shadow:0 22px 50px rgba(0,59,136,.16)!important;
}
body.oti-bento-v5 > .wrap .kpi,
body.oti-bento-v5 > .wrap .card,
body.oti-bento-v5 > main.page .kpi,
body.oti-bento-v5 > main.page .card{
  background:#fff!important;border:1px solid rgba(17,24,39,.055)!important;box-shadow:var(--oti-shadow)!important;
}
body.oti-bento-v5 > .wrap .icon{background:#EAF9FC!important;color:var(--oti-cyan-2)!important}
body.oti-bento-v5 > .wrap .card-actions a{background:var(--oti-blue)!important}
body.oti-bento-v5 > .wrap .card-actions a.secondary{background:#F1F3F5!important;color:var(--oti-blue)!important}

/* Scrollbars discretas */
body.oti-bento-v5 *{scrollbar-width:thin;scrollbar-color:#CFD5DC transparent}
body.oti-bento-v5 *::-webkit-scrollbar{width:8px;height:8px}
body.oti-bento-v5 *::-webkit-scrollbar-thumb{background:#CFD5DC;border-radius:99px}
body.oti-bento-v5 *::-webkit-scrollbar-track{background:transparent}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1500px){
  body.oti-bento-v5 .kpi-row.kpi-admin{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.oti-bento-v5 .fase2-command-panel{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:1220px){
  body.oti-bento-v5 .oti-app{grid-template-columns:226px minmax(0,1fr)!important}
  body.oti-bento-v5 .oti-sidebar{width:204px!important}
  body.oti-bento-v5 .hero-panel{grid-template-columns:1fr!important}
  body.oti-bento-v5 .quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.oti-bento-v5 .quick-actions h3{grid-column:1/-1!important}
  body.oti-bento-v5 .hero-video-visual{min-height:250px!important}
  body.oti-bento-v5 .hero-video-title{max-width:100%!important}
  body.oti-bento-v5 .content-grid{grid-template-columns:1fr 1fr!important}
  body.oti-bento-v5 .chart-card{grid-column:1/-1!important}
  body.oti-bento-v5 .kpi-row.kpi-tecnico{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
  body.oti-bento-v5{padding:0!important}
  body.oti-bento-v5 .oti-app{display:block!important}
  body.oti-bento-v5 .oti-sidebar{
    position:fixed!important;left:12px!important;top:12px!important;bottom:12px!important;
    width:min(285px,calc(100vw - 24px))!important;height:auto!important;min-height:0!important;
    margin:0!important;z-index:1300!important;
    transform:translateX(calc(-100% - 28px))!important;
    transition:transform .24s ease!important;
    box-shadow:0 30px 75px rgba(16,24,40,.22)!important;
  }
  body.oti-bento-v5 .oti-sidebar.sidebar-open{transform:translateX(0)!important}
  body.oti-bento-v5 .oti-main{padding:10px!important}
  body.oti-bento-v5 .topbar{top:8px!important}
  body.oti-bento-v5 .topbar-left img{display:none!important}
  body.oti-bento-v5 .oti-live-status{display:none!important}
  body.oti-bento-v5 .profile > div:not(.avatar){display:none!important}
  body.oti-bento-v5 .logout{padding:0 10px!important}
  body.oti-bento-v5 .kpi-row.kpi-admin,
  body.oti-bento-v5 .kpi-row.kpi-tecnico,
  body.oti-bento-v5 .kpi-row.kpi-facultad,
  body.oti-bento-v5 .fase2-command-panel{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.oti-bento-v5 .content-grid{grid-template-columns:1fr!important}
  body.oti-bento-v5 .chart-card{grid-column:auto!important}
  body.oti-bento-v5 .bottom-features{grid-template-columns:1fr 1fr!important}
  body.oti-bento-v5.oti-login-page{padding:12px!important}
  body.oti-bento-v5 .oti-login-shell{border-radius:26px!important}
}
@media(max-width:640px){
  body.oti-bento-v5 .topbar{min-height:56px!important;padding:7px!important;border-radius:18px!important}
  body.oti-bento-v5 .topbar-actions{gap:6px!important}
  body.oti-bento-v5 .icon-btn{display:none!important}
  body.oti-bento-v5 .profile{padding:3px!important}
  body.oti-bento-v5 .hero-panel{min-height:auto!important;padding:21px!important;border-radius:24px!important}
  body.oti-bento-v5 .hero-copy h2{font-size:31px!important}
  body.oti-bento-v5 .hero-copy p{font-size:12px!important}
  body.oti-bento-v5 .quick-actions{grid-template-columns:1fr!important}
  body.oti-bento-v5 .quick-actions h3{grid-column:auto!important}
  body.oti-bento-v5 .hero-video-visual{min-height:260px!important;padding:20px!important;border-radius:26px!important}
  body.oti-bento-v5 .hero-video-title{font-size:26px!important}
  body.oti-bento-v5 .hero-video-copy{font-size:12px!important}
  body.oti-bento-v5 .hero-video-play{width:100%!important;justify-content:flex-start!important}
  body.oti-bento-v5 .tutorial-video-shell{width:min(100vw - 18px,860px)!important;margin:10px auto!important;padding:18px!important;border-radius:22px!important}
  body.oti-bento-v5 .tutorial-video-head h3{font-size:22px!important}
  body.oti-bento-v5 .kpi-row.kpi-admin,
  body.oti-bento-v5 .kpi-row.kpi-tecnico,
  body.oti-bento-v5 .kpi-row.kpi-facultad,
  body.oti-bento-v5 .fase2-command-panel{grid-template-columns:1fr!important}
  body.oti-bento-v5 .kpi-card{min-height:110px!important}
  body.oti-bento-v5 .bottom-features{grid-template-columns:1fr!important}
  body.oti-bento-v5 .recent-panel{padding:14px!important;border-radius:20px!important}
  body.oti-bento-v5 .fase2-board-title{align-items:flex-start!important;flex-direction:column!important}
  body.oti-bento-v5 .fase2-board-actions{width:100%!important}
  body.oti-bento-v5 .fase2-board-actions button{flex:1!important}
  body.oti-bento-v5 .ticket-modal{padding:8px!important}
  body.oti-bento-v5 .ticket-modal-card{border-radius:22px!important;padding:17px!important}
  body.oti-bento-v5 > .container,
  body.oti-bento-v5 > .wrap,
  body.oti-bento-v5 > main.page{margin:10px!important;padding-left:12px!important;padding-right:12px!important}
}

@media print{
  body.oti-bento-v5{background:#fff!important}
  body.oti-bento-v5 .oti-sidebar,
  body.oti-bento-v5 .topbar,
  body.oti-bento-v5 .hero-actions,
  body.oti-bento-v5 .logout{display:none!important}
  body.oti-bento-v5 .oti-main,
  body.oti-bento-v5 .page-shell{padding:0!important}
  body.oti-bento-v5 .panel-card,
  body.oti-bento-v5 .recent-panel,
  body.oti-bento-v5 .card,
  body.oti-bento-v5 .summary-grid article{box-shadow:none!important}
}

/* =========================================================
   FASE 5.0.1 · AJUSTE VISUAL PUNTUAL SOLICITADO
   Mantiene intacta la estructura FASE 5 original.
   1) Más presencia de las líneas inferiores en KPIs.
   2) Fondo más visible en el bloque lateral Gestión OTI.
   ========================================================= */

/* Líneas inferiores de las tarjetas KPI: más visibles, sin saturar */
body.oti-bento-v5 .kpi-card::after{
  height:24px!important;
  opacity:.22!important;
  background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 8px)!important;
  mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%)!important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%)!important;
}
body.oti-bento-v5 .kpi-card.blue::after{color:rgba(0,59,136,.96)!important}
body.oti-bento-v5 .kpi-card.green::after{color:rgba(91,189,73,.96)!important}
body.oti-bento-v5 .kpi-card.orange::after{color:rgba(247,144,9,.96)!important}
body.oti-bento-v5 .kpi-card.cyan::after{color:rgba(0,181,220,.96)!important}
body.oti-bento-v5 .kpi-card.purple::after{color:rgba(122,90,248,.94)!important}
body.oti-bento-v5 .kpi-card.dark::after{color:rgba(52,64,84,.92)!important}
body.oti-bento-v5 .kpi-card.red::after{color:rgba(217,45,32,.94)!important}

/* Gestión OTI: fondo corporativo suave pero claramente perceptible */
body.oti-bento-v5 .sidebar-help-clean{
  background:
    radial-gradient(circle at 100% 0%,rgba(0,181,220,.16),transparent 44%),
    linear-gradient(155deg,#EAF5FF 0%,#F1FAFD 56%,#EDF8F1 100%)!important;
  border:1px solid #CFE1EE!important;
  box-shadow:0 12px 28px rgba(0,59,136,.075)!important;
}
body.oti-bento-v5 .sidebar-card-icon{
  background:linear-gradient(145deg,#DDF3FF 0%,#DDF8F3 100%)!important;
  color:var(--oti-blue)!important;
  border:1px solid rgba(0,181,220,.10)!important;
}
body.oti-bento-v5 .sidebar-card-heading h3,
body.oti-bento-v5 .sidebar-help-clean h3{
  color:#172033!important;
}
body.oti-bento-v5 .sidebar-card-heading small{
  color:#6B768A!important;
}
body.oti-bento-v5 .mini-stat{
  border-bottom-color:rgba(0,59,136,.09)!important;
}
body.oti-bento-v5 .mini-stat span{
  color:#557087!important;
}
body.oti-bento-v5 .mini-stat strong{
  color:#163A61!important;
}
body.oti-bento-v5 .sidebar-sla-track{
  background:rgba(0,59,136,.10)!important;
}
body.oti-bento-v5 .sidebar-help-clean button,
body.oti-bento-v5 .sidebar-help-clean a{
  background:rgba(255,255,255,.92)!important;
  border-color:#C9DCE8!important;
  color:var(--oti-blue)!important;
  box-shadow:0 7px 16px rgba(0,59,136,.055)!important;
}

/* =========================================================
   FASE 5.2.1 · AJUSTE DE DEGRADADO EN TARJETA LATERAL GESTIÓN OTI
   Fondo más visible con degradado cian → azul corporativo.
   ========================================================= */
body.oti-bento-v5 .sidebar-help-clean{
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(90deg, #19C8C7 0%, #16B4E0 48%, #1678F2 100%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 16px 34px rgba(12,73,171,.18)!important;
}
body.oti-bento-v5 .sidebar-card-icon{
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#FFFFFF!important;
}
body.oti-bento-v5 .sidebar-card-heading h3,
body.oti-bento-v5 .sidebar-help-clean h3,
body.oti-bento-v5 .mini-stat strong{
  color:#FFFFFF!important;
}
body.oti-bento-v5 .sidebar-card-heading small,
body.oti-bento-v5 .mini-stat span{
  color:rgba(255,255,255,.82)!important;
}
body.oti-bento-v5 .mini-stat{border-bottom-color:rgba(255,255,255,.14)!important}
body.oti-bento-v5 .sidebar-sla-track{background:rgba(255,255,255,.22)!important}
body.oti-bento-v5 .sidebar-help-clean button,
body.oti-bento-v5 .sidebar-help-clean a{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(255,255,255,.55)!important;
  color:#0C4EA3!important;
  box-shadow:0 8px 18px rgba(8,42,104,.12)!important;
}
body.oti-bento-v5 .sidebar-help-clean button b,
body.oti-bento-v5 .sidebar-help-clean a b{color:#9DDCF3!important}

/* =========================================================
   FASE 5.2.4 · TARJETA VIDEO FACULTAD CON MINIATURA / YOUTUBE
   ========================================================= */
body.oti-bento-v5 .hero-video-visual{
  justify-content:space-between!important;
  padding:0!important;
  isolation:isolate!important;
  background:linear-gradient(135deg,#18c5c7 0%,#0aa9db 48%,#166ef0 100%)!important;
}
body.oti-bento-v5 .hero-video-visual::before,
body.oti-bento-v5 .hero-video-visual::after{display:none!important}
body.oti-bento-v5 .hero-video-thumb{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  transform:scale(1.01)!important;
  transition:transform .28s ease!important;
}
body.oti-bento-v5 .hero-video-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,rgba(1,35,77,.10) 0%,rgba(1,35,77,.08) 34%,rgba(1,35,77,.68) 100%),
    linear-gradient(90deg,rgba(0,36,84,.16),transparent 56%)!important;
}
body.oti-bento-v5 .hero-video-topline{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  padding:18px 18px 0!important;
}
body.oti-bento-v5 .hero-video-kicker{
  margin:0!important;
  background:rgba(7,28,67,.28)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  backdrop-filter:blur(10px)!important;
  box-shadow:0 8px 18px rgba(3,25,64,.08)!important;
}
body.oti-bento-v5 .hero-video-duration{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:31px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:rgba(7,28,67,.64)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  border:1px solid rgba(255,255,255,.15)!important;
  backdrop-filter:blur(10px)!important;
}
body.oti-bento-v5 .hero-video-center-play{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:46%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:70px!important;
  height:70px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.92)!important;
  color:#0B5CC3!important;
  font-size:22px!important;
  padding-left:4px!important;
  box-shadow:0 18px 35px rgba(3,25,64,.25)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  transition:transform .18s ease,background .18s ease!important;
}
body.oti-bento-v5 .hero-video-content{
  position:relative!important;
  z-index:3!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:10px 16px!important;
  width:100%!important;
  padding:18px!important;
}
body.oti-bento-v5 .hero-video-title{
  grid-column:1/-1!important;
  margin:0!important;
  max-width:420px!important;
  color:#fff!important;
  font-size:23px!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  text-shadow:0 2px 12px rgba(0,23,63,.22)!important;
}
body.oti-bento-v5 .hero-video-copy{
  grid-column:1/2!important;
  margin:0!important;
  max-width:380px!important;
  color:rgba(255,255,255,.84)!important;
  font-size:11px!important;
  line-height:1.45!important;
  text-shadow:0 1px 10px rgba(0,23,63,.22)!important;
}
body.oti-bento-v5 .hero-video-play{
  grid-column:2/3!important;
  grid-row:2/3!important;
  align-self:end!important;
  justify-self:end!important;
  margin:0!important;
  padding:11px 13px!important;
  min-width:150px!important;
  justify-content:space-between!important;
  border-radius:16px!important;
  font-size:11px!important;
}
body.oti-bento-v5 .hero-video-arrow{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  background:#0B5CC3!important;
  color:#fff!important;
  font-size:15px!important;
}
body.oti-bento-v5 .hero-video-tags,
body.oti-bento-v5 .hero-video-note,
body.oti-bento-v5 .hero-video-play-icon{display:none!important}
body.oti-bento-v5 .hero-video-launch:hover .hero-video-thumb{transform:scale(1.045)!important}
body.oti-bento-v5 .hero-video-launch:hover .hero-video-center-play{
  transform:translate(-50%,-50%) scale(1.06)!important;
  background:#fff!important;
}
body.oti-bento-v5 .tutorial-video-youtube-wrap{
  position:relative!important;
  padding-top:56.25%!important;
  height:0!important;
}
body.oti-bento-v5 .tutorial-video-youtube{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  background:#071936!important;
}

@media(max-width:1220px){
  body.oti-bento-v5 .hero-video-visual{min-height:330px!important}
  body.oti-bento-v5 .hero-video-title{font-size:28px!important;max-width:600px!important}
  body.oti-bento-v5 .hero-video-copy{max-width:560px!important;font-size:12px!important}
}
@media(max-width:640px){
  body.oti-bento-v5 .hero-video-visual{min-height:320px!important}
  body.oti-bento-v5 .hero-video-content{grid-template-columns:1fr!important;padding:16px!important}
  body.oti-bento-v5 .hero-video-title{font-size:24px!important}
  body.oti-bento-v5 .hero-video-copy{grid-column:1!important;font-size:11px!important}
  body.oti-bento-v5 .hero-video-play{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important;width:100%!important;min-width:0!important}
  body.oti-bento-v5 .hero-video-center-play{width:62px!important;height:62px!important}
}

/* =========================================================
   FASE 5.2.5 · PULIDO VISUAL TARJETA / MODAL TUTORIAL
   - Una sola llamada visual: play central
   - Miniatura limpia
   - Modal 16:9 sin información técnica para el usuario final
   ========================================================= */
body.oti-bento-v5 .hero-video-visual{
  min-height:190px!important;
  border-radius:24px!important;
  box-shadow:0 18px 42px rgba(5,46,120,.20)!important;
}
body.oti-bento-v5 .hero-video-overlay{
  background:
    linear-gradient(180deg,rgba(2,33,72,.08) 0%,rgba(2,33,72,.04) 35%,rgba(2,33,72,.74) 100%),
    linear-gradient(90deg,rgba(0,41,94,.18),transparent 60%)!important;
}
body.oti-bento-v5 .hero-video-topline{
  padding:14px 14px 0!important;
}
body.oti-bento-v5 .hero-video-kicker{
  padding:6px 9px!important;
  font-size:8.5px!important;
  letter-spacing:.14em!important;
  background:rgba(4,37,86,.34)!important;
}
body.oti-bento-v5 .hero-video-duration{
  min-height:27px!important;
  padding:0 9px!important;
  font-size:8.8px!important;
}
body.oti-bento-v5 .hero-video-center-play{
  top:46%!important;
  width:58px!important;
  height:58px!important;
  font-size:18px!important;
  padding-left:3px!important;
  background:rgba(255,255,255,.94)!important;
  color:#0A5DC7!important;
  box-shadow:0 14px 32px rgba(2,25,63,.28)!important;
}
body.oti-bento-v5 .hero-video-content{
  display:block!important;
  padding:14px 16px 15px!important;
}
body.oti-bento-v5 .hero-video-title{
  display:block!important;
  margin:0!important;
  max-width:360px!important;
  font-size:19px!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
body.oti-bento-v5 .hero-video-copy{
  display:block!important;
  margin-top:5px!important;
  max-width:330px!important;
  font-size:10px!important;
  line-height:1.4!important;
  color:rgba(255,255,255,.80)!important;
}
body.oti-bento-v5 .hero-video-play,
body.oti-bento-v5 .hero-video-arrow{display:none!important}
body.oti-bento-v5 .hero-video-launch:hover .hero-video-thumb{transform:scale(1.035)!important}
body.oti-bento-v5 .hero-video-launch:hover .hero-video-center-play{
  transform:translate(-50%,-50%) scale(1.07)!important;
  box-shadow:0 18px 36px rgba(2,25,63,.32)!important;
}

/* Modal más limpio y audiovisual */
body.oti-bento-v5 .tutorial-video-shell{
  width:min(920px,calc(100vw - 36px))!important;
  margin:32px auto!important;
  padding:22px!important;
  border-radius:28px!important;
  background:#F8FBFF!important;
}
body.oti-bento-v5 .tutorial-video-head{
  padding:2px 58px 14px 2px!important;
}
body.oti-bento-v5 .tutorial-video-eyebrow{
  margin-bottom:6px!important;
  font-size:9px!important;
}
body.oti-bento-v5 .tutorial-video-head h3{
  font-size:27px!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
body.oti-bento-v5 .tutorial-video-head p{
  margin-top:7px!important;
  font-size:12px!important;
  color:#667085!important;
}
body.oti-bento-v5 .tutorial-video-player-wrap,
body.oti-bento-v5 .tutorial-video-empty{
  margin-top:4px!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
body.oti-bento-v5 .tutorial-video-player-wrap:not(.tutorial-video-youtube-wrap){
  aspect-ratio:16 / 9!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.oti-bento-v5 .tutorial-video-player{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
body.oti-bento-v5 .tutorial-video-empty{
  min-height:0!important;
  aspect-ratio:16 / 9!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  padding:30px!important;
  background:
    radial-gradient(circle at 80% 20%,rgba(0,181,220,.15),transparent 28%),
    linear-gradient(135deg,#EDF7FF 0%,#F8FBFF 58%,#EEF8F4 100%)!important;
  border:1px solid #D7E4EF!important;
}
body.oti-bento-v5 .tutorial-video-empty-icon{
  width:64px!important;
  height:64px!important;
  border-radius:50%!important;
  font-size:21px!important;
  padding-left:4px!important;
  box-shadow:0 12px 28px rgba(27,98,202,.20)!important;
}
body.oti-bento-v5 .tutorial-video-empty strong{
  margin-top:4px!important;
  max-width:520px!important;
  font-size:20px!important;
  line-height:1.15!important;
}
body.oti-bento-v5 .tutorial-video-empty p{
  max-width:520px!important;
  font-size:12px!important;
  line-height:1.55!important;
}
body.oti-bento-v5 .tutorial-video-empty code{display:none!important}

@media(max-width:1220px){
  body.oti-bento-v5 .hero-video-visual{min-height:245px!important}
  body.oti-bento-v5 .hero-video-title{font-size:24px!important;max-width:560px!important}
  body.oti-bento-v5 .hero-video-copy{font-size:11px!important;max-width:520px!important}
}
@media(max-width:640px){
  body.oti-bento-v5 .hero-video-visual{min-height:260px!important;border-radius:22px!important}
  body.oti-bento-v5 .hero-video-center-play{width:56px!important;height:56px!important}
  body.oti-bento-v5 .hero-video-content{padding:14px!important}
  body.oti-bento-v5 .hero-video-title{font-size:22px!important}
  body.oti-bento-v5 .hero-video-copy{font-size:10.5px!important}
  body.oti-bento-v5 .tutorial-video-shell{width:calc(100vw - 18px)!important;margin:9px auto!important;padding:14px!important;border-radius:20px!important}
  body.oti-bento-v5 .tutorial-video-head{padding-right:46px!important}
  body.oti-bento-v5 .tutorial-video-head h3{font-size:21px!important}
  body.oti-bento-v5 .tutorial-video-empty{padding:20px!important}
  body.oti-bento-v5 .tutorial-video-empty strong{font-size:17px!important}
}

/* =========================================================
   FASE 5.2.6 · DASHBOARD FACULTADES / UNIDADES / DEPENDENCIAS
   Ajuste visual basado en la maqueta aprobada:
   - Hero institucional separado del tutorial
   - Tarjeta tutorial 16:9 tipo multimedia
   - KPIs con iconos grandes y jerarquía visual
   Solo afecta a usuarios institucionales (role-faculty).
   ========================================================= */

/* Hero de dos tarjetas independientes */
body.oti-bento-v5.role-faculty .hero-panel{
  overflow:visible!important;
  min-height:300px!important;
  margin-top:14px!important;
  padding:0!important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,1fr)!important;
  gap:16px!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.oti-bento-v5.role-faculty .hero-panel::after{display:none!important}
body.oti-bento-v5.role-faculty .hero-copy{
  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:300px!important;
  padding:34px 38px!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 90% 12%,rgba(0,181,220,.12),transparent 27%),
    radial-gradient(circle at 78% 112%,rgba(43,102,235,.22),transparent 35%),
    linear-gradient(135deg,#073B88 0%,#064EA6 54%,#0B3F96 100%)!important;
  box-shadow:0 20px 48px rgba(0,59,136,.17)!important;
}
body.oti-bento-v5.role-faculty .hero-copy::after{
  content:""!important;
  position:absolute!important;
  right:26px!important;
  top:28px!important;
  width:140px!important;
  height:180px!important;
  opacity:.20!important;
  background-image:radial-gradient(circle,rgba(255,255,255,.62) 1.1px,transparent 1.2px)!important;
  background-size:12px 12px!important;
  pointer-events:none!important;
}
body.oti-bento-v5.role-faculty .hero-copy h2{
  position:relative!important;
  z-index:2!important;
  max-width:680px!important;
  font-size:clamp(35px,3.25vw,48px)!important;
  line-height:1.02!important;
}
body.oti-bento-v5.role-faculty .hero-copy p{
  position:relative!important;
  z-index:2!important;
  max-width:560px!important;
  margin-top:16px!important;
  color:rgba(255,255,255,.88)!important;
  font-size:14px!important;
  line-height:1.5!important;
}
body.oti-bento-v5.role-faculty .hero-search{
  position:relative!important;
  z-index:2!important;
  width:min(100%,620px)!important;
  max-width:620px!important;
  min-height:54px!important;
  margin-top:25px!important;
  padding:5px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:16px!important;
  background:#fff!important;
  backdrop-filter:none!important;
  box-shadow:0 10px 24px rgba(0,34,86,.13)!important;
}
body.oti-bento-v5.role-faculty .hero-search input{
  color:#26364D!important;
  background:transparent!important;
  font-size:12.5px!important;
}
body.oti-bento-v5.role-faculty .hero-search input::placeholder{color:#A0ACBD!important}
body.oti-bento-v5.role-faculty .hero-search button{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  color:#07479B!important;
  background:#fff!important;
  border:1px solid #E4EAF2!important;
  box-shadow:none!important;
}
body.oti-bento-v5.role-faculty .hero-register-btn{
  position:relative!important;
  z-index:2!important;
  align-self:flex-start!important;
  min-height:48px!important;
  margin-top:18px!important;
  padding:0 21px!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#B9EB8D 0%,#A7DF7E 100%)!important;
  color:#173D20!important;
  font-size:12px!important;
  font-weight:800!important;
  box-shadow:0 10px 24px rgba(60,146,50,.18)!important;
}
body.oti-bento-v5.role-faculty .hero-register-btn:hover{
  background:linear-gradient(135deg,#C6F29D 0%,#B3E889 100%)!important;
}

/* Tutorial: tarjeta multimedia tipo portada */
body.oti-bento-v5.role-faculty .hero-video-card{
  min-width:0!important;
  height:100%!important;
}
body.oti-bento-v5.role-faculty .hero-video-launch{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
body.oti-bento-v5.role-faculty .hero-video-visual{
  position:relative!important;
  overflow:hidden!important;
  min-height:300px!important;
  height:100%!important;
  aspect-ratio:auto!important;
  border-radius:28px!important;
  border:1px solid rgba(15,38,75,.10)!important;
  background:linear-gradient(135deg,#91D8E9 0%,#5BB9DF 46%,#397CDC 100%)!important;
  box-shadow:0 20px 48px rgba(15,48,103,.18)!important;
}
body.oti-bento-v5.role-faculty .hero-video-thumb{
  filter:saturate(.82) contrast(.97) brightness(.92)!important;
}
body.oti-bento-v5.role-faculty .hero-video-overlay{
  background:
    linear-gradient(180deg,rgba(6,25,54,.04) 0%,rgba(6,25,54,.04) 36%,rgba(6,25,54,.73) 100%),
    linear-gradient(90deg,rgba(1,37,82,.18),transparent 60%)!important;
}
body.oti-bento-v5.role-faculty .hero-video-topline{
  padding:20px 20px 0!important;
}
body.oti-bento-v5.role-faculty .hero-video-kicker{
  padding:7px 12px!important;
  border:0!important;
  border-radius:999px!important;
  background:#0B4BAF!important;
  color:#fff!important;
  font-size:9.5px!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
  box-shadow:0 8px 20px rgba(3,32,82,.20)!important;
}
body.oti-bento-v5.role-faculty .hero-video-duration{
  min-height:30px!important;
  padding:0 11px!important;
  background:rgba(9,24,48,.78)!important;
  font-size:10px!important;
}
body.oti-bento-v5.role-faculty .hero-video-center-play{
  left:50%!important;
  top:47%!important;
  width:84px!important;
  height:84px!important;
  background:rgba(255,255,255,.96)!important;
  color:#0A68D8!important;
  font-size:27px!important;
  box-shadow:0 18px 42px rgba(4,26,64,.28)!important;
}
body.oti-bento-v5.role-faculty .hero-video-content{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  display:block!important;
  padding:20px 22px 22px!important;
}
body.oti-bento-v5.role-faculty .hero-video-title{
  max-width:520px!important;
  font-size:26px!important;
  line-height:1.04!important;
  font-weight:780!important;
  letter-spacing:-.045em!important;
}
body.oti-bento-v5.role-faculty .hero-video-copy{
  max-width:520px!important;
  margin-top:7px!important;
  color:rgba(255,255,255,.9)!important;
  font-size:12.5px!important;
  line-height:1.4!important;
}
body.oti-bento-v5.role-faculty .hero-video-launch:hover .hero-video-thumb{transform:scale(1.035)!important}
body.oti-bento-v5.role-faculty .hero-video-launch:hover .hero-video-center-play{
  transform:translate(-50%,-50%) scale(1.06)!important;
}

/* KPI de facultad como las tarjetas de la maqueta */
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad{
  gap:14px!important;
  margin:16px 0!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card{
  min-height:150px!important;
  padding:24px 18px 18px 92px!important;
  border:1px solid #E7EBF0!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(16,24,40,.065)!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card::before{
  content:""!important;
  left:18px!important;
  top:22px!important;
  width:54px!important;
  height:54px!important;
  border-radius:17px!important;
  display:grid!important;
  place-items:center!important;
  background:#EAF3FF!important;
  box-shadow:none!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .faculty-kpi-open::before{
  content:"▤"!important;
  color:#0875E8!important;
  font-size:26px!important;
  background:#E9F2FF!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .faculty-kpi-attention::before{
  content:"◔"!important;
  color:#08A9D6!important;
  font-size:28px!important;
  background:#E7F9FC!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .faculty-kpi-validation::before{
  content:"◷"!important;
  color:#8557EE!important;
  font-size:28px!important;
  background:#F1ECFF!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .faculty-kpi-closed::before{
  content:"✓"!important;
  color:#4DAF45!important;
  font-size:22px!important;
  background:#EAF7E7!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card>span{
  margin:0 0 9px!important;
  color:#64748B!important;
  font-size:10px!important;
  letter-spacing:.10em!important;
  font-weight:820!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card>strong{
  font-size:31px!important;
  color:#111827!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card>small{
  max-width:190px!important;
  margin-top:8px!important;
  color:#536178!important;
  font-size:11px!important;
  line-height:1.38!important;
}
body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card::after{
  left:18px!important;
  right:18px!important;
  bottom:13px!important;
  height:12px!important;
  opacity:.22!important;
}

/* Última actividad y bandeja con el mismo acabado limpio */
body.oti-bento-v5.role-faculty .faculty-content-grid .panel-card,
body.oti-bento-v5.role-faculty .recent-panel{
  border:1px solid #E7EBF0!important;
  border-radius:25px!important;
  box-shadow:0 14px 34px rgba(16,24,40,.055)!important;
}
body.oti-bento-v5.role-faculty .faculty-activity-focused{
  padding:20px!important;
}
body.oti-bento-v5.role-faculty .last-activity-box{
  padding:18px!important;
  border-radius:17px!important;
  background:#F8FAFD!important;
  border-color:#E8EDF3!important;
}
body.oti-bento-v5.role-faculty .recent-panel{
  padding:22px!important;
}

@media(max-width:1260px){
  body.oti-bento-v5.role-faculty .hero-panel{
    grid-template-columns:1fr!important;
  }
  body.oti-bento-v5.role-faculty .hero-copy,
  body.oti-bento-v5.role-faculty .hero-video-visual{min-height:285px!important}
  body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){
  body.oti-bento-v5.role-faculty .hero-panel{gap:12px!important}
  body.oti-bento-v5.role-faculty .hero-copy{min-height:auto!important;padding:25px 22px!important;border-radius:23px!important}
  body.oti-bento-v5.role-faculty .hero-copy h2{font-size:33px!important}
  body.oti-bento-v5.role-faculty .hero-search{width:100%!important;max-width:none!important}
  body.oti-bento-v5.role-faculty .hero-video-visual{min-height:270px!important;border-radius:23px!important}
  body.oti-bento-v5.role-faculty .hero-video-center-play{width:68px!important;height:68px!important;font-size:22px!important}
  body.oti-bento-v5.role-faculty .hero-video-title{font-size:22px!important}
  body.oti-bento-v5.role-faculty .hero-video-copy{font-size:11px!important}
  body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad{grid-template-columns:1fr!important}
  body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card{min-height:132px!important}
}

/* =========================================================
   FASE 5.2.7 · MINIATURA FOTOGRÁFICA TUTORIAL FACULTAD
   Foto institucional con MacBook integrada en la tarjeta.
   ========================================================= */
body.oti-bento-v5.role-faculty .hero-video-thumb{
  background-position:center center!important;
  filter:saturate(.92) contrast(1.02) brightness(.94)!important;
}
body.oti-bento-v5.role-faculty .hero-video-overlay{
  background:
    linear-gradient(180deg,rgba(4,22,49,.03) 0%,rgba(4,22,49,.02) 38%,rgba(3,20,45,.76) 100%),
    linear-gradient(90deg,rgba(3,35,82,.26) 0%,rgba(3,35,82,.10) 38%,transparent 67%)!important;
}

/* =========================================================
   FASE 5.3 · CENTRO DE NOTIFICACIONES + LIQUID GLASS OTI
   Facultades, Unidades y Dependencias
   ========================================================= */
body.oti-bento-v5 .oti-notification-bell{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  appearance:none!important;
  cursor:pointer!important;
}
body.oti-bento-v5 .oti-notification-bell svg{
  width:18px!important;
  height:18px!important;
}
body.oti-bento-v5 .oti-notification-badge{
  position:absolute!important;
  top:-5px!important;
  right:-5px!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 5px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  background:#E5484D!important;
  color:#fff!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:850!important;
  box-shadow:0 5px 12px rgba(185,28,28,.24)!important;
}
body.oti-bento-v5 .oti-notification-panel{
  position:fixed!important;
  z-index:1700!important;
  top:78px!important;
  right:84px!important;
  width:min(410px,calc(100vw - 28px))!important;
  max-height:min(590px,calc(100vh - 100px))!important;
  padding:14px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(-12px) scale(.97)!important;
  transform-origin:90% 0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.68)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 82% 0%,rgba(78,194,255,.24),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(244,249,255,.66))!important;
  -webkit-backdrop-filter:blur(30px) saturate(185%)!important;
  backdrop-filter:blur(30px) saturate(185%)!important;
  box-shadow:
    0 25px 65px rgba(20,42,76,.22),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(170,196,224,.20)!important;
  transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .2s!important;
}
body.oti-bento-v5 .oti-notification-panel::before{
  content:"";
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.96),transparent)!important;
  pointer-events:none!important;
}
body.oti-bento-v5 .oti-notification-panel.is-open{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}
body.oti-bento-v5 .oti-notification-panel-head{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:6px 6px 12px!important;
}
body.oti-bento-v5 .oti-notification-panel-head>div{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}
body.oti-bento-v5 .oti-notification-panel-head span{
  color:#1770A8!important;
  font-size:8.5px!important;
  font-weight:850!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
body.oti-bento-v5 .oti-notification-panel-head strong{
  color:#10233E!important;
  font-size:18px!important;
  letter-spacing:-.03em!important;
}
body.oti-bento-v5 .oti-notification-panel-head button{
  min-height:32px!important;
  padding:0 11px!important;
  border:1px solid rgba(135,169,205,.28)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.56)!important;
  color:#315477!important;
  font-size:9.5px!important;
  font-weight:760!important;
  cursor:pointer!important;
}
body.oti-bento-v5 .oti-notification-panel-head button:hover{
  background:rgba(255,255,255,.92)!important;
  color:#003B88!important;
}
body.oti-bento-v5 .oti-notification-list{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  max-height:460px!important;
  overflow:auto!important;
  padding:2px!important;
}
body.oti-bento-v5 .oti-notification-item{
  width:100%!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px!important;
  border:1px solid rgba(161,187,214,.24)!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.52)!important;
  color:#132238!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68)!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease!important;
}
body.oti-bento-v5 .oti-notification-item:hover{
  transform:translateY(-1px)!important;
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(85,139,194,.30)!important;
}
body.oti-bento-v5 .oti-notification-item.is-unread{
  background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(226,246,255,.64))!important;
  border-color:rgba(66,160,218,.28)!important;
}
body.oti-bento-v5 .oti-notification-item-icon{
  width:42px!important;
  height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(53,178,232,.18),rgba(42,113,235,.12))!important;
  color:#0B6EB4!important;
  font-size:20px!important;
  font-weight:850!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important;
}
body.oti-bento-v5 .oti-notification-item.level-success .oti-notification-item-icon{background:rgba(91,189,73,.15)!important;color:#3C9A31!important}
body.oti-bento-v5 .oti-notification-item.level-warning .oti-notification-item-icon{background:rgba(247,183,49,.17)!important;color:#B77900!important}
body.oti-bento-v5 .oti-notification-item.level-danger .oti-notification-item-icon{background:rgba(229,72,77,.14)!important;color:#D63D43!important}
body.oti-bento-v5 .oti-notification-item-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
body.oti-bento-v5 .oti-notification-item-copy strong{
  color:#10233E!important;
  font-size:11.5px!important;
  line-height:1.25!important;
}
body.oti-bento-v5 .oti-notification-item-copy small{
  color:#627187!important;
  font-size:9.5px!important;
  line-height:1.38!important;
}
body.oti-bento-v5 .oti-notification-item-copy span{
  margin-top:2px!important;
  color:#8A97A9!important;
  font-size:8.5px!important;
}
body.oti-bento-v5 .oti-notification-item-copy b{color:#245581!important;font-weight:780!important}
body.oti-bento-v5 .oti-notification-item-arrow{color:#8FA8C2!important;font-size:16px!important}
body.oti-bento-v5 .oti-notification-empty{
  min-height:158px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:20px!important;
  color:#65758A!important;
  text-align:center!important;
}
body.oti-bento-v5 .oti-notification-empty[hidden]{display:none!important}
body.oti-bento-v5 .oti-notification-empty>span{
  width:42px!important;
  height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  background:rgba(91,189,73,.14)!important;
  color:#4EAA41!important;
  font-size:20px!important;
}
body.oti-bento-v5 .oti-notification-empty strong{color:#31465E!important;font-size:12px!important}
body.oti-bento-v5 .oti-notification-empty small{max-width:260px!important;font-size:9.5px!important;line-height:1.45!important}

/* Burbuja Liquid Glass en tiempo casi real */
body.oti-bento-v5 .oti-liquid-toast-stack{
  position:fixed!important;
  z-index:1900!important;
  top:82px!important;
  right:24px!important;
  width:min(410px,calc(100vw - 28px))!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  pointer-events:none!important;
}
body.oti-bento-v5 .oti-liquid-toast{
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:4px!important;
  opacity:0!important;
  transform:translate3d(18px,-10px,0) scale(.92)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 90% 4%,rgba(95,212,255,.30),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(235,246,255,.67))!important;
  -webkit-backdrop-filter:blur(28px) saturate(190%)!important;
  backdrop-filter:blur(28px) saturate(190%)!important;
  box-shadow:
    0 24px 55px rgba(19,51,87,.24),
    0 6px 18px rgba(25,83,134,.10),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(136,174,211,.18)!important;
  pointer-events:auto!important;
  transition:opacity .24s ease,transform .38s cubic-bezier(.16,1,.3,1)!important;
}
body.oti-bento-v5 .oti-liquid-toast::before{
  content:"";
  position:absolute!important;
  left:18px!important;
  right:48px!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)!important;
}
body.oti-bento-v5 .oti-liquid-toast::after{
  content:"";
  position:absolute!important;
  right:-46px!important;
  top:-52px!important;
  width:150px!important;
  height:150px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(0,181,220,.18),rgba(0,181,220,0) 70%)!important;
  pointer-events:none!important;
}
body.oti-bento-v5 .oti-liquid-toast.is-visible{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
body.oti-bento-v5 .oti-liquid-toast.is-leaving{
  opacity:0!important;
  transform:translate3d(14px,-5px,0) scale(.96)!important;
}
body.oti-bento-v5 .oti-liquid-toast-main{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  padding:14px 8px 14px 15px!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
  cursor:pointer!important;
}
body.oti-bento-v5 .oti-liquid-toast-icon{
  width:52px!important;
  height:52px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(38,176,230,.22),rgba(39,106,223,.13))!important;
  color:#0875BD!important;
  font-size:24px!important;
  font-weight:850!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 18px rgba(30,105,166,.10)!important;
}
body.oti-bento-v5 .oti-liquid-toast.level-success .oti-liquid-toast-icon{background:linear-gradient(145deg,rgba(113,210,94,.22),rgba(91,189,73,.12))!important;color:#3B9931!important}
body.oti-bento-v5 .oti-liquid-toast.level-warning .oti-liquid-toast-icon{background:linear-gradient(145deg,rgba(255,205,93,.24),rgba(247,183,49,.13))!important;color:#B57700!important}
body.oti-bento-v5 .oti-liquid-toast.level-danger .oti-liquid-toast-icon{background:linear-gradient(145deg,rgba(255,126,129,.22),rgba(229,72,77,.12))!important;color:#CE3B40!important}
body.oti-bento-v5 .oti-liquid-toast-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
}
body.oti-bento-v5 .oti-liquid-toast-kicker{
  margin-bottom:2px!important;
  color:#2480B7!important;
  font-size:8px!important;
  font-weight:850!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}
body.oti-bento-v5 .oti-liquid-toast-copy strong{
  color:#12243C!important;
  font-size:14px!important;
  line-height:1.2!important;
  letter-spacing:-.02em!important;
}
body.oti-bento-v5 .oti-liquid-toast-copy small{
  margin-top:4px!important;
  color:#576A80!important;
  font-size:10px!important;
  line-height:1.42!important;
}
body.oti-bento-v5 .oti-liquid-toast-copy b{
  margin-top:7px!important;
  color:#145C94!important;
  font-size:9.5px!important;
  font-weight:800!important;
}
body.oti-bento-v5 .oti-liquid-toast-close{
  position:relative!important;
  z-index:2!important;
  width:34px!important;
  height:34px!important;
  margin:8px 8px 0 0!important;
  border:1px solid rgba(151,179,207,.20)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.44)!important;
  color:#5D7188!important;
  font-size:17px!important;
  cursor:pointer!important;
}
body.oti-bento-v5 .oti-liquid-toast-close:hover{background:rgba(255,255,255,.90)!important;color:#183E66!important}

@media(max-width:980px){
  body.oti-bento-v5 .oti-notification-panel{top:72px!important;right:12px!important}
  body.oti-bento-v5 .oti-liquid-toast-stack{top:72px!important;right:12px!important}
}
@media(max-width:640px){
  body.oti-bento-v5 .oti-notification-panel{top:66px!important;right:8px!important;width:calc(100vw - 16px)!important;border-radius:24px!important}
  body.oti-bento-v5 .oti-liquid-toast-stack{top:66px!important;right:8px!important;width:calc(100vw - 16px)!important}
  body.oti-bento-v5 .oti-liquid-toast{border-radius:23px!important}
  body.oti-bento-v5 .oti-liquid-toast-main{grid-template-columns:44px minmax(0,1fr)!important;padding:12px 6px 12px 12px!important}
  body.oti-bento-v5 .oti-liquid-toast-icon{width:44px!important;height:44px!important;border-radius:15px!important;font-size:20px!important}
  body.oti-bento-v5 .oti-liquid-toast-copy strong{font-size:13px!important}
}
body.oti-bento-v5 .oti-notification-bell::before{display:none!important}
@media(max-width:640px){body.oti-bento-v5 .oti-notification-bell{display:inline-flex!important}}

/* =========================================================
   FASE 5.3.1 · FIX RESPONSIVE FACULTADES / DEPENDENCIAS
   Corrige el desbordamiento horizontal del dashboard y evita
   que el documento completo genere una barra inferior.
   ========================================================= */
html{
  max-width:100%!important;
  overflow-x:hidden!important;
}
body.oti-bento-v5.role-faculty{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
body.oti-bento-v5.role-faculty .oti-app{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:clip!important;
}
body.oti-bento-v5.role-faculty .oti-main{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
body.oti-bento-v5.role-faculty .oti-main > *,
body.oti-bento-v5.role-faculty .topbar,
body.oti-bento-v5.role-faculty .hero-panel,
body.oti-bento-v5.role-faculty .hero-copy,
body.oti-bento-v5.role-faculty .hero-video-card,
body.oti-bento-v5.role-faculty .hero-video-launch,
body.oti-bento-v5.role-faculty .hero-video-visual,
body.oti-bento-v5.role-faculty .kpi-row,
body.oti-bento-v5.role-faculty .content-grid,
body.oti-bento-v5.role-faculty .recent-panel,
body.oti-bento-v5.role-faculty .fase2-table-toolbar,
body.oti-bento-v5.role-faculty .fase2-table-lite{
  max-width:100%!important;
  min-width:0!important;
}
body.oti-bento-v5.role-faculty .topbar-left,
body.oti-bento-v5.role-faculty .topbar-actions,
body.oti-bento-v5.role-faculty .profile{
  min-width:0!important;
}
body.oti-bento-v5.role-faculty .fase2-table-lite{
  width:100%!important;
  overflow-x:hidden!important;
}
body.oti-bento-v5.role-faculty .fase2-table-lite table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
body.oti-bento-v5.role-faculty .fase2-table-lite td,
body.oti-bento-v5.role-faculty .fase2-table-lite th{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}

/* Laptop / escritorio con escala de Windows: reduce mínimos antes de apilar */
@media (min-width:1181px) and (max-width:1540px){
  body.oti-bento-v5.role-faculty .oti-app{
    grid-template-columns:220px minmax(0,1fr)!important;
  }
  body.oti-bento-v5.role-faculty .oti-sidebar{
    width:202px!important;
    margin-left:10px!important;
  }
  body.oti-bento-v5.role-faculty .oti-main{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.oti-bento-v5.role-faculty .hero-panel{
    grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr)!important;
    gap:12px!important;
  }
  body.oti-bento-v5.role-faculty .hero-copy{
    padding-left:28px!important;
    padding-right:28px!important;
  }
  body.oti-bento-v5.role-faculty .hero-copy h2{
    font-size:clamp(32px,3vw,43px)!important;
  }
  body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad{
    gap:10px!important;
  }
  body.oti-bento-v5.role-faculty .kpi-row.kpi-facultad .kpi-card{
    padding-left:82px!important;
    padding-right:14px!important;
  }
}

/* En laptop angosta se apila el hero antes de que pueda desbordarse */
@media (max-width:1320px){
  body.oti-bento-v5.role-faculty .hero-panel{
    grid-template-columns:1fr!important;
  }
  body.oti-bento-v5.role-faculty .hero-copy,
  body.oti-bento-v5.role-faculty .hero-video-visual{
    min-height:270px!important;
  }
}

@media (max-width:1180px){
  body.oti-bento-v5.role-faculty .oti-app{
    display:block!important;
    grid-template-columns:1fr!important;
  }
  body.oti-bento-v5.role-faculty .oti-main{
    width:100%!important;
    max-width:100%!important;
    padding:10px 12px 24px!important;
  }
  body.oti-bento-v5.role-faculty .topbar{
    width:100%!important;
  }
  body.oti-bento-v5.role-faculty .fase2-table-toolbar{
    width:100%!important;
  }
}

@media (max-width:760px){
  body.oti-bento-v5.role-faculty .oti-main{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  body.oti-bento-v5.role-faculty .topbar-actions{
    max-width:100%!important;
    flex-wrap:wrap!important;
  }
  body.oti-bento-v5.role-faculty .profile{
    max-width:170px!important;
  }
}

/* =========================================================
   FASE 5.3.2 · TABLA OPERATIVA RESPONSIVE PARA MACBOOK / LAPTOP
   Evita superposición entre Código, Asunto y Usuario, y mantiene
   las acciones dentro de la tabla sin ensanchar toda la página.
   ========================================================= */

/* La tabla debe medir el ancho disponible, no el contenido más largo */
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-inline:contain!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}

/* Distribución estable de las 8 columnas de la bandeja operativa */
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(1),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(1){width:13%!important}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(2),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(2){width:19%!important}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(3),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(3){width:15%!important}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(4),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(4){width:14%!important}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(5),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(5){width:8%!important}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(6),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(6){width:10%!important}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(7),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(7){width:13%!important}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th:nth-child(8),
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td:nth-child(8){width:8%!important}

/* Cada celda controla su propio contenido: nada invade la columna vecina */
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th,
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td{
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-main,
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-sub{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-main{
  white-space:nowrap!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-sub{
  white-space:nowrap!important;
  margin-top:4px!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .fase2-ticket-code{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .fase2-ticket-code strong{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .service-pill,
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .priority-pill,
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .status-pill{
  display:inline-flex!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-sizing:border-box!important;
}

/* Acciones: en laptop se apilan dentro de su propia columna */
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-col-actions{
  overflow:visible!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dashboard-actions{
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dashboard-actions > *{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
}

/* Densidad optimizada para MacBook Pro y notebooks entre 1181 y 1600px */
@media (min-width:1181px) and (max-width:1600px){
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite th{
    padding:11px 8px!important;
    font-size:8px!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite td{
    padding:12px 8px!important;
    font-size:10px!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-main{
    font-size:10.5px!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-sub{
    font-size:8.5px!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .service-pill,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .priority-pill,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .status-pill{
    padding:5px 7px!important;
    font-size:8px!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dash-btn,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .mini-link.modal-link{
    min-height:30px!important;
    padding:6px 7px!important;
    font-size:8.2px!important;
  }
}

/* En viewport menor, el scroll queda encapsulado SOLO en la tabla */
@media (max-width:1180px){
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite{
    overflow-x:auto!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite table{
    min-width:1120px!important;
    width:1120px!important;
    table-layout:fixed!important;
  }
}

/* =========================================================
   FASE 5.3.3 · FIX HERO ADMIN / ACCESOS RÁPIDOS EN MACBOOK
   Evita que el bloque derecho fuerce el ancho del hero.
   ========================================================= */
body.oti-bento-v5.role-admin .oti-main,
body.oti-bento-v5.role-admin .hero-panel{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.oti-bento-v5.role-admin .hero-panel{
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr)!important;
  overflow:hidden!important;
}
body.oti-bento-v5.role-admin .hero-panel > *,
body.oti-bento-v5.role-admin .hero-copy,
body.oti-bento-v5.role-admin .quick-actions{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.oti-bento-v5.role-admin .quick-actions{
  width:100%!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(42px,auto)!important;
  gap:10px!important;
  align-content:center!important;
  justify-self:stretch!important;
  overflow:hidden!important;
}
body.oti-bento-v5.role-admin .quick-actions h3{
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body.oti-bento-v5.role-admin .quick-actions a{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
body.oti-bento-v5.role-admin .quick-actions a::before{
  flex:0 0 auto!important;
}

/* Ajuste intermedio: conserva dos columnas sin empujar el viewport */
@media (min-width:1221px) and (max-width:1500px){
  body.oti-bento-v5.role-admin .hero-panel{
    grid-template-columns:minmax(0,1.35fr) minmax(360px,.78fr)!important;
    gap:14px!important;
  }
  body.oti-bento-v5.role-admin .quick-actions{
    padding:15px!important;
    gap:8px!important;
  }
  body.oti-bento-v5.role-admin .quick-actions a{
    padding:9px 9px!important;
    font-size:10px!important;
  }
}

/* En pantallas más angostas el hero se apila antes de desbordarse */
@media (max-width:1220px){
  body.oti-bento-v5.role-admin .hero-panel{
    grid-template-columns:1fr!important;
  }
  body.oti-bento-v5.role-admin .quick-actions{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:640px){
  body.oti-bento-v5.role-admin .quick-actions{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   FASE 5.3.4 · BANDEJA RESPONSIVE EN TARJETAS
   En MacBook/viewport angosto la bandeja administrativa deja
   de forzar una tabla horizontal y muestra cada incidencia como
   una tarjeta completa y legible.
   ========================================================= */
@media (max-width:1360px){
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite table,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite table{
    table-layout:auto!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite thead{
    display:none!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tbody{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px 14px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:16px!important;
    border:1px solid #E5EAF0!important;
    border-left:4px solid #F59E0B!important;
    border-radius:18px!important;
    background:#FFFFFF!important;
    box-shadow:0 8px 22px rgba(16,24,40,.045)!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row.ticket-priority-alta{border-left-color:#EF4444!important}
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row.ticket-priority-media{border-left-color:#F59E0B!important}
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row.ticket-priority-baja{border-left-color:#22C55E!important}
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row > td{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:5px!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    white-space:normal!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row > td::before{
    content:attr(data-label)!important;
    display:block!important;
    margin-bottom:1px!important;
    color:#7B8798!important;
    font-size:8px!important;
    font-weight:800!important;
    letter-spacing:.11em!important;
    text-transform:uppercase!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-col-code,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-col-subject,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-col-actions{
    grid-column:1/-1!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .fase2-ticket-code{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    font-size:14px!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .fase2-ticket-code strong{
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-main{
    width:100%!important;
    max-width:100%!important;
    font-size:12px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .ticket-cell-sub{
    width:100%!important;
    max-width:100%!important;
    margin-top:0!important;
    font-size:9.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .service-pill,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .priority-pill,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .status-pill{
    max-width:100%!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dashboard-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dashboard-actions > *{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite #dashboardNoResults{
    grid-column:1/-1!important;
    display:block!important;
    width:100%!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite #dashboardNoResults[style*="display:none"]{
    display:none!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite #dashboardNoResults td{
    display:block!important;
    width:100%!important;
    padding:0!important;
    border:0!important;
  }
}

@media (max-width:860px){
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tbody{
    grid-template-columns:1fr!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row{
    grid-template-columns:1fr!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row > td{
    grid-column:auto!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dashboard-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dashboard-actions > *{
    width:100%!important;
  }
}

/* =========================================================
   FASE 5.3.5 · IPAD PRO / TABLET LANDSCAPE BALANCE FIX
   Mejora la composición del dashboard administrativo entre
   981px y 1366px para evitar filas desbalanceadas y tarjetas
   con demasiado espacio vacío.
   ========================================================= */
@media (min-width:981px) and (max-width:1366px){
  /* KPIs superiores: 4 + 3, ocupando siempre todo el ancho */
  body.oti-bento-v5.role-admin .kpi-row.kpi-admin{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.oti-bento-v5.role-admin .kpi-row.kpi-admin .kpi-card{
    grid-column:span 3!important;
    min-width:0!important;
    min-height:118px!important;
  }
  body.oti-bento-v5.role-admin .kpi-row.kpi-admin .kpi-card:nth-child(n+5){
    grid-column:span 4!important;
  }

  /* Indicadores operativos: 3 + 2, segunda fila a 50/50 */
  body.oti-bento-v5.role-admin .fase2-command-panel{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.oti-bento-v5.role-admin .fase2-command-panel .fase2-command-card{
    grid-column:span 4!important;
    min-width:0!important;
    min-height:112px!important;
  }
  body.oti-bento-v5.role-admin .fase2-command-panel .fase2-command-card:nth-child(n+4){
    grid-column:span 6!important;
  }

  /* Analítica: Estado y Prioridad lado a lado, Tiempo abajo */
  body.oti-bento-v5.role-admin .content-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body.oti-bento-v5.role-admin .content-grid .chart-card,
  body.oti-bento-v5.role-admin .content-grid .priority-card{
    grid-column:auto!important;
    min-width:0!important;
    min-height:235px!important;
  }
  body.oti-bento-v5.role-admin .content-grid .time-card{
    grid-column:1/-1!important;
    min-width:0!important;
    min-height:190px!important;
  }

  body.oti-bento-v5.role-admin .panel-card{
    padding:17px!important;
  }
  body.oti-bento-v5.role-admin .donut{
    width:126px!important;
    height:126px!important;
  }
  body.oti-bento-v5.role-admin .donut div{
    width:82px!important;
    height:82px!important;
  }
}

/* iPad Pro portrait / tablets cercanas a 1024px:
   el sidebar pasa a off-canvas para liberar el ancho útil. */
@media (min-width:981px) and (max-width:1100px){
  body.oti-bento-v5 .oti-app{
    display:block!important;
  }
  body.oti-bento-v5 .oti-sidebar{
    position:fixed!important;
    left:12px!important;
    top:12px!important;
    bottom:12px!important;
    width:min(285px,calc(100vw - 24px))!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    z-index:1300!important;
    transform:translateX(calc(-100% - 28px))!important;
    transition:transform .24s ease!important;
    box-shadow:0 30px 75px rgba(16,24,40,.22)!important;
  }
  body.oti-bento-v5 .oti-sidebar.sidebar-open{
    transform:translateX(0)!important;
  }
  body.oti-bento-v5 .oti-main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:10px!important;
  }
  body.oti-bento-v5 .topbar-left .menu-btn{
    display:inline-flex!important;
  }
}

/* iPad Pro portrait más estrecho: 2 columnas legibles */
@media (min-width:981px) and (max-width:1040px){
  body.oti-bento-v5.role-admin .kpi-row.kpi-admin{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.oti-bento-v5.role-admin .kpi-row.kpi-admin .kpi-card,
  body.oti-bento-v5.role-admin .kpi-row.kpi-admin .kpi-card:nth-child(n+5){
    grid-column:auto!important;
  }
  body.oti-bento-v5.role-admin .kpi-row.kpi-admin .kpi-card:last-child{
    grid-column:1/-1!important;
  }

  body.oti-bento-v5.role-admin .fase2-command-panel{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.oti-bento-v5.role-admin .fase2-command-panel .fase2-command-card,
  body.oti-bento-v5.role-admin .fase2-command-panel .fase2-command-card:nth-child(n+4){
    grid-column:auto!important;
  }
  body.oti-bento-v5.role-admin .fase2-command-panel .fase2-command-card:last-child{
    grid-column:1/-1!important;
  }
}

/* =========================================================
   FASE 5.3.6 · IPAD / TABLET VERTICAL SCROLL FIX
   Evita que la bandeja en formato tarjetas capture o bloquee
   el gesto vertical en Safari/iPadOS. El desplazamiento queda
   a cargo de la página completa y las tarjetas permanecen
   totalmente accesibles.
   ========================================================= */
@media (max-width:1366px){
  html{
    height:auto!important;
    min-height:100%!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.oti-bento-v5,
  body.oti-bento-v5.oti-premium-app{
    height:auto!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
  }
  body.oti-bento-v5 .oti-app{
    height:auto!important;
    min-height:100vh!important;
    overflow:visible!important;
  }
  body.oti-bento-v5 .oti-main{
    height:auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    touch-action:pan-y!important;
  }
  body.oti-bento-v5 .recent-panel{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    touch-action:pan-y!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite table,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tbody{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tr.dashboard-ticket-row > td,
  body.oti-bento-v5:not(.role-faculty) .fase2-table-lite .dashboard-actions{
    touch-action:pan-y!important;
  }
  body.oti-bento-v5:not(.role-faculty) .fase2-table-toolbar,
  body.oti-bento-v5:not(.role-faculty) .fase2-chip,
  body.oti-bento-v5:not(.role-faculty) .dash-btn,
  body.oti-bento-v5:not(.role-faculty) .mini-link.modal-link{
    touch-action:manipulation!important;
  }
}

/* Safari/iPadOS: evita contenedores de scroll anidados en la bandeja */
@supports (-webkit-touch-callout:none){
  @media (max-width:1366px){
    body.oti-bento-v5:not(.role-faculty) .fase2-table-lite{
      overflow:visible!important;
      -webkit-overflow-scrolling:auto!important;
    }
    body.oti-bento-v5:not(.role-faculty) .fase2-table-lite tbody{
      overflow:visible!important;
    }
  }
}

/* =========================================================
   FASE 5.3.8 · SIDEBAR ADMIN COMPACTO SEGÚN ALTURA
   Evita que la tarjeta "Gestión OTI" quede cortada y obligue
   a desplazar el sidebar en laptops/tablets con poca altura.
   ========================================================= */
@media (min-width:1101px) and (max-height:980px){
  body.oti-bento-v5.role-admin .oti-sidebar{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    padding:11px!important;
  }
  body.oti-bento-v5.role-admin .brand-block.sidebar-brand-pro{
    padding:7px 9px 9px!important;
  }
  body.oti-bento-v5.role-admin .brand-block.sidebar-brand-pro img{
    width:112px!important;
    max-height:39px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-brand-copy{
    margin-top:7px!important;
    padding-top:7px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-brand-eyebrow{font-size:8px!important}
  body.oti-bento-v5.role-admin .sidebar-brand-copy h1{
    margin:3px 0 2px!important;
    font-size:12.5px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-brand-copy small{font-size:8.7px!important}

  body.oti-bento-v5.role-admin .brand-claim.sidebar-claim-pro{
    margin:7px 0 8px!important;
    min-height:52px!important;
    padding:9px 11px!important;
    border-radius:16px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-claim-pro strong{font-size:9.6px!important}
  body.oti-bento-v5.role-admin .sidebar-claim-pro p{font-size:8.7px!important}

  body.oti-bento-v5.role-admin .side-nav.side-nav-pro{
    gap:2px!important;
    margin-bottom:0!important;
    flex:0 0 auto!important;
  }
  body.oti-bento-v5.role-admin .side-nav-label{
    padding:6px 8px 3px!important;
    font-size:7.7px!important;
  }
  body.oti-bento-v5.role-admin .side-nav.side-nav-pro a{
    min-height:36px!important;
    padding:4px 7px!important;
    gap:7px!important;
    border-radius:12px!important;
    font-size:10.5px!important;
  }
  body.oti-bento-v5.role-admin .side-nav .nav-icon{
    width:26px!important;
    height:26px!important;
    flex:0 0 26px!important;
    border-radius:8px!important;
  }
  body.oti-bento-v5.role-admin .side-nav .nav-icon svg{
    width:14px!important;
    height:14px!important;
  }
  body.oti-bento-v5.role-admin .nav-count{
    min-width:19px!important;
    height:19px!important;
    font-size:8.5px!important;
  }

  body.oti-bento-v5.role-admin .sidebar-help-clean{
    margin-top:auto!important;
    padding:10px!important;
    border-radius:17px!important;
    flex:0 0 auto!important;
  }
  body.oti-bento-v5.role-admin .sidebar-card-heading{
    gap:7px!important;
    margin-bottom:3px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-card-icon{
    width:29px!important;
    height:29px!important;
    border-radius:9px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-card-heading h3,
  body.oti-bento-v5.role-admin .sidebar-help-clean h3{font-size:12.5px!important}
  body.oti-bento-v5.role-admin .sidebar-card-heading small{font-size:8px!important}
  body.oti-bento-v5.role-admin .sidebar-help-clean .mini-stat{
    min-height:25px!important;
    padding:4px 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean .mini-stat span{
    font-size:8.8px!important;
    line-height:1.15!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean .mini-stat strong{
    font-size:12px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-sla-track{
    height:4px!important;
    margin-top:5px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean button{
    min-height:31px!important;
    margin-top:7px!important;
    font-size:9px!important;
    border-radius:10px!important;
    padding:6px 9px!important;
  }
}

/* Alturas especialmente reducidas: se compacta aún más sin perder datos. */
@media (min-width:1101px) and (max-height:790px){
  body.oti-bento-v5.role-admin .brand-block.sidebar-brand-pro img{
    width:100px!important;
    max-height:32px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-brand-copy small{display:none!important}
  body.oti-bento-v5.role-admin .brand-claim.sidebar-claim-pro{
    min-height:43px!important;
    margin:5px 0 6px!important;
    padding:7px 9px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-claim-pro p{display:none!important}
  body.oti-bento-v5.role-admin .side-nav-label{padding:4px 8px 2px!important}
  body.oti-bento-v5.role-admin .side-nav.side-nav-pro a{
    min-height:32px!important;
    padding:3px 6px!important;
  }
  body.oti-bento-v5.role-admin .side-nav .nav-icon{
    width:24px!important;height:24px!important;flex-basis:24px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean{
    padding:8px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean .mini-stat{
    min-height:21px!important;
    padding:2px 0!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean button{
    min-height:28px!important;
    margin-top:5px!important;
  }
}

/* Sidebar off-canvas en tablet: scroll del panel completo sigue disponible,
   pero la tarjeta queda compacta y visible con mucha menos navegación. */
@media (max-width:1100px) and (max-height:980px){
  body.oti-bento-v5.role-admin .oti-sidebar{
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean{
    padding:11px!important;
    margin-top:10px!important;
  }
  body.oti-bento-v5.role-admin .sidebar-help-clean .mini-stat{
    padding:5px 0!important;
  }
}

/* FASE 5.3.1 · Notificaciones nuevas / historial */
body.oti-bento-v5 .oti-notification-item.is-read{
  opacity:.78!important;
  background:rgba(255,255,255,.38)!important;
}
body.oti-bento-v5 .oti-notification-panel-foot{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  justify-content:center!important;
  padding:10px 4px 2px!important;
  border-top:1px solid rgba(139,170,201,.18)!important;
  margin-top:8px!important;
}
body.oti-bento-v5 .oti-notification-panel-foot button{
  min-height:34px!important;
  padding:0 14px!important;
  border:1px solid rgba(135,169,205,.26)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.48)!important;
  color:#245581!important;
  font-size:9.5px!important;
  font-weight:800!important;
  cursor:pointer!important;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}
body.oti-bento-v5 .oti-notification-panel-foot button:hover{
  background:rgba(255,255,255,.88)!important;
  color:#003B88!important;
  transform:translateY(-1px)!important;
}
body.oti-bento-v5 .oti-notification-panel-foot button[hidden]{display:none!important;}
body.oti-bento-v5 #otiNotificationMarkAll[hidden]{display:none!important;}


/* FASE 5.3.2 · CONTRASTE ACCIONES HISTORIAL ADMIN */
body.oti-bento-v5 .history-row-actions .history-detail-btn,
body.oti-bento-v5 .history-row-actions .history-detail-btn:link,
body.oti-bento-v5 .history-row-actions .history-detail-btn:visited{
  background:linear-gradient(135deg,#087FB2 0%,#005CA8 100%)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  border:1px solid rgba(0,74,137,.28)!important;
  box-shadow:0 7px 16px rgba(0,92,168,.16)!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
}
body.oti-bento-v5 .history-row-actions .history-detail-btn:hover,
body.oti-bento-v5 .history-row-actions .history-detail-btn:focus-visible{
  background:linear-gradient(135deg,#0795C4 0%,#074D91 100%)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  filter:none!important;
}