/* ==========================================================================
   Rento · css/paginas/admin.css
   #admin  panel de administración (js/paginas/admin.js): verificación en dos
           pasos (QR y código), pestañas Liquidaciones / Pagos / Reintegros y
           operaciones / Revisiones / Reclamos / Garantías / Exportar, tarjetas
           de liquidación con los datos de cobro, tabla de pagos (en el
           teléfono, filas apiladas), pólizas con su lista de control,
           reclamos con evidencias y modales.
   Sólo tokens de base.css (tema claro y oscuro). Todo bajo .pg-admin, salvo lo
   que va dentro de los modales (el modal se agrega a <body>).
   ========================================================================== */

.pg-admin { color: var(--tinta); }
.pg-admin.adm-panel { padding-block: clamp(24px, 4vw, 40px) 88px; }

/* Cabecera */
.pg-admin .adm-cabeza { margin-bottom: clamp(24px, 3vw, 32px); }
.pg-admin .adm-cabeza h1 { margin: 0; }
.pg-admin .adm-cabeza-sub { margin: 8px 0 0; font-size: 16px; color: var(--tinta-2); }

/* Verificación en dos pasos */
.pg-admin .adm-factor-caja {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 560px;
  padding: 28px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
}
.pg-admin .adm-factor-caja > .icono { color: var(--azul); }
.pg-admin .adm-factor-caja h2 { margin: 0; font-size: var(--t-22); font-weight: 600; }
.pg-admin .adm-factor-texto { margin: 0; color: var(--tinta-2); }
.pg-admin .adm-factor-pasos { display: grid; gap: 12px; margin: 0; padding-left: 20px; }
.pg-admin .adm-factor-pasos li { padding-left: 4px; }
.pg-admin .adm-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  /* El QR necesita fondo blanco para leerse también en modo oscuro (--sobre-azul es blanco en los dos temas). */
  background: var(--sobre-azul);
}
.pg-admin .adm-secreto,
.pg-admin .adm-clave {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.pg-admin .adm-secreto { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: var(--fondo-2); }
.pg-admin .adm-factor-form { display: grid; gap: 16px; width: 100%; max-width: 360px; }
.pg-admin .adm-codigo { min-height: 52px; font-size: 22px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.pg-admin .adm-error { padding: 10px 12px; border-radius: var(--radio-s); background: var(--error-suave); }

/* Pestañas y secciones */
.pg-admin .adm-pestanas { gap: 32px; margin-bottom: 32px; }
.pg-admin .adm-pestanas .pestana { font-size: 16px; }
.pg-admin .adm-seccion-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.pg-admin .adm-seccion-cabeza > div { max-width: 720px; min-width: 0; }
.pg-admin .adm-seccion-cabeza h2 { margin: 0 0 4px; font-size: var(--t-22); font-weight: 600; }
.pg-admin .adm-seccion-cabeza p { margin: 0; color: var(--tinta-2); }
.pg-admin .adm-aviso { margin: 0 0 20px; }
.pg-admin .adm-aviso .btn-link { font-size: 14px; font-weight: 600; }
.pg-admin .adm-vacio { margin: 0; padding: 32px 24px; border-radius: var(--radio-m); background: var(--fondo-2); color: var(--tinta-2); text-align: center; }
.pg-admin .adm-total { margin: 0 0 12px; font-size: 16px; }
.pg-admin .adm-total strong { font-weight: 600; }
.pg-admin .adm-sub { display: block; font-size: 13px; color: var(--tinta-2); }
.pg-admin .adm-sub-linea { font-weight: 400; color: var(--tinta-2); }
.pg-admin .adm-alerta { display: inline-flex; align-items: center; gap: 4px; color: var(--alerta); font-weight: 600; }

/* Cargando */
.pg-admin .adm-cargando { display: grid; gap: 12px; }
.pg-admin .adm-cargando .skeleton { display: block; height: 96px; border-radius: var(--radio-m); }

/* Filtro y formularios en una línea (reprocesar, exportar) */
.pg-admin .adm-filtro { max-width: 280px; margin-bottom: 20px; }
.pg-admin .adm-form-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; max-width: 720px; margin-bottom: 24px; }
.pg-admin .adm-form-linea .campo { flex: 1 1 260px; }
.pg-admin .adm-form-linea .btn { flex: none; }
.pg-admin .adm-form-linea .adm-form-ayuda { flex: 1 1 100%; margin-top: -4px; }

/* Listas de tarjetas (liquidaciones, reintegros, revisiones) */
.pg-admin .adm-lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg-admin .adm-lista > li > article {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 20px 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
}
.pg-admin .adm-liq-pagable > article { border-color: var(--azul); box-shadow: inset 4px 0 0 var(--azul); }
.pg-admin .adm-liq-cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.pg-admin .adm-liq-cabeza > div { min-width: 0; }
.pg-admin .adm-liq-monto,
.pg-admin .adm-reint-monto { margin: 0; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-admin .adm-reint-monto { font-size: 20px; }
.pg-admin .adm-liq-quien { margin: 2px 0 0; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.pg-admin .adm-rev-titulo { margin: 0; font-size: 18px; font-weight: 600; }
.pg-admin .adm-datos { display: grid; margin: 0; }
.pg-admin .adm-datos > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.4fr) minmax(0, 1fr);
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde-suave);
  font-size: 15px;
}
.pg-admin .adm-datos > div:last-child { border-bottom: 0; }
.pg-admin .adm-datos dt { color: var(--tinta-2); }
.pg-admin .adm-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pg-admin .adm-datos-chicos > div { font-size: 14px; padding: 6px 0; }
.pg-admin .adm-dato-alerta { background: var(--alerta-suave); }
.pg-admin .adm-copiar { margin-left: 8px; font-size: 14px; }
.pg-admin .adm-ajuste { display: block; }
.pg-admin .adm-ajuste + .adm-ajuste { margin-top: 4px; }
.pg-admin .adm-falta,
.pg-admin .adm-motivo { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; }
.pg-admin .adm-falta { color: var(--alerta); font-weight: 600; }
.pg-admin .adm-motivo { color: var(--tinta-2); }
.pg-admin .adm-motivo .icono,
.pg-admin .adm-falta .icono { flex: none; margin-top: 1px; }
.pg-admin .adm-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Grupos (reintegros, revisiones) */
.pg-admin .adm-grupo + .adm-grupo { margin-top: 40px; }
.pg-admin .adm-grupo-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.pg-admin .adm-grupo-texto { margin: 0 0 12px; font-size: 14px; color: var(--tinta-2); }
.pg-admin .adm-grupo-titulo + .adm-lista { margin-top: 12px; }

