/* ==========================================================================
   Tema del portal de pagos PSE — hoja compartida por todas las vistas.
   Autónoma: ninguna vista que la use carga Bootstrap, Color Admin ni FontAwesome.
   Escrita móvil primero: los ajustes de escritorio van en @media (min-width).
   ========================================================================== */

/* Inter variable, subconjunto latino (47 KB). Es una tipografía de interfaz:
   altura-x alta, 1/l/I bien diferenciados y cifras tabulares, así que se lee
   mejor que Archivo en los tamaños pequeños de móvil. Una sola familia para
   títulos y texto: antes se mezclaba Archivo con la del sistema. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Degradado del lienzo: arranca en gris claro arriba a la izquierda y cae a
       casi negro abajo a la derecha, como el fondo de referencia. */
    --carbon-1: #3E434C;
    --carbon-2: #22252B;
    --carbon-3: #15171B;

    --vidrio: rgba(13, 15, 20, 0.25);
    --vidrio-alto: rgba(255, 255, 255, 0.05);
    --vidrio-hover: rgba(255, 255, 255, 0.09);

    --borde: rgba(255, 255, 255, 0.13);
    --borde-suave: rgba(255, 255, 255, 0.07);

    --texto-1: #FFFFFF;
    --texto-2: rgba(255, 255, 255, 0.80);
    --texto-3: rgba(255, 255, 255, 0.58);
    --texto-4: rgba(255, 255, 255, 0.44);

    --oro: #D8A83C;
    --oro-claro: #EDCC7C;
    --oro-oscuro: #B58A2B;   /* hover de botón */
    --oro-hundido: #9C761F;  /* botón pulsado */
    --oro-tenue: rgba(216, 168, 60, 0.14);

    --rojo: #F58A80;
    --rojo-tenue: rgba(245, 138, 128, 0.12);
    --verde: #6FD3A3;
    --verde-tenue: rgba(111, 211, 163, 0.13);
    --ambar: #F0C24B;
    --ambar-tenue: rgba(240, 194, 75, 0.13);

    --display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Solo para el dominio del portal: en monoespaciada se distingue mejor un
       dominio legítimo de uno parecido. */
    --mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

    --radio: 8px;
    --radio-control: 5px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El display de la hoja de usuario gana al [hidden] de la hoja del navegador */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--carbon-2);
    color: var(--texto-2);
    font-family: var(--texto);
    /* 15px de base: Inter aguanta bien este tamaño y la carátula deja de verse
       ampliada en móvil, que es donde paga la mayoría. */
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; }

:focus-visible {
    outline: 1.5px solid var(--oro);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Columna flex y no rejilla de 3 filas: así da igual cuántas bandas haya entre
   la cinta y el pie (la barra de pasos es una más) y el lienzo sigue ocupando
   el hueco restante. */
.pagina {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, var(--carbon-1) 0%, var(--carbon-2) 50%, var(--carbon-3) 100%);
}

.pagina > .lienzo { flex: 1 1 auto; min-height: 0; }
.pagina > .cinta, .pagina > .banda-pasos, .pagina > .pie { flex: none; }

.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cabecera y pie
   -------------------------------------------------------------------------- */

.cinta {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--borde-suave);
    background: rgba(0, 0, 0, 0.16);
}

.cinta__interior {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marca { display: block; width: auto; max-width: 44vw; object-fit: contain; }
.marca--pse { height: 27px; }
.marca--coop { height: 42px; margin: -7px 0; }

.pie {
    position: relative;
    z-index: 2;
    padding: 1rem;
    border-top: 1px solid var(--borde-suave);
    background: rgba(0, 0, 0, 0.22);
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--texto-4);
}

@media (min-width: 640px) {
    .cinta__interior { padding: 0.75rem 1.75rem; }
    .marca--pse { height: 42px; }
    .marca--coop { height: 62px; margin: -9px 0; }
    .pie { padding: 1.25rem 2.5rem; }
}

/* --------------------------------------------------------------------------
   Pasos del flujo: Consulta → Facturas → Pago
   Es una <ol>, así que el orden se entiende también sin CSS. El paso actual
   lleva aria-current="step"; los ya pasados, la clase .paso-hecho.
   -------------------------------------------------------------------------- */

/* La banda ocupa todo el ancho para que su línea inferior llegue a los bordes,
   igual que la cinta; el contenido se centra dentro con la misma medida. */
.banda-pasos {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--borde-suave);
    background: rgba(0, 0, 0, 0.10);
}

