/* === Friendly Light Theme (genérico) === */
:root{
  --bg:#f7f9fc;
  --card:#ffffff;
  --border:#e7edf3;
  --text:#152235;
  --muted:#6b7a90;
  --brand:#3b82f6;           /* azul amable */
  --brand-2:#22c55e;         /* verde éxito */
  --accent:#f59e0b;          /* amarillo */
  --soft:#eef4ff;
  --error:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(800px 400px at 85% -10%,#eaf2ff 0%,transparent 60%),
    radial-gradient(700px 400px at -10% 10%,#fef3c7 0%,transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Layout */
.container{max-width:980px;margin:0 auto;padding:28px}

/* Hero responsive */
.hero{display:grid; gap:14px; margin:12px 0 18px; grid-template-columns: 1fr; align-items:center;}
@media (min-width: 960px){ .hero{ grid-template-columns: 1.2fr 0.8fr; } }

.hero .illustration{
  width: 100%;
  min-height: 160px;
  background: linear-gradient(180deg,#fff,#f5f8ff);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width: 960px){ .hero .illustration{ min-height: 240px; padding: 18px; } }
.hero-img{ width:100%; height:100%; object-fit:contain; border-radius:12px }
.hero-placeholder{ font-size:56px; opacity:.8 }

/* Cards & sections */
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);}
.section-title{margin:0 0 12px}

/* Inputs */
label{display:block;margin:10px 0 6px;color:var(--muted);font-weight:600}
input,select,textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text); outline:0; transition:.15s;}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(59,130,246,.12)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:700}
.btn-primary{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:#fff}
.btn-secondary{background:#eef4ff;color:#1e3a8a;border:1px solid #dbe7ff}
.btn-ghost{background:transparent;color:#1f2937}
.btn-success{background:linear-gradient(180deg,#34d399,#22c55e);color:#04361e}
.btn-danger{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}

/* Grid helpers */
.row{display:grid;gap:12px}
@media(min-width:780px){ .row-2{grid-template-columns:1fr 1fr} .row-3{grid-template-columns:1fr 1fr 1fr} }

/* Table (dashboard) */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
.table th{color:#0f172a}

/* Wizard */
.stepper{display:flex;gap:10px;align-items:center;margin:8px 0 12px}
.step{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:#fff}
.step.active{border-color:var(--brand);box-shadow:0 0 0 4px rgba(59,130,246,.10)}
.step .n{width:28px;height:28px;border-radius:999px;background:var(--soft);display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.step.active .n{background:var(--brand);color:#fff}
.step .t{font-weight:700}
.progress{height:8px;background:#eaf2ff;border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,#22c55e);width:0%}

/* Badges & smalls */
.badge{display:inline-flex;align-items:center;gap:6px;background:#eef4ff;border:1px solid #dbe7ff;color:#1e40af;padding:6px 10px;border-radius:999px;font-weight:700}
.small{font-size:.93rem;color:var(--muted)}
.success{color:var(--brand-2)} .warn{color:#b45309} .error{color:var(--error)}
.footer{margin-top:20px;color:var(--muted)}

/* Toasts */
#toast-root{position:fixed; right:16px; top:16px; z-index:9999; display:flex; flex-direction:column; gap:10px}
.toast{min-width:260px; max-width:360px; background:#fff; border:1px solid var(--border); border-left:6px solid var(--brand); border-radius:12px; padding:12px 14px; box-shadow:0 10px 20px rgba(0,0,0,.08); display:flex; gap:10px; align-items:flex-start}
.toast.success{border-left-color:#22c55e}
.toast.error{border-left-color:#ef4444}
.toast.warn{border-left-color:#f59e0b}
.toast .title{font-weight:800; margin-bottom:4px}
.toast .msg{color:var(--text)}
.toast .x{margin-left:auto; cursor:pointer; color:#475569}

/* ======= Mobile-first tweaks ======= */
@media (max-width: 600px){
  .container{ padding: 14px; }
  .card{ padding: 14px; border-radius: 14px; }
  .badge{ font-size: 0.95rem; }
  .hero h1{ font-size: 26px; line-height: 1.2; }
}

/* Mostrar solo el paso activo en móviles */
@media (max-width: 720px){
  .stepper{justify-content:flex-start; gap:8px; overflow-x:visible;}
  .stepper .step{display:none}
  .stepper .step.active{display:flex}
  .stepper .step.active .t{white-space:nowrap}
}

/* ======= Footer 'hecho con amor' ======= */
.footer {
  margin-top: 40px;
  text-align: center;
  font-size: 0.82rem;
  color: #667085;
  opacity: .95;
}
.brand-mini { font-weight: 600; color: #0ea5e9; }

/* ======= Header con byline debajo alineada a la derecha ======= */
.header{display:flex;align-items:center;gap:8px}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#60a5fa,#34d399);display:flex;align-items:center;justify-content:center;color:white;font-weight:800}
.brand{display:flex;flex-direction:column;line-height:1.2}
.brand .title{font-size:1.8rem;font-weight:700}
.brand .byline{
  font-size:0.9rem;
  color:#555;
  text-align:right;
  width:100%;           /* empuja a la derecha bajo el título */
}