/* ════════════════════════════════════════════════════════════════════════════════════════════
   PAPEL — el estilo común de las pantallas de la PC (pedido del usuario, 26-sep-2026). La versión: --pp-version.
   Como una agenda: hoja color papel, tinta, cursiva de libreta, casillas cuadradas y post-its.
   Sin brillos, degradados de color, vidrio ni emojis: todo se apoya en la tipografía y la tinta.

   ORIGINAL en C:\PanelPC\estilo\ (junto con pp.js). Lo sirve el panel en /estilo/papel.css y lo usan
   el inicio (menu.html), los sensores (panel.html, tema "papel") y las apps nuevas.
   Mi Productividad (otro sitio) lleva una COPIA EXACTA en css/papel.css: si esto es la copia, NO
   editarla; cambiar el original y correr  python C:\PanelPC\estilo\sincronizar.py <repo>.
   Catálogo de piezas y reglas: C:\PanelPC\estilo\LEEME.md.

   REGLA DE ORO (la revisa sincronizar.py, al copiar y con --verificar, junto con los colores sueltos): acá solo puede haber variables --pp-*, clases
   .pp-*, html.pp-*, @font-face y @keyframes pp-*. Nada de body{}, *{} ni variables sin prefijo: panel.html
   carga este archivo con sus 15 temas y cualquier regla suelta se colaría en todos.
   Si se cambia algo que usan las páginas, subir --pp-version y PP.version (pp.js) juntas.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* Números: Saira Condensed. ../fonts/ llega a /fonts/ tanto desde /estilo/ (PanelPC) como desde /css/ (Mi Productividad) */
@font-face { font-family: "Saira Condensed"; font-weight: 500; font-display: block; src: url(../fonts/SairaCondensed-500.woff2) format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 700; font-display: block; src: url(../fonts/SairaCondensed-700.woff2) format("woff2"); }

:root {
  --pp-version: 12;

  /* colores */
  --pp-papel: #f3eee4;          /* la hoja */
  --pp-tarjeta: #fbf8f2;        /* una hoja más clara encima: fichas, tarjetas, el login */
  --pp-renglon: #e2dacb;        /* renglones y líneas suaves */
  --pp-linea: #cfc6b4;          /* separadores de los sensores */
  --pp-pista: #e3dbca;          /* pistas de diales y anillos */
  --pp-tinta: #1f2a36;          /* texto, casillas marcadas, líneas fuertes */
  --pp-tinta-fuerte: #141c26;   /* números grandes y agujas */
  --pp-gris: #7b7466;           /* texto secundario */
  --pp-gris-oscuro: #6d6557;    /* texto secundario un poco más fuerte (y las temperaturas normales) */
  --pp-apagado: #aaa191;        /* escalas y marcas menores */
  --pp-suave: #a79f8e;          /* texto apagado, pestañas no elegidas */
  --pp-claro: #c9c1b1;          /* casillas vacías, separadores */
  --pp-futuro: #d3cbbb;         /* días que todavía no llegan (punteados) */
  --pp-rojo: #c8453b;           /* hoy, vencido, alarma */
  --pp-azul: #2f5d8a;           /* lápiz azul (CPU, acentos) */
  --pp-ocre: #b07d12;           /* ocre (GPU) */
  --pp-verde: #3d7a55;          /* rachas buenas, todo en orden */
  --pp-naranja: #d9822b;        /* aviso */
  --pp-blanco: #fff;            /* el ✓ dentro de una casilla marcada */
  --pp-cinta: rgba(255, 255, 255, .55);   /* la cinta que sostiene un post-it o una foto */
  --pp-vinilo: #121317;         /* un disco de vinilo (Música) */
  --pp-vinilo-surco: #1b1d22;   /* sus surcos */
  --pp-vinilo-brillo: rgba(255, 255, 255, .1);   /* la luz quieta sobre el disco (igual en claro y en oscuro) */
  --pp-sombreado: rgba(47, 93, 138, .13);     /* lápiz azul suave bajo una curva */
  --pp-sombreado-fin: rgba(47, 93, 138, 0);
  --pp-velo: rgba(31, 42, 54, .05);           /* fila tocada */
  /* niveles de un mapa de calor (de poco a mucho; 0 = --pp-pista) */
  --pp-nivel1: #d6cdb9; --pp-nivel2: #a79f8e; --pp-nivel3: #5d5a55; --pp-nivel4: #1f2a36;
  /* post-its (y su letra: en el modo oscuro siguen siendo papel, con tinta oscura) */
  --pp-tinta-postit: #1f2a36; --pp-autor-postit: #6b624f;
  --pp-postit1: #ffe58a; --pp-postit2: #bfe6f0; --pp-postit3: #ffc9b8; --pp-postit4: #d6ecc4; --pp-postit5: #e6d4f2; --pp-postit6: #f6d3a6;

  /* letras: cursiva de libreta para títulos y etiquetas, Bahnschrift para leer, Saira para números */
  --pp-serif: Georgia, "Cambria", serif;
  --pp-txt: "Bahnschrift", "Segoe UI", sans-serif;
  --pp-num: "Saira Condensed", "Bahnschrift", sans-serif;

  /* Todo color es una variable, salvo las sombras (box-shadow): su rgba es un tono de tinta muy transparente que
     no se reusa, y va escrito en cada una. Las máscaras usan #000 porque ahí solo cuenta la opacidad. */
  --pp-sombra: 0 3px 0 rgba(0, 0, 0, .05), 0 14px 22px -12px rgba(60, 40, 10, .38);   /* post-its */
  /* algo que se levanta de la hoja (la funda de un disco; una tarjeta o una tapa chica): en oscuro, negras y más marcadas */
  --pp-sombra-alta: 0 3px 0 rgba(0, 0, 0, .06), 0 22px 34px -18px rgba(40, 28, 10, .55);
  --pp-sombra-media: 0 14px 26px -18px rgba(40, 28, 10, .6);
}

