/*
 * Estilos del Cuaderno de «Orden del Día» (los usan el PC y el iPhone con el mismo archivo).
 * Todo con clases (la política de seguridad no admite estilos escritos como atributo); sin imágenes ni fuentes externas:
 * el papel, la espiral y la portada se dibujan con degradados, así se ven nítidos a cualquier escala.
 *
 * Medidas: la hoja mide 1000 × 1414 px antes de escalarse; --k (la pone el script en .cu-libreta) es la escala.
 * Los renglones caen cada 40 px: el texto es de 28 px sobre 40 px de interlineado, así siempre se apoya sobre las rayas.
 * Dónde empieza el texto (120 px en hoja libre, 440 px en página de día) y cuántos renglones caben (31 y 23) tiene que
 * coincidir con GEOMETRIA de cuaderno-ui.js.
 */

/*
 * ── Aspecto (tapa, papel y mesa) ──────────────────────────────────────────────────────────────────────────────────────
 * La libreta no lleva colores escritos: lee tokens (--cu-tapa-*, --cu-anilla-*, --cu-cinta*, --cu-papel*, --cu-mesa-*…). Los define
 * cuaderno-skins.css por [data-tapa], [data-tono] y [data-mesa] (los pone aspecto.js en <html>; las miniaturas de Ajustes los ponen en
 * su propio contenedor). Por eso .cu-raiz NO declara ninguno: si los declarara, ganaría a lo que llega heredado de un ancestro.
 * Lo que hay justo debajo, en :root, es solo el RESPALDO por si no cargara cuaderno-skins.css o no hubiera atributos: la tapa amarilla, el
 * papel crema y la mesa de lino de siempre (una prueba comprueba que son idénticos a los bloques amarilla y crema de las skins).
 * Los tokens de escala (el título, el grosor del marco…) son números sueltos: aquí se multiplican por --k, que solo existe en .cu-libreta.
 *
 * Relieve: barras, índice, menús y diálogos usan los tokens de aspecto.css (--luz, --relieve-1/2/3, --hundido, --halo, --superficie-grad,
 * --acento-grad, --radio-*, --transicion), con un valor de respaldo plano por si faltaran. Con «Relieve: ninguno» esos tokens valen cero y todo queda plano.
 * Las sombras que NO salen de esos tokens (la de la libreta sobre la mesa, las pastillas de filtro y los avisos) siguen a --e (1 completos, .5 suaves,
 * 0 ninguno): con «suaves» valen la mitad y con «ninguno» desaparecen (la libreta conserva entonces la sombra sencilla de antes). La portada conserva en
 * todos los niveles las sombras de su etiqueta y de su goma: son parte del objeto, no del relieve. Sus luces, su viñeta y su trama sí siguen a --e (opacidad de
 * la capa .cu-tapa-boton::before: 1, .5 y apagada). La regla de «reducir movimiento» está AL FINAL del archivo (la última con la misma especificidad gana).
 *
 * Con el dedo no hay «puntero encima»: en el iPhone el último elemento tocado se queda con :hover hasta que se toca otra cosa, y el botón quedaría con
 * relieve de más. Por eso todas las reglas :hover van dentro de @media (hover: hover) (solo ratón); el estado :active ya da la respuesta al dedo.
 *
 * Foco con el teclado: los botones de las barras y los menús usan el acento; lo que va directamente sobre la MESA (fichas, botones y pastillas del índice,
 * marcapáginas) usa el color que se lee sobre esa mesa (--cu-mesa-texto, ≥ 4,5:1 sobre sus dos colores), porque el acento del tema se pierde sobre la madera
 * o el corcho. El de la portada se dibuja hacia DENTRO (su caja recorta lo que sale) y con dos tonos, blanco y oscuro, para verse sobre cualquier tapa.
 */
