/* El enfoque de una tarea (public/tarea-enfoque.js; lienzo aprobado el 2026-10-07). Solo tokens de Cuarto Oscuro: ningun color, sombra
   ni tamano de letra escrito a mano (paridad-cuarto-oscuro). */

/* El resto del bloque se esconde SOLO si la vista existe y trae algo: si falla o queda vacia, la lista sigue a la vista (falla abierto).
   Nunca `hidden` sobre #diaria: sincDiaria() se lo quita (regla 22 de docs/contexto/inicio-a-la-medida.md). */
:root[data-theme] .ini-top:has(> .ini-enfoque:not([hidden], :empty)) > :not(.ini-enfoque){ display:none; }
.ini-enfoque[hidden]{ display:none; }
.ini-enfoque{ display:grid; grid-template-columns:minmax(0, 340px) minmax(0, 1fr); column-gap:var(--e-7); row-gap:var(--e-5); align-items:start; }
/* La esquina de arriba a la derecha es del asa y del ··· de la tarjeta: el encabezado les deja 56 px (88 con el dedo). */
.enf-cab{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:36px; padding-right:calc(var(--e-6) * 2 - var(--e-2)); }
@media (pointer:coarse){ .enf-cab{ padding-right:calc(var(--e-6) * 3 - var(--e-2)); } }
.enf-cab .btn{ min-height:36px; padding:0 var(--e-3); }
.enf-cab-t{ grid-column:1 / -1; display:flex; flex-direction:column; gap:var(--e-1); }
.enf-titulo{ margin:0; font-size:var(--t-titulo); line-height:1.2; font-weight:500; color:var(--tinta); text-wrap:balance; }
.enf-titulo:focus-visible{ outline:2px solid var(--tinta); outline-offset:4px; border-radius:var(--r); }
.enf-hecha .enf-titulo{ color:var(--medio); text-decoration:line-through; }
.enf-cargando{ color:var(--apagado); font-weight:400; }
.enf-meta{ margin:0; font-size:var(--t-texto); color:var(--medio); }
.enf-crono{ display:flex; flex-direction:column; gap:var(--e-3); }
/* Las cifras no se animan (nada en lo que cuenta): solo cambia el texto de este nodo una vez por segundo. */
.enf-cifras{ font-size:calc(var(--t-saludo) * 2); line-height:1; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--tinta); }
.enf-listo .enf-cifras, .enf-pausa .enf-cifras, .enf-hecha .enf-cifras{ color:var(--medio); }
.enf-estado{ font-size:var(--t-meta); color:var(--medio); }
.enf-aviso{ margin:0; font-size:var(--t-meta); color:var(--medio); }
.enf-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }
.enf-acciones .btn{ min-height:44px; }
.enf-txt{ min-height:44px; padding:0 var(--e-3); border:0; background:transparent; color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer; border-radius:var(--r-pildora); }
@media (hover:hover){ .enf-txt:hover{ color:var(--tinta); } }
.enf-info{ display:flex; flex-direction:column; gap:var(--e-4); min-width:0; }
.enf-fila{ display:grid; grid-template-columns:104px minmax(0, 1fr); column-gap:var(--e-3); }
.enf-et{ color:var(--medio); font-size:var(--t-texto); }
.enf-val{ color:var(--texto); font-size:var(--t-texto); line-height:1.5; min-width:0; overflow-wrap:anywhere; }
.enf-val b{ font-weight:500; color:var(--tinta); }
.enf-urge{ color:var(--urge); }
.enf-notas{ white-space:pre-wrap; }
.enf-corta{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.enf-mas{ min-height:32px; padding:0; }
.enf-subs{ display:flex; flex-direction:column; gap:var(--e-1); }
.enf-sub{ display:flex; align-items:center; gap:var(--e-3); min-height:32px; cursor:pointer; }
.enf-sub.on span{ color:var(--medio); text-decoration:line-through; }
:root[data-theme] .enf-sub.on .diaria-box{ background:var(--boton); border-color:var(--boton); }
:root[data-theme] .enf-sub.on .diaria-box::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--boton-t); border-width:0 1.6px 1.6px 0; transform:rotate(42deg); }
.enf-sig{ grid-column:1 / -1; margin:0; font-size:var(--t-texto); color:var(--medio); }
/* Region de anuncios para el lector de pantalla: solo dice los cambios (en marcha, en pausa), jamas cada segundo. */
.enf-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@container ini-pagina (max-width:700px){
  .ini-enfoque{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:560px){
  .enf-acciones .btn{ flex:1 1 100%; }
  .enf-fila{ grid-template-columns:minmax(0, 1fr); row-gap:2px; }
  .enf-cab .btn{ min-height:44px; }
}
@media (prefers-reduced-motion:no-preference){
  .ini-enfoque:not([hidden]){ animation:enf-entra var(--d-toque) var(--curva-entra) both; }
}
@keyframes enf-entra{ from{ opacity:0; } to{ opacity:1; } }

/* La puerta de la fila: el mismo gesto que el kebab. El boton SIEMPRE se crea (diariaFila no mira el DOM) y solo se muestra dentro del bloque
   del Inicio y en tareas sin hacer; en telefono (<= 860 px) no cabe y la puerta es el item del menu. */
.diaria-enfocar{ display:none; }
:root[data-theme] #ini-tareas-hoy .diaria-fila:not(.hecha) .diaria-enfocar{ display:grid; flex:0 0 28px; height:28px; place-items:center; align-self:center; padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--apagado); cursor:pointer; }
@media (hover:hover){
  :root[data-theme] #ini-tareas-hoy .diaria-fila:not(.hecha) .diaria-enfocar{ opacity:0; }
  :root[data-theme] #ini-tareas-hoy .diaria-fila:is(:hover, :focus-within) .diaria-enfocar{ opacity:1; }
  :root[data-theme] #ini-tareas-hoy .diaria-enfocar:hover{ background:var(--tinte-toque); color:var(--tinta); }
}
@media (hover:none){ :root[data-theme] #ini-tareas-hoy .diaria-fila:not(.hecha) .diaria-enfocar{ opacity:.7; } }
@media (max-width:860px){ :root[data-theme] #ini-tareas-hoy .diaria-fila:not(.hecha) .diaria-enfocar{ display:none; } }