@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Fira+Code:wght@400;500&display=swap');

/* ══ La paleta: TODO el tema vive aquí ══ */
:root {
    --fondo:       #020617;   /* OLED profundo (antes #0d1117) */
    --panel:       #0e1223;   /* tarjetas que flotan (antes #161b22) */
    --borde:       #334155;   /* borde más presente (antes #2d333b) */
    --texto:       #e6edf3;
    --texto-suave: #8b949e;
    --acento:      #f0a500;   /* ámbar ARAMAR */
    --verde:       #3fb950;
    --rojo:        #f85149;
    --cinta:       #05080f;   /* la cinta de precios: más oscura que el panel */
    --ancho:       1250px;    /* el ancho de la portada: una sola cifra manda en todo */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: linear-gradient(180deg, var(--fondo), #010409);
    min-height: 100vh;
    color: var(--texto);
}

/* ══ Estructura (tu esqueleto, intacto) ══ */
.pag {
    display: flex;
    flex-direction: column;   /* la página apila sus bloques; en 'row' se ponen todos en fila */
    align-items: flex-start;
    margin: 30px;
    gap: 18px;
}
h1 {
    align-self: center;
    font-weight: 800;
    letter-spacing: .03em;
    margin: 10px 0 0;
}
.subtitulo {
    align-self: center;
    color: var(--texto-suave);
    margin: 20px 0 0 0 ;
}

/* ══ La cabecera del vigía: la cabina desde la que se mira ══ */
/* La fila de la PORTADA: marca a la izquierda y gráfico a la derecha, hombro con hombro.
   Solo la usa portada.html; el resto de páginas siguen apilando en .pag (columna). */
.portada-cols {
    align-self: stretch;          /* ocupa todo el ancho de la página */
    display: flex;
    flex-wrap: wrap;              /* en pantallas estrechas, uno debajo del otro */
    align-items: flex-start;
    gap: 32px;
}
.masthead {
    flex: 1 1 480px;              /* se queda el espacio libre; 480px es su suelo */
    max-width: var(--ancho);
    margin: 24px 0 8px 24px;
}

/* ══ El lockup de marca: el fénix y el nombre, una sola pieza ══
   Dos columnas que se apilan solas en móvil (flex-wrap). */
.lockup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}
.lockup-texto { min-width: 0; }   /* deja que el texto encoja en vez de desbordar */

/* El emblema: el ave es la luz de la marca, así que emite luz.
   El halo ámbar lo funde con el fondo en vez de dejarlo pegado como una foto. */
.emblema {
    width: clamp(88px, 13vw, 132px);   /* escala con la ventana, sin media queries */
    height: auto;
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--borde),
                0 0 42px -10px rgba(240, 165, 0, .55);
}