/* Tabla de pagos */
.pg-admin .adm-tabla-envoltorio { overflow-x: auto; }
.pg-admin .adm-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-admin .adm-tabla th,
.pg-admin .adm-tabla td { padding: 14px 14px 14px 0; text-align: left; vertical-align: top; }
.pg-admin .adm-tabla thead th { padding-block: 10px; border-bottom: 1px solid var(--borde); color: var(--tinta-2); font-weight: 500; white-space: nowrap; }
.pg-admin .adm-tabla tbody th,
.pg-admin .adm-tabla tbody td { border-bottom: 1px solid var(--borde-suave); }
.pg-admin .adm-tabla tbody th { font-weight: 600; }
.pg-admin .adm-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-admin .adm-pago-id { font-variant-numeric: tabular-nums; }
.pg-admin .adm-tabla-acciones { white-space: nowrap; }
.pg-admin .adm-tabla-acciones .btn-link { font-size: 14px; }
.pg-admin .adm-tabla-acciones .btn-link + .btn-link { margin-left: 12px; }

/* Exportar */
.pg-admin .adm-export-resumen { max-width: 560px; padding: 20px 24px; border: 1px solid var(--borde); border-radius: var(--radio-m); }
.pg-admin .adm-export-resumen h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }

/* Ocupado */
.pg-admin .btn-link[aria-disabled="true"] { cursor: progress; opacity: 0.6; text-decoration: none; }

/* Modales del panel (van en <body>) */
.adm-modal .campo + .campo { margin-top: 16px; }
.adm-modal .modal-texto { margin: 0 0 16px; }
.adm-modal .adm-modal-aviso { margin: 0 0 16px; }
.adm-modal .campo + .adm-modal-aviso { margin-top: 16px; }
/* Qué pasa con el monto que se escribe (definir cuánto le transferís) */
.adm-modal .adm-modal-efecto { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radio-s); background: var(--fondo-2); font-size: 14px; }
.adm-modal .adm-modal-efecto + .campo { margin-top: 16px; }
.adm-modal .adm-gris { font-weight: 400; color: var(--tinta-2); }
.adm-modal .adm-casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo-2);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.adm-modal .adm-casilla input { flex: none; margin: 0; }
.adm-modal .campo-error { margin-top: 8px; }
.adm-modal .adm-modal-error { padding: 10px 12px; border-radius: var(--radio-s); background: var(--error-suave); outline-offset: 2px; }

