/* ===============================
   Programa Académico — UI Moderna
   =============================== */

/* Fuente (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Reseteo básico */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: #0f172a; /* slate-900 */
  background: #0b1220;
  background-image:
    radial-gradient(1200px 600px at -10% -10%, rgba(56,189,248,.06), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(192,132,252,.06), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 40%, #0b1220 100%);
}

/* Paleta y sombras */
:root{
  --brand: #7c3aed;           /* violeta */
  --brand-600:#6d28d9;
  --brand-700:#5b21b6;
  --brand-soft: #ede9fe;
  --ink: #0f172a;
  --muted:#6b7280;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --border:#e5e7eb;
  --ok:#0ea5e9;
  --ok-600:#0284c7;
  --warn:#f59e0b;
  --danger:#ef4444;
  --ring: 0 0 0 6px rgba(124,58,237,.12);
  --shadow-lg: 0 20px 40px rgba(2,6,23,.22);
  --shadow-md: 0 12px 26px rgba(2,6,23,.18);
  --radius: 16px;
}

/* Contenedor */
.wrap{
  width: min(1100px, 92vw);
  margin-inline: auto;
}

/* ======= Header “hero” ======= */
.pa-header{
  position: relative;
  padding: 56px 0 36px;
  background:
    radial-gradient(1000px 600px at 20% -20%, rgba(125,211,252,.25), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(216,180,254,.25), transparent 55%),
    linear-gradient(135deg, #0ea5e9 0%, #7c3aed 55%, #4f46e5 100%);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.pa-header .wrap{ display:flex; flex-direction:column; gap:8px }
.pa-header h1{
  margin:0;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(28px, 4vw, 40px);
}
.pa-header .sub{
  opacity:.92;
  font-size: clamp(14px, 1.7vw, 17px);
  max-width: 820px;
}

/* ======= Barra de herramientas ======= */
.toolbar{
  margin-top: -26px;
  background: #ffffff;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center;
}
.print-hide{ @media print{ display:none !important; } }

/* Botones */
.btn{
  --bg:#ffffff;
  --fg:#0f172a;
  --bd:#e5e7eb;
  appearance:none; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg);
  padding:9px 14px; border-radius:12px; font-weight:600; font-size:14px;
  cursor:pointer; transition: transform .08s ease, box-shadow .15s ease, border-color .15s;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.08); }
.btn:focus{ outline: none; box-shadow: var(--ring); }
.btn.primary{
  --bg: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  --fg:#fff; --bd:transparent; color:#fff;
}
.btn.green{ --bg:#10b981; --fg:#fff; --bd:#10b981; color:#fff; }
.btn.ghost{ --bg:transparent; --fg:#0f172a; --bd:transparent; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* Tarjetas y secciones */
.card{
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 16px;
}
.row-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-bottom: 6px; border-bottom:1px dashed var(--border);
}
h2{ font-size:20px; margin:0 }

/* Inputs y selects */
label{
  display:block; font-size:12px; letter-spacing:.2px;
  text-transform: uppercase; color: var(--muted); margin: 2px 0 6px;
}
input, select, textarea{
  width:100%;
  font: inherit;
  padding: 10px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}
textarea{ min-height: 120px; resize: vertical; }

/* Grid de campos */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}

/* Tabla bonita */
table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  font-size:14px;
}
thead th{
  background: #f8fafc;
  color:#0f172a; text-align:left; font-weight:700;
  padding:12px 12px; border-bottom:1px solid var(--border);
}
tbody td{
  padding:12px; border-bottom:1px solid #f1f5f9; vertical-align: top;
}
tfoot td{
  background:#f8fafc; padding:12px; font-weight:700; color:#0f172a;
}
tbody tr:hover{ background:#fafafa; }

/* Vista previa */
#preview{
  border:1px dashed var(--border);
  border-radius:12px; padding:12px;
  background:#fff;
  min-height: 60px;
}

/* ====== FAB y Drawer (editor) ====== */
.fab-edit{
  position: fixed; right: 22px; bottom: 22px;
  z-index: 40;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color:#fff; border:0; border-radius: 999px;
  padding: 12px 18px; font-weight: 800; letter-spacing:.3px;
  box-shadow: 0 16px 36px rgba(22,163,74,.42);
  cursor: pointer; transition: transform .08s ease, box-shadow .15s ease;
}
.fab-edit:hover{ transform: translateY(-2px); box-shadow: 0 20px 44px rgba(22,163,74,.48); }

.drawer{
  position: fixed; top:0; right:0; height:100%; width: 420px; max-width: 92vw;
  background: #ffffff; border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .25s ease;
  display:flex; flex-direction: column; z-index: 50; box-shadow: -20px 0 60px rgba(2,6,23,.15);
}
.drawer.open{ transform: translateX(0); }
.drawer header{
  display:flex; align-items:center; justify-content: space-between;
  padding: 14px 14px; border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.drawer .content{
  padding: 14px; overflow: auto; flex:1; display:flex; flex-direction:column; gap:14px;
}
.drawer footer{
  padding: 12px 14px; border-top:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content: space-between; gap:10px;
}

/* Listas visuales del editor */
.list{
  border:1px dashed var(--border); border-radius:12px; background:#fff; padding:10px;
  min-height: 48px; display:flex; flex-wrap:wrap; gap:8px;
}
.list .chip{
  background: var(--surface-2); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600;
}

/* Badges / estados */
.badge-ok{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 28px; height: 28px; padding:0 8px;
  background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe;
  border-radius:999px; font-weight:700;
}
.badge-warn{ background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.badge-err{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Mensajes */
.alert{
  background:#f1f5f9; color:#0f172a; border:1px solid var(--border);
  padding:10px 12px; border-radius:12px;
}

/* Enlaces */
a{ color: var(--ok-600); font-weight:600; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ===== Login “card” ===== */
body.login{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.15), transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, rgba(192,132,252,.15), transparent 60%),
    linear-gradient(135deg, #0ea5e9 0%, #7c3aed 60%, #4f46e5 100%);
  display:flex; align-items: center; justify-content: center;
}
.login-card{
  width: min(420px, 92vw);
  background:#fff; border:1px solid var(--border); border-radius: 20px;
  padding: 22px 18px; box-shadow: var(--shadow-lg);
}
.login-card h1{ margin:0 0 4px; font-size: 24px; }
.login-card .muted{ color: var(--muted); margin: 0 0 14px; }
.login-card label{ margin-top:8px }
.login-card input{ margin-bottom: 10px; }

/* ====== Impresión ====== */
@page{ margin: 14mm; }
@media print{
  body{ background:#fff; }
  .pa-header{ background:none; color:#000; border:0; padding:0 0 10px 0 }
  .toolbar, .fab-edit{ display:none !important; }
  .card{ box-shadow:none; border-color:#cbd5e1 }
  a{ color:inherit; text-decoration:none }
}