/* ══════════════════════════════════════════════════════════════════════════
   pibiMemo · la paleta, en un solo sitio
   ──────────────────────────────────────────────────────────────────────────
   Estos valores estaban dentro de `pibimemo.css`, que sólo cargan las páginas
   públicas. La aplicación con sesión iniciada usaba el canon azul de pibiCo, y
   el resultado era que la web y el producto parecían dos empresas distintas:
   quien pedía plaza en una pantalla de tinta y ámbar entraba en un panel de
   cristal blanco sobre degradado azul.

   La decisión es que la aplicación sigue a la web pública, no al canon. Y para
   que eso no dependa de que alguien se acuerde de copiar un hex, los dos lados
   leen este fichero. Si mañana el ámbar cambia, cambia en los dos a la vez:
   la coherencia deja de ser una intención y pasa a ser una dependencia.

   Aquí sólo van tokens y las dos primitivas que ambos lados comparten
   (`.dorsal` y `.anima`). La maquetación de la web pública se queda en
   `pibimemo.css`; la de la aplicación, en `app.css`.

   Ojo con el canon: `pibico.css` es copia compartida de marca de toda la suite
   (api_auth, api_script, api_talk2doc). No se toca. Lo que hace api_memo es
   dejar de obedecerlo, redefiniendo sus variables más abajo, en su propia hoja.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* El texto de un aviso ámbar sobre su propio fondo. Existe como token
     porque el color iba escrito a mano —`#e8c48a`— y en el tema claro daba
     1,33:1 sobre su fondo: el aviso de «no tienes Telegram enlazado» se
     volvía invisible justo para quien eligió fondo claro porque no ve bien,
     y lo que decía era que la pregunta de «¿estás bien?» no le va a llegar. */
  --texto-aviso: #e8c48a;
  /* Lienzo */
  --tinta:        #070b12;
  --tinta-2:      #0b111c;
  --tinta-3:      #121a29;
  --linea:        rgba(242, 237, 228, 0.10);
  --linea-fuerte: rgba(242, 237, 228, 0.20);
  /* Un borde decorativo puede ser tenue; el único indicador visible de un
     control, no. Medido: 0,20 daba 1,68:1 y la norma pide 3:1 para controles.
     Va aparte para no endurecer los filetes que sí son decoración. */
  --borde-control: rgba(242, 237, 228, 0.42);

  /* Tinta sobre papel oscuro */
  --hueso:        #f2ede4;
  --hueso-medio:  rgba(242, 237, 228, 0.72);
  /* 0,48 dejaba notas, citas, pies de foto y etiquetas en 4,36-4,44:1, y
     ninguno es texto grande: incumplían 1.4.3 por poco y en todo el sitio.
     Con 0,56 suben a 5,47-5,68:1 sobre los tres lienzos. */
  --hueso-tenue:  rgba(242, 237, 228, 0.56);

  /* El ámbar es la voz: sólo se usa donde hay señal, nunca de adorno */
  --ambar:        #f0a33c;
  --ambar-claro:  #ffd39a;
  --ambar-hondo:  #b9741f;
  --ambar-vidrio: rgba(240, 163, 60, 0.14);
  /* Ámbar como trazo: el borde de lo que se ofrece y aún no se ha aceptado.
     Más subido que `--ambar-vidrio`, que es fondo y tiene que dejar leer encima. */
  --ambar-linea:  rgba(240, 163, 60, 0.45);

  /* Escala tipográfica de 8 pasos — no se inventan tamaños fuera de aquí */
  --t-1: 0.6875rem;   /* 11px · etiquetas, dorsales */
  --t-2: 0.75rem;     /* 12px · pie de foto, notas */
  --t-3: 0.875rem;    /* 14px · cuerpo menor, UI */
  --t-4: 1rem;        /* 16px · cuerpo */
  --t-5: 1.25rem;     /* 20px · entradilla */
  --t-6: 1.75rem;     /* 28px · H3 / H2 móvil */
  --t-7: 2.75rem;     /* 44px · H2 */
  --t-8: 4.5rem;      /* 72px · H1 */

  --font-marca:   'Raleway', 'Montserrat', Arial, sans-serif;
  --font-titular: 'Montserrat', Arial, 'Helvetica Neue', sans-serif;
  --font-cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --ancho:   1240px;
  --lectura: 62ch;
  --radio:   14px;

  --transicion: 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  /* La web pública se ve una vez y puede permitirse 280ms; la aplicación se
     usa cuarenta veces al día y a esa cadencia 280ms se siente como lastre.
     Misma curva, un tercio del tiempo: el gesto se reconoce, no se espera. */
  --transicion-app: 120ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Un solo radio para todo lo que se pulsa. Estaba escrito cuatro veces
     como 999px y bastaba con que uno se quedara atrás para que la barra
     tuviera una esquina distinta de la de al lado. */
  --radio-boton: 10px;

  /* ── Superficies que sólo necesita la aplicación ───────────────────────────
     La web pública apila secciones sobre un único lienzo; la aplicación tiene
     fichas que se posan unas sobre otras y necesita dos peldaños más para que
     «encima» y «elegida» se distingan sin recurrir a un borde de color, que
     aquí está prohibido. */
  --tinta-4: #182236;   /* ficha bajo el cursor */
  --tinta-5: #1e2a41;   /* ficha abierta */

  /* ── Las ocho categorías ───────────────────────────────────────────────────
     El color NO puede sostener ocho categorías: simulando deuteranopía, el peor
     par de cualquier paleta de ocho cae a ΔE 0,0 —da igual lo bien elegida que
     esté—. Así que la señal primaria es el tejuelo de tres letras en mono, que
     se lee siempre, y el color es refuerzo para quien lo distingue.
     Medidos sobre la ficha `--tinta-3`: de 8,08:1 a 11,43:1, y ΔE ≥ 23,9 entre
     ellos para quien sí ve el tono. Ninguno entra en el arco del ámbar, que en
     esta casa significa otra cosa. */
  --cat-carta:         #ffb0b9;
  --cat-pensamientos:  #ec9dd2;
  --cat-privado:       #d0c3ff;
  --cat-memoria:       #74bcfa;
  --cat-diario:        #66e1ff;
  --cat-ideas:         #53c8bc;
  --cat-conocimiento:  #a0e0ac;
  --cat-recordatorios: #b0b66a;

  /* Un solo rojo en toda la aplicación, y sólo para destruir. El de grabar se
     va al ámbar: en un archivo de voz, grabar no es un peligro, es la voz. */
  --rojo: #ff8a80;
  /* Y lo que se escribe ENCIMA de ese rojo cuando el rojo es relleno y no
     letra. No se puede usar `--texto` para esto: sobre tinta el rojo es claro
     y pide letra oscura, sobre papel es oscuro y pide letra clara, así que el
     token que sirve para el fondo no sirve nunca para lo de encima.
     Medido: 8,63:1 sobre tinta y 7,47:1 sobre papel. */
  --sobre-rojo: var(--tinta);

  /* ── Papeles: qué hace de fondo y qué hace de marca ────────────────────────
     Arriba están los MATERIALES —tinta, hueso, ámbar—, que es lo que usa la web
     pública, siempre oscura. De aquí para abajo están las FUNCIONES, que es lo
     único que nombra la hoja de la aplicación: `--fondo`, `--texto`, y no
     `--tinta`, `--hueso`. La diferencia importa el día que se le da la vuelta:
     en el tema de papel la tinta pasa a ser la marca y el hueso el soporte, y
     una hoja que dijera «color: var(--hueso)» estaría pidiendo texto claro
     sobre papel claro.

     El tema oscuro es el de casa; el claro es una salida para quien lo
     necesita. Ver el bloque [data-tema="papel"] más abajo. */
  --fondo:        var(--tinta);
  --superficie:   var(--tinta-2);   /* tarjetas grandes */
  --superficie-2: var(--tinta-3);   /* ficha de nota */
  --superficie-3: var(--tinta-4);   /* ficha bajo el cursor */
  --superficie-4: var(--tinta-5);   /* ficha abierta */
  --texto:        var(--hueso);
  --texto-medio:  var(--hueso-medio);
  --texto-tenue:  var(--hueso-tenue);

  /* El velo con el que se realza o se hunde una superficie. Sobre tinta aclara
     (hueso a poca opacidad); sobre papel oscurece. Va como terna para poder
     escribir `rgba(var(--velo), 0.06)` y que el alfa lo ponga cada sitio. */
  --velo: 242, 237, 228;

  /* El ámbar como TEXTO no sobrevive al papel: #f0a33c sobre #e9e3d7 da 1,64:1.
     Cuando el ámbar tiene que leerse como letra y no como relleno, se usa éste,
     que sobre tinta también vale. Como relleno no cambia: tinta encima da
     9,39:1 en los dos temas. */
  --ambar-texto: var(--ambar);

  /* Lo que pinta el SISTEMA, no esta hoja: la lista desplegable de un <select>,
     las barras de desplazamiento, el relleno automático, el selector de fecha.
     Sin esta línea el navegador los dibuja en claro aunque el control se vea
     oscuro, y el desplegable de categorías salía con texto claro sobre fondo
     claro: ilegible. Es una palabra y arregla toda la familia de una vez. */
  color-scheme: dark;

  /* La flecha del desplegable. Va aquí y no en la regla porque un SVG usado
     como imagen de fondo NO hereda `currentColor`: el color se escribe dentro
     del propio dibujo, así que hace falta uno por tema. Es la única
     duplicación que admite el asunto. */
  --flecha-sel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23f2ede4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ══════════════════════════════════════════════════════════════════════════
   Tema papel
   ──────────────────────────────────────────────────────────────────────────
   No es una preferencia estética: es una salida médica. La sensibilidad al
   contraste cae con la edad, y con catarata incipiente o astigmatismo el texto
   claro sobre fondo oscuro produce halo —las letras «sangran» y cuesta
   leerlas—. Este producto lo escribe gente mayor, así que el lienzo oscuro no
   puede ser la única opción.

   Se conservan los tonos, se cambian los papeles. Pero la inversión NO es
   simétrica, y ahí está el trabajo: cuatro tokens que cumplían sobre tinta
   suspenden al darles la vuelta, porque el ojo no responde igual a los dos
   lados. Cada corrección va anotada con lo que medía.
   ══════════════════════════════════════════════════════════════════════════ */
