/* «Mi tiempo»: Pomodoro y rutinas. Reutiliza la pantalla de cronómetro (.pantalla-crono) y sus controles. */
.icono.tomate { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="14" r="7"/><path d="M12 7c0-2 1-3.5 3-3.5M8.5 7.5 12 9l3.5-1.5"/></svg>'); }
.icono.rutina { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3.5 6 1.5 1.5L8 4.5M3.5 12l1.5 1.5L8 10.5M3.5 18l1.5 1.5L8 16.5M11 6h9.5M11 12h9.5M11 18h9.5"/></svg>'); }
.icono.campana { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16v-5a6 6 0 0 1 12 0v5l2 2H4z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg>'); }
.icono.campana-no { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16v-5a6 6 0 0 1 9.5-4.9M18 11v5l2 2H8"/><path d="M10 20.5a2 2 0 0 0 4 0M3 3l18 18"/></svg>'); }
.icono.calendario { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4M12 13v5M9.5 15.5h5"/></svg>'); }
.icono.borrar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg>'); }
.icono.pausar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M9 5v14M15 5v14"/></svg>'); }
.icono.reanudar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><path d="M7 5l12 7-12 7z"/></svg>'); }
.icono.mas { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>'); }
.icono.saltar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 6l9 6-9 6zM18 6v12"/></svg>'); }

.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn.con-icono .icono { width: 20px; height: 20px; flex: none; }
.btn.mini.con-icono .icono { width: 16px; height: 16px; }

:root[data-tema="oscuro"] .dias-semana label:has(input:checked) { color: var(--sobre-marca, #0f1a14); }

/* Pomodoro: un solo anillo que se llena durante la fase */
.pomodoro .crono-esfera { gap: 8px; --reserva-esfera: 9.5rem; }   /* fase, tarea y «Saltar» van con la esfera */
.pomodoro-fase { margin: 0; font-size: 1rem; }
.pomodoro .anillo-fondo { stroke: var(--borde); stroke-width: 8; }
.pomodoro-avance { stroke: var(--marca); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.pomodoro [data-fase="descanso"] .pomodoro-avance, .pomodoro [data-fase="largo"] .pomodoro-avance { stroke: var(--ok); }
.pomodoro .crono-esfera .btn.enlace { min-height: 44px; }
.pomodoro-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }

/* Rutinas */
.editor-rutina [hidden] { display: none !important; }
.editor-rutina label { margin-top: 6px; }
.rutina-acciones .btn[aria-pressed="false"] { color: var(--suave); }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 10px 0 0; }
.dias-semana legend { padding: 0; margin-bottom: 4px; font-size: .9rem; font-weight: 600; }
.dias-semana label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 1px solid var(--suave); border-radius: 50%; font-weight: 650; cursor: pointer; }
.dias-semana input[type=checkbox] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dias-semana label:has(input:checked) { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca, #fff); }
.dias-semana label:has(input:focus-visible) { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; }
.rutinas-hoy, .lista-rutinas, .rutina-pasos { list-style: none; padding: 0; margin: 0; }
.rutina-hoy, .rutina { padding: 12px 0; border-top: 1px solid var(--borde); }
.rutina-hoy:first-child, .rutina:first-child { border-top: 0; padding-top: 0; }
.rutina-cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rutina-pasos li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.rutina-pasos label { margin: 0; font-weight: 500; cursor: pointer; }
.rutina-pasos input:checked + label { text-decoration: line-through; color: var(--suave); }
.rutina-hoy.completa .rutina-cabecera strong { color: var(--ok); }
.rutina { display: grid; gap: 8px; }
.rutina p { margin: 2px 0; }
.rutina.en-pausa strong { color: var(--suave); }
.rutina-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.rutinas .fila-botones .btn.con-icono { min-height: 48px; }

/* Pomodoro: mapa de actividad del último año (semanas en columnas, de lunes a domingo) */
.mapa-actividad p { margin: 0 0 4px; }
.mapa-scroll { overflow-x: auto; margin: 8px 0 4px; padding-bottom: 6px; overscroll-behavior-x: contain; }
.mapa-scroll:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; }
.mapa-rejilla { --celda: 12px; display: grid; grid-auto-flow: column; grid-template-rows: 14px repeat(7, var(--celda)); grid-auto-columns: var(--celda); gap: 3px; width: max-content; }
.mapa-eje { position: sticky; left: 0; z-index: 1; width: 16px; padding-right: 4px; background: var(--superficie); font-size: .65rem; line-height: var(--celda); color: var(--suave); }
.mapa-mes { font-size: .65rem; line-height: 14px; white-space: nowrap; color: var(--suave); overflow: visible; }
.mapa-celda { display: inline-block; width: var(--celda, 12px); height: var(--celda, 12px); border-radius: 3px; background: color-mix(in srgb, var(--borde) 60%, transparent); outline: 1px solid color-mix(in srgb, var(--texto) 6%, transparent); outline-offset: -1px; }
.mapa-celda[data-nivel="1"] { background: color-mix(in srgb, var(--marca) 30%, var(--superficie)); }
.mapa-celda[data-nivel="2"] { background: color-mix(in srgb, var(--marca) 55%, var(--superficie)); }
.mapa-celda[data-nivel="3"] { background: color-mix(in srgb, var(--marca) 78%, var(--superficie)); }
.mapa-celda[data-nivel="4"] { background: var(--marca); }
.mapa-celda.futuro { visibility: hidden; }
.mapa-rejilla .mapa-celda { cursor: pointer; }
.mapa-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.mapa-pie .mapa-detalle { margin: 0; }
.mapa-leyenda { display: inline-flex; align-items: center; gap: 3px; font-size: .75rem; color: var(--suave); }
.mapa-leyenda .mapa-celda { width: 12px; height: 12px; }

@media (min-width: 900px) {
  .rutina { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .pomodoro-avance { transition: none; } }
@media (forced-colors: active) {
  .mapa-celda { forced-color-adjust: none; outline-color: CanvasText; }
  .pomodoro-avance { stroke: Highlight; }
  .pomodoro .anillo-fondo { stroke: GrayText; }
  .tu-tiempo-nav a.activo, .dias-semana label:has(input:checked) { border-width: 3px; }
}

/* Cronómetro: la actividad actual es un botón para pasarla a otra tarea («Sin asignar» → Planchar) */
.estado-personal .btn.tarea-actual { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px; font-weight: 700; color: var(--marca-2); text-decoration: underline dotted; text-underline-offset: 4px; }
.estado-personal .btn.tarea-actual:has(> .icono) { text-decoration: underline dotted; }
.asignar-tareas { margin-bottom: 12px; }
.asignar-tareas .tarea { min-height: 52px; }

/* Copia de seguridad diaria pendiente: aviso con botón en las pantallas de Mi tiempo */
.copia-pendiente { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; max-width: 520px; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--marca) 45%, var(--borde)); border-radius: 12px; background: color-mix(in srgb, var(--marca) 8%, var(--superficie)); font-size: .9rem; }
.copia-pendiente[hidden] { display: none; }
.copia-diaria { margin-top: 12px; }
.copia-diaria p { margin: 4px 0; }
.selector-tono { margin: 12px 0; }
.selector-tono .fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.selector-tono select { flex: 1 1 180px; }