/* =========================================================
PEDIDO DE DOCUMENTO — cómo se pide cada archivo en el chat
RUTH.il
QUÉ TENÍA DE MALO LO ANTERIOR
-----------------------------
El mensaje era una sola línea de texto con dos saltos:
Contrato firmado por ambas partes
Documento con las firmas originales (PDF o imagen)
Por favor, selecciona el archivo correspondiente.
Cuatro problemas, y ninguno es de gusto:
1. NO SE SABE CUÁNTOS FALTAN. Se piden entre cinco y nueve documentos
de uno en uno. Sin un contador, cada vez que sube uno aparece otro
y no hay forma de saber si queda uno o quedan seis. Eso es lo que
hace que la gente abandone a mitad.
2. «SELECCIONA EL ARCHIVO» NO DICE DÓNDE. El selector de archivos no
está en el mensaje: está en otro recuadro, más abajo. La frase
manda hacer algo sin decir con qué.
3. LOS TRES TEXTOS PESAN IGUAL. Qué documento es, cómo tiene que ser
y qué hacer van seguidos, separados solo por saltos de línea. Se
leen como un párrafo, no como tres cosas distintas.
4. EL FORMATO SE DICE DE PASADA. «(PDF o imagen)» va dentro de la
descripción, en letra pequeña, cuando es justo lo que hay que
saber antes de ir a buscar el archivo.
CÓMO SE USA
Se carga después de la hoja del trámite. Los colores salen de
shared/css/tokens.css; aquí no se declara ninguno nuevo.
========================================================= */
/* La tarjeta ocupa toda la burbuja: el mensaje ES la tarjeta. */
.bot-message .bubble > .pdoc {
margin: -2px 0;
}
/* ---------- CABECERA: CUÁNTOS VAN ---------- */
.pdoc-cuenta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--page-border, var(--border, rgba(128,128,128,.25)));
}
.pdoc-cuenta-texto {
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--page-ink-2, var(--text-3, #8b8b8b));
white-space: nowrap;
}
/* Los puntos dicen a ojo cuánto queda, sin tener que leer el número.
Se marcan aria-hidden: el número de al lado ya lo dice con palabras,
y repetirlo en el lector de pantalla solo estorba. */
.pdoc-puntos {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.pdoc-punto {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--page-border, var(--border-strong, rgba(128,128,128,.35)));
}
.pdoc-punto.es-hecho { background: var(--exito, #2ea043); }
.pdoc-punto.es-ahora {
background: var(--magenta, var(--accent, #C42A8E));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta, #C42A8E) 22%, transparent);
}
/* ---------- QUÉ DOCUMENTO ES ---------- */
.pdoc-cuerpo {
display: flex;
gap: 12px;
align-items: flex-start;
}
.pdoc-icono {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 10px;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--magenta, #C42A8E) 12%, transparent);
color: var(--magenta-texto, var(--magenta, #C42A8E));
font-size: 1.15rem;
}
.pdoc-nombre {
margin: 0 0 2px;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.35;
color: var(--page-ink, var(--text-1, inherit));
}
/* La descripción explica CÓMO tiene que ser el documento —original,
vigencia, con firmas—. Es lo que evita que suban el papel
equivocado, así que no va en letra pequeña. */
.pdoc-como {
margin: 0;
font-size: .92rem;
line-height: 1.5;
color: var(--page-ink-2, var(--text-2, #9a9a9a));
}
/* ---------- QUÉ SE ACEPTA ---------- */
.pdoc-formatos {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
font-size: .8rem;
color: var(--page-ink-2, var(--text-3, #8b8b8b));
}
.pdoc-formato {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
border: 1px solid var(--page-border, var(--border, rgba(128,128,128,.25)));
font-weight: 700;
font-size: .72rem;
letter-spacing: .03em;
}
/* ---------- LA ACCIÓN ---------- */
/* El botón va DENTRO del mensaje. Antes el mensaje decía «selecciona el
archivo» y el selector estaba en otro recuadro: la instrucción y la
cosa con la que se cumple estaban separadas. */
.pdoc-accion {
margin-top: 14px;
}
.pdoc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 20px;
border: 0;
border-radius: 10px;
background: var(--magenta, var(--accent, #C42A8E));
color: var(--magenta-ink, #fff);
font-family: inherit;
font-size: .92rem;
font-weight: 700;
cursor: pointer;
transition: filter .15s ease;
}
.pdoc-btn:hover { filter: brightness(1.08); }
.pdoc-btn:focus-visible {
outline: 2px solid var(--magenta, #C42A8E);
outline-offset: 3px;
}
.pdoc-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Cuando ya se eligió un archivo, el botón deja sitio al nombre. */
.pdoc-elegido {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
font-size: .86rem;
color: var(--exito, #2ea043);
word-break: break-all;
}
@media (max-width: 480px) {
.pdoc-btn { width: 100%; }
.pdoc-cuenta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.pdoc-btn { transition: none; }
}
/* ---------- Una sola forma de subir (28/10/2026) ----------
El recuadro de abajo con «Choose File» y «Subir archivos» ya no se ve:
se sube solo desde la tarjeta del chat. El recuadro sigue en la página
(escondido) porque la tarjeta usa por dentro su selector y su botón.
El !important gana al style="display:block" que ponen los chats. */
#fileUploadCard { display: none !important; }
.pdoc-elegido.es-error { color: var(--error, #FF6B5C); }
.pdoc-elegido span { min-width: 0; }
.pdoc-cambiar {
margin-left: 4px; padding: 4px 2px; border: 0; background: none; cursor: pointer;
font: inherit; font-weight: 700; color: var(--magenta-texto, #F07FC4);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
:root[data-theme="light"] .pdoc-cambiar { color: var(--magenta, #A81E76); }
.pdoc-cambiar:focus-visible { outline: 2px solid var(--magenta, #C42A8E); outline-offset: 2px; border-radius: 4px; }
/* REGISTRO 2026-10-28 · Se esconde #fileUploadCard (una sola forma de subir) y estilo de «Cambiar archivo». — cambio por Claude */