/* ── Modo oscuro "grafito" (elegido por el usuario el 27-sep-2026) ───────────────────────────────
   html.pp-oscuro (junto con .pp-papel): lo pone PP.tema; en el panel lo decide PanelPC.exe (la casilla "Modo noche"
   del inicio y el horario de noche). Los mismos nombres con otros valores: todo lo que usa las variables se oscurece
   solo. Aparte, los íconos pasan a contorno (el dibujo y el borde del color de la app, sin relleno) y los post-its
   siguen siendo papel, más apagados. Las reglas de las piezas van con :where(), así pesan poco: la regla propia de una
   página (como el ícono punteado de "próximamente") le gana sola, sin repetirla para el oscuro. */
html.pp-papel.pp-oscuro {
  color-scheme: dark;
  --pp-papel: #262b33; --pp-tarjeta: #2d333c; --pp-renglon: #3a414c; --pp-linea: #434b57; --pp-pista: #3a414c;
  --pp-tinta: #e6e2da; --pp-tinta-fuerte: #f2efe9; --pp-gris: #9a9890; --pp-gris-oscuro: #b2afa6;
  --pp-apagado: #676e79; --pp-suave: #777d87; --pp-claro: #4a525e; --pp-futuro: #3a414c;
  --pp-rojo: #e2786d; --pp-azul: #82ade0; --pp-ocre: #d8ae55; --pp-verde: #7fbb95; --pp-naranja: #e8a260;
  --pp-blanco: #262b33;   /* el ✓ va sobre una casilla de tinta, que ahora es clara */
  --pp-cinta: rgba(255, 255, 255, .16);
  --pp-vinilo: #101318; --pp-vinilo-surco: #1a1e24;
  --pp-sombreado: rgba(130, 173, 224, .16); --pp-sombreado-fin: rgba(130, 173, 224, 0);
  --pp-velo: rgba(230, 226, 218, .06);
  --pp-nivel1: #48505c; --pp-nivel2: #58606c;   /* el 1 se distingue de la pista (el 0) */
  --pp-nivel3: #9a9890; --pp-nivel4: #e6e2da;
  --pp-postit1: #e3cc72; --pp-postit2: #a8cdd7; --pp-postit3: #e3b1a1; --pp-postit4: #bcd2ab; --pp-postit5: #cabad8; --pp-postit6: #d9ba90;
  --pp-sombra: 0 3px 0 rgba(0, 0, 0, .25), 0 14px 22px -12px rgba(0, 0, 0, .7);
  --pp-sombra-alta: 0 3px 0 rgba(0, 0, 0, .3), 0 22px 34px -16px rgba(0, 0, 0, .75);
  --pp-sombra-media: 0 14px 26px -14px rgba(0, 0, 0, .75);
  --pc-barra: rgba(230, 226, 218, .35);   /* la barrita de inicio de PanelPC.exe, clara sobre grafito */
}
html.pp-papel.pp-oscuro :where(.pp-icono) { background: transparent; box-shadow: inset 0 0 0 max(2px, calc(var(--t, 56px) * .018)) var(--c, var(--pp-tinta)); }
html.pp-papel.pp-oscuro :where(.pp-icono svg) { stroke: var(--c, var(--pp-tinta)); }
/* las piezas rellenas: la sombra de tinta no se ve sobre el grafito y quedaban planas; en oscuro va negra y más marcada */
html.pp-papel.pp-oscuro :where(.pp-redondo.pp-lleno) { box-shadow: 0 6px 0 -2px rgba(0, 0, 0, .55), 0 16px 24px -12px rgba(0, 0, 0, .7); }
html.pp-papel.pp-oscuro :where(.pp-fader-perilla) { box-shadow: 0 5px 0 -1px rgba(0, 0, 0, .55), 0 10px 16px -8px rgba(0, 0, 0, .6); }
html.pp-papel.pp-oscuro :where(.pp-ficha) { box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
html.pp-papel.pp-oscuro :where(.pp-aviso) { box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .85); }
/* el cambio de tema es un fundido de toda la pantalla (PP.tema, con document.startViewTransition); mientras dura, los
   toques pasan a la página (si no, el fundido se los quedaría) */