[data-tema="papel"] {
  /* Ámbar oscuro sobre el fondo claro del aviso: mismo color, leído. */
  --texto-aviso: #7a4e04;
  --fondo:        #e9e3d7;   /* el papel de la mesa */
  --superficie:   #f2ede4;   /* la hoja */
  --superficie-2: #f8f5ef;   /* la ficha, un punto más clara que la hoja */
  --superficie-3: #ded7c8;   /* bajo el cursor: aquí el realce hunde, no aclara */
  --superficie-4: #dcd4c3;   /* abierta */

  --texto:        #070b12;
  --texto-medio:  rgba(7, 11, 18, 0.72);
  /* 0,56 es el valor del tema oscuro y allí da 5,64:1; invertido se queda en
     4,35:1 y suspende 1.4.3. Sube a 0,62, que da 5,33:1. */
  --texto-tenue:  rgba(7, 11, 18, 0.62);

  --linea:        rgba(7, 11, 18, 0.10);
  --linea-fuerte: rgba(7, 11, 18, 0.20);
  /* Igual que arriba: 0,42 daba 3,64:1 sobre tinta y sólo 2,76:1 sobre papel,
     por debajo del 3:1 que pide un indicador de control. Con 0,46 sube a 3,10. */
  --borde-control: rgba(7, 11, 18, 0.46);

  --velo: 7, 11, 18;

  /* El ámbar sigue siendo la voz, pero como letra sobre papel no se lee. */
  --ambar-texto: #8a5310;                    /* 5,42:1 sobre la hoja */
  --ambar-vidrio: rgba(240, 163, 60, 0.22);
  /* El ámbar de pantalla sobre papel se deslavaza y el trazo desaparece. Va el
     mismo tono hondo que la letra, que sí se ve y sigue siendo ámbar. */
  --ambar-linea: rgba(138, 83, 16, 0.45);
  /* #ff8a80 sobre papel da 1,96:1. Este rojo da 6,40:1 y sigue siendo rojo. */
  --rojo: #a3231a;
  /* Aquí el rojo es oscuro, así que encima va lo claro: la tinta daría 2,64:1. */
  --sobre-rojo: #ffffff;

  /* Los ocho de la categoría, con el MISMO tono y otra claridad: la categoría
     no cambia de color al cambiar de tema, cambia de peso.
     Se comprobaron contra la ficha en reposo (#f8f5ef) y ahí cumplían de
     sobra, pero la ficha tiene otros dos fondos —bajo el cursor y abierta— y
     en este tema son MÁS OSCUROS que la ficha, no más claros. Sobre la abierta
     (#dcd4c3), tres de los ocho caían: conocimiento a 3,91:1, memoria a 4,05 y
     recordatorios a 4,22. Se oscurecen esos tres lo justo, por su propia recta
     para no moverles el tono (ΔE 3-7, no se nota que cambien de color).
     Ahora el peor de los ocho da 6,13 en reposo, 4,66 bajo el cursor y 4,52
     abierta, y siguen separados entre sí ΔE 17,9. */
  --cat-carta:         #890032;
  --cat-pensamientos:  #8c006f;
  --cat-privado:       #2e2d83;
  --cat-memoria:       #015e8e;
  --cat-diario:        #005f71;
  --cat-ideas:         #006860;
  --cat-conocimiento:  #00682f;
  --cat-recordatorios: #556100;

  /* Y aquí al revés, por lo mismo. */
  color-scheme: light;

  --flecha-sel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23070b12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ── Las primitivas compartidas ──────────────────────────────────────────── */

/* Los desplegables.
   ──────────────────────────────────────────────────────────────────────────
   Un <select> con la apariencia de fábrica no lo dibuja esta hoja: lo dibuja
   el navegador. En Chromium sobre Linux sale con la esquina en pico y su
   propia flecha, y el radio que se le pida aquí no llega a verse nunca. Por
   eso el de categorías seguía cuadrado por mucho que la regla dijera 8px.

   Se le quita la apariencia de fábrica y la flecha se pone desde aquí, para
   que el control tenga el mismo canto que todo lo demás que se pulsa, en la
   web pública y en la aplicación.

   El selector lleva `select[class]` además de `select` a propósito: cada
   desplegable de la casa arrastra ya una regla de clase con `background` y
   `padding` en forma corta, y una regla de elemento pierde contra una de
   clase por muy detrás que vaya. Con el atributo la balanza se iguala sin
   enumerar las nueve clases, que es la lista que siempre se queda corta. */
select, select[class] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border-radius: var(--radius-sm, 8px);
  background-image: var(--flecha-sel);
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 9px 6px;
  /* Sitio para la flecha: sin esto la última letra se le mete debajo. Justo el
     que ocupa (9px) más su margen (7px) y un pelo de aire; con 1,5rem el «20»
     del paginado se quedaba arrinconado a la izquierda de su propia pastilla. */
  padding-right: 1.15rem;
  /* Al quitar la apariencia de fábrica se pierde el centrado que hacía el
     navegador: el texto se iba al borde de arriba mientras el resto de la fila
     seguía centrado. Con la lista estilable el control es una caja flexible,
     así que se dice aquí; donde no lo sea, esta línea no hace nada. */
  align-items: center;
}