.pasos {
    display: flex;
    align-items: center;
    justify-content: center;
    /* safe center: en 320px el contenido apenas cabe y con center a secas el
       primer paso quedaría recortado sin poder alcanzarlo al desplazar. La
       declaración de arriba queda de reserva donde safe no esté soportado. */
    justify-content: safe center;
    gap: 0.375rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.625rem 1rem;
    list-style: none;
    counter-reset: paso;
    overflow-x: auto;
    scrollbar-width: none;
}

.pasos::-webkit-scrollbar { display: none; }

.pasos__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    counter-increment: paso;
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--texto-4);
    white-space: nowrap;
}

/* El número va en un ::before y no en el marcado: así el lector de pantalla
   lee "Consulta" y no "1 Consulta 2 Facturas". */
.pasos__item::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* La línea que une un paso con el siguiente. Se encoge antes que los rótulos. */
.pasos__item:not(:last-child)::after {
    content: '';
    width: clamp(0.5rem, 4vw, 3rem);
    height: 1px;
    margin: 0 0.125rem;
    background: var(--borde);
}

.pasos__item[aria-current="step"] { color: var(--texto-1); }

.pasos__item[aria-current="step"]::before {
    background: var(--oro);
    border-color: var(--oro);
    color: #1A1206;
}

.pasos__item.paso-hecho { color: var(--texto-3); }
.pasos__item.paso-hecho::before { border-color: rgba(216, 168, 60, 0.5); color: var(--oro-claro); }

@media (min-width: 640px) {
    .pasos { padding: 0.75rem 1.75rem; gap: 0.5rem; }
    .pasos__item { font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   Lienzo, partículas y columna
   -------------------------------------------------------------------------- */

.lienzo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.875rem;
    overflow: hidden;
}

/* Campo de partículas: se genera en canvas en cada carga y se pinta una sola
   vez. Sin bucle de animación, así que no consume CPU tras el primer fotograma. */
.particulas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.columna {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

.columna--ancha { max-width: 1060px; }
.columna--estrecha { max-width: 540px; }

@media (min-width: 640px) {
    .lienzo { padding: 2rem 1.75rem; }
}

@media (min-width: 1024px) {
    .lienzo { padding: 2.75rem 2.5rem; }
}

/* --------------------------------------------------------------------------
   Tarjeta
   -------------------------------------------------------------------------- */

.terminal {
    background: var(--vidrio);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}

.terminal + .terminal { margin-top: 1rem; }

.terminal__cabeza {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6875rem 1rem;
    border-bottom: 1px solid var(--borde-suave);
    background: rgba(255, 255, 255, 0.03);
}

.terminal__cuerpo { padding: 1.125rem 1rem; }

@media (min-width: 640px) {
    .terminal__cabeza {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
    }
    .terminal__cuerpo { padding: 1.5rem; }
}

.eyebrow {
    margin: 0;
    font-family: var(--display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--texto-4);
}

.paso {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oro);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.paso::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--oro);
    flex: none;
}

.titulo {
    margin: 0 0 0.375rem;
    font-family: var(--display);
    font-size: clamp(1.1875rem, 1.05rem + 0.85vw, 1.5rem);
    font-weight: 650;
    letter-spacing: -0.014em;
    line-height: 1.25;
    color: var(--texto-1);
    text-wrap: balance;
}

.entradilla {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--texto-3);
    text-wrap: pretty;
}

.subtitulo {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--display);
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--texto-1);
}

.subtitulo:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Campos de formulario
   -------------------------------------------------------------------------- */

.campo { margin-bottom: 1rem; }

.campo__etiqueta {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--texto-2);
}

.campo__etiqueta .req { color: var(--oro); }

.campo__fila { display: flex; gap: 0.5rem; align-items: stretch; }

/* 44px es el alto mínimo cómodo para tocar con el pulgar; el texto va a 1rem
   para que iOS no haga zoom al enfocar el campo. */
.campo__entrada,
.campo__select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-control);
    background: var(--vidrio-alto);
    color: var(--texto-1);
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Select nativo: en móvil abre la rueda del sistema, que es lo más cómodo */
.campo__select {
    font-weight: 500;
    letter-spacing: 0;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px 18px;
    cursor: pointer;
}

