/* Retiros: estilos propios de la pantalla. Solo tokens; clases con prefijo ret-. */

/* Aviso de retiro esperando aprobación (lo primero que mira un administrador) */
.ret-pendiente { margin-bottom: var(--e-6); box-shadow: inset 4px 0 0 var(--tope-alerta); }
.ret-pendiente .aviso__titulo .ref { color: inherit; font-size: var(--t-14); font-weight: 600; }

/* Resumen: neto destacado + retirado hoy + cantidad + límite diario */
.ret-resumen {
  display: grid; gap: var(--e-4); align-items: stretch;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.25fr);
}
.ret-resumen .saldo__valor { font-size: var(--t-28); }
.ret-resumen .kpi__valor { font-size: var(--t-24); }
.ret-resumen__neto { justify-content: space-between; }

.ret-desglose { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-13); color: var(--texto-2); }
.ret-desglose li { display: flex; align-items: center; gap: var(--e-2); }
.ret-desglose__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-fuerte); flex: none; }
.ret-desglose__punto--exito { background: var(--tope-ok); }
.ret-desglose__punto--alerta { background: var(--tope-alerta); }
.ret-desglose__punto--info { background: var(--info); }
.ret-desglose__punto--peligro { background: var(--tope-critico); }
.ret-desglose__punto--revision { background: var(--revision); }

.ret-limite .kpi__etiqueta { flex-wrap: wrap; }
.ret-limite .kpi__etiqueta .etiqueta { height: 20px; font-size: var(--t-11); }
.ret-limite__otras {
  list-style: none; margin: var(--e-1) 0 0; padding: var(--e-2) 0 0; border-top: 1px dashed var(--borde);
  display: grid; gap: 2px; font-size: var(--t-12); color: var(--texto-3);
}
.ret-limite__otras li { display: flex; justify-content: space-between; gap: var(--e-2); }
.ret-limite__otras .num { color: var(--texto-2); font-weight: 500; white-space: nowrap; }

.ret-nota-tope { display: flex; align-items: flex-start; gap: var(--e-2); margin-top: var(--e-3); font-size: var(--t-13); color: var(--texto-2); }
.ret-nota-tope .ico { color: var(--info); margin-top: 1px; flex: none; }

/* Filtros del historial */
.ret-filtros { display: grid; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borde); }
.ret-filtros__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.ret-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-left: auto; }
.ret-fechas__campo { display: flex; align-items: center; gap: var(--e-2); }
.ret-fechas label { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); }
.ret-fechas .campo__control { width: auto; min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: var(--t-14); }

/* Tabla */
.ret-tabla td.acciones .ico { color: var(--texto-3); vertical-align: middle; }
.ret-tabla tr.fila-clic:hover td.acciones .ico { color: var(--primario-texto); }
.ret-tabla .estado[data-tooltip] { cursor: help; }
.ret-tabla .estado[data-tooltip]::after { text-align: left; }
.ret-tabla .estado:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ret-tabla td[data-etiqueta="Estado"] .celda-sub { margin-top: 4px; }
.ret-fila-nueva td { animation: ret-resalta 2.4s var(--curva); }
@keyframes ret-resalta { from { background: var(--primario-suave); } to { background: transparent; } }

.ret-vacio__icono--revision { background: var(--revision-fondo); color: var(--revision); }
.ret-paginacion { border-top: 1px solid var(--borde); }

/* Destinos guardados */
.ret-destino { gap: var(--e-3); }
.ret-destino__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--primario-suave); color: var(--primario-texto); }
.ret-destino__texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ret-destino__nombre { font-weight: 600; font-size: var(--t-14); }
.ret-destino__meta { font-size: var(--t-13); color: var(--texto-3); }

/* Cada tarjeta con su propio alto: sin hueco vacío bajo los destinos */
.ret-ayuda { align-items: start; }

/* Qué significa cada estado */
.ret-estados .lista__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: var(--e-3); }
.ret-estados .estado { justify-self: start; }
.ret-estados__texto { font-size: var(--t-13); color: var(--texto-2); line-height: 1.45; }
.ret-estados .ret-estados__clave { background: var(--revision-fondo); box-shadow: inset 3px 0 0 var(--revision); }
.ret-estados__clave .ret-estados__texto { color: var(--texto); }

/* ---- Modal Nuevo retiro ---- */
.ret-verificar { display: flex; gap: var(--e-2); }
.ret-verificar .campo__control { flex: 1; min-width: 0; }
.ret-verificar .btn { flex: none; }

.ret-titular {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  border: 1px solid var(--exito-borde); background: var(--exito-fondo); border-radius: var(--radio-3);
  animation: aparece var(--dur-2);
}
.ret-titular__ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--superficie); color: var(--exito); border: 1px solid var(--exito-borde); }
.ret-titular__ico .ico { width: 18px; height: 18px; stroke-width: 2.25; }
.ret-titular__texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ret-titular__etiqueta { font-size: var(--t-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--exito); }
.ret-titular__nombre { font-weight: 700; font-size: var(--t-16); color: var(--texto); }
.ret-titular__meta { font-size: var(--t-13); color: var(--texto-2); overflow-wrap: anywhere; }
.ret-titular .etiqueta { flex: none; align-self: flex-start; }

