/* ============================================================
   Cobro AM · tema azul
   ============================================================ */
:root{
  --azul-oscuro:#0d3b66;
  --azul:#1d4ed8;
  --azul-claro:#2563eb;
  --azul-hover:#1e40af;
  --bg:#f4f6fa;
  --texto:#1f2937;
  --gris:#6b7280;
  --borde:#e5e7eb;
  --ok:#16a34a;
  --error:#dc2626;
  --radio:10px;
  --sombra:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--texto);line-height:1.5;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex;align-items:center;gap:24px;
  background:var(--azul-oscuro);color:#fff;
  padding:0 24px;height:58px;box-shadow:var(--sombra);
  position:sticky;top:0;z-index:10;
}
.topbar .brand{font-weight:700;font-size:1.15rem;letter-spacing:.3px}
.topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.topbar nav a{
  color:#dbeafe;padding:8px 14px;border-radius:8px;font-size:.92rem;
}
.topbar nav a:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
.topbar .user{display:flex;align-items:center;gap:14px;font-size:.9rem}
.topbar .user .logout{
  background:rgba(255,255,255,.15);color:#fff;padding:6px 12px;border-radius:8px;
}
.topbar .user .logout:hover{background:rgba(255,255,255,.28);text-decoration:none}

/* ---------- Contenedor ---------- */
.container{max-width:1100px;margin:28px auto;padding:0 24px}
.pie{text-align:center;color:var(--gris);font-size:.85rem;padding:28px 0}
h1{font-size:1.5rem;margin-bottom:6px}
.sub{color:var(--gris);margin-bottom:22px}

/* ---------- Tarjetas / grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  padding:20px;box-shadow:var(--sombra);
}
.card.stat .n{font-size:2rem;font-weight:700;color:var(--azul-oscuro)}
.card.stat .l{color:var(--gris);font-size:.9rem}
.card.link{display:block;transition:.15s}
.card.link:hover{border-color:var(--azul-claro);box-shadow:0 4px 12px rgba(37,99,235,.15);text-decoration:none}
.card.link .t{font-weight:600;color:var(--texto);font-size:1.05rem}
.card.link .d{color:var(--gris);font-size:.88rem;margin-top:4px}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--azul-oscuro),var(--azul));padding:20px}
.login-card{background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.2);
  width:100%;max-width:380px;padding:36px 32px}
.login-card h1{text-align:center;color:var(--azul-oscuro);margin-bottom:4px}
.login-card .marca{text-align:center;color:var(--gris);font-size:.9rem;margin-bottom:24px}

/* ---------- Formularios ---------- */
label{display:block;font-size:.88rem;font-weight:600;margin:14px 0 6px}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--borde);border-radius:8px;
  font-size:.95rem;font-family:inherit;background:#fff;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul-claro);
  box-shadow:0 0 0 3px rgba(37,99,235,.15)}
textarea{resize:vertical;min-height:80px}
.btn{
  display:inline-block;background:var(--azul);color:#fff;border:none;
  padding:11px 20px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;
}
.btn:hover{background:var(--azul-hover);text-decoration:none;color:#fff}
.btn-block{width:100%;margin-top:22px}
.btn-sec{background:#fff;color:var(--azul);border:1px solid var(--azul)}
.btn-sec:hover{background:#eff6ff;color:var(--azul-hover)}
.btn-peligro{background:var(--error)}
.btn-peligro:hover{background:#b91c1c}

/* ---------- Mensajes ---------- */
.alerta{padding:11px 14px;border-radius:8px;font-size:.9rem;margin-bottom:16px}
.alerta.error{background:#fef2f2;color:var(--error);border:1px solid #fecaca}
.alerta.ok{background:#f0fdf4;color:var(--ok);border:1px solid #bbf7d0}

/* ---------- Tablas ---------- */
.tabla-wrap{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  overflow:auto;box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 14px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--borde)}
th{background:#f8fafc;color:var(--azul-oscuro);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f8fafc}

.barra{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.acciones a{margin-right:8px;font-size:.88rem}

@media(max-width:640px){
  .topbar{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
  .topbar nav{order:3;width:100%}
  .container{padding:0 16px;margin:20px auto}
}

/* ---------- Extras paso 2B ---------- */
.btn-link-peligro{background:none;border:none;color:var(--error);cursor:pointer;
  font-size:.88rem;padding:0;font-family:inherit}
.btn-link-peligro:hover{text-decoration:underline}

.paginacion{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:20px}
.paginacion a{padding:8px 14px;border:1px solid var(--borde);border-radius:8px;background:#fff}
.paginacion a:hover{border-color:var(--azul-claro);text-decoration:none}
.paginacion .actual{color:var(--gris);font-size:.9rem}