html.pp-papel::view-transition-old(root), html.pp-papel::view-transition-new(root) { animation-duration: .45s; }
html.pp-papel::view-transition { pointer-events: none; }

/* ── Base: pantalla táctil 1920x720 (cualquier tema) ─────────────────────────────────────────── */
/* touch-action lo pone cada página: el inicio y los sensores no se desplazan (none); las listas sí (pan-y). */
html.pp-pantalla, html.pp-pantalla body { width: 1920px; height: 720px; margin: 0; overflow: hidden; }
html.pp-pantalla body { cursor: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }

/* ── Piel papel ──────────────────────────────────────────────────────────────────────────────── */
html.pp-papel { --pc-barra: rgba(31, 42, 54, .35); }   /* barrita de inicio que dibuja PanelPC.exe: oscura sobre papel */
html.pp-papel body { background: var(--pp-papel); color: var(--pp-tinta); font-family: var(--pp-txt); }

/* ── Membrete: título/fecha a la izquierda, selector al centro, hora a la derecha, línea de tinta ── */
.pp-cab { position: relative; height: 96px; border-bottom: 1.5px solid var(--pp-tinta); }
.pp-fecha { position: absolute; left: 0; top: 30px; font: italic 700 42px/1 var(--pp-serif); letter-spacing: -.01em; color: var(--pp-tinta); white-space: nowrap; }
.pp-fecha span { font-weight: 400; font-size: 22px; color: var(--pp-gris); margin-left: 12px; }
.pp-hora { position: absolute; right: 0; top: 34px; font: 700 32px/1 var(--pp-num); color: var(--pp-tinta); font-variant-numeric: tabular-nums; }

/* Selector de pestañas "tipográfico con números" (el que eligió el usuario): palabras en cursiva
   separadas por líneas finas; la elegida en negrita y tinta, las otras (palabra y número) en tinta apagada. */
.pp-sel { position: absolute; left: 50%; top: 28px; transform: translateX(-50%); display: flex; align-items: baseline; }
.pp-op { all: unset; position: relative; display: flex; align-items: baseline; gap: 12px; padding: 0 32px; cursor: none;
  font: italic 400 34px/1 var(--pp-serif); color: var(--pp-suave); transition: color .15s; }
