/* ============================================================
   Panel de Reclutamiento - MARECUADOR
   Paleta tomada del flyer: azul marino + dorado.
   ============================================================ */
:root{
  --mar-navy:    #163a5f;
  --mar-navy-2:  #1d4e79;
  --mar-deep:    #0f2a45;
  --mar-gold:    #f4b400;
  --mar-gold-2:  #ffce3a;
  --mar-bg:      #f3f5f8;
  --mar-card:    #ffffff;
  --mar-line:    #e3e8ef;
  --mar-text:    #1b2b3a;
  --mar-muted:   #6b7c8e;
  --mar-green:   #1f9d57;
  --mar-amber:   #c98a00;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--mar-bg);
  color: var(--mar-text);
}

/* ---------- Barra superior ---------- */
.topbar{
  background: linear-gradient(100deg, var(--mar-deep), var(--mar-navy-2));
  color:#fff;
  padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 10px rgba(15,42,69,.18);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{
  width:42px; height:42px; border-radius:50%;
  background: radial-gradient(circle at 50% 35%, var(--mar-gold) 0 38%, transparent 39%),
             linear-gradient(180deg,#fff 0 50%, var(--mar-navy-2) 50% 100%);
  border:2px solid var(--mar-gold);
  flex:0 0 auto;
}
.brand b{ font-size:1.05rem; letter-spacing:.5px; }
.brand small{ display:block; color:#bcd0e4; font-weight:400; font-size:.72rem; }
.topbar .salir{ color:#cfe0f0; text-decoration:none; font-size:.85rem; }
.topbar .salir:hover{ color:#fff; }

/* ---------- Contenedor ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding:26px 20px 60px; }

/* ---------- Tarjetas de métricas ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:26px; }
.kpi{
  background:var(--mar-card); border:1px solid var(--mar-line);
  border-radius:14px; padding:18px 20px; position:relative; overflow:hidden;
}
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--mar-gold); }
.kpi .n{ font-size:2rem; font-weight:700; color:var(--mar-navy); line-height:1; }
.kpi .l{ color:var(--mar-muted); font-size:.82rem; margin-top:6px; }

/* ---------- Panel / tabla ---------- */
.panel{ background:var(--mar-card); border:1px solid var(--mar-line); border-radius:14px; overflow:hidden; }
.panel .head{
  padding:16px 20px; border-bottom:1px solid var(--mar-line);
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.panel .head h2{ margin:0; font-size:1.05rem; color:var(--mar-navy); }

.filtros{ display:flex; gap:8px; flex-wrap:wrap; }
.filtros select, .filtros input{
  border:1px solid var(--mar-line); border-radius:9px; padding:8px 11px; font-size:.85rem; background:#fff;
}
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  background:var(--mar-navy); color:#fff; padding:9px 16px; border-radius:9px;
  font-size:.85rem; font-weight:600;
}
.btn:hover{ background:var(--mar-navy-2); }
.btn.gold{ background:var(--mar-gold); color:var(--mar-deep); }
.btn.gold:hover{ background:var(--mar-gold-2); }
.btn.ghost{ background:transparent; color:var(--mar-navy); border:1px solid var(--mar-line); }

table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px;
    color:var(--mar-muted); padding:12px 18px; border-bottom:1px solid var(--mar-line); background:#fafbfd; }
td{ padding:13px 18px; border-bottom:1px solid var(--mar-line); font-size:.9rem; vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:#f8fafc; }
td a.nombre{ color:var(--mar-navy); font-weight:600; text-decoration:none; }
td a.nombre:hover{ text-decoration:underline; }

/* ---------- Etiquetas ---------- */
.tag{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:600; }
.tag.green{ background:#e3f6ec; color:var(--mar-green); }
.tag.amber{ background:#fff3da; color:var(--mar-amber); }
.tag.navy{ background:#e6eef6; color:var(--mar-navy); }
.tag.gray{ background:#eef1f4; color:var(--mar-muted); }

.progreso{ height:7px; background:#eef1f4; border-radius:999px; overflow:hidden; width:90px; display:inline-block; vertical-align:middle; }
.progreso > i{ display:block; height:100%; background:var(--mar-gold); }

.vacio{ padding:40px; text-align:center; color:var(--mar-muted); }

/* ---------- Login ---------- */
.login-bg{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--mar-deep), var(--mar-navy-2)); padding:20px; }
.login-card{ background:#fff; border-radius:16px; padding:34px 30px; width:100%; max-width:370px;
  box-shadow:0 18px 50px rgba(0,0,0,.28); }
.login-card .logo{ width:60px; height:60px; margin:0 auto 14px;
  background: radial-gradient(circle at 50% 35%, var(--mar-gold) 0 38%, transparent 39%),
             linear-gradient(180deg,#fff 0 50%, var(--mar-navy-2) 50% 100%);
  border:3px solid var(--mar-gold); border-radius:50%; }
.login-card h1{ text-align:center; font-size:1.2rem; color:var(--mar-navy); margin:0 0 4px; }
.login-card p{ text-align:center; color:var(--mar-muted); font-size:.82rem; margin:0 0 22px; }
.login-card label{ font-size:.8rem; color:var(--mar-muted); display:block; margin:0 0 5px; }
.login-card input{ width:100%; padding:11px 13px; border:1px solid var(--mar-line);
  border-radius:10px; margin-bottom:15px; font-size:.95rem; }
.login-card .btn{ width:100%; text-align:center; padding:12px; font-size:.95rem; }
.alerta{ background:#fdecea; color:#b3261e; padding:10px 13px; border-radius:9px; font-size:.85rem; margin-bottom:14px; }

/* ---------- Detalle ---------- */
.detalle-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dato{ font-size:.92rem; }
.dato .k{ color:var(--mar-muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; }
.dato .v{ font-weight:600; color:var(--mar-text); }
.docs{ list-style:none; padding:0; margin:0; }
.docs li{ display:flex; align-items:center; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--mar-line); }
.docs li:last-child{ border-bottom:none; }
.docs .dn{ display:flex; align-items:center; gap:10px; font-size:.9rem; }
.docs .dot{ width:9px; height:9px; border-radius:50%; }
.docs .dot.ok{ background:var(--mar-green); }
.docs .dot.no{ background:#d6dde4; }
.back{ color:var(--mar-muted); text-decoration:none; font-size:.85rem; }
.back:hover{ color:var(--mar-navy); }

@media(max-width:640px){
  .detalle-grid{ grid-template-columns:1fr; }
  th:nth-child(4), td:nth-child(4){ display:none; }
}