/* Estilos de la app. Colores y medidas salen de marca/tokens.css.
   Diseño pensado primero para el móvil (360–430 px); el ordenador se ajusta al final con @media. */

/* Tokens propios de la app (medidas de la maqueta y tipografía), basados en la guía de marca. */
:root {
  --barra-w: 260px;
  --asistente-w: 380px;
  --pagina-w: 820px;
  --superior-h: 52px;
  --inferior-h: 60px;
  --toque: 44px;            /* zona táctil mínima */
  --ico: 18px;
  --emoji-grande: 72px;
  --portada-h: 120px;
  --menu-w: 280px;
  --menu-h: 360px;
  --tarjeta-min: 150px;
  --dialogo-w: 860px;
  --dialogo-h: 600px;
  --ajustes-menu-w: 200px;
  --toque-escritorio: 32px;
  --pagina-tabla-w: 1100px; /* las páginas-tabla son más anchas */
  --col-w: 140px;           /* ancho mínimo de columna */
  --col-titulo-w: 200px;    /* ancho mínimo de la columna de título (fija) */
  --punto: 8px;             /* punto de color del estado */
  --dialogo-chico-w: 380px;
  --conexion-min: 280px;    /* ancho mínimo de una tarjeta de conexión */
  --burbuja-max: 92%;       /* ancho máximo de un mensaje del chat */
  --video-min: 260px;       /* ancho mínimo de una tarjeta de la Videoteca */
  --video-local-h: 70dvh;   /* alto máximo de un vídeo subido (los verticales del móvil) */
  --fs-titulo: 34px;
  --fs-h1: 24px;
  --fs-h2: 19px;
  --fs-h3: 16.5px;
  --fs-ui: 14px;
  --fs-small: 13px;
  --fs-eyebrow: 11.5px;
  --fs-cifra: 30px;         /* cifras grandes de las estadísticas (guía: 30/34 700) */
  --grafico-h: 200px;       /* alto de la zona de dibujo de un gráfico */
  --stat-min: 140px;        /* ancho mínimo de una tarjeta de estadística */
  --velo: var(--velo-color);
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
  --on-danger: var(--surface-page); /* texto sobre botones rojos (borrar): contrasta en los tres temas */
  --ventana-w: 420px;       /* ancho de las ventanas de confirmar y preguntar */
  --ventana-ancha-w: 640px; /* ventanas con contenido (vista previa de «Combinar con CSV») */
  --combinar-lista-h: 220px; /* alto máximo de cada lista de la vista previa */
  --vistazo-w: 50vw;        /* ancho del panel "a un lado" (se cambia arrastrando su borde) */
  --vistazo-min: 320px;     /* ancho mínimo del panel y de la zona central a su lado */
  --vistazo-hoja-h: 88dvh;  /* alto de la hoja inferior en el móvil */
  --sangria: 0;             /* nivel de un bloque dentro de desplegables */
  --sangria-w: var(--space-6); /* sangría por nivel */
  --tablero-col-w: 272px;   /* ancho de una columna del tablero en ordenador */
  --previa-w: 300px;        /* ancho de la tarjeta de vista previa de una página */
  --web-h: 480px;           /* alto por defecto de una web incrustada (cada bloque guarda el suyo) */
}
/* Temas (claro, oscuro y negro) y color-scheme de los controles nativos: en marca/tokens.css (única fuente de colores). */

* { box-sizing: border-box; }
body { min-height: 100dvh; background: var(--surface-page); overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.k-check { position: relative; }
.k-check::after { content: ""; position: absolute; inset: calc(-1 * var(--space-3)); } /* zona táctil más grande que la casilla */
:where(button, input, textarea, select, summary, [contenteditable], a):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ico { width: var(--ico); height: var(--ico); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tenue { color: var(--text-muted); }
.eyebrow { margin: 0; font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.solo-escritorio { display: none !important; }

/* Botón de icono: 44 px en el móvil para el dedo */
.btn-ico { display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); flex: none; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); }
.btn-ico:hover { background: var(--surface-hover); color: var(--text); }
.btn-ico:disabled { opacity: .35; cursor: default; background: transparent; }
.btn-ico.es-favorita { color: var(--warning); }
.btn-ico.es-favorita .ico { fill: currentColor; }

/* ---------- Maqueta ---------- */
.app { display: flex; height: 100dvh; }
.centro { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-bottom: calc(var(--inferior-h) + var(--seguro-abajo)); }
.lienzo { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* Barra superior */
.superior { display: flex; align-items: center; gap: var(--space-1); min-height: calc(var(--superior-h) + var(--seguro-arriba)); padding: var(--seguro-arriba) calc(var(--space-2) + var(--seguro-der)) 0 calc(var(--space-2) + var(--seguro-izq)); border-bottom: 1px solid var(--line); background: var(--surface-page); }
.migas { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-1); overflow: hidden; font-size: var(--fs-ui); white-space: nowrap; }
.migas__enlace { min-height: var(--toque); border: 0; background: none; color: var(--text-muted); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.migas__enlace:hover { background: var(--surface-hover); color: var(--text); }
.migas__actual { font-weight: 500; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--space-2); }
.migas__sep { color: var(--text-faint); }

/* Barra lateral: panel deslizante desde la izquierda en el móvil */
.barra { position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(var(--barra-w), 86vw); overflow-y: auto; padding-top: calc(var(--space-3) + var(--seguro-arriba)); padding-bottom: calc(var(--space-3) + var(--seguro-abajo)); padding-left: calc(var(--space-2) + var(--seguro-izq)); transform: translateX(-105%); transition: transform .22s ease; }
.menu-abierto .barra { transform: none; box-shadow: var(--shadow-card); }
.velo { position: fixed; inset: 0; z-index: 25; background: var(--velo); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.menu-abierto .velo { opacity: 1; pointer-events: auto; }
.k-sidebar__ws span { flex: 1; min-width: 0; }
.k-side-item { min-height: var(--toque); }
.k-side-item .ico { width: var(--ico); }
.barra__busqueda { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; padding: 0 var(--space-3); min-height: var(--toque); border-radius: var(--radius-sm); background: var(--surface-hover); color: var(--text-muted); }
.barra__buscar { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--fs-ui); }
.barra__seccion { display: flex; align-items: center; justify-content: space-between; }
.barra__vacio { font-size: var(--fs-small); color: var(--text-muted); padding: var(--space-2); }
.barra__pie { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.barra__nueva { margin-top: var(--space-3); width: 100%; height: var(--toque); }
.barra__nueva .ico { stroke: var(--on-accent); }

/* Árbol de páginas */
.arbol__fila { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--nivel) * var(--space-4)); border-radius: var(--radius-sm); }
.arbol__fila:hover, .arbol__fila.es-actual { background: var(--surface-hover); }
.arbol__fila.es-actual { box-shadow: inset 3px 0 0 var(--brand-teal); }
.arbol__plegar { display: grid; place-items: center; width: var(--toque); height: var(--toque); flex: none; border: 0; background: none; color: var(--text-faint); padding: 0; border-radius: var(--radius-xs); }
.arbol__plegar .ico { transition: transform .15s ease; width: var(--space-4); }
.arbol__plegar[aria-expanded="true"] .ico { transform: rotate(90deg); }
.arbol__nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: var(--toque); border: 0; background: none; text-align: left; color: var(--text-muted); font-size: var(--fs-ui); font-weight: 500; padding: 0 var(--space-1); }
.arbol__fila.es-actual .arbol__nombre, .arbol__nombre:hover { color: var(--text); }
.arbol__acciones { display: flex; flex: none; }
.arbol__mas { display: none; } /* en el móvil, "Añadir subpágina" está dentro del menú ⋯ */
.arbol__renombrar { flex: 1; min-width: 0; min-height: var(--toque); border: 1px solid var(--focus-ring); border-radius: var(--radius-xs); background: var(--surface-raised); padding: 0 var(--space-2); font-size: var(--fs-ui); }

/* Barra inferior fija (móvil) */
.inferior { position: fixed; z-index: 20; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-around; height: calc(var(--inferior-h) + var(--seguro-abajo)); padding: 0 var(--seguro-der) var(--seguro-abajo) var(--seguro-izq); background: var(--surface-sidebar); border-top: 1px solid var(--line); }
.inferior__boton { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--toque); border: 0; background: none; color: var(--text-muted); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; }
.inferior__boton[aria-current="page"] { color: var(--accent-text); }
.inferior__nueva { display: grid; place-items: center; width: var(--toque); height: var(--toque); border: 0; border-radius: var(--radius-pill); background: var(--acento); color: var(--on-accent); }

/* Asistente: pantalla completa en el móvil */
.asistente { position: fixed; z-index: 40; inset: 0; display: flex; flex-direction: column; background: var(--surface-sidebar); padding: var(--seguro-arriba) var(--seguro-der) var(--seguro-abajo) var(--seguro-izq); }
.asistente[hidden] { display: none; }
.asistente__cabeza { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); color: var(--accent-text); }
.asistente__cabeza h2 { flex: 1; margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); color: var(--text); }
.asistente__cuerpo { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.asistente__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.asistente__pie { padding: var(--space-4); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); }
.asistente__nota { margin: 0; font-size: var(--fs-small); color: var(--text-faint); }
.campo { width: 100%; min-height: var(--toque); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--control-border); background: var(--surface-raised); resize: vertical; }
.campo:disabled { opacity: .55; }
/* Chat del asistente */
.burbuja { display: flex; flex-direction: column; gap: var(--space-1); max-width: var(--burbuja-max); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-ui); }
.burbuja--yo { align-self: flex-end; background: var(--tag-teal-bg); }
.burbuja--ia { align-self: flex-start; background: var(--surface-raised); border: 1px solid var(--line); }
.burbuja--error { border-color: var(--danger); color: var(--danger); }
.burbuja__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip { max-width: 100%; overflow: hidden; height: auto; min-height: var(--toque); } /* alto táctil para su botón ✕ */
.chip__quitar { display: inline-grid; place-items: center; min-width: var(--toque); min-height: var(--toque); padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: inherit; }
.asistente__enviar { margin-left: auto; }
.k-callout__body .k-btn { margin-top: var(--space-2); }

/* ---------- Página ---------- */
.pagina { padding-bottom: var(--space-12); }
.portada { position: relative; }
.portada__quitar { position: absolute; right: var(--space-4); bottom: var(--space-3); }
.pagina__cuerpo { max-width: var(--pagina-w); margin: 0 auto; padding: 0 var(--space-4); }
.pagina__cabeza { display: flex; align-items: flex-end; gap: var(--space-3); }
.sin-portada .pagina__cabeza { padding-top: var(--space-8); }
.sin-portada .k-page__icon { margin-top: 0; }
.emoji-grande { border: 0; padding: 0; cursor: pointer; width: var(--emoji-grande); height: var(--emoji-grande); }
.titulo { outline: none; overflow-wrap: anywhere; }
[data-ph]:empty::before { content: attr(data-ph); color: var(--text-faint); pointer-events: none; }

/* Bloques: contenido + controles (subir, bajar, borrar) */
.bloques { display: flex; flex-direction: column; gap: 2px; }
.bloque { position: relative; display: flex; align-items: flex-start; gap: var(--space-1); border-radius: var(--radius-sm); }
.bloque__contenido { flex: 1; min-width: 0; padding: var(--space-1) 0; }
.bloque__ctrl { display: none; flex: none; }
.bloque__ctrl .btn-ico { width: var(--toque); height: var(--toque); }
/* En el móvil los controles salen al tocar el bloque (y siempre en divisores y enlaces). */
.bloque:focus-within .bloque__ctrl, .bloque--divider .bloque__ctrl, .bloque--link .bloque__ctrl { display: flex; }
.editable { outline: none; min-height: 1.55em; white-space: pre-wrap; overflow-wrap: anywhere; }
.editable[data-ph]:empty::before { content: ""; }
.bloque--p .editable:focus:empty::before, .bloque:not(.bloque--p) .editable:empty::before { content: attr(data-ph); }
.bloque--h1 .editable { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.25; font-weight: 700; margin-top: var(--space-6); }
.bloque--h2 .editable { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.35; font-weight: 600; margin-top: var(--space-5); }
.bloque--h3 .editable { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; margin-top: var(--space-3); }
.lista { display: flex; gap: var(--space-2); }
.lista__marca { flex: none; min-width: var(--space-5); color: var(--accent-text); font-weight: 700; text-align: right; }
.bloque--todo .k-todo { padding: 0; }
.bloque--todo .editable { flex: 1; min-width: 0; }
.tarea--hecha .editable { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.cuadro { align-items: flex-start; }
.cuadro .k-callout__body { flex: 1; }
.cuadro__emoji { border: 0; background: none; padding: 0; cursor: pointer; border-radius: var(--radius-xs); }
.cuadro__color { flex: none; border: 1px solid var(--line); background: var(--surface-raised); color: var(--text-muted); border-radius: var(--radius-pill); font-size: var(--fs-small); padding: 0 var(--space-3); min-height: var(--toque); }
.divisor { border: 0; border-top: 1px solid var(--line); margin: var(--space-3) 0; }
.enlace { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--toque); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; text-align: left; font-weight: 500; }
.enlace:hover { background: var(--surface-hover); }
.enlace__texto { flex: 1; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.enlace .ico { color: var(--text-faint); }
.enlace--vacio { color: var(--text-muted); border: 1px dashed var(--control-border); }
.bloques__nuevo { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); min-height: var(--toque); padding: 0 var(--space-2); border: 0; background: none; color: var(--text-faint); border-radius: var(--radius-sm); }
.bloques__nuevo:hover { background: var(--surface-hover); color: var(--text); }

/* ---------- Tablas ---------- */
.pagina--tabla .pagina__cuerpo { max-width: var(--pagina-tabla-w); }
.tabla { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); min-width: 0; }
.tabla__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tabla__barra .k-btn { height: var(--toque); }
.tabla__filtro { flex: 1 1 var(--col-titulo-w); width: auto; }
.tabla__marco { border: 1px solid var(--line); border-radius: var(--radius-md); }
.tabla__vacia { margin: 0; font-size: var(--fs-small); }
.tabla .k-table th, .tabla .k-table td { min-width: var(--col-w); padding: var(--space-1) var(--space-3); }
/* Primera columna (título) fija al desplazar en horizontal */
.tabla .k-table .celda-fija { position: sticky; left: 0; z-index: 1; min-width: var(--col-titulo-w); max-width: 60vw; background: var(--surface-page); box-shadow: inset -1px 0 0 var(--line); }
.tabla .k-table tr.fila:hover .celda-fija { background: var(--surface-hover); }
.tabla .k-table .columna-nueva { min-width: var(--toque); }
.columna { display: flex; align-items: center; gap: var(--space-2); min-height: var(--toque); border: 0; background: none; padding: 0; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.columna__tipo { color: var(--text-faint); }
.celda__campo { width: 100%; min-width: 0; min-height: var(--toque); border: 0; background: none; padding: 0; font-size: var(--fs-ui); }
.celda__campo::placeholder { color: var(--text-faint); }
.celda__fila { display: flex; align-items: center; gap: var(--space-1); }
.celda__fila .k-progress { flex: 1; min-width: var(--col-w); }
.celda__fila .celda__num { width: var(--space-12); flex: none; text-align: right; }
/* Anchos de columna (etapa 9b): table-layout fijo con <colgroup> (tabla.js); lo largo se recorta con «…» */
.tabla .k-table.k-table--anchos { table-layout: fixed; width: max(100%, var(--tabla-w, 100%)); }
.tabla .k-table--anchos th, .tabla .k-table--anchos td { min-width: 0; max-width: none; overflow: hidden; }
.tabla .k-table--anchos th:not(.celda-fija) { position: relative; }
.tabla .k-table--anchos th { padding-right: var(--space-4); }
.k-table--anchos .celda__fila { min-width: 0; }
.k-table--anchos .celda__fila > .celda__campo { flex: 1 1 0; min-width: 0; }
.k-table--anchos .celda__campo { text-overflow: ellipsis; outline-offset: -2px; }
.k-table--anchos .celda__fila .k-progress { min-width: 0; }
.k-table--anchos .columna { min-width: 0; max-width: 100%; overflow: hidden; }
.col-asa { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: var(--space-3); cursor: col-resize; touch-action: none; }
.col-asa::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 0; width: 2px; border-radius: 1px; background: transparent; transition: background .15s ease; }
th:hover > .col-asa::after { background: var(--line); }
.col-asa:hover::after, .col-asa:focus-visible::after, .col-asa:active::after { background: var(--brand-teal); }
.col-asa:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.k-table--redimensionando, .k-table--redimensionando * { cursor: col-resize; user-select: none; }
@media (pointer: coarse) { .col-asa { width: var(--space-5); } .col-asa::after { background: var(--line); } }
/* Copia invisible para medir el contenido más largo (doble clic en el asa) */
.tabla__medida { position: fixed; left: -9999px; top: 0; visibility: hidden; width: auto; table-layout: auto; }
.tabla__medida td, .tabla__medida th { width: auto; min-width: 0; max-width: none; white-space: nowrap; overflow: visible; position: static; }
.tabla__medida .celda__fila { display: inline-flex; }
.celda__boton { display: flex; align-items: center; width: 100%; min-height: var(--toque); border: 0; background: none; padding: 0; text-align: left; }
.k-progress__val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fila--tocable { cursor: pointer; }
.fila__abrir { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--toque); border: 0; background: none; padding: 0; text-align: left; font-weight: 500; }
.grupo td { background: var(--surface-sidebar); }
.grupo__cabeza { position: sticky; left: 0; display: inline-flex; align-items: center; gap: var(--space-3); }
.fila-nueva .grupo__cabeza { display: flex; width: var(--col-titulo-w); }
.grupo__plegar { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--toque); border: 0; background: none; padding: 0; }
.grupo__plegar .ico { width: var(--space-4); transition: transform .15s ease; }
.grupo__plegar[aria-expanded="true"] .ico { transform: rotate(90deg); }
.grupo__cuenta { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Estado: punto de color + palabra (nunca solo color) */
.estado { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.estado::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--radius-pill); background: transparent; box-shadow: inset 0 0 0 1.5px var(--tenue); }
/* Rediseño: el color solo dice el estado (por su grupo): verde = Listo, ámbar = En curso, aro gris = Sin empezar. */
.estado--hecho::before { background: var(--acento); box-shadow: none; }
.estado--encurso::before { background: var(--en-curso); box-shadow: none; }
.estado--porhacer { color: var(--secundario); }
.muestra { display: inline-block; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--line); }
.propiedades { margin: 0 0 var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.propiedades dd { min-width: 0; }
.incrustada { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bloque--tabla .bloque__ctrl { display: flex; }

/* ---------- Gráficos y estadísticas ---------- */
.bloque--grafico .bloque__ctrl, .bloque--estadisticas .bloque__ctrl { display: flex; }
.grafico, .estadisticas { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; min-width: 0; }
.grafico__barra { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
.grafico__lienzo { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); }
.grafico__lienzo svg { display: block; }
.grafico__marca { cursor: pointer; }
.grafico__dato { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - var(--space-2))); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--text); color: var(--surface-page); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.grafico__vacio { margin: 0; padding: var(--space-5); color: var(--text-muted); text-align: center; font-size: var(--fs-small); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.grafico__lienzo .grafico__vacio { border: 0; }
.grafico__config:not(:empty) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tarjeta-min)), 1fr)); gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-sidebar); }
.grafico__config > .k-row, .grafico__tarjeta { grid-column: 1 / -1; }
.grafico__par { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.grafico__par > * { flex: 1 1 var(--tarjeta-min); }
.grafico__par > .k-btn { flex: none; }
.grafico__tarjeta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tarjeta-min)), 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.grafico__tarjeta legend { padding: 0 var(--space-1); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.estadisticas__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--stat-min)), 1fr)); gap: var(--space-3); }
.estadisticas__fila > .grafico__vacio { grid-column: 1 / -1; }
.stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); min-width: 0; }
.stat p { margin: 0; }
.stat__etiqueta { display: flex; gap: var(--space-2); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.stat__cifra { font-family: var(--font-display); font-size: var(--fs-cifra); line-height: 1.13; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.stat .k-progress { min-width: 0; }

/* Selector de emojis: pestañas de categorías */
.menu__pestanas { display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--line); flex: none; }
.menu__pestana { flex: none; display: grid; place-items: center; width: var(--toque); height: var(--toque); border: 0; border-radius: var(--radius-sm); background: none; font-size: var(--fs-h3); opacity: .6; }
.menu__pestana[aria-selected="true"] { background: var(--surface-hover); opacity: 1; }

/* Ventana pequeña (instrucciones para instalar en iPhone) */
.dialogo.dialogo--chico { width: min(var(--dialogo-chico-w), calc(100vw - 2 * var(--space-4))); height: fit-content; max-height: calc(100dvh - 2 * var(--space-4) - var(--seguro-arriba) - var(--seguro-abajo)); margin: auto; overflow-y: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.instalar { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.instalar h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); }
.instalar__pasos { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-3); }
.instalar__ico { display: inline-grid; place-items: center; width: var(--space-8); height: var(--space-8); margin-right: var(--space-2); vertical-align: middle; border-radius: var(--radius-sm); background: var(--surface-hover); color: var(--accent-text); }