.ret-guardados__titulo { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); margin-bottom: var(--e-2); }
.ret-guardados__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.ret-guardado {
  display: grid; gap: 2px; text-align: left; min-height: 44px; padding: var(--e-3);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-2); background: var(--superficie);
  color: var(--texto); font: inherit; font-size: var(--t-14); cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.ret-guardado:hover { border-color: var(--primario); background: var(--primario-suave); }
.ret-guardado:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ret-guardado span { font-size: var(--t-12); color: var(--texto-3); }

/* .pasos trae margin: 0 y pisa a .mb-6: el aire bajo los pasos va acá */
#ret-pasos > .pasos { margin-bottom: var(--e-6); }

.ret-para {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-2); font-size: var(--t-14);
}
.ret-para > .ico { color: var(--primario-texto); flex: none; }
.ret-para > span { min-width: 0; }

.ret-monto { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 700; }
.ret-rapidos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: calc(-1 * var(--e-2)); }

.ret-reparto { border: 1px solid var(--borde); border-radius: var(--radio-3); overflow: hidden; font-size: var(--t-14); }
.ret-reparto__cabecera {
  display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-4);
  background: var(--superficie-2); font-size: var(--t-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2);
}
.ret-reparto__cabecera span:last-child { color: var(--primario-texto); text-transform: none; letter-spacing: 0; font-size: var(--t-13); }
.ret-reparto__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-4); border-top: 1px solid var(--borde); }
.ret-reparto__fila .num { white-space: nowrap; font-weight: 500; }
.ret-reparto__fila--tenue { color: var(--texto-3); }
.ret-reparto__fila--total { font-weight: 700; background: var(--superficie-2); border-top-color: var(--borde-fuerte); }
.ret-reparto__fila--total .num { font-weight: 700; }
.ret-reparto__cuenta small { display: block; font-size: var(--t-12); color: var(--texto-3); }

.ret-confirmar { text-align: center; padding: var(--e-4); border-radius: var(--radio-3); background: var(--superficie-2); border: 1px solid var(--borde); }
.ret-confirmar__etiqueta { font-size: var(--t-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.ret-confirmar__monto { font-family: var(--fuente-titulo); font-size: var(--t-32); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; margin: 2px 0; }

.ret-exito { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-3); padding: var(--e-2) 0; }
.ret-exito__icono { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--exito-fondo); color: var(--exito); border: 1px solid var(--exito-borde); animation: aparece var(--dur-3); }
.ret-exito__icono .ico { width: 30px; height: 30px; stroke-width: 2.25; }
.ret-exito__titulo { font-family: var(--fuente-titulo); font-size: var(--t-24); font-weight: 700; }
.ret-exito__titulo:focus { outline: none; }
.ret-exito__nota { max-width: 46ch; }
.ret-exito__datos { width: 100%; text-align: left; margin-top: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--borde); }

/* Aviso "En revisión" (violeta, el único que pide no reintentar) */
.ret-aviso-revision { --a-fg: var(--revision); --a-bg: var(--revision-fondo); --a-bd: var(--revision-borde); }

/* Vista de un rol que solo consulta (retiros.html#vista-soporte) */
.ret-aviso-rol { margin-bottom: var(--e-4); }
[data-ret-vista="soporte"] .ret-solo-pedir, [data-ret-vista="soporte"] .ret-solo-aprobar { display: none !important; }

/* Filtro "Sale de" y filtros activos */
.ret-sale select { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: var(--t-14); width: auto; }
.ret-buscador { flex: 1 1 440px; min-width: 0; }
.ret-activos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.ret-activos__rotulo { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); }
.ret-activos__chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Código de operación en la columna Estado */
.ret-op { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.ret-op .mono { font-size: var(--t-12); letter-spacing: 0.02em; }
.ret-op .btn { margin: -6px 0; color: var(--texto-3); }
.ret-op .btn:hover { color: var(--texto); }
.ret-tabla td[data-etiqueta="Estado"] .celda-sub + .celda-sub { margin-top: 2px; }

.ret-vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }
.ret-vacio__acciones .btn { margin-top: var(--e-3); }

/* Qué significa cada estado: nota de alcance */
.ret-estados__nota { display: inline-block; margin-top: 2px; font-size: var(--t-12); font-weight: 600; color: var(--texto-3); }

