/* Cobranzas de Olavarría: paleta "piedra y cal" (la zona de las canteras). */
:root {
  --piedra: #ECEEE9;
  --cal: #FBFBF8;
  --pizarra: #1D2A2E;
  --gris: #5E6B6F;
  --linea: #D5D9D2;
  --cantera: #1F5C57;
  --cantera-suave: #DCE8E4;

  --aprobado: #2E7A4E;
  --banco: #B08118;
  --revisar: #B3471F;
  --sin-cliente: #9E2338;
  --rechazado: #8C9599;

  --ancho: 1120px;
  --radio: 6px;
  --fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--piedra);
  color: var(--pizarra);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cantera); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Botones y campos */
.boton {
  border: 1px solid transparent;
  border-radius: var(--radio);
  padding: 7px 14px;
  cursor: pointer;
  font-weight: 600;
  background: none;
}
.boton--lleno { background: var(--cantera); color: #fff; width: 100%; padding: 11px; }
.boton--lleno:hover { background: #184a46; }
.boton--claro { background: var(--cal); color: var(--cantera); border-color: rgba(255,255,255,.4); }
.boton--texto { color: #cfe0dc; padding-inline: 6px; }
.boton--texto:hover { color: #fff; }

.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); }
.campo input, .campo select {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--cal);
  padding: 8px 10px;
  font-size: 15px;
  color: var(--pizarra);
  min-width: 0;
}
.campo--linea { flex-direction: row; align-items: center; gap: 8px; }
.campo--busca input { width: 220px; }

/* Ingreso */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--cantera); }
.ingreso__caja {
  width: 100%; max-width: 360px; background: var(--cal); border-radius: 10px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.ingreso__titulo { margin: 0; font-size: 26px; font-stretch: 75%; font-weight: 750; letter-spacing: -.01em; }
.ingreso__texto { margin: 0; color: var(--gris); }
.ingreso__error { margin: 0; color: var(--sin-cliente); min-height: 1.4em; font-size: 14px; }

/* Barra superior */
.barra {
  background: var(--cantera); color: #fff;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px max(16px, calc((100vw - var(--ancho)) / 2));
}
.barra__marca { font-weight: 700; font-stretch: 80%; font-size: 17px; margin-right: auto; }
.barra__dato { color: #cfe0dc; font-size: 13px; }

.contenido { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 48px; }

/* Portada: período, titular y estados */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "periodos periodos" "titular dias" "estados dias";
  column-gap: 40px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--linea);
}
.periodos { grid-area: periodos; display: flex; gap: 2px; overflow-x: auto; margin-bottom: 18px; scrollbar-width: none; }
.periodos button { white-space: nowrap; }
.periodos button {
  border: 0; background: none; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  color: var(--gris); font-weight: 600;
}
.periodos button[aria-selected="true"] { background: var(--pizarra); color: var(--cal); }
.periodos button:hover:not([aria-selected="true"]) { background: var(--linea); }

.titular {
  grid-area: titular;
  margin: 0 0 22px;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.05;
  font-stretch: 68%;
  font-weight: 700;
  letter-spacing: -.012em;
  max-width: 20ch;
  text-wrap: balance;
}
.titular .resto { color: var(--gris); font-weight: 600; }

.estados { grid-area: estados; }
.estados__barra { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--linea); }
.estados__barra span { height: 100%; transition: width .5s ease; }
.estados__leyenda {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 16px;
}
.estados__leyenda li { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: baseline; }
.estados__leyenda .punto { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.estados__leyenda .nombre { font-size: 13px; color: var(--gris); }
.estados__leyenda .valor { grid-column: 2; font-weight: 650; font-size: 17px; }
.estados__leyenda .monto { grid-column: 2; font-size: 13px; color: var(--gris); }

.dias { grid-area: dias; margin: 0; align-self: end; }
.dias figcaption { font-size: 13px; color: var(--gris); margin-bottom: 8px; }
.dias__barras { display: flex; align-items: flex-end; gap: 2px; height: 96px; border-bottom: 1px solid var(--linea); }
.dias__barras span { flex: 1; background: var(--cantera); opacity: .55; min-height: 1px; border-radius: 1px 1px 0 0; }
.dias__barras span.en-periodo { opacity: 1; }
.dias__pie { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris); margin-top: 4px; }

/* Pestañas y filtros */
.pestanas {
  display: flex; gap: 4px; overflow-x: auto; margin-top: 20px;
  border-bottom: 1px solid var(--linea);
}
.pestanas button {
  border: 0; background: none; cursor: pointer; padding: 10px 12px; white-space: nowrap;
  font-weight: 600; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pestanas button[aria-selected="true"] { color: var(--pizarra); border-bottom-color: var(--cantera); }
.pestanas__cuenta {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--revisar); color: #fff; font-size: 12px; text-align: center; margin-left: 4px;
}
.pestanas__cuenta:empty { display: none; }

.filtros { display: flex; gap: 10px 20px; flex-wrap: wrap; padding: 14px 0; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; background: var(--cal); border-radius: var(--radio); overflow: hidden; }
.tabla th {
  text-align: left; font-size: 13px; font-weight: 600; color: var(--gris);
  padding: 10px 12px; border-bottom: 1px solid var(--linea); background: var(--cal);
}
.tabla td { padding: 11px 12px; border-bottom: 1px solid var(--piedra); vertical-align: top; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla tr.fila { cursor: pointer; }
.tabla tr.fila:hover td { background: #F3F5F1; }
.tabla tr.fila[aria-expanded="true"] td { background: var(--cantera-suave); }
.tabla tr.detalle > td { background: #F6F8F4; padding: 4px 12px 14px; }
.tabla .nombre { font-weight: 650; }
.tabla .sub { display: block; font-size: 13px; color: var(--gris); font-weight: 400; }
.envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }

.cobertura { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.cobertura__barra { flex: 1; height: 6px; background: var(--piedra); border-radius: 3px; overflow: hidden; }
.cobertura__barra span { display: block; height: 100%; background: var(--cantera); }
.cobertura__texto { font-size: 13px; color: var(--gris); white-space: nowrap; }

.mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini td { padding: 7px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.mini tr:last-child td { border-bottom: 0; }

.estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado--aprobado { color: var(--aprobado); }
.estado--pendiente_banco { color: var(--banco); }
.estado--revisar { color: var(--revisar); }
.estado--esperando_cliente { color: var(--sin-cliente); }
.estado--rechazado { color: var(--rechazado); }
.motivo { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; max-width: 46ch; }
.alerta { color: var(--revisar); font-weight: 650; }
.cero { color: var(--rechazado); }
.antiguedad--vieja { color: var(--sin-cliente); font-weight: 650; }

.vacio { padding: 28px 4px; color: var(--gris); }
.vacio strong { display: block; color: var(--pizarra); font-size: 17px; margin-bottom: 4px; }
.nota { font-size: 13px; color: var(--gris); margin: 10px 2px 0; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); cursor: pointer; }

.cargando { text-align: center; color: var(--gris); padding: 80px 16px; }

/* Celular */
@media (max-width: 820px) {
  .portada { grid-template-columns: 1fr; grid-template-areas: "periodos" "titular" "estados" "dias"; }
  .dias { margin-top: 24px; }
  .campo--busca input { width: 100%; }
  .campo--busca { flex: 1 1 100%; }
  .tabla .ocultable { display: none; }
  .estados__leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra__dato { order: 3; flex-basis: 100%; }
  .barra { row-gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .estados__barra span { transition: none; }
}