/* Etapa 2 de la transformacion (2026-10-25): rediseño de hoy. Solo reglas de esta pantalla.
   «Un diario de la mañana»: portada con UNA frase y UN número; debajo, lo que pide atención hoy
   (tarjetas priorizadas, o «Todo en orden»); la actividad de la sesión; y «tu mes» plegado.
   Reglas: la marca abraza (portada, acciones), la alarma avisa (rojo semántico CON forma: ▲ ⚠ ▼ y
   borde rayado, nunca solo color). */

/* [hidden] contra una clase con display propio NO esconde: se fuerza dentro de la pantalla. */
#vista-hoy [hidden]{ display:none !important; }

#vista-hoy{
  display:flex; flex-direction:column; gap:var(--sp-5);
  padding-top:var(--sp-4);
}

/* ---------------------------------------------------------------- Portada */
.hoy-portada{
  position:relative; overflow:hidden;
  background:var(--marca-tenue);
  border:1px solid color-mix(in srgb, var(--marca) 25%, var(--line));
  border-left:6px solid var(--marca);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  min-width:0;
}
.hoy-portada__sello{
  position:absolute; right:-14px; top:-10px; width:132px; height:132px;
  object-fit:contain; opacity:.1; pointer-events:none;
}
.hoy-portada__kicker{ position:relative; color:var(--marca-ink); margin-bottom:var(--sp-4); }
.hoy-portada__nota{ position:relative; margin-top:var(--sp-2); color:var(--ink-2); font-size:15px; }
.hoy-frase{
  position:relative; margin:0;
  font-family:var(--font-marca); font-weight:400; color:var(--ink-2);
  font-size:clamp(24px, 6.6vw, 30px); line-height:1.15; letter-spacing:-.01em;
}
#vista-hoy .hoy-cifra{
  position:relative; margin:2px 0 0; color:var(--ink);
  font-size:clamp(50px, 15vw, 64px); line-height:1;
  overflow-wrap:anywhere;
}
#vista-hoy .hoy-cifra[data-largo="media"]{ font-size:clamp(44px, 12.5vw, 56px); }
#vista-hoy .hoy-cifra[data-largo="larga"]{ font-size:clamp(34px, 10vw, 46px); }
.hoy-cifra__forma{ font-size:.5em; vertical-align:.18em; margin-right:.2em; font-family:var(--font-sis); }
.hoy-portada--perdida{ border-left-color:var(--neg); background:color-mix(in srgb, var(--neg) 7%, var(--paper)); }
.hoy-portada--perdida .hoy-cifra{ color:var(--neg); }
.hoy-portada--perdida .hoy-portada__kicker{ color:var(--neg); }
.hoy-spark{ position:relative; margin-top:var(--sp-4); }
.hoy-portada .lede{ position:relative; margin-top:var(--sp-4); font-size:17px; }
.hoy-portada .enlace-profundizar{
  display:inline-flex; align-items:center; min-height:44px; margin-top:0;
}

/* ---------------------------------------------------------------- Atención */
.hoy-atencion{ min-width:0; }
.hoy-atencion__titulo{
  font-family:var(--font-marca); font-weight:400; font-size:22px; line-height:1.2;
  margin:0 0 var(--sp-3); color:var(--ink);
}
.hoy-atencion__lista{ display:flex; flex-direction:column; gap:var(--sp-3); }
.atn-grupo{ display:flex; flex-direction:column; gap:var(--sp-3); }
.atn-grupo > .tarjeta-seguimiento{ margin:0; }
.atn-grupo__rotulo{
  font-size:var(--t-kicker); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:var(--sp-2) 0 calc(var(--sp-1) * -1);
}
.atn-caja{ display:block; }

.atn{
  position:relative; display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-left-width:4px;
  border-radius:var(--r-md); padding:var(--sp-4); margin:0; min-width:0;
}
.atn__marca{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; line-height:1; background:var(--paper-2); color:var(--ink-2);
}
.atn__cuerpo{ flex:1; min-width:0; }
.atn__rotulo{
  font-size:var(--t-kicker); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 var(--sp-2);
}
.atn__titulo{
  font-family:var(--font-marca); font-weight:420; font-size:18px; line-height:1.28; margin:0;
  color:var(--ink); text-wrap:balance;
}
.atn__texto{ font-size:14px; line-height:1.45; color:var(--ink-2); margin:var(--sp-1) 0 0; }
.atn__monto{ font-family:var(--font-marca); font-size:26px; line-height:1.1; margin:0; color:var(--ink); }
.atn__monto-sub{ font-family:var(--font-sis); font-size:13px; font-weight:400; color:var(--ink-2); }
.atn__pie{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin:var(--sp-2) 0 0; font-size:var(--t-micro); color:var(--ink-3);
}
.atn__botones{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-top:var(--sp-3); }
.atn__botones .boton{ min-height:48px; }

