/* ══════════════════════════════════════════════════════════════════════
   Simulación de escritorio · ERGO
   Dirección: oficina de gerente a las 7:40 de la mañana. Madera oscura,
   luz de lámpara, papel crema. Los documentos se leen como papel; el
   computador y el teléfono como pantallas de verdad, cada uno con su luz.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --madera-1: #4a2e1c; --madera-2: #2f1c11; --madera-3: #6b442a;
  --pared: #17120f; --pared-2: #221a15;
  --luz: #f2b45c; --luz-2: rgba(242, 180, 92, .18);
  --papel: #f3ead6; --papel-2: #e9dcc2; --papel-sombra: rgba(20, 10, 0, .45);
  --tinta: #1e1a16; --tinta-2: #4b433b; --tinta-3: #7a7067;
  --azul-tinta: #1f3a5f; --rojo-lapiz: #b8432e; --verde: #2f7d5b; --ambar: #d08a1f;
  --ui-fondo: #f6f4ef; --ui-borde: #d9d3c7; --ui-texto: #1c1a17; --ui-texto-2: #5c564d; --ui-acento: #c85a1e; --ui-acento-2: #1f5f8b;
  --cuaderno: #f8f3e6; --cuaderno-linea: #e2d7bf;
  --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', monospace; --mano: 'Caveat', cursive;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--pared); color: var(--ui-texto); font-family: var(--sans); font-size: 15px; line-height: 1.45; overflow: hidden; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.pantalla { position: fixed; inset: 0; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn-principal { background: var(--ui-acento); color: #fff; border: 0; border-radius: 10px; padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(200, 90, 30, .28); transition: transform .12s, box-shadow .12s; }
.btn-principal:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(200, 90, 30, .34); }
.btn-principal:disabled { opacity: .5; cursor: default; transform: none; }
.btn-sec { background: transparent; color: var(--ui-texto-2); border: 1px solid var(--ui-borde); border-radius: 10px; padding: 12px 18px; font-size: 14px; cursor: pointer; }
.btn-tiempo { font-weight: 400; opacity: .8; margin-left: 6px; font-family: var(--mono); font-size: 13px; }

/* ── Intro ───────────────────────────────────────────────────────────── */
.intro { overflow: auto; background:
  radial-gradient(1200px 600px at 20% -10%, rgba(242, 180, 92, .16), transparent 60%),
  radial-gradient(800px 500px at 100% 100%, rgba(31, 95, 139, .14), transparent 60%),
  var(--pared); color: var(--papel); }
.intro-marco { max-width: 1080px; margin: 0 auto; padding: 64px 40px 80px; animation: subir .8s ease both; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.intro-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--luz); opacity: .9; }
.intro-titulo { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 76px); line-height: 1; margin: 14px 0 8px; letter-spacing: -.01em; }
.intro-sub { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--papel-2); opacity: .85; margin: 0 0 40px; max-width: 720px; }
.intro-cols { display: grid; grid-template-columns: 1.2fr .9fr; gap: 48px; align-items: start; }
.intro h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 8px; color: var(--luz); }
.intro p, .intro li { font-size: 15.5px; color: var(--papel-2); line-height: 1.55; }
.intro p { margin: 0 0 24px; }
.intro ol { padding-left: 20px; margin: 0; }
.intro li { margin-bottom: 8px; }
.intro-form { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(6px); }
.intro-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--papel-2); }
.intro-form input[type=text], .intro-form input[type=email], .intro-form input[type=password] { background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); color: var(--papel); border-radius: 8px; padding: 10px 12px; font-size: 15px; font-family: inherit; }
.intro-form input:focus { outline: 2px solid var(--luz); outline-offset: 1px; }
.intro-form .opcional { opacity: .6; }
.consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 12.5px !important; line-height: 1.45; color: var(--papel-2); }
.consent input { margin-top: 3px; accent-color: var(--ui-acento); }
.intro-nota { font-size: 12.5px !important; opacity: .7; margin: 0 !important; }

/* ── Oficina: layout ─────────────────────────────────────────────────── */
.oficina { display: grid; grid-template-columns: 1fr 440px; background: var(--pared); }
.oficina.sin-cuaderno { grid-template-columns: 1fr 0; }
.escena { position: relative; overflow: hidden; container-type: size; background: var(--pared); user-select: none; }
.pared { position: absolute; inset: 0; background:
  radial-gradient(60cqw 46cqh at 66% 24%, var(--luz-2), transparent 70%),
  linear-gradient(180deg, var(--pared-2) 0%, var(--pared) 60%); }