/* La etiqueta de sistema: mono, como los datos del bot */
.eyebrow {
    margin: 0;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: .72em;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.eyebrow .sep { color: var(--acento); }   /* el punto: el único ámbar de la línea */

/* El nombre: el hero de la página */
.masthead .marca {
    align-self: auto;             /* gana al align-self:center del h1 global */
    margin: .12em 0 0;
    font-size: clamp(2.6rem, 9vw, 5.5rem);   /* escala con la ventana, sin media queries */
    font-weight: 800;
    letter-spacing: -.03em;       /* apretado: los titulares grandes piden menos aire */
    line-height: .95;
}

.lema {
    margin: .7em 0 0;
    max-width: 46ch;              /* medida de lectura: ni una línea kilométrica */
    font-family: 'Fira Code', Consolas, monospace;
    font-size: .8em;
    color: var(--texto-suave);
}

/* ══ SIGNATURE: la línea de horizonte ══
    Un mirador vigila un horizonte. Se enciende en el ámbar de la marca
   y se apaga hacia la derecha: luz que nace en un punto y se difumina. */
.horizonte {
    height: 1px;
    margin: 26px 0 0;
    background: linear-gradient(90deg,
                var(--acento) 0%,
                var(--acento) 18%,
                var(--borde) 55%,
                transparent 100%);
}

/* ══ Los instrumentos: la navegación de la cabina ══
    Apagados en reposo; el ámbar se gana al apuntar. El subrayado que crece
   rima con la línea de horizonte: las dos son luz sobre una línea. */
.instrumentos {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 14px;
}
.instrumentos a {
    padding: 6px 2px;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: .82em;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
    border-bottom: 2px solid transparent;   /* el hueco ya existe: al iluminarse nada salta */
    transition: color .18s, border-color .18s;
}
.instrumentos a:hover {
    color: var(--acento);
    border-bottom-color: var(--acento);
    text-decoration: none;                  /* gana al subrayado global de a:hover */
}
.instrumentos a:focus-visible {             /* quien navega con teclado también ve dónde está */
    outline: 2px solid var(--acento);
    outline-offset: 4px;
    border-radius: 3px;
}
.presentacion { align-self: center; max-width: 600px; height: auto; border-radius: 12px; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/*== Enlaces ==*/
.enlaces{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 20%;
    height: 5vh;
    font-size: 1.2em;
}

/* ══ El gráfico de velas ══
   La columna derecha de la portada, alta para que las velas respiren. */
.grafico {
    box-sizing: border-box;      /* el alto incluye el relleno de la tarjeta */
    display: flex;               /* columna: cabecera arriba, lienzo estirándose, pie abajo */
    flex-direction: column;
    flex: 0 1 30%;               /* la columna derecha: estrecha, formato terminal */
    min-width: 340px;
    min-height: 650px;
    margin: 90px 120px 24px 0;    /* arriba: lo baja | derecha: aire hasta el borde */
}
.grafico-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.grafico-cabecera h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.lienzo {
    display: block;               /* un SVG en línea deja un hueco fantasma debajo */
    width: 100%;
    flex: 1 1 auto;               /* se come todo el alto libre de la tarjeta */
    min-height: 0;                /* sin esto, un hijo flex se niega a encoger de su contenido */
}
.grafico-pie {
    margin: 8px 0 0;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: .72em;
    color: var(--texto-suave);
}

/* ══ La cinta de precios: de borde a borde de la pantalla ══
   Vive fuera de .pag, así que no la afectan sus márgenes: ocupa el 100% real. */
.ticker {
    width: 100%;
    overflow: hidden;             /* lo que sale del marco no se ve: eso crea el efecto cinta */
    padding: 12px 0;
    background: var(--cinta);     /* más oscura que las tarjetas: se hunde en el fondo */
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}
.cinta {
    display: inline-flex;
    gap: 38px;
    white-space: nowrap;
    animation: correr 70s linear infinite;
}
/* Como el contenido va DOS veces, al desplazar el 50% la segunda copia
   cae justo donde empezó la primera: el bucle no se nota. */
@keyframes correr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ticker:hover .cinta { animation-play-state: paused; }   /* parar para poder leer */
.cotiza {
    font-family: 'Fira Code', Consolas, monospace;
    font-size: .78em;
    letter-spacing: .04em;
}

/* ══ La tarjeta: cada bloque, un panel flotante ══
   NEUTRA a propósito: la usan TODAS las páginas (tablas de resumen, operaciones,
   estado, gráfico...). Aquí solo va el aspecto; el tamaño y la posición los pone
   cada clase concreta (.grafico, .tabla...). Tocar medidas aquí descoloca el sitio entero. */
.card {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    max-width: 100%;
    overflow-x: auto;    /* si el contenido desborda, scroll DENTRO de la tarjeta */
}

/* ══ Tablas ══ */
table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;   /* dígitos de ancho fijo: columnas alineadas */
}
th, td {
    padding: 8px 14px;
    text-align: right;
    border-bottom: 1px solid var(--borde);
}
td {
    font-family: 'Fira Code', Consolas, monospace;   /* los datos, en mono: look terminal */
    font-size: .9em;
    white-space: nowrap;   /* una celda jamás se parte; para eso está el scroll de la tarjeta */
}
th {
    color: var(--texto-suave);
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .09em;
}
tr:last-child td { 
    border-bottom: none; 
}
tr:hover td { 
    background: rgba(255, 255, 255, .035); 
}

.centrada { align-self: center; }
.win  { 
    color: var(--verde); 
}
.loss { 
    color: var(--rojo); 
}

/* ══ Formulario y botones ══ */
form {
    display: flex;
    align-items: center;
    gap: 8px;
}
input, select, .btn-border, button {
    background: var(--panel);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: .85em;
}
input:focus, select:focus { 
    outline: 2px solid var(--acento); 
    outline-offset: -1px; 
}
button, .btn-border { 
    cursor: pointer; 
    transition: all .15s; 
}
button:hover, .btn-border:hover {
    background: var(--acento);
    color: #111;
    border-color: var(--acento);
}

/* ══ Bloque de información ══ */
.informacion { 
    display: flex; 
    flex-direction: 
    column; align-items: 
    flex-start; 
}
.operaciones { 
    display: flex; 
    flex-direction: column; 
}
.operaciones span, .pnl span {
    font-size: 1.2em; 
}
.operaciones b { 
    font-size: 1em; 
    margin: 5px 30px; 
}

/* ══ Tablas de la página operaciones ══ */
th a { color: inherit; }
th a:hover { color: var(--acento); text-decoration: none; }

/* ══ Tablas de la página resumen ══ */
.tablas {
    display: flex;
    flex-wrap: wrap;          /* si no caben, salto de línea */
    justify-content: center;  /* los de cada fila, centrados */
    align-self: center;
    gap: 25px;
    max-width: 80%;          /* jamás más ancho que la ventana */
}
.estrategia { 
    display: flex; 
    flex-direction: column; 
}


/* Pantallas de menos de 700px de ancho (móviles) */
@media (max-width: 700px) {
    .pag { margin: 12px; }         /* menos margen: cada píxel cuenta */
    th, td { padding: 6px 8px; }   /* celdas más compactas */
    /* El dedo no es un ratón: 44px de alto mínimo para tocar sin fallar */
    .instrumentos a { padding: 13px 6px; }
    /* en vertical no hay "ancho que quede": el gráfico ocupa todo y no se va a la derecha */
    .grafico { flex: 1 1 100%; min-width: 0; min-height: 340px; margin: 10px 0 20px; }
    .masthead { margin-left: 0; }
}

/* Respeto a "reducir movimiento" del sistema del visitante:
   quien lo tenga activado ve la cinta quieta, con los precios igual de legibles. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}