/* TaskFlow · estructura de la aplicación. Colores, tipos y espacios salen de tokens.css (manual de marca Leo Doncel). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; min-height: 100%; background: var(--superficie); color: var(--tinta); font: 400 16px/24px var(--font-ui); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accion); text-underline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
[hidden] { display: none !important; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accion); color: var(--sobre-accion); padding: 10px 16px; border-radius: var(--radio-m); }
.saltar:focus { top: 8px; }
.icono { width: 20px; height: 20px; flex: none; }
.meta { font: 400 14px/20px var(--font-ui); color: var(--tinta-suave); }
.tf-hora, .hora { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Marco: móvil primero ---------- */
.marco { min-height: 100dvh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
.nav-lateral { display: none; }
.principal { min-width: 0; padding: 0 max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.detalle { display: none; }
.encabezado { position: sticky; top: 0; z-index: var(--capa-barra); background: var(--superficie); display: flex; align-items: center; gap: var(--espacio-2);
  min-height: 56px; padding: env(safe-area-inset-top) 0 0; border-bottom: 1px solid var(--linea); margin: 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding-inline: max(8px, env(safe-area-inset-left)); }
.encabezado h1 { font: 800 20px/26px var(--font-ui); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encabezado .tf-sync { font-size: 13px; }
.barra-inferior { position: fixed; inset: auto 0 0 0; z-index: var(--capa-barra); display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--superficie-elevada); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
.barra-inferior a, .barra-inferior button { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 12px/16px var(--font-ui); color: var(--tinta-suave); text-decoration: none; background: none; border: 0; cursor: pointer; }
.barra-inferior [aria-current="page"] { color: var(--menu-activo-texto, var(--accion)); box-shadow: inset 0 3px 0 var(--menu-activo-raya, var(--accion)); }
.fab { position: fixed; z-index: var(--capa-barra); right: max(16px, env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: var(--radio-total); border: 0; background: var(--flotante, var(--accion)); color: var(--sobre-flotante, var(--sobre-accion)); box-shadow: var(--sombra-2);
  display: grid; place-items: center; cursor: pointer; }
.fab .icono { width: 26px; height: 26px; }

/* Tablet: navegación lateral, detalle superpuesto */
@media (min-width: 768px) {
  .marco { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 1fr; }
  .nav-lateral { display: flex; flex-direction: column; gap: var(--espacio-1); position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    padding: var(--espacio-4) var(--espacio-2); border-right: 1px solid var(--linea); background: var(--superficie); }
  .barra-inferior, .fab { display: none; }
  .principal { padding: 0 var(--espacio-6) var(--espacio-8); }
  .encabezado { margin: 0 calc(-1 * var(--espacio-6)); padding-inline: var(--espacio-6); }
  .detalle.abierto { display: block; position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(480px, 92vw); background: var(--superficie-elevada);
    box-shadow: var(--sombra-3); overflow-y: auto; }
}
/* Escritorio: tres columnas (navegación · listado · detalle) */
@media (min-width: 1280px) {
  .marco { grid-template-columns: 264px minmax(420px, 1fr) 0; }
  .marco.con-detalle { grid-template-columns: 264px minmax(420px, 1fr) 440px; }
  .detalle.abierto { position: sticky; top: 0; height: 100dvh; width: auto; box-shadow: none; border-left: 1px solid var(--linea); inset: auto; }
}
@media (max-width: 767px) {
  .detalle.abierto { display: block; position: fixed; inset: 0; z-index: 30; background: var(--superficie-elevada); overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- Navegación lateral ---------- */
.marca { display: flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-2) var(--espacio-4); }
.marca img { width: 36px; height: 36px; }
.marca b { font: 700 18px/22px var(--font-marca); }
.nav-lateral a, .nav-lateral .nav-boton { display: flex; align-items: center; gap: var(--espacio-3); min-height: var(--area-tactil); padding: 0 var(--espacio-3);
  border-radius: var(--radio-m); color: var(--tinta); text-decoration: none; font-weight: 600; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.nav-lateral a:hover, .nav-lateral .nav-boton:hover { background: var(--superficie-hundida); }
.nav-lateral a[aria-current="page"] { background: var(--menu-activo-fondo, var(--accion-tenue)); color: var(--menu-activo-texto, var(--accion)); font-weight: 700;
  box-shadow: inset 4px 0 0 var(--menu-activo-raya, var(--accion)); }
.nav-lateral .contador { margin-left: auto; font: 600 13px/1 var(--font-ui); color: var(--tinta-suave); }
.nav-lateral .contador.vencidas { color: var(--vencida); }
.nav-lateral hr { border: 0; border-top: 1px solid var(--linea); margin: var(--espacio-2) 0; width: 100%; }
.nav-lateral .rapidas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-2); margin-bottom: var(--espacio-2); }
.nav-lateral .rapidas .tf-boton { padding: 0 var(--espacio-2); font-size: 15px; }
.nav-lateral .pie { margin-top: auto; padding: var(--espacio-4) var(--espacio-3) 0; }
.buscador { position: relative; margin-bottom: var(--espacio-2); }
.buscador input { width: 100%; min-height: var(--area-tactil); padding: 0 var(--espacio-3) 0 40px; border-radius: var(--radio-m);
  border: 1px solid var(--linea-control); background: var(--superficie-elevada); }
.buscador .icono { position: absolute; left: 12px; top: 12px; color: var(--tinta-suave); }
.buscador kbd { position: absolute; right: 10px; top: 11px; }
kbd { font: 600 12px/18px var(--font-mono); padding: 0 6px; border: 1px solid var(--linea-control); border-radius: var(--radio-s); color: var(--tinta-suave); background: var(--superficie); }

/* ---------- Bloques de contenido ---------- */
.vista { display: flex; flex-direction: column; gap: var(--espacio-6); padding-top: var(--espacio-4); }
.bloque { display: flex; flex-direction: column; gap: var(--espacio-2); }
.bloque > header { display: flex; align-items: baseline; gap: var(--espacio-2); flex-wrap: wrap; }
.bloque > header h2 { font: 700 13px/18px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); }
.bloque > header .meta { margin-left: auto; }
.tarjeta-lista { border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; background: var(--superficie-elevada); }
.tarjeta-lista .tf-tarea:last-child { border-bottom: 0; }
.vacio { border: 1px dashed var(--linea-control); border-radius: var(--radio-l); padding: var(--espacio-6) var(--espacio-4); text-align: center; color: var(--tinta-suave); }
.vacio strong { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 4px; }
.titulo-vista { font: 800 28px/34px var(--font-ui); }
.subtitulo { color: var(--tinta-suave); margin-top: 2px; }

/* Fila de tarea: extras sobre el componente del manual */
.tf-tarea { grid-template-columns: var(--area-tactil) minmax(0, 1fr) auto; cursor: default; }
.tf-tarea__titulo a, .tf-tarea__titulo button.enlace { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; }
.tf-tarea__titulo a:hover, .tf-tarea__titulo button.enlace:hover { text-decoration: underline; }
.tf-tarea__acciones { display: flex; align-items: center; gap: 2px; }
.tf-tarea[draggable="true"] .asa { cursor: grab; }
.tf-tarea.arrastrando { opacity: .5; }
.tf-tarea.sobre { box-shadow: inset 0 3px 0 var(--accion); }
.tf-tarea.pendiente-sync .tf-tarea__titulo::after { content: " · sin sincronizar"; color: var(--tinta-suave); font-size: 13px; }
.boton-icono { width: var(--area-tactil); height: var(--area-tactil); display: inline-grid; place-items: center; border: 0; background: none; border-radius: var(--radio-m);
  color: var(--tinta-suave); cursor: pointer; }
.boton-icono:hover { background: var(--superficie-hundida); color: var(--tinta); }
.boton-icono[aria-pressed="true"] { color: var(--accion); background: var(--accion-tenue); }
.boton-icono[disabled] { opacity: .4; cursor: not-allowed; }
.deslizando { transition: none; }
.fondo-deslizar { background: var(--completada-fondo); }

/* Creación rápida en línea */
.rapida { display: flex; gap: var(--espacio-2); align-items: center; padding: var(--espacio-1) var(--espacio-2) var(--espacio-1) 0; border-top: 1px solid var(--linea); background: var(--superficie-elevada); }
.rapida .icono-mas { width: var(--area-tactil); display: grid; place-items: center; color: var(--accion); }
.rapida input { flex: 1; min-width: 0; min-height: var(--area-tactil); border: 0; background: transparent; padding: 0; }
.rapida input:focus-visible { outline: none; }
.rapida:focus-within { box-shadow: inset 0 0 0 2px var(--accion); }

/* Pilas */
.rejilla-pilas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espacio-4); }
.tarjeta-pila { display: flex; flex-direction: column; gap: var(--espacio-3); padding: var(--espacio-4); border-radius: var(--radio-l); background: var(--superficie-elevada);
  border: 1px solid var(--linea); box-shadow: var(--sombra-1); color: inherit; text-decoration: none; min-height: 150px; }
.tarjeta-pila:hover { border-color: var(--linea-control); }
.tarjeta-pila h3 { font: 700 18px/24px var(--font-ui); }
.tarjeta-pila .pie-tarjeta { margin-top: auto; display: flex; align-items: center; gap: var(--espacio-2); flex-wrap: wrap; }
.rol { font: 700 12px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); border: 1px solid var(--linea-control); border-radius: var(--radio-s); padding: 1px 6px; }
.fila-enlace { display: flex; align-items: center; gap: var(--espacio-3); min-height: 56px; padding: var(--espacio-2) var(--espacio-4); color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--linea); background: var(--superficie-elevada); }
.fila-enlace:last-child { border-bottom: 0; }
.fila-enlace:hover { background: var(--superficie-hundida); }
.fila-enlace .texto { flex: 1; min-width: 0; }
.fila-enlace .texto b { display: block; overflow-wrap: anywhere; }