.pp-op::before { content: ""; position: absolute; inset: -22px 0; }   /* zona de toque más alta que la palabra (sin cambiar el dibujo) */
.pp-op + .pp-op { border-left: 1.5px solid var(--pp-claro); }
/* La palabra (la envuelve PP.pestanas): reserva el ancho de su versión en negrita, así el selector no se corre al cambiar */
.pp-op-t { display: inline-grid; }
.pp-op-t::before, .pp-op-t::after { content: attr(data-t); grid-area: 1 / 1; }
.pp-op-t::before { justify-self: end; }   /* el espacio que sobra va hacia el separador, no entre la palabra y su número */
.pp-op-t::after { font-weight: 700; visibility: hidden; }
.pp-op b { font: 500 23px/1 var(--pp-num); font-style: normal; color: var(--pp-suave); letter-spacing: .02em; }
.pp-op.on { color: var(--pp-tinta); font-weight: 700; }
.pp-op.on b { color: var(--pp-gris); font-weight: 700; }

/* ── Textos ─────────────────────────────────────────────────────────────────────────────────── */
.pp-etiqueta { font: 700 15px/1 var(--pp-txt); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-gris); }
.pp-cursiva { font-family: var(--pp-serif); font-style: italic; font-weight: 400; }
.pp-corta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-titulo-col { display: flex; align-items: baseline; gap: 10px; height: 40px; border-bottom: 1.5px solid var(--pp-tinta); }
.pp-titulo-col b { font: 700 20px/1 var(--pp-num); color: var(--pp-tinta); letter-spacing: 0; }

/* Dos puntos de un reloj que parpadean: PP.reloj les pone y saca "off" cada segundo */
.pp-dp { transition: opacity .25s; }
.pp-dp.off { opacity: .25; }

/* ── Casillas (hábitos y tareas): --t = tamaño (32 px); el borde, la esquina y el ✓ crecen con ella ── */
.pp-casilla { width: var(--t, 32px); height: var(--t, 32px); flex: none; border: calc(var(--t, 32px) * .094) solid var(--pp-tinta);
  border-radius: calc(var(--t, 32px) * .19); display: grid; place-items: center; box-sizing: border-box; }   /* (--t se lee, como en .pp-icono: la regla de oro no deja declararla acá) */
.pp-casilla.si { background: var(--pp-tinta); }
.pp-casilla.hoy { border-color: var(--pp-rojo); }
.pp-casilla.hoy.si { background: var(--pp-rojo); }
/* ✓ dibujado con bordes (no depende de fuentes de íconos) */
.pp-casilla.si.hoy::after, .pp-casilla.marca::after { content: ""; width: 42%; height: 22%; border: solid var(--pp-blanco);
  border-width: 0 0 calc(var(--t, 32px) * .11) calc(var(--t, 32px) * .11); transform: translate(0, -18%) rotate(-45deg); }

/* ── Ficha: tarjeta de papel sobre la hoja (tareas del kanban, apuntes) ─────────────────────── */
.pp-ficha { background: var(--pp-tarjeta); border: 1.5px solid var(--pp-renglon); border-radius: 12px; box-shadow: 0 2px 0 rgba(31, 42, 54, .05); }

/* ── Capa de lectura (PP.capa): el velo (.pp-capa, con hidden) tapa la pantalla con papel a medias y la hoja
   (.pp-ficha .pp-capa-hoja) va encima; tocar el velo o la palabra "cerrar" (.pp-capa-cerrar) la cierra sola ── */
.pp-capa { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--pp-papel) 60%, transparent); }
.pp-capa-hoja { position: absolute; left: 300px; right: 300px; top: 40px; max-height: 650px; padding: 26px 40px 30px; display: flex; flex-direction: column; }
.pp-capa-cerrar { all: unset; position: absolute; right: 30px; top: 16px; padding: 12px 0 12px 24px; cursor: none;   /* 44 px de alto: se toca bien */
  font: italic 400 20px/1 var(--pp-serif); color: var(--pp-gris); }
.pp-capa-cuerpo { display: contents; }   /* lo que la página cambia adentro de la hoja (sin tocar "cerrar"), como si fuera la hoja */

