/* Centro de cobros — escala única: todo valor sale de aquí.
   Tema de tech.latamprovider.com (como Publicora): Public Sans, su azul
   #4274fe y esquinas de 8 px. Su azul y sus grises claros no pasan 4.5:1
   sobre blanco, así que el texto usa las variantes oscurecidas. */
:root {
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;

    --t-1: 0.75rem;  --t-2: 0.8125rem; --t-3: 0.875rem;
    --t-4: 1rem;     --t-5: 1.25rem;   --t-6: 1.5625rem;

    --p-normal: 400; --p-medio: 500; --p-fuerte: 600;

    --radio: 8px;          /* el de tech.latamprovider.com */
    --linea: 1px;

    --fondo: #ffffff;      /* superficies */
    --fondo-suave: #f5f6f7; /* fondo de página */
    --tinta: #1b1b28;      /* 16.9:1 sobre blanco */
    --gris: #5f5f6a;       /* 6.3:1 */
    --borde: #dfdfe6;
    --acento: #3461e8;     /* el azul de la marca, oscurecido: 5.0:1 */
    --acento-marca: #4274fe; /* el de la marca, solo en líneas y adornos */
    --sobre-acento: #ffffff;
    --bien: #1d6b3a;       /* 6.6:1 */
    --aviso: #9a6400;      /* 5.0:1 */
    --mal: #b3261e;        /* 6.6:1 */
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #212129; --fondo-suave: #17171f; --tinta: #f0f0f4; --gris: #a3a3ad;
        --borde: #33333f; --acento: #7d9dff; --acento-marca: #7d9dff; --sobre-acento: #17171f;
        --bien: #5cc98a; --aviso: #f0b132; --mal: #ff8a80;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 100%; }
body { margin: 0; background: var(--fondo-suave); color: var(--tinta); font-size: var(--t-3); line-height: 1.5; }
a { color: var(--acento); }
input, button, select, textarea { font: inherit; color: inherit; }
h1 { font-size: var(--t-6); font-weight: var(--p-fuerte); margin: 0 0 var(--e-2); }
h2 { font-size: var(--t-5); font-weight: var(--p-fuerte); margin: var(--e-6) 0 var(--e-3); }
h3 { font-size: var(--t-4); font-weight: var(--p-fuerte); margin: var(--e-5) 0 var(--e-2); }
p { margin: 0 0 var(--e-3); }
.gris { color: var(--gris); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--t-2); }

/* Barra superior */
.barra { background: var(--fondo); border-bottom: var(--linea) solid var(--borde); }
.barra-dentro { max-width: 1120px; margin: 0 auto; padding: 0 var(--e-4); display: flex; align-items: center; gap: var(--e-5); min-height: 3.5rem; flex-wrap: wrap; }
.marca { font-size: var(--t-4); font-weight: var(--p-fuerte); color: var(--acento); text-decoration: none; }
.nav { display: flex; gap: var(--e-4); flex-wrap: wrap; flex: 1; }
.nav a { color: var(--gris); text-decoration: none; padding: var(--e-3) 0; border-bottom: 2px solid transparent; }
.nav a.activo { color: var(--tinta); border-bottom-color: var(--acento-marca); font-weight: var(--p-medio); }
.usuario { display: flex; align-items: center; gap: var(--e-3); color: var(--gris); font-size: var(--t-2); }

/* Contenido: una superficie, separada por líneas */
.contenido { max-width: 1120px; margin: 0 auto; padding: var(--e-5) var(--e-4) var(--e-7); }
.superficie { background: var(--fondo); border: var(--linea) solid var(--borde); padding: var(--e-5); }
.superficie + .superficie { margin-top: var(--e-4); }

/* Avisos */
.aviso-ok, .aviso-error, .aviso-token { padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); border: var(--linea) solid var(--borde); border-left: 3px solid var(--bien); background: var(--fondo); }
.aviso-error { border-left-color: var(--mal); }
.aviso-token { border-left-color: var(--acento); }
.aviso-token code { display: block; margin: var(--e-2) 0; padding: var(--e-2) var(--e-3); background: var(--fondo-suave); border: var(--linea) solid var(--borde); border-radius: var(--radio); word-break: break-all; }

/* Cifras en franja, divididas por líneas verticales */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: var(--linea) solid var(--borde); background: var(--fondo); }
.cifras > div { padding: var(--e-4); border-left: var(--linea) solid var(--borde); }
.cifras > div:first-child { border-left: 0; }
.cifras dt { color: var(--gris); font-size: var(--t-2); }
.cifras dd { margin: var(--e-1) 0 0; font-size: var(--t-5); font-weight: var(--p-fuerte); font-variant-numeric: tabular-nums; }
.cifras dd small { display: block; font-size: var(--t-2); font-weight: var(--p-normal); color: var(--gris); }

/* Tablas */
table { width: 100%; border-collapse: collapse; background: var(--fondo); }
th, td { padding: var(--e-2) var(--e-3); border-bottom: var(--linea) solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: var(--t-2); font-weight: var(--p-medio); color: var(--gris); }
.tabla-envuelta { overflow-x: auto; border: var(--linea) solid var(--borde); }
.tabla-envuelta table { border: 0; }