/* Detalle de tarea */
.panel { padding: 0 var(--espacio-4) var(--espacio-8); display: flex; flex-direction: column; gap: var(--espacio-4); }
.panel-encabezado { position: sticky; top: 0; z-index: 2; background: var(--superficie-elevada); display: flex; align-items: center; gap: var(--espacio-1);
  min-height: 56px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--linea); margin: 0 calc(-1 * var(--espacio-4)); padding-inline: var(--espacio-2); }
.panel-encabezado .ruta { flex: 1; min-width: 0; font-size: 14px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo-editable { width: 100%; font: 700 22px/28px var(--font-ui); border: 1px solid transparent; border-radius: var(--radio-m); padding: 6px 8px; margin-left: -8px;
  background: transparent; resize: none; overflow: hidden; }
.titulo-editable:hover { border-color: var(--linea); }
.titulo-editable:focus-visible { outline: 2px solid var(--accion); outline-offset: 0; }
.campos { display: grid; grid-template-columns: 1fr; gap: var(--espacio-3); }
.campo-fila { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: var(--espacio-2); min-height: var(--area-tactil); }
.campo-fila > label, .campo-fila > .etiqueta-campo { font: 600 14px/20px var(--font-ui); color: var(--tinta-suave); }
.campo-fila input[type="date"], .campo-fila input[type="time"], .campo-fila input[type="datetime-local"], .campo-fila select, .control {
  min-height: var(--area-tactil); border: 1px solid var(--linea-control); border-radius: var(--radio-m); background: var(--superficie-elevada); padding: 0 var(--espacio-3); max-width: 100%; }
.campo-fila .en-linea { display: flex; flex-wrap: wrap; gap: var(--espacio-2); align-items: center; min-width: 0; }
@media (max-width: 420px) { .campo-fila { grid-template-columns: 1fr; gap: 2px; } }
.casilla-texto { display: flex; align-items: center; gap: var(--espacio-2); min-height: var(--area-tactil); cursor: pointer; }
.casilla-texto input { width: 22px; height: 22px; accent-color: var(--accion); margin: 0; }
.fichas { display: flex; flex-wrap: wrap; gap: var(--espacio-1); }
.ficha { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; min-height: 32px; border-radius: var(--radio-total); background: var(--superficie-hundida); font-size: 14px; }
.ficha button { width: 28px; height: 28px; border: 0; background: none; border-radius: var(--radio-total); cursor: pointer; color: var(--tinta-suave); }
.seccion-detalle { border-top: 1px solid var(--linea); padding-top: var(--espacio-4); display: flex; flex-direction: column; gap: var(--espacio-2); }
.seccion-detalle > h3 { font: 700 13px/18px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); }
.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-2); }
.historial li { display: grid; grid-template-columns: 20px 1fr; gap: var(--espacio-2); font-size: 14px; line-height: 20px; }
.historial li .icono { width: 16px; height: 16px; margin-top: 2px; color: var(--tinta-suave); }
.seguimiento { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; }
.seguimiento li { display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); border-bottom: 1px solid var(--linea); }
.seguimiento li:last-child { border-bottom: 0; }
.barra-avance { height: 8px; border-radius: var(--radio-total); background: var(--superficie-hundida); overflow: hidden; }
.barra-avance > span { display: block; height: 100%; background: var(--completada); }

