/* flots · css/paginas/est-pagos.css
   Estudio · Pagos (/estudio/pagos) — AdminPagos (1440) y MPagos (390).
   Usa .kpi/.pestanas/.tabla/.tabla-caja de componentes.css; todo lo propio con prefijo .est-pag-. */

/* ---------- KPIs (3 columnas iguales, gap 16; tarjeta 22/24, gap 6) ---------- */
.est-pag-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  min-width:0;
}
.est-pag-kpi{ gap:6px; padding:22px 24px; min-width:0; }
.est-pag-kpi .kpi-valor{ letter-spacing:-0.02em; overflow-wrap:anywhere; }
.est-pag-kpi-vencidos{ border-left:4px solid var(--danger); }

.est-pag-panel{ min-width:0; }
.est-pag-panel:focus{ outline:none; }

/* ---------- Tabla: Cliente · Concepto · Monto · Estado · Vence · (acciones) ---------- */
.est-pag-tabla{
  --cols:minmax(0, 1.2fr) minmax(0, 1fr) 130px 116px 96px 272px;
}
.est-pag-tabla .tabla-fila{ font-size:15px; }

.est-pag-cliente{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.est-pag-cliente-nombre{
  font-weight:500;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.est-pag-marca{
  align-self:flex-start;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
  overflow-wrap:anywhere;
}
/* Link chico: el área táctil llega a 24 px sin mover el texto */
a.est-pag-marca{ padding:3px 0; margin:-3px 0; text-decoration:underline; text-underline-offset:2px; }
a.est-pag-marca:hover{ color:var(--ink); }

.est-pag-concepto{ color:var(--text-body); overflow-wrap:anywhere; }
.est-pag-monto{ white-space:nowrap; }
.est-pag-fecha{ color:var(--muted); }

.est-pag-estado-celda{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.est-pag-estado{ font-size:14px; font-weight:600; }
.est-pag-estado-pend{ color:var(--accent); }
.est-pag-estado-vencido{ color:var(--danger); }
.est-pag-estado-ok{ color:var(--muted); }
.est-pag-meta{
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
}

/* ---------- Acciones ---------- */
.est-pag-celda-acciones{ display:flex; justify-content:flex-end; min-width:0; }
.est-pag-celda-acciones:empty{ display:none; }
.est-pag-acciones{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:0;
}
.est-pag-acciones-botones{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px 16px;
}
.est-pag-ultimo{ text-align:right; }

/* Botón con borde del diseño: 38 px, padding 0 14, 14/500 */
.est-pag-btn-borde,
.est-pag-btn-texto{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  font:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.est-pag-btn-borde{
  border:1px solid var(--ink);
  background:var(--surface);
  color:var(--ink);
  text-decoration:none;
  transition:background-color .2s ease;
}
.est-pag-btn-borde:hover{ background:var(--bg); color:var(--ink); }
.est-pag-btn-borde[aria-disabled="true"]{
  border-color:var(--line-soft);
  background:var(--surface);
  color:var(--disabled);
  cursor:not-allowed;
}
.est-pag-btn-borde[aria-busy="true"]{ opacity:.7; }
/* Botón de texto ("Ver comprobante", "Marcar pagado"): sin borde, gris, subrayado */
.est-pag-btn-texto{
  padding:0;
  border:0;
  background:none;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.est-pag-btn-texto:hover{ color:var(--ink); }

/* ---------- Vacío ---------- */
.est-pag-vacio{ padding:8px 24px; }

/* ---------- Modal "Marcar como pagado" ---------- */
.est-pag-modal{ display:flex; flex-direction:column; gap:20px; }
.est-pag-modal-resumen{ margin:0; font-size:15px; line-height:1.5; color:var(--text-body); }
.est-pag-modal-resumen strong{ font-weight:600; color:var(--ink); }
.est-pag-modal-ayuda{ margin:0; font-size:14px; line-height:1.45; color:var(--muted); }
.est-pag-modal-error{ margin:0; font-size:14px; font-weight:500; line-height:1.45; color:var(--danger); }

/* ---------- Pantallas medianas: las acciones bajan a una segunda línea de la fila ---------- */
@media (max-width: 1359px){
  .est-pag-tabla{ --cols:minmax(0, 1.3fr) minmax(0, 1fr) 124px 110px 92px; }
  .est-pag-tabla .tabla-fila{ row-gap:10px; }
  /* Fuera de la grilla pero presente para lectores de pantalla (las filas siguen teniendo 6 celdas) */
  .est-pag-col-acciones{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .est-pag-celda-acciones{ grid-column:1 / -1; }
  .est-pag-acciones{ flex-direction:row-reverse; flex-wrap:wrap; align-items:center; gap:8px 16px; }
}
@media (max-width: 1199px){
  .est-pag-tabla{ --cols:minmax(0, 1.3fr) minmax(0, 1fr) 116px 100px 84px; }
}
@media (max-width: 899px){
  .est-pag-kpis{ gap:10px; }
  .est-pag-kpi{ padding:18px 18px; }
  .est-pag-kpi .kpi-valor{ font-size:24px; }
}

/* ---------- Celular (MPagos): 2 KPIs y tarjetas ---------- */
@media (max-width: 767px){
  .est-pag{ gap:20px; }
  .est-pag-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .est-pag-kpi{ gap:4px; padding:16px; }
  .est-pag-kpi .kpi-etiqueta{ font-size:13px; }
  /* 24 px a 390; a 360 baja un poco para que "$ 3.040.000" no se parta en dos líneas */
  .est-pag-kpi .kpi-valor{ font-size:clamp(20px, 6.15vw, 24px); letter-spacing:0; overflow-wrap:break-word; }
  .est-pag-vacio{ padding:0 16px; }
}

.est-pag-tarjetas{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.est-pag-tarjeta{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  background:var(--surface);
}
.est-pag-tarjeta-vencida{ border-left:4px solid var(--danger); }
.est-pag-tarjeta-fila{
  display:flex;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.est-pag-tarjeta-arriba{ align-items:baseline; }
.est-pag-tarjeta-arriba .est-pag-cliente-nombre{ font-size:16px; }
.est-pag-tarjeta-monto{ flex-shrink:0; font-size:16px; white-space:nowrap; }
.est-pag-tarjeta-medio{ align-items:baseline; font-size:13px; }
.est-pag-tarjeta-detalle{ min-width:0; color:var(--muted); line-height:1.4; }
.est-pag-tarjeta-medio .est-pag-estado{ flex-shrink:0; }
.est-pag-tarjeta .est-pag-acciones{ flex-direction:column; align-items:flex-start; gap:6px; }
.est-pag-tarjeta .est-pag-acciones-botones{ justify-content:flex-start; }
.est-pag-tarjeta .est-pag-btn-borde{ order:-1; }
.est-pag-tarjeta .est-pag-ultimo{ text-align:left; }