/* La accion principal de la tarjeta: un toque, 48 px, en la marca. */
.atn__accion{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:0 var(--sp-4); margin-top:var(--sp-3);
  border:1px solid var(--marca-ink); border-radius:var(--r-sm);
  color:var(--marca-ink); font-size:14px; font-weight:700; text-decoration:none;
}
.atn__accion:hover{ background:var(--marca-tenue); }
.atn__accion:focus-visible{ outline:3px solid var(--marca-ink); outline-offset:2px; }
.atn__pie .atn__accion{ margin-top:0; min-height:44px; }

/* Urgente: se muere / venció. Borde rojo RAYADO + ⚠ en el rotulo (forma, no solo color). */
.atn--urgente{
  border-color:color-mix(in srgb, var(--neg) 40%, var(--line));
  border-left-width:1px; padding-left:calc(var(--sp-4) + 8px); display:block;
  background:color-mix(in srgb, var(--neg) 5%, var(--surface));
}
.atn--urgente::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:8px;
  border-radius:var(--r-md) 0 0 var(--r-md);
  background:repeating-linear-gradient(135deg, var(--neg) 0 4px, color-mix(in srgb, var(--neg) 35%, var(--surface)) 4px 8px);
}
.atn--urgente .atn__rotulo{ color:var(--neg); }
.atn__cinta{ overflow-x:auto; padding-bottom:var(--sp-1); -webkit-overflow-scrolling:touch; }
.atn__fila{ padding:var(--sp-2) 0 0; }
.atn__fila .fila-accion__info{ min-width:140px; }
.atn__fila .boton{ min-height:48px; }

/* Aviso: precios, margen, se acabó algo. ▲ ambar-rojo. */
.atn--aviso{ border-left-color:var(--neg); }
.atn--aviso .atn__marca{ background:color-mix(in srgb, var(--neg) 14%, var(--surface)); color:var(--neg); font-size:11px; }
/* Bien: el elogio. ✓ verde. */
.atn--bien{ border-left-color:var(--pos); }
.atn--bien .atn__marca{ background:color-mix(in srgb, var(--pos) 14%, var(--surface)); color:var(--pos); }
/* Caja (te deben / yo debo): es plata, no ganancia ni pérdida. Quieto, neutro. */
.atn--caja{ border-left-color:var(--line-fuerte); }
/* Calma: nada que atender; una línea, sin protagonismo. */
.atn--calma{
  background:var(--paper-2); border-left-color:var(--line-fuerte); border-color:var(--line);
  padding:var(--sp-3) var(--sp-4); display:block;
}
.atn--calma::before{ display:none; }
.atn--calma .atn__rotulo{ margin-bottom:var(--sp-1); color:var(--ink-3); }

/* El aviso de margen (nudge) reusa .atn */
.nudge-margen{ border-top:1px solid var(--line); }
.nudge-margen__lede{ font-family:var(--font-marca); font-size:18px; line-height:1.28; margin:0; color:var(--ink); }
.nudge-margen__meta{ font-size:14px; color:var(--ink-2); margin:var(--sp-1) 0 0; }
.nudge-margen__silenciar{
  display:inline-flex; align-items:center; min-height:44px; margin-top:var(--sp-1);
  background:none; border:none; padding:0; color:var(--ink-3); font-size:13px;
  text-decoration:underline; cursor:pointer;
}

/* Todo en orden */
.atn-orden{
  display:flex; gap:var(--sp-4); align-items:center;
  background:var(--marca-tenue); border:1px solid color-mix(in srgb, var(--marca) 25%, var(--line));
  border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-5);
}
.atn-orden__icono{ flex:none; color:var(--marca-ink); display:inline-flex; }
.atn-orden__icono svg{ width:44px; height:44px; }
.atn-orden__titulo{ font-family:var(--font-marca); font-size:26px; line-height:1.1; margin:0; color:var(--ink); }
.atn-orden__texto{ margin:var(--sp-1) 0 0; font-size:15px; color:var(--ink-2); line-height:1.4; }
.hoy-atencion__lista:not(:empty) + .atn-orden:not([hidden]){ margin-top:var(--sp-3); }

/* ---------------------------------------------------------------- Actividad de la sesión */
#vista-hoy > .bloque[data-b="envivo"]{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:var(--sp-4); min-width:0;
}
.hoy-regs{ display:flex; flex-direction:column; }
.hoy-reg{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--sp-3); row-gap:var(--sp-1);
  align-items:baseline; padding:var(--sp-2) 0; border-top:1px solid var(--line); font-size:14px;
}
.hoy-reg:first-child{ border-top:none; }
.hoy-reg__texto{ color:var(--ink-2); overflow-wrap:break-word; min-width:0; }
.hoy-reg__hora{ color:var(--ink-3); font-size:13px; margin-right:var(--sp-1); }
.hoy-reg__monto{ font-weight:600; white-space:nowrap; text-align:right; }
.hoy-reg__monto small{ display:block; font-size:11px; font-weight:400; color:var(--ink-3); }
.hoy-reg__monto--compra{ color:var(--ink-3); }
.hoy-reg__acciones{ grid-column:1 / -1; display:flex; gap:var(--sp-2); justify-content:flex-end; align-items:center; }
.hoy-reg__boton{ min-height:44px; padding:0 var(--sp-3); font-size:13px; }
.hoy-reg__estado{ font-size:13px; color:var(--ink-3); white-space:nowrap; }
.hoy-neto{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3);
  border-top:1px solid var(--line-fuerte); margin-top:var(--sp-3); padding-top:var(--sp-3);
}
.hoy-neto__rotulo{ font-size:14px; color:var(--ink-2); }
.hoy-neto__valor{ font-family:var(--font-marca); font-size:22px; font-weight:500; white-space:nowrap; }
#vista-hoy [data-b="envivo"] .boton--bloque{ min-height:48px; }

