:root{ --primary:#002858; --text:#0F172A; --muted:#475569; --border:#E2E8F0; --bg:#FFFFFF; --bg2:#F1F5F9; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1120px;margin:0 auto;padding:0 16px}

.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-badge{width:80px;height:40px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.user-tag{margin-right:8px;color:var(--muted);font-size:.95rem}

.main{padding:24px 0}
.footer{border-top:1px solid var(--border);padding:16px 0;color:var(--muted);font-size:.9rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:#fff;padding:.6rem .9rem;border-radius:12px;font-weight:600;text-decoration:none;transition:all .25s ease}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ✅ Botón MENÚ (Header) en verde */
.btn-menu{
  background:#008B8B;
  border-color:#008B8B;
  color:#fff;
}
.btn-menu i{ color:#fff; }
.btn-menu:hover{
  background:#fff;
  color:#008B8B;
  border-color:#008B8B;
  transform:translateY(-2px);
}
.btn-menu:hover i{
  color:#008B8B;
}

/* ✅ Botón SALIR (Header) en rojo */
.btn-salir{
  background:#dc3545;
  border-color:#dc3545;
  color:#fff;
}
.btn-salir i{ color:#fff; }
.btn-salir:hover{
  background:#fff;
  color:#dc3545;
  border-color:#dc3545;
  transform:translateY(-2px);
}
.btn-salir:hover i{
  color:#dc3545;
}

/* ✅ Botón Word */
.btn-word{
  background:#185ABD;
  border-color:#185ABD;
  color:#fff;
}
.btn-word i{ color:#fff; }
.btn-word:hover{
  background:#fff;
  color:#185ABD;
  border-color:#185ABD;
  transform:translateY(-2px);
}
.btn-word:hover i{
  color:#185ABD;
}

/* ✅ Botón Excel */
.btn-excel{
  background:#107C41;
  border-color:#107C41;
  color:#fff;
}
.btn-excel i{ color:#fff; }
.btn-excel:hover{
  background:#fff;
  color:#107C41;
  border-color:#107C41;
  transform:translateY(-2px);
}
.btn-excel:hover i{
  color:#107C41;
}


/* ✅ Botón cvs */
.btn-cvs{
  background:#42AEDF;
  border-color:#42AEDF;
  color:#fff;
}
.btn-cvs i{ color:#fff; }
.btn-cvs:hover{
  background:#fff;
  color:#42AEDF;
  border-color:#42AEDF;
  transform:translateY(-2px);
}
.btn-cvs:hover i{
  color:#42AEDF;
}

.cursodi{cursor: pointer;}





.input{width:100%;padding:.85rem 1rem;border:1px solid var(--border);border-radius:12px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.grid{display:grid;gap:1rem}

.alert{padding:.8rem 1rem;border-radius:12px;margin:.5rem 0}
.alert.error{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}
.alert.success{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}

/* LOGIN 60/40 */
.login-wrap{min-height:calc(100vh - 64px - 64px)}
.login-grid{display:grid;grid-template-columns:3fr 2fr;border:1px solid var(--border);border-radius:18px;overflow:hidden}
.login-left{background:url('login.jpg') center/cover no-repeat;min-height:360px}
.login-right{background:#fff;padding:28px;display:flex;align-items:center}
.login-form{width:100%;max-width:380px;margin:0 auto}
.login-title{font-size:1.35rem;margin:0 0 .25rem}
.login-sub{color:var(--muted);margin:0 0 1rem}
.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--muted)}
.form-row{margin-bottom:12px;position:relative}

/*Footer nuevo enlace*/
.footer-link {
  color: var(--primary);   /* azul institucional */
  font-weight: 400;
  text-decoration: none;   /* ✅ SIN SUBRAYADO */
  transition: color .25s ease;
}

.footer-link:hover {
  color: #000;             /* o var(--text) si prefieres */
}

/* Botón hamburguesa */
.nav-toggle{
  display:none;                       /* oculto en escritorio */
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  width:42px; height:42px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle i{ font-size:1.1rem; }

/* Contenedor de enlaces del header */
.nav-links{
  display:flex;
  align-items:center;
  gap:.5rem;
}


.firmas{width:100%; margin-top:18px;}
.firmas td{width:50%; text-align:center; padding:0 18px; vertical-align:top;}
.firmas .line{border-top:0px solid #ffffff; height:0; margin:22px auto 6px; width:60%}
.firmas .label{font-weight:bold}


@media (max-width: 900px){
  .login-grid{grid-template-columns:1fr}
  .login-left{min-height:40vh}




  .nav-toggle{ display:inline-flex; }       /* mostrar hamburguesa */
  .brand{
    display:flex; align-items:center; gap:.75rem;
  }
  .brand-name{
    font-size:1rem;
  }
  .header .wrap{
    gap:.75rem;                 /* un poco de espacio entre marca y nav */
  }

.nav-links{
    position:absolute;
    left:0; right:0;
    top:64px;                   /* justo debajo del header */
    background:#fff;
    border-bottom:1px solid var(--border);
    display:none;               /* colapsado por defecto */
    flex-direction:column;
    align-items:flex-start;
    padding:10px 16px 14px;
    z-index:999;
  }
   .nav-links.is-open{ display:flex; }       /* se despliega */
  .nav-links .user-tag{
    margin:6px 0 8px;
  }
  .nav-links .btn{
    width:100%;
    justify-content:flex-start;
  }




}

/* MENÚ PRINCIPAL */
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:700px){.menu-grid{grid-template-columns:1fr}}

/* Botón de menú mejorado */
.tile{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1.2rem;
  border-radius:16px;
  font-weight:600;
  text-decoration:none;           /* sin subrayado */
  background:var(--primary);      /* azul */
  color:#fff;
  border:2px solid var(--primary);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  transition:all .25s ease;
  cursor:pointer;
}
.tile i{
  font-size:1.25rem;
  color:#fff;
}
.tile:hover{
  background:#fff;
  color:var(--primary);
  transform:translateY(-3px);
}
.tile:hover i{
  color:var(--primary);
}
.tile:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}