/*
 * Estilos del motor de expedientes.
 *
 * Dos cosas distintas conviven aquí:
 *
 * 1. Las utilidades `tw-` que el bundle del tema NO trae. El tailwind.css del
 *    tema es un build purgado: sólo contiene las clases que el proyecto usaba
 *    cuando se generó, así que una clase nueva no falla, simplemente no hace
 *    nada -y el HTML se ve perfecto mientras el diseño no aparece-. Se añaden
 *    aquí en lugar de regenerar el bundle, que lo comparten todas las
 *    pantallas de la aplicación.
 *
 * 2. Los componentes propios del módulo, con prefijo `exp-`. Son pocos y
 *    concretos: tarjetas del cuadro de mando, etiqueta de estado, distintivo de
 *    avance y la barra de filtros del listado.
 *
 * Los valores de color son los de Tailwind, no una aproximación: si algún día
 * se regenera el bundle con estas clases, las reglas coinciden.
 *
 * MODO OSCURO. Lo que es superficie, filo, tinta o aviso a ancho completo pide
 * su color a los tokens `--erp-*` del tema moderno CON RESPALDO
 * -`var(--erp-surface, #fff)`-: en el tema clásico esos tokens no existen, vale
 * el respaldo y no cambia ni un píxel; en el moderno siguen la paleta, así que
 * en oscuro no quedan tarjetas blancas ni texto gris oscuro sobre fondo casi
 * negro. Los tintes de las etiquetas pequeñas (`exp-tag-*`, `exp-chip-*`,
 * `exp-req-*`, `exp-origin-*`, el semáforo) se dejan como están: traen su
 * propio par fondo/tinta y se leen igual en las dos paletas.
 *
 * Y OJO: el panel marca el modo en `data-erp-mode` del <html>, no en
 * `data-theme`. Los bloques que había aquí colgados de `[data-theme="dark"]` y
 * de `.dark` no se aplicaban NUNCA -ni un error, ni un aviso, simplemente no
 * existían para el navegador-; se han quitado y su intención está ahora en los
 * tokens, que sí funcionan.
 */

/* --- Utilidades que faltan en el bundle del tema -------------------------- */
.tw-whitespace-nowrap { white-space: nowrap; }

/* --- Cuadro de mando ------------------------------------------------------ */

/*
 * Rejilla propia y no `tw-grid-cols-4`, que tampoco está en el bundle. Con
 * auto-fit las cuatro cifras se reparten solas y en el móvil caen a una
 * columna sin necesidad de puntos de ruptura.
 */
.exp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.exp-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid var(--erp-border, #e7e5e4);
    background: var(--erp-surface, #fff);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

/* Son enlaces: que se note, porque cada cifra lleva al listado ya filtrado. */
.exp-card:hover,
.exp-card:focus {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.exp-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 18px;
    flex: 0 0 42px;
}

.exp-card-value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
}

.exp-card-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--erp-ink-muted, #78716c);
}

