/* Plantilla de la app (T005): menú lateral, barra superior, contenido y barra inferior del móvil. Solo variables. */

.saltar { position: absolute; left: var(--e-3); top: -100px; z-index: var(--z-aviso); padding: var(--e-2) var(--e-3); border-radius: var(--r-m); background: var(--acento); color: var(--sobre-acento); }
.saltar:focus { top: var(--e-3); }

.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns var(--mov) var(--curva); }
.marco { min-width: 0; display: flex; flex-direction: column; }

/* ---------- menú lateral (PC) ---------- */
.lateral { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--e-3) var(--e-3) var(--e-4); border-right: var(--linea) solid var(--borde); background: var(--fondo); scrollbar-width: thin; }
.lateral-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-1) 0 var(--e-4) var(--e-1); }
.marca { display: inline-flex; align-items: center; gap: var(--e-3); color: var(--texto); font-weight: var(--peso-fuerte); font-size: var(--texto-l); }
.marca:hover { text-decoration: none; }
.marca-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-m); background: var(--acento); color: var(--sobre-acento); flex: none; }
.marca-logo .icono { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-i { display: flex; align-items: center; gap: var(--e-3); min-height: 34px; padding: 0 var(--e-3); border-radius: var(--r-m); color: var(--texto-2); font-size: var(--texto-m); white-space: nowrap; }
.nav-i:hover { background: var(--superficie-hover); color: var(--texto); text-decoration: none; }
.nav-i[aria-current="page"] { background: var(--acento-suave); color: var(--acento-texto); font-weight: var(--peso-fuerte); }
.nav-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-titulo { margin: var(--e-5) var(--e-3) var(--e-2); }
.nav-vacio { padding: 0 var(--e-3); font-size: var(--texto-s); }
.nav--pie { margin-top: auto; padding-top: var(--e-4); }
/* Tus áreas en el menú (F3): su pastilla de color; se ordenan arrastrando */
.nav-area { gap: var(--e-2); padding-left: var(--e-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nav-area[aria-current="page"] { background: var(--superficie-2); color: var(--texto); }
.nav-area--arrastrando { position: relative; z-index: 1; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); cursor: grabbing; }
.nav-nueva { width: 100%; gap: var(--e-2); padding-left: var(--e-2); border: 0; background: none; font: inherit; color: var(--texto-3); cursor: pointer; text-align: left; }
.nav-nueva-icono { display: grid; place-items: center; width: 24px; height: 24px; border: var(--linea) dashed var(--borde-fuerte); border-radius: var(--r-s); flex: none; }
.nav-nueva-icono .icono { width: 14px; height: 14px; }
.nav-nueva:hover { color: var(--texto); }
html.lateral-plegado .nav-area, html.lateral-plegado .nav-nueva { justify-content: center; padding: 0; }

/* Pantalla de un área (F3): cabecera con su color muy suave */
.area-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); padding: var(--e-5); border-radius: var(--r-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--superficie)), var(--superficie) 70%); border: var(--linea) solid color-mix(in srgb, var(--c) 18%, var(--borde)); }
.area-cabecera .pagina-titulos { flex: 1; min-width: 0; }
.area-cabecera .pagina-antes { color: var(--c); }
.area-vacia .vacio { padding-bottom: var(--e-4); }
.area-vacia .vacio-icono { background: color-mix(in srgb, var(--c) 14%, var(--superficie)); color: var(--c); }
@media (max-width: 600px) {
  .area-cabecera { flex-wrap: nowrap; padding: var(--e-4); }
  .area-cabecera .icono-area--l { width: 48px; height: 48px; }
  .area-editar { width: var(--tactil); padding: 0; justify-content: center; }
  .area-editar-texto { display: none; }
}

/* Plegado: solo iconos */
html.lateral-plegado .app { grid-template-columns: 68px minmax(0, 1fr); }
html.lateral-plegado .lateral { padding-left: var(--e-2); padding-right: var(--e-2); }
html.lateral-plegado .lateral-cabecera { flex-direction: column; padding-left: 0; }
html.lateral-plegado .nav-texto,
html.lateral-plegado .nav-titulo,
html.lateral-plegado .nav-vacio { display: none; }
html.lateral-plegado .nav-i { justify-content: center; padding: 0; }

/* ---------- barra superior ---------- */
.barra { position: sticky; top: 0; z-index: var(--z-barra); display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-8); background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.buscar { width: 240px; flex: none; position: relative; }
/* Lo que encuentra la búsqueda (F5): debajo, por grupos; en la hoja del móvil, a todo lo ancho */
.buscar-resultados { position: absolute; z-index: var(--z-barra); top: calc(100% + 6px); left: 0; width: min(440px, 90vw); max-height: min(70vh, 560px); overflow-y: auto; display: grid; gap: var(--e-2); padding: var(--e-2); border: var(--linea) solid var(--borde); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-2); }
.buscar--hoja { width: 100%; }
.buscar--hoja .buscar-resultados { position: static; width: 100%; max-height: none; margin-top: var(--e-3); border: 0; box-shadow: none; padding: 0; }
.buscar-grupo { display: grid; gap: 1px; }
.buscar-grupo-titulo { padding: var(--e-1) var(--e-2); font-size: var(--texto-xs); font-weight: var(--peso-fuerte); color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.buscar-opcion { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: var(--e-1) var(--e-2); border-radius: var(--r-m); color: var(--texto); }
.buscar-opcion:hover, .buscar-opcion[aria-selected="true"] { background: var(--superficie-hover); text-decoration: none; }
.buscar-texto { flex: 1; min-width: 0; display: grid; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--peso-medio); }
.buscar-donde { color: var(--texto-3); font-size: var(--texto-xs); font-weight: normal; overflow: hidden; text-overflow: ellipsis; }
.buscar-nada { padding: var(--e-3); color: var(--texto-2); font-size: var(--texto-s); }
.captura { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-2); position: relative; }
.captura-campo { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.captura-campo > .icono { position: absolute; left: var(--e-3); color: var(--acento); pointer-events: none; }
.captura-entrada { padding-left: calc(var(--e-3) + var(--icono) + var(--e-2)); padding-right: 44px; border-color: color-mix(in srgb, var(--acento) 30%, var(--borde)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 8%, transparent); }
.captura-campo > .kbd { position: absolute; right: var(--e-3); pointer-events: none; }
.captura-entrada:focus + .kbd { display: none; }
/* Lo que va a crear (F5): debajo de la caja; en la barra, flotando; en la hoja del móvil y en Hoy, en su sitio */
.captura-previa { position: absolute; z-index: var(--z-barra); top: calc(100% + 6px); left: 0; right: 0; display: grid; gap: var(--e-2); padding: var(--e-3); border: var(--linea) solid var(--borde); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-2); }
.captura--hoja, .captura--hoy { flex-wrap: wrap; }
.captura--hoja .captura-previa, .captura--hoy .captura-previa { position: static; flex-basis: 100%; box-shadow: none; }
.captura-piezas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.captura-pieza, .captura-dato { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--e-3); border: var(--linea) solid var(--borde); border-radius: var(--r-pildora); background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--texto-s); white-space: nowrap; }
.captura-pieza { cursor: pointer; }
.captura-pieza:hover { border-color: var(--borde-fuerte); background: var(--superficie-hover); }
.captura-pieza .icono, .captura-dato .icono { width: 14px; height: 14px; color: var(--texto-2); }
.captura-pieza .icono:last-child { width: 12px; height: 12px; color: var(--texto-3); }
.captura-pieza--tipo { border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); background: var(--acento-suave); color: var(--acento-texto); font-weight: var(--peso-medio); }
.captura-pieza--tipo .icono { color: var(--acento-texto); }
.captura-pieza .icono-area--s { width: 20px; height: 20px; }
.captura-dato { border-style: dashed; color: var(--texto-2); }
.captura-etiqueta { border-style: solid; background: var(--superficie-2); }
.captura-ayuda { font-size: var(--texto-xs); color: var(--texto-2); overflow-wrap: anywhere; }
.captura--guardando { opacity: .6; pointer-events: none; }
.captura--hoy { display: none; }
.marca--movil, .barra-buscar-movil { display: none; }