/* Nunca acercar la página sola al enfocar un campo.
   ──────────────────────────────────────────────────────────────────────────
   Safari en iOS acerca la página cuando el campo que recibe el foco mide menos
   de 16px, y al salir NO la devuelve a su sitio: sacas el teclado y te quedas
   con la interfaz agrandada y desplazada.

   Estaba resuelto en la hoja de la aplicación y sólo allí. Medido con un móvil
   emulado de verdad: la aplicación, cero campos por debajo de 16px; la web
   pública, TRECE en cada página y veintitrés en precios — es decir, el
   formulario de alta entero, que es exactamente donde se apunta la gente. Por
   eso sube aquí: es una regla sobre los campos de la casa, no sobre una
   pantalla concreta, y en un solo sitio no puede volver a divergir.

   La condición es el puntero y no el ancho: `pointer: coarse` + `hover: none`
   es «se maneja con el dedo y no hay ratón», que es cuando aparece un teclado
   en pantalla, y no cambia según se gire el aparato —un móvil tumbado mide 812
   de ancho y se escapaba de cualquier umbral razonable—.

   El zoom MANUAL sigue disponible a propósito: el `<meta viewport>` no lleva
   `user-scalable=no`. Se impide que la página decida acercarse sola, nunca que
   su dueño la acerque. */