/* ---------- Vistas: Inicio y Papelera ---------- */
.vista { max-width: var(--pagina-w); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); }
.vista__titulo { margin: 0; font-family: var(--font-display); font-size: var(--fs-titulo); line-height: 1.2; letter-spacing: -.02em; }
.vista__sub { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--fs-h2); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tarjeta-min), 1fr)); gap: var(--space-3); }
.tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); text-align: left; min-width: 0; transition: transform .15s ease, box-shadow .15s ease; }
button.tarjeta:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.tarjeta__emoji { font-size: var(--fs-h1); }
.tarjeta__titulo { font-family: var(--font-display); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta__ruta { font-size: var(--fs-small); color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta--apagada { opacity: .6; }
.papelera { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.papelera__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); }
.papelera__nombre { flex: 1 1 100%; font-weight: 500; }
.papelera__vacia { padding: var(--space-8); text-align: center; color: var(--text-muted); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.peligro { color: var(--danger); }
.k-btn .ico { width: var(--space-4); }

/* ---------- Menús: hoja inferior en el móvil, flotantes en el ordenador ---------- */
.menu { position: fixed; z-index: 60; width: var(--menu-w); max-height: var(--menu-h); display: flex; flex-direction: column; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.menu--hoja { left: 0; right: 0; bottom: 0; width: auto; max-height: 60dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-2) calc(var(--space-2) + var(--seguro-der)) calc(var(--space-2) + var(--seguro-abajo)) calc(var(--space-2) + var(--seguro-izq)); animation: subir .2s ease; }
@keyframes subir { from { transform: translateY(100%); } }
.menu__titulo { padding: var(--space-2) var(--space-3); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__buscar { margin-bottom: var(--space-2); min-height: var(--toque); padding: 0 var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface-page); }
.menu__lista { overflow-y: auto; display: flex; flex-direction: column; }
.menu__rejilla { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--toque), 1fr)); }
.menu__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--toque); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; text-align: left; font-size: var(--fs-ui); }
.menu__item:hover, .menu__item.es-activo { background: var(--surface-hover); }
.menu__item:disabled { opacity: .55; cursor: default; }
.menu__icono { display: grid; place-items: center; width: var(--space-6); flex: none; font-family: var(--font-display); font-weight: 700; color: var(--accent-text); }
.menu__rejilla .menu__item { justify-content: center; padding: 0; font-size: var(--fs-h2); }
.menu__etiqueta { flex: 1; }
.menu__vacio { margin: 0; padding: var(--space-3); color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- Ajustes (pantalla completa en el móvil) ---------- */
.dialogo { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--surface-page); color: var(--text); }
.dialogo::backdrop { background: var(--velo); }
.ajustes { display: flex; flex-direction: column; height: 100%; padding: var(--seguro-arriba) var(--seguro-der) var(--seguro-abajo) var(--seguro-izq); }
.ajustes__cabeza { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); border-bottom: 1px solid var(--line); }
.ajustes__cabeza h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h1); }
.ajustes__menu { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-4); overflow-x: auto; border-bottom: 1px solid var(--line); }
.ajustes__pestana { min-height: var(--toque); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-muted); font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.ajustes__pestana[aria-current="page"] { background: var(--surface-hover); color: var(--text); }
.ajustes__contenido { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.ajustes__contenido h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); display: flex; align-items: center; gap: var(--space-2); }
.etiqueta { display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
/* Ajustes: cada grupo con su alto real (no se encoge en la columna flexible) y apartados separados */
.ajustes__contenido > * { flex-shrink: 0; }
.ajustes__contenido > h3:not(:first-child) { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ajustes__contenido > .etiqueta + .etiqueta { margin-top: var(--space-1); }
.segmentos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.segmento { min-height: var(--toque); padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 1.5px solid var(--control-border); background: var(--surface-raised); font-family: var(--font-display); font-weight: 600; }
.segmento[aria-checked="true"] { background: var(--brand-teal); border-color: transparent; color: var(--on-accent); }
.segmento[aria-checked="true"]::before { content: "✓ "; }
/* Ajustes → Conexiones */
.conexiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--conexion-min)), 1fr)); gap: var(--space-3); }
.conexion { gap: var(--space-2); }
.conexion__cabeza { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; }
.conexion__nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conexion__desc { margin: 0; font-size: var(--fs-small); color: var(--text-muted); white-space: normal; }
.conexion__resultado { height: auto; min-height: var(--space-6); padding: var(--space-1) var(--space-3); white-space: normal; }
.conexiones__buscar { flex: 1 1 var(--tarjeta-min); width: auto; }
.etiqueta__ayuda { font-size: var(--fs-small); color: var(--text-faint); }
.clave { display: flex; gap: var(--space-2); align-items: center; }
.clave .campo { flex: 1; min-width: 0; }
.cabecera { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }

/* ---------- Vídeos (bloque, Videoteca y columna de tabla) ---------- */
.bloque--video .bloque__ctrl { display: flex; }
.video { margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.video__marco { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sidebar); border: 1px solid var(--line); }
.video__marco iframe { display: block; width: 100%; height: 100%; border: 0; }
.video__marco--local { aspect-ratio: auto; display: grid; place-items: center; min-height: var(--space-12); }
.video__marco--local video { display: block; width: 100%; max-height: var(--video-local-h); background: var(--brand-ink); }
.video__cargando { margin: var(--space-4); }
.video__info { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); min-width: 0; }
.video__info .recorte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video__aviso, .video__vacio .tenue { margin: 0; font-size: var(--fs-small); }
.video__pie { font-size: var(--fs-small); color: var(--text-muted); text-align: center; }
.video__vacio { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--control-border); border-radius: var(--radius-md); background: var(--surface-raised); }
.video__vacio > p { margin: 0; }
.video__fila { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.video__fila .campo { flex: 1 1 var(--tarjeta-min); width: auto; }
.video__enlace { color: var(--accent-text); overflow-wrap: anywhere; }
.videoteca { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--video-min)), 1fr)); gap: var(--space-4); }
.videoteca__tarjeta { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); min-width: 0; }
.videoteca__pie { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.celda__video { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--toque); max-width: 100%; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--accent-text); font-size: var(--fs-small); }
.dialogo.dialogo--video { height: auto; margin: auto; }
.video-ventana { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); padding: var(--space-4); padding-top: calc(var(--space-4) + var(--seguro-arriba)); }

/* ---------- Ventanas propias (confirmar, pedir un texto, elegir) ---------- */
.dialogo.ventana { width: min(var(--ventana-w), calc(100vw - 2 * var(--space-4))); max-height: calc(100dvh - 2 * var(--space-8)); margin: calc(var(--space-8) + var(--seguro-arriba)) auto auto; overflow-y: auto; border: 1px solid var(--line); background: var(--surface-raised); }
.ventana__cuerpo { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.ventana__titulo { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.35; overflow-wrap: anywhere; }
.ventana__texto { margin: 0; color: var(--text-muted); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.ventana__botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.ventana__botones .k-btn { flex: 1 1 auto; }
.dialogo.ventana.ventana--ancha { width: min(var(--ventana-ancha-w), calc(100vw - 2 * var(--space-4))); }
/* Vista previa de «Combinar con CSV» (curso.js) */
.combinar { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--fs-ui); }
.combinar__modo { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--tag-teal-bg); }
.combinar__grupo { border: 1px solid var(--line); border-radius: var(--radius-md); }
.combinar__grupo > summary { min-height: var(--toque); display: flex; align-items: center; padding: 0 var(--space-3); cursor: pointer; font-weight: 600; }
.combinar__lista { margin: 0; padding: 0 var(--space-3) var(--space-3); list-style: none; max-height: var(--combinar-lista-h); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); }
.combinar__lista li { overflow-wrap: anywhere; color: var(--text-muted); }
.combinar__opcion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--toque); color: var(--text); }
.combinar__opcion input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand-teal); }
.combinar__opcion span { flex: 1 1 160px; }
.combinar__tipo { width: auto; min-height: var(--toque); }
.combinar__avisos { display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-muted); }
.combinar__avisos p { margin: 0; }
.k-btn--peligro { background: var(--danger); color: var(--on-danger); }
.k-btn--peligro:hover { filter: brightness(1.07); }

/* ---------- Kresko MCP (tarjeta en Conexiones) ---------- */
.mcp { margin-top: var(--space-2); }
.mcp__pasos { align-self: stretch; margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); font-size: var(--fs-small); color: var(--text-muted); }
.ajustes code { padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--surface-hover); color: var(--text); font-size: var(--fs-small); overflow-wrap: anywhere; }

/* ---------- Solo móvil (hasta 760 px): zonas táctiles de 44 px y nada más ancho que la pantalla ---------- */
@media (max-width: 760px) {
  .k-btn { height: auto; min-height: var(--toque); }
  /* Controles del bloque (subir, bajar, borrar): en una fila debajo del bloque, con botones de 44 px */
  .bloque { flex-wrap: wrap; }
  .bloque__ctrl { flex-basis: 100%; justify-content: flex-end; }
  /* Propiedades de una fila: dos columnas que caben en 360 px */
  .propiedades { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .propiedades dd > * { max-width: 100%; }
  .propiedades .k-progress, .propiedades .celda__fila .k-progress { min-width: 0; }
}

/* ---------- Avisos y celebración ---------- */
/* La zona es un popover (capa superior): se quitan sus estilos por defecto del navegador. */
.avisos { --avisos-base: calc(var(--inferior-h) + var(--seguro-abajo) + var(--space-4)); position: fixed; z-index: 88; inset: auto auto max(var(--avisos-base), calc(var(--grab-ocupa, 0px) + var(--space-2))) 50%; transform: translateX(-50%); display: grid; gap: var(--space-2); width: max-content; max-width: calc(100vw - 2 * var(--space-4)); height: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; pointer-events: none; }
.aviso { padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-family: var(--font-display); font-weight: 600; text-align: center; overflow-wrap: anywhere; animation: aparecer .3s ease; }
.aviso--accion { display: grid; gap: var(--space-3); text-align: left; pointer-events: auto; }
.aviso--accion .k-row { justify-content: flex-end; }
.aviso--logro { background: var(--acento-suave); color: var(--texto); border-color: var(--borde); }
@keyframes aparecer { from { opacity: 0; transform: translateY(var(--space-4)) scale(.9); } }

/* ---------- Ordenador y tableta (desde 761 px) ---------- */
@media (min-width: 761px) {
  :root { --toque: var(--toque-escritorio); }
  .solo-movil { display: none !important; }
  .solo-escritorio { display: inline-flex !important; }
  .inferior, .velo { display: none; }
  .centro { padding-bottom: 0; }
  .barra { position: static; transform: none; width: var(--barra-w); flex: none; height: 100dvh; }
  .superior { padding-left: var(--space-4); }
  .asistente { position: static; width: var(--asistente-w); flex: none; border-left: 1px solid var(--line); }
  .pagina__cuerpo { padding: 0 var(--space-12); }
  .vista { padding: var(--space-12); }
  /* Las acciones del árbol y de los bloques salen al pasar el ratón */
  .bloque__ctrl { display: flex; }
  .arbol__acciones, .bloque__ctrl { opacity: 0; transition: opacity .15s ease; }
  .arbol__fila:hover .arbol__acciones, .arbol__fila:focus-within .arbol__acciones,
  .bloque:hover .bloque__ctrl, .bloque:focus-within .bloque__ctrl { opacity: 1; }
  .arbol__mas { display: inline-grid; }
  .papelera__nombre { flex: 1 1 auto; }
  .avisos { --avisos-base: var(--space-8); }
  .dialogo.ventana { margin: auto; }
  .ventana__botones .k-btn { flex: none; }
  .bloque { flex-wrap: nowrap; }
  .bloque__ctrl { flex-basis: auto; }
  .dialogo { width: min(var(--dialogo-w), 92vw); height: min(var(--dialogo-h), 86dvh); margin: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .ajustes { display: grid; grid-template-columns: var(--ajustes-menu-w) 1fr; grid-template-rows: auto 1fr; padding: 0; }
  .ajustes__cabeza { grid-column: 1 / -1; }
  .ajustes__menu { flex-direction: column; padding: var(--space-4) var(--space-3); border-bottom: 0; border-right: 1px solid var(--line); background: var(--surface-sidebar); }
  .ajustes__pestana { text-align: left; border-radius: var(--radius-sm); }
}

/* En pantallas táctiles grandes (tabletas), las acciones siguen visibles: no hay "pasar el ratón". */
@media (min-width: 761px) and (hover: none) {
  .arbol__acciones, .bloque__ctrl { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---------- Etapa 6a: páginas en tres tamaños, desplegables, categorías y bloqueo ---------- */

/* Panel de página (vistazo). Móvil: hoja inferior que se puede expandir a pantalla completa. */
.vistazo[hidden] { display: none; }
.vistazo { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: flex-end; }
.vistazo__fondo { position: absolute; inset: 0; background: var(--velo); }
.vistazo__caja { position: relative; display: flex; flex-direction: column; height: var(--vistazo-hoja-h); background: var(--surface-page); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-card); padding: 0 var(--seguro-der) var(--seguro-abajo) var(--seguro-izq); animation: subir .2s ease; }
.vistazo--grande .vistazo__caja { height: 100dvh; border-radius: 0; padding-top: var(--seguro-arriba); }
.vistazo__asa { display: none; }
.vistazo__cabeza { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line); }
.vistazo__titulo { flex: 1; font-size: var(--fs-small); color: var(--text-muted); padding: 0 var(--space-2); }
.vistazo__cabeza .btn-ico[aria-pressed="true"] { background: var(--surface-hover); color: var(--accent-text); }
.vistazo__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.vistazo .sin-portada .pagina__cabeza { padding-top: var(--space-4); }

/* Botón "Abrir" en el título de una fila: aparece al pasar el ratón (siempre visible con el teclado) */
.fila__abrir-boton { flex: none; opacity: 0; transition: opacity .15s ease; }
.fila:hover .fila__abrir-boton, .fila__abrir-boton:focus-visible { opacity: 1; }
@media (hover: none) { .fila__abrir-boton { opacity: 1; } }
/* «Abrir» y ··· del título: superpuestos al final de la celda al pasar el ratón (no le quitan ancho al texto) */
.fila__acciones { --fila-fondo: var(--surface-hover); position: absolute; top: 50%; right: var(--space-1); z-index: 1; display: flex; align-items: center; gap: var(--space-1);
  padding-left: var(--space-5); transform: translateY(-50%); background: var(--fila-fondo); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.fila__acciones .fila__abrir-boton { opacity: 1; }
.fila:hover .fila__acciones, .fila__acciones:focus-within { opacity: 1; pointer-events: auto; }
.fila:not(:hover) .fila__acciones:focus-within { --fila-fondo: var(--surface-page); }
.fila--elegida .fila__acciones { --fila-fondo: var(--tag-teal-bg); }
@media (hover: none) { .fila__acciones { position: static; transform: none; padding: 0; background: none; opacity: 1; pointer-events: auto; } }

/* Desplegables y títulos desplegables */
.bloque { margin-left: calc(var(--sangria) * var(--sangria-w)); }
.desplegable { display: flex; align-items: flex-start; gap: var(--space-1); }
.desplegable .editable { flex: 1; min-width: 0; }
.desplegable__flecha { display: grid; place-items: center; flex: none; width: var(--toque); height: var(--toque); margin-top: calc((1.55em - var(--toque)) / 2); padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-muted); }
.desplegable__flecha:hover { background: var(--surface-hover); color: var(--text); }
.desplegable__flecha .ico { transition: transform .15s ease; }
.desplegable__flecha[aria-expanded="true"] .ico { transform: rotate(90deg); }
.bloque--h1 .desplegable { margin-top: var(--space-6); }
.bloque--h2 .desplegable { margin-top: var(--space-5); }
.bloque--h3 .desplegable { margin-top: var(--space-3); }
.bloque .desplegable .editable { margin-top: 0; }
.desplegable__vacio { display: block; margin-left: calc(var(--sangria) * var(--sangria-w)); min-height: var(--toque); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-faint); font-size: var(--fs-small); text-align: left; }
.desplegable__vacio:hover { background: var(--surface-hover); color: var(--text); }

/* Categorías de la barra lateral */
.categoria { display: flex; align-items: center; margin-top: var(--space-3); border-radius: var(--radius-sm); }
.categoria:hover { background: var(--surface-hover); }
.categoria__nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: var(--toque); padding: 0 var(--space-1); border: 0; background: none; color: var(--text-muted); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.categoria__nombre .ico { width: var(--space-4); transition: transform .15s ease; }
.categoria__nombre[aria-expanded="true"] .ico { transform: rotate(90deg); }
.categoria__nombre .k-side-item__count { margin-left: auto; letter-spacing: 0; }

/* Categoría de la página (etiquetas bajo el título) */
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
/* (solo las fichas k-tag: .etiqueta a secas es la etiqueta de un campo de formulario, más arriba) */
.k-tag.etiqueta { border: 0; cursor: pointer; min-height: var(--toque); }
.k-tag.etiqueta:hover { filter: brightness(1.1); }
.etiqueta--grande { font-size: var(--fs-h3); height: auto; padding: var(--space-1) var(--space-4); }

/* Página bloqueada */
.bloqueo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sidebar); color: var(--text-muted); font-size: var(--fs-small); }
.pagina--bloqueada .grafico__barra > button[aria-expanded], .pagina--bloqueada .grafico__config { display: none; }
.tabla--bloqueada .columna:disabled { cursor: default; color: inherit; opacity: 1; }

/* Menú de la página: atajos visibles y pie con la última edición */
.menu__atajo { flex: none; font-size: var(--fs-eyebrow); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.menu__pie { flex: none; margin-top: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-1); border-top: 1px solid var(--line); font-size: var(--fs-eyebrow); color: var(--text-faint); }

@media (max-width: 760px) {
  .menu__atajo { display: none; } /* en el móvil no hay teclado físico */
  .bloque { margin-left: calc(var(--sangria) * var(--sangria-w) / 2); }
}

/* Ordenador: "a un lado" es un panel junto a la página (con borde para cambiar el ancho); "en el centro", una ventana flotante */
@media (min-width: 761px) {
  .vistazo--lado { position: relative; inset: auto; z-index: auto; flex: none; flex-direction: row; width: var(--vistazo-w); min-width: var(--vistazo-min); max-width: calc(100vw - var(--barra-w) - var(--vistazo-min)); border-left: 1px solid var(--line); }
  .vistazo--lado .vistazo__fondo { display: none; }
  .vistazo--lado .vistazo__caja { flex: 1; min-width: 0; height: 100dvh; border-radius: 0; box-shadow: none; animation: none; padding: 0; }
  .vistazo--lado .vistazo__asa { display: block; position: absolute; z-index: 2; inset: 0 auto 0 calc(-1 * var(--space-1)); width: var(--space-2); cursor: col-resize; touch-action: none; }
  .vistazo__asa:hover, .vistazo__asa:focus-visible, .vistazo__asa.arrastrando { background: var(--brand-teal); outline: none; }
  .vistazo--centro { justify-content: center; align-items: center; }
  .vistazo--centro .vistazo__caja { width: min(var(--pagina-w), 92vw); height: min(var(--dialogo-h), 86dvh); border-radius: var(--radius-lg); padding: 0; animation: aparecer .2s ease; }
  .vistazo .pagina__cuerpo { padding: 0 var(--space-8); }
}