/* ---------- contenido ---------- */
.contenido { width: 100%; max-width: var(--ancho-contenido); margin: 0 auto; padding: var(--e-4) var(--e-8) var(--e-10); outline: none; }
.contenido.entrando { animation: entrar var(--mov) var(--curva); }
@keyframes entrar { from { opacity: 0; transform: translateY(4px); } }
.pagina { display: grid; gap: var(--e-6); }
.pagina-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); }
/* El título recibe el foco al cambiar de pantalla (para los lectores de pantalla), sin recuadro */
.pagina-titulos h1 { outline: none; }
.pagina-titulos h1:focus-visible { box-shadow: none; }
.pagina-antes { margin-bottom: var(--e-1); font-size: var(--texto-s); font-weight: var(--peso-medio); color: var(--texto-3); }
.pagina-sub { margin-top: var(--e-1); color: var(--texto-2); }

/* Una fila de ajuste: texto a la izquierda, control a la derecha (debajo en el móvil) */
.ajuste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-6); }
.ajuste-texto { display: grid; gap: 2px; min-width: 200px; flex: 1; }
.tarjeta > .ajuste { padding-top: var(--e-3); border-top: var(--linea) solid var(--borde); }
.tarjeta > .ajuste:first-child { padding-top: 0; border-top: 0; }
.pagina > .rotulo { margin: var(--e-2) 0 calc(var(--e-3) * -1); }

/* ---------- bienvenida (sin sesión): a pantalla completa, sin menú ---------- */
html.sin-sesion .app { grid-template-columns: minmax(0, 1fr); }
html.sin-sesion .lateral,
html.sin-sesion .barra,
html.sin-sesion .inferior { display: none !important; }
html.sin-sesion .contenido { max-width: none; padding: 0; }
.bienvenida { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: var(--e-6); padding: var(--e-8) var(--e-4); }
.bienvenida-marca { display: inline-flex; align-items: center; gap: var(--e-3); font-size: var(--texto-xl); font-weight: var(--peso-fuerte); }
.bienvenida-marca .marca-logo { width: 36px; height: 36px; }
.bienvenida-marca .marca-logo .icono { width: 20px; height: 20px; }
.bienvenida-tarjeta { width: min(440px, 100%); padding: var(--e-8); gap: var(--e-4); box-shadow: var(--sombra-2); }
.bienvenida-titulo { font-size: var(--texto-2xl); outline: none; }
.bienvenida-formulario { display: grid; gap: var(--e-4); }
.bienvenida-enlace { justify-self: center; }
.bienvenida-icono { justify-self: start; margin: 0; }
.codigos-bloque { display: grid; gap: var(--e-3); }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2) var(--e-4); margin: 0; padding: var(--e-4) var(--e-5); border-radius: var(--r-m); background: var(--superficie-2); font-size: var(--texto-l); letter-spacing: .04em; list-style: none; counter-reset: codigo; }
.codigos li { display: flex; align-items: baseline; gap: var(--e-2); counter-increment: codigo; }
.codigos li::before { content: counter(codigo); width: 2ch; text-align: right; color: var(--texto-3); font-size: var(--texto-xs); }
@media (max-width: 800px) {
  .bienvenida-tarjeta { padding: var(--e-6) var(--e-5); }
}

/* ---------- barra inferior (móvil) ---------- */
.inferior { display: none; }
.mas-lista { display: grid; gap: 2px; }

@media (max-width: 800px) {
  .app, html.lateral-plegado .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .barra { padding: calc(var(--e-2) + env(safe-area-inset-top)) var(--e-4) var(--e-2); justify-content: space-between; }
  .buscar, .captura { display: none; }
  .marca--movil, .barra-buscar-movil { display: inline-flex; }
  .contenido { padding: var(--e-2) var(--e-4) calc(var(--alto-inferior) + var(--e-8) + env(safe-area-inset-bottom)); }
  .pagina { gap: var(--e-5); }
  .pagina-titulos h1 { font-size: var(--texto-2xl); }
  .hoja .captura { display: flex; }
  .captura.captura--hoy { display: flex; }
  .hoja .buscar { display: block; }
  .captura-campo > .kbd { display: none; }
  .inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra); display: flex; align-items: center; justify-content: space-around; height: calc(var(--alto-inferior) + env(safe-area-inset-bottom)); padding: var(--e-1) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom)); border-top: var(--linea) solid var(--borde); background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .inferior-i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: var(--tactil); border: 0; background: none; color: var(--texto-3); font-size: 11px; font-weight: var(--peso-medio); cursor: pointer; }
  .inferior-i:hover { text-decoration: none; color: var(--texto-2); }
  .inferior-i .icono { width: 22px; height: 22px; }
  .inferior-i[aria-current="page"] { color: var(--acento-texto); }
  .inferior-captura { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -20px; border: 0; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--acento) 60%, transparent); cursor: pointer; transition: transform var(--mov-rapido) var(--curva); }
  .inferior-captura:active { transform: scale(.94); }
  .inferior-captura .icono { width: 24px; height: 24px; stroke-width: 2.2; }
}

/* La ventanita del marcador «Guardar en Dashboard» (F5): sin menús */
html.ventanita .lateral, html.ventanita .barra, html.ventanita .inferior, html.ventanita .saltar { display: none !important; }
html.ventanita .app { display: block; }
html.ventanita .contenido { padding: var(--e-4); }
.guardar { display: grid; gap: var(--e-4); max-width: 440px; margin: 0 auto; }
.guardar-cabecera { display: flex; align-items: center; gap: var(--e-3); }
.guardar-cabecera h1 { font-size: var(--texto-l); }
.guardar-url { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-m); background: var(--superficie-2); color: var(--texto-2); font-size: var(--texto-s); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guardar-url .icono { width: 14px; height: 14px; flex: none; }
.guardar-hecho { display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-10) 0; text-align: center; }
.guardar-hecho-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--exito-suave); color: var(--exito-texto); }
.guardar-hecho-icono .icono { width: 28px; height: 28px; stroke-width: 2.4; }
.marcador-caja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.marcador { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-4); border-radius: var(--r-pildora); background: var(--acento); color: var(--sobre-acento); font-weight: var(--peso-fuerte); cursor: grab; box-shadow: var(--sombra-1); }
.marcador:hover { text-decoration: none; }
.marcador .icono { width: 16px; height: 16px; }
.marcador-pasos { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-1); color: var(--texto-2); font-size: var(--texto-s); }