/* ── Hojas de una app con pestañas (PP.pestanas): debajo del membrete, una encima de la otra; se ve la que tiene .on ── */
.pp-hoja { position: absolute; top: 98px; left: 60px; right: 60px; bottom: 30px; display: none; }
.pp-hoja.on { display: block; }

/* ── Botón de tinta (− / +, deshacer) ─────────────────────────────────────────────────────────── */
.pp-boton { all: unset; box-sizing: border-box; display: grid; place-items: center; border: 2.5px solid var(--pp-tinta); border-radius: 10px;
  font: 700 28px/1 var(--pp-num); color: var(--pp-tinta); cursor: none; transition: background .12s, color .12s; }
.pp-boton:active { background: var(--pp-tinta); color: var(--pp-papel); }

/* ── Ícono de app: cuadrado redondeado de color liso con el dibujo en trazo color papel (en oscuro: contorno) ── */
/* --t = tamaño (56 px si no se dice) · --c = color (tinta si no se dice). Adentro, un <svg> con viewBox cuadrado:
   el trazo es el 10 % del dibujo, así se ve igual de grueso en cualquier tamaño. */
.pp-icono { width: var(--t, 56px); height: var(--t, 56px); flex: none; box-sizing: border-box; display: grid; place-items: center;
  border-radius: calc(var(--t, 56px) * .2); background: var(--c, var(--pp-tinta)); box-shadow: 0 calc(var(--t, 56px) * .03) 0 -1px rgba(31, 42, 54, .16); }
.pp-icono svg { width: 57%; height: 57%; fill: none; stroke: var(--pp-papel); stroke-width: 10%; stroke-linecap: round; stroke-linejoin: round; }

/* ── Botón redondo (anterior, reproducir, siguiente): --t = tamaño · .pp-lleno = el principal, de tinta ── */
.pp-redondo { all: unset; box-sizing: border-box; width: var(--t, 78px); height: var(--t, 78px); flex: none; display: grid; place-items: center;
  border: 2.5px solid var(--pp-tinta); border-radius: 50%; color: var(--pp-tinta); cursor: none; transition: transform .12s ease-out, opacity .2s; }
.pp-redondo svg { width: 38%; height: 38%; fill: currentColor; }
.pp-redondo:active { transform: scale(.92); }
.pp-redondo.pp-lleno { border: 0; background: var(--pp-tinta); color: var(--pp-papel); box-shadow: 0 6px 0 -2px rgba(31, 42, 54, .25); }
.pp-redondo:disabled { opacity: .28; }

/* ── Regla: avance o volumen en horizontal (se mueve con PP.arrastre) ─────────────────────────────
   --v = cuánto (0 a 1): la parte hecha en tinta gruesa y la aguja roja en el punto. Adentro van
   <i class="pp-regla-lleno"></i><i class="pp-regla-aguja"></i>. Mide 60 px de alto para que el dedo la agarre fácil. */
.pp-regla { position: relative; height: 60px; touch-action: none; }
.pp-regla::before { content: ""; position: absolute; left: 0; right: 0; top: 35px; height: 10px;   /* marcas */
  background: repeating-linear-gradient(90deg, var(--pp-claro) 0 1.5px, transparent 1.5px 20px); }
.pp-regla::after { content: ""; position: absolute; left: 0; right: 0; top: 29px; height: 2px; background: var(--pp-tinta); }
.pp-regla-lleno { position: absolute; left: 0; top: 27px; width: calc(var(--v, 0) * 100%); height: 6px; border-radius: 3px; background: var(--pp-tinta); }
.pp-regla-aguja { position: absolute; z-index: 1; top: 16px; left: calc(var(--v, 0) * 100%); width: 4px; height: 28px; margin-left: -2px; border-radius: 2px;
  background: var(--pp-rojo); transition: transform .12s; }   /* z-index: encima de la línea (::after se pinta después de los hijos) */
.pp-arrastrando .pp-regla-aguja { transform: scaleY(1.25); }

