/* ═══════════════════════════════════════════════════════════════════════════
   publico.css — Tema COMPARTIDO de las páginas fuera del dashboard.

   POR QUÉ EXISTE
     El dashboard es crema claro (#F5F3EE) y las páginas de acceso —login,
     registro, suscripción, soporte— eran azul marino oscuro (#060912). Un
     visitante veía la página pública en claro, hacía clic en "Crear cuenta" y
     aterrizaba en algo que parecía otro producto. En un sitio que va a cobrar
     dinero, esa incoherencia se lee como poco serio.

     Cada página traía su propia paleta copiada dentro. Con seis copias, el día
     que se cambie un color quedan seis verdades distintas. Aquí hay UNA.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bg:      #F5F3EE;
    --panel:   #FFFDF8;
    --border:  #E0DCD2;
    --texto:   #33291B;
    --suave:   #5E5949;
    --tenue:   #8A8478;
    --acento:  #7ecb20;
    --verde:   #0F9D6B;
    --rojo:    #C33B34;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--texto);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    min-height: 100vh;
}

a { color: var(--suave); }

/* ── Marca ──────────────────────────────────────────────────────────────── */
/* El logotipo oficial (MANUAL_DE_IDENTIDAD §2, elegido el 2026-09-17): el
   simbolo (la A como cuña con la vela verde) + "ABMTrading" en Archivo
   ExtraBold, tracking -0.016em; "Trading" en el verde de marca. Es la misma
   construccion que static/logo/logotipo-*.svg, en vivo y nitido a cualquier
   tamaño. Las pantallas de acceso lo llevan grande y centrado. */
@font-face {
    font-family: "Archivo";
    src: url("/static/fonts/Archivo-VariableFont.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}
.marca {
    font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
    font-size: 30px; font-weight: 800; letter-spacing: -0.016em; line-height: 1;
    color: var(--texto); display: inline-block; white-space: nowrap;
    text-decoration: none;
}
.marca span { color: var(--acento); }
/* "ABM" y "Trading" van PEGADOS (el color hace la separacion); el hueco solo
   entre el simbolo y la palabra. */
.marca .marca-simbolo { height: 1.2em !important; width: auto; vertical-align: -0.2em; margin: 0 .28em 0 0 !important; }
header .marca { font-size: 22px; }

/* ── Contenedores ───────────────────────────────────────────────────────── */
.pantalla {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 28px 18px;
    /* "safe": si el contenido es mas alto que la ventana (movil, pantalla
       corta), se ancla arriba en vez de recortar el logotipo por encima. */
    justify-content: safe center;
}
.tarjeta-auth {
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    padding: 30px 28px; width: 100%; max-width: 400px;
}
.tarjeta-auth h1 { font-size: 21px; margin-bottom: 6px; }
.tarjeta-auth .intro { color: var(--suave); font-size: 13.5px; margin-bottom: 22px; }

/* ── Formularios ────────────────────────────────────────────────────────── */
label {
    display: block; font-size: 10.5px; color: var(--tenue); font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px;
}
input[type=email], input[type=password], input[type=text], textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--bg); color: var(--texto);
    font-size: 14px; font-family: inherit; margin-bottom: 16px;
}
input:focus, textarea:focus { outline: none; border-color: var(--acento); }
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.btn {
    display: inline-block; width: 100%; padding: 12px 18px; border: 1px solid var(--texto);
    border-radius: 9px; background: var(--texto); color: var(--panel);
    font-size: 14.5px; font-weight: 700; cursor: pointer; text-align: center;
    text-decoration: none; font-family: inherit;
}
.btn:hover { filter: brightness(1.15); }
.btn.secundario { background: transparent; color: var(--texto); border-color: var(--border); }
.btn.acento { background: var(--acento); border-color: var(--acento); color: #14210a; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso {
    border-radius: 9px; padding: 11px 14px; font-size: 13px; margin-bottom: 18px;
    border: 1px solid var(--border); background: var(--bg);
}
.aviso.error { border-color: var(--rojo); color: var(--rojo); background: #fdf3f2; }
.aviso.ok    { border-color: var(--verde); color: var(--verde); background: #f1f9f5; }

/* ── Enlaces del pie de las tarjetas ────────────────────────────────────── */
.enlaces { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
           text-align: center; font-size: 13px; line-height: 2.1; }
.enlaces a { text-decoration: none; }
.enlaces a:hover { text-decoration: underline; }

/* ── Pie legal ──────────────────────────────────────────────────────────── */
.pie-legal {
    margin-top: 26px; font-size: 11px; color: var(--tenue); text-align: center;
    line-height: 1.7; max-width: 620px;
}
.pie-legal a { color: var(--suave); }

.separador { height: 1px; background: var(--border); margin: 20px 0; }
.divisor-o {
    display: flex; align-items: center; gap: 12px; margin: 16px 0;
    color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
}
.divisor-o::before, .divisor-o::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}