.campo__select option { background: #23262B; color: #fff; }

.campo__entrada::placeholder { color: var(--texto-4); letter-spacing: 0; font-weight: 400; font-size: 0.9375rem; }

.campo__entrada:hover,
.campo__select:hover { border-color: rgba(255, 255, 255, 0.24); }

.campo__entrada:focus,
.campo__select:focus {
    outline: none;
    border-color: var(--oro);
    background: var(--vidrio-hover);
    box-shadow: 0 0 0 2px rgba(216, 168, 60, 0.18);
}

.campo__entrada:disabled,
.campo__select:disabled { opacity: 0.55; cursor: not-allowed; }

.campo__ayuda { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--texto-4); }

/* Mensaje de validación. Se conservan los nombres is-invalid / invalid-feedback
   porque el JS de pago los usa para marcar y limpiar errores. */
.invalid-feedback {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rojo);
}

.campo__entrada.is-invalid,
.campo__select.is-invalid,
.was-validated .campo__entrada:invalid,
.was-validated .campo__select:invalid {
    border-color: var(--rojo);
    box-shadow: 0 0 0 2px rgba(245, 138, 128, 0.16);
}

.campo__entrada.is-invalid ~ .invalid-feedback,
.campo__select.is-invalid ~ .invalid-feedback,
.was-validated .campo__entrada:invalid ~ .invalid-feedback,
.was-validated .campo__select:invalid ~ .invalid-feedback { display: block; }

/* Rejilla de campos: una columna en móvil, dos a partir de tableta */
.rejilla { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }

@media (min-width: 640px) {
    .rejilla--2 { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1.125rem;
    border: 1px solid var(--oro);
    border-radius: var(--radio-control);
    background: var(--oro);
    color: #1A1206;
    font-family: var(--display);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* Al pasar el cursor el dorado se oscurece; al pulsar, un punto más */
.boton:hover:not(:disabled) { background: var(--oro-oscuro); border-color: var(--oro-oscuro); color: #1A1206; }
.boton:active:not(:disabled) { background: var(--oro-hundido); border-color: var(--oro-hundido); color: #1A1206; }

.boton:disabled {
    background: transparent;
    border-color: var(--borde);
    color: var(--texto-4);
    cursor: not-allowed;
}

.boton svg { width: 16px; height: 16px; flex: none; }

.boton--bloque { width: 100%; }

.boton--secundario { background: transparent; border-color: var(--borde); color: var(--texto-2); }
.boton--secundario:hover:not(:disabled) { background: var(--vidrio-hover); border-color: var(--texto-3); color: var(--texto-1); }

.boton--fila { height: 36px; padding: 0 0.8125rem; font-size: 0.8125rem; gap: 0.4375rem; }
.boton--fila svg { width: 14px; height: 14px; }

.boton__girador {
    display: none;
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.boton.cargando .boton__girador { display: block; }
.boton.cargando > svg { display: none; }

/* Trabajando no es lo mismo que inhabilitado: sigue dorado */
.boton.cargando:disabled {
    background: var(--oro);
    border-color: var(--oro);
    color: #1A1206;
    cursor: progress;
}

/* --------------------------------------------------------------------------
   Notas y mensajes en bloque
   -------------------------------------------------------------------------- */

.nota {
    display: flex;
    gap: 0.6875rem;
    margin: 1rem 0 0;
    padding: 0.8125rem 0.9375rem;
    border: 1px solid var(--borde-suave);
    border-left: 3px solid rgba(152, 0, 128, 0.44);
    border-radius: var(--radio);
    background: var(--vidrio-alto);
}

.nota > svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--texto-3); }
.nota p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--texto-2); }
.nota strong { color: var(--texto-1); font-weight: 700; }

.nota__titulo {
    display: block;
    margin-bottom: 0.125rem;
    font-family: var(--display);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--texto-1);
}

.nota--oro { border-color: rgba(216, 168, 60, 0.26); border-left-color: var(--oro); background: var(--oro-tenue); }
.nota--oro > svg { color: var(--oro); }
.nota--oro .nota__titulo { color: var(--oro-claro); }

.nota--aviso { border-color: rgba(240, 194, 75, 0.28); border-left-color: var(--ambar); background: var(--ambar-tenue); }
.nota--aviso > svg { color: var(--ambar); }
.nota--aviso .nota__titulo { color: var(--ambar); }

.nota--error { border-color: rgba(245, 138, 128, 0.28); border-left-color: var(--rojo); background: var(--rojo-tenue); }
.nota--error > svg { color: var(--rojo); }
.nota--error .nota__titulo { color: var(--rojo); }

.nota--exito { border-color: rgba(111, 211, 163, 0.28); border-left-color: var(--verde); background: var(--verde-tenue); }
.nota--exito > svg { color: var(--verde); }
.nota--exito .nota__titulo { color: var(--verde); }