/* Editor colaborativo */
.editor-marco { border: 1px solid var(--linea-control); border-radius: var(--radio-l); background: var(--superficie-elevada); }
.editor-marco:focus-within { border-color: var(--accion); box-shadow: 0 0 0 1px var(--accion); }
.barra-editor { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--linea); position: sticky; top: 56px; background: var(--superficie-elevada); z-index: 1; border-radius: var(--radio-l) var(--radio-l) 0 0; }
.barra-editor .separador { width: 1px; background: var(--linea); margin: 8px 4px; }
.barra-editor button { min-width: var(--area-tactil); height: var(--area-tactil); border: 0; background: none; border-radius: var(--radio-m); cursor: pointer; color: var(--tinta); font-weight: 700; }
.barra-editor button:hover { background: var(--superficie-hundida); }
.barra-editor button[aria-pressed="true"] { background: var(--accion-tenue); color: var(--accion); }
.barra-editor button[disabled] { opacity: .4; }
.ProseMirror { min-height: 160px; padding: var(--espacio-4); outline: none; overflow-wrap: anywhere; }
.nota .ProseMirror { min-height: 50vh; font-size: 17px; line-height: 28px; }
.ProseMirror p { margin: 0 0 .7em; }
.ProseMirror h1 { font: 800 26px/32px var(--font-ui); margin: .6em 0 .3em; }
.ProseMirror h2 { font: 700 21px/28px var(--font-ui); margin: .6em 0 .3em; }
.ProseMirror h3 { font: 700 18px/24px var(--font-ui); margin: .6em 0 .3em; }
.ProseMirror blockquote { border-left: 3px solid var(--linea-control); margin: 0 0 .7em; padding-left: 12px; color: var(--tinta-suave); }
.ProseMirror pre { background: var(--superficie-hundida); padding: 12px; border-radius: var(--radio-m); overflow-x: auto; font-family: var(--font-mono); }
.ProseMirror code { font-family: var(--font-mono); background: var(--superficie-hundida); padding: 1px 4px; border-radius: 4px; }
.ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--tinta-suave); float: left; height: 0; pointer-events: none; }
.collaboration-cursor__caret { position: relative; margin-left: -1px; margin-right: -1px; border-left: 2px solid; word-break: normal; pointer-events: none; }
.collaboration-cursor__label { position: absolute; top: -1.4em; left: -2px; font: 700 11px/16px var(--font-ui); padding: 1px 6px; border-radius: 4px 4px 4px 0;
  color: var(--superficie-elevada); white-space: nowrap; user-select: none; }