/* ---------- Etapa 6b: vistas de tabla (pestañas) y tablero ---------- */
.vistas { display: flex; align-items: center; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.vistas__pestana { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); min-height: var(--toque); max-width: var(--col-titulo-w); padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-size: var(--fs-ui); white-space: nowrap; }
.vistas__pestana:hover { color: var(--text); }
.vistas__pestana[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--brand-teal); }
.vistas .btn-ico { flex: none; }
/* Móvil: columnas casi a pantalla completa con ajuste magnético; en ordenador, columnas fijas sin ajuste */
.tablero { display: flex; align-items: flex-start; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.tablero--arrastrando { scroll-snap-type: none; }
.tablero__col { display: flex; flex-direction: column; flex: 0 0 calc(100% - var(--space-8)); gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--tag-neutral-bg); scroll-snap-align: start; }
.tablero__col--teal { background: var(--tag-teal-bg); }
.tablero__col--lime { background: var(--tag-lime-bg); }
.tablero__col--violet { background: var(--tag-violet-bg); }
.tablero__col--amber { background: var(--tag-amber-bg); }
.tablero__col--red { background: var(--tag-red-bg); }
.tablero__cabeza { display: flex; align-items: center; gap: var(--space-2); min-height: var(--toque); padding: 0 var(--space-1); }
.tablero__lista { display: flex; flex-direction: column; gap: var(--space-2); min-height: var(--space-12); }
.tarjeta { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-3) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tarjeta:hover { background: var(--surface-hover); }
.tarjeta__cabeza { display: flex; align-items: flex-start; gap: var(--space-1); }
.tarjeta__titulo { flex: 1; min-width: 0; min-height: var(--toque); padding: var(--space-2) 0; border: 0; background: none; text-align: left; font-weight: 700; overflow-wrap: anywhere; cursor: inherit; }
.tarjeta__prop { display: flex; font-size: var(--fs-small); color: var(--text-muted); }
.tarjeta__prop .k-progress { flex: 1; }
.tarjeta--origen { display: none; }
.tarjeta--fantasma { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; box-shadow: var(--shadow-card); rotate: 2deg; }
.tarjeta-hueco { flex: none; border: 2px dashed var(--control-border); border-radius: var(--radius-sm); }
.tablero__nueva { display: flex; align-items: center; gap: var(--space-2); min-height: var(--toque); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); }
.tablero__nueva:hover { background: var(--surface-hover); color: var(--text); }
.tablero__aviso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--control-border); border-radius: var(--radius-md); }
.tablero__aviso p { margin: 0; }
@media (min-width: 761px) {
  .tablero { scroll-snap-type: none; }
  .tablero__col { flex-basis: var(--tablero-col-w); }
}
@media (prefers-reduced-motion: reduce) { .tarjeta--fantasma { rotate: none; } }

/* ---------- Etapa 6c: navegación tipo escritorio (escritorio.js) ---------- */
:root {
  --pestanas-h: 40px;       /* alto de la barra de pestañas */
  --pestana-w: 200px;       /* ancho máximo de una pestaña */
  --pestana-min: 96px;      /* ancho mínimo de una pestaña */
  --borde-barra-w: 8px;     /* franja izquierda que muestra la barra oculta */
}
/* Menús: opción con botón al lado (▶ subpáginas en las migas, ✕ cerrar pestaña) */
.menu__fila { display: flex; align-items: stretch; }
.menu__fila .menu__item { flex: 1; min-width: 0; }
.menu__lado { flex: none; width: var(--toque); min-height: var(--toque); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); }
.menu__lado:hover, .menu__lado:focus-visible { background: var(--surface-hover); color: var(--text); }
.migas__enlace.migas__actual { color: var(--text); }
.btn-ico.solo-escritorio { justify-content: center; }
/* Móvil: contador de pestañas (abre la lista como hoja inferior) */
.pestanas-boton__n { display: grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-1); border: 1.5px solid currentColor; border-radius: var(--radius-xs); font-size: var(--fs-eyebrow); font-weight: 700; }
/* Ocultos en el móvil */
.pestanas, .barra-asa, .borde-barra { display: none; }
/* Modo enfoque: solo la página (en el móvil y en el ordenador) */
.modo-enfoque .barra, .modo-enfoque .barra-asa, .modo-enfoque .borde-barra, .modo-enfoque .pestanas,
.modo-enfoque .superior, .modo-enfoque .inferior, .modo-enfoque .asistente, .modo-enfoque .velo { display: none !important; }
.modo-enfoque .centro { padding-bottom: 0; }
/* Sin barra superior (modo enfoque/lectura): la página empieza debajo del notch y los lados respetan la zona segura */
.modo-enfoque .lienzo { padding-top: var(--seguro-arriba); }
.enfoque-salir { display: none; }
.modo-enfoque .enfoque-salir { display: inline-flex; position: fixed; z-index: 50; top: calc(var(--space-2) + var(--seguro-arriba)); right: calc(var(--space-2) + var(--seguro-der)); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.modo-enfoque.enfoque-mostrar .enfoque-salir, .modo-enfoque .enfoque-salir:focus-visible { opacity: 1; pointer-events: auto; }
@media (hover: none) { .modo-enfoque .enfoque-salir { opacity: 1; pointer-events: auto; } } /* sin ratón: siempre visible */

@media (min-width: 761px) {
  /* Pestañas de la app */
  .pestanas { display: flex; align-items: flex-end; gap: var(--space-1); flex: none; min-height: var(--pestanas-h); padding: calc(var(--space-1) + var(--seguro-arriba)) var(--space-2) 0; background: var(--surface-sidebar); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .pestana { display: flex; align-items: center; flex: 0 1 var(--pestana-w); min-width: var(--pestana-min); height: calc(var(--pestanas-h) - var(--space-1)); padding-left: var(--space-1); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--text-muted); user-select: none; -webkit-user-select: none; }
  .pestana:hover { background: var(--surface-hover); color: var(--text); }
  .pestana:has([aria-selected="true"]) { background: var(--surface-page); color: var(--text); }
  .pestana--arrastrando { position: relative; z-index: 2; box-shadow: var(--shadow-card); background: var(--surface-raised); }
  .pestana__nombre { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; height: 100%; padding: 0 var(--space-2); border: 0; background: none; color: inherit; font-size: var(--fs-small); text-align: left; }
  .pestana__nombre[aria-selected="true"] { font-weight: 600; }
  .pestana__cerrar { width: var(--space-6); height: var(--space-6); }
  .pestana__cerrar .ico { width: var(--fs-small); }
  .pestanas__nueva { align-self: center; }
  .superior { min-height: var(--superior-h); padding-top: 0; }
  /* Barra lateral: borde para cambiar el ancho */
  .barra-asa { display: block; position: fixed; z-index: 31; top: 0; bottom: 0; left: calc(var(--barra-w) - var(--space-1)); width: var(--space-2); cursor: col-resize; touch-action: none; }
  .barra-asa:hover, .barra-asa:focus-visible, .barra-asa.arrastrando { background: var(--brand-teal); outline: none; }
  /* Barra oculta: sale flotando al llevar el ratón al borde izquierdo */
  .barra-oculta .barra { position: fixed; z-index: 40; inset: 0 auto 0 0; transform: translateX(-105%); transition: transform .18s ease; box-shadow: var(--shadow-card); }
  .barra-oculta.barra-flotante .barra { transform: none; }
  .barra-oculta .barra-asa { display: none; }
  .barra-oculta .borde-barra { display: block; position: fixed; z-index: 39; inset: 0 auto 0 0; width: var(--borde-barra-w); }
}
@media (prefers-reduced-motion: reduce) { .barra-oculta .barra { transition: none; } }

/* --- Enlaces entre páginas (etapa 7a): menciones, vista previa, «Enlazada desde», botón de enlace e incrustar web --- */
.mencion { display: inline; padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--tag-teal-bg); color: var(--accent-text); font-weight: 500; cursor: pointer; white-space: normal; -webkit-touch-callout: none; user-select: none; }
.mencion:hover { text-decoration: underline; text-underline-offset: 3px; }
.mencion--rota { background: var(--tag-neutral-bg); color: var(--text-faint); text-decoration: line-through; cursor: default; }
.previa { position: fixed; z-index: 65; width: min(var(--previa-w), calc(100vw - 2 * var(--space-4))); display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); font-size: var(--fs-small); }
.previa p { margin: 0; overflow-wrap: anywhere; }
.previa__ruta { color: var(--text-faint); font-size: var(--fs-eyebrow); }
.previa__titulo { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); color: var(--text); }
.previa__prop { display: flex; gap: var(--space-2); }
.previa__prop .tenue { min-width: 35%; }
.previa__texto { color: var(--text-muted); }
.previa .k-btn { align-self: flex-start; margin-top: var(--space-1); }
.enlazada { margin-top: var(--space-8); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--fs-small); }
.enlazada summary { min-height: var(--toque); display: flex; align-items: center; cursor: pointer; font-weight: 500; }
.enlazada__lista { display: flex; flex-direction: column; color: var(--text); font-size: var(--fs-ui); }
.boton-enlace { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.boton-enlace__boton { display: inline-flex; gap: var(--space-2); max-width: 100%; text-decoration: none; }
.web { margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.web__marco { width: 100%; height: var(--web-h); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.web__alto { display: flex; align-items: center; gap: var(--space-1); }
.web__alto input { width: 96px; accent-color: var(--brand-teal); }
.web__aviso { margin: 0; font-size: var(--fs-small); }

/* ---------- Etapa 7c-1: bases de datos avanzadas ---------- */
/* Relaciones: fichas con emoji + título (subrayado al pasar el ratón) */
.celda__rel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: var(--toque); }
.celda__rel--editable { cursor: pointer; }
.ficha-rel { display: inline-flex; align-items: center; gap: var(--space-1); max-width: var(--col-titulo-w); min-height: calc(var(--toque) - var(--space-3)); padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font-size: var(--fs-small); cursor: pointer; }
.ficha-rel:hover .recorte { text-decoration: underline; }
.celda__rel .btn-ico { opacity: .6; }
.celda__rel:hover .btn-ico, .celda__rel .btn-ico:focus-visible { opacity: 1; }
/* Selección múltiple */
.fila__sel { flex: none; }
.tabla .k-table tr.fila--elegida td, .tabla .k-table tr.fila--elegida .celda-fija { background: var(--tag-teal-bg); }
.barra-sel { position: sticky; bottom: calc(var(--space-3) + var(--seguro-abajo)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); align-self: center; max-width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); }
.barra-sel__cuenta { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Grupos: cabecera de columnas repetida bajo cada grupo */
.grupo__cabeza .btn-ico { flex: none; }
.cabecera-grupo th { background: var(--surface-page); }
/* Filtros avanzados */
.filtros { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sidebar); }
.filtros__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filtros__fila .campo { flex: 1 1 var(--col-w); width: auto; min-height: var(--toque); }
.filtros__union { flex: none; min-width: var(--space-12); font-size: var(--fs-small); color: var(--text-muted); }
.filtros__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filtros__pie .campo { width: auto; min-height: var(--toque); }
.filtros__vacio { margin: 0; font-size: var(--fs-small); }
/* Estado vacío de una vista filtrada */
.tabla__nada { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); border: 1px dashed var(--control-border); border-radius: var(--radius-md); color: var(--text-muted); text-align: center; }
.tabla__nada p { margin: 0; font-weight: 600; }
/* Vista enlazada: título editable con emoji */
.bloque--vista .bloque__ctrl, .bloque--columnas > .bloque__ctrl { display: flex; }
.vista-enlazada { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vista-enlazada__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vista-enlazada__emoji { display: grid; place-items: center; flex: none; width: var(--toque); height: var(--toque); padding: 0; border: 0; border-radius: var(--radius-sm); background: none; font-size: var(--fs-h3); }
.vista-enlazada__emoji:hover:not(:disabled) { background: var(--surface-hover); }
.vista-enlazada__titulo { flex: 1 1 var(--col-titulo-w); min-width: 0; min-height: var(--toque); padding: 0; border: 0; background: none; color: var(--text); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.vista-enlazada__titulo::placeholder { color: var(--text-faint); }
/* Columnas: apiladas en el móvil; lado a lado en ordenador con separador arrastrable */
.columnas { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.columnas__col { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.columnas__sep { display: none; }
@media (min-width: 761px) {
  .columnas { flex-direction: row; gap: 0; }
  .columnas__sep { display: block; flex: none; width: var(--space-4); margin: 0 calc(-1 * var(--space-1)); cursor: col-resize; touch-action: none; position: relative; background: none; opacity: 1; }
  .columnas__sep::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: transparent; transition: background var(--dur) ease; }
  .columnas:hover > .columnas__sep, .columnas__sep:focus-visible, .columnas__sep.arrastrando { opacity: 1; outline: none; }
  .columnas__sep:hover::after, .columnas__sep:focus-visible::after, .columnas__sep.arrastrando::after { background: var(--acento); }
}
@media (hover: none) { .columnas__sep { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .columnas__sep { transition: none; } }

/* ---------- Etapa 8a: versión celular completa (movil.js) y portadas con imagen ---------- */
:root {
  --dur-rapida: 120ms;        /* movimiento: aparecer/desaparecer pequeño */
  --dur-media: 220ms;         /* movimiento: paneles y barras */
  --curva: cubic-bezier(.2, .8, .2, 1); /* salida rápida y suave */
  --flotante-h: 52px;         /* alto de la barra inferior flotante */
  --flotante-ia-max: 280px;   /* ancho máximo de «Pregúntale a la IA» */
  --reciente-w: 148px;        /* ancho de una tarjeta de Recientes */
  --reciente-portada-h: 64px; /* alto de su portada */
  --pildora-max: 180px;       /* ancho máximo de una píldora (la del espacio puede tener un nombre largo) */
  --portada-imagen-h: 200px;  /* alto de una portada con imagen en el ordenador */
  --borde-sutil: color-mix(in srgb, var(--on-accent) 25%, transparent); /* separador dentro de un botón turquesa */
}

/* Portadas con imagen (también en el ordenador) */
.portada { overflow: hidden; }
.portada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.portada__botones { position: absolute; z-index: 1; right: var(--space-4); bottom: var(--space-3); display: flex; gap: var(--space-2); }
.portada__falta { position: absolute; left: var(--space-4); bottom: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text-muted); font-size: var(--fs-small); }
.portada--moviendo { cursor: grab; touch-action: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.portada--moviendo:active { cursor: grabbing; }
.portada--moviendo .portada__botones { display: none; }
.portada--moviendo:focus { outline: none; }
.portada__mover { position: absolute; z-index: 2; right: var(--space-4); bottom: var(--space-3); left: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.portada__pista { margin-right: auto; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text); font-size: var(--fs-small); }
@media (min-width: 761px) {
  .k-page__cover.portada--imagen { height: var(--portada-imagen-h); }
  .portada__botones { opacity: 0; transition: opacity var(--dur-rapida) ease; }
  .portada:hover .portada__botones, .portada:focus-within .portada__botones { opacity: 1; }
}
@media (min-width: 761px) and (hover: none) { .portada__botones { opacity: 1; } }

/* Solo celular: todo lo de la versión celular va aquí dentro (el ordenador no cambia). */
@media (max-width: 760px) {
  /* Barra superior mínima: ← · Compartir · ⋯ (en el inicio no hay barra: mandan las píldoras) */
  .superior { gap: 0; }
  .superior__titulo { flex: 1; min-width: 0; padding: 0 var(--space-2); font-family: var(--font-display); font-weight: 600; }
  .movil-inicio .superior { display: none; }

  /* Barra inferior flotante: 🔍 · «Pregúntale a la IA» · ✏️ — se esconde al bajar y vuelve al subir */
  .centro { padding-bottom: 0; }
  .lienzo__contenido { padding-bottom: calc(var(--flotante-h) + var(--space-8) + var(--seguro-abajo)); }
  .inferior { inset: auto calc(var(--space-4) + var(--seguro-der)) calc(var(--space-3) + var(--seguro-abajo)) calc(var(--space-4) + var(--seguro-izq));
    height: auto; padding: 0; gap: var(--space-2); justify-content: center; background: none; border: 0; pointer-events: none;
    transition: transform var(--dur-media) var(--curva), opacity var(--dur-media) var(--curva); }
  .inferior > * { pointer-events: auto; }
  .flotante-oculta .inferior,
  body:has(.lienzo [contenteditable="true"]:focus, .lienzo input:focus, .lienzo textarea:focus) .inferior { transform: translateY(calc(100% + var(--space-6) + var(--seguro-abajo))); opacity: 0; pointer-events: none; }
  .flotante-oculta .inferior > *, body:has(.lienzo [contenteditable="true"]:focus, .lienzo input:focus, .lienzo textarea:focus) .inferior > * { pointer-events: none; }
  .flotante__redondo { display: grid; place-items: center; flex: none; width: var(--flotante-h); height: var(--flotante-h); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-card); font-size: var(--fs-h3); }
  .flotante__ia { flex: 1 1 auto; max-width: var(--flotante-ia-max); min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--flotante-h); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--acento); color: var(--on-accent); font-family: var(--font-body); font-weight: 600; }
  .flotante__ia .ico { stroke: var(--on-accent); }
  .avisos { --avisos-base: calc(var(--flotante-h) + var(--space-6) + var(--seguro-abajo)); }
  /* Ctrl+K (🔍) a pantalla completa */
  .menu--hoja.menu--completo { top: 0; max-height: none; border-radius: 0; padding-top: calc(var(--space-2) + var(--seguro-arriba)); }
  .menu--completo .menu__lista { flex: 1; }

  /* Pantalla de inicio del celular: píldoras, Recientes, Favoritos, categorías y Páginas */
  .inicio-movil { display: flex; flex-direction: column; gap: var(--space-5); padding: calc(var(--space-3) + var(--seguro-arriba)) calc(var(--space-4) + var(--seguro-der)) var(--space-8) calc(var(--space-4) + var(--seguro-izq)); }
  .pildoras { display: flex; gap: var(--space-2); margin: 0 calc(-1 * var(--space-4)); padding: var(--space-1) var(--space-4); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pildoras::-webkit-scrollbar { display: none; }
  .pildora { display: inline-flex; align-items: center; flex: none; gap: var(--space-2); min-height: var(--toque); max-width: var(--pildora-max); padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text); font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 600; }
  .pildora[aria-current="page"] { background: var(--tag-teal-bg); border-color: transparent; color: var(--accent-text); }
  .pildora--avatar { padding-left: var(--space-2); }
  .pildora__logo { width: var(--space-6); height: var(--space-6); flex: none; }
  .pildora__ico { position: relative; display: inline-grid; place-items: center; }
  .pildora__punto { display: none; position: absolute; top: calc(-1 * var(--space-1)); right: calc(-1 * var(--space-1)); width: var(--punto); height: var(--punto); border-radius: var(--radius-pill); background: var(--brand-teal); box-shadow: 0 0 0 2px var(--surface-raised); }
  .pildora--novedad .pildora__punto { display: block; }
  .inicio-movil__seccion { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .inicio-movil__cabeza { display: flex; align-items: center; gap: var(--space-2); min-height: var(--toque); }
  .inicio-movil__titulo { flex: 1; margin: 0; font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
  .inicio-movil__cabeza .k-row { flex: none; gap: 0; }
  .inicio-movil__vacio { margin: 0; font-size: var(--fs-small); }
  /* Recientes: carrusel con desplazamiento magnético */
  .carrusel { display: flex; gap: var(--space-3); margin: 0 calc(-1 * var(--space-4)); padding: var(--space-1) var(--space-4) var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); overscroll-behavior-x: contain; scrollbar-width: none; }
  .carrusel::-webkit-scrollbar { display: none; }
  .reciente { position: relative; display: flex; flex-direction: column; flex: 0 0 var(--reciente-w); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); text-align: left; overflow: hidden; scroll-snap-align: start; }
  .reciente:active { background: var(--surface-hover); }
  .reciente__portada { position: relative; display: block; height: var(--reciente-portada-h); overflow: hidden; }
  .reciente__portada .portada__falta { display: none; }
  .reciente__emoji { position: absolute; top: calc(var(--reciente-portada-h) - var(--space-4)); left: var(--space-3); display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-card); font-size: var(--fs-h3); }
  .reciente__titulo { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: calc(2.6em + var(--space-6) + var(--space-3)); padding: var(--space-6) var(--space-3) var(--space-3); font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; }
  /* Árbol del celular: › / ⌄, emoji, título y ⋯ ＋ siempre visibles (zonas de 44 px) */
  .arbolm { display: flex; flex-direction: column; }
  .arbolm__fila { display: flex; align-items: center; min-height: var(--toque); padding-left: calc(var(--nivel) * var(--space-4)); border-radius: var(--radius-sm); }
  .arbolm__fila.es-actual { background: var(--surface-hover); }
  .arbolm__flecha { display: grid; place-items: center; flex: none; width: var(--toque); height: var(--toque); padding: 0; border: 0; background: none; color: var(--text-faint); }
  .arbolm__flecha .ico { width: var(--space-4); transition: transform var(--dur-rapida) var(--curva); }
  .arbolm__flecha[aria-expanded="true"] .ico { transform: rotate(90deg); }
  .arbolm__nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: var(--toque); padding: 0 var(--space-1); border: 0; background: none; color: var(--text); font-size: var(--fs-ui); font-weight: 500; text-align: left; }
  .arbolm__emoji { flex: none; }
  .arbolm__vista { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--toque); padding: 0 var(--space-2) 0 calc(var(--nivel) * var(--space-4) + var(--toque)); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); font-size: var(--fs-small); text-align: left; }
  .arbolm__vista:active, .arbolm__nombre:active { background: var(--surface-hover); }

  /* Página: márgenes laterales --space-4 y portada con imagen algo más alta */
  .pagina__cuerpo { padding: 0 calc(var(--space-4) + var(--seguro-der)) 0 calc(var(--space-4) + var(--seguro-izq)); }
  .k-page__cover.portada--imagen { height: calc(var(--portada-h) + var(--space-8)); }
  .portada__botones .k-btn { min-height: var(--toque); }

  /* Tablas: barra con selector de vista ⌄, 🔍, filtro, ajustes y ＋ ⌄; ABRIR visible; celdas que se tocan */
  .tabla__barra--movil { flex-wrap: nowrap; gap: var(--space-1); }
  .vista-selector { display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: var(--space-2); min-height: var(--toque); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text); font-family: var(--font-display); font-weight: 600; }
  .tabla__barra--movil .btn-ico { width: auto; min-width: var(--toque); padding: 0 var(--space-1); }
  .btn-ico[aria-pressed="true"], .btn-ico--activo { background: var(--tag-teal-bg); color: var(--accent-text); }
  .btn-ico__n { margin-left: 2px; font-size: var(--fs-eyebrow); font-weight: 700; }
  .boton-doble { display: inline-flex; flex: none; border-radius: var(--radius-pill); background: var(--brand-teal); color: var(--on-accent); box-shadow: var(--shadow-accent); overflow: hidden; }
  .boton-doble button { min-height: var(--toque); padding: 0 var(--space-3); border: 0; background: none; color: inherit; font-weight: 700; font-size: var(--fs-h3); }
  .boton-doble .boton-doble__flecha { padding: 0 var(--space-2); border-left: 1px solid var(--borde-sutil); font-size: var(--fs-ui); }
  .tabla__buscar { width: 100%; }
  .k-table-wrap { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .tabla .k-table .celda-fija { min-width: min(var(--col-titulo-w), 62vw); max-width: 70vw; }
  .celda__tocar { display: flex; align-items: center; flex: 1; min-width: 0; min-height: var(--toque); border-radius: var(--radius-xs); cursor: pointer; }
  .celda__tocar:active { background: var(--surface-hover); }
  .fila__titulo { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-weight: 600; }
  .fila__abrir-movil { flex: none; min-height: var(--toque); padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-raised); color: var(--accent-text); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; }

  /* Hoja inferior para editar una celda (pedirValor en dialogos.js) */
  .dialogo.ventana.ventana--hoja { width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; padding-bottom: var(--seguro-abajo); animation: subir var(--dur-media) var(--curva); }
  .ventana--hoja .ventana__botones .k-btn { flex: 1 1 0; }

  /* Ajustes como pantallas apiladas con ← */
  .ajustes--pila .ajustes__cabeza { justify-content: flex-start; gap: var(--space-1); padding: var(--space-2); }
  .ajustes--pila .ajustes__cabeza h2 { flex: 1; min-width: 0; padding-left: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ajustes__lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
  .ajustes__entrada { display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--toque) + var(--space-4)); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); text-align: left; }
  .ajustes__entrada:active { background: var(--surface-hover); }
  .ajustes__emoji { flex: none; font-size: var(--fs-h2); }
  .ajustes__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ajustes__textos small { color: var(--text-muted); font-size: var(--fs-small); }
  .ajustes__entrada .ico { color: var(--text-faint); }
  .ajustes--dentro .ajustes__contenido { animation: entrar-lado var(--dur-media) var(--curva); }
  .ajustes--dentro .ajustes__contenido:focus { outline: none; }
  .ajustes--pila .segmento { flex: 1 1 auto; }

  /* Revisión de desbordes a 360 px: nada más ancho que la pantalla */
  .k-tag { max-width: 100%; overflow: hidden; }
  .menu__etiqueta { min-width: 0; overflow-wrap: anywhere; }
}
@keyframes entrar-lado { from { transform: translateX(var(--space-8)); opacity: 0; } }

