/* Docuneria · estilo. Un acento coral, fondo cálido, tipografía humanista, nada de sombras. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/static/fuentes/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fuentes/fraunces-latin-wght-normal.woff2") format("woff2"); }
:root {
  --fondo: #FBF8F4; --papel: #FFFDFB; --tinta: #2B2119; --tinta-suave: #66564A; --linea: #EADFD6;
  --coral: #E0553B; --coral-oscuro: #C4432B; --coral-lavado: #FBE9E3; --coral-tinta: #8E2F1D;
  --verde: #3D7A4A; --verde-lavado: #E7F1E8; --ambar: #A9640E; --ambar-lavado: #FBF0DC;
  --neutro: #F1EAE3; --halo-medio: rgba(251,233,227,.55); --halo-fuera: rgba(251,233,227,0); --sombra-degradado: rgba(251,248,244,0);
  color-scheme: light;
  --fuente: "Figtree", "Avenir Next", "Segoe UI", "Helvetica Neue", -apple-system, system-ui, sans-serif;
  --fuente-voz: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
}
html[data-tema="oscuro"], html[data-tema="auto"].sistema-oscuro {
  --fondo: #1B1714; --papel: #241F1B; --tinta: #F2EAE2; --tinta-suave: #B5A89C; --linea: #3A322C;
  --coral: #E8674F; --coral-oscuro: #F07A64; --coral-lavado: #3B2520; --coral-tinta: #F3A392;
  --verde: #8CCB97; --verde-lavado: #22312A; --ambar: #E3B46B; --ambar-lavado: #3A2E1A;
  --neutro: #2E2722; --halo-medio: rgba(59,37,32,.6); --halo-fuera: rgba(59,37,32,0); --sombra-degradado: rgba(27,23,20,0);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--fondo); }
body { margin: 0; font: 17px/1.6 var(--fuente); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; } body > .pie-app { margin-top: auto; }
a { color: var(--coral-tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--coral-lavado); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- barra ---- */
header.barra { display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--linea); background: var(--fondo); }
header.barra .marca { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 19px; color: var(--tinta); text-decoration: none; letter-spacing: .01em; }
header.barra .marca .logo { width: 28px; height: 28px; display: block; }
header.barra .entorno { font-size: 13px; color: var(--ambar); background: var(--ambar-lavado); padding: 1px 8px; border-radius: 10px; margin-left: 4px; }
header.barra nav a { color: var(--tinta-suave); text-decoration: none; margin-right: 22px; padding: 4px 0; border-bottom: 2px solid transparent; }
header.barra nav a.activo { color: var(--tinta); }
header.barra nav a:hover { color: var(--tinta); }
header.barra .derecha { margin-left: auto; color: var(--tinta-suave); font-size: 15px; }

main { max-width: none; margin: 0; padding: 32px clamp(20px, 4vw, 64px) 60px; }
main > h1:first-child, main > .fila:first-child { margin-top: 4px; }
.pie-app { text-align: center; font-size: 13px; color: var(--tinta-suave); padding: 18px 20px 28px; border-top: 1px solid var(--linea); margin-top: 40px; }
main.estrecho { max-width: 440px; padding-top: 72px; }
h1 { font-family: var(--fuente-voz); font-size: 34px; font-weight: 500; letter-spacing: -.015em; margin: 0 0 18px; font-variation-settings: "SOFT" 30; }
h2 { font-size: 20px; font-weight: 600; margin: 28px 0 10px; }
h3 { font-size: 17px; font-weight: 600; margin: 18px 0 8px; }
p { margin: 0 0 10px; }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: 15px; }
.gris { color: var(--tinta-suave); }

/* ---- bloques ---- */
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 22px 24px; margin-bottom: 18px; }
form.panel { max-width: 1100px; } form.panel.ancho { max-width: none; }
.fila { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
@media (max-width: 820px) { .dos { grid-template-columns: 1fr; } }
.lateral { position: sticky; top: 20px; }

/* ---- formularios ---- */
label { display: block; font-size: 15px; color: var(--tinta-suave); margin: 12px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], textarea, select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; color: var(--tinta); background: var(--papel); }
input:focus, textarea:focus, select:focus { border-color: var(--coral); outline: none; box-shadow: 0 0 0 3px var(--coral-lavado); }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
textarea.grande { min-height: 220px; }
input[type=checkbox] { accent-color: var(--coral); margin-right: 7px; }
button, .boton { display: inline-block; padding: 9px 16px; border: 1px solid var(--coral); background: var(--coral); color: #fff; border-radius: 8px;
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .15s; }
button:hover, .boton:hover { background: var(--coral-oscuro); border-color: var(--coral-oscuro); }
button.secundario, .boton.secundario { background: transparent; color: var(--coral-tinta); border-color: var(--linea); }
button.secundario:hover, .boton.secundario:hover { background: var(--coral-lavado); border-color: var(--coral-lavado); }
button.discreto, .boton.discreto { background: transparent; border-color: transparent; color: var(--tinta-suave); padding: 5px 9px; }
button.discreto:hover, .boton.discreto:hover { background: var(--coral-lavado); color: var(--tinta); border-color: transparent; }
button.grande { padding: 13px 26px; font-size: 18px; }
button:disabled { opacity: .5; cursor: default; }
.acciones { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; align-items: center; }

