:root{
  --azul:#0b5d8a; --azul-osc:#084a6f; --verde:#1a8a4a; --rojo:#c0392b;
  --gris:#6b7785; --gris-cl:#eef2f5; --borde:#dde3e8; --texto:#1d2b36; --bg:#f5f7f9;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--texto);font-size:15px;line-height:1.5}

/* ---------- Login ---------- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0b5d8a,#063047)}
.login-card{background:#fff;padding:34px 30px;border-radius:14px;width:340px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:center}
.login-logo{font-size:42px}
.login-card h1{font-size:19px;margin:6px 0 2px}
.login-card .sub{color:var(--gris);margin:0 0 18px;font-size:13px}
.login-card label{display:block;text-align:left;font-size:13px;margin-bottom:12px;color:#445}
.login-card input{width:100%;margin-top:4px}
.login-card button{width:100%;margin-top:6px}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:center;gap:20px;background:var(--azul);color:#fff;
  padding:0 22px;height:56px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.brand .logo{font-size:22px}
.topbar nav{display:flex;gap:6px;margin-left:10px}
.topbar nav a{color:#dcebf4;text-decoration:none;padding:7px 12px;border-radius:7px;font-size:14px}
.topbar nav a:hover{background:rgba(255,255,255,.15);color:#fff}
.userbox{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px}
.userbox .salir{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.4);
  padding:5px 11px;border-radius:7px}
.userbox .salir:hover{background:rgba(255,255,255,.15)}

/* ---------- Layout ---------- */
.contenido{max-width:1080px;margin:24px auto;padding:0 18px}
.pie{max-width:1080px;margin:30px auto;padding:16px 18px;color:var(--gris);font-size:12px;
  border-top:1px solid var(--borde);display:flex;gap:6px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.page-head h1{font-size:22px;margin:0}

/* ---------- Botones ---------- */
.btn{display:inline-block;background:#fff;border:1px solid var(--borde);color:var(--texto);
  padding:8px 14px;border-radius:8px;text-decoration:none;cursor:pointer;font-size:14px;font-weight:600}
.btn:hover{border-color:var(--azul);color:var(--azul)}
.btn.primary{background:var(--azul);border-color:var(--azul);color:#fff}
.btn.primary:hover{background:var(--azul-osc)}
.btn.ghost{background:transparent}
.btn.rojo{border-color:var(--rojo);color:var(--rojo)}
.btn.rojo:hover{background:var(--rojo);color:#fff}
.btn.xs{padding:5px 9px;font-size:12.5px}
button.btn{font-family:inherit}
input,select,textarea{padding:9px 11px;border:1px solid var(--borde);border-radius:8px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(11,93,138,.12)}
button[type=submit]{background:var(--azul);color:#fff;border:none;padding:10px 16px;border-radius:8px;
  font-weight:700;cursor:pointer;font-size:15px}
button[type=submit]:hover{background:var(--azul-osc)}

/* ---------- Stats ---------- */
.stats{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.stat{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:14px 20px;
  min-width:110px;font-size:13px;color:var(--gris);font-weight:600}
.stat .n{display:block;font-size:26px;color:var(--texto);font-weight:800}
.stat.verde{border-top:3px solid var(--verde)} .stat.verde .n{color:var(--verde)}
.stat.gris{border-top:3px solid var(--gris)}
.stat.azul{border-top:3px solid var(--azul)} .stat.azul .n{color:var(--azul)}

/* ---------- Filtros ---------- */
.filtros{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.filtros input[type=search]{flex:1;min-width:220px}

/* ---------- Tabla ---------- */
.tabla-wrap{background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:auto}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;background:var(--gris-cl);padding:11px 12px;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;color:#56636e}
.tabla td{padding:11px 12px;border-top:1px solid var(--borde);vertical-align:middle}
.tabla tr:hover td{background:#fafcfd}
.tabla .sub{color:var(--gris);font-size:12px}
.enlace{color:var(--azul);font-weight:700;text-decoration:none}
.enlace:hover{text-decoration:underline}
.vacio{text-align:center;color:var(--gris);padding:26px}
.docs .doc{font-size:16px;opacity:.25;margin-right:4px}
.docs .doc.ok{opacity:1}
.acciones{white-space:nowrap;text-align:right}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700}
.badge.verde{background:#e2f5ea;color:var(--verde)}
.badge.rojo{background:#fbe7e4;color:var(--rojo)}
.badge.gris{background:#e9edf1;color:var(--gris)}
.rol{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.rol.admin{background:#fde9d6;color:#b5651d}
.rol.instructor{background:#e1ecf5;color:var(--azul)}
.rol.empresa{background:#e6f0e2;color:#3a7d2c}

/* ---------- Formularios ---------- */
.form-card{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:22px;max-width:760px}
.form-card.plano{padding:0;border:none}
.form-card label{display:block;font-size:13px;color:#445;margin-bottom:14px;font-weight:600}
.form-card input,.form-card select,.form-card textarea{width:100%;margin-top:5px;font-weight:400}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.check{display:flex !important;align-items:center;gap:8px;font-weight:600}
.check input{width:auto !important;margin:0 !important}
.form-actions{margin-top:8px;display:flex;gap:10px}
.hint{color:var(--gris);font-size:12.5px;margin-top:10px}
.notas span{white-space:pre-wrap}

/* ---------- Ficha alumno ---------- */
.ficha{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:20px;margin-bottom:18px}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.datos>div{display:flex;flex-direction:column}
.datos b{font-size:11px;text-transform:uppercase;color:var(--gris);letter-spacing:.4px}
.datos span{font-size:15px;margin-top:2px}
.datos .notas{grid-column:1/-1}

/* ---------- Documentos ---------- */
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.doc-card{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:18px}
.doc-card.ancho{grid-column:1/-1}
.doc-card h3{margin:0 0 12px;font-size:16px}
.lista-archivos{list-style:none;padding:0;margin:0 0 14px}
.lista-archivos li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.lista-archivos a{color:var(--azul);text-decoration:none;font-weight:600}
.lista-archivos .sub{color:var(--gris);font-size:12px;margin-right:auto}
.subir{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.sin{font-style:italic}
.inline{display:inline}
.envio-cert{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--borde)}

/* ---------- Mensajes ---------- */
.flash{background:#e2f5ea;border:1px solid #b7e3c8;color:#176e3c;padding:11px 14px;
  border-radius:9px;margin-bottom:16px;font-size:14px}
.error{background:#fbe7e4;border:1px solid #f1c1ba;color:#9d2e22;padding:11px 14px;
  border-radius:9px;margin-bottom:14px;font-size:14px}
code{background:var(--gris-cl);padding:2px 6px;border-radius:5px;font-size:13px}

@media(max-width:720px){
  .grid2,.datos,.docs-grid{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  .userbox{width:100%}
}