/* (Parte 3: se quitó la regla de la barra flotante para la app instalada; desde la parte 2 la barra inferior va pegada
   abajo y deja la zona del indicador de inicio con padding-bottom: var(--seguro-abajo), instalada o no.) */
@media (prefers-reduced-motion: reduce) { .inferior, .arbolm__flecha .ico { transition: none; } }

/* ---------- Etapa 8b-1: pulido e interacciones fluidas ---------- */
:root { --asa-w: 22px; --fb-boton: 34px; --ia-caja-w: 420px; }

/* Indicador «Guardado ✓»: discreto, se apaga solo */
.guardado { flex: none; font-size: var(--fs-small); color: var(--text-faint); padding: 0 var(--space-2); white-space: nowrap; opacity: 0; transition: opacity var(--dur-media) var(--curva); }
.guardado--pendiente, .guardado--ok, .guardado--error { opacity: 1; }
.guardado--error { color: var(--danger); }

/* Aviso con «Deshacer» (6 s) y su barrita de tiempo */
.aviso--deshacer { position: relative; display: flex; align-items: center; gap: var(--space-3); text-align: left; pointer-events: auto; overflow: hidden; }
.aviso__cuenta { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--brand-teal); transform-origin: left; animation: cuenta var(--dur) linear forwards; }
@keyframes cuenta { to { transform: scaleX(0); } }

/* Formato en línea (los colores salen de los tokens de la marca) */
.editable strong, .ia-previa strong { font-weight: 700; }
.editable code, .ia-previa code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; padding: 0 .3em; border-radius: var(--radius-xs); background: var(--tag-neutral-bg); color: var(--danger); }
.enlace-texto { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: text; }
.pagina--bloqueada .enlace-texto { cursor: pointer; }
.fmt-col--teal { color: var(--accent-text); } .fmt-col--violet { color: var(--violet); } .fmt-col--amber { color: var(--warning); }
.fmt-col--red { color: var(--danger); } .fmt-col--info { color: var(--info); } .fmt-col--muted { color: var(--text-muted); }
.fmt-fon--teal { background: var(--tag-teal-bg); } .fmt-fon--lime { background: var(--tag-lime-bg); } .fmt-fon--violet { background: var(--tag-violet-bg); }
.fmt-fon--amber { background: var(--tag-amber-bg); } .fmt-fon--red { background: var(--tag-red-bg); } .fmt-fon--neutral { background: var(--tag-neutral-bg); }
.fmt-fon--teal, .fmt-fon--lime, .fmt-fon--violet, .fmt-fon--amber, .fmt-fon--red, .fmt-fon--neutral { border-radius: var(--radius-xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.muestra-texto { display: inline-grid; place-items: center; width: var(--space-5); font-weight: 700; }

/* Asa «⋮⋮» de los bloques: en el ordenador, a la izquierda al pasar el ratón; en el celular, junto al bloque que se edita */
.bloque__asa { display: none; flex: none; order: 1; width: var(--toque); min-height: var(--toque); border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-faint); font-size: var(--fs-ui); letter-spacing: -2px; cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.bloque:focus-within > .bloque__asa { display: inline-grid; place-items: center; }
.bloque__asa:hover, .bloque__asa:focus-visible { background: var(--surface-hover); color: var(--text); }
@media (min-width: 761px) {
  .bloque__asa { display: grid; place-items: center; position: absolute; left: calc(-1 * var(--asa-w) - var(--space-1)); top: var(--space-1); width: var(--asa-w); min-height: 0; height: var(--toque-escritorio); opacity: 0; transition: opacity var(--dur-rapida) ease; }
  .bloque:hover > .bloque__asa, .bloque:focus-within > .bloque__asa, .bloque__asa:focus-visible { opacity: 1; }
}
@media (min-width: 761px) and (hover: none) { .bloque__asa { opacity: 1; } }

/* Arrastrar: fantasma, origen atenuado y línea de destino turquesa (o caja: «dentro») */
.arrastrando, .arrastrando * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.arrastre-fantasma { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; opacity: .85; background: var(--surface-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); max-height: 120px; overflow: hidden; margin: 0; }
.arrastre-origen { opacity: .4; }
.arrastre-linea { position: fixed; z-index: 81; height: 3px; border-radius: var(--radius-pill); background: var(--brand-teal); pointer-events: none; box-shadow: 0 0 0 1px var(--surface-page); }
.arrastre-linea--caja { background: var(--tag-teal-bg); border: 2px solid var(--brand-teal); border-radius: var(--radius-sm); box-shadow: none; }
.arbol__fila, .arbolm__fila { -webkit-touch-callout: none; }

/* Barra flotante de formato */
.fb { position: fixed; z-index: 62; display: flex; align-items: center; gap: 2px; padding: var(--space-1); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); animation: aparecer-fb var(--dur-rapida) var(--curva); }
.fb[hidden] { display: none; }
.fb__boton { min-width: var(--fb-boton); height: var(--fb-boton); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-xs); background: none; color: var(--text); font-size: var(--fs-ui); }
.fb__boton:hover, .fb__boton:focus-visible { background: var(--surface-hover); }
.fb__boton[aria-pressed="true"] { background: var(--tag-teal-bg); color: var(--accent-text); }
.fb--b { font-weight: 700; } .fb--i { font-style: italic; } .fb--u { text-decoration: underline; } .fb--s { text-decoration: line-through; }
.fb--c { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-small); }
.fb__color { font-weight: 700; border-bottom: 3px solid var(--brand-teal); line-height: 1.1; }
.fb__ia { color: var(--accent-text); font-weight: 600; }
.fb--movil { left: var(--space-2); right: var(--space-2); top: auto; bottom: calc(var(--teclado, 0px) + var(--space-2)); justify-content: space-between; overflow-x: auto; }
.fb--movil .fb__boton { min-width: var(--toque); height: var(--toque); }
@keyframes aparecer-fb { from { opacity: 0; transform: translateY(4px) scale(.97); } }

/* IA dentro del editor: campo «Pide a la IA…», previsualización y Aceptar / Descartar / Reintentar */
.ia-caja { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; padding: var(--space-3); background: var(--surface-raised); border: 1px solid var(--brand-teal); border-radius: var(--radius-md); box-shadow: var(--shadow-card); animation: aparecer-fb var(--dur-media) var(--curva); }
.ia-caja__titulo { font-family: var(--font-display); font-weight: 600; color: var(--accent-text); font-size: var(--fs-ui); }
.ia-caja__estado:empty { display: none; }
/* «Antes»: el texto original, plegado y apagado, para ver QUÉ cambió antes de aceptar. */
.ia-caja__antes { margin: var(--space-1) 0; font-size: var(--fs-small); color: var(--text-muted, var(--tenue)); }
.ia-caja__antes > summary { cursor: pointer; }
.ia-caja__antes > p { margin: var(--space-1) 0 0; max-height: 7em; overflow: auto; white-space: pre-wrap; }
.ia-caja__botones { flex-wrap: wrap; }
.ia-caja__botones:empty { display: none; }
.ia-caja--flotante { position: fixed; z-index: 63; width: min(var(--ia-caja-w), calc(100vw - 2 * var(--space-4))); max-height: 60dvh; overflow-y: auto; margin: 0; }
.ia-caja--hoja { left: 0; right: 0; width: auto; bottom: var(--teclado, 0px); max-height: min(60dvh, calc(var(--visible, 100dvh) - var(--space-8))); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: calc(var(--space-3) + var(--seguro-abajo)); }
.ia-previa { display: grid; gap: var(--space-1); max-height: 40dvh; overflow-y: auto; }
.ia-previa:empty { display: none; }
.ia-previa__bloque { display: flex; gap: var(--space-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ia-previa__bloque--h1, .ia-previa__bloque--h2, .ia-previa__bloque--h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.ia-previa__marca { flex: none; color: var(--text-muted); }

/* Migas: nombre (abre la página) + flecha ▾ (subpáginas) */
.migas__tramo { display: inline-flex; align-items: center; min-width: 0; max-width: 40%; }
.migas__tramo .migas__enlace { max-width: 100%; }
.migas__flecha { flex: none; min-height: var(--toque); min-width: var(--space-6); border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-faint); font-size: var(--fs-small); }
.migas__flecha:hover, .migas__flecha:focus-visible { background: var(--surface-hover); color: var(--text); }
@media (min-width: 761px) { .migas__flecha { min-height: var(--toque-escritorio); } }

/* Teclado del iPhone: las hojas inferiores suben con visualViewport (--teclado lo pone seguirTeclado en util.js) */
@media (max-width: 760px) {
  .bloque__ctrl { order: 3; } /* celular: contenido y asa en la primera línea; los controles debajo */
  .dialogo.ventana.ventana--hoja { margin-bottom: var(--teclado, 0px); max-height: min(90dvh, calc(var(--visible, 100dvh) - var(--space-4))); }
}

/* ---------- Etapa 8b-2: movimiento, paleta, gestos, minimapa, esqueletos y estados vacíos ---------- */
:root {
  --dur-salida: 160ms;              /* movimiento: lo que se va (algo más rápido que lo que llega) */
  --dur-lenta: 320ms;               /* movimiento: emoji y título que «vuelan» al cambiar de página */
  --dur-brillo: 1.2s;               /* vuelta del brillo de los esqueletos */
  --curva-salir: cubic-bezier(.4, 0, 1, 1); /* salida: acelera al irse */
  --escala-entrar: .96;             /* menús y ventanas aparecen desde un poco más pequeños */
  --desliza: 6px;                   /* desplazamiento corto de lo que entra */
  --agarre-w: 36px;                 /* rayita para arrastrar las hojas inferiores */
  --agarre-h: 4px;
  --deslizar-boton-w: 64px;         /* botones de acción al deslizar una fila o tarjeta */
  --mini-h1: 16px;                  /* minimapa: largo de las rayitas por nivel */
  --mini-h2: 11px;
  --mini-h3: 7px;
  --mini-panel-w: 240px;            /* panel del índice al pasar el ratón */
  --scroll-w: 10px;                 /* barras de desplazamiento finas */
  --scroll-pulgar: color-mix(in srgb, var(--text-faint) 40%, transparent);
  --scroll-pulgar-hover: var(--text-faint);
  --esqueleto-h: 12px;              /* alto de una línea de esqueleto */
  --vacio-emoji: 40px;              /* emoji de los estados vacíos */
}

/* Menús y hojas: entran con escala + opacidad (hoja: subiendo) y salen igual. */
.menu:not(.menu--hoja) { animation: menu-entra var(--dur-rapida) var(--curva); transform-origin: top center; }
.menu--hoja { animation: subir var(--dur-media) var(--curva); }
.menu.saliendo { animation: menu-sale var(--dur-salida) var(--curva-salir) forwards; pointer-events: none; }
.menu--hoja.saliendo { animation: hoja-sale var(--dur-salida) var(--curva-salir) forwards; }
@keyframes menu-entra { from { opacity: 0; transform: scale(var(--escala-entrar)) translateY(calc(-1 * var(--desliza))); } }
@keyframes menu-sale { to { opacity: 0; transform: scale(var(--escala-entrar)); } }
@keyframes hoja-sale { to { transform: translateY(100%); } }
/* Rayita para arrastrar las hojas hacia abajo (gestos.js). */
.menu--hoja::before { content: ""; flex: none; width: var(--agarre-w); height: var(--agarre-h); margin: 0 auto var(--space-1); border-radius: var(--agarre-h); background: var(--line); }

/* Ventanas propias y Ajustes: escala + opacidad; el fondo oscuro se funde. */
.dialogo[open] { animation: ventana-entra var(--dur-media) var(--curva); }
.dialogo[open]::backdrop { animation: fundido var(--dur-media) var(--curva); }
@keyframes ventana-entra { from { opacity: 0; transform: scale(var(--escala-entrar)); } }
@keyframes fundido { from { opacity: 0; } }

/* Paneles que se deslizan: árbol del celular, página abierta (abajo, a un lado o en el centro) y asistente. */
.barra { transition: transform var(--dur-media) var(--curva); }
.velo { transition: opacity var(--dur-media) var(--curva); }
.vistazo__caja { animation: subir var(--dur-media) var(--curva); }
.aviso { animation: aparecer var(--dur-media) var(--curva); }
@media (min-width: 761px) {
  .vistazo--lado .vistazo__caja { animation: entrar-lado var(--dur-media) var(--curva); }
  .vistazo--centro .vistazo__caja { animation: ventana-entra var(--dur-media) var(--curva); }
  .asistente:not([hidden]) { animation: panel-entra var(--dur-media) var(--curva); }
}
@keyframes panel-entra { from { opacity: 0; transform: translateX(var(--space-8)); } }

/* Lo nuevo entra con un fundido breve; lo borrado se encoge antes de irse. */
.entrando { animation: entrar var(--dur-media) var(--curva); }
@keyframes entrar { from { opacity: 0; transform: translateY(var(--desliza)); } }
.saliendo:not(.menu) { animation: encoger var(--dur-salida) var(--curva-salir) forwards; pointer-events: none; }
@keyframes encoger { to { opacity: 0; transform: scale(var(--escala-entrar)); } }
/* Cambio de página sin View Transitions: fundido. */
.entra-vista { animation: fundido var(--dur-media) var(--curva); }
/* Con View Transitions: el fundido general y el vuelo del emoji y el título (pulido.js). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-media); animation-timing-function: var(--curva); }
::view-transition-group(vt-emoji), ::view-transition-group(vt-titulo) { animation-duration: var(--dur-lenta); animation-timing-function: var(--curva); }

/* Paleta de comandos: secciones y atajos visibles. */
.menu__grupo { padding: var(--space-2) var(--space-3) var(--space-1); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
kbd.menu__atajo, .atajos kbd { font-family: inherit; font-size: var(--fs-eyebrow); padding: 1px var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-page); color: var(--text-muted); white-space: nowrap; }
.menu__vacio { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.menu__vacio p { margin: 0; }
/* Hoja de atajos («?»). */
.atajos { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); max-height: 60dvh; overflow-y: auto; }
.atajos__titulo { margin: 0 0 var(--space-2); font-size: var(--fs-ui); }
.atajos__lista { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); margin: 0; align-items: baseline; }
.atajos__lista dd { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.atajos__lista dt { font-size: var(--fs-small); }

/* Tablas grandes: fila «Mostrar más» al final de cada tramo (tabla.js). */
.tramo td { padding: var(--space-2); text-align: center; }

/* Gestos: acciones al deslizar una página del árbol o una tarjeta. */
.arbolm__fila { touch-action: pan-y; }
.con-acciones { position: relative; }
.deslizar-padre { overflow-x: clip; }
.deslizar { position: absolute; top: 0; bottom: 0; left: 100%; display: flex; }
.deslizar__boton { display: grid; place-items: center; align-content: center; gap: 2px; width: var(--deslizar-boton-w); min-height: var(--toque); border: 0; background: var(--surface-hover); color: var(--text); font-size: var(--fs-eyebrow); }
.deslizar__boton span { font-size: var(--fs-h3); }
.deslizar__boton--peligro { background: var(--danger); color: var(--on-accent); }
.deslizar__boton:disabled { opacity: .5; }

/* Minimapa de títulos (ordenador). */
.minimapa { position: fixed; z-index: 20; transform: translateY(-50%); }
.minimapa[hidden] { display: none; }
.minimapa__rayas { list-style: none; margin: 0; padding: var(--space-2); display: grid; gap: var(--space-2); justify-items: end; }
.minimapa__raya { height: 2px; border-radius: 2px; background: var(--text-faint); opacity: .7; transition: background var(--dur-rapida) var(--curva), height var(--dur-rapida) var(--curva); }
.minimapa__raya--h1 { width: var(--mini-h1); }
.minimapa__raya--h2 { width: var(--mini-h2); }
.minimapa__raya--h3 { width: var(--mini-h3); }
.minimapa__raya.es-actual { height: 3px; background: var(--text); opacity: 1; }
.minimapa__panel { position: absolute; top: 50%; right: 100%; width: var(--mini-panel-w); max-height: 70dvh; overflow-y: auto; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none; transform: translateY(-50%) scale(var(--escala-entrar)); transform-origin: right center; transition: opacity var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva); }
.minimapa:hover .minimapa__panel, .minimapa:focus-within .minimapa__panel { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.minimapa__titulo { margin: 0; padding: var(--space-1) var(--space-2); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.minimapa__lista { list-style: none; margin: 0; padding: 0; }
.minimapa__enlace { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); color: var(--text-muted); text-decoration: none; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minimapa__enlace--h2 { padding-left: var(--space-5); }
.minimapa__enlace--h3 { padding-left: var(--space-8); }
.minimapa__enlace:hover, .minimapa__enlace:focus-visible { background: var(--surface-hover); color: var(--text); }
.minimapa__enlace[aria-current] { color: var(--accent-text); font-weight: 600; }
@media (max-width: 760px) { .minimapa { display: none; } }

/* Barras de desplazamiento finas con los colores del tema (más visibles al pasar el ratón). */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) transparent; }
*:hover { scrollbar-color: var(--scroll-pulgar-hover) transparent; }
::-webkit-scrollbar { width: var(--scroll-w); height: var(--scroll-w); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-pulgar); border: 3px solid transparent; border-radius: var(--scroll-w); background-clip: padding-box; }
:hover::-webkit-scrollbar-thumb { background-color: var(--scroll-pulgar-hover); }