.exp-card-sky    .exp-card-icon { background: #e0f2fe; color: #0284c7; }
.exp-card-violet .exp-card-icon { background: #ede9fe; color: #7c3aed; }
.exp-card-amber  .exp-card-icon { background: #fef3c7; color: #d97706; }
.exp-card-rose   .exp-card-icon { background: #ffe4e6; color: #e11d48; }

/* --- Etiqueta de estado --------------------------------------------------- */

/*
 * El color lo elige el usuario en su pantalla y llega por `style`, así que aquí
 * sólo va la forma. El texto va en blanco con una sombra suave para que siga
 * leyéndose sobre los colores claros que alguien elegirá tarde o temprano.
 */
.exp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    white-space: nowrap;
}

.exp-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* --- Distintivo de avance ------------------------------------------------- */
.exp-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.exp-chip-ok   { background: #d1fae5; color: #047857; }
.exp-chip-warn { background: #fef3c7; color: #b45309; }
.exp-chip-bad  { background: #ffe4e6; color: #be123c; }

/* --- Reglas de cotejo ------------------------------------------------------ */

/*
 * La severidad va como una barra de color a la izquierda y no como una etiqueta
 * más: es lo que se busca al repasar la lista -«¿cuáles bloquean?»- y así se ve
 * sin leer.
 */
.exp-sev {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--erp-border-strong, #d6d3d1);
    flex: 0 0 4px;
}

.exp-sev-info    { background: #38bdf8; }
.exp-sev-warning { background: #f59e0b; }
.exp-sev-blocker { background: #f43f5e; }

/*
 * La regla se lee como una frase. Los operandos van en cajas y el operador
 * entre ellas, para que se distinga de un vistazo qué se compara con qué.
 */
.exp-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.exp-operand {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--erp-surface-3, #f5f5f4);
    color: var(--erp-ink-soft, #44403c);
    font-size: 12px;
}

.exp-operand-literal {
    background: #ede9fe;
    color: #6d28d9;
}

.exp-op {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--erp-ink-muted, #78716c);
}

/* --- Editor de regla ------------------------------------------------------- */

.exp-rule-builder {
    padding: 14px;
    margin-bottom: 15px;
    border: 1px solid var(--erp-border, #e7e5e4);
    border-radius: 8px;
    background: var(--erp-surface-2, #fafaf9);
}

.exp-rule-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
}

.exp-rule-row label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--erp-ink-muted, #78716c);
}

/* En pantalla estrecha la frase se apila en vez de encogerse hasta ser ilegible. */
@media (max-width: 767px) {
    .exp-rule-row { grid-template-columns: 1fr; }
}

.exp-rule-test {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--erp-border-strong, #d6d3d1);
}

.exp-rule-test-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--erp-ink-muted, #78716c);
    white-space: nowrap;
}

.exp-test-unknown { color: var(--erp-ink-muted, #78716c); }

.exp-strict {
    display: block;
    margin: 12px 0 0;
    font-weight: 400;
}

/* --- Ficha del expediente -------------------------------------------------- */

/*
 * La frase de cabecera: lo que falta, y un botón que lleva al primero. Es lo
 * primero que se mira al abrir un expediente, así que ocupa el ancho completo y
 * no compite con nada.
 */
.exp-headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-weight: 500;
}

.exp-headline-ok   { background: var(--erp-ok-bg, #d1fae5); color: var(--erp-ok, #047857); }
.exp-headline-warn { background: var(--erp-warn-bg, #fef3c7); color: var(--erp-warn, #b45309); }

.exp-headline .btn { margin-left: auto; }

.exp-req-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    flex: 0 0 26px;
}

.exp-req-stone   { background: var(--erp-surface-3, #f5f5f4); color: var(--erp-ink-muted, #78716c); }
.exp-req-sky     { background: #e0f2fe; color: #0369a1; }
.exp-req-amber   { background: #fef3c7; color: #b45309; }
.exp-req-emerald { background: #d1fae5; color: #047857; }
.exp-req-rose    { background: #ffe4e6; color: #be123c; }

.exp-tag-stone   { background: var(--erp-surface-3, #f5f5f4); color: var(--erp-ink-soft, #57534e); }
.exp-tag-sky     { background: #e0f2fe; color: #0369a1; }
.exp-tag-amber   { background: #fef3c7; color: #b45309; }
.exp-tag-emerald { background: #d1fae5; color: #047857; }
.exp-tag-rose    { background: #ffe4e6; color: #be123c; }

/* El semáforo de vigencia: verde, ámbar, rojo y vencido. */
.exp-semaforo-green   { background: #d1fae5; color: #047857; }
.exp-semaforo-yellow  { background: #fef3c7; color: #b45309; }
.exp-semaforo-red     { background: #ffe4e6; color: #be123c; }
.exp-semaforo-expired { background: #be123c; color: #fff; }
.exp-semaforo-none    { background: var(--erp-surface-3, #f5f5f4); color: var(--erp-ink-muted, #78716c); }

/* Un requisito descartado por una condición se ve apagado, no escondido: sigue
   formando parte del checklist y hay que poder ver por qué no se pide. */
.exp-req-auto { opacity: .55; }

.exp-item-observation {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--erp-warn, #b45309);
}

.exp-fixed-subject {
    padding: 10px 14px;
    margin-bottom: 15px;
    border-radius: 8px;
    background: var(--erp-surface-3, #f5f5f4);
}

.exp-inline-form { display: inline-block; margin: 0; }

.exp-steps {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--erp-ink-soft, #57534e);
    font-size: 13px;
    line-height: 1.7;
}

/* --- Subida de documentos --------------------------------------------------- */

/*
 * La zona de subida es una <label> que envuelve al input: así toda ella es
 * pulsable sin JavaScript, y además acepta que se le suelte un fichero encima,
 * que es el gesto real de quien integra un expediente desde su correo.
 */
.exp-drop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 12px;
    border: 1px dashed var(--erp-border-strong, #d6d3d1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--erp-ink-soft, #57534e);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
    white-space: nowrap;
}

/*
 * Y el input de dentro NO SE VE, aunque lleve el atributo `hidden`.
 *
 * Hace falta decirlo aquí: Bootstrap 3 trae `input[type="file"] { display:
 * block }`, que es una regla de AUTOR y por tanto gana a la del navegador para
 * `[hidden]`. El resultado era el «Choose File / No file chosen» del navegador
 * asomando junto a la zona de soltar, en las TRES puertas -la ficha del panel
 * lo disimulaba porque sus acciones sólo aparecen al pasar el ratón, y así
 * llevaba escondido desde el principio-. Misma especificidad que la de
 * Bootstrap, y esta hoja carga después.
 */
.exp-drop input[type="file"] { display: none; }

.exp-drop:hover { border-color: #0ea5e9; color: var(--erp-info, #0369a1); }

.exp-drop-over {
    border-color: #0ea5e9;
    border-style: solid;
    background: var(--erp-info-bg, #e0f2fe);
    color: var(--erp-info, #0369a1);
}

.exp-drop-busy {
    border-style: solid;
    background: var(--erp-surface-3, #f5f5f4);
    color: var(--erp-ink-muted, #78716c);
    pointer-events: none;
}

.exp-drop-error {
    border-color: #f43f5e;
    border-style: solid;
    background: var(--erp-danger-bg, #ffe4e6);
    color: var(--erp-danger, #be123c);
    white-space: normal;
}

/* --- Ficheros de un requisito ---------------------------------------------- */

.exp-files {
    flex-basis: 100%;
    list-style: none;
    margin: 8px 0 0 36px;
    padding: 0;
}

.exp-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
}

.exp-file i { color: var(--erp-ink-faint, #a8a29e); }

.exp-file-meta {
    font-size: 11px;
    color: var(--erp-ink-faint, #a8a29e);
}

/* El borrar aparece al pasar por encima: es una acción rara y no debe competir
   con el nombre del documento, que es lo que se viene a leer. */
.exp-file-remove {
    margin-left: auto;
    color: var(--erp-ink-faint, #d6d3d1);
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
}

.exp-file:hover .exp-file-remove,
.exp-file:focus-within .exp-file-remove { opacity: 1; }

.exp-file-remove:hover { color: var(--erp-danger, #be123c); }

/* Las versiones anteriores se pliegan: son historial y no pueden competir con
   la vigente, pero tampoco se esconden — en un expediente legal la versión
   anterior de un documento importa. */
.exp-file-history summary {
    font-size: 11px;
    color: var(--erp-ink-faint, #a8a29e);
    cursor: pointer;
    padding: 4px 0;
}

.exp-file-old {
    opacity: .65;
    padding-left: 14px;
}

/* La fecha de emisión va inline junto a las acciones del requisito: sólo
   aparece cuando de ella depende la vigencia. */
.exp-doc-date {
    width: 140px;
    display: inline-block;
}

/* --- Reporte de observaciones ---------------------------------------------- */

.exp-report-block { margin-bottom: 22px; }
.exp-report-block:last-child { margin-bottom: 0; }

.exp-report-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--erp-border, #e7e5e4);
    font-size: 13px;
    font-weight: 600;
}

.exp-report-warn { color: var(--erp-warn, #b45309); }
.exp-report-bad  { color: var(--erp-danger, #be123c); }

.exp-report-count {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--erp-surface-3, #f5f5f4);
    color: var(--erp-ink-soft, #57534e);
    font-size: 11px;
}

.exp-report-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.exp-report-list > li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--erp-border-soft, #fafaf9);
    font-size: 13px;
}

.exp-report-list > li:last-child { border-bottom: 0; }

.exp-report-meta {
    font-size: 11px;
    color: var(--erp-ink-faint, #a8a29e);
    margin-left: 6px;
}

.exp-finding { align-items: center; }
.exp-finding-text { flex: 1; }
.exp-finding .btn { margin-left: auto; }

/* La barra de severidad en un hallazgo del reporte necesita alto propio: aquí
   no hay una tarjeta que la estire como en la lista de reglas. */
.exp-finding .exp-sev {
    align-self: stretch;
    min-height: 20px;
}

/*
 * Lo que no se ha podido comprobar va en gris y separado. Mezclarlo con lo que
 * está mal convierte el reporte en ruido: quien lo recibe deja de distinguir lo
 * que hay que corregir de lo que simplemente no se ha leído.
 */
.exp-report-unknown {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px dashed var(--erp-border-strong, #d6d3d1);
    opacity: .75;
}

.exp-report-unknown .exp-report-title { color: var(--erp-ink-muted, #78716c); }

/* El texto plano: es lo que se copia al correo, así que se ve tal cual. */
.exp-plain {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.6;
    background: var(--erp-surface-2, #fafaf9);
    resize: vertical;
}

/* Cuando un requisito no se puede aprobar todavía, en lugar del botón va una
   pista con el motivo: un botón deshabilitado no explica nada. */
.exp-cannot {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--erp-ink-faint, #a8a29e);
    cursor: help;
}

/* Panel de expedientes dentro de la ficha de un titular. */
.exp-subject-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.exp-subject-list > li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--erp-border-soft, #f5f5f4);
    font-size: 13px;
}

.exp-subject-list > li:last-child { border-bottom: 0; }

/* --- Datos leídos del documento -------------------------------------------- */

/*
 * Van antes de la lista de ficheros porque son lo accionable: el documento ya
 * está, lo que queda es confirmar sus datos. Y llegan ordenados por confianza
 * ascendente, así que lo primero que se ve es lo dudoso.
 */
.exp-values {
    flex-basis: 100%;
    list-style: none;
    margin: 8px 0 0 36px;
    padding: 8px 12px;
    border-left: 2px solid var(--erp-info-bd, #e0f2fe);
    background: var(--erp-info-bg, #f8fdff);
    border-radius: 0 6px 6px 0;
}

.exp-value {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.exp-value-label {
    min-width: 130px;
    color: var(--erp-ink-soft, #57534e);
    font-weight: 500;
}

.exp-value-input { max-width: 240px; }

.exp-value-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.exp-value-origin {
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* El origen se distingue de un vistazo: lo confirmado por una persona vale
   más que lo leído por una máquina, y eso tiene que verse sin leer. */
.exp-origin-regex     { background: #e0f2fe; color: #0369a1; }
.exp-origin-ocr       { background: #fef3c7; color: #b45309; }
.exp-origin-ai        { background: #ede9fe; color: #6d28d9; }
.exp-origin-qr        { background: #d1fae5; color: #047857; }
.exp-origin-manual    { background: var(--erp-surface-3, #f5f5f4); color: var(--erp-ink-soft, #57534e); }
.exp-origin-confirmed { background: #d1fae5; color: #047857; }

.exp-value-ok .exp-value-label { color: var(--erp-ink-muted, #78716c); }

/* --- Captura con cámara ----------------------------------------------------- */

.exp-camera-btn { margin-left: 4px; }

.exp-camera-stage {
    position: relative;
    background: #1c1917;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.exp-camera-stage video {
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    display: block;
}

/*
 * La guía de encuadre. Un documento centrado y completo sale mucho mejor, y una
 * marca lo dice sin texto: quien enfoca no está leyendo instrucciones.
 */
.exp-camera-guide {
    position: absolute;
    inset: 8%;
    border: 2px dashed rgba(255, 255, 255, .75);
    border-radius: 6px;
    pointer-events: none;
}

.exp-camera-error {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--erp-danger-bg, #ffe4e6);
    color: var(--erp-danger, #be123c);
    font-size: 13px;
}

/* --- Lectura en cola -------------------------------------------------------- */

/*
 * Se dice que hay una lectura en camino en vez de fingir que ya está todo
 * leído: si la tarjeta se quedara igual, quien sube el documento pensaría que
 * la lectura automática no funciona.
 */
.exp-queued {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 5px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* --- Ligas de carga, en el panel ------------------------------------------ */

.exp-share-table td { vertical-align: middle; }

/*
 * La lista de documentos que se piden. Con altura acotada y desplazamiento
 * propio: un expediente con cuarenta requisitos convertiría la modal en una
 * página de tres pantallas y el botón de crear quedaría fuera de la vista.
 */
.exp-share-picker {
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--erp-border, #e7e5e4);
    border-radius: 8px;
    background: var(--erp-surface-2, #fafaf9);
}

.exp-share-picker .checkbox { margin: 2px 0; }

/* --- El portal público ----------------------------------------------------- */

/*
 * Estas reglas se cargan TAMBIÉN en el área de clientes, que tiene su propio
 * tema. Por eso el portal define sus propios espaciados en vez de apoyarse en
 * los del panel: lo único que comparte de verdad son los componentes `exp-`
 * (tarjetas de documento, etiquetas de estado, zona de soltar y la cámara), que
 * es justo lo que se quería reutilizar.
 */
.exp-portal {
    max-width: 820px;
    margin: 24px auto 48px;
}

.exp-portal-narrow { max-width: 460px; }

.exp-portal-head h3 {
    margin: 0 0 6px;
    font-weight: 600;
}

/* El recado de quien manda la liga: lo único que escribió una persona. */
.exp-portal-message {
    margin: 14px 0 0;
    padding: 10px 16px;
    border-left: 3px solid var(--erp-border-strong, #cbd5e1);
    font-size: 14px;
    color: var(--erp-ink-soft, #334155);
}

/*
 * La barra de avance. En un portal público es lo que hace que alguien termine:
 * ver que le queda poco. Se cuenta sobre lo que se le pidió, no sobre el
 * expediente entero.
 */
.exp-portal-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 8px;
}

.exp-portal-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--erp-surface-3, #e7e5e4);
    overflow: hidden;
}

.exp-portal-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--erp-ok, #059669);
    transition: width .3s ease;
}

.exp-portal-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--erp-ink-soft, #57534e);
    white-space: nowrap;
}

.exp-portal-section {
    margin: 26px 0 10px;
    font-size: 15px;
    font-weight: 600;
}

.exp-portal-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.exp-portal-item {
    padding: 16px 18px;
    margin-bottom: 12px;
    border: 1px solid var(--erp-border, #e7e5e4);
    border-radius: 10px;
    background: var(--erp-surface, #fff);
}

/* Lo ya entregado baja y se atenúa, pero no se esconde: ver lo que ya mandó es
   la mitad de la tranquilidad de quien aporta. */
.exp-portal-done .exp-portal-item { background: var(--erp-surface-2, #fafaf9); }

.exp-portal-item-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.exp-portal-item-title {
    flex: 1;
    line-height: 1.5;
}

.exp-portal-item-title strong { margin-right: 6px; }

.exp-portal-instructions {
    margin: 8px 0 0 34px;
    font-size: 13px;
    color: var(--erp-ink-muted, #78716c);
}

/*
 * La observación por la que se le devolvió el documento. Es lo más importante
 * de la tarjeta cuando existe -sin ella el cliente vuelve a subir lo mismo- y
 * por eso se pinta con fondo, no como una línea gris más.
 */
.exp-portal-observation {
    display: flex;
    gap: 8px;
    margin: 10px 0 0 34px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--erp-warn-bg, #fef3c7);
    color: var(--erp-warn, #b45309);
    font-size: 13px;
}

.exp-portal-files {
    list-style: none;
    margin: 10px 0 0 34px;
    padding: 0;
    font-size: 13px;
}

.exp-portal-files li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.exp-portal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0 34px;
}

.exp-portal-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--erp-ink-muted, #78716c);
}

.exp-portal-date label {
    margin: 0;
    font-weight: 400;
}

.exp-portal-date input { width: 160px; }

.exp-portal-foot {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--erp-border, #e7e5e4);
}

/* --- Código de acceso y pantallas de «ya no sirve» ------------------------- */

.exp-portal-card {
    padding: 32px 28px;
    border: 1px solid var(--erp-border, #e7e5e4);
    border-radius: 12px;
    background: var(--erp-surface, #fff);
    text-align: center;
}

.exp-portal-card h3 {
    margin: 14px 0 8px;
    font-size: 19px;
    font-weight: 600;
}

.exp-portal-card form { text-align: left; }

.exp-portal-lock {
    font-size: 30px;
    color: var(--erp-ink-muted, #a8a29e);
}

.exp-portal-closed .exp-portal-lock { color: var(--erp-ink-faint, #d6d3d1); }

/*
 * El código se teclea una vez y viene de otro canal: se pinta espaciado y
 * centrado para que se lea mientras alguien lo dicta por teléfono.
 */
.exp-pin-input {
    text-align: center;
    letter-spacing: .35em;
    font-weight: 600;
}

/* --- Móvil ---------------------------------------------------------------- */

/*
 * Buena parte de la gente abre el enlace desde el teléfono -es donde está la
 * cámara-, así que las sangrías de 34px que alinean con el icono se quitan: en
 * una pantalla estrecha roban la mitad del ancho útil.
 */
@media (max-width: 600px) {
    .exp-portal { margin: 12px auto 32px; }

    .exp-portal-instructions,
    .exp-portal-observation,
    .exp-portal-files,
    .exp-portal-actions {
        margin-left: 0;
    }

    .exp-portal-actions .exp-drop { width: 100%; }

    .exp-portal-date input { width: 140px; }
}

/* --- El portal del CLIENTE (con sesión) ----------------------------------- */

/*
 * Es la tercera puerta del motor y no comparte contenedor con la liga por
 * token: `.exp-portal` lleva un `max-width` de 820 px porque allí la pantalla
 * es un folio suelto sin menú, y aquí vive dentro del `.container` del portal,
 * con su barra de navegación y su ancho. Lo que SÍ se reutiliza tal cual son
 * los componentes de dentro -`exp-portal-item`, `exp-drop`, `exp-tag`,
 * `exp-req-icon`, la barra de avance-, que es justo lo que se quería compartir:
 * un arreglo en la tarjeta de documento vale para las tres puertas.
 */
.exp-cp {
    margin: 8px 0 40px;
}

.exp-cp-head {
    margin-bottom: 18px;
}

.exp-cp-head h4 {
    margin: 0 0 4px;
    font-weight: 600;
}

.exp-cp-head p {
    margin: 0;
}

.exp-cp-back {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
}

/* --- El listado de expedientes -------------------------------------------- */

.exp-cp-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.exp-cp-card {
    margin-bottom: 12px;
    border: 1px solid var(--erp-border, #e7e5e4);
    border-radius: 10px;
    background: var(--erp-surface, #fff);
    /*
     * La franja de color de la izquierda dice de un vistazo si hay algo que
     * hacer, y por eso NO se apoya en el color de acento de la instalación: el
     * cliente lo elige y podría acabar siendo el mismo verde para «resuelto» y
     * para «te falta algo».
     */
    border-left: 4px solid var(--erp-border-strong, #d6d3d1);
    overflow: hidden;
}

.exp-cp-emerald { border-left-color: #10b981; }
.exp-cp-sky     { border-left-color: #0ea5e9; }
.exp-cp-amber   { border-left-color: #f59e0b; }

.exp-cp-bar-emerald { background: #10b981 !important; }
.exp-cp-bar-sky     { background: #0ea5e9 !important; }
.exp-cp-bar-amber   { background: #f59e0b !important; }

/*
 * Toda la tarjeta es el enlace, no sólo el título: en el móvil un enlace de
 * texto de 14 px es un objetivo de pulsación demasiado pequeño, y quien entra
 * al portal desde el teléfono es la mitad de la gente.
 */
.exp-cp-card-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px 24px;
    grid-template-areas: 'main progress go' 'flags flags go';
    align-items: center;
    gap: 6px 18px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.exp-cp-card-link:hover,
.exp-cp-card-link:focus {
    background: var(--erp-surface-2, #fafaf9);
    color: inherit;
    text-decoration: none;
}

.exp-cp-card-main     { grid-area: main; min-width: 0; }
.exp-cp-card-progress { grid-area: progress; }
.exp-cp-card-flags    { grid-area: flags; }

.exp-cp-card-main strong {
    display: inline-block;
    margin-right: 8px;
    font-weight: 600;
}

.exp-cp-card-main > span {
    margin-right: 6px;
}

.exp-cp-card-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp-cp-card-flags:empty { display: none; }

.exp-cp-card-flags .exp-tag {
    margin-right: 4px;
}

.exp-cp-card-go {
    grid-area: go;
    text-align: right;
    color: var(--erp-ink-faint, #a8a29e);
}

/* --- El Cuadro Perfil, de sólo lectura ------------------------------------ */

/*
 * Va plegado y al final a propósito: no es a lo que el cliente ha venido. Pero
 * está, porque es donde detecta que su domicilio fiscal está mal escrito antes
 * de que salga impreso en una carta.
 *
 * Se usa `<details>` y no un acordeón de Bootstrap: no necesita JavaScript, y
 * el área de clientes no carga el del panel.
 */
.exp-cp-profile {
    margin-top: 26px;
    padding: 14px 16px;
    border: 1px solid var(--erp-border, #e7e5e4);
    border-radius: 10px;
    background: var(--erp-surface-2, #fafaf9);
}

.exp-cp-profile > summary {
    cursor: pointer;
    font-weight: 600;
}

.exp-cp-profile > summary > i {
    margin-right: 6px;
    color: var(--erp-ink-muted, #78716c);
}

.exp-cp-profile-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px 18px;
    margin: 12px 0 0;
}

.exp-cp-profile-list dt {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--erp-ink-muted, #78716c);
}

.exp-cp-profile-list dd {
    margin: 0;
    word-break: break-word;
}

/* --- Móvil ---------------------------------------------------------------- */

/*
 * Por debajo de 700 px la tarjeta pasa a una columna: la rejilla de tres
 * columnas dejaba la barra de avance en 60 px de ancho, donde no se distingue
 * un 20 % de un 80 %.
 */
@media (max-width: 700px) {
    .exp-cp-card-link {
        grid-template-columns: minmax(0, 1fr) 20px;
        grid-template-areas: 'main go' 'progress progress' 'flags flags';
        gap: 8px 10px;
    }

    .exp-cp-card-progress { width: 100%; }
}