/* Bandeja (F5) */
.bandeja-fila--quieta { cursor: default; }
.area-lista { gap: var(--e-1); }
.area-lista-nota { font-size: var(--texto-xs); }
.contador--suave { background: var(--superficie-2); color: var(--texto-2); }
.bandeja { padding: var(--e-2); }
.bandeja-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.bandeja-fila { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-m); border-top: var(--linea) solid var(--borde); cursor: grab; }
.bandeja-fila:first-child { border-top-color: transparent; }
.bandeja-fila:hover { background: var(--superficie-hover); }
.bandeja-fila--elegida { background: var(--acento-suave); }
.bandeja-icono { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--superficie-2); color: var(--texto-2); flex: none; }
.bandeja-icono .icono { width: 15px; height: 15px; }
.bandeja-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bandeja-titulo { color: var(--texto); font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--e-3); color: var(--texto-2); font-size: var(--texto-xs); }
.bandeja-datos > span { display: inline-flex; align-items: center; gap: 4px; }
.bandeja-datos .icono { width: 12px; height: 12px; }
.bandeja-tipo { color: var(--acento-texto); font-weight: var(--peso-medio); }
.bandeja-etiqueta { padding: 0 6px; border-radius: var(--r-pildora); background: var(--superficie-2); }
.bandeja-acciones { display: flex; align-items: center; gap: var(--e-1); flex: none; }
.bandeja-seleccion { position: sticky; top: 64px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: var(--linea) solid color-mix(in srgb, var(--acento) 40%, var(--borde)); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-2); }
.bandeja-vacia { list-style: none; }
.bandeja-truco { align-self: center; }
/* Arrastrando cosas de la Bandeja: las áreas del menú se ofrecen como destino */
html.arrastrando-a-area .nav-area { outline: 1px dashed var(--borde-fuerte); outline-offset: -1px; }
.nav-area--destino { background: var(--acento-suave) !important; color: var(--acento-texto) !important; outline: 2px solid var(--acento) !important; }
@media (max-width: 800px) {
  .bandeja-truco { display: none; }
  .bandeja-fila { flex-wrap: wrap; cursor: default; }
  .bandeja-acciones { margin-left: auto; }
  .bandeja-seleccion { top: 8px; }
}
/* En el móvil, «Mover» es solo su flecha: el título se lee entero (F28, T033) */
@media (max-width: 600px) {
  .bandeja-mover-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bandeja-fila { gap: var(--e-2); }
}

/* Tareas (F6) */
.tareas-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.tareas-resumen { margin: 0; }
.tareas-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.tareas-filtros[hidden] { display: none; }
.tareas-filtros-icono { width: 16px; height: 16px; color: var(--texto-3); }
.tareas-filtros .chip .icono:last-child:not(:first-child) { width: 12px; height: 12px; opacity: .7; }
.tareas-filtro-activo { display: inline-flex; align-items: center; border-radius: var(--r-pildora); background: var(--acento-suave); }
.tareas-filtro-activo .chip { padding-right: var(--e-1); }
.tareas-filtro-quitar { display: grid; place-items: center; width: 26px; height: 26px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--acento-texto); cursor: pointer; }
.tareas-filtro-quitar:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.tareas-filtro-quitar .icono { width: 13px; height: 13px; }
.tareas-filtros-quitar { padding: 0 var(--e-2); border: 0; background: none; color: var(--texto-2); font: inherit; font-size: var(--texto-s); cursor: pointer; }
.tareas-filtros-quitar:hover { color: var(--texto); text-decoration: underline; }
.tareas-cuerpo { display: grid; gap: var(--e-4); }
.tareas-grupo { display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-2) var(--e-2); }
.tareas-grupo-cabecera { display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-3); }
.tareas-grupo-titulo { font-size: var(--texto-m); font-weight: var(--peso-fuerte); }
.tareas-grupo--atrasadas .tareas-grupo-titulo { color: var(--peligro-texto); }
.tareas-grupo--hoy .tareas-grupo-titulo { color: var(--acento-texto); }
.tareas-nota { padding: var(--e-2) var(--e-3) 0; }
.tareas-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.tarea { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-m); border-top: var(--linea) solid var(--borde); }
.tarea:first-child { border-top-color: transparent; }
.tarea:hover { background: var(--superficie-hover); }
.tarea-casilla { margin-top: 1px; flex: none; }
.tarea-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tarea-titulo { padding: 0; border: 0; background: none; font: inherit; color: var(--texto); font-weight: var(--peso-medio); text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: color var(--mov) var(--curva); }
.tarea-titulo:hover { color: var(--acento-texto); }
.tarea-titulo:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-s); }
.tarea--hecha .tarea-titulo { color: var(--texto-3); text-decoration: line-through; }
.tarea--hecha .tarea-casilla:checked { background: var(--exito); border-color: var(--exito); }
.tarea-cuando--atrasada { color: var(--peligro-texto); font-weight: var(--peso-medio); }
.tarea-esperando { color: var(--aviso-texto); font-weight: var(--peso-medio); }
.tarea-reanudar { align-self: center; flex: none; }
.tareas-grupo--esperando .tareas-grupo-titulo { color: var(--aviso-texto); }
.tarea-espera { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.tarea-espera .entrada { flex: 1; min-width: 180px; }
.tarea-espera .entrada[hidden] { display: none; }
/* Avisarme a su hora (F28, T101), bajo el día y la hora */
.tarea-avisar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin-top: var(--e-2); }
.tarea-avisar[hidden] { display: none; }
.tarea-avisar .campo-ayuda { flex: 1; min-width: 200px; }
.tarea-campana { margin-left: var(--e-1); color: var(--acento-texto); }
.tarea-hecha-en { color: var(--exito-texto); }
.tarea-notas { margin: 0; color: var(--texto-2); font-size: var(--texto-s); line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.tarea-notas a { color: var(--acento-texto); }
.tarea--hecha .tarea-notas { color: var(--texto-3); }
.tarea-notas-mas { display: inline; padding: 0; border: 0; background: none; font: inherit; font-size: var(--texto-xs); font-weight: var(--peso-medio); color: var(--acento-texto); cursor: pointer; white-space: nowrap; }
.tarea-notas-mas:hover { text-decoration: underline; }
.tarea-enlaces { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin: var(--e-1) 0 3px; }
.tarea-enlace { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px var(--e-2) 2px 3px; border: var(--linea) solid var(--borde); border-radius: var(--r-pildora); background: var(--superficie); color: var(--texto-2); font-size: var(--texto-xs); font-weight: var(--peso-medio); }
.tarea-enlace:hover { border-color: var(--borde-fuerte); color: var(--texto); text-decoration: none; }
.tarea-enlace-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarea-enlace .tarea-enlace-titulo { max-width: 240px; }
.fav-icono--xs { width: 18px; height: 18px; border-radius: 50%; box-shadow: none; }
.fav-icono--xs img { width: 78%; height: 78%; border-radius: 3px; }
.fav-icono--xs .icono { width: 11px; height: 11px; }
.fav-icono--xs .fav-inicial { font-size: 10px; }
.tarea-enlaces-campos { display: grid; gap: var(--e-2); }
.tarea-enlaces-editor { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.tarea-enlaces-editor:empty { display: none; }
.tarea-enlace-fila { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-1) var(--e-2) var(--e-2); border-radius: var(--r-m); background: var(--superficie-2); }
.tarea-enlace-texto { flex: 1; min-width: 0; display: grid; font-size: var(--texto-s); }
.tarea-enlace-texto .tenue { font-size: var(--texto-xs); }
.tarea-enlace-nuevo { display: flex; gap: var(--e-2); }
.tarea-enlace-nuevo .entrada { flex: 1; min-width: 0; }
.tarea-area::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tarea-persona[style] .icono { color: var(--c); }
.persona-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.persona-fila .coleccion-asa { margin-left: 0; }
/* La hoja de una tarea */
.editor-tarea { display: grid; gap: var(--e-5); }
.tarea-cuando-campos { display: grid; gap: var(--e-2); }
.tarea-dia-hora { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: var(--e-2); }
.tarea-hora:disabled { opacity: .5; }
.editor-tarea .segmentado { flex-wrap: wrap; justify-self: start; }

/* Colecciones de favoritos en un área y en el inicio (F4) */
.area-cuerpo { display: grid; gap: var(--e-5); }
.coleccion { display: grid; gap: var(--e-3); padding: var(--e-4) var(--e-5) var(--e-5); border: var(--linea) solid var(--borde); border-radius: var(--r-xl); background: var(--superficie); box-shadow: var(--sombra-1); }
.coleccion-cabecera { display: flex; align-items: center; gap: var(--e-2); min-height: 36px; }
.coleccion-nombre { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--texto-l); font-weight: var(--peso-fuerte); }
.coleccion-fijada .icono { width: 14px; height: 14px; color: var(--texto-3); }
.coleccion-area { font-size: var(--texto-s); }
.coleccion-asa { display: grid; place-items: center; width: 24px; height: 32px; margin-left: calc(var(--e-2) * -1); padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--texto-3); cursor: grab; touch-action: none; }
.coleccion-asa:hover { background: var(--superficie-hover); color: var(--texto); }
.coleccion-asa .icono { width: 16px; height: 16px; }
.coleccion-ordenar-ayuda { display: none; font-size: var(--texto-s); }
.modo-ordenar .coleccion-ordenar-ayuda { display: block; }
.coleccion.modo-ordenar { border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }
.coleccion--sueltos { background: var(--superficie-2); box-shadow: none; }
.coleccion-nueva { display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 52px; border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-xl); background: none; color: var(--texto-3); font: inherit; font-weight: var(--peso-medio); cursor: pointer; }
.coleccion-nueva:hover { border-color: var(--acento); color: var(--acento-texto); background: var(--acento-suave); }