.ventana { position: absolute; left: 6cqw; top: 6cqh; width: 22cqw; height: 34cqh; border: 1.2cqw solid #0d0a08; background:
  linear-gradient(180deg, #2d4a63 0%, #4f6d84 55%, #8a7a62 100%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), 0 0 60px rgba(120, 150, 180, .08); opacity: .85; }
.ventana span { position: absolute; background: #0d0a08; }
.ventana span:first-child { left: 50%; top: 0; bottom: 0; width: .8cqw; transform: translateX(-50%); }
.ventana span:last-child { top: 50%; left: 0; right: 0; height: .8cqw; transform: translateY(-50%); }
.lampara-luz { position: absolute; right: 4cqw; top: 22cqh; width: 46cqw; height: 70cqh; background: radial-gradient(closest-side at 70% 20%, rgba(242, 180, 92, .28), rgba(242, 180, 92, .06) 60%, transparent 75%); pointer-events: none; mix-blend-mode: screen; }
.mesa { position: absolute; left: -4cqw; right: -4cqw; bottom: -2cqh; height: 58cqh; transform: perspective(900px) rotateX(8deg); transform-origin: bottom; border-radius: 1.5cqw 1.5cqw 0 0;
  background:
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .09) 0 .3cqw, transparent .3cqw 1.6cqw),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, .035) 0 .15cqw, transparent .15cqw 3.2cqw),
    radial-gradient(80cqw 40cqh at 60% 0%, rgba(242, 180, 92, .22), transparent 70%),
    linear-gradient(180deg, var(--madera-3) 0%, var(--madera-1) 40%, var(--madera-2) 100%);
  box-shadow: 0 -2cqh 6cqh rgba(0, 0, 0, .55), inset 0 .4cqh 0 rgba(255, 255, 255, .08); }

/* objetos sobre la mesa */
.objeto { position: absolute; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s; }
.objeto:hover, .objeto:focus-visible { transform: translateY(-.8cqh) scale(1.015); filter: brightness(1.06); outline: none; }
.objeto .etiqueta { position: absolute; left: 50%; bottom: -3.4cqh; transform: translate(-50%, 4px); background: rgba(20, 14, 10, .9); color: var(--papel); font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; opacity: 0; transition: opacity .2s, transform .2s; white-space: nowrap; pointer-events: none; border: 1px solid rgba(242, 180, 92, .35); }
.objeto:hover .etiqueta, .objeto:focus-visible .etiqueta { opacity: 1; transform: translate(-50%, 0); }
.objeto.visto::after { content: ''; position: absolute; right: -.6cqw; top: -.6cqw; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 .25cqw rgba(47, 125, 91, .35); }