.estado-guardado { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tinta-suave); }

/* Nota a pantalla completa */
.nota { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--espacio-3); padding-top: var(--espacio-4); }
.nota .titulo-editable { font-size: 28px; line-height: 34px; }
.barra-nota { display: flex; align-items: center; gap: var(--espacio-2); flex-wrap: wrap; }
.barra-nota .tf-avatares { margin-right: auto; }

/* Versiones */
.versiones { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--espacio-4); }
@media (max-width: 800px) { .versiones { grid-template-columns: 1fr; } }
.lista-versiones { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; background: var(--superficie-elevada); }
.lista-versiones button { display: flex; gap: var(--espacio-2); align-items: flex-start; width: 100%; text-align: left; padding: var(--espacio-3); border: 0; border-bottom: 1px solid var(--linea); background: none; cursor: pointer; min-height: 56px; }
.lista-versiones button[aria-current="true"] { background: var(--accion-tenue); }
.marca-version { font: 700 11px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radio-s); white-space: nowrap; }
.marca-version.final { background: var(--accion); color: var(--sobre-accion); }
.marca-version.auto { border: 1px dashed var(--linea-control); color: var(--tinta-suave); }
.vista-previa { border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--superficie-elevada); padding: var(--espacio-4); min-height: 300px; overflow-wrap: anywhere; }

