/* === Estudio Heluani · Tema unificado === */
/* Paleta tomada del logo */
:root{
  --brand-900:#3B0E0E;
  --brand-800:#5C1212;
  --brand-700:#7A1414; /* primario */
  --brand-600:#941919;
  --brand-500:#B72323;
  --brand-100:#FBECEC;

  --ink:#0f172a;
  --muted:#64748b;
  --surface:#ffffff;
  --bg:#f8fafc;

  --radius-lg:1.5rem;
  --shadow-card:0 4px 16px rgba(0,0,0,.06);
}

/* Base */
html,body{ background:var(--bg); color:var(--ink); font-family:Inter,system-ui,sans-serif; }
header{ background:var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.05); }
.card{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.3rem; border-radius:1rem; font-weight:600; transition:.15s;
  border:1px solid transparent; text-decoration:none;
}
.btn:hover{ transform:translateY(-1px); }

.btn-primary{ background:var(--brand-700); color:#fff; border-color:var(--brand-700); }
.btn-primary:hover{ background:var(--brand-800); border-color:var(--brand-800); }

.btn-outline{ background:#fff; color:var(--brand-700); border-color:var(--brand-700); }
.btn-outline:hover{ background:var(--brand-100); }

.btn-ghost{ background:transparent; color:var(--brand-700); }
.btn-ghost:hover{ background:var(--brand-100); }

.badge{ display:inline-block; padding:.2rem .5rem; border-radius:.5rem; background:var(--brand-100); color:var(--brand-700); font-weight:600; }

/* Inputs */
input,select,textarea{
  width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:.6rem .75rem;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-600) 20%, transparent);
}

/* Tablas */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border:1px solid #e5e7eb; padding:.6rem .7rem; vertical-align:top; }
.table thead th{ background:#f1f5f9; }
.table tfoot th{ background:#eaeef5; }

/* Links */
a{ color:var(--brand-700); }
a:hover{ color:var(--brand-800); }