/* --------------------------------------------------------------------------
   Página de mensaje (error, sin facturas, mantenimiento, resultado)
   -------------------------------------------------------------------------- */

.mensaje { text-align: center; padding: 2rem 1.25rem; }

.mensaje__icono {
    width: 54px;
    height: 54px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--borde);
    background: var(--vidrio-alto);
}

.mensaje__icono svg { width: 26px; height: 26px; }
.mensaje__icono--exito { border-color: rgba(111, 211, 163, 0.35); background: var(--verde-tenue); color: var(--verde); }
.mensaje__icono--error { border-color: rgba(245, 138, 128, 0.35); background: var(--rojo-tenue); color: var(--rojo); }
.mensaje__icono--aviso { border-color: rgba(240, 194, 75, 0.35); background: var(--ambar-tenue); color: var(--ambar); }
.mensaje__icono--oro { border-color: rgba(216, 168, 60, 0.35); background: var(--oro-tenue); color: var(--oro); }

.mensaje__titulo {
    margin: 0 0 0.5rem;
    font-family: var(--display);
    font-size: clamp(1.1875rem, 1.05rem + 0.8vw, 1.4375rem);
    font-weight: 650;
    letter-spacing: -0.014em;
    color: var(--texto-1);
}

.mensaje__texto { margin: 0 auto; max-width: 48ch; font-size: 0.875rem; color: var(--texto-3); }
.mensaje__acciones { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; }

@media (min-width: 640px) { .mensaje { padding: 2.75rem 2rem; } }

/* --------------------------------------------------------------------------
   Insignias de estado
   -------------------------------------------------------------------------- */

.conteo {
    font-family: var(--display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--texto-4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.125rem 0.4375rem;
    border-radius: 999px;
    font-family: var(--display);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.insignia::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.insignia--vencida { background: var(--rojo-tenue); color: var(--rojo); }
.insignia--vigente { background: var(--verde-tenue); color: var(--verde); }

/* --------------------------------------------------------------------------
   Listas de datos (pares etiqueta/valor)
   -------------------------------------------------------------------------- */

.datos { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }

.datos__par {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--borde-suave);
}

.datos__par:last-child { border-bottom: none; }

.datos dt, .datos__clave { font-size: 0.8125rem; color: var(--texto-4); flex: none; }

.datos dd, .datos__valor {
    margin: 0;
    text-align: right;
    font-family: var(--display);
    font-weight: 600;
    color: var(--texto-1);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.datos__valor--dinero { color: var(--oro-claro); font-size: 0.9375rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   Total destacado
   -------------------------------------------------------------------------- */

.total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.8125rem 0.9375rem;
    border: 1px solid rgba(216, 168, 60, 0.28);
    border-radius: var(--radio);
    background: var(--oro-tenue);
}

.total__clave { font-family: var(--display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oro-claro); }

.total__valor {
    font-family: var(--display);
    font-size: clamp(1.125rem, 0.95rem + 1vw, 1.375rem);
    font-weight: 700;
    color: var(--texto-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Tablas: fichas apiladas en móvil, tabla real desde 760px
   -------------------------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

.tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }

.tabla tr {
    margin-bottom: 0.625rem;
    padding: 0.25rem 0.875rem 0.75rem;
    background: var(--vidrio-alto);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio);
}

.tabla tr:last-child { margin-bottom: 0; }

.tabla td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0;
    border: none;
    border-bottom: 1px solid var(--borde-suave);
    text-align: right;
}

.tabla td::before {
    content: attr(data-etiqueta);
    flex: none;
    font-family: var(--display);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--texto-4);
    text-align: left;
}

.tabla td.col-accion { border-bottom: none; padding-top: 0.75rem; }
.tabla td.col-accion::before { content: none; }
.tabla td.col-accion .boton { width: 100%; }