/* Estados: el color dice algo, no adorna */
.estado { font-size: var(--t-2); font-weight: var(--p-medio); }
.estado-acreditado, .estado-acreditar { color: var(--bien); }
.estado-revision, .estado-ya_reclamado, .estado-no_encontrado { color: var(--aviso); }
.estado-usado, .estado-error_proveedor, .estado-liberado { color: var(--mal); }

/* Formularios */
label { display: block; font-weight: var(--p-medio); margin-bottom: var(--e-1); }
.campo { margin-bottom: var(--e-4); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-4); }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
    width: 100%; font: inherit; color: var(--tinta); background: var(--fondo);
    padding: var(--e-2) var(--e-3); border: var(--linea) solid var(--borde); border-radius: var(--radio);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.casilla { display: flex; align-items: center; gap: var(--e-2); font-weight: var(--p-normal); }
.ayuda { color: var(--gris); font-size: var(--t-2); margin-top: var(--e-1); }
button, .boton { font: inherit; font-weight: var(--p-medio); cursor: pointer; display: inline-block; text-decoration: none;
    padding: var(--e-2) var(--e-4); border-radius: var(--radio); border: var(--linea) solid var(--acento);
    background: var(--acento); color: var(--sobre-acento); }
.boton-borde { background: var(--fondo); color: var(--acento); }
.boton-mini { padding: var(--e-1) var(--e-3); font-size: var(--t-2); }
.boton-peligro { background: var(--fondo); color: var(--mal); border-color: var(--mal); }
.acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }

.filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); }
.filtros > * { width: auto; }
.paginacion { margin-top: var(--e-4); }

/* Entrar */
.entrar { max-width: 360px; margin: 12vh auto; }

/* Documentación */
.docs { max-width: 860px; margin: 0 auto; padding: var(--e-6) var(--e-4) var(--e-7); background: var(--fondo); }
.docs pre { background: var(--fondo-suave); border: var(--linea) solid var(--borde); padding: var(--e-3); overflow-x: auto; font-size: var(--t-2); border-radius: var(--radio); }
.docs code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--t-2); }
.docs pre code { font-size: inherit; }
.docs table { margin: var(--e-3) 0; }
.docs h2 { border-bottom: var(--linea) solid var(--borde); padding-bottom: var(--e-2); }

@media (max-width: 640px) {
    .barra-dentro { gap: 0 var(--e-4); padding-top: var(--e-2); }
    .marca { flex: 1; }
    .nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: var(--e-4); }
    .nav a { white-space: nowrap; }
    .usuario > span { display: none; }
    .cifras > div { border-left: 0; border-top: var(--linea) solid var(--borde); }
    .cifras > div:first-child { border-top: 0; }
}

/* Libro de pagos */
.estado-paid, .estado-processed, .estado-entregado { color: var(--bien); }
.estado-detected, .estado-pending, .estado-received, .estado-pendiente, .estado-ignored, .estado-unknown { color: var(--aviso); }
.estado-failed, .estado-refunded, .estado-cancelled, .estado-disputed, .estado-revertido, .estado-fallido { color: var(--mal); }
h1 .estado { font-size: var(--t-4); vertical-align: middle; }

.pestanas { display: flex; gap: var(--e-5); border-bottom: var(--linea) solid var(--borde); margin-bottom: var(--e-4); overflow-x: auto; }
.pestanas a { color: var(--gris); text-decoration: none; padding: var(--e-2) 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a.activo { color: var(--tinta); border-bottom-color: var(--acento-marca); font-weight: var(--p-medio); }

.ficha { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; margin: 0; }
.ficha dt, .ficha dd { padding: var(--e-2) 0; border-bottom: var(--linea) solid var(--borde); margin: 0; }
.ficha dt { color: var(--gris); }
.ficha dd { overflow-wrap: anywhere; }

.crudo { background: var(--fondo); border: var(--linea) solid var(--borde); padding: var(--e-3); overflow-x: auto; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--t-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; }
.bloque { display: block; padding: var(--e-2) var(--e-3); background: var(--fondo-suave); border: var(--linea) solid var(--borde); border-radius: var(--radio); font-size: var(--t-2); overflow-wrap: anywhere; margin-bottom: var(--e-4); }
.codigo-grande { font-size: var(--t-6); letter-spacing: 0; text-align: center; }
.lista { margin: 0; padding-left: var(--e-5); }
.lista li { padding: var(--e-1) 0; }

@media (max-width: 640px) {
    .ficha { grid-template-columns: 1fr; }
    .ficha dt { border-bottom: 0; padding-bottom: 0; }
}

/* Los filtros van en línea, cada uno a su medida */
.filtros input[type=text], .filtros input[type=search], .filtros input[type=date], .filtros select { width: auto; max-width: 100%; }
.filtros input[inputmode=decimal] { width: 7rem; }
.filtros input[type=search] { width: 12rem; }

/* Esquinas del tema en las superficies */
.superficie, .cifras, .tabla-envuelta, .aviso-ok, .aviso-error, .aviso-token, .crudo { border-radius: var(--radio); }
.cifras { overflow: hidden; }