/* SIS Tipo de Cambio — Fit-like UI (limpio) */
/* Aplica a: <div class="sis-card fit-like">…</div> */

/* 1) Tarjeta */
.sis-card.fit-like{
  --bg:#fff;
  --border:#E5E7EB;
  --muted:#6B7280;
  --accent:#0b3f96;
  --radius:20px;

  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  max-width:500px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
}
.sis-title{ font-weight:700; color:#0b1b36; margin-bottom:10px; text-align: center; }

/* 2) Header (píldoras) */
.row-head{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  align-items:center; margin-bottom:8px;
}
.mini-logo{ display:none; }
.opt-pill{
  display:block; width:100%; padding:2px 12px; text-align:center; cursor:pointer;
  background:#F1F5F9; border:1px solid var(--border); border-radius:12px;
  color:#616160 ; text-transform:uppercase; box-shadow:0 2px 4px rgba(0,0,0,.04);
}
.opt-pill strong{ display:block; font-weight:800; }
.opt-pill .rate{ font-variant-numeric:tabular-nums; }
.opt-pill.active{ background:#0792a8; border-color:#0792a8 ; color:#fff; }
.opt-pill:hover{  background:#0792a8; border-color:#0792a8; color:#fff; }

/* 3) Cuerpo: 1 columna + botón centrado */
.row-inputs{
  position:relative; display:grid; grid-template-columns:1fr; gap:22px;
  margin:10px 0 6px;
}
.box{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06); padding:12px;
}
.panel{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* 3.1) Columna izquierda (hint + bandera) */
.panel-left{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.hint{ margin:0; color:var(--muted); font-weight:700; }
.flag{
  width:18px; height:12px; display:block; border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
/* por si quedaron restos antiguos */
.panel-left .cur, .panel-left .symb{ display:none !important; }

/* 3.2) Columna derecha (símbolo + monto) */
.panel-right{ flex:1; display:flex; justify-content:flex-end; }

/* wrapper del monto; necesario para el símbolo interno */
.amount-line{ position:relative; display:inline-block; }

/* símbolo DENTRO, pegado al número (usa --amtw del JS) */
.amount-line::before{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  right:calc(var(--amtw,0px) + 1px);  /* colchón de 1px */
  font-weight:700; line-height:1; color:#616160 ;
}
.amount-line.usd::before{ content:'$'; }
.amount-line.pen::before{ content:'S/'; }

/* inputs a la derecha, sin reservar espacio extra */
#inp-usd, #inp-pen{
/*  width:auto !important; */
  min-width:0 !important; 
  max-width:none;
  padding:0; border:0; outline:0; background:transparent;
  text-align:right; font-size:1.4rem; font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* 4) Botón central */
#toggle-mid{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; width:48px; height:48px; border-radius:50%;
  background:transparent; color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.16); padding:0; cursor:pointer;
}
#toggle-mid img{ width:100%; height:auto; display:block; }
#toggle-mid.spin{ animation:spinCenter .4s linear; }
@keyframes spinCenter{
  from{ transform:translate(-50%,-50%) rotate(0) }
  to  { transform:translate(-50%,-50%) rotate(180deg) }
}

/* 5) CTA + meta */
.row-cta{ margin-top:8px; }
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  padding:12px 16px; border-radius:10px; background:#123852; color:#fff;
  text-decoration:none; font-weight:800;
}
.btn-cta:hover{ color:#fff; }
.sis-meta{ margin-top:8px; color:#6B7280; }

/* 6) Responsive */



/* —— Símbolo DENTRO y pegado al número sin depender del ancho —— */
.sis-card.fit-like .amount-line{
  position: relative;
  display: inline-flex;          /* mantiene baseline del número */
  align-items: baseline;
}

.sis-card.fit-like .amount-line::before{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;                   /* justo antes del input */
  margin-right: 2px;             /* ajusta 0–3px a gusto */
  font-weight: 700;
  line-height: 1;
  color: #616160 ;
  content: '';
}
.sis-card.fit-like .amount-line.usd::before{ content: '$'; }
.sis-card.fit-like .amount-line.pen::before{ content: 'S/'; }

/* El input no debe reservar espacio extra */
#inp-usd, #inp-pen{
/*  width: auto !important;*/
  min-width: 0 !important;
  max-width: none;
  padding: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}







/* Desactiva símbolo por ::before si quedó de parches previos */
.sis-card.fit-like .amount-line::before{ content:none !important; }

/* Centrar símbolo + monto */
.sis-card.fit-like .panel-right{
  flex: 1;
  display: flex;
  justify-content: center;     /* << centrado horizontal */
  align-items: center;
  text-align: center;
}

.sis-card.fit-like .amount-line{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;                     /* espacio mínimo entre símbolo y número */
}

/* Símbolo */
.sis-card.fit-like .amount-line .symb{
  font-weight: 700;
  line-height: 1;
  color: #616160 ;
  margin: 0;
}

/* El input no debe reservar ancho extra: se ajusta al contenido */
#inp-usd, #inp-pen{
/*  width: auto !important;*/
  min-width: 0 !important;
  max-width: none;
  padding: 0;
  text-align: right;           /* puedes usar left si prefieres */
  font-variant-numeric: tabular-nums;
  color:#616160 ;
}


.panel-right{ display:flex; justify-content:center; }
.amount-line{ display:inline-flex; align-items:baseline; gap:4px; }


/* ==== Fijar ancho estable de la tarjeta (anti-shrink-to-fit) ==== */
.sis-card.fit-like{
  display: block;
  box-sizing: border-box;
  width: 100% !important;         /* llena el ancho disponible */
  max-width: 550px;               /* tope en desktop (como ya tenías) */
  margin-inline: auto;            /* centrada */
  /* Si el padre es flex/grid, evita que se mida por el contenido: */
  flex: 1 1 550px;                /* ocupa espacio como bloque, no por contenido */
  align-self: stretch;            /* estírala en el eje cruzado del flex */
  min-inline-size: 0;             /* permite ocupar 100% dentro de columnas flex */
}

/* WordPress/Gutenberg a veces aplica “fit-content” en wrappers;
   garantizamos que la tarjeta no herede eso */
.wp-block-group .sis-card.fit-like,
.wp-block-column .sis-card.fit-like,
.wp-block .sis-card.fit-like{
  width: 100% !important;
}




#hint-left {
  width: 150px;
}
#hint-right {
  width: 150px;
}




/* Popup asesor */
.popup-asesor {
  display: none; 
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999; 
  align-items: center; justify-content: center;
}
.popup-asesor .popup-content {
  background: #fff; padding: 24px; border-radius: 12px;
  text-align: center; max-width: 300px;
}
.popup-asesor .popup-whatsapp {
  display: inline-block; margin-top: 12px; 
  background: #25D366; color: #fff; padding: 10px 16px;
  border-radius: 6px; text-decoration: none; font-weight: 700;
}