/* Downloader · ADMINISTRACIÓN: la marca de afcripto.com, la misma que la zona de usuario (static/usuario.css, medida el
   08-10-2026): granate #7B1E2B en la cabecera y los botones, raya dorada, crema #FAF6F1 / #FDF8F5, tinta #2A1A1E, gris
   rosado #6B585D, rosados #E8C9CF / #F3E2E6, títulos en Playfair Display y texto en Source Sans 3, radio 5 px.
   Lo común de la página de acceso y del panel: tokens, cabecera, pie, botones, campos y foco. Lo propio del panel
   (lateral, tarjetas, tablas, log…) va en app.css; la piel del panel de reglas enmarcado, en panel.css. */
:root {
  --granate: #7b1e2b; --granate-osc: #5f1621; --granate-claro: #f3e2e6; --rosa: #e8c9cf; --rosa-osc: #b47f8a;
  --crema: #faf6f1; --crema-2: #fdf8f5; --tinta: #2a1a1e; --texto: #35383a; --suave: #6b585d; --tenue: #7a666b;
  --blanco: #ffffff; --dorado: #c9a45c;
  --ok: #2e6b3f; --ok-fondo: #e6f2e8; --ok-borde: #b9d8c0;
  --aviso: #8a5a00; --aviso-fondo: #fbf1dc; --aviso-borde: #ecd3a0;
  --mal: #a12a2a; --mal-fondo: #f8e3e3; --mal-borde: #e5b5b5;
  --info: #1f4e79; --info-fondo: #e7eff8; --info-borde: #b9cde3;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --sombra: 0 1px 2px rgba(42, 26, 30, .05), 0 8px 24px rgba(42, 26, 30, .06);
  --radio: 8px;
}
* { box-sizing: border-box; }
html { background: var(--crema); }
body { margin: 0; background: var(--crema); color: var(--texto); font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--granate); }
code { font-family: var(--mono); font-size: .9em; background: var(--crema); border: 1px solid var(--granate-claro);
  padding: 0 4px; border-radius: 4px; color: var(--tinta); overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--granate); outline-offset: 2px; }

/* saltar al contenido (teclado) */
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 5px;
  background: var(--blanco); color: var(--granate); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 8px; }

/* ───────────────────────── cabecera */
.barra { background: var(--granate); color: var(--crema-2); border-bottom: 3px solid var(--dorado); }
.barra-in { padding: 8px 16px; display: flex; align-items: center; gap: 10px 18px; min-height: 58px; }
.marca { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; flex: none; }
.marca img { height: 36px; width: auto; display: block; }
.zona-admin { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--crema-2); line-height: 1.1;
  padding-left: 12px; border-left: 1px solid rgba(253, 248, 245, .35); white-space: nowrap; }
.marca:focus-visible, .enlace:focus-visible, .menu a:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.menu { display: flex; align-items: stretch; gap: 4px; margin-right: auto; }
.menu a { display: flex; align-items: center; gap: 7px; padding: 6px 13px; min-height: 40px; border-radius: 5px;
  color: rgba(253, 248, 245, .86); font: 600 15px var(--sans); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; }
.menu a:hover { background: rgba(253, 248, 245, .1); color: var(--blanco); }
.menu a[aria-current="page"] { color: var(--blanco); background: rgba(253, 248, 245, .14);
  border-bottom-color: var(--dorado); border-radius: 5px 5px 0 0; }
.globo { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--dorado); color: var(--tinta);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }

.etq-prod { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: rgba(253, 248, 245, .14); border: 1px solid rgba(201, 164, 92, .8); color: var(--crema-2);
  font-size: 13px; font-weight: 600; white-space: nowrap; }
.etq-prod::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dorado); }

.sesion { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--rosa); flex: none; }
.enlace { background: none; border: 1px solid rgba(253, 248, 245, .45); color: var(--crema-2); font: 600 14px var(--sans);
  padding: 6px 13px; min-height: 36px; border-radius: 5px; cursor: pointer; }
.enlace:hover { background: rgba(253, 248, 245, .12); }

@media (max-width: 900px) {
  .barra-in { flex-wrap: wrap; padding-bottom: 0; row-gap: 4px; }
  .menu { order: 3; flex: 1 0 100%; margin: 0 -16px; gap: 0; border-top: 1px solid rgba(253, 248, 245, .18); }
  .menu a { flex: 1; justify-content: center; border-radius: 0; min-height: 44px; padding: 6px; }
  .menu a[aria-current="page"] { border-radius: 0; }
  .sesion { margin-left: auto; }
}
@media (max-width: 560px) {
  .marca img { height: 28px; }
  .zona-admin { font-size: 16px; padding-left: 10px; }
  .sesion #quien { display: none; }
  .etq-prod { order: 2; font-size: 12px; padding: 3px 9px; }
}

/* ───────────────────────── pie (el de afcripto.com, en una franja) */
.pie { background: var(--granate); color: rgba(255, 255, 255, .72); border-top: 2px solid var(--dorado); font-size: 13px; }
.pie-in { padding: 6px 16px; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.pie-marca { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--blanco); line-height: 1.2; }
.pie-enlaces { display: flex; gap: 14px; margin-left: auto; }
.pie a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.pie a:hover, .pie a:focus-visible { color: var(--blanco); text-decoration: underline; }
.pie a:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 560px) { .pie-lema { display: none; } .pie-enlaces { margin-left: 0; } }

/* ───────────────────────── botones y campos (los de la zona de usuario, en tamaño de panel) */
.primario, .secundario { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 15px var(--sans); padding: 9px 18px; min-height: 40px; border-radius: 5px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--granate); transition: background .15s; }
.primario { background: var(--granate); color: var(--crema-2); }
.primario:hover { background: var(--granate-osc); }
.primario:disabled, .secundario:disabled { opacity: .55; cursor: not-allowed; }
.primario.ancho { width: 100%; }
.secundario { background: var(--blanco); color: var(--granate); }
.secundario:hover { background: var(--granate-claro); }
.error { color: var(--mal); background: var(--mal-fondo); border-radius: 5px; padding: 8px 12px; margin: 0 0 14px; }
.aviso-caja { color: #5d3d00; background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: 6px;
  padding: 10px 12px; margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ───────────────────────── página de acceso */
body.pagina-acceso { min-height: 100vh; display: flex; flex-direction: column; }
.acceso { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.acceso-caja { width: 100%; max-width: 430px; background: var(--blanco); border: 1px solid var(--granate-claro);
  border-radius: 10px; padding: 30px 28px; box-shadow: var(--sombra); }
.acceso-caja h1 { font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--tinta); margin: 0; line-height: 1.2; }
.acceso-caja .sub { color: var(--suave); margin: 8px 0 22px; }
.acceso-caja label { display: block; font-weight: 600; color: var(--tinta); margin-bottom: 16px; }
.acceso-caja input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: 400 16px var(--sans);
  color: var(--tinta); background: var(--blanco); border: 1px solid var(--rosa); border-radius: 5px; }
.acceso-caja input:focus { outline: 2px solid var(--granate); outline-offset: -1px; border-color: var(--granate); }
.acceso-caja small { display: block; font-weight: 400; color: var(--suave); font-size: 14px; margin-top: 5px; }
.acceso-caja .nota { margin: 18px 0 0; font-size: 14px; color: var(--suave); }
@media (max-width: 520px) { .acceso { padding: 24px 12px; } .acceso-caja { padding: 22px 18px; } .acceso-caja h1 { font-size: 24px; } }