/* v180.6.14 - REAL Cross-Role Mobile Dashboard Unification
   Alcance: dashboards Alumno, Docente, Preceptor, Secretaria, EMTP, Laboratorio, Bibliotecaria, EOE,
   Director, Admin y Superadmin. Solo capa visual CSS: no modifica queries, tenancy, branding ni logica.
   Objetivo principal: que los numeros KPI nunca se partan un digito por renglon y que los paneles mobile
   mantengan densidad SaaS enterprise consistente. */

:root{
  --saas-role-radius:16px;
  --saas-role-gap:10px;
  --saas-role-card-pad:12px;
}

/* Proteccion global contra wrapping agresivo heredado por Bootstrap/Tailwind/legacy. */
.sec-kpi,.pre-kpi,.smart-kpi,.sa-card,.biblio-card,.biblio-stat,.eoe-kpi-grid .card,.eoe-mobile-kpi-grid .card,
.emtp-shell .stat,.laboratorio-shell .card,.laboratorio-shell .box,.lab-mobile-kpi-grid .card,.lab-mobile-kpi-grid .box,
.dir-kpis-3 .card,.dir-kpis-4 .card,.dir-kpis-5 .card,.dir-kpis-6 .card,
.dashboard-kpis > *,.dashboard-stats > *,.stats-grid > *,.metrics-grid > *,.kpi-grid > *,.summary-grid > *,
.ui-grid-4 > .ui-card,.admin-panel .card,.card[class*="kpi"],.card[class*="stat"]{
  min-width:0!important;
  overflow:hidden;
}

/* Valor KPI: una sola linea, sin partir digitos. */
.sec-kpi .kpi-value,
.pre-kpi .value,
.smart-kpi .num,
.sa-card strong,
.biblio-card h3,
.biblio-stat .value,
.eoe-kpi-grid strong,
.eoe-mobile-kpi-grid strong,
.emtp-shell .stat .value,
.laboratorio-shell .value,
.lab-mobile-kpi-grid h3,
.lab-mobile-kpi-grid .value,
.dir-kpis-3 .card > div[style*="font-size"],
.dir-kpis-4 .card > div[style*="font-size"],
.dir-kpis-5 .card > div[style*="font-size"],
.dir-kpis-6 .card > div[style*="font-size"],
.stat .value,.stat-value,.kpi-value,.metric-value,.info-box-number,.small-box h3,
.dashboard-stat h1,.dashboard-stat h2,.dashboard-stat h3,
.stat-card h1,.stat-card h2,.stat-card h3,
.kpi-card h1,.kpi-card h2,.kpi-card h3,
.metric-card h1,.metric-card h2,.metric-card h3,
.resumen-card strong,.summary-card strong,.indicador-card strong,.ui-card strong{
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  line-break:auto!important;
  writing-mode:horizontal-tb!important;
  display:block!important;
  max-width:100%!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}

/* Etiquetas KPI compactas y legibles. */
.sec-kpi .kpi-label,.sec-kpi .kpi-desc,
.pre-kpi .label,.pre-kpi .hint,
.smart-kpi .lbl,.smart-kpi .hint,
.sa-card span,
.biblio-card p,.biblio-card .biblio-badge,.biblio-stat .label,
.eoe-kpi-grid span,.eoe-mobile-kpi-grid span,
.emtp-shell .stat .label,
.lab-mobile-kpi-grid .badge,.lab-mobile-kpi-grid .muted,.lab-mobile-kpi-grid .label,
.dir-kpis-3 .muted.small,.dir-kpis-4 .muted.small,.dir-kpis-5 .muted.small,.dir-kpis-6 .muted.small,
.info-box-text,.stat-label,.kpi-label,.metric-label,.summary-card small,.resumen-card small{
  overflow-wrap:break-word!important;
  word-break:normal!important;
  line-height:1.18!important;
}

/* Logout de respaldo para vistas que no usan header global. */
a[href$="/logout"],a[href*="/logout"],.btn-logout-mobile-real,.campus-logout,.logout,.logout-btn,.btn-logout{
  text-decoration:none!important;
}

@media (max-width: 900px){
  .sec-kpi-grid,.role-mobile-kpi-grid,.pre-grid,.smart-kpis,.biblio-grid4,.eoe-kpi-grid,.eoe-mobile-kpi-grid,
  .dir-kpis-3,.dir-kpis-4,.dir-kpis-5,.dir-kpis-6,.grid4,.lab-mobile-kpi-grid,
  .dashboard-kpis,.dashboard-stats,.stats-grid,.metrics-grid,.kpi-grid,.summary-grid,.quick-stats,.ui-grid-4{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--saas-role-gap)!important;
    align-items:stretch!important;
  }

  .sec-hero-actions,.sec-top-links,.dir-actions,.pre-actions,.biblio-actions,.emtp-actions,.actions{
    gap:8px!important;
  }
}