/* ---- mensajes ---- */
.aviso, .error, .ok { padding: 10px 14px; border-radius: 8px; margin: 10px 0; }
.aviso { background: var(--ambar-lavado); color: var(--ambar); }
.error { background: var(--coral-lavado); color: var(--coral-tinta); }
.ok { background: var(--verde-lavado); color: var(--verde); }
.etiqueta { display: inline-block; font-size: 14px; padding: 2px 10px; border-radius: 10px; background: var(--neutro); color: var(--tinta-suave); }
.etiqueta.revision, .etiqueta.por_confirmar { background: var(--ambar-lavado); color: var(--ambar); }
.etiqueta.aprobada { background: var(--verde-lavado); color: var(--verde); }
.etiqueta.error { background: var(--coral-lavado); color: var(--coral-tinta); }
.etiqueta.generando, .etiqueta.interpretando { background: var(--coral-lavado); color: var(--coral-tinta); }

/* ---- tablas ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: 14px; color: var(--tinta-suave); font-weight: 500; }
tr.enlace { cursor: pointer; }
tr.enlace:hover td { background: var(--papel); }
.valoracion td:last-child { text-align: right; white-space: nowrap; }
.pendiente { background: var(--ambar-lavado); color: var(--ambar); padding: 0 6px; border-radius: 4px; }

/* ---- documento en revisión ---- */
.pagina-revision { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 96px); align-items: start; }
@media (max-width: 960px) { .pagina-revision { grid-template-columns: 1fr; } }
.doc { max-width: 78ch; font-size: 18px; line-height: 1.65; padding-left: 44px; }   /* 44px: margen para las herramientas */
.doc-cabecera { margin: 0 0 36px; }
.kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 6px; }
.titulo-form { margin: 0; }
input.titulo-doc { width: 100%; font: 500 38px/1.2 var(--fuente-voz); font-variation-settings: "SOFT" 30; letter-spacing: -.02em; color: var(--tinta); border: 0; border-bottom: 1.5px solid transparent; background: transparent; padding: 2px 0; border-radius: 0; }
input.titulo-doc:hover { border-bottom-color: var(--linea); }
input.titulo-doc:focus { border-bottom-color: var(--coral); box-shadow: none; outline: none; }
.apartado { padding: 34px 0 10px; }
.apartado + .apartado, #ap-presentacion ~ div .apartado { border-top: 0; }
.apartado .cabecera { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.apartado .cabecera h2 { margin: 0; font-family: var(--fuente-voz); font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.apartado .cabecera .modo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); opacity: .7; }
.elemento { position: relative; padding: 2px 0; margin: 0; border-radius: 0; }
.elemento:hover { background: transparent; }
.elemento p { margin: 0 0 14px; }
.elemento ul { margin: 0 0 14px; padding-left: 22px; }
.elemento li { margin-bottom: 4px; }
.elemento.subtitulo p { font-weight: 600; margin-top: 6px; }
.elemento::before { content: ""; position: absolute; left: -16px; top: 4px; bottom: 16px; width: 2px; background: var(--coral); opacity: 0; transition: opacity .15s; border-radius: 2px; }
.elemento:hover::before, .elemento:focus-within::before { opacity: .55; }
.elemento .herramientas { position: absolute; left: -44px; top: 0; display: flex; flex-direction: column; gap: 1px; opacity: 0; transition: opacity .15s; }
.elemento:hover .herramientas, .elemento:focus-within .herramientas { opacity: 1; }
.elemento .herramientas button { width: 24px; height: 22px; padding: 0; font: 14px/1 var(--fuente); color: var(--tinta-suave); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.elemento .herramientas button:hover { background: var(--coral-lavado); color: var(--coral-tinta); }
.elemento .herramientas button.peligro:hover { background: var(--coral-lavado); color: var(--coral-oscuro); }
.elemento .herramientas button:disabled { opacity: .25; cursor: default; background: transparent; }
.elemento .editar-form textarea { font-size: 17px; line-height: 1.6; min-height: 120px; margin-top: 4px; }
.elemento .insertar { display: none; margin: 6px 0 14px; padding: 12px 14px; border: 1px dashed var(--linea); border-radius: 10px; background: var(--papel); font-size: 15px; }
.elemento .insertar.abierto { display: block; }
.elemento .insertar textarea, .elemento .insertar input[type=text], .elemento .insertar select { font-size: 15px; }
.doc-tabla { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 16px; }
.doc-tabla th { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); border-bottom: 1.5px solid var(--tinta); }
.doc-tabla td { border-bottom: 1px solid var(--linea); }
.tabla-titulo { font-weight: 600; margin: 0 0 4px; }
.pieza { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.pieza p { margin: 0 0 6px; }
table.mini { font-size: 13px; margin-bottom: 6px; } table.mini th, table.mini td { padding: 3px 6px; }
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: flex; }
.elemento.imagen img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 4px 0 6px; }
.elemento.imagen .pie-foto { font-size: 14px; color: var(--tinta-suave); margin: 0 0 14px; font-style: italic; }
.anadir-final button { color: var(--tinta-suave); }
.puntos { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.puntos li { font-size: 13px; padding: 3px 10px; border-radius: 20px; margin: 0; }
.puntos li.bloqueante { background: var(--coral-lavado); color: var(--coral-tinta); }
.puntos li.revisar { background: var(--ambar-lavado); color: var(--ambar); }
.puntos li.sugerencia, .puntos li.menor { background: var(--neutro); color: var(--tinta-suave); }
.puntos.compactos { display: block; }
.puntos.compactos li { display: block; border-radius: 8px; padding: 6px 10px; margin-bottom: 4px; }
.puntos.compactos a { color: inherit; font-weight: 600; text-decoration: none; }
.regenerar { margin: 14px 0 0; opacity: .75; transition: opacity .15s; }
.apartado:hover .regenerar, .regenerar:focus-within { opacity: 1; }
.campo-reescribir { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 24px; background: var(--papel); padding: 2px 4px 2px 16px; }
.campo-reescribir:focus-within { border-color: var(--coral); }
.campo-reescribir input { flex: 1; border: 0; background: transparent; font-size: 15px; padding: 8px 0; }
.campo-reescribir input:focus { box-shadow: none; outline: none; }
.campo-reescribir button { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 17px; line-height: 1; }
.rapidas { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 8px; }
.rapidas button { font-size: 13px; padding: 2px 10px; border-radius: 14px; background: transparent; border: 1px solid transparent; color: var(--tinta-suave); }
.rapidas button:hover { border-color: var(--linea); background: var(--papel); color: var(--tinta); }
/* carril derecho */
.carril { position: sticky; top: 24px; font-size: 15px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.carril-bloque { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--linea); }
.carril h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 10px; font-weight: 600; }
.carril .cuenta { display: inline-block; min-width: 20px; text-align: center; background: var(--ambar-lavado); color: var(--ambar); border-radius: 10px; padding: 0 6px; font-size: 12px; margin-left: 4px; }
.boton.ancho, button.ancho { display: block; width: 100%; text-align: center; margin-bottom: 8px; }
table.precio td { padding: 6px 0; border-bottom: 0; }
table.precio td:last-child { text-align: right; white-space: nowrap; }
table.precio tr.total td { border-top: 1px solid var(--linea); font-weight: 600; padding-top: 10px; }
.pendiente { background: var(--ambar-lavado); color: var(--ambar); padding: 0 6px; border-radius: 4px; }