/* Esqueletos animados mientras algo carga. */
.esqueleto { display: grid; gap: var(--space-2); padding: var(--space-2) 0; }
.esqueleto__pieza { display: block; height: var(--esqueleto-h); border-radius: var(--radius-xs); background: var(--surface-hover); animation: latido var(--dur-brillo) ease-in-out infinite alternate; }
@keyframes latido { to { opacity: .45; } }
.esqueleto--lineas .esqueleto__pieza:nth-child(2), .esqueleto--chat .esqueleto__pieza:nth-child(2) { width: 85%; }
.esqueleto--lineas .esqueleto__pieza:nth-child(3), .esqueleto--chat .esqueleto__pieza:nth-child(3) { width: 55%; }
.esqueleto--chat { min-width: 160px; }
.esqueleto--grafico .esqueleto__pieza { height: var(--grafico-h); border-radius: var(--radius-md); }
.esqueleto--video .esqueleto__pieza { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.esqueleto--tarjetas { grid-template-columns: repeat(auto-fill, minmax(var(--stat-min), 1fr)); }
.esqueleto--tarjetas .esqueleto__pieza { height: calc(var(--toque) * 2); border-radius: var(--radius-md); }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Vídeos incrustados: brillo detrás mientras carga el reproductor (el iframe lo tapa al llegar). */
.video__marco:has(iframe) { background: var(--surface-hover); }
/* Peticiones de conexiones: barra animada arriba del apartado. */
.ajustes__contenido.cargando::before { content: ""; position: sticky; top: 0; z-index: 1; display: block; height: 3px; margin-bottom: var(--space-2); border-radius: 3px; background: var(--acento); animation: latido var(--dur-brillo) ease-in-out infinite alternate; }
/* Lo que llega con carga diferida: mientras carga, el esqueleto; después no añade caja (perezoso.js). */
.diferido:not([aria-busy]) { display: contents; }

/* Estados vacíos: emoji, frase útil y botón. */
.vacio { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--text-muted); }
.vacio__emoji { font-size: var(--vacio-emoji); line-height: 1; }
.vacio__texto { margin: 0; max-width: 46ch; }
.vacio--chico { padding: var(--space-5) var(--space-4); }
.vacio--chico .vacio__emoji { font-size: var(--fs-h1); }
.vacio--tabla { margin: var(--space-3) 0; }
/* Errores: qué pasó y qué hacer. */
.fallo { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--radius-md); background: var(--surface-raised); }
.fallo__que { color: var(--text); }
.fallo__hacer { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }

/* Ayuda del asa ⋮⋮ al pasar el ratón: «Arrastra para mover» / «Haz clic o pulsa Ctrl+/ para abrir el menú». */
:root { --ayuda-w: 220px; --ayuda-retraso: 400ms; }
.bloque__asa { position: relative; }
.asa__ayuda { position: absolute; z-index: 30; left: calc(100% + var(--space-2)); top: 50%; display: grid; gap: 2px; width: max-content; max-width: var(--ayuda-w); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  color: var(--text-muted); font-size: var(--fs-small); letter-spacing: normal; text-align: left; line-height: 1.35; cursor: default; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-50%) scale(var(--escala-entrar)); transform-origin: left center; transition: opacity var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva), visibility 0s linear var(--dur-rapida); }
.asa__ayuda strong { color: var(--text); font-weight: 600; }
.asa__tecla { display: inline-block; padding: 0 var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-page); color: var(--text); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: normal; text-transform: none; white-space: nowrap; }
@media (hover: hover) {
  .bloque__asa:hover .asa__ayuda { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: var(--ayuda-retraso), var(--ayuda-retraso), 0s; }
}
.bloque__asa:focus-visible .asa__ayuda { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: 0s; }
.arrastrando .asa__ayuda { display: none; }

/* Emoji de una fila de tabla: se arrastra al árbol lateral (ordenador). */
@media (hover: hover) { .fila__emoji { cursor: grab; user-select: none; touch-action: none; } }

/* Sin movimiento: nada se anima (incluidas las transiciones de página y los brillos). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Arreglo: en el ordenador los controles del bloque (😊 ↑ ↓ ✕) flotan encima del bloque
   en una barrita, en vez de ocupar ancho al lado del texto. Así el texto no se aplasta
   (sobre todo dentro de columnas estrechas). Solo se ve la barrita del bloque más interior. */
@media (min-width: 761px) {
  .bloque > .bloque__ctrl {
    position: absolute; top: calc(-1 * var(--space-5)); right: 0; z-index: 3;
    gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--surface-raised); box-shadow: var(--shadow-card); pointer-events: none;
  }
  .bloque > .bloque__ctrl .btn-ico { width: var(--space-8); height: var(--space-8); }
  .bloque:hover:has(.bloque:hover) > .bloque__ctrl { opacity: 0; pointer-events: none; }
  .bloque:hover:not(:has(.bloque:hover)) > .bloque__ctrl,
  .bloque:focus-within:not(:has(.bloque:focus-within)) > .bloque__ctrl { opacity: 1; pointer-events: auto; }
}
@media (min-width: 761px) and (hover: none) {
  .bloque > .bloque__ctrl { opacity: 0; }
  .bloque:focus-within:not(:has(.bloque:focus-within)) > .bloque__ctrl { opacity: 1; pointer-events: auto; }
}

/* ===== Etapa 9: clases del curso (cita, código, imagen, tabla sencilla, importador) ===== */
.bloque--cita .editable { padding-left: var(--space-3); border-left: 3px solid var(--brand-teal); color: var(--text-muted); }
.bloque--codigo .editable { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sidebar);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-small); line-height: 1.45; white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.imagen { margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.imagen__boton { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); }
.imagen__boton:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Las láminas son blancas: en los temas oscuros no se invierten; solo llevan borde y esquinas redondeadas. */
.imagen__img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.imagen__pie { margin: 0; text-align: center; font-size: var(--fs-small); color: var(--text-muted); outline: none; overflow-wrap: anywhere; }
.imagen__falta { margin: 0; padding: var(--space-4); border: 1px dashed var(--control-border); border-radius: var(--radius-md); }
.imagen__ctrl { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dialogo.imagen-grande { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: var(--space-4); background: transparent; display: flex; align-items: center; justify-content: center; }
.dialogo.imagen-grande::backdrop { background: color-mix(in srgb, var(--barra) 94%, transparent); }
.imagen-grande__marco { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 100%; max-height: 100%; }
.imagen-grande__img { max-width: 100%; max-height: calc(100dvh - 6rem); object-fit: contain; border-radius: var(--radius-md); }
.imagen-grande .imagen__pie { color: var(--texto); }
.imagen-grande__cerrar { position: fixed; top: calc(var(--space-4) + env(safe-area-inset-top)); right: var(--space-4); background: var(--surface-raised); color: var(--text); border-radius: var(--radius-pill); }
.tabla-simple { margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.tabla-simple__desliza { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tabla-simple__desliza:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tabla-simple table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-ui); }
.tabla-simple th, .tabla-simple td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; text-align: left; min-width: 8rem; max-width: 28rem; }
.tabla-simple th:last-child, .tabla-simple td:last-child { border-right: 0; }
.tabla-simple tbody tr:last-child td { border-bottom: 0; }
.tabla-simple th { background: var(--surface-sidebar); font-weight: 600; }
.tabla-simple__texto { outline: none; min-height: 1.4em; white-space: pre-wrap; overflow-wrap: anywhere; }
.tabla-simple__texto code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; padding: 0 .3em; border-radius: var(--radius-xs); background: var(--tag-neutral-bg); }
.tabla-simple__ctrl { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pagina--bloqueada .tabla-simple__ctrl, .pagina--bloqueada .imagen__ctrl { display: none; }
.clase-nota { margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--text-muted); }
.importar { display: flex; flex-direction: column; gap: var(--space-3); }
.importar__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.importar__cifras li { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sidebar); font-size: var(--fs-small); color: var(--text-muted); }
.importar__cifras strong { display: block; font-family: var(--font-display); font-size: var(--fs-h3, 18px); color: var(--text); font-variant-numeric: tabular-nums; }
.importar__lista { margin: 0; padding-left: var(--space-5); max-height: 12rem; overflow-y: auto; font-size: var(--fs-small); }
.diferencias { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); max-height: 60dvh; overflow: auto; }
.diferencias__col { min-width: 0; }
.diferencias__col h3 { margin: 0 0 var(--space-2); font-size: var(--fs-ui); position: sticky; top: 0; background: var(--surface-raised); }
.diferencias pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-small); }
.diferencias .dif--quita { background: var(--tag-red-bg); }
.diferencias .dif--pone { background: var(--tag-lime-bg); }
.marca-pie { margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--text-faint); text-align: center; }
@media (max-width: 760px) {
  .diferencias { grid-template-columns: 1fr; }
  .tabla-simple th, .tabla-simple td { min-width: 7rem; }
}

/* Etapa 9c: mover filas de la vista Tabla con el asa ⋮⋮ (ratón: arrastrar; dedo: mantener pulsado; Alt+↑/↓) */
.fila__asa { flex: none; display: inline-grid; place-items: center; width: var(--space-5); min-height: var(--toque); padding: 0; border: 0; border-radius: var(--radius-xs); background: none;
  color: var(--text-faint); font-size: var(--fs-small); letter-spacing: -2px; cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.fila__asa:hover, .fila__asa:focus-visible { background: var(--surface-hover); color: var(--text); }
@media (hover: hover) {
  .fila__asa { min-height: var(--toque-escritorio); opacity: 0; transition: opacity var(--dur-rapida) ease; }
  .fila:hover .fila__asa, .fila__asa:focus-visible, .fila--elegida .fila__asa { opacity: 1; }
}
.fila-fantasma { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--brand-teal); color: var(--text); font-size: var(--fs-ui); white-space: nowrap; }
.arrastre-fantasma.fila-fantasma:not(.arrastre-fantasma--fila) { width: max-content !important; max-width: min(320px, 80vw); overflow: hidden; text-overflow: ellipsis; }
.fila-fantasma__n { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--tag-teal-bg); color: var(--accent-text); font-size: var(--fs-small); font-weight: 600; }
tr.arrastre-origen, tbody.arrastre-origen { opacity: .4; }
.grupo__plegar { touch-action: manipulation; -webkit-touch-callout: none; }

/* =====================================================================================================================
   Rediseño premium · Parte 1 (diseno/LEEME-DISENO.md). Colores SOLO de marca/tokens.css (las 12 variables y sus alias).
   Reglas: íconos de línea 16 px trazo 1,6; un solo acento verde (ámbar solo «En curso»); sin degradados; bordes de 1 px
   y sombras casi nulas; estado = punto + texto; vacío = «—»; un botón con relleno por pantalla; ritmo 4/8/12/16/24/32,
   filas de 44 px, radios 8/12; Space Grotesk solo en títulos (34 px) e IBM Plex Sans 14 px; clases a 16 px / 1,65 / 680 px;
   láminas en tarjeta de 14 px (al 94 % en oscuro); movimiento de 150–200 ms con «reducir movimiento».
   ===================================================================================================================== */
:root {
  --fs-titulo: 34px; --fs-h1: 24px; --fs-h2: 18px; --fs-h3: 16px; --fs-ui: 14px; --fs-small: 13px; --fs-eyebrow: 12px;
  --ico: 16px; --punto: 7px; --emoji-grande: 40px; --pagina-w: 820px; --pagina-tabla-w: 960px; --lectura-w: 680px;
  --dur-rapida: 150ms; --dur-media: 180ms; --dur-salida: 150ms; --dur-lenta: 200ms; --desliza: 6px; --superior-h: 52px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}
body { font-size: var(--fs-ui); }
.ico { width: var(--ico); height: var(--ico); stroke-width: 1.6; }
.btn-ico { color: var(--secundario); border-radius: var(--radius-sm); }
.btn-ico .ico { width: 16px; height: 16px; }
.btn-ico.es-favorita { color: var(--en-curso); } /* estrella marcada */
.eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.tenue { color: var(--secundario); }
.etiqueta-texto { color: var(--secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiqueta-texto .ico { vertical-align: -3px; }
/* Ícono de página: emoji elegido o ícono de línea, 16 px en menú y filas */
.icono-pag { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--secundario); line-height: 1; }
.icono-pag .ico { width: 16px; height: 16px; }
.icono-pag--emoji { font-size: 15px; }
.menu__icono { width: 20px; font-family: var(--font-body); font-weight: 500; color: var(--secundario); }
.menu__icono .ico, .menu__icono .icono-pag { width: 16px; height: 16px; }
.menu__rejilla .menu__icono .ico { width: 18px; height: 18px; }
.menu__titulo, .menu__grupo { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--tenue); }
.menu { border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.menu__marca { color: var(--acento); font-weight: 600; }
.k-btn--peligro { background: var(--peligro); color: var(--superficie); }
/* Botón de texto con ícono, sin borde (Filtrar, Orden, Agrupar, Añadir portada…) */
.boton-texto { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--secundario); font-size: 13px; white-space: nowrap; transition: background var(--dur) ease, color var(--dur) ease; }
.boton-texto:hover { background: var(--surface-hover); color: var(--texto); }
.boton-texto--activo { color: var(--acento); font-weight: 500; }
.boton-texto .ico { width: 15px; height: 15px; }

