/* ============================================
   BookinTrade — Pantalla "Hoy"
   ============================================
   Sistema de diseño v2 «el sabio». Lógica en static/js/hoy.js.
   Celular: una sola columna y el resto del Dashboard plegado.
   Computadora (768px o más, desde el 27 sep 2026): cabecera de dos columnas
   arriba del Dashboard, que sigue completo debajo (hay lugar para todo).

   Regla de seguridad: el resto del Dashboard sólo se pliega si "Hoy" está en
   pantalla (#hoy sin [hidden]). Si "Hoy" no cargó, se ve todo, como siempre.
   ============================================ */

.hoy { display: none; }

@media (max-width: 767px) {
  .hoy:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* 120px abajo: los botones flotantes (accesibilidad, ayuda, privacidad)
       no pueden tapar la última operación ni la acción principal. */
    padding: 8px 4px 120px;
    /* 20px a los lados (antes 4px): la sección pasó de 28px a 12px en celular
       (auditoría responsive, 27 sep 2026). 12 + 20 = los mismos 32px de siempre. */
    padding-left: 20px;
    padding-right: 20px;
    color: var(--color-text-primary);
  }

  /* Plegado: lo demás queda detrás de "Ver todas las métricas" */
  #sec-dashboard:has(#hoy:not([hidden])):not(.hoy-completo) > .kpis-grid,
  #sec-dashboard:has(#hoy:not([hidden])):not(.hoy-completo) > .panel-grafico,
  #sec-dashboard:has(#hoy:not([hidden])):not(.hoy-completo) > #cuenta-panel,
  #sec-dashboard:has(#hoy:not([hidden])):not(.hoy-completo) > .panel:has(#tabla-ultimas) {
    display: none !important;
  }
  /* "Hoy" es siempre de 7 días: el filtro de período sólo tiene sentido con todas las métricas */
  /* !important: navegarA() lo muestra con un estilo en línea (display:flex) */
  html:not(.bt-hoy-completo) #pantalla-app:has(#sec-dashboard.activa #hoy:not([hidden])) #selector-periodo {
    display: none !important;
  }
}

/* La frase del sabio */
.hoy-frase {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.25;
  color: var(--color-text-primary);
}

/* La cifra protagonista (ma) */
.hoy-resultado { display: flex; flex-direction: column; gap: 6px; }
.hoy-etiqueta { font-size: 13px; color: var(--color-text-secondary); }
.hoy-cifra {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
}
.hoy-sub { font-size: 13px; color: var(--color-text-secondary); }

.es-ganancia { color: var(--color-profit); }
.es-perdida { color: var(--color-loss); }
.es-abierta { color: var(--color-text-secondary); font-family: var(--font-sans); font-size: 13px; }

/* El ensō */
.hoy-plan {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.hoy-enso { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.hoy-enso-svg { width: 88px; height: 88px; display: block; }
.hoy-enso-pista { fill: none; stroke: var(--color-border); stroke-width: 2; }
.hoy-enso-trazo { fill: none; stroke: var(--color-text-primary); stroke-width: 8; stroke-linecap: round; }
.hoy-enso-cifra {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 24px;
  font-variant-numeric: lining-nums tabular-nums;
}
.hoy-plan-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hoy-plan-titulo { font-size: 15px; font-weight: 500; }
.hoy-plan-detalle { font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); }
.hoy-plan-detalle a { color: var(--color-accent); }

/* Tres métricas sobrias */
.hoy-metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.hoy-metricas > div { display: flex; flex-direction: column; gap: 2px; }
.hoy-metricas dt { font-size: 12px; color: var(--color-text-secondary); }
.hoy-metricas dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Últimas operaciones */
.hoy-ultimas ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hoy-op {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
}
.hoy-op:last-child { border-bottom: 0; }
.hoy-op-par { font-size: 15px; }
.hoy-op-tipo { font-size: 12px; color: var(--color-text-secondary); }
.hoy-op-res {
  font-family: var(--font-serif);
  font-size: 17px;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* Una sola acción principal */
.hoy-acciones { display: flex; flex-direction: column; gap: 4px; }
.hoy-cta {
  height: 52px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.hoy-cta:hover { background: var(--color-action-hover); }
.hoy-link {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
}
.hoy-link:hover { color: var(--color-text-primary); }

/* Estado vacío */
.hoy-vacio-texto {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Analytics (navegación v2): sólo cuando están abiertas todas las métricas */
.hoy-link-analytics { display: none; }
#sec-dashboard.hoy-completo .hoy-link-analytics { display: block; color: var(--color-accent); }

/* Saldo: total de futuros (realizado); el detalle por exchange al tocar */
.hoy-saldo { display: flex; flex-direction: column; margin-top: -12px; }
.hoy-saldo-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.hoy-saldo-etiqueta { font-size: 13px; color: var(--color-text-secondary); }
.hoy-saldo-nota { color: var(--color-text-tertiary); }
.hoy-saldo-total {
  font-family: var(--font-serif);
  font-size: 22px;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.hoy-saldo-flecha {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease-out;
}
.hoy-saldo-fila[aria-expanded="true"] .hoy-saldo-flecha { transform: rotate(90deg); }
.hoy-saldo-detalle {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px 0 0 12px; /* sangría sola: el brief prohíbe las franjas a la izquierda */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hoy-saldo-detalle li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.hoy-saldo-ex { display: flex; flex-direction: column; gap: 1px; }
.hoy-saldo-cuando { font-size: 12px; color: var(--color-text-tertiary); }
.hoy-saldo-monto { font-family: var(--font-serif); font-size: 17px; font-variant-numeric: lining-nums tabular-nums; }
.hoy-saldo-sin { font-size: 13px; color: var(--color-text-secondary); text-align: right; }
.hoy-saldo-flotante { color: var(--color-text-secondary); padding-top: 6px; border-top: 1px dashed var(--color-border); }
.hoy-saldo-explica { font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .hoy-saldo-flecha { transition: none; } }
/* display:flex le ganaba al atributo hidden: el detalle quedaba siempre abierto */
.hoy-saldo-detalle[hidden] { display: none; }

/* ── Computadora: cabecera editorial de dos columnas ───────────────────
   Izquierda (lo que pasó): frase, resultado, saldo.
   Derecha (lo que sigue): el ensō, tres métricas y la pre-sesión.
   Asimetría a propósito (fukinsei): la columna de la cifra es más ancha.
   Las últimas operaciones no se repiten: la tabla completa está debajo. */
@media (min-width: 768px) {
  .hoy:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
      "frase     plan"
      "resultado plan"
      "resultado metricas"
      "saldo     acciones";
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(32px, 6vw, 88px);
    row-gap: 20px;
    padding: 8px 0 36px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
  }
  .hoy-frase { grid-area: frase; font-size: 26px; }
  .hoy-resultado, .hoy-vacio { grid-area: resultado; }
  .hoy-saldo { grid-area: saldo; margin-top: 0; max-width: 420px; }
  .hoy-plan { grid-area: plan; }
  .hoy-metricas { grid-area: metricas; }
  .hoy-acciones { grid-area: acciones; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; align-self: start; }
  .hoy-cifra { font-size: clamp(56px, 6vw, 80px); }
  .hoy-cta { height: 46px; padding: 0 28px; }
  .hoy-ultimas,
  .hoy [data-hoy-accion="completo"] { display: none; }
  /* Sin "Ver todas las métricas", el análisis por activo queda siempre a mano */
  .hoy-link-analytics { display: inline-block; color: var(--color-accent); }
}