/* Hoy (F23, T040): los bloques en rejilla (bento) en el PC; en el móvil, en columna */
.hoy-avisos { display: grid; gap: var(--e-2); }
.hoy-avisos:empty { display: none; }
.hoy-avisos .hoy-deseos { margin-bottom: 0; }
.hoy-rejilla { display: flex; flex-direction: column; gap: var(--e-6); }
.hoy-tramo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.hoy-tramo--con-grande { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hoy-tramo--al-reves { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hoy-tramo--pares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hoy-col { display: grid; gap: var(--e-6); align-content: start; min-width: 0; }
.hoy-bloque { min-width: 0; gap: var(--e-4); padding: var(--e-5) var(--e-6); border-radius: var(--r-xl); }
.hoy-bloque-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 32px; }
.hoy-bloque-titulo { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--texto-l); font-weight: var(--peso-fuerte); letter-spacing: -.01em; }
.hoy-cuenta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--r-pildora);
  background: var(--acento-suave); color: var(--acento-texto); font-size: var(--texto-xs); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.hoy-bloque-acciones { display: flex; align-items: center; gap: var(--e-2); }
.hoy-todas { display: inline-flex; align-items: center; gap: 2px; font-size: var(--texto-s); text-decoration: none; }
.hoy-todas .icono { width: 14px; height: 14px; }
.hoy-todas:hover { color: var(--acento-texto); }
.hoy-tareas { margin: 0 calc(-1 * var(--e-3)); }
.tarea--atrasada .tarea-titulo { color: var(--peligro-texto); }
.hoy-atrasadas { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; padding: var(--e-2) var(--e-3); border-radius: var(--r-m);
  background: var(--peligro-suave); color: var(--texto); font-size: var(--texto-s); }
.hoy-atrasadas > .icono { color: var(--peligro); width: 16px; height: 16px; }
.hoy-atrasadas span { flex: 1; font-weight: var(--peso-medio); }
.hoy-libre { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-m); background: var(--superficie-2); color: var(--texto-2); font-size: var(--texto-s); }
.hoy-libre p { margin: 0; }
.hoy-libre strong { color: var(--texto); }
.hoy-libre > .icono { flex: none; color: var(--exito); margin-top: 1px; }
.hoy-pie { margin: 0; font-size: var(--texto-s); text-decoration: none; }
a.hoy-pie:hover { color: var(--acento-texto); }
.hoy-bandeja { list-style: none; margin: 0 calc(-1 * var(--e-2)); padding: 0; display: grid; gap: 2px; }
.hoy-bandeja-cosa { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2); border-radius: var(--r-m); color: inherit; text-decoration: none; min-width: 0; }
.hoy-bandeja-cosa:hover { background: var(--superficie-hover); }
.hoy-bandeja-icono { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-m); background: var(--superficie-2); color: var(--texto-2); }
.hoy-bandeja-icono .icono { width: 16px; height: 16px; }
.hoy-bandeja-titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--peso-medio); }
.hoy-bandeja-cuando { flex: none; font-size: var(--texto-xs); color: var(--texto-3); }
/* Personalizar Hoy (T041) */
.hoy-personalizar { margin-top: var(--e-3); }
.hoy-personalizar .fila { display: flex; align-items: center; gap: var(--e-2); }
.hoy-personalizar-ver { flex: 1; display: flex; align-items: center; gap: var(--e-3); min-width: 0; cursor: pointer; }
.hoy-personalizar-ver > span { display: grid; gap: 2px; justify-items: start; min-width: 0; text-align: left; }
.hoy-personalizar--oculto .fila-titulo { color: var(--texto-3); }
.hoy-personalizar-mover { display: flex; flex: none; gap: 2px; }
.hoy-flecha--arriba .icono { transform: rotate(-90deg); }
.hoy-flecha--abajo .icono { transform: rotate(90deg); }
.hoy-flecha:disabled { opacity: .25; }
.hoy-personalizar-puesto { order: -1; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--superficie-2);
  color: var(--texto-2); font-size: var(--texto-xs); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.hoy-personalizar--oculto .hoy-personalizar-puesto { opacity: .5; }