/* monitor */
.monitor { left: 34cqw; top: 15cqh; width: 36cqw; height: 44cqh; }
.monitor-pantalla { width: 100%; height: 76%; background: #0b0d10; border: .9cqw solid #1b1d21; border-bottom-width: 1.4cqw; border-radius: 1cqw; overflow: hidden; box-shadow: 0 0 0 .2cqw #2a2d33, 0 2cqh 5cqh rgba(0, 0, 0, .6), 0 0 6cqw rgba(60, 120, 180, .15); position: relative; }
.os-fondo { position: absolute; inset: 0; background: radial-gradient(60% 80% at 30% 20%, #1e3a52, #0b1420 70%); color: #dfe8ef; padding: 2cqh 2cqw; }
.os-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 40%); pointer-events: none; }
.os-reloj { font-family: var(--mono); font-size: 3.4cqw; font-weight: 500; letter-spacing: .02em; line-height: 1; }
.os-fecha { font-family: var(--mono); font-size: 1.1cqw; opacity: .7; margin-top: .6cqh; text-transform: uppercase; letter-spacing: .12em; }
.os-iconos { position: absolute; left: 2cqw; bottom: 2cqh; display: flex; gap: 1.2cqw; }
.os-iconos i { width: 2.6cqw; height: 2.6cqw; border-radius: .5cqw; background: linear-gradient(160deg, #e9c46a, #c9822b); position: relative; }
.os-iconos i:nth-child(2) { background: linear-gradient(160deg, #6fb1d8, #2c6e9c); }
.os-iconos i:nth-child(3) { background: linear-gradient(160deg, #9ad0a6, #3b8f5a); }
.os-iconos i.mail { background: linear-gradient(160deg, #f0f0f0, #c8ccd2); }
.os-iconos b { position: absolute; right: -.5cqw; top: -.5cqw; background: #d03b2f; color: #fff; font-size: .9cqw; min-width: 1.4cqw; height: 1.4cqw; border-radius: .7cqw; display: grid; place-items: center; font-family: var(--mono); }
.monitor-cuello { width: 6cqw; height: 9%; margin: 0 auto; background: linear-gradient(90deg, #15171a, #2c2f35, #15171a); }
.monitor-base { width: 18cqw; height: 6%; margin: 0 auto; background: linear-gradient(180deg, #2a2d33, #131518); border-radius: 50% / 100% 100% 0 0; box-shadow: 0 1cqh 2cqh rgba(0, 0, 0, .5); }
.teclado { position: absolute; left: 38cqw; top: 66cqh; width: 28cqw; height: 6.5cqh; background: linear-gradient(180deg, #2b2e33, #1a1c20); border-radius: .6cqw; box-shadow: 0 1cqh 2cqh rgba(0, 0, 0, .5); display: grid; grid-template-columns: repeat(12, 1fr); gap: .35cqw; padding: .6cqw; transform: perspective(600px) rotateX(30deg); }
.teclado i { background: #3a3e45; border-radius: .25cqw; box-shadow: inset 0 -.15cqw 0 #1d1f23; }
.mouse { position: absolute; left: 68.5cqw; top: 66.5cqh; width: 3.4cqw; height: 5.2cqh; background: linear-gradient(180deg, #33363c, #1c1e22); border-radius: 50% 50% 45% 45%; box-shadow: 0 .8cqh 1.6cqh rgba(0, 0, 0, .5); }

/* papeles */
.papeles { left: 7cqw; top: 54cqh; width: 24cqw; height: 34cqh; }
.hoja { position: absolute; background: var(--papel); box-shadow: 0 .6cqh 1.8cqh var(--papel-sombra); border-radius: .2cqw; }
.hoja .lineas { position: absolute; left: 12%; right: 12%; top: 18%; height: 60%; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 .18cqh, transparent .18cqh 1.3cqh); opacity: .55; }
.hoja .sello { position: absolute; right: 14%; top: 10%; width: 4cqw; height: 4cqw; border: .25cqw solid rgba(184, 67, 46, .55); border-radius: 50%; transform: rotate(-12deg); }
.hoja.h3 { left: 6cqw; top: 6cqh; width: 15cqw; height: 20cqh; transform: rotate(9deg); background: var(--papel-2); }
.hoja.h2 { left: 2.5cqw; top: 4cqh; width: 15cqw; height: 20cqh; transform: rotate(-6deg); }
.hoja.h1 { left: 4cqw; top: 2cqh; width: 15cqw; height: 20cqh; transform: rotate(2deg); }
.nota-manuscrita { position: absolute; left: 14cqw; top: 15cqh; width: 8.5cqw; height: 9cqh; background: #fbf5dc; transform: rotate(-14deg); box-shadow: 0 .5cqh 1.2cqh var(--papel-sombra); font-family: var(--mano); color: var(--azul-tinta); font-size: 1.15cqw; padding: .8cqw; line-height: 1.2; }
.postit { position: absolute; left: 1cqw; top: 17cqh; width: 6.5cqw; height: 6.5cqw; background: #f6e27a; transform: rotate(7deg); box-shadow: 0 .4cqh 1cqh rgba(0, 0, 0, .35); font-family: var(--mano); color: #4a3a10; font-size: 1.1cqw; padding: .6cqw; line-height: 1.15; }

/* teléfono */
.telefono { left: 76cqw; top: 58cqh; width: 8.2cqw; height: 30cqh; }
.tel-pantalla { width: 100%; height: 100%; border-radius: 1.2cqw; background: #08090c; border: .45cqw solid #1a1c22; box-shadow: 0 1.2cqh 2.6cqh rgba(0, 0, 0, .6), inset 0 0 0 .1cqw #34373d; position: relative; overflow: hidden; transform: rotate(-8deg); }
.tel-pantalla::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 0%, #2c2a3f, #0c0c12 70%); }
.tel-hora { position: relative; text-align: center; color: #e8e8ee; font-family: var(--mono); font-size: 1.6cqw; margin-top: 3cqh; }
.tel-notif { position: relative; margin: 1cqh .6cqw 0; background: rgba(255, 255, 255, .12); color: #eee; border-radius: .5cqw; padding: .5cqw; font-size: .85cqw; font-family: var(--sans); text-align: center; }
.tel-notif b { color: #ffd27a; }

/* extras */
.calendario { position: absolute; left: 78cqw; top: 38cqh; width: 7.5cqw; height: 12cqh; background: var(--papel); border-radius: .3cqw; box-shadow: 0 .8cqh 1.6cqh rgba(0, 0, 0, .5); overflow: hidden; text-align: center; transform: perspective(500px) rotateY(-14deg); }
.cal-mes { background: var(--rojo-lapiz); color: #fff; font-family: var(--mono); font-size: .9cqw; letter-spacing: .2em; padding: .3cqh; }
.cal-dia { font-family: var(--serif); font-size: 3.4cqw; line-height: 1.1; color: var(--tinta); }
.cal-nota { font-family: var(--mano); font-size: .95cqw; color: var(--rojo-lapiz); line-height: 1.1; }
.taza { position: absolute; left: 73cqw; top: 80cqh; width: 5cqw; height: 6cqh; background: linear-gradient(180deg, #efe8dc, #cfc4b2); border-radius: .4cqw .4cqw 1.2cqw 1.2cqw; box-shadow: 0 1cqh 2cqh rgba(0, 0, 0, .5), inset 0 .6cqh 0 rgba(0, 0, 0, .25); }
.taza .asa { position: absolute; right: -1.6cqw; top: 1cqh; width: 1.8cqw; height: 3.2cqh; border: .45cqw solid #d9cfbf; border-left: 0; border-radius: 0 1cqw 1cqw 0; }
.vapor { position: absolute; left: 30%; top: -3cqh; display: flex; gap: .8cqw; }
.vapor i { width: .35cqw; height: 2.6cqh; border-radius: 1cqw; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .35)); animation: vapor 2.6s ease-in-out infinite; }
.vapor i:last-child { animation-delay: 1.2s; }
@keyframes vapor { 0% { transform: translateY(0) scaleY(.6); opacity: 0; } 50% { opacity: .8; } 100% { transform: translateY(-2cqh) scaleY(1.2); opacity: 0; } }
.lapiz { position: absolute; left: 30cqw; top: 87cqh; width: 11cqw; height: .8cqh; background: linear-gradient(90deg, #d9b26a 0 4%, #f2c94c 4% 92%, #e8a0a0 92%); border-radius: .3cqw; transform: rotate(-4deg); box-shadow: 0 .4cqh .8cqh rgba(0, 0, 0, .5); }
.lampara { position: absolute; right: 2cqw; top: 22cqh; width: 14cqw; height: 40cqh; pointer-events: none; }
.lampara .base { position: absolute; right: 1cqw; bottom: 0; width: 8cqw; height: 2.2cqh; background: linear-gradient(180deg, #2f6b52, #1b4032); border-radius: 50%; box-shadow: 0 .8cqh 1.6cqh rgba(0, 0, 0, .6); }
.lampara .brazo { position: absolute; right: 4.6cqw; bottom: 1.5cqh; width: .7cqw; height: 30cqh; background: linear-gradient(90deg, #a98a4a, #d7b364, #a98a4a); }
.lampara .cabeza { position: absolute; right: 1.2cqw; top: 3cqh; width: 12cqw; height: 7cqh; background: linear-gradient(180deg, #2f6b52, #1e4a38); border-radius: 1cqw 1cqw 3cqw 3cqw / 1cqw 1cqw 2cqh 2cqh; box-shadow: 0 2cqh 5cqw rgba(242, 180, 92, .55), inset 0 -1.2cqh 0 rgba(242, 180, 92, .6); }

/* ── Cuaderno ────────────────────────────────────────────────────────── */
.cuaderno { display: flex; flex-direction: column; background: var(--cuaderno); border-left: 1px solid #d3c7ad; box-shadow: -20px 0 60px rgba(0, 0, 0, .45); position: relative; overflow: hidden; }
.cuaderno::before { content: ''; position: absolute; left: 34px; top: 0; bottom: 0; width: 1px; background: rgba(184, 67, 46, .35); pointer-events: none; }
.cuaderno-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 12px 48px; border-bottom: 1px solid var(--cuaderno-linea); }
.cuaderno-titulo { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--tinta); }
.cuaderno-sub { font-size: 12px; color: var(--tinta-3); margin-top: 2px; }
.reloj { font-family: var(--mono); font-size: 20px; color: var(--tinta); background: #fff; border: 1px solid var(--cuaderno-linea); border-radius: 8px; padding: 6px 10px; letter-spacing: .04em; }
.reloj.poco { color: var(--rojo-lapiz); border-color: var(--rojo-lapiz); animation: latir 1.2s infinite; }
@keyframes latir { 50% { background: #fff3ef; } }
.cuaderno-tabs { display: flex; gap: 4px; padding: 10px 14px 0 44px; border-bottom: 1px solid var(--cuaderno-linea); }
.cuaderno-tabs button { flex: 1; background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 8px 4px; font-size: 12px; color: var(--tinta-3); cursor: pointer; font-family: var(--mono); }
.cuaderno-tabs button.activa { color: var(--tinta); border-bottom-color: var(--ui-acento); }
.cuaderno-tabs button.lista { color: var(--verde); }
.cuaderno-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 20px 48px; background-image: repeating-linear-gradient(180deg, transparent 0 29px, var(--cuaderno-linea) 29px 30px); background-attachment: local; }
.pregunta-titulo { font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--tinta); margin: 0 0 6px; line-height: 30px; }
.pregunta-texto { font-family: var(--serif); font-size: 16.5px; line-height: 30px; color: var(--tinta-2); margin: 0 0 12px; }
.pregunta-pista { font-size: 12px; color: var(--tinta-3); margin: 0 0 12px; font-family: var(--mono); }
.respuesta { width: 100%; min-height: 300px; resize: vertical; background: rgba(255, 255, 255, .55); border: 1px solid var(--cuaderno-linea); border-radius: 8px; padding: 12px 14px; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--tinta); }
.respuesta:focus { outline: 2px solid rgba(200, 90, 30, .45); }
.respuesta-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tinta-3); font-family: var(--mono); margin-top: 6px; }
.pregunta-nota { font-size: 12px; color: var(--tinta-3); font-style: italic; margin: 10px 0 0; line-height: 1.45; }
.cuaderno-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 14px 48px; border-top: 1px solid var(--cuaderno-linea); background: var(--cuaderno); }
.autosave { font-size: 12px; color: var(--tinta-3); font-family: var(--mono); }
.autosave.ok { color: var(--verde); }
.cuaderno-toggle { position: absolute; right: 12px; top: 12px; z-index: 5; background: rgba(20, 14, 10, .85); color: var(--papel); border: 1px solid rgba(242, 180, 92, .4); border-radius: 8px; padding: 8px 12px; font-family: var(--mono); font-size: 12px; cursor: pointer; display: none; }
.oficina.sin-cuaderno .cuaderno-toggle { display: block; }

/* ── Capas (overlays) ─────────────────────────────────────────────────── */
.capa { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; animation: aparecer .25s ease both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.capa-fondo { position: absolute; inset: 0; background: rgba(8, 6, 4, .78); backdrop-filter: blur(3px); }
.capa-cerrar { position: absolute; left: 20px; top: 16px; z-index: 3; background: rgba(20, 14, 10, .9); color: var(--papel); border: 1px solid rgba(242, 180, 92, .4); border-radius: 8px; padding: 8px 12px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.capa-cerrar:hover { border-color: var(--luz); }

/* papeles: mesa de documentos */
.mesa-papeles { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: flex-end; max-width: 1100px; padding: 40px; }
.papel-card { width: 200px; height: 260px; background: var(--papel); color: var(--tinta); border: 0; border-radius: 3px; box-shadow: 0 14px 30px rgba(0, 0, 0, .55); cursor: pointer; text-align: left; padding: 18px 16px; position: relative; overflow: hidden; transition: transform .2s; font-family: var(--serif); }
.papel-card:hover { transform: translateY(-6px) rotate(0deg) !important; }
.papel-card:nth-child(1) { transform: rotate(-3deg); } .papel-card:nth-child(2) { transform: rotate(2deg); } .papel-card:nth-child(3) { transform: rotate(-1deg); } .papel-card:nth-child(4) { transform: rotate(3deg); } .papel-card:nth-child(5) { transform: rotate(-2deg); }
.papel-card .tipo { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.papel-card .titulo { font-size: 17px; font-weight: 500; line-height: 1.2; margin: 8px 0 6px; }
.papel-card .de { font-size: 12.5px; color: var(--tinta-2); font-style: italic; }
.papel-card .preview { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 11px; color: var(--tinta-3); line-height: 1.35; max-height: 90px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); }
.papel-card.manuscrita, .papel-card.postit { font-family: var(--mano); }
.papel-card.manuscrita { background: #fbf5dc; } .papel-card.manuscrita .titulo { font-size: 22px; color: var(--azul-tinta); }
.papel-card.postit { background: #f6e27a; width: 170px; height: 170px; } .papel-card.postit .titulo { font-size: 20px; color: #4a3a10; }
.papel-card.visto::after { content: 'leído'; position: absolute; right: 10px; top: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--verde); border: 1px solid var(--verde); border-radius: 4px; padding: 2px 5px; }

/* zoom de documento */
.doc-zoom { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; justify-items: center; }
.doc-nav { background: rgba(255, 255, 255, .08); color: var(--papel); border: 1px solid rgba(255, 255, 255, .2); width: 44px; height: 44px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.doc-hoja { width: min(760px, 78vw); max-height: 90vh; overflow-y: auto; background: var(--papel); color: var(--tinta); padding: 56px 64px 64px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .05); font-family: var(--serif); font-size: 17px; line-height: 1.55; position: relative; animation: subir .3s ease both;
  background-image: radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px); background-size: 6px 6px; }
.doc-hoja.manuscrita { background: #fbf5dc; font-family: var(--mano); font-size: 26px; line-height: 1.35; color: var(--azul-tinta); background-image: repeating-linear-gradient(180deg, transparent 0 34px, rgba(31, 58, 95, .15) 34px 35px); }
.doc-hoja.postit { background: #f6e27a; width: 420px; font-family: var(--mano); font-size: 28px; color: #4a3a10; padding: 40px; }
.doc-hoja .doc-tipo { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.doc-hoja h2 { font-weight: 500; font-size: 30px; line-height: 1.15; margin: 8px 0 6px; }
.doc-hoja .doc-meta { font-size: 13.5px; color: var(--tinta-2); font-style: italic; margin-bottom: 26px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .15); font-family: var(--serif); }
.doc-hoja.manuscrita h2, .doc-hoja.postit h2 { font-family: inherit; font-size: 30px; }
.doc-hoja p { margin: 0 0 16px; }
.doc-hoja .nota { font-family: var(--mano); color: var(--rojo-lapiz); font-size: 22px; transform: rotate(-1.5deg); display: inline-block; margin-top: 8px; }
.doc-hoja .firma { font-family: var(--mano); font-size: 26px; color: var(--azul-tinta); margin-top: 24px; }
.doc-hoja table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 18px; font-family: var(--mono); }
.doc-hoja th, .doc-hoja td { border-bottom: 1px solid rgba(0, 0, 0, .18); padding: 6px 8px; text-align: right; }
.doc-hoja th:first-child, .doc-hoja td:first-child { text-align: left; font-family: var(--serif); font-size: 15px; }
.doc-hoja th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 2px solid rgba(0, 0, 0, .35); }
.doc-hoja .manuscrito { white-space: pre-line; }

/* ── Teléfono ────────────────────────────────────────────────────────── */
.tel-marco { position: relative; z-index: 2; width: 400px; height: min(820px, 92vh); background: #0b0c10; border-radius: 44px; border: 10px solid #1c1e24; box-shadow: 0 40px 100px rgba(0, 0, 0, .8), inset 0 0 0 2px #34373d; overflow: hidden; display: flex; flex-direction: column; animation: subir .3s ease both; }
.tel-barra { display: flex; justify-content: space-between; padding: 14px 24px 6px; color: #e8e8ee; font-family: var(--mono); font-size: 13px; }
.tel-app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #101217; color: #e6e6ea; }
.tel-app-head { padding: 10px 18px 12px; border-bottom: 1px solid #22252d; display: flex; align-items: center; gap: 10px; }
.tel-app-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tel-app-head button { background: none; border: 0; color: #8fb7e8; font-size: 15px; cursor: pointer; padding: 0; }
.tel-lista { flex: 1; overflow-y: auto; }
.tel-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #1c1f26; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; width: 100%; text-align: left; }
.tel-item:hover { background: #171a21; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 500; color: #111; background: linear-gradient(150deg, #f2c94c, #c9822b); font-size: 14px; }
.tel-item .nombre { font-weight: 600; font-size: 15px; }
.tel-item .cargo { font-size: 12px; color: #9a9fa9; }
.tel-item .preview { font-size: 13px; color: #b6bac3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tel-item .hora { font-size: 11px; color: #8a8f99; font-family: var(--mono); align-self: start; }
.tel-item .badge { background: #3b9d5a; color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 7px; justify-self: end; font-family: var(--mono); }
.tel-item.visto .badge { display: none; }
.tel-chat { flex: 1; overflow-y: auto; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 8px; background: radial-gradient(60% 40% at 50% 0%, #1a1e27, #101217 80%); }
.burbuja { max-width: 84%; background: #1e2330; color: #e9e9ee; border-radius: 14px 14px 14px 4px; padding: 9px 12px; font-size: 14.5px; line-height: 1.4; align-self: flex-start; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.burbuja .hora { display: block; font-size: 10.5px; color: #8a8f99; margin-top: 4px; font-family: var(--mono); text-align: right; }
.tel-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #22252d; }
.tel-input input { flex: 1; background: #1a1d25; border: 1px solid #2a2e38; color: #fff; border-radius: 18px; padding: 8px 14px; font-family: inherit; font-size: 14px; }
.tel-input span { font-size: 11px; color: #6f7480; align-self: center; font-family: var(--mono); }

/* ── Computador ──────────────────────────────────────────────────────── */
.pc { position: relative; z-index: 2; width: min(1240px, 94vw); height: min(820px, 84vh); margin-top: 28px; background: var(--ui-fondo); border-radius: 14px; box-shadow: 0 40px 100px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; display: flex; flex-direction: column; animation: subir .3s ease both; color: var(--ui-texto); }
.pc-barra { height: 40px; background: #e9e5dc; border-bottom: 1px solid var(--ui-borde); display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 0 12px; }
.pc-luces { display: flex; gap: 7px; } .pc-luces i { width: 12px; height: 12px; border-radius: 50%; background: #d9d3c7; } .pc-luces i:first-child { background: #e0705a; } .pc-luces i:nth-child(2) { background: #e6b64c; } .pc-luces i:last-child { background: #6cc16f; }
.pc-titulo { text-align: center; font-size: 13px; color: var(--ui-texto-2); font-family: var(--mono); }
.pc-reloj { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ui-texto-2); }
.pc-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr; }
.pc-lateral { background: #efece5; border-right: 1px solid var(--ui-borde); padding: 14px 10px; overflow-y: auto; }
.pc-lateral .grupo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-texto-2); margin: 10px 8px 6px; }
.pc-lateral button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; color: var(--ui-texto); cursor: pointer; text-align: left; }
.pc-lateral button:hover { background: #e5e0d5; }
.pc-lateral button.activa { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-weight: 600; }
.pc-lateral .ico { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.ico.bi { background: linear-gradient(150deg, #f2c94c, #c9822b); } .ico.crm { background: linear-gradient(150deg, #6fb1d8, #2c6e9c); } .ico.erp { background: linear-gradient(150deg, #9ad0a6, #3b8f5a); } .ico.ppto { background: linear-gradient(150deg, #cdb4e8, #7b5aa6); } .ico.mail { background: linear-gradient(150deg, #fff, #c8ccd2); border: 1px solid #b9bcc2; }
.pc-lateral .badge { margin-left: auto; background: #d03b2f; color: #fff; font-size: 10.5px; border-radius: 9px; padding: 1px 6px; font-family: var(--mono); }
.pc-main { overflow-y: auto; padding: 22px 28px 40px; }
.pc-main h1 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 4px; }
.pc-main .ruta { font-family: var(--mono); font-size: 11.5px; color: var(--ui-texto-2); margin-bottom: 18px; }
.archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.archivo { background: #fff; border: 1px solid var(--ui-borde); border-radius: 10px; padding: 14px; cursor: pointer; text-align: left; display: flex; gap: 12px; align-items: flex-start; transition: box-shadow .15s, transform .15s; }
.archivo:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.archivo .ico { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.archivo .nombre { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.archivo .meta { font-size: 11px; color: var(--ui-texto-2); font-family: var(--mono); margin-top: 4px; }
.archivo.visto .meta::after { content: ' · abierto'; color: var(--verde); }
.vista-archivo h1 { font-size: 22px; }
.vista-archivo h2 { font-family: var(--sans); font-size: 14px; font-weight: 600; margin: 22px 0 8px; color: var(--ui-texto); }
.vista-archivo p { font-size: 14px; color: var(--ui-texto-2); margin: 8px 0 14px; max-width: 900px; }
.vista-archivo table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid var(--ui-borde); border-radius: 8px; overflow: hidden; }
.vista-archivo th, .vista-archivo td { padding: 8px 10px; border-bottom: 1px solid #ebe7de; text-align: right; font-family: var(--mono); font-size: 12.5px; }
.vista-archivo th:first-child, .vista-archivo td:first-child { text-align: left; font-family: var(--sans); font-size: 13px; }
.vista-archivo th { background: #f1ede4; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-texto-2); }
.vista-archivo tr:hover td { background: #fbf9f4; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 10px; }
.kpi { background: #fff; border: 1px solid var(--ui-borde); border-radius: 10px; padding: 14px 16px; border-top: 4px solid var(--ui-acento-2); }
.kpi .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-texto-2); font-family: var(--mono); }
.kpi .v { font-family: var(--serif); font-size: 28px; font-weight: 500; margin: 4px 0 2px; }
.kpi .s { font-size: 12px; color: var(--ui-texto-2); }
.grafico { background: #fff; border: 1px solid var(--ui-borde); border-radius: 10px; padding: 14px 16px 8px; margin: 10px 0 14px; }
.grafico .titulo { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.grafico svg { width: 100%; height: auto; display: block; font-family: var(--mono); }
.grafico .leyenda { display: flex; gap: 16px; font-size: 11.5px; color: var(--ui-texto-2); margin-top: 4px; }
.grafico .leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* correo */
.mail-lista { display: flex; flex-direction: column; gap: 2px; }
.mail-item { display: grid; grid-template-columns: 220px 1fr auto; gap: 14px; align-items: baseline; padding: 11px 14px; background: #fff; border: 1px solid var(--ui-borde); border-radius: 8px; cursor: pointer; text-align: left; font-size: 13.5px; }
.mail-item:hover { background: #fbf9f4; }
.mail-item.noleido .de, .mail-item.noleido .asunto { font-weight: 600; }
.mail-item.noleido .de::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-acento-2); margin-right: 8px; vertical-align: 1px; }
.mail-item.visto .de::before { display: none; }
.mail-item .de { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item .asunto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item .fecha { font-family: var(--mono); font-size: 11.5px; color: var(--ui-texto-2); white-space: nowrap; }
.mail-vista { background: #fff; border: 1px solid var(--ui-borde); border-radius: 10px; padding: 26px 30px; max-width: 860px; }
.mail-vista h1 { font-family: var(--serif); font-size: 24px; margin: 0 0 10px; }
.mail-vista .cab { font-size: 13px; color: var(--ui-texto-2); border-bottom: 1px solid var(--ui-borde); padding-bottom: 12px; margin-bottom: 18px; line-height: 1.6; }
.mail-vista .cab b { color: var(--ui-texto); }
.mail-vista p { font-size: 15px; line-height: 1.6; color: var(--ui-texto); white-space: pre-line; margin: 0 0 14px; }
.volver { background: none; border: 0; color: var(--ui-acento-2); font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 14px; font-family: var(--mono); }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal .modal-card { position: relative; z-index: 2; background: var(--cuaderno); color: var(--tinta); border-radius: 14px; padding: 26px 28px; width: 460px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.modal h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0 0 10px; }
.modal p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ── Fin ─────────────────────────────────────────────────────────────── */
.fin { background: var(--pared); color: var(--papel); display: grid; place-items: center; }
.fin-marco { max-width: 620px; padding: 40px; animation: subir .8s ease both; }
.fin h1 { font-family: var(--serif); font-weight: 300; font-size: 64px; margin: 10px 0 12px; }
.fin p { font-size: 16px; color: var(--papel-2); line-height: 1.55; }
.fin-codigo code { font-family: var(--mono); background: rgba(255, 255, 255, .08); padding: 4px 10px; border-radius: 6px; color: var(--luz); }

/* ── Informe del evaluador ───────────────────────────────────────────── */
.informe { overflow: auto; background: var(--ui-fondo); color: var(--ui-texto); }
.informe-marco { max-width: 1080px; margin: 0 auto; padding: 40px 32px 80px; }
.informe h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; margin: 0 0 4px; }
.informe h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 30px 0 10px; }
.informe h3 { font-size: 15px; margin: 18px 0 8px; }
.informe .sub { color: var(--ui-texto-2); font-size: 14px; margin-bottom: 20px; }
.informe .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.informe .tarjeta { background: #fff; border: 1px solid var(--ui-borde); border-radius: 10px; padding: 14px 16px; }
.informe .tarjeta .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-texto-2); font-family: var(--mono); }
.informe .tarjeta .v { font-family: var(--serif); font-size: 30px; font-weight: 500; margin-top: 4px; }
.informe .tarjeta .s { font-size: 12px; color: var(--ui-texto-2); }
.informe table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid var(--ui-borde); border-radius: 8px; overflow: hidden; margin: 8px 0 16px; }
.informe th, .informe td { padding: 8px 10px; border-bottom: 1px solid #ebe7de; text-align: left; vertical-align: top; }
.informe th { background: #f1ede4; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-texto-2); font-family: var(--mono); }
.informe .ok { color: var(--verde); font-weight: 600; } .informe .no { color: var(--rojo-lapiz); font-weight: 600; } .informe .neutro { color: var(--ui-texto-2); }
.informe .respuesta-texto { background: #fff; border: 1px solid var(--ui-borde); border-radius: 8px; padding: 14px 16px; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; }
.informe .barra { height: 8px; background: #e8e3d8; border-radius: 4px; overflow: hidden; } .informe .barra i { display: block; height: 100%; background: var(--ui-acento-2); }
.informe .acciones { display: flex; gap: 10px; margin: 14px 0 8px; flex-wrap: wrap; }
.informe .llm { background: #fff; border-left: 4px solid var(--ambar); border-radius: 8px; padding: 12px 16px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.informe .timeline { font-family: var(--mono); font-size: 12px; line-height: 1.7; background: #fff; border: 1px solid var(--ui-borde); border-radius: 8px; padding: 12px 16px; max-height: 360px; overflow: auto; }
.informe-clave { max-width: 420px; margin: 120px auto; text-align: center; }
.informe-clave input { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid var(--ui-borde); border-radius: 8px; margin: 12px 0; font-family: inherit; }
@media print { .informe .acciones, .capa-cerrar { display: none; } body { overflow: visible; } .pantalla { position: static; } }

/* ── Pantalla chica ──────────────────────────────────────────────────── */
.aviso-chico { display: none; }
@media (max-width: 1000px) {
  .oficina { grid-template-columns: 1fr; } .cuaderno { display: none; }
  .aviso-chico { display: grid; place-items: center; position: fixed; inset: 0; z-index: 99; background: var(--pared); color: var(--papel); padding: 40px; text-align: center; font-family: var(--serif); font-size: 20px; }
}

.intro-form input:disabled { opacity: .7; }