/* Portal Russell Bedford Argentina. Sin modo oscuro; tipografía del sistema; sin estilos en línea. */
:root {
  --azul: #0f3d5e;
  --azul-oscuro: #0a2a42;
  --turquesa: #0f8b8d;
  --fondo: #f4f6f8;
  --superficie: #ffffff;
  --texto: #1b2a41;
  --suave: #667085;
  --borde: #d9dee5;
  --error: #b42318;
  --error-fondo: #fef3f2;
  --ok: #067647;
  --ok-fondo: #ecfdf3;
  --aviso: #93370d;
  --aviso-fondo: #fffaeb;
  --info-fondo: #eef4fa;
  --radio: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; color: var(--azul-oscuro); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .9em; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid #7ab3d4; outline-offset: 2px; border-radius: 4px; }
.oculto { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--suave); }
.aviso-js { padding: 1rem; text-align: center; }

/* ── Pantallas de acceso ── */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.tarjeta { width: 100%; max-width: 440px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 1.75rem; box-shadow: var(--sombra); }
.tarjeta.ancha { max-width: 560px; }
.marca { display: block; text-align: center; margin-bottom: 1.25rem; color: var(--azul); font-weight: 700; letter-spacing: .02em; }
.marca small { display: block; font-weight: 400; color: var(--suave); letter-spacing: 0; font-size: .85rem; }

