/* Más x Menos · Admin · estética alineada con la guía pública pero más densa (panel de operador) */
:root {
  --granate: #6E1F2A;
  --granate-dark: #3F0F18;
  --mostaza: #D4A24C;
  --caoba: #8B5A3C;
  --arena: #E8D9B8;
  --arena-light: #F2E9D8;
  --crema: #F8F1E2;
  --carbon: #181210;
  --carbon-soft: #2A201C;
  --ink-muted: #5A4842;
  --rule: #DFD0B4;
  --ok: #2D6A4F;
  --off: #7A6F66;
  --danger: #B23A48;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { background: var(--arena-light); color: var(--carbon); font: 15px/1.5 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--granate); text-decoration: none; }
a:hover { color: var(--granate-dark); }

.topbar { background: var(--carbon); color: var(--crema); display: flex; align-items: center; gap: 20px; padding: 12px 32px; }
.topbar .brand { display: flex; align-items: center; gap: 12px; color: var(--crema); font-weight: 600; }
.logo-mini { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 22px; letter-spacing: -0.04em; }
.logo-mini .x { color: var(--mostaza); font-style: italic; font-weight: 500; padding: 0 2px; }
.brand-text { font: 500 13px/1 'Inter'; letter-spacing: 0.04em; opacity: 0.85; }
.topbar .grow { flex: 1; }
.topbar a { color: rgba(248,241,226,0.7); font: 500 14px/1 'Inter'; }
.topbar a:hover { color: var(--crema); }
.topbar .cta { background: var(--mostaza); color: var(--carbon); padding: 8px 14px; border-radius: 999px; font-weight: 600; }
.topbar .cta:hover { background: var(--crema); }
.topbar form.inline { display: inline; }
.topbar button.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(248,241,226,0.85); padding: 7px 14px; border-radius: 999px; font: 500 13px/1 'Inter'; cursor: pointer; }
.topbar button.ghost:hover { color: var(--crema); border-color: var(--crema); }

main { padding: 32px 0 80px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 32px; }

.page-head { margin-bottom: 32px; }
.page-head h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 36px; letter-spacing: -0.02em; color: var(--carbon); }
.page-head .muted { color: var(--ink-muted); margin-top: 8px; }

.muted { color: var(--ink-muted); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
.small { font-size: 13px; }
.link { color: var(--granate); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

.alert { background: #fde6e7; color: #5b1a22; border-left: 3px solid var(--danger); padding: 14px 18px; border-radius: 6px; margin-bottom: 20px; }
.alert h1 { font-size: 20px; margin-bottom: 6px; color: var(--danger); font-family: 'Playfair Display'; font-weight: 600; }

.ok-big { background: #e3f1ea; color: #1c4a36; border-left: 3px solid var(--ok); padding: 20px 22px; border-radius: 6px; margin-bottom: 20px; }
.ok-big h1 { font-size: 22px; margin-bottom: 8px; color: var(--ok); font-family: 'Playfair Display'; font-weight: 600; }
.ok-big a { display: inline-block; margin-top: 14px; }

details { margin-top: 16px; }
details summary { font: 500 13px/1 'Inter'; color: var(--ink-muted); cursor: pointer; padding: 8px 0; }
details pre { background: var(--carbon); color: var(--crema); font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 18px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }

table.dir { width: 100%; border-collapse: collapse; background: var(--crema); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 var(--rule); }
table.dir thead th { background: var(--carbon); color: var(--crema); padding: 14px 18px; text-align: left; font: 600 11px/1 'Inter'; letter-spacing: 0.14em; text-transform: uppercase; }
table.dir tbody td { padding: 14px 18px; border-top: 1px solid var(--rule); vertical-align: middle; }
table.dir tbody tr:hover { background: var(--arena-light); }
table.dir tbody a { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 17px; color: var(--carbon); letter-spacing: -0.01em; }
table.dir tbody a:hover { color: var(--granate); }
.star { color: var(--mostaza); margin-left: 4px; }
.ok { color: var(--ok); font: 600 12px/1 'Inter'; }
.off { color: var(--off); font: 600 12px/1 'Inter'; }

/* Forms */
form.big-form, form.danger-form { display: flex; flex-direction: column; gap: 18px; }
form label { display: flex; flex-direction: column; gap: 6px; font: 600 12px/1 'Inter'; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
form input[type=text], form input[type=url], form input[type=email], form input[type=password], form select, form textarea { background: var(--crema); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; font: 15px/1.4 'Inter'; color: var(--carbon); }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--granate); box-shadow: 0 0 0 3px rgba(110,31,42,0.15); }
form .row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form .checkbox { flex-direction: row; align-items: center; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--carbon); font-weight: 500; }
form .actions { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--rule); margin-top: 8px; }

button.primary { background: var(--granate); color: var(--crema); padding: 13px 22px; border-radius: 999px; font: 600 14px/1 'Inter'; border: 0; cursor: pointer; transition: background .2s ease; }
button.primary:hover { background: var(--granate-dark); }
button.primary.big { padding: 16px 28px; font-size: 16px; align-self: flex-start; }
button.ghost { background: transparent; border: 1px solid var(--carbon); color: var(--carbon); padding: 12px 22px; border-radius: 999px; font: 500 14px/1 'Inter'; cursor: pointer; text-decoration: none; }
button.ghost:hover { background: var(--carbon); color: var(--crema); }
a.ghost { display: inline-block; }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); padding: 10px 18px; border-radius: 999px; font: 500 13px/1 'Inter'; cursor: pointer; }
button.danger:hover { background: var(--danger); color: #fff; }