/**
 * nf-file — SELECTOR DE ARCHIVOS de la casa.
 *
 * Sustituye al control nativo («Seleccionar archivo · Ningún archivo
 * seleccionado»), que es el del sistema operativo: sale en el idioma del
 * navegador, no se puede estilar y no dice nada de lo que espera la pantalla.
 *
 * El input ORIGINAL sigue ahí (dentro del <label>, invisible pero enfocable):
 * así el formulario se envía igual, `required` se sigue reportando —un
 * display:none no se puede enfocar y el navegador se niega a enviar SIN decir
 * por qué— y pulsar la zona abre el diálogo del sistema sin una línea de JS.
 * El JS (assets/js/nf-file.js) solo AÑADE: arrastrar, la lista de lo elegido
 * y el botón de quitar.
 *
 * Los colores van con reserva (var(--rv-*, #...)): este componente aterriza
 * también en pantallas viejas de Bootstrap que no cargan estilos_nf.php.
 */

.nff { display: block; }

/* ── La zona ──────────────────────────────────────────────────────────── */
.nff-zone {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%; box-sizing: border-box;
    border: 1.5px dashed var(--rv-border, #E8EBEE);
    border-radius: 11px; padding: 13px 15px;
    background: var(--rv-zebra, #FBFCFD);
    cursor: pointer; margin: 0;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.nff-zone:hover { border-color: var(--rv-primary, #2E86AB); background: #F4F9FC; }
/* El foco se ve en la ZONA aunque lo tenga el input escondido: es lo que se
   pinta, y sin esto navegar con el tabulador no dejaba rastro. */
.nff-zone:focus-within {
    border-color: var(--rv-primary, #2E86AB); background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 134, 171, .18);
}
.nff-zone.dentro {
    border-style: solid; border-color: var(--rv-primary, #2E86AB);
    background: var(--rv-primary-tint, #EAF3F7);
}
/* Invisible pero ENFOCABLE (nunca display:none) y sin capturar el clic, que
   ya lo recoge el label: con pointer-events el diálogo se abría dos veces. */
.nff-zone input[type=file] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
    left: 14px; bottom: 6px;   /* donde el navegador ancla el aviso de «rellena esto» */
}

.nff-ico {
    width: 34px; height: 34px; flex: none; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rv-primary-tint, #EAF3F7); color: var(--rv-primary, #2E86AB);
    font-size: .95rem;
}
.nff-txt { min-width: 0; line-height: 1.35; }
.nff-t1 { display: block; font-size: .88rem; color: var(--rv-text, #1C2634); }
.nff-lnk { color: var(--rv-primary, #2E86AB); font-weight: 600; text-decoration: underline; }
.nff-t2 { display: block; font-size: .76rem; color: var(--rv-muted, #5F6E7C); margin-top: 1px; }

/* Deshabilitado: se ve que no se puede, y no se puede. */
.nff-zone.nff-off { cursor: not-allowed; opacity: .6; background: #F1F3F5; }
.nff-zone.nff-off:hover { border-color: var(--rv-border, #E8EBEE); background: #F1F3F5; }

/* ── Lo elegido ───────────────────────────────────────────────────────── */
.nff-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.nff-item {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--rv-border, #E8EBEE);
    border-radius: 9px; padding: 7px 10px;
    font-size: .85rem; color: var(--rv-text, #1C2634);
    animation: nff-entra .18s ease-out;
}
@keyframes nff-entra { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.nff-thumb {
    width: 32px; height: 32px; flex: none; border-radius: 7px; object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    background: var(--rv-primary-tint, #EAF3F7); color: var(--rv-primary, #2E86AB);
    font-size: .8rem; overflow: hidden;
}
.nff-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Los tamaños son datos tabulares: en mono se comparan de un vistazo. */
.nff-peso {
    margin-left: auto; flex: none; font-family: var(--rv-mono, ui-monospace, monospace);
    font-size: .76rem; color: var(--rv-muted, #5F6E7C);
}
.nff-x {
    flex: none; border: 0; background: none; cursor: pointer; padding: 2px 4px;
    color: var(--rv-muted, #5F6E7C); font-size: 1.15rem; line-height: 1; border-radius: 5px;
}
.nff-x:hover { color: var(--rv-danger, #C03A3A); background: #FBEAEA; }
.nff-x:focus-visible { outline: 2px solid var(--rv-primary, #2E86AB); outline-offset: 1px; }

/* Un archivo que no encaja con lo que la pantalla acepta: se dice cuál y por
   qué, en vez de descartarlo en silencio (soltar no filtra como el diálogo). */
.nff-err {
    margin-top: 6px; font-size: .8rem; font-weight: 600;
    color: var(--rv-warn-strong, #8A5F00);
}

@media (prefers-reduced-motion: reduce) {
    .nff-zone, .nff-item { transition: none; animation: none; }
}