/* ---- espera ---- */
.progreso { display: flex; align-items: center; gap: 14px; }
.respira { width: 16px; height: 16px; border-radius: 50%; background: var(--coral); animation: respira 2.4s ease-in-out infinite; flex: none; }
@keyframes respira { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
details summary { cursor: pointer; color: var(--tinta-suave); }
pre { white-space: pre-wrap; word-break: break-word; background: var(--papel); border: 1px solid var(--linea); padding: 12px; border-radius: 8px; font: 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.zona-subida { border: 1.5px dashed var(--linea); border-radius: 12px; padding: 26px; text-align: center; color: var(--tinta-suave); background: var(--papel); }
.zona-subida.sobre { border-color: var(--coral); background: var(--coral-lavado); }

/* ---- conversación (arranque guiado) ---- */
body.conversacion { background: var(--fondo); }
.escena { min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 680px; margin: 0 auto; padding: 60px 24px 90px; }
.escena.ancha { max-width: 1100px; }
.escena .presencia { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.escena .presencia .punto { transform-origin: 35px 32px; transform-box: view-box; animation: respira 5.5s ease-in-out infinite; }
.escena .presencia.pensando .punto { animation-duration: 2.2s; }
.escena .presencia .quien { font-family: var(--fuente-voz); font-size: 20px; color: var(--tinta-suave); }
/* la D de fondo, latiendo: grande, suave, detrás de la conversación */
.fondo-d { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fondo-d svg { position: absolute; left: 60%; top: 56%; width: 150vmin; height: 150vmin; transform: translate(-50%, -50%); animation: latido-d var(--fondo-latido, 6s) ease-in-out infinite; transform-origin: center; }
.fondo-d .trazo { opacity: var(--fondo-trazo, .06); }
.fondo-d .punto { opacity: var(--fondo-punto, .16); transform-origin: 35px 32px; transform-box: view-box; animation: latido-punto var(--fondo-latido, 6s) ease-in-out infinite; }
.fondo-d.pensando svg, .fondo-d.pensando .punto { animation-duration: 2.4s; }
@keyframes latido-d { 0%, 100% { transform: translate(-50%, -50%) scale(.985); } 50% { transform: translate(-50%, -50%) scale(1.02); } }
@keyframes latido-punto { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.08); } }
.escena { position: relative; z-index: 1; }
.habla { font-family: var(--fuente-voz); font-size: 36px; line-height: 1.25; font-weight: 340; letter-spacing: -.015em; margin: 0 0 18px; font-variation-settings: "SOFT" 40, "WONK" 1; opacity: 0; animation: aparece .9s ease forwards; }
.habla strong { font-weight: 560; }
.habla.pequena { font-family: var(--fuente); font-size: 19px; line-height: 1.55; color: var(--tinta-suave); font-weight: 400; letter-spacing: 0; }
.habla:nth-child(2) { animation-delay: .1s } .habla:nth-child(3) { animation-delay: .9s } .habla:nth-child(4) { animation-delay: 1.7s }
.habla:nth-child(5) { animation-delay: 2.5s } .habla:nth-child(6) { animation-delay: 3.3s } .habla:nth-child(7) { animation-delay: 4.1s }
.respuesta { margin-top: 28px; width: 100%; opacity: 0; animation: aparece .8s ease forwards; animation-delay: var(--retardo, 1.6s); }
.respuesta input[type=text], .respuesta input[type=email], .respuesta input[type=password] { font-size: 22px; padding: 12px 0; border: 0; border-bottom: 1.5px solid var(--linea); border-radius: 0; background: transparent; }
.respuesta input:focus { box-shadow: none; border-bottom-color: var(--coral); }
.respuesta .opciones { display: flex; flex-direction: column; gap: 10px; }
.respuesta .opciones button { text-align: left; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 18px; font-size: 18px; font-weight: 500; }
.respuesta .opciones button:hover { border-color: var(--coral); background: var(--coral-lavado); }
.respuesta .opciones button small { display: block; color: var(--tinta-suave); font-size: 15px; font-weight: 400; margin-top: 3px; }
.respuesta .acciones { margin-top: 20px; }
.escena .pie, body.conversacion > .pie { position: fixed; bottom: 0; left: 0; right: 0; padding: 14px 24px 18px; text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); opacity: .75; background: linear-gradient(to top, var(--fondo) 60%, var(--sombra-degradado)); pointer-events: none; }
.escena .pie a, body.conversacion > .pie a { color: inherit; pointer-events: auto; }
/* lectura de documentos: una pila de hojas que se van pasando, con una línea que recorre el texto */
.lectura { position: relative; width: 150px; height: 120px; margin: 10px 0 24px; }
.lectura .hoja { position: absolute; left: 0; top: 0; width: 96px; height: 120px; background: var(--papel); border: 1.5px solid var(--linea); border-radius: 6px; box-shadow: 0 1px 0 var(--linea); transform-origin: left center; }
.lectura .hoja i { display: block; height: 4px; border-radius: 2px; background: var(--linea); margin: 14px 12px 0; }
.lectura .hoja i:nth-child(1) { width: 50px; margin-top: 18px; } .lectura .hoja i:nth-child(3) { width: 58px; } .lectura .hoja i:nth-child(5) { width: 40px; }
.lectura .hoja:nth-child(1) { transform: translate(28px, -8px) rotate(3deg); }
.lectura .hoja:nth-child(2) { transform: translate(14px, -4px) rotate(1.5deg); }
.lectura .hoja:nth-child(3) { animation: pasar 2.6s ease-in-out infinite; }
.lectura .barra { position: absolute; left: 10px; width: 76px; height: 2px; background: var(--coral); border-radius: 2px; animation: escanear 2.6s ease-in-out infinite; opacity: .9; }
@keyframes pasar { 0%, 70% { transform: rotate(0); opacity: 1; } 85% { transform: rotate(-70deg); opacity: .6; } 86% { transform: rotate(0); opacity: 0; } 100% { opacity: 1; } }
@keyframes escanear { 0% { top: 18px; opacity: 0; } 10% { opacity: .9; } 65% { top: 100px; opacity: .9; } 72%, 100% { top: 100px; opacity: 0; } }
.lectura .contador { position: absolute; left: 118px; bottom: 0; font-family: var(--fuente-voz); font-size: 34px; color: var(--coral); line-height: 1; }
.tipos { margin: 10px 0 0; }
.tipo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.tipo .tipo-nombre { flex: 1; min-width: 200px; font-size: 18px !important; padding: 6px 0 !important; }
.tipo .quitar { color: var(--tinta-suave); margin: 0; } .tipo .quitar input { margin-right: 4px; }
.tipo.nuevo .tipo-nombre { font-size: 16px !important; color: var(--tinta-suave); }
.asignaciones td { padding: 6px 8px 6px 0; } .asignaciones select { width: auto; font-size: 14px; padding: 4px 8px; }
/* pista de avance a todo el ancho: una hoja que recorre la línea según lo que falta */
.pista { position: relative; width: 100%; height: 34px; margin: 6px 0 10px; }
.pista::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--linea); border-radius: 2px; }
.pista-relleno { position: absolute; left: 0; top: 16px; height: 2px; background: var(--coral); border-radius: 2px; transition: width 1.2s ease; }
.pista-hoja { position: absolute; top: 4px; width: 20px; height: 26px; background: var(--papel); border: 1.5px solid var(--coral); border-radius: 3px; transition: left 1.2s ease; }
.pista-hoja::before, .pista-hoja::after { content: ""; position: absolute; left: 4px; right: 4px; height: 2px; background: var(--linea); top: 7px; }
.pista-hoja::after { top: 13px; right: 8px; }
.ficheros-elegidos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ficheros-elegidos li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; font-size: 14px; max-width: 100%; }
.ficheros-elegidos li::before { content: ""; width: 12px; height: 15px; border: 1.5px solid var(--coral); border-radius: 2px; flex: none; }
.ficheros-elegidos li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hojas { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 16px; }
.hojas .h { width: 26px; height: 34px; border: 1.5px solid var(--linea); border-radius: 3px; background: var(--papel); position: relative; transition: border-color .4s, background .4s; }
.hojas .h::before, .hojas .h::after { content: ""; position: absolute; left: 5px; right: 5px; height: 2px; background: var(--linea); top: 9px; }
.hojas .h::after { top: 16px; right: 10px; }
.hojas .h.leida { border-color: var(--coral); background: var(--coral-lavado); }
.hojas .h.leida::before, .hojas .h.leida::after { background: var(--coral); }
.hojas .h.ahora { border-color: var(--coral); animation: respira 1.2s ease-in-out infinite; }
details.ayuda { margin-top: 22px; font-size: 15px; color: var(--tinta-suave); }
details.ayuda summary { cursor: pointer; color: var(--coral-tinta); list-style: none; }
details.ayuda summary::before { content: "▸ "; } details.ayuda[open] summary::before { content: "▾ "; }
details.ayuda ol { margin: 10px 0 0; padding-left: 22px; } details.ayuda li { margin-bottom: 6px; }
.aprendido { list-style: none; padding: 0; margin: 12px 0 0; font-size: 20px; font-weight: 400; line-height: 1.5; }
.aprendido li { padding: 6px 0; opacity: 0; animation: aparece .7s ease forwards; }
.aprendido li:nth-child(1) { animation-delay: .8s } .aprendido li:nth-child(2) { animation-delay: 1.5s } .aprendido li:nth-child(3) { animation-delay: 2.2s }
.aprendido li:nth-child(4) { animation-delay: 2.9s } .aprendido li:nth-child(5) { animation-delay: 3.6s } .aprendido li:nth-child(6) { animation-delay: 4.3s }
.tarifa { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 18px; }
.tarifa input { width: 100px !important; font-size: 18px !important; text-align: right; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- panel: alertas y gráficos ---- */
.alertas { display: grid; gap: 8px; margin: 0 0 18px; }
.alerta { padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--ambar); background: var(--ambar-lavado); }
.alerta.grave { border-left-color: var(--coral); background: var(--coral-lavado); }
.alerta code { font-size: 13px; background: rgba(255,255,255,.6); padding: 1px 6px; border-radius: 4px; }
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; margin: 6px 0 22px; }
.graficos h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 6px; font-weight: 600; }

