/* =====================================================================
   GERPRESS · layout: login, cabecera, menú lateral y contenido
   ===================================================================== */

/* ---------- Login ---------- */
.pantalla-login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(160deg,#eef2f8,#dde6f4);}
/* Una sola columna: el formulario queda centrado en la pantalla. */
.login-caja{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--sombra-md); max-width:420px; width:100%;}
/* height + width:auto respetan la proporción real del logotipo. */
.login-logo{display:block; margin:0 auto 20px; height:96px; width:auto; max-width:100%; object-fit:contain;}
.login-form{padding:32px 28px;}
.login-form h2{font-size:18px; text-align:center;}
.login-form .sub{color:var(--gris-500); font-size:12.5px; margin-bottom:18px; text-align:center;}
.aviso-sesion{background:var(--naranja-bg); color:var(--gris-700); border-left:3px solid var(--naranja); border-radius:8px; padding:9px 11px; font-size:12.5px; line-height:1.5; margin-bottom:14px;}
.error-login{color:var(--rojo); font-size:12.5px; min-height:18px; margin:8px 0 4px;}
.leyenda-seguridad{margin-top:18px; font-size:11.5px; color:var(--gris-500); line-height:1.6; border-top:1px solid var(--gris-200); padding-top:12px;}
@media (max-width:420px){ .pantalla-login{padding:14px;} .login-form{padding:26px 20px;} .login-logo{height:78px;} }

/* ---------- Cabecera ---------- */
.app{display:none;}
.app.activo{display:block;}
.top-header{display:flex; align-items:center; gap:12px; background:#fff; border-bottom:1px solid var(--gris-200); padding:10px 16px; position:sticky; top:0; z-index:700;}
.marca{display:flex; align-items:center; gap:10px; min-width:0;}
/* height + width:auto respetan la proporción real del logotipo. */
.logo-mini{height:40px; width:auto; max-width:130px; object-fit:contain; flex-shrink:0;}
.marca-textos{line-height:1.25; min-width:0;}
.marca-textos strong{display:block; font-size:14px;}
.marca-textos span{display:block; font-size:11.5px; color:var(--gris-500);}
.espaciador{flex:1;}
.btn-menu-movil{display:none; background:none; border:1px solid var(--gris-300); border-radius:8px; padding:6px 10px; font-size:16px;}

.campana{position:relative;}
.campana-btn{background:none; border:1px solid var(--gris-200); border-radius:10px; padding:7px 10px; font-size:15px; position:relative;}
.campana-badge{position:absolute; top:-6px; right:-6px; background:var(--rojo); color:#fff; border-radius:12px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; padding:0 4px;}
.campana-panel{position:absolute; right:0; top:44px; width:330px; max-height:400px; overflow:auto; background:#fff; border:1px solid var(--gris-200); border-radius:12px; box-shadow:var(--sombra-md); padding:10px; z-index:900;}
.campana-panel h4{margin:0 0 8px; font-size:12.5px; color:var(--gris-600); text-transform:uppercase; letter-spacing:.4px;}
.notif-item{padding:8px 10px; border-radius:8px; font-size:12.5px; border-left:3px solid var(--gris-300); background:var(--gris-50); margin-bottom:6px;}
.notif-item.critica{border-left-color:var(--rojo); background:var(--rojo-bg);}
.notif-item.aviso{border-left-color:var(--naranja); background:var(--naranja-bg);}
.notif-item .fecha{color:var(--gris-400); font-size:10.5px; margin-top:3px;}
.notif-vacio{padding:22px; text-align:center; color:var(--gris-400); font-size:12.5px;}

/* Menú del usuario (esquina superior derecha): disparador + desplegable. */
.perfil{position:relative;}
.perfil-chip{display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border-radius:24px; background:var(--gris-50); border:1px solid var(--gris-200); text-align:left; cursor:pointer;}
.perfil-chip:hover{background:var(--gris-100);}
.perfil-chip[aria-expanded="true"]{background:var(--azul-bg); border-color:var(--azul-300);}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--azul-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex-shrink:0;}
.perfil-textos{line-height:1.2;}
.perfil-textos strong{display:block; font-size:12.5px;}
.perfil-textos span{display:block; font-size:11px; color:var(--gris-500);}
.perfil-caret{font-size:9px; color:var(--gris-400); margin-left:2px;}

.perfil-menu{position:absolute; right:0; top:46px; min-width:220px; background:#fff; border:1px solid var(--gris-200); border-radius:12px; box-shadow:var(--sombra-md); padding:6px; z-index:900;}
.perfil-menu-cabecera{padding:9px 10px 10px; border-bottom:1px solid var(--gris-200); margin-bottom:6px;}
.perfil-menu-cabecera strong{display:block; font-size:13px;}
.perfil-menu-cabecera span{display:block; font-size:11px; color:var(--gris-500); margin-top:2px;}
.perfil-menu .item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none; border-radius:8px; padding:9px 10px; font-size:13px; font-weight:600; color:var(--gris-700); cursor:pointer;}
.perfil-menu .item:hover{background:var(--gris-100);}
.perfil-menu .item.cerrar-sesion{color:var(--rojo);}
.perfil-menu .item .ic{width:18px; text-align:center;}

/* ---------- Cuerpo ---------- */
.cuerpo{display:grid; grid-template-columns:236px 1fr; min-height:calc(100vh - 52px);}
.sidebar{background:#fff; border-right:1px solid var(--gris-200); padding:14px 10px; display:flex; flex-direction:column; gap:2px;}
.sidebar .item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-radius:9px; padding:9px 11px; font-size:13px; color:var(--gris-700); font-weight:600;}
.sidebar .item:hover{background:var(--gris-100);}
.sidebar .item.activo{background:var(--azul-bg); color:var(--azul-600);}
.sidebar .item .ic{width:20px; text-align:center;}
.sidebar .grupo{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-400); padding:10px 11px 4px; font-weight:800;}

.contenido{padding:22px 24px 60px; max-width:1500px;}
.contenido:focus{outline:none;}

.cargando-vista{display:flex; flex-direction:column; align-items:center; gap:12px; padding:60px 20px; color:var(--gris-500);}
.spinner{width:26px; height:26px; border:3px solid var(--gris-200); border-top-color:var(--azul-500); border-radius:50%; animation:girar .8s linear infinite;}
@keyframes girar{to{transform:rotate(360deg);}}

/* ---------- Cambio de contraseña obligatorio (primer acceso) ---------- */
/* Sin menú lateral: no hay a dónde navegar hasta completar el cambio. */
.app.sin-menu .cuerpo{grid-template-columns:1fr;}
.app.sin-menu .sidebar{display:none;}
.app.sin-menu .btn-menu-movil{display:none;}
.pantalla-password{max-width:440px; margin:40px auto;}
.pantalla-password h2{font-size:18px; margin:0 0 4px;}
.pantalla-password .sub{color:var(--gris-500); font-size:12.5px; margin:0 0 16px;}
.pantalla-password .campo{margin-bottom:12px;}

@media (max-width:880px){
  .cuerpo{grid-template-columns:1fr;}
  .sidebar{position:fixed; left:-260px; top:0; height:100vh; width:236px; transition:left .2s; z-index:800; padding-top:70px; box-shadow:var(--sombra-md);}
  .sidebar.abierto{left:0;}
  .btn-menu-movil{display:inline-block;}
  .marca-textos span{display:none;}
  .perfil-textos{display:none;}
}
@media (max-width:520px){
  .contenido{padding:16px 12px 50px;}
  .marca-textos{display:none;}
}