/* Plantilla universal: admin.css */
/* ===== Admin UI – Drop-in theme ===== */

/* Paleta y tipografía */
:root{
  --bg: #f6faf8;
  --card: #ffffff;
  --ink: #0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#10b981;
  --brand-ink:#064e3b;
  --warn:#ef4444;
  --radius:16px;
  --shadow: 0 10px 30px rgba(2,6,23,.06);
}
body{ background:var(--bg); color:var(--ink); }

/* Header más limpio */
.site{
  background:transparent; border:0; padding:16px 18px !important;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.site .brand{ font-weight:800; font-size:20px; }
.site nav a{ color:#2563eb; margin-left:12px; }

/* Tarjetas y layout */
.dash{ padding:18px; max-width:980px; margin:0 auto; }
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
.card__title{ font-size:22px; margin:0 0 12px; }

/* Botones */
.btn{ display:inline-block; border:0; border-radius:12px; padding:10px 14px; cursor:pointer; text-decoration:none; margin-top: 12px;}
.btn:hover{ filter:brightness(.98); }
.btn.small{ padding:7px 10px; font-size:14px; border-radius:10px; }
.btn.outline{ background:#fff; border:1px solid var(--line); }
.btn-primary{ background:var(--brand); color:#fff; font-weight:600; }

/* Texto auxiliar */
.muted{ color:var(--muted); font-size:12px; }

/* Formularios – móvil first */
.form-card{ max-width:900px; margin-inline:auto; }
.form-grid{ display:grid; gap:16px; }
.form__row label{ display:block; font-weight:700; margin:0 0 6px; }
input, textarea, select{
  width:100%; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:16px; background:#fff; outline:none;
}
textarea{ min-height:130px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(16,185,129,.15);
}

/* Acciones del formulario */
.form-actions{
  position:sticky; bottom:0; background:var(--card);
  padding-top:10px; margin-top:4px; display:flex; gap:10px; justify-content:flex-end;
  border-top:1px solid var(--line);
}
@media (max-width:740px){
  .form-actions{ position:static; padding-top:0 }
  .btn-primary{ width:100%; }
}

/* Preview de imagen */
.img-preview{ margin-top:8px; border:1px solid var(--line); border-radius:12px; padding:8px; background:#fafafa; }
.img-preview img{ max-width:100%; display:block; border-radius:10px; }

/* Tabla del dashboard */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:12px; }
.tbl{ width:100%; border-collapse:collapse; min-width:640px; }
.tbl th, .tbl td{ padding:12px 14px; border-bottom:1px solid #f1f5f9; text-align:left; }
.tbl th{ background:#f8fafc; font-weight:700; }
.actions{ white-space:nowrap; }

/* Alertas */
.alert.error{
  background:#fee2e2; color:#991b1b; border:1px solid #fecaca;
  border-radius:12px; padding:10px 12px; margin:8px 0;
}

/* Login */
.auth-body{ background:var(--bg); }
.auth{ display:grid; place-items:center; min-height:calc(100dvh - 120px); padding:16px; }
.auth__card{ width:100%; max-width:420px; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.password{ position:relative; display:grid; align-items:center; }
.password .toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer; font-size:18px; padding:6px; opacity:.7;
}
.password .toggle.on{ opacity:1; }

/* Pequeños detalles */
a{ color:#2563eb; }
a.btn{ color:inherit; }
.footer{ color:var(--muted); text-align:left; padding:18px; }
.notice{
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0 14px;
  font-size:14px;
}

.notice--success{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
}

.notice--error{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
}

.notice--info{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e3a8a;
}

.form-error{
  margin-top:6px;
  color:#dc2626;
  font-size:13px;
  font-weight:500;
}

.notice{
  padding:10px 12px;
  border-radius:10px;
  margin:10px 0 14px;
  font-size:14px;
}

.notice--success{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
}

.notice--error{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
}

.notice--info{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e3a8a;
}

.form-error{
  margin-top:6px;
  color:#dc2626;
  font-size:13px;
  font-weight:500;
}