/* ── Fader: volumen en vertical, como en una mesa de sonido (PP.arrastre con vertical: true) ──────
   --v = volumen · --n = nivel del sonido en vivo (0 a 1), la barra azul. Adentro van
   <i class="pp-fader-nivel"></i><i class="pp-fader-perilla"></i>. .pp-apagado = silenciado: la tinta pasa a gris. */
.pp-fader { position: relative; width: 100px; height: 300px; flex: none; touch-action: none; }
.pp-fader::before { content: ""; position: absolute; inset: 0 8px;   /* marcas a los costados */
  background: repeating-linear-gradient(180deg, var(--pp-claro) 0 1.5px, transparent 1.5px 30px);
  -webkit-mask: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74%); mask: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74%); }
.pp-fader::after { content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 4px; border-radius: 2px;   /* la pista, llena hasta el volumen */
  background: linear-gradient(to top, var(--pp-fader-tinta, var(--pp-tinta)) calc(var(--v, 0) * 100%), var(--pp-renglon) 0); }
.pp-fader-nivel { position: absolute; left: 60px; top: 0; bottom: 0; width: 7px; border-radius: 3px; background: var(--pp-azul); opacity: .8;
  transform-origin: 50% 100%; transform: scaleY(var(--n, 0)); transition: transform .08s linear; }
.pp-fader-perilla { position: absolute; z-index: 1; left: 18px; bottom: calc(var(--v, 0) * 100%); width: 56px; height: 30px; margin-bottom: -15px; border-radius: 8px;
  background: var(--pp-fader-tinta, var(--pp-tinta)); box-shadow: 0 5px 0 -1px rgba(31, 42, 54, .25); transition: transform .12s; }
.pp-fader-perilla::after { content: ""; position: absolute; left: 10px; right: 10px; top: 14px; height: 2px; background: var(--pp-papel); }
.pp-arrastrando .pp-fader-perilla { transform: scale(1.08); }
.pp-fader.pp-apagado { --pp-fader-tinta: var(--pp-claro); }
.pp-fader.pp-apagado .pp-fader-nivel { opacity: 0; }

/* ── Medidor por segmentos (el micrófono): --n = nivel (0 a 1); 16 rayitas que se encienden en verde ── */
.pp-medidor { position: relative; height: 12px; background: repeating-linear-gradient(90deg, var(--pp-renglon) 0 calc(6.25% - 4px), transparent 0 6.25%); }
.pp-medidor::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--pp-verde) 0 calc(6.25% - 4px), transparent 0 6.25%);
  clip-path: inset(0 calc((1 - var(--n, 0)) * 100%) 0 0); transition: clip-path .08s linear; }

/* ── Opción de una lista donde se elige una sola: .on = la elegida, con el punto rojo ────────────── */
.pp-radio { width: 30px; height: 30px; flex: none; box-sizing: border-box; display: grid; place-items: center; border: 3px solid var(--pp-claro); border-radius: 50%; }
.pp-radio.on { border-color: var(--pp-tinta); }
.pp-radio.on::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--pp-rojo); }

/* ── Post-it con cinta ──────────────────────────────────────────────────────────────────────── */
.pp-postit { position: relative; padding: 24px 24px 26px; background: var(--c, var(--pp-postit1)); color: var(--pp-tinta-postit);
  font: 400 22px/1.4 var(--pp-txt); transform: rotate(var(--r, -1deg)); box-shadow: var(--pp-sombra); }
.pp-postit::before { content: ""; position: absolute; left: 50%; top: -12px; width: 96px; height: 26px; margin-left: -48px; background: var(--pp-cinta); transform: rotate(-2deg); }
.pp-postit small { display: block; margin-top: 14px; font: italic 400 18px/1 var(--pp-serif); color: var(--pp-autor-postit); }

/* ── Aviso flotante (deshacer, errores) ──────────────────────────────────────────────────────── */
.pp-aviso { display: flex; align-items: center; gap: 20px; padding: 10px 10px 10px 24px; border-radius: 14px;
  background: var(--pp-tinta); color: var(--pp-papel); font: 500 21px/1 var(--pp-txt); box-shadow: 0 12px 28px -10px rgba(31, 42, 54, .5); }
