/* =====================================================================
   instituciones.css — Logos de bancos y billeteras (ver instituciones.js)
   Solo clases .inst-*: no toca ninguna regla existente.
   ===================================================================== */
.inst-logo{
  /* Alto fijo por tamaño (--h); ancho según la proporción real del logo
     (--ar, viene de instituciones.js) con mínimo 1,3 y máximo 3,1 veces
     el alto: los cuadrados no quedan diminutos ni los horizontales enormes. */
  --h: 30px;
  --k: clamp(1.3, calc(var(--ar, 2) * 0.72 + 0.4), 3.1);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-sizing: border-box; vertical-align: middle; overflow: hidden;
  height: var(--h); width: calc(var(--h) * var(--k));
  padding: calc(var(--h) * 0.14) calc(var(--h) * 0.2);
  border-radius: calc(var(--h) * 0.24);
  background: #FFFFFF; border: 1px solid rgba(20,24,29,0.11);
  box-shadow: 0 1px 2px rgba(20,24,29,0.06);
}
.inst-logo img{ display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.inst-logo.inst-xs{ --h: 20px; }
.inst-logo.inst-sm{ --h: 24px; }
.inst-logo.inst-md{ --h: 30px; }
.inst-logo.inst-lg{ --h: 40px; }
/* Tenpo, MACH y Global66 vienen en blanco: van sobre grafito para leerse */
.inst-logo.inst-oscuro{ background: #20252C; border-color: #20252C; }
/* Banco de Chile, Falabella, Ripley, BICE, Internacional, Mercado Pago y
   Coopeuch traen su fondo de marca: la placa usa ese color y el logo ocupa
   todo el alto, sin márgenes (no queda un cuadro dentro de otro). */
.inst-logo.inst-fondo{ --k: clamp(1.3, var(--ar, 2), 3.1); background: var(--inst-fondo); border-color: rgba(20,24,29,0.12); padding: 0; }
/* Texto solo para lectores de pantalla (cuando el logo ya dice el nombre) */
.inst-sr{ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Ícono de Efectivo (billete) */
.inst-efectivo{ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; line-height: 0; }
.inst-efectivo svg{ width: 100%; height: 100%; display: block; }
.inst-efectivo.inst-ef-xs{ width: 18px; height: 18px; }
.inst-efectivo.inst-ef-sm{ width: 22px; height: 22px; }
.inst-efectivo.inst-ef-md{ width: 26px; height: 26px; }
.inst-efectivo.inst-ef-lg{ width: 34px; height: 34px; }

/* ---- Selector de banco o billetera (crear / editar cuenta, créditos) ---- */
.inst-elegir{ margin-top: 10px; }
.inst-elegir-cab{ display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.inst-elegir-titulo{ font-family: 'IBM Plex Sans', sans-serif; font-size: 0.74rem; font-weight: 600; color: rgba(20,24,29,0.72); }
.inst-elegir-titulo span{ font-weight: 400; color: rgba(20,24,29,0.5); }
.inst-elegir-sel{ display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.7rem; color: #2C5A3B; }
.inst-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.inst-op{
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; margin: 0; padding: 9px 6px 7px; cursor: pointer; text-align: center;
  background: #FFFFFF; border: 1px solid rgba(20,24,29,0.12); border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.inst-op:hover{ border-color: rgba(192,138,40,0.6); background: #FFFCF4; }
.inst-op:focus-visible{ outline: 2px solid #E4B54C; outline-offset: 2px; }
.inst-op-logo{ height: 24px; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.inst-op-logo .inst-logo{ max-width: 100%; }
.inst-op-nombre{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.66rem; line-height: 1.2; color: rgba(20,24,29,0.62); }
.inst-op.activo{ border-color: #C08A28; background: linear-gradient(180deg, #FFF9EA 0%, #FCF0D3 100%); box-shadow: 0 0 0 1px #C08A28 inset; }
.inst-op.activo .inst-op-nombre{ color: #14181D; font-weight: 600; }
.inst-op-check{ position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #C08A28; color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(138,99,23,0.4); }
.inst-op-check svg{ width: 10px; height: 10px; }
.inst-op.activo .inst-op-check{ display: flex; }
.inst-ver-mas{ display: block; margin: 8px auto 0; padding: 4px 10px; border: none; background: none; cursor: pointer; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.74rem; color: #8A6317; text-decoration: underline; text-underline-offset: 2px; }
.inst-ver-mas:focus-visible{ outline: 2px solid #E4B54C; outline-offset: 2px; border-radius: 6px; }

/* ---- Dónde aparece (ajustes mínimos por pantalla) ---- */
/* Cuentas: la tarjeta de cada cuenta. El logo reemplaza al ícono redondo. */
.cuenta-card-emoji.con-logo,
#cuentasOuter .cuenta-card-emoji.con-logo{ width: auto; height: auto; background: none !important; box-shadow: none !important; border-radius: 0; }
.cuenta-card.es-tarjeta .cuenta-card-emoji.con-logo .inst-logo{ box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.cuenta-card.es-tarjeta .inst-logo.inst-oscuro{ border-color: rgba(237,236,228,0.22); }
/* Detalle de cuenta */
.detalle-cuenta-banner-emoji.con-logo{ display: inline-flex; font-size: 1rem; }
/* Selectores propios de Ingreso/Egreso ("Pagado desde" / "Recibido en") */
.egreso-cuenta-opt .emo .inst-logo, .ingreso-cuenta-opt .emo .inst-logo{ margin-right: 2px; }
.egreso-cuenta-dropdown-actual .inst-logo, .ingreso-cuenta-dropdown-actual .inst-logo{ margin-right: 6px; vertical-align: -5px; }
.onb-wizard-item-nombre .inst-logo{ margin-right: 4px; vertical-align: -5px; }
.item-row .item-emoji .inst-logo{ vertical-align: middle; }
/* Control: logo pequeño junto al nombre de la cuenta y en el encabezado por cuenta */
.vexpress-col-cuenta:has(.inst-logo), .vexpress-col-cuenta:has(.inst-efectivo){ display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-width: 0; }
.vexpress-col-cuenta .inst-nombre{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vexpress-grupo-icono:has(.inst-logo){ width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; border: none !important; filter: none !important; }
/* Importar cartola: el selector de cuenta se dibuja en importar-cartola.css (.icart-cuenta-vista) */
.icart-bandeja-info .inst-logo{ align-self: center; margin-left: 2px; }

@media (max-width: 480px){
  #cuentasOuter .cuenta-card-emoji.con-logo .inst-logo{ --h: 22px; }
  .inst-grid{ grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
}
@media (max-width: 760px){
}
/* Créditos: logo del banco emisor (no es Visa ni Mastercard) */
.credito-card-emoji.con-logo{ font-size: 1rem; display: inline-flex; }
.detalle-credito-row .nom .inst-logo{ margin-right: 4px; vertical-align: -5px; }
.vexpress-popover-item-lista .inst-logo{ margin-right: 8px; vertical-align: -5px; }
.icart-resumen-cta .inst-logo{ margin-right: 8px; vertical-align: -6px; }
/* Efectivo dentro del círculo de la tarjeta de cuenta */
.cuenta-card-emoji.con-efectivo .inst-efectivo{ width: 26px; height: 26px; }
@media (max-width: 480px){
  #cuentasOuter .cuenta-card-emoji.con-efectivo .inst-efectivo{ width: 20px; height: 20px; }
}
.detalle-cuenta-banner-emoji .inst-efectivo{ vertical-align: middle; }