/* Fold · «TU DÍA» (tu-dia.js): la tarjeta de arriba al entrar. Solo lo que no trae estilos.css; los mismos tokens. */
.tu-dia { margin: 0 0 14px; padding: 14px 16px; background: var(--grafito); border: 1px solid var(--costura); border-left: 3px solid var(--cobalto); border-radius: var(--r-control); display: grid; gap: 10px; color: var(--papel); }
.tu-dia[hidden] { display: none; }
.tu-dia-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.tu-dia-cabecera h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.tu-dia-fecha { color: var(--papel-tenue); font-size: .88rem; font-variant-numeric: tabular-nums; flex: 1 1 auto; }
.tu-dia h3 { margin: 0 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--papel-tenue); font-weight: 600; }
.tu-dia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tu-dia li { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.tu-dia-hora { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 8px; white-space: nowrap; }
.tu-dia-detalle { display: block; font-size: .84rem; color: var(--papel-apagado); }
.tu-dia-con { font-size: .84rem; color: var(--papel-apagado); }
.tu-dia-nada { margin: 0; color: var(--papel-apagado); }
.tu-dia details summary { cursor: pointer; min-height: 28px; padding-block: 4px; box-sizing: border-box; font-size: .84rem; color: var(--papel-apagado); }
.tu-dia-ajustes { display: grid; gap: 8px; margin-top: 8px; font-size: .88rem; }
.tu-dia-ajustes label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tu-dia-ajustes select { font: inherit; color: var(--papel); background: var(--grafito); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); height: 36px; padding: 0 8px; }
.tu-dia-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* M14 (demo de Elian, 05/10/2026), solo en un Fold en local (html.tf-local, lo pone tu-fold.js): la tarjeta va ANTES
   del hilo, así que se quedaba con la fila 1fr de .charla (estilos.css) y el hilo, con las respuestas, en una franja.
   Con la tarjeta a la vista, la fila que crece es la del hilo; la tarjeta nunca pasa del 40 % del alto (si tiene más,
   se desplaza dentro) y, recogida tras la primera pregunta (tu-dia.js), deja solo su cabecera. */
html.tf-local .charla:has(> .tu-dia:not([hidden])) { grid-template-rows: auto minmax(0, 1fr); }
html.tf-local .tu-dia { max-height: 40vh; max-height: 40dvh; overflow-y: auto; }
@media (max-width: 640px) { html.tf-local .tu-dia { max-height: 26vh; max-height: 26dvh; } }   /* en el móvil la cabecera ya ocupa dos filas */
html.tf-local .tu-dia.tu-dia-recogida { padding-top: 8px; padding-bottom: 8px; margin-bottom: 8px; }
html.tf-local .tu-dia.tu-dia-recogida > :not(.tu-dia-cabecera) { display: none; }

/* core-50 (21/10/2026): EL PLAN DEL DÍA (tu-dia.js, plegado en la tarjeta). Las citas con su hora fija; las tareas dentro de su
   hueco libre, con el porqué de su puesto y sus botones (que envuelven en el móvil). Una cita «hecha» en el plan, atenuada. */
.tu-dia-plan > summary { font-weight: 600; color: var(--papel); }
.tu-dia-plan ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.tu-dia-plan-hueco > ol { margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--costura); }
.tu-dia-plan h4 { margin: 10px 0 4px; font-size: .84rem; font-weight: 600; color: var(--papel-apagado); }
.tu-dia-plan .tu-dia-acciones { gap: 2px 12px; margin-top: 2px; }
.tu-dia-plan .tu-dia-acciones .enlace-discreto { min-height: 32px; }
.tu-dia-plan-hecha { opacity: .7; }

/* «TU DIAGNÓSTICO» (02/11/2026, tu-dia.js › botonDiagnostico): en la cabecera, a la vista aunque la tarjeta esté recogida. Un enlace
   con forma de botón pequeño (abre la hoja para guardar en PDF en otra ventana); 44 px de alto para el dedo (también recogida) y foco visible. */
.tu-dia-diagnostico { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: var(--r-control);
  background: var(--cobalto); color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tu-dia-diagnostico:hover { background: var(--cobalto-hover); }
.tu-dia-diagnostico:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
/* Con la cabecera de «calma» (calma.css: la línea plegable ocupa todo el ancho), el botón iría a una segunda fila que la tarjeta
   recogida no enseña. Va en la MISMA fila, a la derecha de la línea; en un móvil estrecho se calla el resumen para que quepa. */
.tu-dia > .tu-dia-cabecera:has(.tu-dia-diagnostico) { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tu-dia > .tu-dia-cabecera:has(.tu-dia-diagnostico) > h2 { flex: 1 1 auto; min-width: 0; }
.tu-dia > .tu-dia-cabecera > .tu-dia-diagnostico { flex: none; margin-right: 12px; }
@media (max-width: 560px) { .tu-dia > .tu-dia-cabecera:has(.tu-dia-diagnostico) .tu-dia-resumen { display: none; } .tu-dia > .tu-dia-cabecera > .tu-dia-diagnostico { margin-right: 8px; padding-inline: 10px; } }