.hoy-personalizar .fila { margin: 0 calc(-1 * var(--e-2)); padding: var(--e-2); border-radius: var(--r-m); }
.hoy-movido { animation: hoy-movido 1.2s var(--curva); }
@keyframes hoy-movido { from { background: var(--acento-suave); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .hoy-movido { animation: none; } }
@media (max-width: 600px) {
  .hoy-personalizar-texto { display: none; }
}
/* La agenda en Hoy (T073): hoy y mañana */
.hoy-agenda-dia { display: grid; gap: var(--e-1); }
.hoy-agenda-dia + .hoy-agenda-dia { padding-top: var(--e-3); border-top: var(--linea) solid var(--borde); }
.hoy-agenda-dia .rotulo { margin: 0; }
.hoy-agenda-lista { list-style: none; margin: 0 calc(-1 * var(--e-2)); padding: 0; display: grid; gap: 2px; }
.hoy-evento { display: flex; align-items: stretch; gap: var(--e-3); width: 100%; min-width: 0; padding: var(--e-2); border: 0; border-radius: var(--r-m); background: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.hoy-evento:hover { background: var(--superficie-hover); }
.hoy-evento-hora { flex: none; width: 70px; font-size: var(--texto-s); color: var(--texto-2); font-variant-numeric: tabular-nums; line-height: 1.4; }
.hoy-evento-punto { flex: none; width: 3px; border-radius: 2px; background: var(--c); }
.hoy-evento-texto { display: grid; min-width: 0; line-height: 1.4; }
.hoy-evento-titulo { font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoy-evento-lugar { font-size: var(--texto-xs); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoy-agenda-libre { margin: 0; padding: var(--e-1) 0; font-size: var(--texto-s); }
.hoy-favoritos { display: grid; gap: var(--e-5); }
.hoy-favoritos .coleccion { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hoy-favoritos .coleccion + .coleccion { padding-top: var(--e-5); border-top: var(--linea) solid var(--borde); }
.hoy-favoritos .coleccion-cabecera { min-height: 0; }
.hoy-favoritos .coleccion-nombre { font-size: var(--texto-m); }
@media (max-width: 900px) {
  /* En columna, cada bloque en tu orden (los tramos no cuentan) */
  .hoy-rejilla { gap: var(--e-5); }
  .hoy-tramo, .hoy-col { display: contents; }
  .hoy-bloque { padding: var(--e-4) var(--e-5); }
}
.inicio-direccion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-m); background: var(--superficie-2); }
.inicio-direccion code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.inicio-navegadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--e-4); }
.inicio-pasos-titulo { font-weight: var(--peso-fuerte); margin-bottom: var(--e-1); }
.inicio-pasos ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-1); color: var(--texto-2); font-size: var(--texto-s); }
@media (max-width: 600px) {
  .coleccion { padding: var(--e-3) var(--e-3) var(--e-4); border-radius: var(--r-l); }
  .coleccion-vistas { display: none; }
  .fav-lista--iconos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3) var(--e-1); }
  .fav-icono { width: 52px; height: 52px; }
}

/* Tareas III (F8): repetir y cambiar de día */
.tarea { touch-action: pan-y; position: relative; transition: transform var(--mov) var(--curva), background var(--mov) var(--curva); }
.tarea--deslizando { transition: none; }
.tarea--a-manana { background: var(--acento-suave); }
.tarea--a-hecha { background: var(--exito-suave); }
.tarea-dia { align-self: center; flex: none; color: var(--texto-3); opacity: 0; transition: opacity var(--mov) var(--curva); }
.tarea:hover .tarea-dia, .tarea:focus-within .tarea-dia, .tarea-dia[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .tarea-dia { opacity: 1; } }
.tarea-repite { color: var(--acento-texto); }
.repetir-opciones { display: grid; gap: var(--e-2); }
.repetir-opciones:empty { display: none; }
.repetir-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--texto-s); color: var(--texto-2); }
.repetir-fila .entrada { width: auto; }
.repetir-fila .repetir-n { width: 76px; }
.repetir-mes { display: grid; gap: var(--e-2); justify-items: start; }
.repetir-dia { min-width: 34px; justify-content: center; padding: 0; }
.repetir-desde { display: flex; align-items: center; gap: var(--e-2); font-size: var(--texto-s); color: var(--texto-2); }
.repetir-resumen { margin: 0; font-size: var(--texto-s); color: var(--acento-texto); font-weight: var(--peso-medio); }
.repetir-resumen:empty { display: none; }
/* Arrastrar a otro día (PC) */
.tareas-grupo[data-fecha].destino { outline: 2px dashed var(--acento); outline-offset: -2px; background: var(--acento-suave); }
.tarea[draggable="true"] { cursor: grab; }
.tareas-suelta { margin: 0; padding: var(--e-3); text-align: center; font-size: var(--texto-s); }
/* Pestañas de un área (F8, T039): solo si hay más de un tipo de cosas */
.area-pestanas { display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none; border-bottom: var(--linea) solid var(--borde); }
.area-pestanas[hidden] { display: none; }
.area-pestanas button { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--texto-2); font: inherit; font-weight: var(--peso-medio); white-space: nowrap; cursor: pointer; }
.area-pestanas button:hover { color: var(--texto); }
.area-pestanas button[aria-selected="true"] { color: var(--acento-texto); border-bottom-color: var(--acento); }
.area-pestanas button:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-s); }
/* Pasos de una tarea (F8, T096) */
.tarea-pasos-boton { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--e-2); border: var(--linea) solid var(--borde); border-radius: var(--r-pildora);
  background: var(--superficie); color: var(--texto-2); font: inherit; font-size: var(--texto-xs); font-weight: var(--peso-medio); cursor: pointer; }