/* Calendario */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; background: var(--superficie-elevada); }
.calendario .dia-semana { font: 700 12px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); padding: 8px; border-bottom: 1px solid var(--linea); text-align: center; }
.calendario .celda { min-height: 104px; padding: 4px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calendario .celda:nth-child(7n) { border-right: 0; }
.calendario .celda.fuera { background: var(--superficie); color: var(--tinta-suave); }
.calendario .celda.hoy .num { background: var(--accion); color: var(--sobre-accion); border-radius: var(--radio-total); }
.calendario .num { width: 28px; height: 28px; display: grid; place-items: center; font: 600 14px/1 var(--font-ui); }
.calendario .evento { display: block; font-size: 12px; line-height: 16px; padding: 2px 4px; border-radius: 4px; background: var(--superficie-hundida); color: var(--tinta);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; text-align: left; cursor: pointer; width: 100%; }
.calendario .evento.vencida { background: var(--vencida-fondo); color: var(--vencida); }
.calendario .evento.hecha { text-decoration: line-through; color: var(--tinta-suave); }
.calendario-marco { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--espacio-4); align-items: start; }
@media (max-width: 1100px) { .calendario-marco { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .calendario .celda { min-height: 64px; } .calendario .evento span.texto { display: none; } .calendario .evento { width: 8px; height: 8px; padding: 0; border-radius: 99px; background: var(--accion); } .calendario .evento.vencida { background: var(--vencida); } }

/* Filtros */
.filtros { display: flex; gap: var(--espacio-2); flex-wrap: wrap; align-items: center; }
.filtros select { min-height: var(--area-tactil); border: 1px solid var(--linea-control); border-radius: var(--radio-m); background: var(--superficie-elevada); padding: 0 var(--espacio-3); }

/* Diálogos */
dialog { border: 0; border-radius: var(--radio-l); background: var(--superficie-elevada); color: var(--tinta); padding: 0; width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); box-shadow: var(--sombra-3); }
dialog::backdrop { background: rgba(10, 11, 20, .5); }
dialog .cuerpo-dialogo { padding: var(--espacio-6); display: flex; flex-direction: column; gap: var(--espacio-4); }
dialog h2 { font: 700 20px/26px var(--font-ui); }
dialog .acciones { display: flex; gap: var(--espacio-2); justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 600px) { dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; } }

/* Menú contextual */
.menu { position: fixed; z-index: 60; min-width: 220px; background: var(--superficie-elevada); border: 1px solid var(--linea); border-radius: var(--radio-m); box-shadow: var(--sombra-2); padding: 4px; }
.menu [role="menuitem"] { display: flex; align-items: center; gap: var(--espacio-2); width: 100%; min-height: var(--area-tactil); padding: 0 var(--espacio-3); border: 0; background: none;
  border-radius: var(--radio-s); text-align: left; cursor: pointer; }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus { background: var(--superficie-hundida); outline: none; }
.menu [role="menuitem"][aria-disabled="true"] { color: var(--tinta-suave); cursor: not-allowed; }
.menu hr { border: 0; border-top: 1px solid var(--linea); margin: 4px 0; }

/* Avisos y conexión */
.zona-avisos { position: fixed; z-index: var(--capa-aviso); left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); }
@media (min-width: 768px) { .zona-avisos { bottom: 24px; } }
.franja-conexion { position: sticky; top: 56px; z-index: 9; margin: var(--espacio-2) 0 0; }
.tf-sin-conexion .icono { width: 20px; height: 20px; }
.tf-sync-boton { border: 0; background: none; cursor: pointer; padding: 0 8px; border-radius: var(--radio-m); }
.tf-sync-boton:hover { background: var(--superficie-hundida); }

/* Inicio de sesión */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: var(--espacio-6) max(16px, env(safe-area-inset-left)); }
.acceso .caja { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--espacio-4); background: var(--superficie-elevada); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: var(--espacio-8) var(--espacio-6); box-shadow: var(--sombra-1); }
.acceso .logo { background: #FFFFFF; border-radius: var(--radio-m); padding: 8px; align-self: flex-start; }
.acceso .logo img { height: 56px; width: auto; display: block; }
.acceso h1 { font: 800 26px/32px var(--font-ui); }
.acceso .firma { font: 700 14px/18px var(--font-marca); color: var(--tinta-suave); text-align: center; }
.error-form { color: var(--error); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }

/* Zona de carga de adjuntos */
.zona-carga { border: 2px dashed var(--linea-control); border-radius: var(--radio-l); padding: var(--espacio-4); text-align: center; display: flex; flex-direction: column; gap: var(--espacio-2); align-items: center; }
.zona-carga.sobre { border-color: var(--accion); background: var(--accion-tenue); }
.lista-adjuntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-1); }
.lista-adjuntos li { display: flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-1) var(--espacio-2); border: 1px solid var(--linea); border-radius: var(--radio-m); }
.lista-adjuntos .texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
progress { width: 100%; height: 8px; accent-color: var(--accion); }

