/* Pantalla de la Catculadora: pasos, selección de banco y ruta,
   resultado y sus desgloses. */

/* -------------------- STEPS (calculadora — no tocar lógica) -------------------- */
.steps{
  display:flex;background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:4px;margin-bottom:var(--space-5);
  position:relative;overflow:hidden;
}
.steps-connected::before{
  content:'';position:absolute;top:50%;left:12%;right:12%;
  height:2px;background:var(--border);transform:translateY(-50%);z-index:0;
}
.step-btn{
  flex:1;text-align:center;padding:12px 4px;font-size:11px;letter-spacing:0.5px;
  color:var(--muted);border-radius:var(--radius-md);cursor:pointer;
  position:relative;z-index:1;transition:var(--transition-fast);
  font-weight:600;text-transform:uppercase;
}
.step-btn.active{
  background:var(--panel);color:var(--gold);
  border:1px solid var(--gold);box-shadow:var(--shadow-gold);
}

/* -------------------- BCV BOX -------------------- */
.bcv-box{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,rgba(240,198,116,0.06),rgba(240,198,116,0.02));
  border:1px solid rgba(240,198,116,0.25);border-radius:var(--radius-md);
  padding:var(--space-4);margin-bottom:var(--space-5);
  position:relative;overflow:hidden;
}
.bcv-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,198,116,0.4),transparent);
}
.bcv-label{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:0.5px;}
.bcv-display{display:flex;align-items:center;gap:10px;}
.bcv-display span:first-child{
  color:var(--green);font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums;font-family:var(--font-mono);
  text-shadow:0 0 20px rgba(14,203,129,0.2);
}
.bcv-refresh{
  cursor:pointer;font-size:14px;color:var(--muted);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:var(--transition-fast);
}
.bcv-refresh:hover{color:var(--gold);background:rgba(240,198,116,0.1);transform:rotate(180deg);}
.bcv-date{font-size:10px;color:var(--muted);text-align:right;margin-top:4px;}

/* -------------------- GRIDS & TILES -------------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.tile-grid.two-col{grid-template-columns:repeat(2,1fr);}
.tile-grid.three-col{grid-template-columns:repeat(3,1fr);}
.tile{
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3) 6px;text-align:center;cursor:pointer;
  transition:var(--transition-fast);position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.tile::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:transparent;transition:var(--transition-fast);
}
.tile:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.tile:hover::before{background:var(--gold);}
.tile.selected{
  border-color:var(--gold);background:rgba(240,198,116,0.08);
  box-shadow:0 0 0 1px var(--gold) inset,var(--shadow-gold);
}
.tile.selected::before{background:var(--gold);}
.disabled-tile{opacity:0.3;pointer-events:none;filter:grayscale(0.8);}

.badge{
  width:36px;height:36px;border-radius:50%;margin:0 auto 6px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:var(--bg);
  box-shadow:var(--shadow-sm);overflow:hidden;flex:0 0 auto;
}
/* El logo llena el círculo sin deformarse; si el archivo no existe, este <img> nunca
   llega a mostrarse (ver badgeBanco en app.js, que lo cambia por las iniciales). */
.badge-logo{width:100%;height:100%;object-fit:cover;display:block;}
.tile-name{font-size:11px;font-weight:700;}
.tile-sub{font-size:10px;color:var(--green);margin-top:2px;font-weight:500;}
.tile-sub.neg{color:var(--red);}
.tile-sub.muted{color:var(--muted);}

/* -------------------- RESULT BOX -------------------- */
.result-box{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  background:linear-gradient(135deg,rgba(14,203,129,0.08),rgba(14,203,129,0.02));
  border:1px solid rgba(14,203,129,0.3);border-radius:var(--radius-lg);
  padding:var(--space-5);margin-bottom:var(--space-4);
  box-shadow:0 8px 32px -12px rgba(14,203,129,0.2);
  position:relative;overflow:hidden;
}
.result-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(14,203,129,0.4),transparent);
}
.result-label{font-size:11px;color:var(--green);letter-spacing:1px;text-transform:uppercase;font-weight:600;}
.result-val{
  font-size:32px;font-weight:700;color:var(--green);margin-top:4px;
  font-variant-numeric:tabular-nums;font-family:var(--font-mono);
  text-shadow:0 0 24px rgba(14,203,129,0.25);
}
.result-val.negativo{color:var(--red);text-shadow:0 0 24px rgba(246,70,93,0.25);}
.result-box::after{
  content:"✓";flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:var(--green);color:#062018;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(14,203,129,0.3);
}

