:root{
  --amarillo:#F2B705;
  --negro:#1A1A1A;
  --gris-carbon:#4D4D4D;
  --gris-claro:#F5F5F5;
  --blanco:#FFFFFF;
  --rojo:#C0392B;
  --verde:#2E7D32;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Segoe UI', Arial, sans-serif; background:var(--gris-claro); color:var(--negro);}
a{text-decoration:none; color:inherit;}

/* ---- Login ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--negro); padding:20px;}
.login-card{background:var(--blanco); width:100%; max-width:380px; border-radius:14px; padding:40px 34px; box-shadow:0 20px 60px rgba(0,0,0,.4); border-top:5px solid var(--amarillo);}
.login-card .logo{display:flex; flex-direction:column; align-items:center; margin-bottom:22px;}
.login-card .logo img{width:80px; height:80px; border-radius:50%; margin-bottom:10px;}
.login-card .logo span{font-weight:800; font-size:14px; letter-spacing:.5px; text-align:center; line-height:1.3;}
.login-card h1{text-align:center; font-size:18px; color:var(--gris-carbon); font-weight:600; margin-bottom:22px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
.field input, .field select{width:100%; padding:12px 14px; border:1.5px solid #ddd; border-radius:7px; font-size:14px; font-family:inherit;}
.field input:focus, .field select:focus{outline:none; border-color:var(--amarillo);}
.btn{display:inline-block; background:var(--amarillo); color:var(--negro); border:none; padding:12px 22px; border-radius:7px; font-weight:800; font-size:14px; cursor:pointer;}
.btn:hover{filter:brightness(.95);}
.btn-full{width:100%;}
.btn-secundario{background:var(--negro); color:var(--amarillo);}
.btn-peligro{background:var(--rojo); color:var(--blanco);}
.alert{padding:11px 14px; border-radius:7px; font-size:13.5px; margin-bottom:16px;}
.alert-error{background:#FDECEA; color:var(--rojo); border:1px solid #f5c6cb;}
.alert-ok{background:#E8F5E9; color:var(--verde); border:1px solid #c3e6cb;}
.footer-note{text-align:center; margin-top:22px; font-size:11.5px; color:#888;}

/* ---- Panel interno ---- */
.topbar{background:var(--negro); color:var(--blanco); display:flex; align-items:center; justify-content:space-between; padding:12px 26px;}
.topbar .brand{display:flex; align-items:center; gap:10px;}
.topbar .brand img{height:36px; width:36px; border-radius:50%;}
.topbar .brand span{font-weight:800; font-size:14px;}
.topbar .user-box{display:flex; align-items:center; gap:14px; font-size:13.5px;}
.topbar .user-box .rol-badge{background:var(--amarillo); color:var(--negro); padding:3px 10px; border-radius:20px; font-weight:700; font-size:11.5px;}
.topbar .user-box a{color:#ddd; font-size:13px;}
.topbar .user-box a:hover{color:var(--amarillo);}

.wrap{max-width:1080px; margin:0 auto; padding:34px 24px;}
.page-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.page-header h1{font-size:24px;}
.page-header p{color:var(--gris-carbon); font-size:14px; margin-top:4px;}

.stat-cards{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:30px;}
.stat-card{background:var(--blanco); flex:1; min-width:160px; padding:22px; border-radius:12px; box-shadow:0 3px 12px rgba(0,0,0,.06); border-top:4px solid var(--amarillo);}
.stat-card .num{font-size:30px; font-weight:800;}
.stat-card .label{font-size:13px; color:var(--gris-carbon); margin-top:4px;}

.panel{background:var(--blanco); border-radius:12px; box-shadow:0 3px 12px rgba(0,0,0,.06); padding:26px; margin-bottom:24px;}
.panel h2{font-size:17px; margin-bottom:16px;}

table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; background:var(--negro); color:var(--blanco); padding:11px 14px; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px;}
td{padding:11px 14px; border-bottom:1px solid #eee;}
tr:hover td{background:#fafafa;}
.badge{padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700;}
.badge-activo{background:#E8F5E9; color:var(--verde);}
.badge-inactivo{background:#FDECEA; color:var(--rojo);}
.badge-rol{background:var(--gris-claro); color:var(--negro); border:1px solid #ddd;}
.acciones{display:flex; gap:8px; flex-wrap:wrap;}
.acciones a, .acciones button{font-size:12.5px; padding:6px 12px; border-radius:6px; border:none; cursor:pointer; font-weight:700;}
.acciones .a-editar{background:var(--negro); color:var(--amarillo);}
.acciones .a-estado{background:#eee; color:var(--negro);}
.acciones .a-eliminar{background:var(--rojo); color:var(--blanco);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:640px){ .form-grid{grid-template-columns:1fr;} .wrap{padding:24px 16px;} }