/* Página de informes del cliente. Reutiliza panel.css; solo lo específico.

   MIGRADA A LA PALETA OSCURA DEL PANEL. Esta hoja se quedó escrita para un tema
   CLARO (`#5b636d` de texto, `#e1e5ea` de borde, `#f6f8fa` de fondo de cabecera)
   cuando `panel.css` ya se había migrado a la identidad negra. El resultado, en
   la página donde el cliente recoge lo que ha pagado: las cabeceras de la tabla
   pintaban un fondo casi blanco y heredaban el texto claro del tema oscuro, o
   sea **«Website» a 2.34:1** — por debajo del 4,5:1 que exige la AA, y por
   debajo de lo que se puede leer. Lo cazó `auditoria_propia.py`.

   Los contrastes de abajo están calculados con la fórmula WCAG 2.x, no
   elegidos a ojo. Los fondos de la paleta son --negro #000, --panel #0a0e0d y
   --panel-2 #0f1513, y el más claro de los tres es el que manda. */

.envoltura { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
.barra { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.barra .marca { font-weight: 700; text-decoration: none; color: var(--tinta); }
.barra nav { display: flex; gap: 16px; }
.barra nav a { color: var(--tenue); }
.barra nav a[aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* --tenue sobre --panel-2 (el fondo más claro de la paleta): 6,96:1. AA de
   sobra para texto normal. */
.sub { color: var(--tenue); margin: 0 0 20px; }
.envoltura h2 { margin: 32px 0 20px; }
.envoltura h2 + .sub { margin-top: 0; }
.tabla-wrap { margin-top: 20px; }

.tabla-wrap { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.tabla th, .tabla td { padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--borde); vertical-align: top; }
/* El fondo de la cabecera va con la paleta, no contra ella: --tinta sobre
   --panel-2 da 16,4:1. Antes era #f6f8fa (casi blanco) con texto claro: 2,34:1. */
.tabla thead th { background: var(--panel-2); color: var(--tinta);
  font-weight: 600; }
.vacio { color: var(--tenue); text-align: center; padding: 24px; }

.estado { font-weight: 600; font-size: 13px; padding: 4px 8px; border-radius: 999px;
  display: inline-block; border: 1px solid currentColor; }
/* Los cuatro estados iban en tonos pensados para fondo blanco (#a16207,
   #1d4ed8, #3f6212, #b3261e): sobre negro se quedaban entre 2:1 y 4:1. Se
   sustituyen por los de la paleta, que ya están medidos sobre estos fondos. */
.estado.pending_manual { color: var(--ambar); }
.estado.paid { color: var(--tinta); }
.estado.completed { color: var(--ok); }
.estado.failed { color: var(--rojo); }

/* El aviso era crema (#fff6d6) heredando texto claro. Ahora es el ámbar de la
   paleta sobre un fondo de la paleta: 10,4:1. */
.aviso { background: var(--panel-2); border: 1px solid var(--ambar);
  color: var(--ambar); border-radius: 8px; padding: 8px 14px; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.url-celda { word-break: break-all; max-width: 320px; }