/* Titular que no se pudo verificar (sigue, pero espera aprobación) */
.ret-titular--sin { border-color: var(--alerta-borde); background: var(--alerta-fondo); }
.ret-titular--sin .ret-titular__ico { color: var(--alerta); border-color: var(--alerta-borde); }
.ret-titular--sin .ret-titular__etiqueta { color: var(--alerta); }
#ret-aviso-sinverif:focus, #ret-c-cambio:focus, #ret-c-dup:focus { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Duplicado: link al retiro existente + confirmación obligatoria */
.ret-dup__acciones { align-items: center; gap: var(--e-3) var(--e-4); }
.ret-dup__check { font-weight: 600; }

/* Pasos finales con resultado no feliz (sin respuesta, incompleto) */
.ret-exito__icono--alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: var(--alerta-borde); }
.ret-exito__nota--fuerte { font-weight: 600; }
.ret-exito__datos .estado { margin-left: var(--e-1); }

/* Detalle: transferencias de un retiro dividido y comprobante */
.ret-partes .tabla td, .ret-partes .tabla th { vertical-align: top; }
.ret-partes .copiable .mono { font-size: var(--t-12); }
.ret-partes__comp { text-align: right; }
.ret-partes tfoot th, .ret-partes tfoot td { font-weight: 600; background: var(--superficie-2); }
.ret-comp-espera { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-3) var(--e-4); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-2); color: var(--texto-2); font-size: var(--t-14); }
.ret-comp-espera .ico { flex: none; margin-top: 1px; color: var(--texto-3); }

@media (pointer: coarse) {
  .ret-op .btn, .ret-partes .btn--icono, .ret-activos .chip--quitar button { width: 44px; height: 44px; }
  .ret-activos .chip--quitar { min-height: 44px; }
  .ret-sale select { min-height: 44px; }
}

/* ---- Responsive ---- */
@media (max-width: 1279px) {
  .ret-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ret-fechas { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .ret-fechas__campo { display: grid; gap: 4px; }
  .ret-fechas .campo__control { width: 100%; }
  .ret-fechas__campo--sale { grid-column: 1 / -1; }
  .ret-sale, .ret-sale select { width: 100%; }
  .ret-buscador { flex-basis: 100%; }
  .ret-rango { width: 100%; }
  .ret-rango button { flex: 1; }
  .ret-estados .lista__item { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
}
@media (max-width: 640px) {
  .ret-resumen { gap: var(--e-3); }
  .ret-resumen__neto, .ret-limite { grid-column: 1 / -1; }
  .ret-resumen .kpi__valor { font-size: var(--t-20); }
  /* En celular el historial deja de ser una tarjeta: las filas ya son tarjetas */
  .ret-historial { background: transparent; border: 0; box-shadow: none; }
  .ret-filtros { padding: 0 0 var(--e-4); border-bottom: 0; }
  .ret-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--e-4)); padding: 2px var(--e-4) 6px; scrollbar-width: none; }
  .ret-chips::-webkit-scrollbar { display: none; }
  .ret-chips .chip { flex: none; }
  .ret-tabla td.acciones, .ret-tabla td.ret-col-pedido { display: none !important; }
  /* Tarjetas más bajas: fecha y tipo en un solo renglón; el estado cierra la tarjeta */
  .ret-tabla td[data-etiqueta="Fecha"], .ret-tabla td[data-etiqueta="Tipo"] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 var(--e-2); }
  .ret-tabla td[data-etiqueta="Fecha"]::before, .ret-tabla td[data-etiqueta="Tipo"]::before { margin-right: auto; }
  .ret-tabla td[data-etiqueta="Fecha"] .celda-principal { font-weight: 500; }
  .ret-tabla td[data-etiqueta="Fecha"] .celda-sub, .ret-tabla td[data-etiqueta="Tipo"] .celda-sub { margin-top: 0; font-size: var(--t-13); }
  .ret-tabla td[data-etiqueta="Estado"] { border-bottom: 0; }
  .ret-tabla td.tarjeta-titulo .ref { font-weight: 600; color: var(--texto); }
  /* En tarjetas el estado queda pegado a la derecha: el tooltip crece hacia la izquierda para no ensanchar la página */
  .ret-tabla .estado[data-tooltip]::after { left: auto; right: 0; transform: translateY(4px); max-width: min(260px, 80vw); }
  .ret-tabla .estado[data-tooltip]:hover::after, .ret-tabla .estado[data-tooltip]:focus-visible::after { transform: none; }
  .ret-paginacion { border-top: 0; padding-left: 0; padding-right: 0; }
  .ret-guardados__lista { grid-template-columns: minmax(0, 1fr); }
  .ret-verificar { flex-direction: column; }
  .ret-verificar .btn { width: 100%; }
  .ret-titular { flex-wrap: wrap; }
  .ret-confirmar__monto { font-size: var(--t-28); }
  .ret-op { justify-content: flex-end; }
  .ret-partes tfoot th { display: none; }
}
@media (max-width: 380px) {
  .ret-resumen { grid-template-columns: minmax(0, 1fr); }
}