:root {
  --cu-papel: #fffdf6;
  --cu-raya: rgba(86, 134, 201, .46);
  --cu-cuadro: rgba(86, 134, 201, .34);
  --cu-punto: rgba(70, 96, 140, .55);
  --cu-margen: rgba(222, 72, 64, .6);
  --cu-margen-2: rgba(222, 72, 64, .38);
  --cu-tinte-lomo: 80 60 20;
  --cu-tinte-borde: 120 90 30;
  --cu-tinte-grano: 120 100 60;
  --cu-canto-papel: #fffdf6;
  --cu-canto-linea: #cfc8b2;
  --cu-dorso-1: #f1ecdb;
  --cu-dorso-2: #e8e1cb;
  --cu-ficha-2: #f7f1de;
  --cu-ficha-borde: rgba(86, 134, 201, .6);
  --cu-mesa-1: #e1dccf;
  --cu-mesa-2: #c9c2af;
  --cu-mesa-trama: rgba(90, 70, 30, .045); /* solo la usa el respaldo de la línea de abajo: cada [data-mesa] trae su propia textura */
  --cu-mesa-imagen: repeating-linear-gradient(45deg, var(--cu-mesa-trama) 0 1px, transparent 1px 5px), radial-gradient(ellipse at 50% 28%, var(--cu-mesa-1), var(--cu-mesa-2) 85%);
  --cu-mesa-tamano: auto, 100% 100%;
  --cu-sombra-mesa: rgba(40, 28, 8, .42);
  --cu-mesa-texto: #1f2430;
  --cu-mesa-texto-suave: #454f60;
  --cu-mesa-vela: rgba(31, 36, 48, .09);
  --cu-mesa-titulo: #e1dccf;
  --cu-tapa-color: #ffd94a;
  --cu-tapa-fondo: linear-gradient(140deg, #ffe27a 0%, #ffd94a 42%, #f4c21a 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(60, 38, 0, .32) 0, rgba(60, 38, 0, .08) 4%, rgba(255, 255, 255, 0) 9%), radial-gradient(ellipse at 38% 22%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 55%), radial-gradient(ellipse at 50% 55%, rgba(120, 78, 0, 0) 55%, rgba(120, 78, 0, .32) 100%), radial-gradient(rgba(110, 70, 0, .07) 1px, transparent 1.6px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 4px 4px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #ecd98f, #e3c871);
  --cu-tapa-marco-color: rgba(110, 72, 0, .42);
  --cu-tapa-marco-estilo: dashed;
  --cu-tapa-marco-grosor: 4;
  --cu-tapa-marco-radio: 16;
  --cu-tapa-marco-brillo: 0 0 0 0 transparent;
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #b87810 0%, #96600a 34%, #6a4200 52%, #4d3000 62%, #8c5a00 100%);
  --cu-tapa-foil-c1: rgba(255, 255, 255, .6);
  --cu-tapa-foil-y1: 3;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(70, 40, 0, .55);
  --cu-tapa-foil-y2: -2;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(122, 80, 0, .55) 18%, rgba(122, 80, 0, .55) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(255, 255, 255, .5);
  --cu-tapa-estado: #4d3200;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #fffdf3, #f6efd6);
  --cu-tapa-etiqueta-color: #f6efd6;
  --cu-tapa-etiqueta-borde: rgba(110, 72, 0, .5);
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #27303f;
  --cu-tapa-etiqueta-raya: rgba(86, 134, 201, .55);
  --cu-tapa-etiqueta-sombra: rgba(70, 40, 0, .35);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: -1.4deg;
  --cu-tapa-goma: linear-gradient(90deg, #2c2218, #5b4630 38%, #3a2d1d 70%, #241b12);
  --cu-tapa-goma-sombra-1: rgba(60, 38, 0, .45);
  --cu-tapa-goma-sombra-2: rgba(60, 38, 0, .25);
  --cu-anilla-metal: linear-gradient(180deg, #fbfbfb 0%, #c2c5cb 38%, #8a8e96 56%, #d6d9de 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(20, 20, 25, 0), rgba(20, 20, 25, .5));
  --cu-anilla-sombra: rgba(0, 0, 0, .4);
  --cu-anilla-borde: rgba(60, 65, 75, .28);
  --cu-cinta: #d63d3d;
  --cu-cinta-oscura: #a82727;
}

.cu-raiz {
  --cu-letra: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Ink Free", "Comic Sans MS", cursive;
  --cu-tinta: #27303f;
  /*
   * Campos de texto. Cada campo fija su propio color, fondo y texto de ayuda con estas medidas y NO usa los colores de la app que
   * contiene la libreta (el panel del PC, por ejemplo, da color a todo input y textarea): así se leen igual en cualquier tema.
   * El papel siempre es claro con tinta oscura; las partes de «mesa» (índice, cuadros) siguen el tema (claro u oscuro) de la app.
   * El color del texto que va directo sobre la mesa (--cu-mesa-texto) NO está aquí: depende de la mesa que elijas, no del tema.
   */
  --cu-sugerencia-papel: #4f5972; /* texto de ayuda del título sobre el papel: contraste ≥ 4,5:1 sobre TODOS los tonos (el más oscuro es el kraft) */
  --cu-campo-fondo: #ffffff;
  --cu-campo-fondo-2: #f4f5f7;
  --cu-campo-texto: #1f2430;
  --cu-campo-sugerencia: #5b6474;
  --cu-campo-borde: #c3cad6;
  --cu-campo-foco: var(--acento, #2563eb); /* el foco de los campos sigue al acento del tema (contraste ≥ 3:1 sobre el campo en los 9 temas: lo mide una prueba) */
  --cu-alto-barra: 60px; /* la barra de herramientas mide lo mismo en modo Escribir y en modo Dibujar */
  --cu-boton: 44px; /* objetivo táctil mínimo en el iPhone */
  --cu-barra-pad-minima: 2px; /* margen a los lados de la barra de dibujo en un teléfono en vertical */
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--texto, #1f2430);
  background: var(--fondo, #f4f5f7);
  /* (sin color-scheme: se hereda el del tema que pone aspecto.css según data-esquema; la hoja lo fija en claro más abajo) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Tema oscuro: los campos del índice y de los cuadros se oscurecen (el papel no: sigue claro con tinta oscura). */
[data-esquema="oscuro"] .cu-raiz {
  --cu-campo-fondo: #1b1e25;
  --cu-campo-fondo-2: #14161b;
  --cu-campo-texto: #eef0f5;
  --cu-campo-sugerencia: #a2abbc;
  --cu-campo-borde: #4a5262;
  --cu-campo-foco: var(--acento, #7aa7ff);
}

/* Respaldo si aspecto.js no llegó a poner data-tema: el aparato en modo oscuro oscurece lo mismo (y el papel pasa a un crema algo más apagado). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --cu-papel: #f4efde; /* el papel sigue siendo claro, con tinta oscura (--cu-tinta no cambia) */
    --cu-mesa-1: #23262d;
    --cu-mesa-2: #14161b;
    --cu-mesa-trama: rgba(255, 255, 255, .02);
    --cu-sombra-mesa: rgba(0, 0, 0, .7);
    --cu-mesa-texto: #e8eaf0;
    --cu-mesa-texto-suave: #a9b2c3;
    --cu-mesa-vela: rgba(232, 234, 240, .12);
    --cu-mesa-titulo: #23262d;
  }
  :root:not([data-tema]) .cu-raiz {
    --cu-campo-fondo: #1b1e25;
    --cu-campo-fondo-2: #14161b;
    --cu-campo-texto: #eef0f5;
    --cu-campo-sugerencia: #a2abbc;
    --cu-campo-borde: #4a5262;
    --cu-campo-foco: var(--acento, #7aa7ff);
  }
}

.cu-raiz *, .cu-raiz *::before, .cu-raiz *::after { box-sizing: border-box; }
.cu-raiz [hidden] { display: none !important; }

.cu-app { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.cu-app.cu-teclado .cu-herramientas { display: none; }

/* ------------------------------ botones y barras ------------------------------ */

.cu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radio-2, 10px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--transicion, 0s), box-shadow var(--transicion, 0s);
}
.cu-iphone .cu-btn { min-width: var(--cu-boton); min-height: var(--cu-boton); }
/* Relieve de los botones: con el puntero encima se levantan (luz arriba y sombra corta); al pulsar se hunden. (El :hover, solo con ratón: ver el encabezado.) */
@media (hover: hover) {
  .cu-btn:hover:not(:disabled) { background: var(--superficie-2, #eef0f4); box-shadow: var(--luz, 0 0 0 0 transparent), var(--relieve-1, 0 0 0 0 transparent); }
}
.cu-btn:active:not(:disabled) { background: var(--superficie-hundida, #e4e7ee); box-shadow: var(--hundido, 0 0 0 0 transparent); }
.cu-btn:disabled { opacity: .38; cursor: default; }
/* Foco con el teclado. Barras y menús: el acento del tema. Lo que va sobre la mesa y la portada: más abajo, cada uno con su anillo. */
.cu-btn:focus-visible { outline: 3px solid var(--acento, #2563eb); outline-offset: 1px; }
.cu-indice .cu-btn:focus-visible, .cu-ficha:focus-visible, .cu-filtro:focus-visible { outline: 3px solid var(--cu-mesa-texto, #1f2430); outline-offset: 2px; }
.cu-texto-btn { padding: 0 14px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.cu-texto-btn.actual { color: var(--acento, #2563eb); }
.cu-peligro { color: var(--peligro, #d92d20); }
.cu-espacio { flex: 1; min-width: 4px; }

/*
 * El aviso de arriba (por ejemplo «sin conexión»): igual que los avisos del resto de la app (panel.css), con los colores del tema: texto del tema,
 * una barra del color de aviso a la izquierda y un fondo teñido de ese color. Antes llevaba un ámbar claro fijo que desentonaba en los temas oscuros.
 * El fondo teñido usa color-mix (con var() dentro no se puede dejar una declaración de respaldo, por eso va en @supports): sin él queda la superficie lisa.
 */
.cu-banner {
  flex: none;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--texto, #7a4b00);
  background-color: var(--superficie-2, #fff7e0);
  border-bottom: 1px solid var(--aviso, #f5d98a);
  box-shadow: inset 5px 0 0 var(--aviso, #f5d98a);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .cu-banner { background-color: color-mix(in srgb, var(--aviso, #f5d98a) 16%, var(--superficie, #fff7e0)); }
}

/* Las dos barras de arriba forman un solo bloque con relieve: la de navegación con su luz superior y la tira de abajo echando la sombra sobre el escritorio. */
.cu-superior {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background-color: var(--superficie, #fff);
  background-image: var(--superficie-grad, none);
  border-bottom: 1px solid var(--borde, #dfe3ea);
  box-shadow: var(--luz, 0 0 0 0 transparent);
}
.cu-nav { display: flex; align-items: center; }
.cu-b-ant, .cu-b-sig { font-size: 15px; }
.cu-b-indice, .cu-b-nueva, .cu-b-mas { font-size: 20px; }
.cu-b-cerrar { font-size: 17px; }
.cu-superior [aria-pressed="true"] { background: var(--superficie-hundida, #eef0f4); box-shadow: var(--hundido, 0 0 0 0 transparent); }

.cu-subbarra {
  position: relative;
  z-index: 3; /* el indicador de guardado del iPhone mide 44 px y sobresale de la tira: que no lo tape el escritorio */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 14px;
  min-height: 28px;
  font-size: 13px;
  color: var(--texto-suave, #667085);
  background-color: var(--superficie, #fff);
  background-image: var(--superficie-grad, none);
  border-bottom: 1px solid var(--borde-fuerte, var(--borde, #dfe3ea));
  box-shadow: var(--luz, 0 0 0 0 transparent), var(--relieve-1, 0 0 0 0 transparent);
}
.cu-contador { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-guardado {
  flex: none;
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave, #667085);
  font: inherit;
  font-size: 12.5px;
  cursor: default;
}
.cu-guardado.ok { color: var(--ok, #12803c); }
.cu-guardado.trabajando { color: var(--acento, #2563eb); }
.cu-guardado.error { color: #fff; background: var(--peligro, #d92d20); font-weight: 600; cursor: pointer; }
.cu-iphone .cu-guardado { min-height: 44px; margin: -10px 0; }

/* ------------------------------ escritorio y libreta ------------------------------ */

.cu-escritorio {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* la mesa elegida (madera, corcho, fieltro, mármol, pizarra o lino): su textura son degradados, ver cuaderno-skins.css */
  background-color: var(--cu-mesa-2);
  background-image: var(--cu-mesa-imagen);
  background-size: var(--cu-mesa-tamano);
}
.cu-escritorio.cu-desplazable { overflow: auto; -webkit-overflow-scrolling: touch; }
.cu-vista-indice .cu-escritorio { display: none; }
.cu-mesa { position: relative; }

.cu-libreta { position: absolute; --k: .4; }
/*
 * La sombra de la libreta sobre la mesa, en cuatro capas: contacto (la línea oscura justo debajo), penumbra, la sombra grande con el tono de la mesa y la que
 * cae a la derecha. El elemento no pinta nada más que su sombra, así que su opacidad es la fuerza del relieve: con «suaves» (--e = .5) la sombra vale la
 * mitad. Con «ninguno» vuelve la sombra sencilla de antes (dos capas), sin que se note relieve de más.
 */
.cu-sombra-libreta {
  position: absolute;
  left: calc(var(--k) * 28px);
  top: calc(var(--k) * 6px);
  right: 0;
  bottom: 0;
  border-radius: 3px 9px 9px 3px;
  opacity: var(--e, 1);
  box-shadow:
    0 calc(var(--k) * 2px) calc(var(--k) * 3px) rgba(0, 0, 0, .34),
    0 calc(var(--k) * 10px) calc(var(--k) * 18px) rgba(0, 0, 0, .2),
    0 calc(var(--k) * 28px) calc(var(--k) * 58px) var(--cu-sombra-mesa),
    calc(var(--k) * 16px) calc(var(--k) * 6px) calc(var(--k) * 26px) calc(var(--k) * -8px) var(--cu-sombra-mesa);
}
[data-efectos="ninguno"] .cu-sombra-libreta {
  opacity: 1;
  box-shadow: 0 calc(var(--k) * 16px) calc(var(--k) * 46px) var(--cu-sombra-mesa), 0 calc(var(--k) * 3px) calc(var(--k) * 8px) rgba(0, 0, 0, .3);
}

/*
 * El grosor de las hojas apiladas, a la derecha y abajo: cada hoja es una raya fina de dos colores (la hoja y su sombra), el bloque se oscurece
 * hacia fuera y, en el borde de fuera, asoma el grosor de la tapa de atrás con el color de la tapa. Todo dentro de las mismas cajas de siempre.
 */
.cu-canto { position: absolute; z-index: 0; overflow: hidden; }
.cu-canto-der {
  left: calc(var(--k) * 1020px);
  top: calc(var(--k) * 7px);
  width: calc(var(--k) * 22px);
  height: calc(var(--k) * 1420px);
  border-radius: 0 calc(var(--k) * 10px) calc(var(--k) * 10px) 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 76%, rgba(255, 255, 255, .22) 76%, rgba(255, 255, 255, 0) 84%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 76%, var(--cu-tapa-color) 76%, var(--cu-tapa-color) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .16) 76%, rgba(0, 0, 0, 0) 76%),
    repeating-linear-gradient(90deg, var(--cu-canto-papel) 0 2px, var(--cu-canto-linea) 2px 3px);
  box-shadow: inset -1px 0 2px rgba(0, 0, 0, .18);
}
.cu-canto-inf {
  left: calc(var(--k) * 40px);
  top: calc(var(--k) * 1406px);
  width: calc(var(--k) * 1002px);
  height: calc(var(--k) * 22px);
  border-radius: 0 0 calc(var(--k) * 10px) calc(var(--k) * 6px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 76%, rgba(255, 255, 255, .22) 76%, rgba(255, 255, 255, 0) 84%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 76%, var(--cu-tapa-color) 76%, var(--cu-tapa-color) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .16) 76%, rgba(0, 0, 0, 0) 76%),
    repeating-linear-gradient(180deg, var(--cu-canto-papel) 0 2px, var(--cu-canto-linea) 2px 3px);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .18);
}

.cu-hojas {
  position: absolute;
  left: calc(var(--k) * 28px);
  top: 0;
  width: calc(var(--k) * 1000px);
  height: calc(var(--k) * 1414px);
  z-index: 1;
  perspective: calc(var(--k) * 3600px);
  perspective-origin: 10% 50%;
}
/* con el dedo: lo vertical lo atiende el sistema y lo de lado es de la libreta (deslizar para pasar hoja); ampliada, todo es del sistema */
.cu-hojas { touch-action: pan-y pinch-zoom; }
.cu-ampliada .cu-hojas { touch-action: auto; }
/* mientras se pasa la hoja (se ve en perspectiva) la libreta no recibe toques: un trazo ahí caería en el sitio equivocado */
.cu-animando .cu-hojas { pointer-events: none; }
.cu-hoja-caja {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 50%;
}
.cu-frente {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px calc(var(--k) * 9px) calc(var(--k) * 9px) 2px;
  background: var(--cu-papel);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cu-dorso {
  position: absolute;
  inset: 0;
  border-radius: 2px calc(var(--k) * 9px) calc(var(--k) * 9px) 2px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 14%),
    linear-gradient(180deg, var(--cu-dorso-1), var(--cu-dorso-2));
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* giro de la hoja alrededor del lomo. OJO: la transparencia no se anima en la caja (aplanaría el 3D y se vería el
   frente «de espaldas»); se anima en el frente y el dorso, que son hojas sueltas del espacio 3D. */
.cu-hoja-caja.cu-girando { will-change: transform; }
.cu-sale-ini { transform: rotateY(0deg); }
.cu-sale-fin { transform: rotateY(-168deg); transition: transform var(--cu-giro, 450ms) cubic-bezier(.55, .05, .35, 1); }
.cu-sale-fin .cu-frente, .cu-sale-fin .cu-dorso { opacity: 0; transition: opacity 150ms linear calc(var(--cu-giro, 450ms) - 170ms); }
.cu-entra-ini { transform: rotateY(-168deg); }
.cu-entra-ini .cu-frente, .cu-entra-ini .cu-dorso { opacity: 0; }
.cu-entra-fin { transform: rotateY(0deg); transition: transform var(--cu-giro, 450ms) cubic-bezier(.3, .75, .3, 1); }
.cu-entra-fin .cu-frente, .cu-entra-fin .cu-dorso { opacity: 1; transition: opacity 110ms linear; }
.cu-fundido-ini { opacity: 0; }
.cu-fundido-fin { opacity: 1; transition: opacity var(--cu-giro, 260ms) ease; }
.cu-encima { z-index: 3; }
.cu-tapa-caja { z-index: 4; }
.cu-sombra-giro {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 28, 6, 0) 0%, rgba(40, 28, 6, .38) 100%);
}
.cu-sale-fin .cu-sombra-giro { opacity: 1; transition: opacity var(--cu-giro, 450ms) ease-in; }
.cu-entra-ini .cu-sombra-giro { opacity: 1; }
.cu-entra-fin .cu-sombra-giro { opacity: 0; transition: opacity var(--cu-giro, 450ms) ease-out; }
/* la hoja de abajo se oscurece o se aclara mientras la otra pasa por encima */
.cu-debajo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 2px calc(var(--k) * 9px) calc(var(--k) * 9px) 2px;
  background: linear-gradient(90deg, rgba(30, 20, 0, .34), rgba(30, 20, 0, .2));
}
.cu-aclara::after { animation: cu-aclarar var(--cu-giro, 450ms) ease-out forwards; }
.cu-oscurece::after { animation: cu-oscurecer var(--cu-giro, 450ms) ease-in forwards; }
@keyframes cu-aclarar { from { opacity: 1; } to { opacity: 0; } }
@keyframes cu-oscurecer { from { opacity: 0; } to { opacity: 1; } }

/* (la regla de «reducir movimiento» va AL FINAL de este archivo, después de todas las reglas con animación o transición: con la misma especificidad gana la última) */

/* ------------------------------ la hoja ------------------------------ */

.cu-hoja {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 1414px;
  transform: scale(var(--k));
  transform-origin: 0 0;
  color: var(--cu-tinta);
  color-scheme: light; /* el papel es claro en cualquier tema: sus campos, selección y cursor también */
  font-family: var(--cu-letra);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cu-papel {
  position: absolute;
  inset: 0;
  background-color: var(--cu-papel);
}
.cu-papel-rayado {
  background-image: linear-gradient(90deg, transparent 104px, var(--cu-margen) 107px, transparent 110px, transparent 111px, var(--cu-margen-2) 112.5px, transparent 114px);
}
.cu-papel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
}
.cu-papel-rayado::before {
  /* las líneas son una cresta suave de 4 px (no una banda de 2 px): se ven parejas a cualquier escala, sin renglones más fuertes que otros */
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 30px, var(--cu-raya) 32px, transparent 34px, transparent 40px);
}
.cu-papel-cuadriculado::before {
  background-image:
    linear-gradient(180deg, transparent 0, transparent 30px, var(--cu-cuadro) 32px, transparent 34px),
    linear-gradient(90deg, transparent 0, transparent 18px, var(--cu-cuadro) 20px, transparent 22px);
  background-size: 40px 40px, 40px 40px;
}
.cu-papel-puntos::before {
  background-image: radial-gradient(circle at 20px 20px, var(--cu-punto) 0, var(--cu-punto) 2.6px, transparent 3.4px);
  background-size: 40px 40px;
  background-position: 10px 12px;
}
/* la textura del papel y el sombreado del lomo y los bordes, por encima de las rayas */
.cu-papel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* el sombreado del lomo, el brillo, la viñeta y el grano llevan el tinte del tono de papel elegido (--cu-tinte-*, «r g b») */
  background-image:
    linear-gradient(90deg, rgb(var(--cu-tinte-lomo) / .20) 0, rgb(var(--cu-tinte-lomo) / .07) 1.6%, rgb(var(--cu-tinte-lomo) / 0) 5.5%),
    radial-gradient(ellipse at 52% 36%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 65%),
    radial-gradient(ellipse at 50% 50%, rgb(var(--cu-tinte-borde) / 0) 62%, rgb(var(--cu-tinte-borde) / .11) 100%),
    radial-gradient(rgb(var(--cu-tinte-grano) / .05) 1px, transparent 1.5px),
    radial-gradient(rgb(var(--cu-tinte-grano) / .035) 1px, transparent 1.5px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 5px 5px, 7px 7px;
  background-position: 0 0, 0 0, 0 0, 0 0, 2px 3px;
}
.cu-agujeros {
  position: absolute;
  left: 34px;
  top: 0;
  bottom: 0;
  width: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 54px 0;
  z-index: 1;
}
.cu-agujero {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #9b9484 0, #4b463b 62%, #2d2a23 100%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .85);
}

.cu-lienzo { position: absolute; left: 0; top: 0; width: 1000px; height: 1414px; display: block; }
.cu-lienzo-bajo { z-index: 2; pointer-events: none; }
.cu-lienzo-alto { z-index: 4; }
.cu-m-dibujar .cu-lienzo-alto { cursor: crosshair; }
.cu-m-mano .cu-lienzo-alto { cursor: grab; }

.cu-texto, .cu-espejo {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--cu-letra);
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
  tab-size: 4;
}
.cu-texto {
  position: absolute;
  z-index: 3;
  left: 130px;
  width: 810px;
  outline: 0;
  resize: none;
  overflow: hidden;
  color: var(--cu-tinta);
  background: transparent;
  caret-color: #1d4ed8;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.cu-texto::selection, .cu-titulo-campo::selection { background: rgba(37, 99, 235, .25); }
/*
 * El panel del PC da estilo a todo input y textarea (borde, fondo, COLOR, anillo al enfocar): aquí se anula con más especificidad.
 * El color es tinta oscura sobre papel claro, también con el tema oscuro (si no, el título sale casi blanco sobre el papel crema).
 */
.cu-raiz textarea.cu-texto, .cu-raiz textarea.cu-texto:focus, .cu-raiz input.cu-titulo-campo, .cu-raiz input.cu-titulo-campo:focus {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--cu-tinta);
  outline: 0;
  padding: 0;
}
.cu-raiz textarea.cu-texto::placeholder, .cu-raiz input.cu-titulo-campo::placeholder { color: var(--cu-sugerencia-papel); opacity: 1; }
.cu-raiz textarea.cu-texto { width: 810px; }
.cu-raiz input.cu-titulo-campo { width: 700px; }
/* 31 y 23 renglones de 40 px, más 4 px de holgura: con la medida justa el navegador se desplaza 4 px al llenar la hoja y el texto cae fuera de las rayas */
.cu-libre .cu-texto { top: 120px; height: 1244px; }
.cu-dia .cu-texto { top: 440px; height: 924px; }
.cu-m-dibujar .cu-texto { pointer-events: none; -webkit-user-select: none; user-select: none; }
.cu-espejo { position: absolute; left: 130px; top: 0; width: 810px; visibility: hidden; pointer-events: none; z-index: 0; }

.cu-cabecera { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cu-cabecera > * { pointer-events: auto; }
.cu-titulo-campo {
  position: absolute;
  left: 130px;
  top: 40px;
  width: 700px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cu-tinta);
  font: 700 34px/40px var(--cu-letra);
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
}
.cu-titulo-campo::placeholder { color: var(--cu-sugerencia-papel); font-weight: 400; opacity: 1; } /* contraste ≥ 4,5:1 sobre el papel (claro y oscuro) */
.cu-m-dibujar .cu-titulo-campo { pointer-events: none; }
.cu-fecha {
  position: absolute;
  left: 130px;
  top: 44px;
  margin: 0;
  width: 720px;
  font: 700 54px/72px var(--cu-letra);
  letter-spacing: 0;
  color: var(--cu-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* la agenda del día: 6 renglones fijos */
.cu-agenda { position: absolute; left: 0; top: 120px; width: 1000px; height: 320px; pointer-events: none; }
.cu-agenda-cab { position: absolute; left: 130px; top: 0; width: 810px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.cu-agenda-titulo { font: 700 28px/40px var(--cu-letra); color: #3b5b9a; letter-spacing: .02em; }
.cu-recordatorio-btn {
  pointer-events: auto;
  height: 34px;
  min-height: 0;
  min-width: 0;
  padding: 0 14px;
  border: 2px solid rgba(59, 91, 154, .45);
  border-radius: 17px;
  font: 22px/30px var(--cu-letra);
  color: #3b5b9a;
}
.cu-iphone .cu-recordatorio-btn { min-height: 0; min-width: 0; }
@media (hover: hover) {
  .cu-recordatorio-btn:hover:not(:disabled) { background: rgba(59, 91, 154, .12); }
}
.cu-agenda-filas { position: absolute; left: 0; top: 40px; width: 1000px; }
.cu-agenda-fila { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 60px 0 120px; font-size: 26px; line-height: 40px; }
.cu-agenda-fila.vacia { padding-left: 130px; }
/* los textos de la agenda cumplen contraste ≥ 4,5:1 sobre el papel de cualquier tono (el kraft es el más oscuro): colores sólidos, sin transparencia */
.cu-agenda-libre { color: #4b556a; font-size: 24px; }
.cu-agenda-hora { flex: none; font-size: 22px; color: #3b5b9a; min-width: 108px; }
.cu-agenda-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.cu-agenda-fila.hecha .cu-agenda-texto { text-decoration: line-through; color: #4b556a; }
.cu-agenda-fila.hecha .cu-agenda-hora { color: #4a5a82; }
/* hoja chica (teléfono): tocar la agenda abre la lista a tamaño normal; la fila entera es el blanco, no solo la casilla */
.cu-agenda-panel:not(.cu-dibujando) .cu-agenda-fila { pointer-events: auto; cursor: pointer; }
/* y los botones de la agenda ganan un área táctil transparente de 44 px reales (la hoja está escalada por --k) */
.cu-agenda-panel .cu-recordatorio-btn { position: relative; }
.cu-agenda-panel .cu-agenda-cab { z-index: 2; } /* su área táctil ampliada queda por encima de las filas */
.cu-agenda-panel .cu-recordatorio-btn::after, .cu-agenda-panel .cu-agenda-mas::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(44px / var(--k)));
  height: max(100%, calc(44px / var(--k)));
  transform: translate(-50%, -50%);
}
/* dibujando, todo lo de la agenda deja pasar el lápiz: un trazo que empieza sobre una casilla es un trazo */
.cu-m-dibujar .cu-casilla, .cu-m-dibujar .cu-recordatorio-btn, .cu-m-dibujar .cu-agenda-mas { pointer-events: none; }
.cu-casilla {
  pointer-events: auto;
  position: relative;
  flex: none;
  width: 44px;
  height: 40px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin-left: 6px;
  border-radius: 8px;
}
.cu-iphone .cu-casilla { min-width: 0; min-height: 0; }
.cu-casilla::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 7px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--cu-prio, #7a8599);
  background: rgba(255, 255, 255, .55);
}
.cu-casilla[aria-pressed="true"]::before { background: #16a34a; border-color: #16a34a; }
.cu-casilla-marca { position: absolute; left: 11px; top: 7px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font: 700 19px/1 system-ui, sans-serif; color: #fff; }
.cu-prio-baja { --cu-prio: #5aa528; }
.cu-prio-normal { --cu-prio: #c9a400; }
.cu-prio-alta { --cu-prio: #e8761a; }
.cu-prio-urgente { --cu-prio: #d93a3f; }
.cu-agenda-mas {
  pointer-events: auto;
  position: absolute;
  left: 130px;
  top: 280px;
  height: 40px;
  min-height: 0;
  min-width: 0;
  padding: 0 4px;
  font: 24px/40px var(--cu-letra);
  color: #3b5b9a;
  text-decoration: underline;
}
.cu-iphone .cu-agenda-mas { min-height: 0; min-width: 0; }

/* ------------------------------ portada ------------------------------ */

/*
 * La tapa. Está hecha de tres capas (la de abajo es el frente; las otras dos están dentro del botón, DEBAJO de lo que se escribe en él):
 *   1. el frente (.cu-frente): el color y la composición base de la tapa elegida (--cu-tapa-color, --cu-tapa-fondo);
 *   2. el ::before del botón: luces, viñeta y textura (--cu-tapa-capas). Con «Relieve: ninguno» no se pinta (lo apaga cuaderno-skins.css);
 *   3. el marco, el título, la etiqueta, la goma y el estado, encima de todo.
 */
.cu-tapa-caja .cu-frente {
  border-radius: calc(var(--k) * 5px) calc(var(--k) * 14px) calc(var(--k) * 14px) calc(var(--k) * 5px);
  background-color: var(--cu-tapa-color);
  background-image: var(--cu-tapa-fondo);
  background-size: var(--cu-tapa-fondo-tam);
}
.cu-dorso-tapa { background: var(--cu-tapa-dorso); border-radius: calc(var(--k) * 5px) calc(var(--k) * 14px) calc(var(--k) * 14px) calc(var(--k) * 5px); }
.cu-tapa-boton {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cu-tapa-estado);
  cursor: pointer;
  text-align: center;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.cu-tapa-boton.cu-espera { cursor: progress; }
.cu-tapa-boton::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--cu-tapa-capas);
  background-size: var(--cu-tapa-capas-tam);
  /* la fuerza de las luces, la viñeta y la trama sigue a --e: completos 1, suaves .5 (la mitad del relieve, como pide el nivel) y ninguno ni se pinta (cuaderno-skins.css) */
  opacity: var(--e, 1);
}
/*
 * Foco con el teclado en la portada. El anillo de siempre (outline) se dibuja HACIA FUERA del botón, y el botón mide lo mismo que su caja (.cu-frente), que
 * recorta todo lo que sale de ella: el anillo no se veía nunca. Ahora se dibuja por dentro, con dos tonos (aro blanco con filete oscuro por los dos lados)
 * para que se vea sobre cualquier tapa, clara u oscura.
 */
.cu-tapa-boton:focus-visible { outline: 0; }
.cu-tapa-boton:focus-visible::after {
  content: "";
  position: absolute;
  inset: calc(var(--k) * 16px);
  border: 3px solid #fff;
  border-radius: calc(var(--k) * 20px);
  box-shadow: 0 0 0 2px rgba(20, 24, 34, .85), inset 0 0 0 2px rgba(20, 24, 34, .85);
  pointer-events: none;
}
.cu-tapa-marco {
  position: absolute;
  left: calc(var(--k) * 56px);
  right: calc(var(--k) * 44px);
  top: calc(var(--k) * 44px);
  bottom: calc(var(--k) * 44px);
  border: calc(var(--k) * var(--cu-tapa-marco-grosor) * 1px) var(--cu-tapa-marco-estilo) var(--cu-tapa-marco-color);
  border-radius: calc(var(--k) * var(--cu-tapa-marco-radio) * 1px);
  box-shadow: var(--cu-tapa-marco-brillo);
}
/*
 * El filete: una línea fina de verdad, paralela al marco y un poco más adentro (el paspartú de las tapas con doble marco). Es un borde de 2·k px, no una
 * sombra: las sombras «inset» no se tapan entre sí, y dos anillos de sombra seguidos daban una banda ancha pegada al borde en lugar de una línea con hueco.
 * Su grosor y su distancia se escalan con la tapa (--k), y su esquina sigue la del marco, un poco más cerrada. Las tapas sin filete lo dejan en grosor 0.
 */
.cu-tapa-marco::after {
  content: "";
  position: absolute;
  inset: calc(var(--k) * 11px);
  border: calc(var(--k) * var(--cu-tapa-filete-grosor) * 1px) var(--cu-tapa-filete-estilo) var(--cu-tapa-filete-color);
  border-radius: calc(var(--k) * max(3, var(--cu-tapa-marco-radio) - 14) * 1px);
  pointer-events: none;
}
.cu-tapa-titulo {
  position: absolute;
  left: calc(var(--k) * 56px);
  right: calc(var(--k) * 130px);
  top: calc(var(--k) * 250px);
  display: block;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  /* el estampado del título (dorado, plata, tinta…): el degradado se recorta con la letra y dos sombras le dan el relieve */
  background: var(--cu-tapa-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 calc(var(--k) * var(--cu-tapa-foil-y1) * 1px) calc(var(--k) * var(--cu-tapa-foil-d1) * 1px) var(--cu-tapa-foil-c1))
    drop-shadow(0 calc(var(--k) * var(--cu-tapa-foil-y2) * 1px) calc(var(--k) * var(--cu-tapa-foil-d2) * 1px) var(--cu-tapa-foil-c2));
}
.cu-tapa-orden { display: block; font-size: calc(var(--k) * 150px); letter-spacing: .08em; text-indent: .08em; }
.cu-tapa-del { display: block; margin-top: calc(var(--k) * 14px); font-size: calc(var(--k) * 96px); font-style: italic; letter-spacing: .06em; text-transform: none; }
.cu-tapa-adorno {
  position: absolute;
  left: calc(var(--k) * 220px);
  right: calc(var(--k) * 294px);
  top: calc(var(--k) * 640px);
  height: calc(var(--k) * 6px);
  border-radius: 999px;
  background: var(--cu-tapa-adorno);
  box-shadow: 0 calc(var(--k) * 2px) 0 var(--cu-tapa-adorno-brillo);
}
.cu-tapa-etiqueta {
  position: absolute;
  left: calc(var(--k) * 170px);
  top: calc(var(--k) * 780px);
  width: calc(var(--k) * 540px);
  height: calc(var(--k) * 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--k) * var(--cu-tapa-etiqueta-radio) * 1px);
  background-color: var(--cu-tapa-etiqueta-color);
  background-image: var(--cu-tapa-etiqueta-fondo);
  border: calc(var(--k) * 3px) var(--cu-tapa-etiqueta-borde-estilo) var(--cu-tapa-etiqueta-borde);
  box-shadow: 0 calc(var(--k) * 4px) calc(var(--k) * 8px) var(--cu-tapa-etiqueta-sombra), var(--cu-tapa-etiqueta-brillo);
  transform: rotate(var(--cu-tapa-etiqueta-giro));
}
/*
 * La raya bajo «Mi cuaderno». Es un borde (que el navegador suaviza al girar la etiqueta) y no un degradado de paradas duras: con un degradado, y a la
 * escala del iPhone (la raya mide ~1 px), el borde de color se rompía en escalones al rotarse. Va a 150·k px desde el borde de dentro, como la de antes.
 */
.cu-tapa-etiqueta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--k) * 150px);
  z-index: -1; /* debajo del texto, como cuando era parte del fondo (la etiqueta gira, así que ya es su propio contexto de apilamiento) */
  border-top: calc(var(--k) * 3px) solid var(--cu-tapa-etiqueta-raya);
  pointer-events: none;
}
.cu-tapa-etiqueta-texto { font: 700 calc(var(--k) * 78px) / 1 var(--cu-letra); color: var(--cu-tapa-etiqueta-texto); transform: translateY(calc(var(--k) * -12px)); }
.cu-tapa-goma {
  position: absolute;
  right: calc(var(--k) * 96px);
  top: 0;
  bottom: 0;
  width: calc(var(--k) * 34px);
  background: var(--cu-tapa-goma);
  box-shadow: calc(var(--k) * 3px) 0 calc(var(--k) * 6px) var(--cu-tapa-goma-sombra-1), calc(var(--k) * -2px) 0 calc(var(--k) * 4px) var(--cu-tapa-goma-sombra-2);
}
.cu-tapa-estado {
  position: absolute;
  left: calc(var(--k) * 56px);
  right: calc(var(--k) * 130px);
  bottom: calc(var(--k) * 74px);
  display: block;
  font: italic 600 max(13px, calc(var(--k) * 44px)) / 1.2 Georgia, "Palatino Linotype", serif;
  color: var(--cu-tapa-estado);
}

/* ------------------------------ espiral y marcapáginas ------------------------------ */

.cu-espiral {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--k) * 110px);
  height: calc(var(--k) * 1414px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--k) * 54px) 0;
  pointer-events: none;
}
.cu-anilla {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--k) * 110px);
  height: calc(var(--k) * 28px);
}
.cu-anilla::before {
  content: "";
  position: absolute;
  left: calc(var(--k) * 4px);
  top: calc(var(--k) * 5px);
  width: calc(var(--k) * 84px);
  height: calc(var(--k) * 18px);
  border-radius: calc(var(--k) * 9px);
  background: var(--cu-anilla-metal);
  box-shadow: 0 calc(var(--k) * 3px) calc(var(--k) * 4px) var(--cu-anilla-sombra), inset 0 0 0 1px var(--cu-anilla-borde);
}
.cu-anilla::after {
  content: "";
  position: absolute;
  left: calc(var(--k) * 56px);
  top: calc(var(--k) * 5px);
  width: calc(var(--k) * 32px);
  height: calc(var(--k) * 18px);
  border-radius: 0 calc(var(--k) * 9px) calc(var(--k) * 9px) 0;
  background: var(--cu-anilla-fin);
}

.cu-cinta {
  position: absolute;
  left: calc(var(--k) * (28px + 905px));
  top: calc(var(--k) * -4px);
  z-index: 7;
  width: max(44px, calc(var(--k) * 64px));
  height: max(44px, calc(var(--k) * 190px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  -webkit-tap-highlight-color: transparent;
}
.cu-cinta-tira {
  position: absolute;
  left: 50%;
  top: 0;
  width: max(16px, calc(var(--k) * 46px));
  height: max(22px, calc(var(--k) * 56px));
  margin-left: calc(max(16px, calc(var(--k) * 46px)) / -2);
  background: linear-gradient(90deg, var(--cu-cinta-oscura), var(--cu-cinta) 35%, var(--cu-cinta) 65%, var(--cu-cinta-oscura));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transition: height .25s ease;
}
/*
 * Sin marcar la cinta es solo un trocito corto; marcada, cuelga larga. Antes el trocito iba al 55 % de opacidad y su contraste con el papel bajaba a unos 2:1
 * (menos del 3:1 que pide un botón); ahora va con su color entero y la diferencia entre marcada y sin marcar la da el largo, no el color. Con el ratón
 * encima se estira un poco, como si fueras a tirar de ella.
 */
@media (hover: hover) {
  .cu-cinta:hover .cu-cinta-tira { height: max(30px, calc(var(--k) * 84px)); }
}
.cu-cinta.marcada .cu-cinta-tira { height: max(42px, calc(var(--k) * 168px)); }
/* El foco del marcapáginas cae sobre la hoja y sobre la mesa a la vez: dos tonos (blanco por fuera, oscuro por dentro) para que se vea sobre cualquiera. */
.cu-cinta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 3px #1d2330; border-radius: 4px; }
.cu-vista-portada .cu-cinta, .cu-vista-indice .cu-cinta { display: none; }

/* ------------------------------ herramientas ------------------------------ */

/*
 * La barra mide siempre lo mismo (--cu-alto-barra), en modo Escribir y en modo Dibujar: si cambiara de alto, la hoja (que se ajusta al
 * espacio que queda) se escalaría de nuevo y daría un salto al cambiar de modo. El script decide qué grupos se ven con el atributo
 * hidden. La zona segura de abajo no se cuenta aquí: en el iPhone la cubre la barra de pestañas que hay debajo del cuaderno.
 */
.cu-herramientas {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--cu-alto-barra);
  padding: 0 10px;
  position: relative;
  z-index: 3; /* para que su sombra hacia arriba caiga sobre el escritorio y el índice */
  background-color: var(--superficie, #fff);
  background-image: var(--superficie-grad, none);
  border-top: 1px solid var(--borde-fuerte, var(--borde, #dfe3ea));
  box-shadow: var(--luz, 0 0 0 0 transparent), 0 -4px 10px -4px rgb(var(--sombra-rgb, 0 0 0) / calc(.2 * var(--e, 0)));
}
/* Los modos (Escribir / Dibujar) son un control segmentado: un hueco con el botón elegido «levantado» (acento) dentro. */
.cu-modos { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: calc(var(--radio-2, 10px) + 3px); background: var(--superficie-hundida, #eef0f4); box-shadow: var(--hundido, 0 0 0 0 transparent); }
.cu-modo { padding: 0 12px; font-size: 15px; font-weight: 600; }
.cu-modo-icono { font-size: 17px; font-weight: 700; }
.cu-modo[aria-pressed="true"], .cu-herr[aria-pressed="true"] {
  background-color: var(--acento, #2563eb);
  background-image: var(--acento-grad, none);
  color: var(--acento-texto, #fff);
  box-shadow: var(--luz, 0 0 0 0 transparent), 0 2px 5px rgb(var(--acento-rgb, 37 99 235) / calc(.4 * var(--e, 0)));
}
@media (hover: hover) {
  .cu-modo[aria-pressed="true"]:hover:not(:disabled), .cu-herr[aria-pressed="true"]:hover:not(:disabled) { background-color: var(--acento-fuerte, #1d4ed8); background-image: none; }
}
.cu-tintero, .cu-historial { display: flex; align-items: center; gap: 4px; }
.cu-herr-grupo { display: flex; gap: 2px; }
.cu-herr { font-size: 20px; }
.cu-ico { display: inline-block; line-height: 1; }
.cu-ico-lapiz::before { content: "✏️"; }
.cu-ico-resaltador::before { content: "🖍️"; }
.cu-ico-borrador {
  width: 24px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f2a6b8 0 62%, #8795ae 62% 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 1px 1px rgba(0, 0, 0, .3);
  transform: rotate(-35deg);
}
.cu-herr[aria-pressed="true"] .cu-ico-borrador { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 0 2px rgba(255, 255, 255, .85); }
.cu-estilo-fijo { margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--borde, #dfe3ea); }
.cu-estilo { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.cu-colores, .cu-grosores { display: flex; align-items: center; gap: 0; }
.cu-grosores { margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--borde, #dfe3ea); }
.cu-color { min-width: 38px; padding: 0; }
.cu-iphone .cu-color { min-width: var(--cu-boton); }
/* Las tintas son cuentas con volumen: el color lo pone el script en la propia cuenta; el brillo (::after) y la sombra de abajo son de aquí. */
/* (el aro fino de --texto-suave es para la tinta negra sobre las barras y los menús oscuros: sin él la cuenta se confundía con el fondo, ~1:1) */
.cu-color-punto { position: relative; display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .2); box-shadow: 0 0 0 1.5px var(--texto-suave, rgba(0, 0, 0, .2)), inset 0 0 0 2px rgba(255, 255, 255, .3), inset 0 -3px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .25); }
.cu-color-punto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 52%); }
.cu-color-res { height: 17px; border-radius: 5px; }
.cu-color[aria-pressed="true"] .cu-color-punto { box-shadow: 0 0 0 3px var(--acento, #2563eb), inset 0 -3px 4px rgba(0, 0, 0, .18); }
.cu-grosor { min-width: 38px; padding: 0; }
.cu-iphone .cu-grosor { min-width: var(--cu-boton); }
.cu-grosor-punto { display: block; border-radius: 50%; background: var(--texto, #1f2430); }
.cu-grosor[aria-pressed="true"] { background: var(--superficie-hundida, #eef0f4); box-shadow: var(--hundido, 0 0 0 0 transparent), inset 0 0 0 2px var(--acento, #2563eb); }
/* La ficha del color del lápiz: la cuenta (con la tinta puesta por el script), un borde del tema y dos aros, uno de la barra y otro de --texto-suave (≥ 4,5:1 sobre la barra en los 9 temas), así la tinta negra se ve también en los temas oscuros. */
.cu-estilo-btn-punto { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borde-fuerte, rgba(0, 0, 0, .25)); box-shadow: 0 0 0 2px var(--superficie, #fff), 0 0 0 4px var(--texto-suave, #667085); }
.cu-historial { margin-left: auto; }
.cu-b-deshacer, .cu-b-rehacer { font-size: 22px; }
.cu-zoom { display: flex; align-items: center; margin-left: auto; gap: 0; }
.cu-dibujando .cu-zoom { margin-left: 8px; }
.cu-zoom-valor { min-width: 48px; text-align: center; font-size: 12.5px; color: var(--texto-suave, #667085); font-variant-numeric: tabular-nums; }
.cu-b-zoom { font-size: 18px; }

/* El zoom de la barra se esconde solo si de verdad no cabe (el script mide la barra y pone esta clase) */
.cu-sin-zoom .cu-zoom { display: none; }

/* barra angosta: una sola fila; color y grosor salen en un menú */
.cu-estrecho .cu-herramientas { gap: 4px; padding: 0 6px; justify-content: space-between; }
.cu-estrecho .cu-historial { margin-left: 0; gap: 0; }
.cu-estrecho .cu-tintero { gap: 0; }
.cu-estrecho .cu-herr-grupo { gap: 0; }
.cu-estrecho.cu-dibujando .cu-modo-texto { display: none; }
.cu-estrecho.cu-dibujando .cu-modo { padding: 0; min-width: 44px; }
.cu-estrecho .cu-modo { padding: 0 10px; }
.cu-estrecho.cu-dibujando .cu-modos { padding: 2px; gap: 0; }

/*
 * Teléfono en vertical dibujando (menos de 480 px): columnas iguales en una sola fila. Se ven como mucho 8 botones (Escribir, lápiz,
 * resaltador, borrador, mover, color y grosor, deshacer, rehacer): 8 × 44 px + 2 × 2 px = 356 px, que cabe hasta en 360 px de ancho.
 * Si la pantalla fuera aún más angosta los botones se estrechan, pero nunca se salen.
 */
.cu-minima.cu-dibujando .cu-herramientas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 0 var(--cu-barra-pad-minima);
}
.cu-minima.cu-dibujando .cu-modos, .cu-minima.cu-dibujando .cu-tintero, .cu-minima.cu-dibujando .cu-herr-grupo, .cu-minima.cu-dibujando .cu-historial { display: contents; }
.cu-minima.cu-dibujando .cu-herramientas .cu-btn { justify-self: center; width: 100%; max-width: 56px; min-width: 0; padding: 0; }

/* ------------------------------ índice ------------------------------ */

.cu-indice {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* el índice se apoya en la misma mesa que la libreta; su texto lleva el color que se lee sobre ESA mesa (no el del tema de la app) */
  color: var(--cu-mesa-texto);
  background-color: var(--cu-mesa-2);
  background-image: var(--cu-mesa-imagen);
  background-size: var(--cu-mesa-tamano);
}
/* los botones sueltos sobre la mesa (Hoy, Hoja nueva, cerrar) se levantan con un velo del color que contraste con ella, no con las superficies del tema */
@media (hover: hover) {
  .cu-indice .cu-btn:hover:not(:disabled) { background: var(--cu-mesa-vela); box-shadow: none; }
}
.cu-indice .cu-btn:active:not(:disabled) { background: var(--cu-mesa-vela); box-shadow: inset 0 1px 3px var(--cu-sombra-mesa); }
.cu-indice-cab { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 10px 4px; }
.cu-indice-titulo { margin: 0 8px; font: 700 26px/1.1 var(--cu-letra); color: var(--cu-mesa-texto); }
.cu-indice-herr { flex: none; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; }
/*
 * El buscador y el campo de los cuadros: color, fondo y texto de ayuda propios (el panel del PC les pone los suyos con input[type=…], por eso van con
 * .cu-raiz input.…, que pesa más). Cada campo se define UNA sola vez (antes estaba repetido en dos reglas y la segunda quedaba tapada por la primera).
 * Al enfocarlos se ilumina el borde y un aro del color de acento del tema (--cu-campo-foco; antes era un azul fijo que desentonaba con el tema Papel).
 */
.cu-raiz input.cu-buscador, .cu-raiz input.cu-dialogo-campo {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cu-campo-borde);
  border-radius: 12px;
  background: var(--cu-campo-fondo);
  color: var(--cu-campo-texto);
  font: inherit;
  font-size: 16px;
  box-shadow: var(--hundido, none);
  -webkit-appearance: none;
  appearance: none;
}
.cu-raiz input.cu-dialogo-campo { margin: 0 0 14px; padding: 0 12px; border-radius: 10px; background: var(--cu-campo-fondo-2); }
.cu-raiz input.cu-buscador:focus, .cu-raiz input.cu-dialogo-campo:focus {
  border-color: var(--cu-campo-foco);
  outline: 2px solid var(--cu-campo-foco);
  outline-offset: 1px;
  box-shadow: var(--hundido, 0 0 0 0 transparent), var(--halo, 0 0 0 0 transparent);
  color: var(--cu-campo-texto);
}
.cu-raiz input.cu-buscador::placeholder, .cu-raiz input.cu-dialogo-campo::placeholder { color: var(--cu-campo-sugerencia); opacity: 1; }
/* (el relleno de 6 px con margen negativo igual deja sitio al anillo de foco de las pastillas, que si no recorta el desplazamiento de la fila, y no mueve nada) */
.cu-filtros { display: flex; gap: 8px; padding: 6px; margin: -6px; overflow-x: auto; scrollbar-width: none; }
.cu-filtros::-webkit-scrollbar { display: none; }
.cu-filtro {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--cu-campo-borde);
  border-radius: 999px;
  background: var(--cu-campo-fondo);
  color: var(--cu-campo-texto);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  /* las sombras negras siguen a --e: la mitad con «suaves» y ninguna con «ninguno» (también la interior de la pastilla elegida, más abajo) */
  box-shadow: var(--luz, 0 0 0 0 transparent), 0 1px 1px rgb(0 0 0 / calc(.14 * var(--e, 1))), 0 3px 6px -2px rgb(0 0 0 / calc(.2 * var(--e, 1)));
  transition: box-shadow var(--transicion, 0s), transform var(--transicion, 0s);
}
.cu-iphone .cu-filtro { min-height: 44px; }
.cu-filtro:active { transform: translateY(1px); box-shadow: var(--hundido, 0 0 0 0 transparent); }
.cu-filtro[aria-pressed="true"] { background: var(--cu-campo-texto); color: var(--cu-campo-fondo); border-color: var(--cu-campo-texto); box-shadow: inset 0 2px 4px rgb(0 0 0 / calc(.38 * var(--e, 1))); }
.cu-lista-indice {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 4px 12px 28px;
}
.cu-mes { margin-bottom: 8px; }
/*
 * La cinta de cada mes: una tira de papel que cuelga sobre la mesa (se queda arriba al bajar por la lista). Del color opaco de la mesa (--cu-mesa-titulo,
 * que es el que mide el contraste), con un degradado casi invisible de luz a sombra, una raya de luz arriba y otra de sombra abajo, esquinas de 4 px y una
 * veta fina de papel. La luz, la sombra y el sombreado siguen a --e: «suaves» deja la mitad y «ninguno» la deja lisa. La sombra que cae sobre las fichas va
 * en un ::after con la opacidad de --e (una sombra con el color de la mesa no se puede multiplicar por --e directamente) y detrás de la propia cinta.
 */
.cu-mes-titulo {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -12px 6px;
  padding: 8px 20px 6px;
  border-radius: 4px;
  font: 700 20px/1.2 var(--cu-letra);
  color: var(--cu-mesa-texto);
  background-color: var(--cu-mesa-titulo);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / calc(.1 * var(--e, 1))), rgb(255 255 255 / 0) 52%, rgb(0 0 0 / calc(.08 * var(--e, 1)))),
    repeating-linear-gradient(90deg, rgb(255 255 255 / calc(.035 * var(--e, 1))) 0 1px, rgb(255 255 255 / 0) 1px 4px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.22 * var(--e, 1))), inset 0 -1px 0 rgb(0 0 0 / calc(.2 * var(--e, 1))), inset 0 0 0 1px var(--cu-mesa-vela);
}
.cu-mes-titulo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 5px 8px -5px var(--cu-sombra-mesa);
  opacity: var(--e, 1);
  pointer-events: none;
}
/*
 * Las fichas del índice son hojas de papel sobre la mesa: del color del tono elegido (de --cu-papel a --cu-ficha-2), con una raya de luz arriba, la sombra
 * corta de contacto, la sombra larga con el tono de la mesa y, debajo, el canto de otra hoja asomando (una pila). Con el puntero encima se levantan.
 */
.cu-ficha {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  margin: 0 0 8px;
  padding: 8px 14px 8px 10px;
  border: 0;
  border-left: 6px solid var(--cu-ficha-borde);
  border-radius: var(--radio-1, 6px) var(--radio-2, 12px) var(--radio-2, 12px) var(--radio-1, 6px);
  background-color: var(--cu-papel);
  background-image: linear-gradient(180deg, var(--cu-papel), var(--cu-ficha-2));
  color: #27303f;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 -1px var(--cu-canto-papel), 0 4px 0 -1px var(--cu-canto-linea), 0 1px 1px var(--cu-sombra-mesa), 0 7px 12px -6px var(--cu-sombra-mesa);
  transition: transform var(--transicion, 0s), box-shadow var(--transicion, 0s);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .cu-ficha:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 -1px var(--cu-canto-papel), 0 4px 0 -1px var(--cu-canto-linea), 0 2px 3px var(--cu-sombra-mesa), 0 12px 18px -6px var(--cu-sombra-mesa); }
}
.cu-ficha:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18), 0 1px 1px var(--cu-sombra-mesa); }
/*
 * La hoja en la que estás: una lengüeta gruesa a la izquierda y una marca ✓ arriba a la derecha. Antes se marcaba solo con el mismo anillo de color que el
 * foco del teclado, así que no se distinguían y dependía del color. Ahora el anillo es solo del foco y esta marca se ve también sin color.
 */
.cu-ficha.actual { border-left-width: 14px; padding-left: 2px; }
.cu-ficha.actual::after { content: "✓"; position: absolute; top: 4px; right: 9px; font: 700 14px/1 system-ui, "Segoe UI", sans-serif; color: #27303f; }
.cu-ficha.marcada { border-right: 7px solid var(--cu-cinta); }
.cu-ficha-fecha { flex: none; width: 48px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.cu-ficha-dia { font: 700 26px/1.05 var(--cu-letra); }
.cu-ficha-sem { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: #44506a; }
.cu-ficha-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cu-ficha-titulo { font: 600 18px/1.25 var(--cu-letra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-ficha-detalle { font-size: 12.5px; color: #4a5469; }
.cu-ficha-marcas { flex: none; display: flex; gap: 6px; padding-right: 22px; font-size: 16px; }
.cu-indice-vacio, .cu-indice-aviso { margin: 26px 12px; text-align: center; color: var(--cu-mesa-texto-suave); }
/* la pista de dónde se busca va pegada al «No hay hojas que coincidan…» de arriba */
.cu-indice-aviso.cu-indice-pista { margin-top: -14px; font-size: 13.5px; }

/* ------------------------------ avisos, menús y confirmaciones ------------------------------ */

.cu-flota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--cu-alto-barra) + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  pointer-events: none;
}
.cu-avisos {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cu-top-avisos, 84px);
  z-index: 31;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  pointer-events: none;
}
.cu-aviso {
  max-width: 460px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  color: #fff;
  background: #1f2937;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.14 * var(--e, 1))), 0 2px 4px rgb(0 0 0 / calc(.25 * var(--e, 1))), 0 10px 22px -4px rgb(0 0 0 / calc(.4 * var(--e, 1)));
  animation: cu-entrar .2s ease-out;
}
.cu-aviso.error { background: #b42318; }
@keyframes cu-entrar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.cu-llena {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 4px 6px 4px 14px;
  border-radius: 14px;
  color: #fff;
  background: #1f2937;
  font-size: 14.5px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.14 * var(--e, 1))), 0 2px 4px rgb(0 0 0 / calc(.25 * var(--e, 1))), 0 10px 22px -4px rgb(0 0 0 / calc(.42 * var(--e, 1)));
  pointer-events: auto;
}
.cu-llena-texto { flex: 1 1 auto; min-width: 0; } /* el mensaje se parte en dos renglones si hace falta; el botón no se achica */
.cu-llena .cu-btn { flex: none; color: #fff; background: rgba(255, 255, 255, .16); font-size: 14.5px; font-weight: 600; padding: 0 14px; white-space: nowrap; }
@media (hover: hover) {
  .cu-llena .cu-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
}
/* En los temas oscuros los avisos toman la superficie de los menús (y su borde fino) en vez de un gris azulado fijo que desentonaba; el de error sigue rojo. */
[data-esquema="oscuro"] .cu-aviso:not(.error), [data-esquema="oscuro"] .cu-llena { color: var(--texto, #fff); background: var(--superficie-alta, #1f2937); border: 1px solid var(--menu-borde, rgba(255, 255, 255, .14)); }

.cu-capa { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.cu-menu-fondo { position: absolute; inset: 0; pointer-events: auto; }
.cu-menu-flotante {
  position: absolute;
  pointer-events: auto;
  min-width: 230px;
  max-width: calc(100% - 16px);
  padding: 6px;
  border: 1px solid var(--menu-borde, var(--borde, #dfe3ea));
  border-radius: var(--radio-3, 14px);
  color: var(--texto, #1f2430);
  background-color: var(--superficie-alta, var(--superficie, #fff));
  background-image: var(--menu-fondo, none);
  box-shadow: var(--luz, 0 0 0 0 transparent), var(--relieve-3, 0 14px 36px rgba(0, 0, 0, .3));
  animation: cu-entrar .15s ease-out;
}
.cu-menu { display: flex; flex-direction: column; }
.cu-menu-titulo { margin: 0; padding: 8px 12px 4px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave, #667085); }
.cu-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radio-2, 10px);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transicion, 0s), box-shadow var(--transicion, 0s);
}
@media (hover: hover) {
  .cu-menu-item:hover:not(:disabled) { background: var(--superficie-2, #eef0f4); box-shadow: var(--luz, 0 0 0 0 transparent); }
}
.cu-menu-item:active:not(:disabled) { background: var(--superficie-hundida, #e4e7ee); box-shadow: var(--hundido, 0 0 0 0 transparent); }
.cu-menu-item:focus-visible { outline: 3px solid var(--acento, #2563eb); outline-offset: -2px; }
.cu-menu-item:disabled { opacity: .4; cursor: default; }
.cu-menu-item.peligro { color: var(--peligro, #d92d20); }
.cu-menu-icono { flex: none; width: 24px; text-align: center; font-size: 18px; }
.cu-menu-texto { flex: 1; }
.cu-menu-marca { color: var(--acento, #2563eb); font-weight: 700; }
.cu-estilo-pop { display: flex; flex-direction: column; gap: 6px; min-width: 250px; }
.cu-estilo-pop .cu-estilo { flex-direction: column; align-items: flex-start; gap: 4px; }
.cu-estilo-pop .cu-grosores { margin-left: 0; padding-left: 0; border-left: 0; }

.cu-dialogo-fondo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
  background: rgba(0, 0, 0, .46);
}
.cu-dialogo { width: min(420px, 100%); padding: 18px; border: 1px solid var(--menu-borde, var(--borde, #dfe3ea)); border-radius: var(--radio-3, 16px); color: var(--texto, #1f2430); background-color: var(--superficie-alta, var(--superficie, #fff)); background-image: var(--menu-fondo, none); box-shadow: var(--luz, 0 0 0 0 transparent), var(--relieve-3, 0 20px 50px rgba(0, 0, 0, .4)); }
.cu-dialogo-titulo { margin: 0 0 8px; font-size: 18px; }
.cu-dialogo-texto { margin: 0 0 14px; font-size: 15px; color: var(--texto-suave, #667085); }
.cu-dialogo-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cu-dialogo-btn { padding: 0 14px; border: 1px solid var(--borde, #dfe3ea); font-size: 16px; font-weight: 600; white-space: nowrap; background-color: var(--superficie, #fff); background-image: var(--superficie-grad, none); box-shadow: var(--luz, 0 0 0 0 transparent), var(--relieve-1, 0 0 0 0 transparent); }
.cu-dialogo-btn:active:not(:disabled) { background-image: none; background-color: var(--superficie-hundida, #e4e7ee); box-shadow: var(--hundido, 0 0 0 0 transparent); }
.cu-dialogo-btn.fuerte { background-color: var(--acento, #2563eb); background-image: var(--acento-grad, none); border-color: var(--acento, #2563eb); color: var(--acento-texto, #fff); }
@media (hover: hover) {
  .cu-dialogo-btn.fuerte:hover:not(:disabled) { background-color: var(--acento-fuerte, #1d4ed8); background-image: none; }
}
.cu-dialogo-btn.peligro { background-color: var(--peligro, #d92d20); background-image: none; border-color: var(--peligro, #d92d20); color: #fff; }
@media (hover: hover) {
  .cu-dialogo-btn.peligro:hover:not(:disabled) { background-color: #b42318; }
}
/* en los temas oscuros --peligro es un rojo claro: con letra blanca no se leería, así que lleva letra casi negra */
[data-esquema="oscuro"] .cu-dialogo-btn.peligro, [data-esquema="oscuro"] .cu-guardado.error { color: #2a0504; }
@media (hover: hover) {
  [data-esquema="oscuro"] .cu-dialogo-btn.peligro:hover:not(:disabled) { background-color: var(--peligro, #d92d20); color: #2a0504; }
}

/* la agenda del día a tamaño normal (se abre al tocar la agenda en un teléfono) */
.cu-panel-agenda { max-height: min(86%, 560px); display: flex; flex-direction: column; }
.cu-panel-lista { flex: 1; min-height: 0; overflow-y: auto; margin: 0 0 12px; -webkit-overflow-scrolling: touch; }
.cu-panel-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 4px 6px;
  border: 0;
  border-bottom: 1px solid var(--borde, #dfe3ea);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.cu-panel-fila:last-child { border-bottom: 0; }
.cu-panel-casilla {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--cu-prio, #7a8599);
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.cu-panel-fila[aria-pressed="true"] .cu-panel-casilla { background: #16a34a; border-color: #16a34a; }
.cu-panel-hora { flex: none; font-size: 14px; color: var(--texto-suave, #667085); }
.cu-panel-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cu-panel-fila.hecha .cu-panel-texto { text-decoration: line-through; opacity: .6; }
.cu-panel-vacio { margin: 12px 4px; color: var(--texto-suave, #667085); }

/* ------------------------------ reducir movimiento ------------------------------ */

/*
 * Esta regla va la ÚLTIMA a propósito. Antes estaba más arriba y varias reglas con animación o transición que se escriben más abajo (el aviso, el menú
 * flotante, el marcapáginas) tienen la misma especificidad y, al venir después, la anulaban: con «reducir movimiento» el marcapáginas seguía estirándose y
 * los avisos y los menús seguían entrando con su deslizamiento. Con la misma especificidad gana la última, así que esta tiene que ser la última.
 */
@media (prefers-reduced-motion: reduce) {
  /* sin giro: la hoja que sale se desvanece y la que vuelve aparece (la transparencia va en la caja, aquí no hay 3D) */
  .cu-sale-ini, .cu-sale-fin, .cu-entra-ini, .cu-entra-fin { transform: none; }
  .cu-sale-fin .cu-frente, .cu-sale-fin .cu-dorso, .cu-entra-ini .cu-frente, .cu-entra-ini .cu-dorso, .cu-entra-fin .cu-frente, .cu-entra-fin .cu-dorso { opacity: 1; transition: none; }
  .cu-sale-fin { opacity: 0; transition: opacity var(--cu-giro, 180ms) linear; }
  .cu-entra-ini { opacity: 0; }
  .cu-entra-fin { opacity: 1; transition: opacity var(--cu-giro, 180ms) linear; }
  .cu-sale-fin .cu-sombra-giro, .cu-entra-fin .cu-sombra-giro { transition: none; }
  .cu-aclara::after, .cu-oscurece::after { animation: none; opacity: 0; }
  /* y los avisos, los menús y el marcapáginas, que antes seguían moviéndose */
  .cu-aviso, .cu-menu-flotante { animation: none; }
  .cu-cinta-tira { transition: none; }
}