/* Esqueletos */
.esqueleto { background: var(--superficie-hundida); border-radius: var(--radio-m); height: 56px; }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto { animation: pulso 1.2s ease-in-out infinite alternate; }
  @keyframes pulso { from { opacity: .55; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Tablas del panel */
.tabla-marco { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--superficie-elevada); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { font: 700 12px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.tabla tr:last-child td { border-bottom: 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espacio-3); }
.cifra { border: 1px solid var(--linea); border-radius: var(--radio-l); padding: var(--espacio-4); background: var(--superficie-elevada); }
.cifra b { display: block; font: 800 24px/30px var(--font-ui); font-variant-numeric: tabular-nums; }

/* Notificaciones */
.lista-notif { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; background: var(--superficie-elevada); }
.lista-notif li a { display: grid; grid-template-columns: 12px 1fr; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border-bottom: 1px solid var(--linea); color: inherit; text-decoration: none; }
.lista-notif li:last-child a { border-bottom: 0; }
.lista-notif .punto { width: 10px; height: 10px; border-radius: 99px; margin-top: 7px; background: var(--accion); }
.lista-notif .leida .punto { background: transparent; border: 1px solid var(--linea-control); }
.insignia { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accion); color: var(--sobre-accion); font: 700 12px/20px var(--font-ui); text-align: center; }
.instalar { border: 1px solid var(--linea); border-radius: var(--radio-l); padding: var(--espacio-4); background: var(--superficie-elevada); display: flex; gap: var(--espacio-3); align-items: center; flex-wrap: wrap; }
.instalar img { width: 48px; height: 48px; border-radius: 12px; }

/* ---------- Selector de paletas (perfil) · 2026-11-03 ---------- */
.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--espacio-2); }
.paleta { display: grid; grid-template-columns: auto 56px 1fr; align-items: center; gap: var(--espacio-2); min-height: var(--area-tactil);
  padding: var(--espacio-2); border: 1px solid var(--linea); border-radius: var(--radio-m); background: var(--superficie-elevada); cursor: pointer; }
.paleta:has(input:checked) { border: 2px solid var(--accion); background: var(--accion-tenue); }
.paleta input { width: 20px; height: 20px; accent-color: var(--accion); margin: 0; }
.paleta input:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.paleta__muestra { display: flex; gap: 3px; padding: 6px; border-radius: var(--radio-s); border: 1px solid var(--linea); }
.paleta__muestra span { flex: 1; height: 20px; border-radius: 3px; }
.paleta__nombre { display: flex; flex-direction: column; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.paleta__nombre .meta { font-weight: 400; }

/* ---------- Franja de marca (2026-11-03) ----------
   Índigo, naranja y fucsia del logo en partes iguales, arriba de la app y de la tarjeta de entrada.
   Solo se ve en la paleta Leo Doncel: las demás definen --franja-alto: 0px. */
body::after { content: ""; position: fixed; z-index: calc(var(--capa-dialogo) + 1); left: 0; right: 0; top: 0;
  height: calc(var(--franja-alto, 0px) + env(safe-area-inset-top, 0px)); pointer-events: none;
  background: linear-gradient(90deg, var(--franja-indigo, var(--marca-indigo)) 0 33.34%, var(--marca-naranja) 33.34% 66.67%, var(--marca-magenta) 66.67% 100%); }
#app { padding-top: var(--franja-alto, 0px); }
.encabezado { top: var(--franja-alto, 0px); }
.acceso .caja { position: relative; overflow: hidden; }
.acceso .caja::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--franja-alto, 0px) * 1.5);
  background: linear-gradient(90deg, var(--franja-indigo, var(--marca-indigo)) 0 33.34%, var(--marca-naranja) 33.34% 66.67%, var(--marca-magenta) 66.67% 100%); }
@media (min-width: 768px) {
  .nav-lateral, .detalle.abierto { top: var(--franja-alto, 0px); height: calc(100dvh - var(--franja-alto, 0px)); }
}