.col-codigo { font-family: var(--display); font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.col-nombre { font-weight: 600; color: var(--texto-1); }
.col-direccion { color: var(--texto-3); font-size: 0.8125rem; }
.col-deuda { font-family: var(--display); font-weight: 700; color: var(--oro-claro); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 760px) {
    .tabla {
        background: var(--vidrio-alto);
        border: 1px solid var(--borde-suave);
    }

    .tabla thead { position: static; width: auto; height: auto; clip-path: none; }
    .tabla, .tabla tbody, .tabla tr, .tabla td { display: revert; width: auto; }
    .tabla { display: table; width: 100%; }
    .tabla thead { display: table-header-group; }
    .tabla tbody { display: table-row-group; }
    .tabla tr { display: table-row; margin: 0; padding: 0; background: none; border: none; border-radius: 0; }
    .tabla td { display: table-cell; }

    .tabla th {
        padding: 0.5625rem 0.875rem;
        background: rgba(255, 255, 255, 0.04);
        border-bottom: 1px solid var(--borde-suave);
        font-family: var(--display);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--texto-4);
        text-align: left;
        white-space: nowrap;
    }

    .tabla td {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--borde-suave);
        text-align: left;
        vertical-align: middle;
    }

    .tabla tr:last-child td { border-bottom: none; }
    .tabla td::before { content: none; }

    .tabla th.col-codigo, .tabla td.col-codigo,
    .tabla th.col-deuda, .tabla td.col-deuda,
    .tabla th.col-accion, .tabla td.col-accion { width: 1%; white-space: nowrap; }

    .tabla th.col-deuda, .tabla td.col-deuda,
    .tabla th.col-accion, .tabla td.col-accion { text-align: right; }

    .tabla td.col-accion .boton { width: auto; }
}

/* --------------------------------------------------------------------------
   Barra de acción fija (móvil) / en flujo (escritorio)
   -------------------------------------------------------------------------- */

.barra-accion {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: rgba(18, 20, 24, 0.96);
}

.barra-accion__info { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.barra-accion__etiqueta { font-size: 0.8125rem; color: var(--texto-3); }

.barra-accion__total {
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--oro-claro);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.barra-accion__botones { display: flex; gap: 0.625rem; }
.barra-accion__botones .boton { flex: 1 1 auto; }

@media (min-width: 640px) {
    .barra-accion { flex-direction: row; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; }
    .barra-accion__info { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
    .barra-accion__botones .boton { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Aviso flotante (sustituye a SweetAlert2)
   -------------------------------------------------------------------------- */

.aviso {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 80;
    display: none;
    align-items: flex-start;
    gap: 0.75rem;
    width: min(30rem, calc(100vw - 1.5rem));
    padding: 0.9375rem 1.125rem;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--rojo);
    background: rgba(12, 14, 17, 0.96);
    color: var(--texto-1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    font-size: 0.875rem;
    transform: translate(-50%, 0);
}

.aviso.visible { display: flex; animation: sube 0.28s ease both; }
.aviso--aviso { border-left-color: var(--ambar); }

@keyframes sube {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.aviso__texto { flex: 1; }

.aviso__cerrar { flex: none; border: 0; background: none; color: var(--texto-4); cursor: pointer; padding: 0; line-height: 0; }
.aviso__cerrar:hover { color: var(--texto-1); }
.aviso__cerrar svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Modal de confirmación
   Sustituye a confirm() del navegador: algunos usuarios tienen los diálogos
   nativos bloqueados y, además, no se pueden estilar.
   -------------------------------------------------------------------------- */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(6, 7, 9, 0.74);
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.modal.visible { display: flex; animation: modal-entra 0.2s ease both; }

@keyframes modal-entra {
    from { opacity: 0; }
}

.modal__caja {
    width: min(27rem, 100%);
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #1B1E23;
    animation: modal-sube 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes modal-sube {
    from { transform: translateY(10px); opacity: 0; }
}

.modal__titulo {
    margin: 0 0 0.375rem;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 650;
    color: var(--texto-1);
}

.modal__texto { margin: 0; font-size: 0.875rem; color: var(--texto-3); }

.modal__acciones {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.modal__acciones .boton { width: 100%; }

@media (min-width: 480px) {
    .modal__acciones { flex-direction: row; justify-content: flex-end; }
    .modal__acciones .boton { width: auto; }
}

/* --------------------------------------------------------------------------
   Capa de proceso
   -------------------------------------------------------------------------- */

.proceso {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10, 11, 13, 0.88);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.proceso.visible { display: flex; }

.proceso__aro {
    width: 46px;
    height: 46px;
    margin: 0 auto 1.125rem;
    border: 3px solid rgba(255, 255, 255, 0.16);
    border-top-color: var(--oro);
    border-radius: 50%;
    animation: girar 0.85s linear infinite;
}

.proceso__titulo { margin: 0 0 0.375rem; font-family: var(--display); font-size: 1rem; font-weight: 650; color: var(--texto-1); }
.proceso__texto { margin: 0; font-size: 0.875rem; color: var(--texto-3); }

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .aviso.visible { animation: none; }
    .boton__girador, .proceso__aro { animation-duration: 1.6s; }
    * { scroll-behavior: auto !important; }
}