/* ── Formularios ── */
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.campo .ayuda { display: block; color: var(--suave); font-size: .82rem; margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: .6rem .7rem; font: inherit; color: inherit; background: #fff;
  border: 1px solid #b8c1cc; border-radius: 6px;
}
/* Altura EXPLÍCITA para los controles de una línea. Sin esto cada tipo trae la suya —medido: `select` 41 px,
   una fecha 46 y una búsqueda 44— y en una fila de filtros las etiquetas y las cajas quedan escalonadas. */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select {
  height: 42px; line-height: 1.2;
}
textarea { min-height: 42px; }
input.codigo { font-size: 1.4rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.fila-check { display: flex; align-items: flex-start; gap: .55rem; margin: .4rem 0 1rem; }
.fila-check input { margin-top: .2rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.1rem; margin-bottom: 1.25rem; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: .55rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; border: 1px solid var(--azul); background: var(--azul); color: #fff; text-decoration: none; }
.boton:hover { background: var(--azul-oscuro); }
.boton.secundario { background: #fff; color: var(--azul); }
.boton.secundario:hover { background: var(--info-fondo); }
.boton.peligro { background: #fff; color: var(--error); border-color: #e8b4ae; }
.boton.peligro:hover { background: var(--error-fondo); }
.boton.completo { width: 100%; }
.boton[disabled] { opacity: .55; cursor: not-allowed; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); text-decoration: underline; cursor: pointer; }
.centrado { text-align: center; }

.alerta { padding: .7rem .9rem; border-radius: 6px; margin: 0 0 1rem; border: 1px solid; font-size: .92rem; }
.alerta.error { background: var(--error-fondo); border-color: #f3c3be; color: var(--error); }
.alerta.ok { background: var(--ok-fondo); border-color: #a9dfc0; color: var(--ok); }
.alerta.aviso { background: var(--aviso-fondo); border-color: #f5d9a6; color: var(--aviso); }
.alerta.info { background: var(--info-fondo); border-color: #cfe0ee; color: var(--azul); }

/* ── Segundo factor ── */
.opciones { display: grid; gap: .8rem; margin: 1rem 0; }
.opcion { display: block; width: 100%; text-align: left; padding: 1rem; background: #fff; border: 1px solid var(--borde); border-radius: 8px; font: inherit; color: inherit; cursor: pointer; }
.opcion:hover { border-color: var(--azul); background: var(--info-fondo); }
.opcion strong { display: block; color: var(--azul-oscuro); }
.opcion span { color: var(--suave); font-size: .88rem; }
.opcion .etiqueta { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 99px; background: var(--ok-fondo); color: var(--ok); font-size: .74rem; font-weight: 600; }
.qr { display: block; margin: .5rem auto 1rem; width: 200px; height: 200px; border: 1px solid var(--borde); border-radius: 8px; padding: 6px; background: #fff; }
.secreto { display: block; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .08em; word-break: break-all; background: var(--fondo); padding: .5rem; border-radius: 6px; margin-bottom: 1rem; user-select: all; }
.codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.codigos li { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .1em; text-align: center; padding: .55rem; background: var(--fondo); border: 1px dashed #b8c1cc; border-radius: 6px; }

/* ── Estructura de la aplicación ── */
.cabecera { background: var(--azul); color: #fff; }
.cabecera-interior { max-width: 1160px; margin: 0 auto; padding: .75rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cabecera .logo { font-weight: 700; letter-spacing: .02em; color: #fff; text-decoration: none; margin-right: auto; }
.cabecera .logo small { display: block; font-weight: 400; font-size: .72rem; opacity: .8; letter-spacing: 0; }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a, .nav button { color: #fff; text-decoration: none; padding: .45rem .8rem; border-radius: 6px; font: inherit; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav button:hover { background: rgba(255, 255, 255, .14); }
.nav a[aria-current=page] { background: rgba(255, 255, 255, .22); font-weight: 600; }
.usuario { font-size: .82rem; opacity: .85; }
.contenido { max-width: 1160px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 1.25rem; box-shadow: var(--sombra); margin-bottom: 1.25rem; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.encabezado-pagina { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.encabezado-pagina h1 { margin: 0; }

/* ── Filtros y tablas ── */
.filtros { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros .campo { margin: 0; min-width: 150px; }
.filtros .campo.chico { min-width: 130px; }
/* Los botones de la fila de filtros se alinean con los campos, no con el margen de `.acciones`. */
/* En la fila de filtros los botones van a ras de los campos: sin margen propio arriba ni abajo. */
.filtros .acciones { margin: 0; align-items: flex-end; }
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid #edf0f3; vertical-align: top; }
.tabla th { background: #f8fafb; font-weight: 600; color: var(--suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.tabla th button { background: none; border: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.tabla th button:hover { color: var(--azul); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.nowrap { white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tfoot td { font-weight: 600; background: #f8fafb; }
.vacio { padding: 2rem 1rem; text-align: center; color: var(--suave); }
.paginacion { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-top: .8rem; font-size: .9rem; color: var(--suave); }
.paginacion .botones { display: flex; gap: .4rem; }

.estado { display: inline-block; padding: .12rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.estado.pagada { background: var(--ok-fondo); color: var(--ok); }
.estado.parcial { background: var(--aviso-fondo); color: var(--aviso); }
.estado.pendiente { background: #fff1e6; color: #b54708; }
.estado.revision { background: var(--info-fondo); color: var(--azul); }
.estado.rechazado { background: var(--error-fondo); color: var(--error); }
.estado.cancelada, .estado.neutro { background: #eef1f4; color: var(--suave); }
.estado.rechazado { background: var(--error-fondo); color: var(--error); }

.resumen { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 0 1rem; padding: .9rem 1rem; background: var(--info-fondo); border: 1px solid #cfe0ee; border-radius: 8px; }
.resumen div { min-width: 160px; }
.resumen .etiqueta { display: block; font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.resumen .valor { display: block; font-size: 1.15rem; font-weight: 700; color: var(--azul-oscuro); font-variant-numeric: tabular-nums; }
.resumen .nota { display: block; margin: .1rem 0 0; }
.nota { font-size: .85rem; color: var(--suave); margin: .5rem 0 0; }

.pestanas { display: flex; gap: .3rem; border-bottom: 1px solid var(--borde); margin-bottom: 1.1rem; flex-wrap: wrap; }
.pestanas button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .6rem .9rem; font: inherit; color: var(--suave); cursor: pointer; }
.pestanas button[aria-selected=true] { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }

dialog { border: 0; border-radius: 12px; padding: 0; max-width: min(520px, 94vw); width: 100%; box-shadow: 0 20px 50px rgba(16, 24, 40, .3); }
dialog::backdrop { background: rgba(16, 24, 40, .5); }
.dialogo { padding: 1.5rem; }

/* ── Móvil: la tabla pasa a tarjetas apiladas ── */
@media (max-width: 720px) {
  .tarjeta { padding: 1.25rem; }
  .tabla-envoltorio { border: 0; background: none; overflow: visible; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla td, .tabla tfoot { display: block; width: 100%; }
  .tabla tr { background: #fff; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: .7rem; padding: .3rem 0; }
  .tabla td { border: 0; padding: .3rem .9rem; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tabla td::before { content: attr(data-etiqueta); font-weight: 600; color: var(--suave); text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
  .tabla td.num { text-align: right; }
  .cabecera-interior { padding: .6rem .9rem; }
  .contenido { padding: 1rem .9rem 2.5rem; }
  .filtros .campo { flex: 1 1 140px; }
}
@media print { .cabecera, .acciones, .filtros, .paginacion { display: none !important; } body { background: #fff; } }

/* Ficha de datos (pares término / valor) y listas de la pantalla de pagos */
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: .8rem 0 0; }
.ficha dt { color: var(--suave); font-size: .88rem; }
.ficha dd { margin: 0; }
.panel ul { padding-left: 1.1rem; }
.panel li { margin-bottom: .4rem; }
.panel li .boton { min-height: 32px; padding: .2rem .7rem; margin-left: .4rem; font-size: .85rem; }
.historial { list-style: none; padding-left: 0; color: var(--suave); font-size: .9rem; }
.relleno { padding: 1rem; margin: 0; }
.acciones.separado { margin-top: 1rem; }