/* =========================================================
   MSM CONTROL ENTERPRISE · PLANTILLA PROFESIONAL V7.1
   FASE 1: modernización segura sobre el HTML existente
   ========================================================= */

:root{
  --msm-navy:#123a5a;
  --msm-navy-dark:#0b2f4a;
  --msm-blue:#1976d2;
  --msm-blue-soft:#eaf3fb;
  --msm-bg:#f4f7fb;
  --msm-surface:#ffffff;
  --msm-border:#d9e3ec;
  --msm-text:#17324d;
  --msm-muted:#667d91;
  --msm-green:#14966f;
  --msm-red:#c53a3a;
  --msm-shadow:0 8px 24px rgba(29,58,88,.08);
  --msm-radius:16px;
}

html,body{
  background:var(--msm-bg)!important;
  color:var(--msm-text);
}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

/* ===== HEADER GLOBAL ===== */
header{
  background:linear-gradient(135deg,var(--msm-navy-dark),var(--msm-navy))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 4px 18px rgba(10,40,66,.16);
  position:relative;
  z-index:1000;
}

header .container.nav{
  max-width:none!important;
  min-height:82px;
  padding:12px 22px!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
}

header .brand{
  min-width:280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

header .brand h1{
  margin:0!important;
  color:#fff!important;
  font-size:23px!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-.4px;
}

header .brand small{
  color:rgba(255,255,255,.74)!important;
  font-size:10px!important;
  margin-top:5px!important;
}

/* ===== NAVEGACIÓN ===== */
.msm-topnav{
  flex:1!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0;
}

.msm-topnav a,
.msm-topnav button{
  border-radius:10px!important;
  font-weight:750!important;
  font-size:12px!important;
  text-decoration:none!important;
  transition:background .18s ease,transform .18s ease,border-color .18s ease!important;
}

.msm-nav-home,
.msm-nav-back,
.msm-nav-account{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  padding:9px 12px!important;
}

.msm-nav-home:hover,
.msm-nav-back:hover,
.msm-nav-account:hover{
  background:rgba(255,255,255,.16)!important;
  transform:translateY(-1px);
}

.msm-nav-home.is-active{
  background:var(--msm-blue)!important;
  border-color:var(--msm-blue)!important;
}

.msm-nav-logout{
  background:#fff!important;
  color:var(--msm-navy-dark)!important;
  border:1px solid #fff!important;
  padding:9px 13px!important;
}

.msm-nav-logout:hover{
  background:#eef5fb!important;
}

.msm-nav-spacer{
  flex:1!important;
}

.nav-toggle{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:10px!important;
}

/* ===== LÍNEA DE SESIÓN ===== */
.session-line{
  max-width:none!important;
  padding:7px 22px 9px!important;
  background:rgba(0,0,0,.10);
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.84)!important;
}

.session-line small{
  font-size:10px!important;
}

.session-line strong{
  color:#fff!important;
}

/* ===== ÁREA DE TRABAJO ===== */
main.container{
  max-width:1600px!important;
  margin:0 auto!important;
  padding:22px!important;
}

main.container > *:first-child{
  margin-top:0;
}

/* ===== TARJETAS / PANELES ===== */
.card,
.panel,
.panel-card,
[class*="dashboard-card"],
[class*="summary-card"]{
  border-radius:var(--msm-radius)!important;
  border-color:var(--msm-border)!important;
  box-shadow:var(--msm-shadow);
}

/* ===== ENCABEZADOS DE MÓDULO ===== */
.eyebrow,
[class*="kicker"],
[class*="section-label"]{
  letter-spacing:1.7px!important;
  font-weight:900!important;
  color:#0b6cc6!important;
}

h1,h2,h3{
  color:var(--msm-text);
}

/* ===== FORMULARIOS ===== */
input,
select,
textarea{
  border-radius:10px!important;
  border-color:#cbd9e5!important;
  transition:border-color .18s ease,box-shadow .18s ease;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#5aa5eb!important;
  box-shadow:0 0 0 3px rgba(25,118,210,.10)!important;
  outline:none!important;
}

/* ===== BOTONES ===== */
button,
.button,
.btn{
  border-radius:10px!important;
  font-weight:750!important;
}

button:hover,
.button:hover,
.btn:hover{
  transform:translateY(-1px);
}

/* ===== TABLAS ===== */
table{
  background:#fff;
}

thead th{
  font-weight:850!important;
}

tbody tr{
  transition:background .14s ease;
}

tbody tr:hover{
  background:#f7fafc;
}

/* ===== ALERTAS ===== */
.alert{
  border-radius:12px!important;
  border:1px solid var(--msm-border)!important;
  box-shadow:0 5px 16px rgba(29,58,88,.05);
}

.alert.success{
  background:#e9f7ef!important;
  color:#11643c!important;
  border-color:#c5e8d2!important;
}

.alert.error{
  background:#fff0f0!important;
  color:#992e2e!important;
  border-color:#efc7c7!important;
}

.alert.warning{
  background:#fff7e9!important;
  color:#835a00!important;
  border-color:#efd9ac!important;
}

/* ===== SCROLLBAR SUAVE ===== */
*{
  scrollbar-width:thin;
  scrollbar-color:#a9bac8 #edf2f6;
}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  header .container.nav{
    flex-wrap:wrap!important;
  }

  header .brand{
    min-width:0;
    flex:1;
  }

  .nav-toggle{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
  }

  .msm-topnav{
    width:100%;
    flex-basis:100%;
    display:none!important;
    background:rgba(0,0,0,.12);
    border-radius:12px;
    padding:8px;
    flex-wrap:wrap;
  }

  .msm-topnav.open{
    display:flex!important;
  }

  .msm-nav-spacer{
    display:none!important;
  }

  .session-line{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  main.container{
    padding:15px!important;
  }
}

@media(max-width:640px){
  header .container.nav{
    min-height:70px;
    padding:10px 12px!important;
  }

  header .brand h1{
    font-size:19px!important;
  }

  header .brand small{
    display:none;
  }

  .msm-topnav a{
    flex:1 1 calc(50% - 8px);
    text-align:center;
    justify-content:center;
  }

  main.container{
    padding:10px!important;
  }
}