/* ---- inicio de la empresa: cajas ---- */
.cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 6px 0 28px; }
@media (max-width: 760px) { .cajas { grid-template-columns: 1fr; } }
.caja { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; min-height: 140px; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; color: var(--tinta); text-decoration: none; transition: border-color .15s, transform .15s; }
.caja:hover { border-color: var(--coral); transform: translateY(-1px); }
.caja strong { font-size: 18px; margin-top: auto; } .caja .pequeno { color: var(--tinta-suave); }
.caja-cifra { font-family: var(--fuente-voz); font-size: 40px; line-height: 1; color: var(--coral); font-weight: 400; }
.caja-icono { font-size: 34px; line-height: 1; color: var(--coral); }
.caja.late { background: var(--coral); border-color: var(--coral); color: #fff; animation: late 2.4s ease-in-out infinite; }
.caja.late .pequeno, .caja.late .caja-icono { color: #fff; }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,85,59,.45); } 50% { box-shadow: 0 0 0 12px rgba(224,85,59,0); } }

.hallazgo { padding: 12px 0; border-top: 1px solid var(--linea); } .hallazgo p { margin: 0 0 6px; }

/* ---- generando: un folio que se va escribiendo a lo ancho ---- */
.escribiendo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; padding: 20px 0 30px; }
@media (max-width: 900px) { .escribiendo { grid-template-columns: 1fr; } }
.folio { position: relative; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 34px 40px; min-height: 260px; }
.folio-titulo { width: 45%; height: 12px; background: var(--tinta); opacity: .85; border-radius: 3px; margin-bottom: 22px; }
.folio-linea { position: relative; height: 7px; border-radius: 3px; background: var(--linea); margin: 0 0 16px; width: 0; animation: escribir 1.6s ease forwards; animation-delay: calc(var(--i) * .25s); }
.folio-linea:nth-child(3n) { max-width: 70%; } .folio-linea:nth-child(4n) { max-width: 88%; }
.folio-linea.hecha { background: var(--tinta-suave); opacity: .5; }
@keyframes escribir { to { width: 100%; } }
.pluma { position: absolute; left: 36px; top: calc(70px + var(--y) * 23px); width: 10px; height: 10px; border-radius: 50%; background: var(--coral); animation: respira 1.4s ease-in-out infinite; transition: top .8s ease; }
.escribiendo-texto strong { display: block; font-family: var(--fuente-voz); font-size: 26px; font-weight: 500; margin-bottom: 6px; }
.detalle-alerta { margin-top: 6px; } .detalle-alerta summary { cursor: pointer; color: var(--coral-tinta); } .detalle-alerta pre { margin-top: 6px; font-size: 13px; }

/* ---- reescritura visible, versiones, secciones, edición en el sitio, precios ---- */
.apartado.reescribiendo { position: relative; }
.apartado.reescribiendo .texto-antiguo { color: var(--tinta-suave); opacity: .45; filter: grayscale(1); }
.apartado.reescribiendo .velo { position: absolute; inset: 40px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--fuente-voz); font-size: 24px; color: var(--tinta); background: linear-gradient(to bottom, rgba(251,248,244,.2), rgba(251,248,244,.75)); border-radius: 10px; }
.punto-vivo { transform-origin: 35px 32px; transform-box: view-box; animation: respira 1.6s ease-in-out infinite; }
.modificado { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); background: var(--ambar-lavado); padding: 2px 8px; border-radius: 10px; }
.cabecera .discreto.pequeno { font-size: 13px; padding: 1px 6px; }
.cabecera details.versiones { font-size: 13px; position: relative; } .cabecera details.versiones summary { cursor: pointer; color: var(--tinta-suave); list-style: none; }
.cabecera details.versiones ul { position: absolute; z-index: 5; list-style: none; margin: 4px 0 0; padding: 6px 8px; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; min-width: 260px; }
.seccion-herramientas { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.apartado:hover .seccion-herramientas { opacity: 1; }
.seccion-herramientas button { width: 24px; height: 22px; padding: 0; font: 14px/1 var(--fuente); color: var(--tinta-suave); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.seccion-herramientas button:hover { background: var(--coral-lavado); color: var(--coral-tinta); }
.elemento.editando [contenteditable] { outline: none; background: transparent; box-shadow: none; border-left: 2px solid var(--coral); padding-left: 10px; margin-left: -12px; font: inherit; color: inherit; }
.edicion-botones { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; }
.edicion-botones .guardar { padding: 4px 12px; }
.precio-campo { width: 110px; text-align: right; border: 1px solid transparent; background: transparent; padding: 2px 6px; font: inherit; color: inherit; border-radius: 6px; }
.precio-campo:hover, .precio-campo:focus { border-color: var(--linea); background: var(--papel); box-shadow: none; }
td.pendiente .precio-campo { color: var(--ambar); }
.otros-servicios { margin: 8px 0 14px; } .otros-servicios summary { cursor: pointer; color: var(--tinta-suave); }
.aviso-saldo { margin: 0; padding: 10px clamp(20px, 4vw, 64px); background: var(--ambar-lavado); color: var(--ambar); font-size: 15px; }
.aviso-saldo.grave { background: var(--coral-lavado); color: var(--coral-tinta); }
.oblig { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-tinta); background: var(--coral-lavado); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.cajas-tipos { columns: 2; column-gap: 16px; }
@media (max-width: 1000px) { .cajas-tipos { columns: 1; } }
.caja-tipo { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; min-width: 0; break-inside: avoid; margin-bottom: 16px; }
.caja-tipo h3 { margin: 0 0 6px; font-family: var(--fuente-voz); font-size: 22px; font-weight: 500; }
.docs-tipo { list-style: none; margin: 8px 0 0; padding: 0; }
.docs-tipo li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linea); min-width: 0; }
.docs-tipo .doc-nombre { min-width: 0; }
.docs-tipo .doc-nombre > span.pequeno:first-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-tipo .doc-nombre br { display: none; }
.docs-tipo .doc-mandos { display: flex; gap: 6px; flex: none; }
@media (max-width: 1100px) { .docs-tipo li { grid-template-columns: 1fr; } }
.docs-tipo .doc-mandos form { margin: 0; }
.docs-tipo .doc-mandos select { font-size: 13px; padding: 3px 22px 3px 8px; width: auto; max-width: 150px; }
.etiqueta.docuneria { background: var(--coral-lavado); color: var(--coral-tinta); font-size: 12px; vertical-align: 1px; }
.tipo-aprendido { padding: 8px 0; border-top: 1px solid var(--linea); } .tipo-aprendido summary { cursor: pointer; } .tipo-aprendido p { margin: 6px 0; }