/* ---------------------------------------------------------------- Tu mes, plegado */
.hoy-semana{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); min-width:0;
}
.hoy-semana__resumen{
  list-style:none; cursor:pointer; min-height:56px; padding:var(--sp-3) var(--sp-4);
  display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:var(--sp-3);
  font-family:var(--font-marca); font-size:19px; color:var(--ink);
}
.hoy-semana__resumen::-webkit-details-marker{ display:none; }
.hoy-semana__resumen::after{
  content:"+"; grid-row:1 / span 2; grid-column:2; font-family:var(--font-sis); font-size:24px;
  color:var(--marca-ink); width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.hoy-semana[open] > .hoy-semana__resumen::after{ content:"\2212"; }
.hoy-semana__resumen small{ grid-column:1; font-family:var(--font-sis); font-size:var(--t-micro); color:var(--ink-3); }
.hoy-semana__resumen:focus-visible{ outline:3px solid var(--marca-ink); outline-offset:-3px; border-radius:var(--r-md); }
.hoy-semana__cuerpo{ padding:0 var(--sp-4) var(--sp-4); display:flex; flex-direction:column; min-width:0; }
.hoy-semana__cuerpo > .bloque{ padding:var(--sp-5) 0; min-width:0; }
.hoy-semana__cuerpo > .bloque:first-child{ border-top:1px solid var(--line); padding-top:var(--sp-5); }

/* ---------------------------------------------------------------- Escritorio */
@media (min-width:1000px){
  #vista #vista-hoy.ws-grid{
    display:grid; gap:var(--sp-5) var(--sp-6); padding-top:var(--sp-2);
    grid-template-columns:minmax(0, 1.25fr) minmax(360px, 1fr);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
      "portada atencion"
      "envivo  atencion"
      "semana  semana";
    align-items:start;
  }
  #vista #vista-hoy [data-b="titular"]{ grid-area:portada; }
  #vista #vista-hoy [data-b="atencion"]{ grid-area:atencion; }
  #vista #vista-hoy > [data-b="envivo"]{ grid-area:envivo; }
  #vista #vista-hoy > .hoy-semana{ grid-area:semana; }
  /* El panel del titular de workspace.css (neumorphism) no aplica: la portada es de la marca. */
  #vista #vista-hoy > .hoy-portada{ padding:var(--sp-7) var(--sp-7) var(--sp-6); box-shadow:none; }
  .hoy-portada__sello{ width:200px; height:200px; right:-20px; top:-20px; }
  .hoy-frase{ font-size:34px; }
  #vista-hoy .hoy-cifra{ font-size:clamp(64px, 6.2vw, 88px); }
  #vista-hoy .hoy-cifra[data-largo="media"]{ font-size:clamp(56px, 5.4vw, 76px); }
  #vista-hoy .hoy-cifra[data-largo="larga"]{ font-size:clamp(44px, 4.4vw, 60px); }
  .hoy-spark{ max-width:420px; }
  .hoy-spark svg{ width:160px; height:28px; }
  /* Fiado y deuda, que en movil viven en la portada, aqui tambien entran a la columna de atencion
     (antes solo estaban como globo en el sidebar). */
  #vista-hoy .lista-movil{ display:block; }
  .hoy-atencion__titulo{ font-size:24px; }
  .hoy-semana__cuerpo{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 var(--sp-7);
  }
  /* 2026-10-26, captura de America: workspace.css le pone grid-area por nombre a [data-b="subsidio"],
     [data-b="margen"], etc. sin limitarlo a su pantalla. Aca esas areas no existen, y cada nombre
     suelto se vuelve un area implicita: los bloques caian uno encima del otro. Se colocan en orden. */
  .hoy-semana__cuerpo > .bloque{ grid-area:auto; }
  .hoy-semana__cuerpo > [data-b="waterfall"], .hoy-semana__cuerpo > [data-b="tendencia"]{ grid-column:1 / -1; }
  .hoy-semana__cuerpo > .bloque{ border-top:1px solid var(--line); }
}

/* ---------------------------------------------------------------- Movimiento */
@media (prefers-reduced-motion:reduce){
  .atn__accion, .hoy-semana__resumen{ transition:none; }
}
#vista-hoy [data-b="envivo"] .estado-vacio{ padding:0; text-align:left; }
#vista-hoy [data-b="envivo"] .estado-vacio p{ margin:0; }