@media (max-width: 760px){
  body{overflow-x:hidden;}

  .sec-v173,.emtp-shell,.pre-shell,.biblio-shell,.admin-panel,.doc-shell,.panel,.wrap{
    gap:12px!important;
  }

  .card,.panel,.box,.mod,.list-card,.biblio-card,.biblio-stat,.pre-kpi,.pre-section,.module-card,.course-card,
  .sec-kpi,.sec-v173-hero,.emtp-hero,.smart-kpi,.sa-card,.eoe-kpi-grid .card,.eoe-mobile-kpi-grid .card{
    border-radius:var(--saas-role-radius)!important;
  }

  .sec-kpi,.pre-kpi,.smart-kpi,.sa-card,.biblio-card,.biblio-stat,
  .eoe-kpi-grid .card,.eoe-mobile-kpi-grid .card,.emtp-shell .stat,
  .lab-mobile-kpi-grid .card,.lab-mobile-kpi-grid .box,
  .dir-kpis-3 .card,.dir-kpis-4 .card,.dir-kpis-5 .card,.dir-kpis-6 .card,
  .stat-card,.kpi-card,.metric-card,.dashboard-stat,.small-box,.info-box,.resumen-card,.summary-card,.indicador-card,.ui-card{
    padding:var(--saas-role-card-pad)!important;
    min-height:0!important;
  }

  .sec-kpi .kpi-value,
  .pre-kpi .value,
  .smart-kpi .num,
  .sa-card strong,
  .biblio-card h3,
  .biblio-stat .value,
  .eoe-kpi-grid strong,
  .eoe-mobile-kpi-grid strong,
  .emtp-shell .stat .value,
  .laboratorio-shell .value,
  .lab-mobile-kpi-grid h3,
  .lab-mobile-kpi-grid .value,
  .dir-kpis-3 .card > div[style*="font-size"],
  .dir-kpis-4 .card > div[style*="font-size"],
  .dir-kpis-5 .card > div[style*="font-size"],
  .dir-kpis-6 .card > div[style*="font-size"],
  .stat .value,.stat-value,.kpi-value,.metric-value,.info-box-number,.small-box h3,
  .dashboard-stat h1,.dashboard-stat h2,.dashboard-stat h3,
  .stat-card h1,.stat-card h2,.stat-card h3,
  .kpi-card h1,.kpi-card h2,.kpi-card h3,
  .metric-card h1,.metric-card h2,.metric-card h3,
  .resumen-card strong,.summary-card strong,.indicador-card strong,.ui-card strong{
    font-size:clamp(20px,8vw,30px)!important;
    margin-top:4px!important;
    margin-bottom:4px!important;
    text-align:left!important;
  }

  .sec-kpi .kpi-label,.pre-kpi .label,.smart-kpi .lbl,.sa-card span,.biblio-stat .label,
  .eoe-kpi-grid span,.eoe-mobile-kpi-grid span,.emtp-shell .stat .label,.lab-mobile-kpi-grid .badge,.lab-mobile-kpi-grid .label,
  .dir-kpis-3 .muted.small,.dir-kpis-4 .muted.small,.dir-kpis-5 .muted.small,.dir-kpis-6 .muted.small,
  .info-box-text,.stat-label,.kpi-label,.metric-label{
    font-size:10.5px!important;
    letter-spacing:.025em!important;
    text-transform:uppercase;
  }

  .sec-kpi .kpi-desc,.pre-kpi .hint,.smart-kpi .hint,.biblio-card p,.lab-mobile-kpi-grid .muted{
    font-size:11.5px!important;
    line-height:1.22!important;
    margin-top:4px!important;
  }

  .sec-kpi .kpi-open{display:none!important;}

  .sec-v173-hero,.emtp-hero,.pre-hero,.biblio-hero,.panel{
    padding:16px!important;
  }

  .sec-v173-hero h1,.emtp-hero h2,.pre-hero h1,.biblio-hero h2,h1{
    font-size:clamp(24px,8vw,30px)!important;
    line-height:1.05!important;
  }

  .sec-top-links,.sec-hero-actions,.dir-actions,.pre-actions,.biblio-actions,.emtp-actions,.actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .sec-top-links a,.sec-hero-actions a,.dir-actions a,.pre-actions a,.biblio-actions a,.emtp-actions a,.actions a,.actions .btn,
  .btn,.btn-secondary,.mode-btn{
    min-width:0!important;
    width:100%;
    min-height:40px!important;
    padding:9px 10px!important;
    font-size:12.5px!important;
    line-height:1.1!important;
    text-align:center!important;
    justify-content:center!important;
  }

  a[href$="/logout"],a[href*="/logout"],.btn-logout-mobile-real,.campus-logout,.logout,.logout-btn,.btn-logout{
    background:linear-gradient(180deg,#ef4444,#b91c1c)!important;
    color:#fff!important;
    border:1px solid rgba(254,202,202,.72)!important;
    box-shadow:0 10px 22px rgba(185,28,28,.35)!important;
    font-weight:950!important;
    text-shadow:0 1px 0 rgba(0,0,0,.18)!important;
  }

  .mobile-table-scroll,.table-responsive,.biblio-table-wrap,.card[style*="overflow:auto"]{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  table{max-width:100%;}
}

@media (max-width: 420px){
  .sec-kpi-grid,.role-mobile-kpi-grid,.pre-grid,.smart-kpis,.biblio-grid4,.eoe-kpi-grid,.eoe-mobile-kpi-grid,
  .dir-kpis-3,.dir-kpis-4,.dir-kpis-5,.dir-kpis-6,.grid4,.lab-mobile-kpi-grid,
  .dashboard-kpis,.dashboard-stats,.stats-grid,.metrics-grid,.kpi-grid,.summary-grid,.quick-stats,.ui-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .sec-kpi,.pre-kpi,.smart-kpi,.sa-card,.biblio-card,.biblio-stat,.eoe-kpi-grid .card,.eoe-mobile-kpi-grid .card,
  .emtp-shell .stat,.lab-mobile-kpi-grid .card,.lab-mobile-kpi-grid .box,
  .dir-kpis-3 .card,.dir-kpis-4 .card,.dir-kpis-5 .card,.dir-kpis-6 .card{
    padding:10px!important;
  }

  .sec-kpi .kpi-value,.pre-kpi .value,.smart-kpi .num,.sa-card strong,.biblio-card h3,.biblio-stat .value,
  .eoe-kpi-grid strong,.eoe-mobile-kpi-grid strong,.emtp-shell .stat .value,.lab-mobile-kpi-grid h3,.lab-mobile-kpi-grid .value,
  .dir-kpis-3 .card > div[style*="font-size"],.dir-kpis-4 .card > div[style*="font-size"],
  .dir-kpis-5 .card > div[style*="font-size"],.dir-kpis-6 .card > div[style*="font-size"],.kpi-value,.stat-value,.metric-value{
    font-size:clamp(18px,7.2vw,26px)!important;
    letter-spacing:-.04em!important;
  }

  .sec-top-links,.sec-hero-actions,.dir-actions,.pre-actions,.biblio-actions,.emtp-actions,.actions{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   v180.6.15 - EMTP readability hotfix
   Mejora contraste de textos secundarios en tarjetas inferiores
   como prestamos, incidentes, titulos y certificados en mobile.
   ========================================================= */
.emtp-shell .card,
.emtp-shell .panel,
.emtp-shell .box,
.emtp-shell [class*="card"],
.emtp-shell [class*="panel"]{
  color:#eaf2ff!important;
}
.emtp-shell .card p,
.emtp-shell .card li,
.emtp-shell .card small,
.emtp-shell .card span,
.emtp-shell .panel p,
.emtp-shell .panel li,
.emtp-shell .panel small,
.emtp-shell .panel span,
.emtp-shell .muted,
.emtp-shell [class*="muted"],
.emtp-shell [class*="recent"] li,
.emtp-shell [class*="recent"] span{
  color:rgba(226,238,255,.82)!important;
  opacity:1!important;
  text-shadow:none!important;
}
.emtp-shell .card strong,
.emtp-shell .card b,
.emtp-shell .panel strong,
.emtp-shell .panel b,
.emtp-shell h2,
.emtp-shell h3,
.emtp-shell h4{
  color:#ffffff!important;
  opacity:1!important;
}
.emtp-shell .card a,
.emtp-shell .panel a{
  color:#93c5fd!important;
  opacity:1!important;
}
@media (max-width: 760px){
  .emtp-shell .card p,
  .emtp-shell .card li,
  .emtp-shell .card small,
  .emtp-shell .panel p,
  .emtp-shell .panel li,
  .emtp-shell .panel small{
    font-size:12px!important;
    line-height:1.35!important;
  }
}