/* ============================================================
   EduSmart360 · V1.3.4.2 · Pulido enterprise
   Micro-interacciones y acabados sobre true-ui.css (se carga al
   final; misma especificidad, cascada posterior). Paleta: tokens.
   ============================================================ */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--color-primary-light);color:var(--color-primary-dark);}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:#C9D2DB;border-radius:8px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:#AEB9C4;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-track{background:transparent;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:6px;}

/* Topbar con hairline y desenfoque sutil */
.topbar{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);}

/* Tarjetas: elevación en capas + hover contenido */
.card{border:1px solid var(--color-border);box-shadow:0 1px 2px rgba(18,63,92,.04),0 8px 24px -12px rgba(18,63,92,.10);}
.card:hover{border-color:#CDDCE8;}
.sc{border:1px solid var(--color-border);}
.sc:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(18,63,92,.05),0 18px 34px -14px rgba(18,63,92,.18);}

/* Botones: profundidad y estados */
.btn{transition:background .14s ease,box-shadow .14s ease,transform .14s ease,border-color .14s ease;}
.btn:active{transform:translateY(1px);}
.btn-p,.btn-v,.btn-g{background:linear-gradient(180deg,#2379B4,var(--color-primary));box-shadow:0 2px 6px rgba(30,111,168,.30),inset 0 1px 0 rgba(255,255,255,.16);}
.btn-p:hover,.btn-v:hover,.btn-g:hover{background:linear-gradient(180deg,var(--color-primary),var(--color-primary-dark));}
.btn-o{box-shadow:0 1px 2px rgba(18,63,92,.05);}
.btn-o:hover{background:var(--color-primary-light);border-color:#9CCBEA;}

/* Tablas: encabezado tipográfico y hover de fila */
.tbl th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;padding:10px 12px;}
.tbl td{padding:11px 12px;}
.tbl tbody tr{transition:background .12s ease;}
.tbl tbody tr:hover td{background:#F6FAFD;}

/* Formularios: anillo de enfoque de producto */
.fi{transition:border-color .14s ease,box-shadow .14s ease;}
.fi:hover{border-color:#AFC4D6;}
.fi:focus{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(30,111,168,.13);}

/* Modales y toasts */
.modal{background:rgba(18,63,92,.40);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.toast{border-radius:11px;font-weight:700;box-shadow:0 10px 30px rgba(18,63,92,.30);}

/* Menú lateral: indicador de módulo activo */
.mi{position:relative;}
.mi.on::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#FF8A00;}

/* Accesibilidad de movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
  .sc:hover{transform:none;}
}

/* Marca del acceso */
.brand-mark svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}