/* ---- Barra lateral ---- */
.barra { background: var(--barra); border-right: 1px solid var(--borde); padding-right: var(--space-2); }
.k-sidebar__ws { min-height: 44px; }
.k-sidebar__ws .btn-ico { margin-left: auto; }
.barra__busqueda { margin: var(--space-2) 0 var(--space-3); min-height: 32px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--borde); border-radius: var(--radius-sm); background: var(--superficie); color: var(--tenue); }
.barra__busqueda:focus-within { border-color: var(--acento); }
.barra__buscar { font-size: 13px; }
.barra__buscar::placeholder { color: var(--tenue); }
.barra__atajo { flex: none; padding: 0 5px; border: 1px solid var(--borde); border-radius: 4px; font-family: var(--font-body); font-size: 11px; line-height: 16px; color: var(--tenue); white-space: nowrap; }
.k-side-item { min-height: 32px; font-size: 14px; }
.k-side-item .ico { width: 16px; }
.k-side-item[aria-current="page"] { box-shadow: none; }
.barra__seccion .k-sidebar__label { padding-top: var(--space-4); }
.barra__seccion .btn-ico { width: 28px; height: 28px; opacity: 0; transition: opacity var(--dur) ease; }
.barra__seccion:hover .btn-ico, .barra__seccion .btn-ico:focus-visible { opacity: 1; }
.categoria { margin-top: var(--space-4); }
.categoria:hover { background: none; }
.categoria__nombre { min-height: 28px; padding: 0 var(--space-2); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.categoria__nombre .ico { width: 12px; height: 12px; opacity: 0; transition: opacity var(--dur) ease, transform var(--dur) ease; }
.categoria:hover .categoria__nombre .ico, .categoria__nombre:focus-visible .ico, .categoria__nombre[aria-expanded="false"] .ico { opacity: 1; }
.categoria__nombre .k-side-item__count { opacity: 0; }
.categoria:hover .k-side-item__count { opacity: 1; }
.categoria__menu { width: 28px; height: 28px; opacity: 0; }
.categoria:hover .categoria__menu, .categoria__menu:focus-visible { opacity: 1; }
.arbol__fila { padding-left: calc(var(--nivel) * var(--space-3)); border-radius: var(--radius-sm); }
.arbol__fila.es-actual { box-shadow: none; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.arbol__fila.es-actual .arbol__nombre { font-weight: 500; }
.arbol__plegar { width: 20px; height: 30px; color: var(--tenue); }
.arbol__plegar .ico { width: 14px; height: 14px; }
.arbol__nombre { min-height: 30px; color: var(--texto); font-weight: 400; font-size: 14px; padding: 0 var(--space-1); }
.arbol__acciones .btn-ico { width: 26px; height: 26px; }
.barra__pie .k-side-item { color: var(--secundario); }
.marca-pie { font-size: 11px; }
/* Asa para ensanchar la barra: zona de agarre invisible de 8 px sobre el borde de 1 px; al pasar el ratón o arrastrar,
   solo una línea de 2 px del acento (sin franja de color en reposo). Lo mismo en el panel lateral y las columnas. */
@media (min-width: 761px) {
  .barra-asa, .barra-asa:hover, .barra-asa:focus-visible, .barra-asa.arrastrando,
  .vistazo__asa, .vistazo__asa:hover, .vistazo__asa:focus-visible, .vistazo__asa.arrastrando { background: none; outline: none; }
  .barra-asa { left: calc(var(--barra-w) - 4px); width: 8px; }
  .barra-asa::after, .vistazo--lado .vistazo__asa::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background var(--dur) ease; }
  .barra-asa:hover::after, .barra-asa:focus-visible::after, .barra-asa.arrastrando::after,
  .vistazo__asa:hover::after, .vistazo__asa:focus-visible::after, .vistazo__asa.arrastrando::after { background: var(--acento); }
  .vistazo--lado .vistazo__asa { left: -4px; width: 8px; }
}

/* ---- Barra superior: migas + estrella + «Asistente» con borde ---- */
.superior { background: var(--fondo); border-bottom: 1px solid var(--borde); gap: var(--space-1); }
.migas { font-size: 13px; gap: 2px; }
.migas__enlace { color: var(--secundario); padding: var(--space-1) 6px; border-radius: 6px; }
.migas__enlace.migas__actual { color: var(--texto); font-weight: 500; }
.migas__sep { color: var(--tenue); padding: 0 2px; }
.migas__flecha { opacity: 0; min-width: 18px; font-size: 11px; transition: opacity var(--dur) ease; }
.migas__tramo:hover .migas__flecha, .migas__flecha:focus-visible { opacity: 1; }
.boton-asistente { height: 32px; gap: 6px; }
.guardado { font-size: 12px; }
@media (min-width: 761px) {
  .superior { padding-left: var(--space-4); padding-right: var(--space-4); }
  /* Pestañas de la app: con una sola pestaña no hace falta la tira (se abren más con Ctrl+clic o el botón de pestañas). */
  .pestanas:not(:has(.pestana + .pestana)) { display: none; }
  .pestanas { background: var(--barra); border-bottom: 1px solid var(--borde); }
}

/* ---- Página: cabecera con baldosa de ícono, título 34 px y subtítulo gris ---- */
.pagina { padding-bottom: var(--space-8); }
.pagina--tabla .pagina__cuerpo { max-width: var(--pagina-tabla-w); }
.sin-portada .pagina__cabeza { padding-top: var(--space-8); }
.pagina__cabeza { align-items: center; gap: var(--space-3); min-height: 40px; }
.baldosa-icono, .k-page__icon.baldosa-icono { position: relative; z-index: 2; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--acento-suave); color: var(--acento); cursor: pointer; font-size: 22px; transition: border-color var(--dur) ease; }
.baldosa-icono:hover:not(:disabled) { border-color: var(--borde); }
.baldosa-icono:disabled { cursor: default; opacity: 1; }
.icono-pag--titulo { width: 22px; height: 22px; color: var(--acento); }
.icono-pag--titulo .ico { width: 20px; height: 20px; }
.icono-pag--titulo.icono-pag--emoji { font-size: 22px; }
/* Con portada (imagen de la persona): la baldosa va por encima, montada sobre el borde inferior de la portada. */
.con-portada .pagina__cabeza { position: relative; z-index: 2; margin-top: -20px; align-items: flex-start; }
.con-portada .pagina__extras { margin-top: 24px; } /* bajo el borde de la portada, sin que esta los tape */
.con-portada .baldosa-icono { background: var(--superficie); border-color: var(--borde); }
.pagina__extras { display: flex; gap: var(--space-1); opacity: 0; transition: opacity var(--dur) ease; }
.pagina__cabeza:hover .pagina__extras, .pagina__extras:focus-within { opacity: 1; }
@media (hover: none) { .pagina__extras { opacity: 1; } }
.k-page__title { margin: var(--space-4) 0 var(--space-1); }
.pagina__subtitulo { margin: 0 0 var(--space-6); font-size: 13px; color: var(--secundario); }
.pagina__antetitulo { margin: var(--space-6) 0 calc(-1 * var(--space-2)); font-size: 12px; color: var(--tenue); }
.k-page__cover { position: relative; }
/* Clase del curso: chips de estado/nota y tipo; lectura a 16 px, interlineado 1,65 y 680 px de ancho */
.chips-clase { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.chip-clase { display: inline-flex; align-items: center; gap: 2px; min-height: 24px; padding: 0 10px; border: 1px solid var(--borde); border-radius: var(--radius-pill); font-size: 12px; color: var(--secundario); white-space: nowrap; }
.chip-clase--estado { border-color: transparent; background: var(--acento-suave); color: var(--texto); }
.chip-clase .estado { font-size: 12px; }
.pagina--clase .pagina__cuerpo { max-width: calc(var(--lectura-w) + 2 * var(--space-12)); }
.pagina--clase .bloques { font-size: 16px; line-height: 1.65; }
.propiedades-plegable { margin: 0 0 var(--space-6); border-bottom: 1px solid var(--borde); }
.propiedades-plegable > summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; list-style: none; cursor: pointer; color: var(--secundario); font-size: 13px; }
.propiedades-plegable > summary::-webkit-details-marker { display: none; }
.propiedades-plegable > summary .ico { width: 14px; height: 14px; transition: transform var(--dur) ease; }
.propiedades-plegable[open] > summary .ico { transform: rotate(90deg); }
.propiedades-plegable .propiedades { border-bottom: 0; margin-bottom: var(--space-3); }
.propiedades { gap: 0 var(--space-4); }
.propiedades dt { font-size: 13px; color: var(--secundario); min-height: 36px; }
.propiedades dt > span[aria-hidden] { color: var(--tenue); width: 16px; text-align: center; }
/* Bloques de texto */
.bloque--h1 .editable { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.bloque--h2 .editable { font-size: 18px; font-weight: 600; }
.bloque--h3 .editable { font-size: 16px; }
.lista__marca { color: var(--secundario); font-weight: 500; }
/* Cuadros destacados y citas: tarjeta con borde (como «Objetivo» en la referencia) */
.bloque--cita .editable { padding: var(--space-4); border: 1px solid var(--borde); border-radius: var(--radius-md); background: var(--superficie); color: var(--texto); }
.cuadro { background: var(--superficie); }
.cuadro__color { min-height: 28px; font-size: 12px; }
/* Láminas del curso: tarjeta con borde y esquinas de 14 px; en oscuro, al 94 % para que no deslumbren */
.imagen__boton { padding: var(--space-3); border: 1px solid var(--borde); border-radius: var(--radius-lamina); background: var(--superficie); }
.imagen__img { border: 0; border-radius: 6px; }
[data-theme="dark"] .imagen__img, [data-theme="black"] .imagen__img { opacity: .94; }
.imagen__pie { font-size: 13px; }
.bloques__nuevo { font-size: 13px; }

/* ---- Tablas: pestañas subrayadas + Filtrar/Orden/Agrupar como texto; tabla en tarjeta ---- */
.tabla { gap: var(--space-3); }
.tabla__cabeza { display: flex; align-items: flex-end; gap: var(--space-3); border-bottom: 1px solid var(--borde); }
.tabla__cabeza .vistas { flex: 1; min-width: 0; border-bottom: 0; }
.tabla__cabeza .tabla__barra { flex: none; flex-wrap: nowrap; gap: 2px; padding-bottom: var(--space-1); }
.vistas { gap: var(--space-4); }
.vistas__pestana { min-height: 36px; padding: 0; margin-bottom: -1px; color: var(--secundario); font-size: 14px; border-bottom: 2px solid transparent; }
.vistas__pestana[aria-selected="true"] { color: var(--texto); font-weight: 500; border-bottom-color: var(--texto); }
.vistas .btn-ico { width: 28px; height: 28px; opacity: 0; }
.vistas:hover .btn-ico, .vistas .btn-ico:focus-visible { opacity: 1; }
.tabla__marco { border: 1px solid var(--borde); border-radius: var(--radius-md); background: var(--superficie); }
.tabla .k-table { border-collapse: separate; border-spacing: 0; }
.tabla .k-table th, .tabla .k-table td { padding: 0 var(--space-3); height: 44px; border-bottom: 1px solid var(--borde-suave); }
.tabla .k-table th { height: 36px; font-size: 12px; font-weight: 400; color: var(--tenue); background: transparent; }
.columna { min-height: 32px; font-size: 12px; color: var(--tenue); }
.columna__tipo { display: none; }
.tabla .k-table .celda-fija { background: var(--superficie); box-shadow: none; padding-left: 28px; }
.tabla .k-table th.celda-fija { padding-left: 28px; }
.tabla .k-table tr.fila:hover td, .tabla .k-table tr.fila:hover .celda-fija { background: color-mix(in srgb, var(--texto) 3%, var(--superficie)); }
.tabla .k-table tr.fila--elegida td, .tabla .k-table tr.fila--elegida .celda-fija { background: var(--acento-suave); }
.celda__campo { min-height: 32px; font-size: 14px; color: var(--texto); }
.celda__campo::placeholder { color: var(--tenue); }
.celda-fija .celda__campo { font-weight: 400; }
.celda__fila { gap: var(--space-2); }
.tabla .k-table .celda-fija .celda__fila { position: relative; }
/* Fila: ícono 16 px (se arrastra para mover); sin casilla redonda: la selección aparece al pasar el ratón */
.fila__emoji { display: inline-grid; place-items: center; flex: none; }
.fila__sel { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity var(--dur) ease; }
.fila:hover .fila__sel, .fila--elegida .fila__sel, .tabla--eligiendo .fila__sel, .fila__sel:focus-visible,
.cabecera-grupo:hover .fila__sel, thead tr:hover .fila__sel { opacity: 1; pointer-events: auto; }
.fila__asa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 1 !important; }
.fila__asa:focus-visible { width: 18px; height: 24px; left: -24px; top: 50%; transform: translateY(-50%); clip-path: none; z-index: 2; background: var(--superficie); }
.fila__acciones { --fila-fondo: color-mix(in srgb, var(--texto) 3%, var(--superficie)); padding-left: var(--space-2); }
.fila__acciones .k-btn--sm { height: 26px; padding: 0 var(--space-2); font-size: 12px; }
.fila__acciones .btn-ico { width: 26px; height: 26px; }
.campo-fecha { position: relative; display: flex; flex: 1; min-width: 0; }
.campo-fecha .celda__campo { color: var(--texto); }
.celda__campo[data-vacio]:not(:focus) { color: transparent; }
.celda__campo[data-vacio]:not(:focus)::-webkit-datetime-edit { opacity: 0; }
.campo-fecha:has(.celda__campo[data-vacio]:not(:focus))::after { content: "—"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }
.celda__campo::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; transition: opacity var(--dur) ease; }
.fila:hover .celda__campo::-webkit-calendar-picker-indicator, .celda__campo:focus::-webkit-calendar-picker-indicator, .propiedades .celda__campo::-webkit-calendar-picker-indicator { opacity: .6; }
.celda__campo[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.celda__campo[type="number"]::-webkit-inner-spin-button, .celda__campo[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.celda__campo[type="number"][data-vacio]:not(:focus) { color: var(--tenue); }
.estado { font-size: 14px; font-weight: 400; color: var(--texto); }
.celda__boton { min-height: 32px; }
/* Grupos (vista agrupada): chevron + nombre en negrita + «7 clases» gris; el grupo abierto, en su tarjeta */
.tabla__marco--grupos { border: 0; border-radius: 0; background: none; }
.tabla__marco--grupos .k-table tr.grupo td { height: 44px; padding: 0; background: none; border-bottom: 0; border-top: 1px solid var(--borde); }
.tabla__marco--grupos .k-table tbody:first-of-type tr.grupo td { border-top: 0; }
.grupo__cabeza { gap: var(--space-2); }
.grupo__plegar { gap: var(--space-2); min-height: 44px; color: var(--texto); }
.grupo__plegar .ico { width: 14px; height: 14px; color: var(--tenue); }
.grupo__nombre { font-weight: 600; font-size: 14px; color: var(--texto); }
.grupo__cuenta { font-size: 12px; color: var(--tenue); }
.grupo__cabeza .btn-ico { width: 28px; height: 28px; opacity: 0; transition: opacity var(--dur) ease; }
tr.grupo:hover .grupo__cabeza .btn-ico, .grupo__cabeza .btn-ico:focus-visible { opacity: 1; }
/* Tarjeta del grupo abierto: borde de 1 px y esquinas de 12 px alrededor de su cabecera de columnas, filas y «Nueva» */
.tabla__marco--grupos .grupo--abierto tr:not(.grupo) > :is(td, th) { background: var(--superficie); }
.tabla__marco--grupos .grupo--abierto tr:not(.grupo) > :first-child { border-left: 1px solid var(--borde); }
.tabla__marco--grupos .grupo--abierto tr:not(.grupo) > :last-child { border-right: 1px solid var(--borde); }
.tabla__marco--grupos .grupo--abierto tr.cabecera-grupo > th { border-top: 1px solid var(--borde); }
.tabla__marco--grupos .grupo--abierto tr.cabecera-grupo > th:first-child { border-top-left-radius: var(--radius-md); }
.tabla__marco--grupos .grupo--abierto tr.cabecera-grupo > th:last-child { border-top-right-radius: var(--radius-md); }
.tabla__marco--grupos .grupo--abierto tr:last-child > :is(td, th) { border-bottom: 1px solid var(--borde); }
.tabla__marco--grupos .grupo--abierto tr:last-child > :first-child { border-bottom-left-radius: var(--radius-md); }
.tabla__marco--grupos .grupo--abierto tr:last-child > :last-child { border-bottom-right-radius: var(--radius-md); }
.tabla__marco--grupos .grupo--abierto tr:last-child > :only-child { border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); }
.tabla__marco--grupos .grupo--abierto + tbody tr.grupo td { border-top: 0; }
.tabla__marco--grupos .grupo--abierto tr:last-child > :is(td, th) { box-shadow: 0 var(--space-4) 0 0 transparent; }
.tabla__marco--grupos .grupo--abierto + tbody tr.grupo td { padding-top: var(--space-3); }
.cabecera-grupo th { background: var(--superficie); }
.fila-nueva td { height: 40px; }
.fila-nueva__caja { display: flex; align-items: center; gap: var(--space-2); color: var(--tenue); cursor: text; }
.fila-nueva__caja .ico { width: 14px; height: 14px; }
.fila-nueva .celda__campo { font-size: 13px; }
/* Colores de grupos «Translúcidos» (opción de cada vista): tinte suave del color de la opción */
.opc--teal { --opc: var(--opc-teal); } .opc--lime { --opc: var(--opc-lime); } .opc--blue { --opc: var(--opc-blue); }
.opc--violet { --opc: var(--opc-violet); } .opc--pink { --opc: var(--opc-pink); } .opc--red { --opc: var(--opc-red); }
.opc--orange { --opc: var(--opc-orange); } .opc--amber { --opc: var(--opc-amber); } .opc--brown { --opc: var(--opc-brown); }
.opc--neutral { --opc: var(--opc-neutral); }
.muestra { border: 0; background: var(--opc-neutral); width: 12px; height: 12px; }
.muestra.k-tag--teal { background: var(--opc-teal); } .muestra.k-tag--lime { background: var(--opc-lime); } .muestra.k-tag--blue { background: var(--opc-blue); }
.muestra.k-tag--violet { background: var(--opc-violet); } .muestra.k-tag--pink { background: var(--opc-pink); } .muestra.k-tag--red { background: var(--opc-red); }
.muestra.k-tag--orange { background: var(--opc-orange); } .muestra.k-tag--amber { background: var(--opc-amber); } .muestra.k-tag--brown { background: var(--opc-brown); }
.tabla__marco--grupos .grupo-tinte tr.grupo td { background: color-mix(in srgb, var(--opc) var(--tinte), var(--fondo)); }
.tabla__marco--grupos .grupo-tinte tr.grupo td:first-child { border-radius: var(--radius-sm); }
.grupo-tinte .grupo__nombre, .tablero--tinte .tablero__cabeza .etiqueta-texto { color: var(--opc); font-weight: 600; }
.grupo-tinte .grupo__plegar { padding-left: var(--space-2); }
.tabla__marco--grupos .grupo-tinte.grupo--abierto tr:not(.grupo) > :is(td, th) { background: color-mix(in srgb, var(--opc) var(--tinte-tarjeta), var(--superficie)); }
.tablero__col { background: color-mix(in srgb, var(--texto) 3%, var(--fondo)); border-radius: var(--radius-md); }
.tablero--tinte .tablero__col { background: color-mix(in srgb, var(--opc) var(--tinte), var(--fondo)); }
.tablero--tinte .tarjeta { background: color-mix(in srgb, var(--opc) var(--tinte-tarjeta), var(--superficie)); border-color: color-mix(in srgb, var(--opc) 18%, var(--borde)); }
.tablero__cabeza .grupo__cuenta { margin-left: auto; }
.tarjeta__titulo { font-weight: 500; }
.tarjeta--fantasma { rotate: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
/* Arrastrar filas: fantasma con la forma de la fila, línea de destino de 2 px del acento */
.arrastre-fantasma { opacity: .95; border: 1px solid var(--borde); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.arrastre-fantasma--fila.fila-fantasma { display: flex; align-items: center; gap: var(--space-2); width: auto; max-width: none; padding: 0 var(--space-3) 0 28px; border-color: var(--acento); border-radius: var(--radius-sm); background: var(--superficie) !important; opacity: 1; font-size: 14px; max-height: none; white-space: nowrap; }
.arrastre-fantasma .fila__acciones, .arrastre-fantasma .fila__sel, .arrastre-fantasma .fila__asa { display: none !important; }
.arrastrando .fila__acciones, .arrastrando .fila__sel { opacity: 0 !important; pointer-events: none; }
.arrastre-linea { height: 2px; background: var(--acento); box-shadow: none; }
.arrastre-linea--caja { background: var(--acento-suave); border: 1px solid var(--acento); }
tr.arrastre-origen { opacity: 1; }
tr.arrastre-origen td { opacity: .4; }
/* Barra de selección */
.barra-sel { border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }

/* ---- Inicio: logo C a 64 px, tarjetas con borde ---- */
.logo--bienvenida { width: 64px; height: 64px; border-radius: 14px; margin-bottom: var(--space-2); }
.vista__titulo { font-weight: 600; }
.vista__sub { font-size: 14px; font-family: var(--font-body); font-weight: 600; color: var(--texto); margin-top: var(--space-6); }
.tarjeta { border-radius: var(--radius-md); }
button.tarjeta:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--texto) 18%, var(--borde)); }
.tarjeta__emoji { font-size: 16px; }
.tarjetas .tarjeta__titulo { font-family: var(--font-body); font-weight: 500; }
.k-callout .k-btn { margin-left: var(--space-2); }
.vacio { border-color: var(--borde); }
.aviso { font-family: var(--font-body); font-weight: 500; border-radius: var(--radius-md); }
.segmento { border-radius: var(--radius-sm); border-width: 1px; font-family: var(--font-body); font-weight: 500; }
.segmento[aria-checked="true"] { background: var(--acento); color: var(--sobre-acento); }
.ajustes__pestana { font-family: var(--font-body); font-weight: 500; border-radius: var(--radius-sm); }
.mencion { background: none; color: var(--acento); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent); text-underline-offset: 3px; }
.ficha-rel { border-radius: 6px; }

/* ---- Celular ---- */
@media (max-width: 760px) {
  .superior__volver--texto { display: inline-flex; align-items: center; gap: 2px; min-height: var(--toque); max-width: 60%; padding: 0 var(--space-2); border: 0; background: none; color: var(--secundario); font-size: 14px; }
  .superior__volver--texto .ico { width: 18px; height: 18px; }
  .superior__titulo { font-family: var(--font-body); }
  .flotante__redondo, .flotante__ia { box-shadow: none; }
  .pagina__antetitulo { margin-top: var(--space-4); }
  .k-page__title { font-size: 26px; line-height: 1.2; }
  .pagina--clase .pagina__cabeza { display: none; } /* en el celular la clase empieza por su antetítulo (como la referencia) */
  .tabla .k-table .celda-fija, .tabla .k-table th.celda-fija { padding-left: var(--space-3); }
  .fila__sel { position: static; transform: none; display: none; }
  .tabla--eligiendo .fila__sel, .fila--elegida .fila__sel { display: grid; opacity: 1; pointer-events: auto; }
  .fila__asa { position: static; width: 20px; height: auto; clip-path: none; overflow: visible; }
  .reciente--sin-portada .reciente__emoji { position: static; margin: var(--space-3) var(--space-3) 0; }
  .boton-doble { box-shadow: none; }
  .pildora__logo { border-radius: 6px; }
}

/* ---- Ajustes tras revisar las capturas ---- */
.migas__flecha { width: 0; min-width: 0; padding: 0; overflow: hidden; }
.migas__tramo:hover .migas__flecha, .migas__flecha:focus-visible, .migas__flecha[aria-expanded="true"] { width: 18px; }
.vista--inicio .k-callout { align-items: center; }
.vista--inicio .k-callout__icon .ico { margin-top: 0; color: var(--acento); }
.imagen__ctrl { opacity: 0; transition: opacity var(--dur) ease; }
.bloque:hover .imagen__ctrl, .bloque:focus-within .imagen__ctrl, .imagen__ctrl:focus-within { opacity: 1; }
@media (hover: none) { .imagen__ctrl { display: none; } .bloque:focus-within .imagen__ctrl { display: flex; opacity: 1; } }
@media (max-width: 760px) {
  /* Un solo botón con relleno por pantalla (en el celular, «Pregúntale a la IA»): «＋ ⌄» de la tabla va con borde */
  .boton-doble { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
  .boton-doble .boton-doble__flecha { border-left-color: var(--borde); }
  .boton-doble .ico { width: 16px; height: 16px; }
  .vista-selector { border: 1px solid var(--borde); background: var(--superficie); font-weight: 500; }
  .vista-selector .ico { width: 14px; height: 14px; color: var(--tenue); }
  .fila__abrir-movil { display: inline-grid; place-items: center; width: 32px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--secundario); }
  .fila__abrir-movil .ico { width: 16px; height: 16px; }
  .fila__titulo { font-weight: 500; }
  .tabla .k-table .celda-fija { min-width: min(var(--col-titulo-w), 66vw); }
}

.tarjeta__titulo { display: flex; align-items: flex-start; gap: var(--space-2); }
.tarjeta__titulo .icono-pag { margin-top: 2px; }
.cuadro__color { opacity: 0; transition: opacity var(--dur) ease; }
.bloque:hover .cuadro__color, .bloque:focus-within .cuadro__color { opacity: 1; }
@media (hover: none) { .cuadro__color { opacity: 1; } }

/* ---- Movimiento: cambio de página suave, sin parpadeo; solo cambia el lienzo ---- */
.barra { view-transition-name: vt-barra; }
.superior { view-transition-name: vt-superior; }
.pestanas { view-transition-name: vt-pestanas; }
.lienzo { view-transition-name: vt-lienzo; }
::view-transition-group(vt-barra), ::view-transition-group(vt-superior), ::view-transition-group(vt-pestanas),
::view-transition-old(vt-barra), ::view-transition-new(vt-barra), ::view-transition-old(vt-superior), ::view-transition-new(vt-superior),
::view-transition-old(vt-pestanas), ::view-transition-new(vt-pestanas) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(vt-lienzo) { animation-duration: var(--dur-media); }
::view-transition-old(vt-lienzo) { animation: vt-sale var(--dur-salida) var(--curva) both; }
::view-transition-new(vt-lienzo) { animation: vt-entra var(--dur-media) var(--curva) both; }
@keyframes vt-sale { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(var(--desliza)); } }
::view-transition-group(vt-emoji), ::view-transition-group(vt-titulo) { animation-duration: var(--dur-lenta); }
.entra-vista { animation: vt-entra var(--dur-media) var(--curva); }
@media (prefers-reduced-motion: reduce) {
  .barra, .superior, .pestanas, .lienzo { view-transition-name: none; }
}

/* =====================================================================================================================
   Rediseño · Parte 2 (mejoras de experiencia). Mismos tokens que la parte 1 (marca/tokens.css): nada de colores sueltos.
   ===================================================================================================================== */
/* ---- Accesibilidad: foco visible (anillo de 2 px del acento), texto solo para lectores y «Saltar al contenido» ---- */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lienzo:focus, .lienzo:focus-visible { outline: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; z-index: 90; top: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); transform: translateY(-200%); }
.saltar:focus { transform: none; }

/* ---- Menús: íconos de línea, interruptores y marca de elegida ---- */
.menu__icono { display: inline-grid; place-items: center; flex: none; }
.menu__marca { display: inline-grid; place-items: center; margin-left: auto; color: var(--acento); }
.menu__marca .ico { width: 16px; height: 16px; }
.menu__etiqueta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu__ruta { margin-left: auto; padding-left: var(--space-2); font-size: 12px; color: var(--tenue); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.interruptor { position: relative; flex: none; margin-left: auto; width: 28px; height: 16px; border-radius: var(--radius-pill); background: var(--borde); transition: background var(--dur) ease; }
.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); transition: transform var(--dur) ease; }
.interruptor.es-on { background: var(--acento); }
.interruptor.es-on::after { transform: translateX(12px); }
.menu--paleta { width: min(560px, calc(100vw - 32px)); max-width: none; }
.menu--paleta .menu__lista { max-height: min(60dvh, 520px); }
.fragmento { display: block; font-size: 12px; line-height: 1.45; color: var(--secundario); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fragmento__marca { background: var(--acento-suave); color: var(--texto); font-weight: 600; border-radius: 3px; padding: 0 1px; }
.vacio__emoji .ico { width: 24px; height: 24px; color: var(--tenue); }
.vacio--chico .vacio__emoji .ico { width: 20px; height: 20px; }
.vacio .k-btn .ico, .aviso .ico, .fallo__que .ico, .k-tag .ico, .menu__vacio .ico { width: 14px; height: 14px; vertical-align: -2px; }
.aviso { display: flex; align-items: center; gap: var(--space-2); }
/* El texto del aviso puede partirse por donde sea; el botón NO: «¿Qué hacer?» partido en
   dos líneas con el signo suelto se lee fatal (visto en la captura del 23/10). */
.aviso button { flex: none; white-space: nowrap; overflow-wrap: normal; }
.emoji-usuario { font-size: 15px; line-height: 1; }

/* ---- Avance «N de M»: barra fina de 4 px ---- */
.avance { display: inline-flex; align-items: center; gap: var(--space-2); }
.avance__barra { position: relative; width: 56px; height: 4px; border-radius: 2px; background: var(--borde); overflow: hidden; }
.avance__relleno { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--acento); }
.avance__texto { font-size: 12px; color: var(--tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.avance--grupo { margin-left: auto; padding-right: var(--space-2); }
.tabla__marco { container-type: inline-size; }
.tabla__marco--grupos .grupo__cabeza { display: flex; width: 100cqw; }
.avance-pagina { display: flex; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-3)) 0 var(--space-6); }
.k-page__title + .avance-pagina { margin-top: var(--space-2); }
.avance--pagina .avance__barra { width: 120px; }
.avance-pagina__texto { font-size: 12px; color: var(--tenue); }