@media (pointer: coarse) and (hover: none) {
  input, textarea, select, [contenteditable] { font-size: 16px !important; }
}
/* Respaldo para navegadores que no informan del puntero. `not (pointer: fine)`
   deja fuera al ratón: una ventana de escritorio estrechada a 375px no tiene
   teclado en pantalla ni riesgo de zoom, y con la regla puesta el paginado
   —11px por diseño— se veía enorme al lado de sus propias etiquetas. */
@media (max-width: 768px) and (not (pointer: fine)) {
  input, textarea, select, [contenteditable] { font-size: 16px !important; }
}

/* Y la lista que se abre, que es la otra mitad del problema: la pinta el
   sistema operativo y el CSS de la página no la alcanza. Desde Chromium 135
   sí, si el control lo pide con `base-select`; donde no lo haya, el control se
   queda redondo y la lista sigue siendo la del sistema, que es exactamente lo
   que hay hoy. Mejora donde se puede y no rompe donde no. */
@supports (appearance: base-select) {
  select, select[class] { appearance: base-select; }
  /* Con `base-select` el navegador añade su propia flecha; la nuestra ya está
     puesta arriba y es la misma en los dos caminos. */
  select::picker-icon { display: none; }
  select::picker(select) {
    appearance: base-select;
    background: var(--superficie, var(--tinta-2)); color: var(--texto, var(--hueso));
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-boton);
    overflow: hidden;
    padding: 4px; margin-top: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40);
  }
  select option {
    border-radius: 6px; padding: 5px 8px;
    color: var(--texto, var(--hueso)); background: transparent;
    font-family: var(--font-cuerpo);
  }
  /* La opción elegida venía con un cerco blanco de 3px que gritaba más que la
     propia lista. Se dice con el mismo velo que usa todo lo demás. */
  select option:checked,
  select option:hover,
  select option:focus { outline: none; background: rgba(var(--velo), 0.10); }
  select option::checkmark { content: none; }
}


/* Etiqueta de sección: número + nombre, en mono, como un dorsal de archivo.
   Vive aquí y no en la hoja de la web pública porque la aplicación la usa
   para lo mismo: rotular una zona sin gastar un titular en ello. */
.dorsal {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar-texto);
  margin-bottom: 1.6rem;
}
.dorsal::before {
  content: ''; width: 26px; height: 1px;
  background: var(--ambar-texto); opacity: 0.55;
}

/* Aparición al entrar en pantalla. En la web pública entra con 700ms, que es
   un gesto de página; la aplicación la recorta a un tercio en su propia hoja,
   porque lo que se ve una vez puede permitirse ser lento y lo que se ve
   doscientas veces al día, no. */
.anima {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.22,0.61,0.36,1),
              transform 700ms cubic-bezier(0.22,0.61,0.36,1);
}
.anima.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anima { opacity: 1; transform: none; }
}