/* -------------------- RENTABILITY -------------------- */
.rent-row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0;
}
.rent-val{
  font-size:24px;font-weight:700;color:var(--amber);
  font-variant-numeric:tabular-nums;font-family:var(--font-mono);
}
.rent-val.pill-malo{color:var(--red);}
.rent-val.pill-normal{color:var(--amber);}
.rent-val.pill-excelente{color:var(--green);}
.pill{
  background:rgba(240,198,116,0.12);color:var(--amber);
  border:1px solid rgba(240,198,116,0.3);padding:5px 12px;
  border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.5px;
}
.pill-malo{background:var(--red-dim);color:var(--red);border-color:rgba(246,70,93,0.3);}
.pill-normal{background:rgba(240,198,116,0.12);color:var(--amber);border-color:rgba(240,198,116,0.3);}
.pill-excelente{background:var(--green-dim);color:var(--green);border-color:rgba(14,203,129,0.3);}

/* -------------------- CALC GRID -------------------- */
.calc-grid2col{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-bottom:6px;}
@media (min-width:760px){
  .calc-grid2col{grid-template-columns:0.85fr 1.15fr;align-items:start;}
}
.calc-grid2col > .subcard{min-width:0;}
.banco-strip{min-width:0;}

/* -------------------- BANK CAROUSEL -------------------- */
.banco-carousel{display:flex;align-items:center;gap:8px;}
.banco-strip{
  display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  flex:1;padding:2px 2px 8px;
}
.banco-strip::-webkit-scrollbar{height:3px;}
.banco-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.banco-strip .tile{flex:0 0 88px;scroll-snap-align:start;}
.carousel-arrow{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:var(--panel);color:var(--muted);cursor:pointer;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:var(--transition-fast);
}
.carousel-arrow:hover{border-color:var(--gold);color:var(--gold);background:rgba(240,198,116,0.08);transform:scale(1.1);}
.banco-detalle{
  display:flex;align-items:center;gap:12px;margin-top:var(--space-3);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px;
}
.banco-detalle .badge{margin:0;flex:0 0 auto;}
.banco-detalle-info .name{font-size:14px;font-weight:700;}
.banco-detalle-info .fees{display:flex;gap:16px;margin-top:6px;flex-wrap:wrap;}
.banco-detalle-info .fees div{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:600;}
.banco-detalle-info .fees span{display:block;font-size:13px;color:var(--text);font-weight:700;text-transform:none;margin-top:2px;font-family:var(--font-mono);}

/* -------------------- RESUME TILES -------------------- */
.resumen-grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.resumen-tile{
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:var(--transition-fast);
}
.resumen-tile:hover{border-color:var(--border-hover);transform:translateY(-1px);}
.resumen-tile .lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.resumen-tile .val{font-size:16px;font-weight:700;margin-top:6px;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* -------------------- SUGGESTION -------------------- */
.tasa-sugerencia{
  display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:10px 12px;font-size:11px;
}
.tasa-sugerencia .val{color:var(--green);font-weight:700;font-family:var(--font-mono);font-size:13px;}
.tasa-sugerencia button{
  background:var(--panel);border:1px solid var(--gold);color:var(--gold);
  border-radius:var(--radius-sm);padding:5px 12px;font-size:11px;cursor:pointer;font-weight:600;
  transition:var(--transition-fast);
}
.tasa-sugerencia button:hover{background:var(--gold);color:#101a2a;}

/* -------------------- SAVE ROW -------------------- */
.save-row{display:flex;gap:8px;margin-top:var(--space-4);align-items:stretch;}
.save-date{flex:0 0 150px;padding:10px 12px;}
.save-btn{flex:1;margin-top:0;}