.pp-aviso .pp-boton { border-color: var(--pp-papel); color: var(--pp-papel); padding: 14px 20px; font: 700 16px/1 var(--pp-txt); letter-spacing: .14em; }
.pp-aviso .pp-boton:active { background: var(--pp-papel); color: var(--pp-tinta); }

/* ── Movimiento ─────────────────────────────────────────────────────────────────────────────── */
/* Todas las pantallas comparten el papel de fondo: en cada transición la tinta se va y vuelve sobre la
   misma hoja (sin cortes ni destellos). Curva suave para entrar, rápida para salir. */
.pp-entra { animation: pp-entra .3s ease-out; }            /* aparecer suave */
@keyframes pp-entra { from { opacity: 0; } }

/* Pantallas (PP.escena, las ordena PanelPC.exe): "abrir" = del inicio a una app, "cerrar" = de una app al
   inicio. Al abrir, el inicio se agranda y se va, y la app crece hasta su lugar; al cerrar, al revés.
   Mientras el programa no la muestra, la pantalla queda oculta (así nunca se ve un cuadro viejo). */
/* La raíz ocupa toda la pantalla: mientras se anima pasa a ser la referencia de lo que tiene posicionado
   adentro, y si no tuviera tamaño todo se correría de lugar. */
.pp-escena { transform-origin: 50% 46%; }
html.pp-pantalla .pp-escena { position: relative; width: 100%; height: 100%; }
.pp-escena.pp-oculta { opacity: 0; }
.pp-escena.pp-sale-abrir, .pp-escena.pp-sale-cerrar { opacity: 0; transition: opacity .18s ease-in, transform .18s ease-in; pointer-events: none; }
.pp-escena.pp-sale-abrir { transform: scale(1.04); }
.pp-escena.pp-sale-cerrar { transform: scale(.955); }
/* las entradas no dejan nada puesto al terminar ("backwards"); las salidas sí sostienen su estado final */
.pp-escena.pp-llega-abrir { animation: pp-llega-abrir .36s cubic-bezier(.2, .75, .25, 1) backwards; }
.pp-escena.pp-llega-cerrar { animation: pp-llega-cerrar .36s cubic-bezier(.2, .75, .25, 1) backwards; }
@keyframes pp-llega-abrir { from { opacity: 0; transform: scale(.955); } }
@keyframes pp-llega-cerrar { from { opacity: 0; transform: scale(1.04); } }

/* Hojas de pestañas (PP.pestanas): la de antes se desliza hacia un lado mientras la nueva entra del otro.
   Las hojas tienen que estar una encima de la otra (position: absolute) para cruzarse. */
.pp-entra-der { animation: pp-entra-der .34s cubic-bezier(.2, .75, .25, 1) backwards; }
.pp-entra-izq { animation: pp-entra-izq .34s cubic-bezier(.2, .75, .25, 1) backwards; }
.pp-sale-der { animation: pp-sale-der .2s ease-in both; pointer-events: none; }
.pp-sale-izq { animation: pp-sale-izq .2s ease-in both; pointer-events: none; }
@keyframes pp-entra-der { from { opacity: 0; transform: translateX(44px); } }
@keyframes pp-entra-izq { from { opacity: 0; transform: translateX(-44px); } }
@keyframes pp-sale-der { to { opacity: 0; transform: translateX(36px); } }
@keyframes pp-sale-izq { to { opacity: 0; transform: translateX(-36px); } }

/* Capas encima de la pantalla (PP.capa): el velo aparece y la hoja sube un poco; al cerrar, se desvanece */
.pp-capa-entra { animation: pp-entra .26s ease-out backwards; }
.pp-capa-entra > * { animation: pp-capa-hoja .34s cubic-bezier(.2, .75, .25, 1) backwards; }
.pp-capa-sale { animation: pp-capa-sale .2s ease-in both; pointer-events: none; }
@keyframes pp-capa-hoja { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes pp-capa-sale { to { opacity: 0; } }

/* meneo de "no" (algo que todavía no se puede; lo pone PP.negar). Mueve con la propiedad "translate", no con "transform":
   así no le pisa al elemento el transform que ya tenga (una escala, una posición) */
.pp-no { animation: pp-no .32s ease-in-out; }
@keyframes pp-no { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }