/* Magnus — tokens y base compartida (panel, landing, admin).
   Claro, texto negro, un solo botón principal (negro) por pantalla, el rojo es acento.
   Fuentes: Archivo (títulos y números), IBM Plex Sans (texto), IBM Plex Mono (códigos). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,500;100,600;100,700;112,700;112,800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --fondo: #F4F2EE;          /* hormigón claro */
  --papel: #FFFFFF;
  --papel-2: #EFECE6;
  --tinta: #15171B;
  --tinta-2: #3A3D44;
  --apagado: #5F636B;
  --linea: #DDD9D1;
  --linea-fuerte: #C9C5BC;
  --rojo: #C8201B;           /* acento de marca, pases, alertas */
  --rojo-suave: #FBEAE9;
  --verde: #1D7A46;          /* efectivo, conectado, ok */
  --verde-suave: #E5F2EA;
  --ambar: #9A6400;          /* avisos */
  --ambar-suave: #FAF0DC;
  --azul: #2B5C8A;           /* enlaces, información */
  --azul-suave: #E7EFF6;
  --sombra: 0 1px 2px rgba(21, 23, 27, .06), 0 4px 16px rgba(21, 23, 27, .05);
  --radio: 12px;
  --radio-chico: 9px;
  --f-titulo: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-texto: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-codigo: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--f-texto); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(26px, 4.5vw, 40px); font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 var(--e3); }
a { color: var(--azul); }
img { max-width: 100%; }
code, .mono { font-family: var(--f-codigo); font-size: .92em; }
.num { font-family: var(--f-titulo); font-variant-numeric: tabular-nums; }
.apagado { color: var(--apagado); }
.chico { font-size: 13px; }
.oculto, [hidden] { display: none !important; }

/* Botones: uno principal (negro) por pantalla; el resto, secundarios. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 42px; padding: 0 var(--e4); border-radius: var(--radio-chico);
  border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta);
  font: 600 15px/1 var(--f-texto); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--tinta-2); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px;
}
.btn.principal { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn.principal:hover { background: #000; }
.btn.peligro { color: var(--rojo); border-color: #E7B9B7; }
.btn.chico { min-height: 34px; padding: 0 var(--e3); font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Formularios */
label.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; }
label.campo .ayuda { font-weight: 400; color: var(--apagado); font-size: 13px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url],
input[type=time], input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); background: var(--papel); color: var(--tinta);
  font: 400 15px/1.35 var(--f-texto);
}
textarea { min-height: 90px; resize: vertical; }
.error-campo { color: var(--rojo); font-size: 13px; }
.interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--e2); cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .riel { width: 42px; height: 24px; border-radius: 12px; background: var(--linea-fuerte); position: relative; transition: background .15s; flex: none; }
.interruptor .riel::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + .riel { background: var(--verde); }
.interruptor input:checked + .riel::after { transform: translateX(18px); }
.interruptor input:focus-visible + .riel { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Superficies */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4); }
.aviso { border-left: 4px solid var(--ambar); background: var(--ambar-suave); padding: var(--e3) var(--e4); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }
.aviso.ok { border-color: var(--verde); background: var(--verde-suave); }
.aviso.alerta { border-color: var(--rojo); background: var(--rojo-suave); }
.aviso.info { border-color: var(--azul); background: var(--azul-suave); }

/* Chips de estado */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--papel-2); color: var(--tinta-2); white-space: nowrap; }
.chip.pase { background: var(--rojo-suave); color: var(--rojo); }
.chip.ok, .chip.magnus { background: var(--verde-suave); color: var(--verde); }
.chip.persona { background: var(--azul-suave); color: var(--azul); }
.chip.aviso { background: var(--ambar-suave); color: var(--ambar); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Tablas */
.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 9px 12px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.tabla th { font: 500 12px/1.2 var(--f-codigo); text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); background: var(--papel-2); position: sticky; top: 0; z-index: 1; }
.tabla td.plata, .tabla th.plata { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* v3 (27-sep): el mismo aire que la web en todas las pantallas (panel, admin, alta): botones en pastilla con el
   relleno rojo al pasar el mouse, campos y tarjetas más redondeados, títulos con Archivo 800. */
:root { --curva: cubic-bezier(.22, 1, .36, 1); }
h1 { font-weight: 800; letter-spacing: -.02em; }
.btn { border-radius: 999px; padding: 0 18px; transition: border-color .2s, background .2s, transform .3s var(--curva); }
.btn.chico { padding: 0 14px; }
.btn.principal { position: relative; overflow: hidden; isolation: isolate; }
.btn.principal::before { content: ''; position: absolute; inset: 0; background: var(--rojo); transform: translateY(101%); transition: transform .45s var(--curva); z-index: -1; }
.btn.principal:hover { background: var(--tinta); }
.btn.principal:hover::before, .btn.principal:focus-visible::before { transform: none; }
.btn.principal[disabled]::before { display: none; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=url],
input[type=time], input[type=date], input[type=search], select, textarea { border-radius: 10px; }
.tarjeta { border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(21, 23, 27, .04); }
.chip { border-radius: 6px; }