/* ---- «Continuar donde lo dejaste» ---- */
.continuar { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-4) 0 var(--space-6); padding: var(--space-4) var(--space-6); border: 1px solid var(--borde); border-radius: var(--radius-md); background: var(--superficie); box-shadow: var(--shadow-card); }
.continuar__texto { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.continuar__eyebrow { margin: 0; font-size: 12px; font-weight: 500; color: var(--tenue); }
.continuar__titulo { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.continuar__titulo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continuar__meta { margin: 0; font-size: 13px; color: var(--secundario); }
.continuar__avance { margin-top: var(--space-1); }
.continuar__avance .avance__barra { width: 120px; }
.continuar__seguir .ico { width: 16px; height: 16px; }
.estudio .continuar { margin-top: var(--space-6); }

/* ---- Columnas Número con formato porcentaje ---- */
.celda__numero { font-variant-numeric: tabular-nums; }
.campo-num { display: flex; align-items: center; justify-content: flex-end; gap: 2px; width: 100%; }
.campo-num .celda__campo { text-align: right; min-width: 0; }
.campo-num__sufijo { flex: none; color: var(--texto); font-size: 14px; }
.campo-num:has(.celda__campo[data-vacio]) .campo-num__sufijo { display: none; }
.celda__si { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---- Tablero: columnas de ~288 px en el ordenador (caben 3–4) y tarjetas compactas ---- */
@media (min-width: 761px) {
  :root { --tablero-col-w: 288px; } /* UN solo número: lo usan la columna y la cuenta de cuánto necesita el tablero (v55) */
  .tablero__col { flex: 0 0 var(--tablero-col-w); min-width: 0; }
  .tablero .tarjeta { gap: 2px; padding: 0 var(--space-3) var(--space-2); }
  .tablero .tarjeta__titulo { min-width: 0; min-height: 32px; padding: 6px 0 2px; font-size: 13px; line-height: 1.35; white-space: normal; }
  .tablero .tarjeta__cabeza .btn-ico { width: 26px; height: 26px; opacity: 0; transition: opacity var(--dur) ease; }
  .tablero .tarjeta:hover .tarjeta__cabeza .btn-ico, .tablero .tarjeta__cabeza .btn-ico:focus-visible { opacity: 1; }
  .tablero .tarjeta__prop { font-size: 12px; }
  .tablero .tablero__lista { gap: 6px; }
}

/* ---- Lectura de una clase: barra de progreso, índice a la derecha y «Anterior · Siguiente» ---- */
.centro { position: relative; }
.lectura-progreso { position: absolute; z-index: 15; left: 0; right: 0; top: var(--lectura-top, 0); height: 2px; pointer-events: none; }
.lectura-progreso__relleno { display: block; width: 0; height: 100%; background: var(--acento); transition: width 80ms linear; }
.minimapa--abierto { transform: none; }
.minimapa--abierto .minimapa__rayas { display: none; }
.minimapa--abierto .minimapa__panel { position: static; width: var(--minimapa-w, 200px); max-height: calc(100dvh - 220px); opacity: 1; pointer-events: auto; transform: none; padding: 0 0 0 var(--space-3); border: 0; border-left: 1px solid var(--borde); border-radius: 0; background: none; box-shadow: none; }
.minimapa--abierto .minimapa__titulo { padding: 0 0 var(--space-2); font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tenue); }
.minimapa--abierto .minimapa__enlace { position: relative; padding: 4px 0 4px var(--space-2); font-size: 13px; white-space: normal; line-height: 1.4; color: var(--secundario); border-radius: 0; }
.minimapa--abierto .minimapa__enlace--h1, .minimapa--abierto .minimapa__enlace--h2 { padding-left: var(--space-2); }
.minimapa--abierto .minimapa__enlace--h3 { padding-left: var(--space-5); }
.minimapa--abierto .minimapa__enlace[aria-current] { color: var(--texto); font-weight: 500; }
.minimapa--abierto .minimapa__enlace[aria-current]::before { content: ""; position: absolute; left: calc(-1 * var(--space-3) - 1px); top: 4px; bottom: 4px; width: 2px; background: var(--acento); border-radius: 1px; }
.pie-clase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-width: var(--lectura-w); margin: var(--space-8) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--borde); }
.pie-clase__enlace { display: grid; gap: var(--space-1); min-height: 64px; padding: var(--space-3) var(--space-4); border: 1px solid var(--borde); border-radius: var(--radius-md); background: var(--superficie); color: var(--texto); text-align: left; cursor: pointer; transition: border-color var(--dur) ease; }
.pie-clase__enlace:hover { border-color: color-mix(in srgb, var(--texto) 18%, var(--borde)); }
.pie-clase__enlace--sig { text-align: right; justify-items: end; }
.pie-clase__sentido { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; color: var(--tenue); }
.pie-clase__sentido .ico { width: 14px; height: 14px; }
.pie-clase__titulo { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---- Modo lectura (tecla F): el modo enfoque sin pantalla completa; sin índice ni botón de repaso ---- */
.modo-lectura .minimapa, .modo-lectura .repaso { display: none !important; }
.modo-lectura.con-repaso .lienzo__contenido { padding-bottom: var(--space-8); }

/* ---- Láminas a pantalla completa: zoom, arrastre, deslizar y flechas ---- */
.dialogo.imagen-grande { padding: 0; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; opacity: var(--desvanecer, 1); }
.imagen-grande__barra { display: flex; align-items: center; gap: var(--space-2); padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-3) var(--space-2); }
.imagen-grande__cuenta { flex: 1; font-size: 13px; color: var(--secundario); }
.imagen-grande__zoom { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--borde); border-radius: var(--radius-pill); background: var(--superficie); }
.imagen-grande__nivel { min-width: 48px; text-align: center; font-size: 12px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.imagen-grande__boton { width: 40px; height: 40px; border-radius: var(--radius-pill); color: var(--texto); }
.imagen-grande__cerrar { position: static; border: 1px solid var(--borde); background: var(--superficie); }
.imagen-grande__escena { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; }
.imagen-grande__escena--zoom { cursor: grab; }
.imagen-grande__escena--zoom:active { cursor: grabbing; }
.imagen-grande__img { max-width: calc(100vw - 2 * var(--space-8)); max-height: 100%; object-fit: contain; border-radius: var(--radius-lamina); background: var(--superficie); transform-origin: center; will-change: transform; pointer-events: none; }
.imagen-grande__img--animar { transition: transform var(--dur) var(--curva); }
[data-theme="dark"] .imagen-grande__img, [data-theme="black"] .imagen-grande__img { opacity: .94; }
.imagen-grande__marco { padding: var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.imagen-grande__marco:has(.imagen__pie[hidden]) { padding: 0 0 env(safe-area-inset-bottom); }
.imagen-grande__lado { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid var(--borde); background: var(--superficie); }
.imagen-grande__lado--ant { left: var(--space-3); }
.imagen-grande__lado--sig { right: var(--space-3); }
.imagen-grande__lado:disabled { opacity: .35; }
.imagen-grande__lado[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .imagen-grande__img--animar { transition: none; } }

/* ---- Celular ---- */
@media (max-width: 760px) {
  /* Barra inferior: Inicio · Estudio · Buscar · Más (56 px de alto; se esconde al bajar y vuelve al subir) */
  :root { --flotante-h: 56px; }
  .inferior { inset: auto 0 0 0; height: auto; padding: 0 var(--seguro-der) var(--seguro-abajo) var(--seguro-izq); gap: 0; justify-content: space-around;
    background: var(--barra); border-top: 1px solid var(--borde); pointer-events: auto; }
  .inferior__boton { flex: 1; min-height: var(--flotante-h); gap: 2px; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--secundario); border-radius: 0; }
  .inferior__boton .ico { width: 20px; height: 20px; }
  .inferior__boton[aria-current="page"] { color: var(--acento); }
  .lienzo__contenido { padding-bottom: calc(var(--flotante-h) + var(--space-8) + var(--seguro-abajo)); }
  .avisos { --avisos-base: calc(var(--flotante-h) + var(--space-4) + var(--seguro-abajo)); }
  /* «Repasar · N preguntas» fijo abajo y «>» (como la referencia): sustituye a la barra inferior en las clases */
  .con-repaso .inferior { display: none; }
  .repaso { position: fixed; z-index: 21; inset: auto 0 0 0; display: flex; gap: var(--space-3); padding: var(--space-3) calc(var(--space-4) + var(--seguro-der)) calc(var(--space-3) + var(--seguro-abajo)) calc(var(--space-4) + var(--seguro-izq)); background: var(--fondo); border-top: 1px solid var(--borde); }
  .repaso__principal { flex: 1; height: 48px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md); }
  .repaso__principal .ico { width: 16px; height: 16px; }
  .repaso__siguiente { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid var(--borde); border-radius: var(--radius-md); background: var(--superficie); color: var(--texto); }
  .repaso__siguiente .ico { width: 18px; height: 18px; }
  .con-repaso .lienzo__contenido { padding-bottom: calc(72px + var(--space-8) + var(--seguro-abajo)); }
  .con-repaso .avisos { --avisos-base: calc(72px + var(--space-4) + var(--seguro-abajo)); }
  .pie-clase { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .pie-clase__enlace { padding: var(--space-3); }
  /* «Continuar»: en columna, el botón a lo ancho */
  .continuar { flex-direction: column; align-items: stretch; padding: var(--space-4); margin: var(--space-3) 0 var(--space-4); }
  .continuar__seguir { height: 44px; }
  .inicio-movil > .continuar { margin: var(--space-3) var(--space-4) var(--space-4); }
  /* Tablas como lista de tarjetas (título, estado y nota): sin desplazarse de lado */
  .tabla__marco--lista, .tabla__marco--lista.k-table-wrap { overflow: visible; border: 0; background: none; }
  .k-table--lista, .k-table--lista > tbody { display: block; width: 100%; }
  .k-table--lista tr.grupo, .k-table--lista tr.grupo > td { display: block; width: 100%; }
  .k-table--lista tr.fila--tarjeta { display: block; margin: 0 0 var(--space-2); }
  .k-table--lista tr.fila--tarjeta > td.fila-tarjeta { display: block; height: auto; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1); border: 1px solid var(--borde) !important; border-radius: var(--radius-md); background: var(--superficie) !important; }
  .k-table--lista tr.fila-nueva { display: block; }
  .k-table--lista tr.fila-nueva > td { display: block; height: auto; padding: 0 var(--space-2); border: 1px dashed var(--borde) !important; border-radius: var(--radius-md); background: none !important; }
  .k-table--lista tr.fila-nueva .grupo__cabeza { width: 100%; min-height: var(--toque); }
  .k-table--lista tr.tramo { display: block; }
  .fila-tarjeta__cabeza { display: flex; align-items: flex-start; gap: var(--space-1); }
  .fila-tarjeta__abrir { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--toque); padding: 12px var(--space-1); border: 0; background: none; color: var(--texto); text-align: left; font-size: 15px; font-weight: 500; line-height: 1.35; }
  .fila-tarjeta__abrir .icono-pag { margin-top: 2px; }
  .fila-tarjeta__titulo { overflow-wrap: anywhere; }
  .fila-tarjeta .fila__asa { align-self: center; width: 28px; min-height: var(--toque); }
  .fila-tarjeta__props { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: 0 var(--space-2) var(--space-1) calc(var(--space-1) + 28px + 24px); font-size: 13px; color: var(--secundario); }
  .fila-tarjeta__props .celda__tocar { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--space-1); }
  .fila-tarjeta__props .estado { font-size: 13px; }
  .fila-tarjeta__nota { color: var(--secundario); font-variant-numeric: tabular-nums; }
  .k-table--lista .fila__sel { position: static; transform: none; }
  .tabla__marco--grupos.tabla__marco--lista .grupo--abierto tr:not(.grupo) > :is(td, th) { border-left: 0; border-right: 0; }
  /* Toques de 44 px o más */
  .btn-ico, .boton-texto, .vistas__pestana, .grupo__plegar, .migas__enlace, .menu__item, .menu__lado, .k-btn--sm, .celda__tocar, .fila__abrir-movil,
  .barra-sel .k-btn, .tablero__nueva, .pie-clase__enlace, .estudio-item, .arbolm__vista { min-height: var(--toque); }
  .btn-ico, .menu__lado, .fila__abrir-movil { min-width: var(--toque); }
  .grupo__cabeza .btn-ico, .vistas .btn-ico, .barra__seccion .btn-ico, .arbol__acciones .btn-ico, .categoria__menu { width: var(--toque); height: var(--toque); opacity: 1; }
  .k-btn--sm { height: auto; }
  .baldosa-icono, .k-page__icon.baldosa-icono { width: var(--toque); height: var(--toque); }
  .celda__boton, .celda__campo, .propiedades dt { min-height: var(--toque); }
  .avance--grupo .avance__barra { width: 40px; }
  .tabla__marco--lista .grupo__plegar { flex: 1; min-width: 0; }
  .tabla__marco--lista .grupo__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabla__marco--lista .grupo__cuenta { display: none; }
  .tabla__marco--lista .avance--grupo { margin-left: 0; padding-right: 0; }
  .k-table--lista tr.fila--tarjeta > td.fila-tarjeta { padding-top: 0; padding-bottom: 0; }
  .fila-tarjeta__props { margin-top: -6px; }
}

/* Espacio nuevo (versión publicada): acciones de la página «Bienvenida» y estado vacío de Inicio. */
.bienvenida-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-2); }
.bienvenida-acciones .k-btn .ico { width: 16px; height: 16px; }
.bienvenida-acciones__curso[disabled] { opacity: 1; color: var(--tenue); cursor: default; }
.inicio-vacio { margin: var(--space-4) 0; }
.inicio-vacio__acciones { flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.inicio-vacio__acciones .k-btn { min-height: 44px; }

/* ---- Parte 5 · «Subir curso»: barra de progreso, vista previa y Ajustes → Datos ---- */
.ventana--progreso .ventana__cuerpo { min-width: min(420px, 100%); }
.progreso__barra { position: relative; height: 6px; margin-top: var(--space-4); border-radius: 3px; background: var(--borde); overflow: hidden; }
.progreso__relleno { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--acento); transition: width 150ms linear; }
.progreso__cuenta { margin: var(--space-2) 0 0; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .progreso__relleno { transition: none; } }
.subir-curso { display: flex; flex-direction: column; gap: var(--space-3); }
.subir-curso p { margin: 0; }
.subir-curso__resumen { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--borde); border-radius: var(--radius-sm, 8px);
  background: var(--acento-suave); color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.subir-curso__resumen .ico { flex: none; color: var(--acento); }
.datos-curso__botones { flex-wrap: wrap; gap: var(--space-2); }
.imagen__falta .k-btn { margin-left: var(--space-1); vertical-align: middle; }

/* ---- Etapa B · «Importar desde Notion»: cuadro sin emoji, bloque de archivo y vista previa ---- */
.cuadro__emoji:empty { display: none; }
.archivo { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--borde); border-radius: var(--radius-md); background: var(--superficie); min-width: 0; }
.archivo__icono { flex: none; display: inline-flex; color: var(--secundario); }
.archivo__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.archivo__accion { flex: none; }
.archivo .k-btn { flex: none; min-height: 44px; }
.notion-previa .importar__lista .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- Organizar y color (pedido de la persona: «organizar como en mi Notion, colores a los módulos, emoticones grandes,
   emoticones junto a las clases y cuadros arriba»). Solo tokens; los tonos salen de la paleta --opc-* (tokens.css). ---- */
/* Bloques elegidos con Mayús+clic en el asa (para «Organizar en columnas») */
.bloque--elegido { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--acento) 8%, transparent); box-shadow: inset 2px 0 0 var(--acento); }
/* Secciones en columnas como en Notion: emoji pequeño + título en negrita (enlace), párrafo debajo, sin flecha */
.columnas .enlace { min-height: 32px; padding: 0; gap: 6px; }
.columnas .enlace:hover { background: none; }
.columnas .enlace > .ico:last-child { display: none; }
.columnas .enlace__texto { flex: 0 1 auto; font-weight: 600; text-decoration-color: color-mix(in srgb, var(--texto) 25%, transparent); }
.columnas .enlace:hover .enlace__texto { text-decoration-color: currentColor; }
.columnas .enlace__emoji .icono-pag--emoji { font-size: 16px; }
.columnas__col > .bloque--link + .bloque--p { margin-top: -4px; }
@media (min-width: 761px) { .columnas { column-gap: var(--space-6); } .columnas__col { gap: 0; } }
/* Ventana «Organizar en columnas» */
.organizar { display: flex; flex-direction: column; gap: var(--space-3); }
.organizar__n { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.organizar__opcion { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); cursor: pointer; }
.organizar__opcion input { accent-color: var(--acento); width: 16px; height: 16px; }
.organizar__opcion:has(input:disabled) { color: var(--tenue); cursor: default; }
.organizar__previa { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-2); }
.organizar__col { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2); border: 1px dashed var(--borde); border-radius: var(--radius-sm); background: var(--fondo); }
.organizar__sec { padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--superficie); border: 1px solid var(--borde-suave); font-size: 13px; overflow-wrap: anywhere; }
/* Etiquetas de color (Selección y Selección múltiple): píldora con el tinte de su opción y el texto de su tono */
.etq-color { display: inline-flex; align-items: center; max-width: 100%; min-height: 20px; padding: 0 var(--space-2); border-radius: 6px; background: color-mix(in srgb, var(--opc, var(--opc-neutral)) var(--tinte-pildora), var(--superficie)); color: var(--opc, var(--opc-neutral)); font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etqs-color { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
.celda__boton .etqs-color { flex-wrap: nowrap; overflow: hidden; }
.grupo__nombre .etq-color, .tablero__cabeza .etq-color { font-weight: 600; }
.muestra--borde { background: var(--superficie); border: 1px solid var(--borde); }
/* Cuadros destacados con color (b.tono): fondo translúcido del tono, borde sutil y el texto normal (≥ 4,5:1) */
.cuadro--tono { background: color-mix(in srgb, var(--opc) var(--tinte-cuadro), var(--superficie)); border-color: color-mix(in srgb, var(--opc) 28%, var(--borde)); }
.cuadro--tono .k-callout__body, .cuadro--tono .editable { color: var(--texto); }
/* Emoji grande encima del título (≈72 px, sin baldosa), montado sobre la portada si la hay */
.icono-grande, .k-page__icon.icono-grande { position: relative; z-index: 2; display: inline-grid; place-items: center; width: auto; height: auto; min-width: var(--toque); margin: 0; padding: 0 4px; border: 0; border-radius: var(--radius-md); background: none; cursor: pointer; font-size: inherit; line-height: 1; }
.icono-grande:hover:not(:disabled) { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.icono-grande:disabled { cursor: default; opacity: 1; }
.icono-grande__emoji { font-size: 72px; line-height: 1.1; }
.pagina--emoji-grande .pagina__cabeza { align-items: flex-end; }
.sin-portada.pagina--emoji-grande .pagina__cabeza { padding-top: var(--space-6); }
.con-portada.pagina--emoji-grande .pagina__cabeza { margin-top: -44px; }
.con-portada.pagina--emoji-grande .pagina__extras { margin-top: 48px; }
@media (max-width: 760px) { .icono-grande__emoji { font-size: 56px; } .con-portada.pagina--emoji-grande .pagina__cabeza { margin-top: -34px; } }
/* Portada con el degradado de marca, solo si se eligió a propósito */
.portada--degradado { background: linear-gradient(120deg, var(--marca), color-mix(in srgb, var(--acento) 70%, var(--marca))); }
.k-page__cover.portada--degradado { height: var(--portada-h); }
@media (min-width: 761px) { .k-page__cover.portada--degradado { height: calc(var(--portada-h) + var(--space-8)); } }
/* Tarjetas con portada: Recientes del ordenador y tablero («Mostrar portada en tarjetas») */
.tarjeta__portada { display: block; position: relative; overflow: hidden; height: 72px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tarjeta__portada .portada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarjeta__portada .portada__falta { display: none; }
.tarjetas .tarjeta--portada { padding-top: 0; overflow: hidden; }
.tarjetas .tarjeta--portada .tarjeta__portada { align-self: stretch; margin: 0 calc(-1 * var(--space-4)) 0; border-radius: 0; }
.tarjetas .tarjeta--portada .tarjeta__emoji { margin-top: -14px; position: relative; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--superficie); box-shadow: var(--shadow-card); }
.tablero .tarjeta--portada { padding-top: 0; overflow: hidden; }
.tablero .tarjeta--portada .tarjeta__portada { margin: 0 calc(-1 * var(--space-3)) var(--space-1); height: 64px; border-radius: 0; }
/* El ícono de la fila es un botón: pulsar cambia el ícono (y con el ratón, arrastrar mueve la fila) */
button.fila__emoji { min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: inherit; font: inherit; cursor: pointer; }
button.fila__emoji:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
@media (max-width: 760px) { button.fila__emoji { min-width: var(--toque); min-height: var(--toque); } }
.icono-pag--emoji { font-size: 16px; }
/* Importar desde Notion: opción «Organizar estas secciones en columnas» */
.notion-previa__columnas { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--borde); border-radius: var(--radius-sm); background: var(--superficie); cursor: pointer; }
.notion-previa__columnas input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acento); }
.barra-sel { flex-wrap: wrap; }
.tarjetas .tarjeta--portada .tarjeta__titulo, .tarjetas .tarjeta--portada .tarjeta__ruta { align-self: stretch; }
/* Celular: dentro de unas columnas, los enlaces no enseñan sus controles hasta tocarlos (como la foto: limpio) */
@media (max-width: 760px) { .columnas .bloque--link:not(:focus-within) > .bloque__ctrl { display: none; } }

