/* flots · css/paginas/documentos.css
   Documentos (/panel/documentos) — Documentos.dc.html (1440).
   Celular (sin artboard): tarjetas por documento y la tarjeta de pagos debajo. */

/* El main de esta pantalla tiene más aire que el de Panel/Avances (padding 64/88, gap 48) */
.documentos-shell .shell-main{ gap:48px; }
@media (min-width: 1200px){
  .documentos-shell .shell-main{ padding:64px 88px; }
}

.documentos-titulo{ line-height:.95; letter-spacing:-0.045em; }

.documentos-grilla{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  gap:48px;
  align-items:start;
}
.documentos-lista{ min-width:0; }
.documentos-vacio{ margin:0; padding:22px 0; border-top:1px solid var(--ink); font-size:16px; color:var(--muted); }

/* ---------- Tabla ---------- */
.documentos-tabla{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.documentos-col-fecha{ width:140px; }
.documentos-col-estado{ width:130px; }
.documentos-col-acciones{ width:170px; }
.documentos-tabla th{
  padding:0 0 12px;
  border-bottom:1px solid var(--ink);
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  text-align:left;
}
.documentos-tabla td{
  padding:22px 0;
  border-bottom:1px solid var(--line);
  font-size:17px;
  vertical-align:middle;
}
.documentos-tabla .documentos-nombre{ padding-right:16px; overflow-wrap:anywhere; }
.documentos-tabla .documentos-fecha{ padding-right:12px; color:var(--muted); }
.documentos-tabla .documentos-estado{ padding-right:12px; font-size:14px; }
.documentos-estado-pendiente{ color:var(--accent); font-weight:600; }

.documentos-acciones{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:20px;
}
.documentos-accion{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
  cursor:pointer;
}
.documentos-accion:hover{ color:var(--muted); }
.documentos-accion:disabled{ color:var(--muted); cursor:progress; }

/* ---------- Pagos ---------- */
.documentos-pagos{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:32px;
  background:var(--surface);
}
.documentos-pagos-titulo{ margin:0; font-size:22px; font-weight:500; line-height:1.2; }
.documentos-pagos-lista{ display:flex; flex-direction:column; gap:20px; margin:0; }
.documentos-pago{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  font-size:16px;
}
.documentos-pago-linea{ padding-bottom:16px; border-bottom:1px solid var(--line-list); }
.documentos-pago dt{ color:var(--muted); }
.documentos-pago dd{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin:0; text-align:right; }
.documentos-pago-saldo{ font-weight:600; }
.documentos-pago-vence{ font-size:13px; color:var(--muted); }
.documentos-pago-vence.vencido{ color:var(--danger); font-weight:500; }
.documentos-pagos-nota{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.documentos-pagar{ height:52px; font-size:16px; }
.documentos-pagos-error{ margin:0; font-size:14px; font-weight:500; color:var(--danger); }

.documentos-aviso .alerta-texto{ color:var(--text-body); }

/* ---------- Tablet: la tarjeta de pagos pasa abajo ---------- */
@media (max-width: 1199px){
  .documentos-shell .shell-main{ gap:36px; }
  .documentos-grilla{ grid-template-columns:minmax(0, 1fr); gap:36px; }
  .documentos-pagos{ max-width:560px; }
}
@media (max-width: 900px){
  .documentos-col-fecha{ width:120px; }
  .documentos-col-estado{ width:100px; }
  .documentos-col-acciones{ width:150px; }
}

/* ---------- Celular: tarjetas ---------- */
@media (max-width: 767px){
  .documentos-shell .cel-main{ gap:20px; }
  .documentos-grilla{ gap:20px; }
  .documentos-vacio{ padding:18px 0; font-size:15px; }

  .documentos-tarjetas{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
  .documentos-tarjeta{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px 18px;
    background:var(--surface);
  }
  .documentos-tarjeta-nombre{ font-size:17px; font-weight:500; line-height:1.3; overflow-wrap:anywhere; }
  .documentos-tarjeta-meta{ font-size:14px; color:var(--muted); }
  .documentos-tarjeta-meta .documentos-estado-pendiente{ color:var(--accent); }
  .documentos-tarjeta-acciones{
    justify-content:flex-start;
    gap:24px;
    margin-top:6px;
    padding-top:2px;
    border-top:1px solid var(--line);
  }
  /* Objetivo táctil de 44 px de alto (el texto sigue siendo un link subrayado) */
  .documentos-tarjeta-acciones .documentos-accion{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0;
    font-size:15px;
  }

  .documentos-pagos{ max-width:none; gap:16px; padding:20px 18px; }
  .documentos-pagos-titulo{ font-size:20px; }
  .documentos-pagos-lista{ gap:14px; }
  .documentos-pago{ font-size:15px; }
  .documentos-pago-linea{ padding-bottom:14px; }
}