.tarea-pasos-boton:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.tarea-pasos-boton .icono { width: 12px; height: 12px; }
.tarea-pasos-boton--completo { color: var(--exito-texto); border-color: color-mix(in srgb, var(--exito) 35%, var(--borde)); }
.tarea-pasos { list-style: none; margin: 0; padding: var(--e-1) 0 var(--e-1) 2px; display: grid; gap: 6px; }
.tarea-pasos[hidden] { display: none; }
.tarea-paso { display: flex; align-items: center; gap: var(--e-2); font-size: var(--texto-s); }
.tarea-paso label { cursor: pointer; overflow-wrap: anywhere; }
.tarea-paso--hecho label { color: var(--texto-3); text-decoration: line-through; }
.pasos-editor { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.pasos-editor:empty { display: none; }
.paso-fila { display: flex; align-items: center; gap: var(--e-2); }
.paso-fila .coleccion-asa { margin-left: 0; }
.paso-texto { flex: 1; min-width: 0; }
/* Fecha límite (F8, T097) */
.tarea-vence { color: var(--texto-2); }
.tarea-vence--cerca { color: var(--aviso-texto); font-weight: var(--peso-medio); }
.tarea-vence--pasada { color: var(--peligro-texto); font-weight: var(--peso-medio); }
/* La tarjeta de tareas de un área: Ahora, Próximas y Hechas */
.area-tareas .coleccion-cabecera { flex-wrap: wrap; row-gap: var(--e-2); }
.area-tareas .segmentado .tenue { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .area-tareas .area-lista-nota { display: none; } }
/* Tiempo dedicado (F9, T098) */
.tarea-tiempo { font-variant-numeric: tabular-nums; }
.tarea-crono { align-self: center; flex: none; color: var(--texto-3); opacity: 0; transition: opacity var(--mov) var(--curva); }
.tarea:hover .tarea-crono, .tarea:focus-within .tarea-crono { opacity: 1; }
@media (hover: none) { .tarea-crono { opacity: 1; } }
.tarea-crono--marcha { opacity: 1; color: var(--peligro-texto); border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); font-variant-numeric: tabular-nums; }
.tarea-crono--marcha .icono { color: var(--peligro); }
.crono-pastilla { position: fixed; z-index: var(--z-aviso); left: 50%; transform: translateX(-50%); bottom: calc(var(--alto-inferior) + var(--e-3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--e-2); max-width: calc(100% - 2 * var(--e-4)); padding: var(--e-1) var(--e-1) var(--e-1) var(--e-3);
  border: var(--linea) solid var(--borde); border-radius: var(--r-pildora); background: var(--superficie); box-shadow: var(--sombra-2); font-size: var(--texto-s); }
.crono-pastilla[hidden] { display: none; }
.crono-pastilla-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--peligro); flex: none; animation: crono-latido 1.4s ease-in-out infinite; }
.crono-pastilla-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--peso-medio); }
.crono-pastilla-tiempo { font-variant-numeric: tabular-nums; color: var(--texto-2); }
@keyframes crono-latido { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .crono-pastilla-punto { animation: none; } }
@media (min-width: 801px) { .crono-pastilla { bottom: var(--e-6); left: calc(var(--ancho-lateral, 240px) + var(--e-6)); transform: none; } }
.tiempo { display: grid; gap: var(--e-2); }
.tiempo-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.tiempo-total { font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.tiempo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tiempo-lista:empty { display: none; }
.tiempo-fila { display: flex; align-items: center; gap: var(--e-3); padding: 2px 0 2px var(--e-2); border-radius: var(--r-s); font-size: var(--texto-s); }
.tiempo-fila:hover { background: var(--superficie-hover); }
.tiempo-fila-dia { width: 92px; flex: none; color: var(--texto-2); }
.tiempo-fila strong { width: 84px; flex: none; font-variant-numeric: tabular-nums; }
.tiempo-fila-nota { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiempo-apuntar { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--e-2); }
.tiempo-apuntar .tiempo-nota { grid-column: 1 / -1; order: 1; }
/* Cobros (F9, T099) */
.cobros-mes { display: flex; align-items: center; gap: var(--e-2); }
.cobros-mes-nombre { font-size: var(--texto-l); font-weight: var(--peso-fuerte); min-width: 160px; text-align: center; }
.cobro { display: grid; gap: var(--e-2); }
.cobro--cobrado { border-color: color-mix(in srgb, var(--exito) 35%, var(--borde)); }
.cobro-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.cobro-nombre { font-size: var(--texto-l); font-weight: var(--peso-fuerte); }
.cobro-cifras { display: flex; align-items: baseline; gap: var(--e-3); font-variant-numeric: tabular-nums; }
.cobro-horas { color: var(--texto-2); }
.cobro-importe { font-size: var(--texto-xl); }
.cobro-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--texto-s); }
.cobro-tareas li { display: flex; justify-content: space-between; gap: var(--e-3); padding: 3px 0; border-top: var(--linea) solid var(--borde); }
.cobro-tareas li:first-child { border-top: 0; }
.cobro-tareas .tenue { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cobro-botones { justify-content: flex-end; }
/* Imprimir un cliente: solo su tarjeta, sin botones */
@media print {
  html.imprimiendo body * { visibility: hidden; }
  html.imprimiendo .cobro--imprimir, html.imprimiendo .cobro--imprimir * { visibility: visible; }
  html.imprimiendo .cobro--imprimir { position: absolute; inset: 0 0 auto 0; border: 0; box-shadow: none; }
  html.imprimiendo .cobro--imprimir .cobro-botones, html.imprimiendo .cobro--imprimir .campo-ayuda a { display: none; }
}

/* Notas (F10, T050): la pantalla de una nota y su editor de bloques */
.pagina-nota { max-width: 760px; margin-inline: auto; width: 100%; }
.nota-cabecera { display: flex; align-items: center; gap: var(--e-2); }
.nota-donde { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--texto-2); font-size: var(--texto-s); font-weight: var(--peso-medio); }
.nota-donde:hover { color: var(--texto); text-decoration: none; }
.nota-donde .icono { width: 15px; height: 15px; }
.nota-estado { color: var(--texto-3); font-size: var(--texto-xs); }
.nota-estado--mal { color: var(--aviso-texto); }
.nota-titulo { width: 100%; resize: none; overflow: hidden; border: 0; padding: 0; background: none; color: var(--texto); font: inherit; font-size: 30px; font-weight: var(--peso-fuerte); line-height: 1.2; letter-spacing: -0.01em; }
.nota-titulo:focus { outline: none; }
.nota-titulo::placeholder { color: var(--texto-3); }
.nota-barra { position: sticky; top: 64px; z-index: 2; }
@media (max-width: 800px) { .nota-barra { top: 8px; } .nota-titulo { font-size: 24px; } }
.editor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border: var(--linea) solid var(--borde); border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--sombra-1); }
.editor-boton { min-width: 32px; height: 30px; padding: 0 var(--e-2); border: 0; border-radius: var(--r-s); background: none; color: var(--texto-2); font: inherit; font-size: var(--texto-s); font-weight: var(--peso-medio); cursor: pointer; }
.editor-boton:hover { background: var(--superficie-hover); color: var(--texto); }
.editor-boton[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-texto); }
.editor-boton--bold { font-weight: var(--peso-fuerte); }
.editor-boton--italic { font-style: italic; font-family: Georgia, serif; }
.editor-barra-hueco { flex: 1; }
.editor-notas { display: grid; gap: 2px; padding-bottom: 30vh; counter-reset: ol; cursor: text; font-size: var(--texto-l); line-height: 1.6; }
.bloque { position: relative; display: flex; align-items: baseline; gap: var(--e-2); min-height: 1.6em; }
.bloque:not(.bloque--ol) { counter-reset: ol; }
.bloque-texto { flex: 1; min-width: 0; margin: 0; padding: 2px 0; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.bloque-texto:empty::before { content: attr(data-vacio); color: var(--texto-3); pointer-events: none; }
.editor-notas > .bloque:only-child .bloque-texto:empty::before { content: "Escribe aquí. Empieza con # para un título, - para una lista o [] para casillas."; }
.bloque--h1 .bloque-texto { font-size: 26px; font-weight: var(--peso-fuerte); line-height: 1.25; margin-top: var(--e-4); }
.bloque--h2 .bloque-texto { font-size: 21px; font-weight: var(--peso-fuerte); line-height: 1.3; margin-top: var(--e-3); }
.bloque--h3 .bloque-texto { font-size: var(--texto-l); font-weight: var(--peso-fuerte); margin-top: var(--e-2); }
.bloque--ul .bloque-texto, .bloque--ol .bloque-texto { padding-left: 26px; }
.bloque--ul::before { content: ""; position: absolute; left: 9px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-2); }
.bloque--ol { counter-increment: ol; }
.bloque--ol::before { content: counter(ol) "."; position: absolute; left: 0; width: 22px; text-align: right; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.bloque--check { align-items: flex-start; }
.bloque-casilla { margin-top: 0.42em; flex: none; }
.bloque--hecho .bloque-texto { color: var(--texto-3); text-decoration: line-through; }
.bloque--quote .bloque-texto { padding-left: var(--e-4); border-left: 3px solid var(--borde-fuerte); color: var(--texto-2); font-style: italic; }
.bloque--code .bloque-texto { padding: var(--e-3); border-radius: var(--r-m); background: var(--superficie-2); font-family: var(--fuente-mono); font-size: var(--texto-s); line-height: 1.5; }
.bloque--hr { padding: var(--e-3) 0; border-radius: var(--r-s); }
.bloque--hr hr { flex: 1; margin: 0; border: 0; border-top: 1px solid var(--borde-fuerte); }
.bloque--hr:focus { outline: none; background: var(--acento-suave); }
.bloque-texto a { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }
.bloque-texto code { padding: 1px 5px; border-radius: var(--r-s); background: var(--superficie-2); font-family: var(--fuente-mono); font-size: 0.88em; }
.nota-enlace:hover { color: var(--acento-texto); text-decoration: none; }
/* Al escribir, sin recuadro de foco (el cursor ya dice dónde estás) */
.bloque-texto:focus, .bloque-texto:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 600px) {
  .editor-barra { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .editor-barra::-webkit-scrollbar { display: none; }
  .editor-barra-hueco { flex: 0 0 var(--e-2); }
}
.pagina-nota > * { min-width: 0; }
.editor-barra { max-width: 100%; }
.editor-boton { flex: none; }
/* Incrustados en las notas (F11, T051) */
.bloque--embed { display: block; padding: var(--e-2) 0; border-radius: var(--r-l); }
.bloque--embed:focus { outline: none; }
.bloque--embed:focus .embed { box-shadow: var(--foco); }
.embed { overflow: hidden; border: var(--linea) solid var(--borde); border-radius: var(--r-l); background: var(--superficie); }
.embed--video { max-width: 560px; }
.embed-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--superficie-2); cursor: pointer; }
.embed-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.embed-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 60px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--texto) 75%, transparent); color: var(--superficie); transition: transform var(--mov) var(--curva); }
.embed-video:hover .embed-play { transform: scale(1.06); }
.embed-play .icono { width: 22px; height: 22px; }
.embed-reproductor { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.embed-pie { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3); font-size: var(--texto-s); line-height: 1.35; }
.embed-icono { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-s); background: var(--superficie-2); color: var(--texto-2); flex: none; }
.embed-icono .icono { width: 16px; height: 16px; }
.embed-texto { flex: 1; min-width: 0; display: grid; }
.embed-titulo { color: var(--texto); font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed-titulo:hover { color: var(--acento-texto); text-decoration: none; }
.embed-dominio { color: var(--texto-3); font-size: var(--texto-xs); }
.embed-quitar { opacity: 0; transition: opacity var(--mov) var(--curva); }
.bloque--embed:hover .embed-quitar, .bloque--embed:focus-within .embed-quitar { opacity: 1; }
@media (hover: none) { .embed-quitar { opacity: 1; } }
/* Subpáginas (F11, T110) */
.nota-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.nota-ruta-sep { color: var(--texto-3); }
.nota-paginas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.nota-pagina { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-3); border: var(--linea) solid var(--borde); border-radius: var(--r-pildora);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--texto-s); font-weight: var(--peso-medio); cursor: pointer; }
.nota-pagina:hover { border-color: var(--borde-fuerte); text-decoration: none; }
.nota-pagina .icono { width: 14px; height: 14px; color: var(--texto-3); }
.nota-pagina--nueva { border-style: dashed; color: var(--texto-2); }
.nota-titulo:focus-visible { outline: none; box-shadow: none; }
/* Enlaces a otras páginas dentro de una nota (F11, T112) */
.bloque-texto a.enlace-pagina { padding: 0 3px; border-radius: var(--r-s); background: var(--acento-suave); color: var(--acento-texto); text-decoration: none; font-weight: var(--peso-medio); cursor: pointer; }
.bloque-texto a.enlace-pagina::before { content: "↗ "; opacity: .6; }
.editor-boton--pagina { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fuente-mono); }
.editor-boton--pagina .icono { width: 14px; height: 14px; }
/* La fila de una nota en su área: sus subpáginas debajo (T113) */
.nota-subpaginas { display: flex; flex-wrap: wrap; gap: 2px var(--e-3); font-size: var(--texto-s); }
.nota-subpagina { color: var(--texto-2); }
.nota-subpagina::before { content: "↳ "; color: var(--texto-3); }
.nota-subpagina:hover { color: var(--acento-texto); text-decoration: none; }
/* Vídeos (F12): la pantalla de un vídeo con sus notas de minuto */
.pagina-video { max-width: 1200px; }
.video-cabecera { display: flex; align-items: center; gap: var(--e-2); }
.video-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--e-5); align-items: start; }
@media (max-width: 960px) { .video-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.video-principal { display: grid; gap: var(--e-2); min-width: 0; }
.video-marco { overflow: hidden; border-radius: var(--r-l); background: var(--superficie-2); box-shadow: var(--sombra-1); }
.video-reproductor { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-titulo { font-size: var(--texto-xl); font-weight: var(--peso-fuerte); line-height: 1.3; }
.video-datos { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin: 0; color: var(--texto-2); font-size: var(--texto-s); }
.video-datos span { display: inline-flex; align-items: center; gap: var(--e-1); }
.video-datos .icono { width: 14px; height: 14px; }
.video-panel { display: grid; gap: var(--e-3); position: sticky; top: 72px; max-height: calc(100dvh - 96px); grid-template-rows: auto auto minmax(0, 1fr); }
@media (max-width: 960px) { .video-panel { position: static; max-height: none; } }
.video-nota-nueva { display: grid; gap: var(--e-2); }
.video-anadir-texto { font-variant-numeric: tabular-nums; }
.video-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; overflow-y: auto; align-content: start; }
.video-nota { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-1); border-radius: var(--r-m); }
.video-nota:hover { background: var(--superficie-hover); }
.video-nota .entrada { flex: 1; min-width: 0; }
.video-minuto { flex: none; padding: 2px var(--e-2); border: 0; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-texto); font: inherit; font-size: var(--texto-s); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; cursor: pointer; }
.video-minuto:hover { background: var(--acento); color: var(--sobre-acento); }
.video-nota-texto { flex: 1; min-width: 0; padding: 2px 0; border: 0; background: none; color: var(--texto); font: inherit; font-size: var(--texto-s); text-align: left; cursor: text; overflow-wrap: anywhere; }
.video-notas-vacio { padding: var(--e-3); font-size: var(--texto-s); list-style: none; }
.fav-duracion { position: absolute; right: var(--e-2); bottom: var(--e-2); padding: 1px 6px; border-radius: var(--r-s); background: color-mix(in srgb, var(--texto) 78%, transparent); color: var(--superficie); font-size: var(--texto-xs); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.fav-tarjeta .fav-previa { position: relative; }
.video-titulo:focus, .video-titulo:focus-visible { outline: none; box-shadow: none; }
/* Tarjetas de favoritos: el texto nunca se sale por la derecha (título y descripción, hasta dos líneas con «…») */
.fav-tarjeta-texto { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.fav-tarjeta-cabeza { min-width: 0; align-items: flex-start; }
.fav-tarjeta-cabeza .fav-titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; overflow-wrap: anywhere; }
.fav-tarjeta-cabeza .fav-icono { margin-top: 1px; }
.fav-descripcion { overflow-wrap: anywhere; }

/* Hoy: el aviso de deseos a buen precio (F14, T056); se toca para ir a Deseos */
.hoy-deseos { margin-bottom: var(--e-4); text-decoration: none; transition: border-color var(--mov) var(--curva), box-shadow var(--mov) var(--curva); }
.hoy-deseos:hover { border-color: var(--exito); box-shadow: var(--sombra-1); }
.hoy-deseos > .icono { flex: none; color: var(--texto-3); }
.hoy-envios a { color: var(--acento-texto); font-weight: var(--peso-medio); }


/* Que nada se olvide (F31, T138): lo que esperas y lo de mañana, debajo de «Hoy toca» */
.hoy-mini-grupo { display: grid; gap: var(--e-1); padding-top: var(--e-3); border-top: var(--linea) solid var(--borde); }
.hoy-mini-grupo > .rotulo { margin: 0; }
.hoy-mini-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hoy-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo accion" "sub accion"; align-items: center; column-gap: var(--e-3);
  padding: var(--e-1) 0; }