/* ---- tema ---- */
.tema { display: flex; gap: 2px; margin-right: 14px; border: 1px solid var(--linea); border-radius: 20px; padding: 2px; }
.tema button { width: 28px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--tinta-suave); border-radius: 14px; font-size: 14px; line-height: 1; cursor: pointer; }
.tema button.activo { background: var(--coral-lavado); color: var(--coral-tinta); }
.tema button svg { width: 15px; height: 15px; vertical-align: middle; }
header.barra nav a.casa svg { width: 18px; height: 18px; vertical-align: -3px; }
.escena .volver { position: fixed; left: 28px; bottom: 24px; color: var(--tinta-suave); text-decoration: none; font-size: 15px; opacity: .75; }
.escena .volver:hover { opacity: 1; color: var(--coral); }

/* ---- lectura de documentos a lo ancho: pila por leer → hoja viajando → pila leída ---- */
.lectura-pista { display: flex; align-items: center; gap: 18px; width: 820px; max-width: calc(100vw - 48px); margin: 14px 0 10px; height: 64px; }
.lectura-mensaje { width: 820px; max-width: calc(100vw - 48px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lectura-pista .pila { position: relative; width: 44px; height: 54px; flex: none; }
.lectura-pista .pila::after { content: attr(data-n); position: absolute; left: 0; right: 0; top: 100%; text-align: center; font-size: 12px; color: var(--tinta-suave); }
.lectura-pista .h { position: absolute; left: 0; top: 0; width: 30px; height: 40px; border: 1.5px solid var(--linea); border-radius: 3px; background: var(--papel); transform: translate(calc(var(--i, 0) * 2px), calc(var(--i, 0) * -2px)); }
.lectura-pista .h::before, .lectura-pista .h::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--linea); top: 10px; }
.lectura-pista .h::after { top: 18px; right: 12px; }
.lectura-pista .h.leida { border-color: var(--coral); background: var(--coral-lavado); }
.lectura-pista .h.leida::before, .lectura-pista .h.leida::after { background: var(--coral); }
.lectura-pista .via { position: relative; flex: 1; height: 54px; }
.lectura-pista .via::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--linea); border-radius: 2px; }
.lectura-pista .via .relleno { position: absolute; left: 0; top: 50%; height: 2px; width: var(--f, 0%); background: var(--coral); border-radius: 2px; transition: width 1.2s ease; }
.lectura-pista .via .h.viaja { top: 7px; border-color: var(--coral); animation: viajar 2.4s ease-in-out infinite; }
@keyframes viajar { 0% { left: 0; transform: rotateY(0); opacity: 0; } 8% { opacity: 1; } 45% { transform: rotateY(0); } 55% { transform: rotateY(-70deg); } 65% { transform: rotateY(0); } 92% { opacity: 1; } 100% { left: calc(100% - 30px); opacity: 0; } }