/* ---------- v3: pólizas, reclamos, garantías y operaciones ---------- */
.pg-admin .adm-liq-tipo { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--tinta); }
.pg-admin .adm-liq-tipo .icono { flex: none; color: var(--tinta-2); }
.pg-admin .adm-liq-reclamo > article { border-style: dashed; }
.pg-admin .adm-liq-reclamo.adm-liq-pagable > article { border-style: solid; }
.pg-admin .adm-grupo-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.pg-admin .adm-grupo-cabeza .adm-grupo-titulo { margin: 0; }
.pg-admin .adm-grupo-mayor { margin-top: 0; }
.pg-admin .adm-subgrupo + .adm-subgrupo { margin-top: 24px; }
.pg-admin .adm-subgrupo-titulo { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 16px; font-weight: 600; }
.pg-admin .adm-op h5.adm-reint-monto { font-size: 17px; }
.pg-admin .adm-motivo-alerta { color: var(--alerta); font-weight: 600; }
.pg-admin .adm-acciones-izq { justify-content: flex-start; align-items: center; }
.pg-admin .adm-doc { display: inline-flex; align-items: center; gap: 6px; }
.pg-admin .adm-doc .icono { flex: none; }
.pg-admin .adm-doc-vence { display: inline-block; margin-left: 8px; }

/* Lista de control de la póliza: las 6 tildadas para aprobar */
.pg-admin .adm-checklist { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-m); background: var(--fondo-2); }
.pg-admin .adm-checklist legend { padding: 0 4px; font-size: 14px; font-weight: 600; }
.pg-admin .adm-check { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; padding: 4px 0; font-size: 14px; line-height: 1.4; cursor: pointer; }
.pg-admin .adm-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.pg-admin .adm-pol-falta { margin: 0; text-align: right; }

/* "No entregué" (§3.11.5 f): usos del anfitrión con "Revisar", aviso "No es así" sin resolver y la nota para los dos */
.pg-admin .adm-gar-en-revision > article { border-color: var(--alerta); box-shadow: inset 4px 0 0 var(--alerta); }
.pg-admin .adm-revisar { margin-left: 6px; vertical-align: 1px; }
.pg-admin .adm-gar-nota { max-width: 560px; }
.pg-admin .adm-gar-nota textarea { width: 100%; min-height: 64px; resize: vertical; }
.pg-admin .adm-gris { font-weight: 400; color: var(--tinta-2); }

/* Cuentas: suspender / reactivar */
.pg-admin .adm-cuenta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-left: 4px; }
.pg-admin .adm-cuenta-boton { font-size: 13px; }

/* Evidencias de un reclamo (fotos de las actas y del reclamo) */
.pg-admin .adm-plegable summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.pg-admin .adm-plegable[open] summary { margin-bottom: 8px; }
.pg-admin .adm-evidencias { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-admin .adm-evidencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); }
.pg-admin .adm-evidencia:last-child { border-bottom: 0; }
.pg-admin .adm-evidencia-texto { display: grid; min-width: 0; font-size: 14px; }
.pg-admin .adm-evidencia-texto strong { font-weight: 600; overflow-wrap: anywhere; }

/* Modales v3 (van en <body>) */
.adm-modal .adm-opciones { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.adm-modal .adm-opciones legend { margin-bottom: 8px; padding: 0; }
.adm-modal .adm-opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.adm-modal .adm-opcion input { flex: none; margin: 2px 0 0; }
.adm-modal .adm-opcion:has(input:checked) { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); background: var(--azul-suave); }
.adm-modal select.control { width: 100%; }

@media (max-width: 743px) {
  .pg-admin.adm-panel { padding-bottom: 64px; }
  .pg-admin .adm-pol-falta { text-align: left; }
  .pg-admin .adm-doc-vence { display: block; margin: 4px 0 0; }
  .pg-admin .adm-evidencia .adm-doc { width: 100%; justify-content: center; }
  .pg-admin .adm-pestanas { gap: 24px; margin-bottom: 24px; }
  .pg-admin .adm-factor-caja { padding: 20px; }
  .pg-admin .adm-lista > li > article { padding: 16px; }
  .pg-admin .adm-datos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pg-admin .adm-acciones { justify-content: stretch; }
  .pg-admin .adm-acciones .btn { flex: 1 1 auto; }
  .pg-admin .adm-form-linea .btn { width: 100%; }

  /* Tabla de pagos: cada fila es una tarjeta con rótulos */
  .pg-admin .adm-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pg-admin .adm-tabla,
  .pg-admin .adm-tabla tbody,
  .pg-admin .adm-tabla tr { display: block; width: 100%; }
  .pg-admin .adm-tabla tr { padding: 12px 0; border-bottom: 1px solid var(--borde-suave); }
  .pg-admin .adm-tabla tbody th,
  .pg-admin .adm-tabla tbody td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 0; text-align: right; }
  .pg-admin .adm-tabla tbody th { display: block; padding-bottom: 8px; text-align: left; }
  .pg-admin .adm-tabla td::before { content: attr(data-etiqueta); color: var(--tinta-2); font-weight: 400; text-align: left; }
  .pg-admin .adm-tabla td .adm-sub { text-align: right; }
  .pg-admin .adm-tabla .num { white-space: normal; }
}