.hoy-mini-titulo { grid-area: titulo; justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; font-weight: var(--peso-medio);
  text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoy-mini-titulo:hover { color: var(--acento-texto); }
.hoy-mini-sub { grid-area: sub; font-size: var(--texto-xs); color: var(--texto-3); }
.hoy-mini--aviso .hoy-mini-sub { color: var(--aviso-texto); font-weight: var(--peso-medio); }
.hoy-mini > .boton { grid-area: accion; }

/* Con el dedo (F27, T030): en pantallas táctiles, todo lo que se toca a tamaño de dedo (unos 40-44 px), sin cambiar
   nada en el PC. Los textos que se tocan (el título de una tarea, «Tareas →»…) ganan alto por dentro sin mover nada. */
@media (pointer: coarse) {
  :root { --alto-control: 44px; }
  .boton--s { min-height: 40px; }
  .boton--icono.boton--s { width: 40px; }
  .segmentado button { min-height: 40px; }
  .chip { min-height: 36px; }
  .casilla { width: 28px; height: 28px; }
  .agenda-casilla { width: 28px; height: 28px; }
  .marca { min-height: 44px; }
  .coleccion-asa { width: 40px; height: 40px; }
  .editor-barra button { min-width: 40px; min-height: 40px; }
  .nota-pagina { min-height: 40px; }
  .nota-titulo { min-height: 44px; }
  .pieza-fila, .pieza-chip { min-height: 44px; }
  .tarea-titulo, .bandeja-titulo, .hoy-mini-titulo, .hoy-todas, a.hoy-pie, .nota-donde, .area-lista-nota, .fila-boton, .hoy-bandeja-titulo {
    padding-block: 9px; margin-block: -9px; }
}
/* En el móvil (T030): las pestañas («Ahora, Próximas, Por persona…») en una línea que se desliza, sin partir palabras;
   y la barra del editor de notas, que también se desliza, se difumina a la derecha para que se vea que sigue */
@media (max-width: 600px) {
  .segmentado { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmentado::-webkit-scrollbar { display: none; }
  .segmentado button { flex: none; white-space: nowrap; }
  .editor-barra { -webkit-mask-image: linear-gradient(to right, black 86%, transparent); mask-image: linear-gradient(to right, black 86%, transparent); }
}
@media (max-width: 600px) {
  /* Lo de la página no la ensancha (una fila de pestañas larga se desliza dentro de su sitio) */
  .pagina > *, .pagina-cabecera > *, .tareas-cabecera > * { min-width: 0; }
}

/* Lo apuntado sin conexión (F28, T032): «N por enviar», en la barra de arriba, mientras quede algo */
.pendientes-pastilla { flex: none; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 36px; padding: 0 var(--e-3);
  border: var(--linea) solid color-mix(in srgb, var(--aviso) 40%, transparent); border-radius: var(--r-pildora); background: var(--aviso-suave); color: var(--aviso-texto);
  font: inherit; font-size: var(--texto-s); font-weight: var(--peso-medio); white-space: nowrap; cursor: pointer; }
.pendientes-pastilla[hidden] { display: none; }
.pendientes-pastilla .icono { width: 16px; height: 16px; }

/* Compartir: lo que ha llegado, antes de guardarlo (T084) */
.compartir-pregunta { display: grid; gap: var(--e-3); }
.compartir-que { margin: 0; padding: var(--e-3); border-radius: var(--r-m); background: var(--superficie-2); overflow-wrap: anywhere; }
.compartir-archivos { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
.compartir-archivos li { display: flex; align-items: center; gap: var(--e-2); overflow-wrap: anywhere; }

/* Recordatorios (F28, T101 y T139) */
.avisos-correo { display: grid; gap: var(--e-3); }
.avisos-rotulo { margin: var(--e-5) 0 var(--e-2); padding-top: var(--e-4); border-top: var(--linea) solid var(--borde); }
.avisos-estado { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-1); font-weight: 600; }
.avisos-estado--activos .icono { color: var(--exito-texto); }