/* ---- «ya os conozco»: lista + cajas de tipos ---- */
.aprendido.lista { list-style: none; padding: 0; margin: 10px 0 0; width: 100%; }
.aprendido.lista li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--linea); position: relative; opacity: 0; animation: aparece .6s ease forwards; animation-delay: calc(.4s + var(--i) * .45s); }
.aprendido.lista li::before { content: ""; position: absolute; left: 6px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.cajas-tipos.conocidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; columns: auto; }
@media (max-width: 760px) { .cajas-tipos.conocidos { grid-template-columns: 1fr; } }
.tipo-caja { position: relative; padding: 16px 40px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.tipo-caja .tipo-nombre { width: 100%; min-width: 0; font-family: var(--fuente-voz); font-size: 21px !important; line-height: 1.25; resize: none; overflow: hidden; min-height: 0; height: auto; color: var(--tinta); border: 0 !important; border-bottom: 1px dashed transparent !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; }
.tipo-caja .tipo-nombre:hover, .tipo-caja .tipo-nombre:focus { border-bottom-color: var(--coral) !important; outline: none; }
.tipo-caja p { margin: 2px 0 0; }
.tipo-caja.nueva { border-style: dashed; color: var(--tinta-suave); }
.tipo-caja.nueva .tipo-nombre { font-size: 16px !important; }
.quitar-caja { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--tinta-suave); cursor: pointer; margin: 0; }
.quitar-caja input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.quitar-caja span { font-size: 20px; line-height: 1; pointer-events: none; }
.quitar-caja:hover { background: var(--coral-lavado); color: var(--coral-tinta); }
.tipo-caja:has(.quitar-caja input:checked) { opacity: .4; text-decoration: line-through; border-style: dashed; }
.tipo-caja:has(.quitar-caja input:checked) .quitar-caja { background: var(--coral); color: #fff; }
.detalle-cliente { background: var(--fondo); padding: 10px 16px 14px !important; }
.campos-cliente { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 0 0 8px; font-size: 15px; }
.campos-cliente dt { color: var(--tinta-suave); } .campos-cliente dd { margin: 0; }
.docs-cliente { list-style: none; margin: 0; padding: 0 0 0 14px; font-size: 15px; } .docs-cliente li { padding: 2px 0; }
.campos-propios .fila { margin-bottom: 6px; }

/* ---- proponer tablas/gráficos: iconos y carga ---- */
.que-proponer { display: flex; gap: 6px; margin-bottom: 8px; }
.que-proponer label { flex: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; color: var(--tinta-suave); font-size: 12px; position: relative; }
.que-proponer label input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.que-proponer label svg { width: 22px; height: 22px; }
.que-proponer label:has(input:checked) { border-color: var(--coral); color: var(--coral-tinta); background: var(--coral-lavado); }
.cargando-piezas { display: none; align-items: center; gap: 10px; margin-top: 10px; }
.proponer.htmx-request .cargando-piezas { display: flex; }
.proponer.htmx-request button[type=submit] { opacity: .5; pointer-events: none; }
.mini-grafico { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.mini-grafico i { width: 5px; background: var(--coral); border-radius: 2px 2px 0 0; animation: barra 1.1s ease-in-out infinite; }
.mini-grafico i:nth-child(2) { animation-delay: .15s } .mini-grafico i:nth-child(3) { animation-delay: .3s } .mini-grafico i:nth-child(4) { animation-delay: .45s }
@keyframes barra { 0%, 100% { height: 5px; } 50% { height: 22px; } }
.elemento > p, .elemento > ul, .elemento > .pie-foto { cursor: text; }
.elemento:not(.editando) > p:hover, .elemento:not(.editando) > ul:hover { outline: 1px dashed var(--linea); outline-offset: 4px; border-radius: 4px; }
.tipo-caja .formato-tipo { font-size: 12px; padding: 3px 24px 3px 6px; margin-top: 6px; color: var(--tinta-suave); border-color: transparent; background-color: var(--neutro); }
.faltan dl { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(200px, 1fr); gap: 6px 18px; margin: 0; align-items: center; }
.faltan dt { font-size: 15px; } .faltan dd { margin: 0; } .faltan dd input { margin: 0; }
@media (max-width: 720px) { .faltan dl { grid-template-columns: 1fr; } }
.cliente-cotejo { border-color: var(--verde); background: var(--verde-lavado); }
.alternativa { align-items: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--linea); }
.alternativa .etiqueta { margin-bottom: 10px; }
/* ---- nuevo documento: adjuntos e ideas ---- */
.zona-subida.compacta { padding: 18px; text-align: center; border: 1.5px dashed var(--linea); border-radius: 12px; transition: border-color .15s, background .15s; }
.zona-subida.encima { border-color: var(--coral); background: var(--coral-lavado); }
.adjuntos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.adjunto { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; animation: aparece .3s ease; }
.adjunto .tipo-fichero { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 4px 6px; border-radius: 6px; background: var(--neutro); color: var(--tinta-suave); }
.adjunto .tipo-fichero.pdf { background: var(--coral-lavado); color: var(--coral-tinta); }
.adjunto .tipo-fichero.docx, .adjunto .tipo-fichero.doc, .adjunto .tipo-fichero.odt { background: #E3EBF7; color: #2F5496; }
.adjunto .tipo-fichero.xlsx, .adjunto .tipo-fichero.xlsm, .adjunto .tipo-fichero.csv, .adjunto .tipo-fichero.tsv { background: var(--verde-lavado); color: var(--verde); }
.adjunto .nombre-fichero { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto .peso-fichero { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
.adjunto .quitar-fichero { border: 0; background: transparent; color: var(--tinta-suave); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.adjunto .quitar-fichero:hover { color: var(--coral); }
.adjunto .progreso-fichero { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.adjunto .progreso-relleno { height: 100%; width: 0; background: var(--coral); transition: width .2s; }
.adjunto.subido .progreso-relleno { background: var(--verde); }
.adjunto.subido .tipo-fichero::after { content: " ✓"; }
.cajas.ideas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.caja.idea { min-height: 0; text-align: left; cursor: pointer; font: inherit; gap: 6px; }
.caja.idea strong { margin: 0; font-family: var(--fuente-voz); font-size: 19px; font-weight: 500; }
.caja.idea:hover { border-color: var(--coral); transform: translateY(-2px); }
.cajas-web { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.caja-web { min-height: 0; padding: 14px 16px 12px; }
.caja-web label { margin: 0 0 6px; font-family: var(--fuente-voz); font-size: 19px; color: var(--tinta); }
.caja-web textarea { min-height: 110px; border: 0 !important; padding: 0 !important; background: transparent !important; font-size: 16px; resize: vertical; }
.caja-web textarea:focus { outline: none; box-shadow: none; }
/* ---- perfil y avatar ---- */
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--coral-lavado); color: var(--coral-tinta); font-weight: 600; font-size: 14px; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.grande { width: 84px; height: 84px; font-size: 34px; font-family: var(--fuente-voz); }
.perfil-enlace { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); margin-right: 12px; }
.perfil-enlace .nombre-perfil { font-size: 15px; } .perfil-enlace:hover .avatar { outline: 2px solid var(--coral); }
header.barra .salir { font-size: 14px; color: var(--tinta-suave); }
/* ---- animaciones generales ---- */
body > main { animation: entrar-pagina .38s cubic-bezier(.2,.7,.2,1); }
@keyframes entrar-pagina { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
button, .boton { transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s; }
button:active:not(:disabled), .boton:active { transform: scale(.97); }
.caja { transition: border-color .18s, transform .18s, box-shadow .18s; }
.caja:hover { box-shadow: 0 6px 20px -12px rgba(43,33,25,.35); }
.etiqueta, .puntos li { animation: aparece .3s ease; }
.apartado { animation: entrar-pagina .45s ease both; }
header.barra nav a { position: relative; }
header.barra nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--coral); transition: right .2s ease; }
header.barra nav a:hover::after, header.barra nav a.activo::after { right: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.puntos li[data-motivo] { cursor: pointer; } .puntos li[data-motivo]:hover { filter: brightness(.95); }
mark.hallazgo { background: var(--ambar-lavado); color: inherit; border-bottom: 2px solid var(--ambar); border-radius: 2px; padding: 0 1px; animation: aparece .3s; }
.aplicar-punto { position: sticky; bottom: 16px; z-index: 5; display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--papel); border: 1px solid var(--ambar); border-radius: 12px; box-shadow: 0 8px 24px -12px rgba(0,0,0,.3); margin: 10px 0; animation: aparece .25s; }
.aplicar-punto span { flex: 1; font-size: 14px; }
.aviso.sin-piezas { font-size: 14px; margin: 0 0 10px; }
.tostada { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; background: var(--tinta); color: var(--papel); padding: 10px 18px; border-radius: 12px; font-size: 14px; max-width: 80vw; animation: aparece .25s; box-shadow: 0 8px 24px -10px rgba(0,0,0,.4); }
/* ---- puntos a revisar: solo se ven 4; el resto se despliega si se quiere ---- */
details.mas-puntos { margin: 2px 0 0; }
details.mas-puntos > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--tinta-suave); padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--linea); text-align: center; user-select: none; }
details.mas-puntos > summary::-webkit-details-marker { display: none; }
details.mas-puntos > summary:hover { background: var(--neutro); color: var(--tinta); }
details.mas-puntos > summary .abierto, details.mas-puntos[open] > summary .cerrado { display: none; }
details.mas-puntos[open] > summary .abierto { display: inline; }
details.mas-puntos[open] > summary { margin-bottom: 4px; }
/* ---- tras reescribir con la IA: ¿lo aprendo? ---- */
form.aprender { margin: 12px 0 0; padding: 10px 14px; background: var(--verde-lavado); border: 1px solid var(--verde); border-radius: 12px; animation: aparece .3s ease; }
form.aprender p { margin: 0 0 8px; font-size: 14px; }
form.aprender .acciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
form.aprender .acciones button { font-size: 13px; }
form.aprender .acciones button .pequeno { opacity: .7; font-weight: 400; }
/* ---- comprobación de maquetación (ida y vuelta) en Mi archivo ---- */
.fidelidad { margin: 4px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--neutro); }
.fidelidad.ok { background: var(--verde-lavado); color: var(--verde); }
.fidelidad.aviso { background: var(--ambar-lavado); color: var(--ambar); }
.fidelidad.error { background: var(--coral-lavado); color: var(--coral-tinta); }
.fidelidad details { display: inline-block; margin-left: 6px; } .fidelidad summary { cursor: pointer; }
.fidelidad ul { margin: 4px 0 0 14px; padding: 0; }