:root{
  --azul:#2F49C9;
  --azul-logo:#5271FF;
  --tinta:#1a1d24;
  --gris:#5a5f74;
  --borde:#e7e9f0;
  --fondo:#f7f8fb;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--fondo);color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,sans-serif;}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;margin:0;}
p{margin:0;}
a{text-decoration:none;color:var(--azul);}
a:hover{color:#1f33a8;}

/* barra superior */
.barra{background:#fff;border-bottom:1px solid rgba(26,29,36,.08);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 clamp(20px,4vw,56px);height:88px;flex-wrap:wrap;}
.barra-izq{display:flex;align-items:center;gap:20px;}
.barra-logo{width:150px;height:auto;object-fit:contain;}
.barra-et{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#8d93a8;border-left:1px solid #e0e3ec;padding-left:20px;}
.barra-der{display:flex;align-items:center;gap:22px;}
.avatar{width:34px;height:34px;border-radius:50%;background:#eef0fb;color:var(--azul);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.usuario-barra{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;}
.salir{font-size:14px;font-weight:600;}

/* contenedores */
.pagina{max-width:1180px;margin:0 auto;padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px);}
.centrado{min-height:calc(100vh - 88px);display:flex;align-items:center;justify-content:center;
  padding:40px 20px;}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:8px;}
.tarjeta-form{width:100%;max-width:430px;padding:clamp(28px,5vw,44px);
  box-shadow:0 18px 50px rgba(16,24,48,.10);display:flex;flex-direction:column;gap:20px;}

/* formularios */
.campo{display:flex;flex-direction:column;gap:7px;}
.campo label{font-size:13px;font-weight:700;}
.campo input,.campo select{font-family:inherit;font-size:14.5px;color:var(--tinta);
  background:#fff;border:1px solid #d6dae6;border-radius:4px;padding:11px 13px;width:100%;}
.campo input:focus,.campo select:focus{outline:2px solid var(--azul);outline-offset:-1px;
  border-color:var(--azul);}
.ayuda{font-size:12.5px;color:var(--gris);line-height:1.5;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 26px;border:none;border-radius:4px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;background:var(--azul);color:#fff;}
.btn:hover{background:#1f33a8;}
.btn-ancho{width:100%;}
.btn-sec{background:#fff;color:var(--tinta);border:1px solid #d6dae6;}
.btn-sec:hover{background:#f2f3f8;color:var(--tinta);}
.btn-peligro{background:#fff;color:#b42318;border:1px solid #fecdca;}
.btn-peligro:hover{background:#fef3f2;color:#b42318;}
.btn-chico{height:34px;padding:0 14px;font-size:13px;}

/* banner "viendo como otro usuario" */
.banner-impersonar{background:#fffaeb;border-bottom:1px solid #fedf89;color:#b54708;
  font-size:13.5px;text-align:center;padding:12px clamp(20px,4vw,56px);}
.banner-impersonar a{color:#b54708;font-weight:700;text-decoration:underline;}
.banner-impersonar a:hover{color:#8a3a00;}

/* avisos */
.aviso{font-size:13px;border-radius:4px;padding:10px 12px;line-height:1.5;}
.aviso-error{color:#b42318;background:#fef3f2;border:1px solid #fecdca;}
.aviso-ok{color:#067647;background:#ecfdf3;border:1px solid #abefc6;}
.aviso-info{color:#3f4356;background:#f2f3f8;border:1px solid var(--borde);}
[hidden]{display:none !important;}

/* portal */
.saludo{display:flex;flex-direction:column;gap:7px;margin-bottom:30px;}
.saludo h1{font-size:clamp(22px,3.4vw,28px);font-weight:600;}
.saludo p{font-size:15px;color:var(--gris);}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.modulo{padding:28px 30px;display:flex;flex-direction:column;gap:10px;
  border-left:3px solid var(--azul-logo);}
.modulo h3{font-size:17px;font-weight:600;}
.modulo p{font-size:13.5px;line-height:1.55;color:var(--gris);}
/* El boton va pegado abajo en todas las tarjetas, para que queden alineados
   horizontalmente aunque los textos tengan distinto largo (pedido de Pablo,
   2026-10-21: "deja los botones alineados horizontalmente"). */
.modulo .btn{margin-top:auto;align-self:flex-start;}
.modulo .btn + p{margin-top:10px;}

/* tabla de usuarios */
.tabla-caja{overflow-x:auto;}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px;}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--borde);}
th{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#8d93a8;background:#fafbfd;}
tbody tr:hover{background:#fafbfd;}
.etiqueta{display:inline-block;font-size:11.5px;font-weight:600;border-radius:999px;
  padding:3px 10px;}
.et-pendiente{color:#b54708;background:#fffaeb;border:1px solid #fedf89;}
.et-lista{color:#067647;background:#ecfdf3;border:1px solid #abefc6;}
.et-admin{color:var(--azul);background:#eef0fb;border:1px solid #d5daf7;}
.et-rechazado{color:#b42318;background:#fef3f2;border:1px solid #fecdca;}
.acciones{display:flex;gap:8px;flex-wrap:wrap;}