/*
 * SW Académico · Sistema tipográfico UX 2027
 * Fuente principal: Roboto Flex (Google Fonts)
 * Diseño compacto, legible y adaptable a escritorio, tablet y móvil.
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300..700&display=swap');

:root{
  --ux-font:'Roboto Flex','Roboto','Inter','Segoe UI Variable','Segoe UI',Arial,sans-serif;
  --ux-heading:#172033;
  --ux-text:#344054;
  --ux-muted:#667085;
  --ux-subtle:#98a2b3;
  --ux-line-height:1.48;
}

html{
  font-family:var(--ux-font);
  font-size:15px;
  font-optical-sizing:auto;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body,
button,
input,
select,
textarea,
table,
.btn,
.badge{
  font-family:var(--ux-font)!important;
  font-optical-sizing:auto;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  color:var(--ux-text);
  font-size:.94rem;
  font-weight:400;
  line-height:var(--ux-line-height);
  letter-spacing:-.006em;
}

h1,h2,h3,h4,h5,h6,
.topbar h1,
.card-title,
.module-hero h2,
.dashboard-welcome h2{
  margin-top:0;
  color:var(--ux-heading);
  font-family:var(--ux-font)!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
}

h1,.topbar h1{
  font-size:clamp(1.45rem,2vw,1.8rem)!important;
  line-height:1.18!important;
}
h2{
  font-size:clamp(1.22rem,1.65vw,1.5rem)!important;
  line-height:1.24!important;
}
h3{
  font-size:clamp(1.02rem,1.25vw,1.18rem)!important;
  line-height:1.3!important;
}
h4{font-size:.98rem!important;line-height:1.35!important}

p{line-height:1.58;margin-top:.42em;margin-bottom:.65em}
small,.muted{line-height:1.45;color:var(--ux-muted)}
strong,b{font-weight:600}

/* Encabezado */
.topbar{
  min-height:74px!important;
  height:auto!important;
  padding-top:11px!important;
  padding-bottom:11px!important;
}
.topbar h1{margin:0!important}
.topbar p{
  margin:3px 0 0!important;
  font-size:.76rem!important;
  font-weight:400!important;
  line-height:1.3!important;
}
.topbar-user-info strong,
.user-dropdown-profile strong{
  font-size:.88rem!important;
  font-weight:550!important;
  letter-spacing:-.014em!important;
}
.topbar-user-info small,
.user-dropdown-profile small{
  font-size:.74rem!important;
  font-weight:400!important;
}

/* Marca y navegación */
.brand-text b{
  font-size:.9rem!important;
  font-weight:550!important;
  letter-spacing:-.016em!important;
}
.brand-text small{
  font-size:.74rem!important;
  font-weight:400!important;
}
.sidebar nav a{
  font-size:.84rem!important;
  font-weight:430!important;
  letter-spacing:-.008em!important;
  line-height:1.35!important;
}
.sidebar nav a.is-active{font-weight:550!important}
.nav-group-label{
  font-size:.63rem!important;
  font-weight:600!important;
  letter-spacing:.095em!important;
}

/* Tarjetas y módulos */
.card,
.module-hero,
.metric-card,
.quick-action-grid a,
.admin-center-card{
  letter-spacing:-.006em;
}
.card-heading h3,
.editor-heading h3,
.academic-section-header h3{font-weight:600!important}
.card-heading p,
.editor-heading p,
.module-hero p,
.dashboard-welcome p{
  font-size:.84rem!important;
  line-height:1.52!important;
}
.eyebrow{
  font-size:.64rem!important;
  font-weight:600!important;
  letter-spacing:.1em!important;
}
.stat strong,.metric-card strong{
  font-weight:600!important;
  letter-spacing:-.03em!important;
}
.stat span,.metric-card span{
  font-size:.8rem!important;
  font-weight:400!important;
}

/* Formularios */
label,
label span,
.form-grid label{
  color:#344054;
  font-size:.76rem!important;
  font-weight:520!important;
  letter-spacing:-.005em!important;
}
input,
select,
textarea,
.search{
  min-height:42px!important;
  border-radius:10px!important;
  color:#1d2939!important;
  font-size:.88rem!important;
  font-weight:400!important;
  line-height:1.4!important;
}
input::placeholder,
textarea::placeholder{
  color:#98a2b3!important;
  font-weight:400!important;
}
select{font-weight:430!important}

/* Botones */
.btn,
button.btn,
.action-menu-button{
  min-height:39px!important;
  border-radius:10px!important;
  font-size:.82rem!important;
  font-weight:550!important;
  letter-spacing:-.005em!important;
}
.badge,.status-pill,.audit-action-pill,.session-status{
  font-size:.69rem!important;
  font-weight:550!important;
  letter-spacing:0!important;
}

/* Tablas */
th{
  font-size:.67rem!important;
  font-weight:600!important;
  letter-spacing:.03em!important;
  line-height:1.3!important;
}
td{
  font-size:.82rem!important;
  line-height:1.48!important;
}
.table-wrap table td strong,
.person-cell strong,
.recent-student b{font-weight:550!important}

/* Tarjetas de acceso */
.quick-action-grid a b,
.operations-grid a b,
.dashboard-module-grid a b{
  font-size:.81rem!important;
  font-weight:550!important;
}
.quick-action-grid a small,
.operations-grid a small,
.dashboard-module-grid a small{
  font-size:.7rem!important;
  font-weight:400!important;
  line-height:1.42!important;
}
.user-dropdown-actions a{
  font-size:.82rem!important;
  font-weight:430!important;
}
.alert{
  font-size:.82rem!important;
  line-height:1.48!important;
}

@media(max-width:1024px){
  html{font-size:14.5px}
  .content{padding:18px!important}
  .topbar{min-height:70px!important}
}

@media(max-width:760px){
  html{font-size:14px}
  body{font-size:14px!important}
  .content{padding:14px!important}
  .topbar{min-height:66px!important;padding:9px 13px!important}
  h1,.topbar h1{font-size:1.3rem!important;line-height:1.2!important}
  h2{font-size:1.18rem!important}
  h3{font-size:1.04rem!important}
  .sidebar nav a{
    padding-top:11px!important;
    padding-bottom:11px!important;
    font-size:.88rem!important;
  }
  .brand-text b{font-size:.88rem!important}
  .brand-text small{font-size:.71rem!important}
  input,select,textarea,.search{
    min-height:44px!important;
    font-size:16px!important;
  }
  .btn,button.btn{
    min-height:41px!important;
    font-size:.82rem!important;
  }
  th{font-size:.65rem!important}
  td{font-size:.8rem!important}
  .card{padding:15px!important}
  .module-hero{padding:17px!important}
}

@media(max-width:420px){
  html{font-size:13.5px}
  .content{padding:11px!important}
  .card{padding:13px!important;border-radius:14px!important}
  .topbar-user-info strong{font-size:.82rem!important}
  .topbar-user-info small{font-size:.68rem!important}
}