/* Antes de publicar · celular (360–430 px): las etiquetas se leen completas. En las cabeceras de grupo (tabla agrupada,
   lista de tarjetas y tablero) la píldora del módulo pasa a dos líneas equilibradas y el contador y la barra bajan a la
   línea siguiente; en celdas y tarjetas, las etiquetas también parten línea en lugar de cortarse con «…». */
@media (max-width: 760px) {
  .grupo__cabeza { flex-wrap: wrap; row-gap: 0; max-width: 100%; }
  .grupo__plegar { flex: 1 1 12rem; min-width: 0; flex-wrap: wrap; justify-content: flex-start; column-gap: var(--space-2); row-gap: 2px; padding-block: 6px; text-align: left; }
  .grupo__plegar > .ico { flex: none; }
  .grupo__nombre, .tabla__marco--lista .grupo__nombre { min-width: 0; max-width: calc(100% - 22px); overflow: visible; white-space: normal; text-overflow: clip; }
  .grupo__nombre .etq-color, .tablero__cabeza .etq-color, .k-table td .etq-color, .tarjeta .etq-color, .fila-tarjeta .etq-color {
    white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; overflow-wrap: anywhere; line-height: 18px; padding-block: 1px; }
  .celda__boton .etqs-color { flex-wrap: wrap; overflow: visible; }
  .avance--grupo, .tabla__marco--lista .avance--grupo { flex: 1 1 100%; order: 5; margin-left: 0; padding: 0 0 var(--space-1) calc(14px + var(--space-2)); }
  .tablero__cabeza { flex-wrap: wrap; height: auto; padding-block: 4px; }
  .tablero__cabeza .etq-color { max-width: calc(100% - 3rem); }
  .tabla__marco--grupos .k-table tr.grupo td { height: auto; min-height: 44px; }
}

/* Leer en voz alta (v36): barra del lector, abajo y centrada (encima de la barra inferior en el celular) */
.lector { position: fixed; z-index: 61; left: 50%; transform: translateX(-50%); bottom: max(calc(var(--inferior-h) + var(--seguro-abajo) + var(--space-3)), calc(var(--grab-ocupa, 0px) + var(--space-2))); width: min(420px, calc(100vw - 2 * var(--space-4))); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); animation: aparecer var(--dur-media) var(--curva); }
.lector[hidden] { display: none; }
.lector__ico { display: grid; place-items: center; color: var(--accent-text); }
.lector__texto { flex: 1; min-width: 0; }
.lector__titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lector__cuenta { font-size: var(--fs-small); }
.lector__boton { min-width: var(--toque); height: var(--toque); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; cursor: pointer; }
.lector__boton:hover, .lector__boton:focus-visible { background: var(--surface-hover); }
@media (min-width: 761px) { .lector { bottom: var(--space-5); } }

/* ===== «¿Quieres escuchar esta clase?» (v37) ===== */
.oferta-voz { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: max(calc(var(--inferior-h) + var(--seguro-abajo) + var(--space-3)), calc(var(--grab-ocupa, 0px) + var(--space-2))); width: min(460px, calc(100vw - 2 * var(--space-4))); display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); animation: aparecer var(--dur-media) var(--curva); }
.oferta-voz__kreski { font-size: 1.6rem; }
.oferta-voz__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oferta-voz__botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.oferta-voz__nunca { margin-left: auto; border: 0; background: none; color: var(--text-muted, inherit); font: inherit; font-size: var(--fs-small); text-decoration: underline; cursor: pointer; }
@media (min-width: 761px) { .oferta-voz { bottom: var(--space-5); } }
.casilla { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; cursor: pointer; }

/* ---------- Clase desde un audio (v46) ----------
   Pantalla sencilla a propósito: lo que importa es ver el texto aparecer y no perder nada.
   Los colores salen de los tokens de marca; aquí no se inventa ninguno. */
.aud { display: grid; gap: var(--space-3); }
/* Cabecera: el nombre a la izquierda y «⋯» a la derecha. Lo secundario vive ahí dentro, para que
   en la pantalla solo haya UNA acción principal a la vista. */
.aud-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.aud-titulo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.aud-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.aud-subir { cursor: pointer; }
/* Una salida, no una decisión: va escrita, no como botón (si todo es botón, nada destaca). */
.aud-enlace { background: none; border: 0; padding: 0; color: var(--accent-text); font: inherit; text-decoration: underline; cursor: pointer; }
.aud-enlace:hover { text-decoration: none; }
.aud-vacio { padding: var(--space-3); border: 1px solid var(--warning); border-radius: var(--radius-lg); display: grid; gap: var(--space-1); margin: var(--space-3) 0; }
.aud-vacio p { margin: 0; }
.aud-retomar { padding: var(--space-3); border: 1px solid var(--line, var(--borde)); border-radius: var(--radius-lg); display: grid; gap: var(--space-2); }
/* La barra de grabación: vive en el <body> y se ve en toda la app mientras se graba.
   Publica en --grab-ocupa cuánto sitio ocupa desde abajo, y el lector de voz, la oferta de voz y
   los avisos se apartan con max(...) en vez de pisarla. */
/* --- La barra de grabación ---
   Es un ESTADO de la app, no un adorno de una página: por eso va por encima de todo lo que vive
   dentro de una página (barra de formato 62, caja de IA 63, vista previa 65, arrastres 80/81). Si se
   tapa, queda una grabación viva sin forma de pararla, que es justo lo que pasaba (23/10). */
.grab-barra { position: fixed; z-index: 85; left: 50%; transform: translateX(-50%); bottom: calc(var(--inferior-h) + var(--seguro-abajo) + var(--space-3)); width: min(420px, calc(100vw - 2 * var(--space-4))); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); padding-left: var(--space-3); background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); touch-action: none; cursor: grab; }
.grab-barra--movida { bottom: auto; transform: none; }
.grab-barra--arrastrando { cursor: grabbing; translate: none; }

/* Al pasar el cursor se ilumina un poco: dice «esto es tuyo, se puede tocar y mover» sin añadir ni
   un botón. El brillo toma el color del ESTADO, así que si no se oye nada el halo es ámbar y el
   aviso se refuerza en vez de contradecirse. Nunca se mueve sola en reposo (eso ya rompió una
   prueba una vez): solo responde al cursor. */
.grab-barra { transition: border-color var(--dur-rapida, .15s) var(--curva, ease), box-shadow var(--dur-rapida, .15s) var(--curva, ease), translate var(--dur-rapida, .15s) var(--curva, ease); }
.grab-barra { animation: aparecer var(--dur-media) var(--curva); }
@media (hover: hover) {
  .grab-barra:hover { translate: 0 -1px; border-color: color-mix(in srgb, var(--acento) 55%, var(--line)); box-shadow: var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent); }
  .grab-barra:hover .grab-ondas i { filter: brightness(1.15); }
}
/* Al tocarla: lo mismo que al pasar el cursor. En una pantalla táctil no hay «por encima», así que
   sin esto el celular se quedaba sin ninguna respuesta al tocar. */
.grab-barra:active { border-color: color-mix(in srgb, var(--acento) 55%, var(--line)); box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); scale: .985; }
.grab-barra:active .grab-ondas i { filter: brightness(1.15); }
.grab-barra[data-sonido="sin-sonido"]:hover { border-color: var(--warning); box-shadow: var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--warning) 16%, transparent); }
.grab-barra button { transition: filter var(--dur-rapida, .15s) var(--curva, ease); }
.grab-barra button:hover { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .grab-barra, .grab-barra button { transition: none; animation: none; } .grab-barra:hover { translate: none; } .grab-barra:active { scale: none; } }
.grab-barra button { cursor: pointer; }
.grab-barra__ver { flex: none; }
.grab-barra__parar { flex: none; background: var(--danger); color: var(--on-accent); }

.grab-barra__punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
@media (prefers-reduced-motion: no-preference) { .grab-barra__punto { animation: latir-grab 1.8s ease-out infinite; } }
@keyframes latir-grab {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Siete barras que se desplazan. Una rayita que crece no distingue la voz del zumbido del
   ventilador; el ritmo del habla sí se ve. */
.grab-ondas { flex: 1 1 auto; min-width: 54px; height: 20px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.grab-ondas i { display: block; width: 3px; height: 3px; border-radius: var(--radius-pill); background: var(--acento); transition: height .1s linear; }
@media (prefers-reduced-motion: reduce) { .grab-ondas i { transition: none; } }

.grab-barra__reloj { flex: none; display: grid; gap: 0; line-height: 1.15; }
.grab-barra__t { font-variant-numeric: tabular-nums; font-size: var(--fs-ui); font-weight: 700; }
.grab-barra__q { font-size: var(--fs-eyebrow); color: var(--text-muted); white-space: nowrap; }

/* Sin sonido: ámbar, y se dice con palabras. Avisa; nunca para (regla 30). */
.grab-barra[data-sonido="sin-sonido"] { border-color: var(--warning); }
/* v55: estas tres llevaban el selector repetido («.grab-barra__q .grab-barra__q») desde la v52 y NUNCA se aplicaban:
   sin sonido, el punto seguía rojo y la frase gris. Lo vigila prueba-grabacion.mjs (lee el color de verdad). */
.grab-barra[data-sonido="sin-sonido"] .grab-barra__punto { background: var(--warning); animation: none; }
.grab-barra[data-sonido="sin-sonido"] .grab-barra__q { color: var(--warning); font-weight: 600; }
.grab-barra[data-sonido="sin-sonido"] .grab-ondas i { background: color-mix(in srgb, var(--warning) 45%, transparent); }

@media (max-width: 640px) {
  .grab-barra { width: min(340px, calc(100vw - 2 * var(--space-3))); gap: var(--space-1); padding-left: var(--space-2); }
  .grab-barra .grab-ondas { min-width: 36px; }
}


.aud-grabando { font-weight: 600; color: var(--danger, var(--peligro)); }
/* Elegir qué es la grabación. Tarjetas con su «para qué»: un botón con solo el nombre no dice
   por qué elegirías «Reunión» en vez de «Clase», que es justo lo que cambia el resultado. */
.aud-tipos { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: var(--space-2) 0 var(--space-3); }
.aud-tipo { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); text-align: left; background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.aud-tipo b { font-weight: 600; }
.aud-tipo span { font-size: var(--fs-small); color: var(--text-muted, var(--tenue)); }
.aud-tipo--si { border-color: var(--acento, #19B39B); box-shadow: inset 0 0 0 1px var(--acento, #19B39B); }

/* Resumen / Transcripción: las dos siempre ahí. */
.aud-pestanas { display: flex; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--line); }
.aud-pest { padding: var(--space-2) var(--space-3); background: none; color: var(--text-muted, var(--tenue)); border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; }
.aud-pest--si { color: var(--text); border-bottom-color: var(--acento, #19B39B); font-weight: 600; }

.aud-punto { margin: var(--space-1) 0 var(--space-1) var(--space-3); }
.aud-cita { margin: var(--space-2) 0; padding-left: var(--space-3); border-left: 3px solid var(--line); font-style: italic; }
.aud-preg__por { margin-left: var(--space-4); }
.aud-notas { max-height: 50vh; overflow: auto; white-space: pre-wrap; font-size: var(--fs-small); }
.aud-tope__fila { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.aud-tope { width: 5em; }
@media (prefers-reduced-motion: no-preference) { .aud-grabando { animation: aparecer 1.2s ease-in-out infinite alternate; } }
.aud-corte { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--acento-suave); color: var(--texto); }
.aud-corte p { margin: 0; }
.aud-linea { font-variant-numeric: tabular-nums; }
.aud-preg { padding: var(--space-3); border: 1px solid var(--line, var(--borde)); border-radius: var(--radius-lg); display: grid; gap: var(--space-1); margin-bottom: var(--space-2); }
.aud-preg--fuera { opacity: .45; }
.aud-preg--fuera .aud-preg__t { text-decoration: line-through; }
.aud-preg__cab { display: flex; align-items: flex-start; gap: var(--space-2); }
.aud-preg__check { flex: none; }
.aud-preg__t { font-weight: 600; margin: 0; }
.aud-preg__op { margin: 0; padding-left: calc(var(--toque, 40px) + var(--space-1)); color: var(--secundario, var(--text-muted)); }
/* La junta que viene, arriba de «Clase desde un audio» (v47). Solo sale si hay una de verdad. */
.aud-reunion { padding: var(--space-3); border: 1px solid var(--accent-text); border-radius: var(--radius-lg); display: grid; gap: var(--space-2); }
.aud-reunion p { margin: 0; }

/* v54: «Grabar», una sola puerta por aparato (regla 34). En la PC, con su palabra al lado; en el celular, en el
   centro de la barra de abajo. Mientras estás en su pantalla se marca, para saber dónde estás. */
.boton-grabar { gap: 6px; }
.boton-grabar.es-actual { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
.inferior__boton--grabar[aria-current="page"] { color: var(--accent-text); }

/* v54: «Clase desde un audio» en el menú lateral, con su propio diseño (Stephano: «ahí se ve bien, solo mejora el
   diseño»). Icono en su pastilla de color; mientras grabas, la pastilla se pone roja y aparece el tiempo. */
.k-side-grabar { gap: var(--space-2); }
/* La pastilla ocupa el mismo hueco que los iconos de al lado: el texto queda alineado con «Inicio» o «Estudio». */
.k-side-grabar__ahora { display: none; }
body.grabando .k-side-grabar__nombre { display: none; }
body.grabando .k-side-grabar__ahora { display: inline; color: var(--danger); font-weight: 600; }
.k-side-grabar__ico { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0 -4px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent-text) 16%, transparent); color: var(--accent-text); transition: background .2s, color .2s; }
.k-side-grabar__ico .ico { width: 14px; height: 14px; }
.k-side-grabar__vivo { display: none; margin-left: auto; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.k-side-grabar__vivo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.grabando .k-side-grabar__vivo { display: inline-flex; }
body.grabando .k-side-grabar__ico { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  body.grabando .k-side-grabar__vivo i { animation: grab-latido 1.4s ease-in-out infinite; }
}
@keyframes grab-latido { 50% { opacity: .35; transform: scale(.8); } }

/* ---- Una tabla o un tablero dentro de una página usa el sitio libre de la pantalla (v55, regla 34) ----
   Medido el 23/10 a 1690 px: 428 px de columnas escondidos con 363 px vacíos al lado. El texto sigue en su columna;
   solo lo que se desliza de lado crece, hasta el borde menos un hueco. `--sobra-izq` y `--sobra-der` los mide
   js/ancho-tablas.js (en el celular valen 0: nada cambia). */
.pagina__cuerpo .tabla__marco { --necesita: calc(var(--tabla-w, 0px) + 2px); } /* la caja no sabe medir su tabla: se lo dice tabla.js */
.pagina__cuerpo .tablero { --necesita: calc(var(--tablero-n, 1) * var(--tablero-col-w) + (var(--tablero-n, 1) - 1) * var(--space-3)); }
/* Mide lo que necesita, entre el ancho del texto y todo el sitio libre. Crece primero a la derecha; si no le basta, también
   a la izquierda (el margen negativo es solo lo que le falta). Las cuentas valen igual en el celular: allí sobra 0. */
.pagina__cuerpo :is(.tabla__marco, .tablero) {
  width: clamp(100%, var(--necesita), calc(100% + var(--sobra-der, 0px) + var(--sobra-izq, 0px)));
  margin-left: calc(-1 * clamp(0px, var(--necesita) - 100% - var(--sobra-der, 0px), var(--sobra-izq, 0px)));
}
/* Si aun así queda algo a la derecha, el borde se difumina: se ve que hay más (la barra de deslizar queda abajo del
   todo en una tabla larga, y nadie la ve). Sin `animation-timeline` no hay difuminado y todo sigue igual. Cuando la
   tabla cabe, la línea de tiempo no existe y no se aplica nada. */
@property --hay-mas { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes hay-mas { from { --hay-mas: 56px; } 96% { --hay-mas: 56px; } to { --hay-mas: 0px; } }
@supports (animation-timeline: scroll()) {
  .pagina__cuerpo :is(.tabla__marco, .tablero) {
    animation: hay-mas linear both; animation-timeline: scroll(self inline);
    mask-image: linear-gradient(to left, rgb(0 0 0 / .12), #000 var(--hay-mas));
  }
}

/* ---- ★ Marcar y «encima de todo» en la barra de grabar (v55) ---- */
.grab-barra__marcar, .grab-barra__encima { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 36px; height: 36px; padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-eyebrow); font-weight: 700; font-variant-numeric: tabular-nums; }
.grab-barra__marcar { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.grab-barra__marcar:active { scale: .92; }
.grab-barra__n:empty { display: none; }
@media (max-width: 760px) { .grab-barra__marcar, .grab-barra__encima { min-width: 44px; height: 44px; } } /* el pulgar */
@media (prefers-reduced-motion: reduce) { .grab-barra__marcar:active { scale: none; } }

/* En la ventanita encima de todo: la barra la llena, sin «Ver» ni «Encima» (ya está encima, y Chrome trae su propio
   botón para volver a la pestaña). Ni arrastrar: la ventanita se mueve por su barra de título. */
body.flotante-grab { margin: 0; min-height: 100vh; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2);
  background: var(--surface-page); color: var(--text); overflow: hidden; font-family: var(--font-body); }
.grab-barra.grab-barra--flotante { position: static; transform: none; translate: none; width: auto; inset: auto; cursor: default; animation: none; touch-action: auto; }
.grab-barra--flotante .grab-barra__ver, .grab-barra--flotante .grab-barra__encima { display: none; }
.avisos.avisos--flotante { position: static; inset: auto; transform: none; width: auto; max-width: none; display: grid; gap: var(--space-1); }
.avisos--flotante .aviso { padding: var(--space-2) var(--space-3); font-size: var(--fs-small); text-align: left; }

/* Lo que marcaste, en la pantalla de la clase */
.aud-marcas { display: flex; align-items: center; gap: var(--space-1); color: var(--warning); }
.aud-marca { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--warning) 8%, transparent); }
.aud-sec-marca { color: var(--warning); }

/* ---- El viaje de vuelta (v56): lo que hiciste de esta clase en Floro ---- */
.floro-vuelta { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-text) 6%, var(--surface-raised)); }
.floro-vuelta--hecho { border-color: color-mix(in srgb, var(--accent-text) 45%, var(--line)); }
.floro-vuelta__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.floro-vuelta__ico { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent-text) 16%, transparent); color: var(--accent-text); }
.floro-vuelta__txt { flex: 1 1 200px; margin: 0; }
.floro-vuelta__repasar { flex: none; min-height: var(--toque); }
.floro-vuelta__lista { margin-top: var(--space-2); }
.floro-vuelta__lista > summary { min-height: var(--toque); display: flex; align-items: center; cursor: pointer; color: var(--text-muted); font-size: var(--fs-small); }
.floro-vuelta__lista ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.floro-vuelta__lista li { display: flex; align-items: flex-start; gap: var(--space-2); }
.floro-vuelta__lista li.hecha { color: var(--text-muted); }
.floro-vuelta__marca { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--accent-text); }