/* marca.css — sistema de diseño de Picaflor.
   La paleta NO es inventada: sale de los píxeles de los logos originales (el del v1 y el de Perps).

   ⭐ EL PRINCIPIO QUE MANDA: la restricción visual es una característica de seguridad.
   El degradé de marca se usa SÓLO en el logo y en un acento por pantalla. El color de los datos
   significa UNA cosa y siempre la misma: verde = a favor, magenta = en contra, ámbar = atención.
   Si todo brilla, nada avisa — y acá lo que avisa es plata de verdad.

   ⭐ Y LA SEMÁNTICA YA VENÍA EN LA MARCA: el logo de Perps pinta LONG en verde y SHORT en magenta.
   El producto y la identidad hablan el mismo idioma, así que no hubo que elegir colores nuevos. */

:root {
  /* ── marca ── */
  --pf-verde:   #39C675;
  --pf-teal:    #31CD9C;
  --pf-cyan:    #11D2EE;
  --pf-violeta: #7F16E9;
  --pf-magenta: #EB14A8;
  --pf-degradado: linear-gradient(90deg, #39C675, #11D2EE 40%, #7F16E9 75%, #EB14A8);

  /* ── superficie (dark-first: son sesiones largas mirando números) ── */
  --fondo:      #0C011C;   /* el violeta casi negro del logo original */
  --panel:      #150C24;
  --panel-alto: #1D1330;
  --borde:      #2C2140;
  --borde-sutil:#221831;

  /* ── texto ── */
  --texto:      #ECE9F3;
  --texto-medio:#A79FBC;
  --texto-tenue:#6E6683;

  /* ── estado: el ÚNICO uso legítimo del color fuerte en los datos ── */
  --favor:      #39C675;
  --favor-piso: rgba(57,198,117,.12);
  --contra:     #F0387E;
  --contra-piso:rgba(240,56,126,.12);
  --atencion:   #E3A008;
  --atencion-piso:rgba(227,160,8,.12);

  --radio:   10px;
  --radio-sm: 6px;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ⭐ Los números de una cuenta SIEMPRE en cifras tabulares: si no, las columnas bailan al
   actualizarse y el ojo pierde la referencia entre una fila y la siguiente. */
.num, td.num, .cifra {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

/* ── marca ── */
.marca { display: flex; align-items: center; gap: 11px; }
.marca img { width: 34px; height: 30px; display: block; }
.marca .nombre {
  font-size: 19px; font-weight: 600; letter-spacing: 3.5px;
  background: var(--pf-degradado); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── estructura ── */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--borde-sutil);
  background: rgba(12,1,28,.86); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.contenido { max-width: 1180px; margin: 0 auto; padding: 26px 22px 64px; }

.panel {
  background: var(--panel); border: 1px solid var(--borde-sutil);
  border-radius: var(--radio); padding: 18px 20px; margin-bottom: 16px;
}
.panel > h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: .2px;
}
.panel > .ayuda { margin: 0 0 16px; color: var(--texto-tenue); font-size: 13px; }

/* ── etiqueta / valor / acción: la unidad de lectura de todo el panel ── */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px;
          background: var(--borde-sutil); border-radius: var(--radio); overflow: hidden; }
.cifra { background: var(--panel); padding: 15px 17px; }
.cifra .k { display: block; color: var(--texto-tenue); font-size: 12px; letter-spacing: .3px;
            text-transform: uppercase; margin-bottom: 5px; }
.cifra .v { font-size: 21px; font-weight: 600; letter-spacing: -.3px; }
.cifra .nota { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-tenue); }

.favor  { color: var(--favor); }
.contra { color: var(--contra); }
.atencion { color: var(--atencion); }
.tenue  { color: var(--texto-tenue); }

/* ── tablas ── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto-tenue);
  padding: 8px 10px; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--panel);
}
td { padding: 10px; border-bottom: 1px solid var(--borde-sutil); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--panel-alto); }
td.num, th.num { text-align: right; }

/* ── insignias de estado ── */
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
}
.chip.long  { color: var(--favor);  background: var(--favor-piso); }
.chip.short { color: var(--contra); background: var(--contra-piso); }
.chip.neutro{ color: var(--texto-medio); background: rgba(255,255,255,.06); }
/* El trailing armado es la única distinción que se gana con el degradé de marca: es el estado que
   convierte a una posición en candidata a ganancia grande, y no hay otro igual de importante. */
.chip.trail {
  color: #08131A; background: linear-gradient(90deg, var(--pf-teal), var(--pf-cyan));
  font-size: 10.5px; letter-spacing: .5px; margin-left: 6px; vertical-align: 1px;
}
.nota-sub { display: block; font-size: 11.5px; color: var(--texto-tenue); margin-top: 2px; }

/* ── barra de riesgo: el margen y la distancia al stop se ven SIEMPRE, no se buscan ── */
.medidor { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 7px; }
.medidor > i { display: block; height: 100%; border-radius: 3px; background: var(--favor); }
.medidor.tibio > i { background: var(--atencion); }
.medidor.caliente > i { background: var(--contra); }

/* ── botones ── */
.boton {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
  border-radius: var(--radio-sm); border: 1px solid var(--borde);
  background: var(--panel-alto); color: var(--texto); font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.boton:hover { border-color: var(--pf-cyan); }
.boton.primario { border: 0; color: #08131A; background: linear-gradient(90deg, #31CD9C, #11D2EE); }

.vacio { padding: 26px; text-align: center; color: var(--texto-tenue); font-size: 14px; }

@media (max-width: 640px) {
  .contenido { padding: 18px 14px 48px; }
  .oculto-movil { display: none; }
}