/* ====== Contenedor ====== */
.calculadora-arbitraje-container{
  max-width:980px;margin:24px auto;padding:28px;background:#fff;border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.08);border:1px solid #eee;color:#111;
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ====== Título/Subtítulo ====== */
:root{ --tm-mostaza:#A2741C; --tm-oscuro:#131313; }
.calculadora-arbitraje-title{
  color:var(--tm-mostaza); font-weight:800; font-size:36px; line-height:1.12;
  margin:0 0 8px 0; text-shadow:none;
}
.calc-subtitle{ color:#444; font-size:16px; line-height:1.6; margin:0 0 18px 0; }

/* ====== Tabs ====== */
.type-selector{ display:flex; gap:14px; margin:12px 0 12px; flex-wrap:wrap; }
.type-btn{
  cursor:pointer;padding:16px 20px;border-radius:12px;background:#0b0b0b;color:#fff;
  border:2px solid #0b0b0b;font-weight:700;transition:.2s ease;
}
.type-btn:hover{ transform:translateY(-1px); }
.type-btn.active{ background:var(--tm-mostaza);border-color:var(--tm-mostaza);box-shadow:0 10px 24px rgba(162,116,28,.35); }

/* ====== Línea tipo de cambio ====== */
.rate-line{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin:8px 0 16px;
  border:1px solid #e6e6e6; border-radius:10px; background:#fafafa; font-size:14px; color:#333;
}
.rate-line strong{ color:var(--tm-mostaza); }
.rate-line .muted{ color:#666; font-size:12px; }

/* ====== Botones de documentos ====== */
.document-buttons{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.doc-btn{
  background:#efefef;border:1px solid #e6e6e6;border-radius:12px;padding:14px 18px;
  font-weight:700;color:#222;text-decoration:none;transition:.2s ease;
}
.doc-btn:hover{ background:#f5f5f5; transform:translateY(-1px); }

/* ====== Sección entrada ====== */
.input-section{ background:#fafafa;border:1px solid #eee;border-radius:16px;padding:22px; }

/* Encabezado Pretensiones + tooltip */
.pretensiones-head{ margin:6px 0 10px; }
.pret-title{
  color:var(--tm-mostaza); font-size:28px; font-weight:800; margin:0;
  display:flex; align-items:center; gap:8px;
}
.sunat-subline{ color:var(--tm-mostaza); font-size:14px; margin-top:6px; font-weight:600; }

/* Tooltip "?" compacto */
.help-badge{
  background:var(--tm-mostaza); color:#fff; border:0; height:28px; min-width:34px; padding:0 8px;
  border-radius:8px; font-weight:800; line-height:28px; text-align:center; cursor:pointer;
  box-shadow:0 6px 14px rgba(162,116,28,.25);
}
.help-popover{
  position:absolute; transform:translateY(40px);
  background:#111; color:#fff; padding:8px 10px; border-radius:8px; font-size:12px;
  max-width:280px; box-shadow:0 10px 20px rgba(0,0,0,.2); display:none;
}
.help-popover.show{ display:block; }

/* ====== Input + selector moneda ====== */
.currency-input-container{
  display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #e8e8e8;
  border-radius:14px; padding:12px;
}
.currency-input-container input[type="number"]{
  flex:1; font-size:18px; font-weight:600; border:0; outline:0; color:#111;
}
.currency-input-container input::placeholder{ color:#aaa; font-weight:500; }
.currency-selector{ display:flex; gap:6px; background:#f4f4f4; border:1px solid #ddd; border-radius:10px; padding:4px; }
.radio-label{ padding:8px 14px; font-weight:700; color:#444; border-radius:8px; cursor:pointer; }
.radio-label input{ display:none; }
.radio-label:has(input:checked), .radio-label.active{
  background:var(--tm-mostaza); color:#fff; box-shadow:0 6px 20px rgba(162,116,28,.35);
}

/* ====== Botón Calcular con “pulse” ====== */
.calculate-btn{
  margin-top:14px;width:100%;background:var(--tm-mostaza);color:#fff;border:0;border-radius:12px;
  padding:16px 20px;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;
  animation:btnPulse 2.4s infinite;
}
@keyframes btnPulse{
  0%{ box-shadow:0 0 0 0 rgba(162,116,28,.35); }
  70%{ box-shadow:0 0 0 16px rgba(162,116,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(162,116,28,0); }
}

/* ====== Modal ====== */
.results-container{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.75); backdrop-filter:blur(4px); }
.results-container.show{ display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-content{
  background:#fff; width:min(920px,96vw); max-height:92vh; overflow:auto;
  border-radius:16px; border:1px solid #eee; box-shadow:0 20px 60px rgba(0,0,0,.35); position:relative; padding:22px;
}
.close-btn{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:var(--tm-mostaza); color:#fff; font-weight:900; cursor:pointer; }

/* ====== Resultado “una sola vista” estilo referencia ====== */
.info-moneda{ border-left:4px solid var(--tm-mostaza); background:#fff8e6; padding:12px 14px; border-radius:8px; margin-bottom:14px; }
.info-moneda.usd{ background:#eef7ff; border-left-color:#1e7ca8; }

.card-result{ border:1px solid #e2e8f0; border-radius:12px; background:#fff; margin:18px 0; overflow:hidden; }
.card-result .card-head{
  background:var(--tm-mostaza); color:#fff; font-weight:800; padding:12px 16px; text-align:center;
}
.result-section{ padding:12px 16px; border-top:1px solid #e9eef3; display:flex; justify-content:space-between; }
.result-section:nth-child(odd){ background:#f9fbff; }
.result-section .sec-title{ font-weight:700; color:#1f2937; }
.result-section .sec-amount{ font-weight:800; color:#1f2937; }

.totals-wrap{ background:#f8f9fa; border-radius:10px; padding:12px; border:1px solid #e1e1e1; }
.totals-wrap .total-row{ display:flex; justify-content:space-between; padding:10px 12px; background:#fff; border-radius:8px; margin-bottom:10px; border:1px solid #e5e7eb; }
.totals-wrap .total-row.strong{ font-weight:800; font-size:18px; }

.nota-50{ text-align:center; margin:18px 0 8px; }
.nota-50 .tit{ font-weight:900; font-size:18px; color:#0f172a; margin-bottom:4px; }
.nota-50 .txt{ color:#4b5563; }

.action-buttons{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.action-btn{ padding:12px 18px; border-radius:12px; font-weight:800; cursor:pointer; border:2px solid transparent; }
.descargar-pdf-btn{ background:#0ea5b1; color:#fff; }
.nuevo-calculo-btn{ background:#f3f4f6; color:#0f172a; border-color:#d1d5db; }
.toggle-moneda-btn{ background:var(--tm-mostaza); border:2px solid var(--tm-mostaza); color:#fff; }
.toggle-moneda-btn:hover{ filter:brightness(1.05); }

/* ====== Responsive ====== */
@media (max-width:680px){
  .calculadora-arbitraje-title{ font-size:30px; }
  .pret-title{ font-size:24px; }
}



















/* ===== Encabezados en mostaza y tamaño moderado ===== */
.calculadora-arbitraje-title{
  color:#A2741C !important;
  text-shadow:none !important;
  font-weight:800 !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  margin: 0 0 8px 0 !important;
}
.calc-subtitle{ color:#4a4a4a; font-size:16px; }

/* Pretensiones + sublínea */
.pret-title{
  color:#A2741C;
  font-weight:800;
  font-size: clamp(22px, 2.2vw, 28px);
  margin:0;
  display:flex; align-items:center; gap:8px;
}
.sunat-subline{ color:#A2741C; font-weight:600; opacity:.95; }

/* ===== Pestañas en gris (no negro) ===== */
.type-btn{
  background:#e9ecef; border:1px solid #e9ecef; color:#111;
  padding:16px 20px; border-radius:12px; font-weight:700; cursor:pointer;
  transition:.15s ease;
}
.type-btn:hover{ background:#f1f3f5; }
.type-btn.active{
  background:#A2741C; border-color:#A2741C; color:#fff;
  box-shadow:0 10px 24px rgba(162,116,28,.28);
}

/* ===== Tooltip circular que aparece al pasar el mouse ===== */
.help-wrap{ position:relative; display:inline-flex; }
.help-badge{
  width:26px; height:26px; border-radius:50%;
  background:#A2741C; color:#fff; border:0; padding:0;
  line-height:26px; text-align:center; font-weight:800; font-size:13px;
  cursor:default; box-shadow:0 2px 6px rgba(162,116,28,.25);
}
.help-popover{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  display:none; background:#111; color:#fff; font-size:12px;
  padding:8px 10px; border-radius:8px; width:260px; text-align:left;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
}
.help-popover:after{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #111;
}
/* Mostrar tooltip con hover o focus (accesible) */
.help-wrap:hover .help-popover,
.help-badge:focus + .help-popover{ display:block; }

/* ===== Ocultar por completo la línea de tipo de cambio ===== */
.rate-line{ display:none !important; }



:root{
  --tm-mostaza:#A2741C;
  --tm-gris-btn:#3b3b3b;   /* gris para pestañas inactivas */
  --tm-gris-btn-h:#4a4a4a; /* hover */
}

/* Título/Subtítulo (mostaza, más pequeño) */
.calculadora-arbitraje-title{
  color: var(--tm-mostaza) !important;
  font-size: 34px !important;      /* ↓ más pequeño */
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
  text-shadow: none !important;
}
.calc-subtitle{
  color:#495057 !important;
  font-size:16px !important;
  margin:0 0 18px 0 !important;
}

/* Pestañas: gris (no negro) para inactivas; mostaza para activa */
.type-selector{ display:flex; gap:14px; margin:12px 0 20px; flex-wrap:wrap; }
.type-btn{
  cursor:pointer; padding:14px 18px; border-radius:12px;
  background: var(--tm-gris-btn);  border:2px solid var(--tm-gris-btn);
  color:#fff; font-weight:700; transition:.18s ease;
}
.type-btn:hover{ background: var(--tm-gris-btn-h); border-color: var(--tm-gris-btn-h); }
.type-btn.active{
  background: var(--tm-mostaza) !important; border-color: var(--tm-mostaza) !important;
  box-shadow:0 8px 22px rgba(162,116,28,.28);
}

/* Pretensiones + línea SUNAT (en mostaza, formato discreto) */
.pretensiones-head{ margin:10px 0 12px; }
.pret-title{
  color: var(--tm-mostaza);
  font-size: 28px; font-weight: 800; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.sunat-subline{ color: var(--tm-mostaza); font-weight: 600; opacity:.95; }

/* Tooltip circular y limpio: aparece con hover/focus */
.tip-wrap{ position: relative; display: inline-flex; align-items: center; }
.help-badge{
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--tm-mostaza); color:#fff; border:0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; line-height: 1; cursor: default;
  box-shadow: 0 4px 12px rgba(162,116,28,.25);
}

/* Caja tooltip: pequeña, legible, con flechita — aparece al pasar el cursor */
.help-popover{
  position: absolute;
  bottom: calc(100% + 10px);      /* arriba del ? */
  left: 50%; transform: translateX(-50%) translateY(6px);
  background:#111; color:#fff; padding:8px 10px; border-radius:8px;
  font-size:12px; line-height:1.35; max-width:280px; white-space:normal;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transition: all .18s ease;
  pointer-events:none;
}
.help-popover::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #111;
}
/* Mostrar con hover o focus */
.tip-wrap:hover .help-popover,
.help-badge:focus + .help-popover{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}

/* Botón principal en mostaza con pulso suave */
.calculate-btn{
  background: var(--tm-mostaza) !important; border-color: var(--tm-mostaza) !important;
  color:#fff !important; font-weight:800 !important;
  box-shadow:0 0 0 0 rgba(162,116,28,.28);
  animation: btnPulse 2.6s infinite;
}
@keyframes btnPulse{
  0%{ box-shadow:0 0 0 0 rgba(162,116,28,.28); }
  70%{ box-shadow:0 0 0 16px rgba(162,116,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(162,116,28,0); }
}

/* Input y selector de moneda (match con tu estilo actual) */
.currency-input-container{
  display:flex; gap:10px; align-items:center;
  background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:12px;
}
.radio-label{ padding:8px 14px; border-radius:8px; font-weight:700; color:#444; cursor:pointer; }
.radio-label input{ display:none; }
.radio-label:has(input:checked){
  background: var(--tm-mostaza); color:#fff; box-shadow:0 6px 18px rgba(162,116,28,.28);
}

/* Modal – cabezales mostaza y totales marcados (para acercarlo a la referencia) */
.result-header{ background: var(--tm-mostaza); color:#fff; font-weight:800; font-size:18px; border-radius:10px; padding:12px 16px; }
.result-row .val{ font-weight:800; }
.totals-wrap .total-row.strong{ font-size:18px; font-weight:900; }

/* ===== AJUSTES QUE PIDES (limpios) ===== */

/* Título principal: NO cambio tamaño ni color, sólo separo un poco letras */
.calculadora-arbitraje-title{
  letter-spacing: .3px !important;
  word-spacing: .5px !important;
  margin-bottom: 10px !important;
}

/* Pretensiones: más pequeño y en mostaza */
.pret-title{
  color:#A2741C !important;
  font-weight:800 !important;
  font-size: clamp(22px, 2.2vw, 26px) !important; /* ↓ tamaño */
  line-height: 1.25 !important;
  display:flex; align-items:center; gap:10px;
  margin: 2px 0 6px 0 !important;
}

/* Sub-línea SUNAT en mostaza */
.sunat-subline{
  color:#A2741C !important;
  font-weight:600 !important;
  opacity:.95;
  margin-top: 4px;
}

/* Pestañas inactivas en GRIS, activa en mostaza */
.type-btn{
  background:#e9ecef !important;
  color:#111 !important;
  border:1px solid #e9ecef !important;
}
.type-btn:hover{ background:#f1f3f5 !important; }
.type-btn.active{
  background:#A2741C !important;
  border-color:#A2741C !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(162,116,28,.28) !important;
}

/* Tooltip redondo y con hover (como la referencia) */
.tip-wrap{ position: relative; display:inline-flex; align-items:center; }
.help-badge{
  width: 26px; height: 26px;
  border-radius: 999px;
  background:#A2741C; color:#fff; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; line-height:1;
  cursor:default;
  box-shadow:0 4px 12px rgba(162,116,28,.25);
  transition: transform .15s ease;
}
.help-badge:hover{ transform: translateY(-1px); }

.help-popover{
  position:absolute;
  top: calc(100% + 10px);     /* aparece arriba del botón */
  left: 50%; transform: translateX(-50%) translateY(6px);
  background:#111; color:#fff;
  padding:8px 10px; border-radius:8px;
  font-size:12px; line-height:1.35; max-width:280px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: all .18s ease;
  text-align:left;
  z-index: 10;
}
.help-popover::after{
  content:""; position:absolute; top:-7px; left:50%;
  transform: translateX(-50%);
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:7px solid #111;
}
/* Mostrar al pasar el cursor o con focus (accesible) */
.tip-wrap:hover .help-popover,
.help-badge:focus + .help-popover{
  opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}

/* Ocultar la línea de tipo de cambio (no la quieres) */
.rate-line{ display:none !important; }

/* Tooltip redondo + hover */
.tip-wrap{ position:relative; display:inline-flex; vertical-align:middle; }

.help-badge{
  width:28px; height:28px; border-radius:50%;
  background:#A2741C; color:#fff; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; line-height:1; cursor:default;
  box-shadow:0 4px 12px rgba(162,116,28,.25);
}

.help-popover{
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background:#111; color:#fff; padding:8px 10px; border-radius:8px;
  font-size:12px; line-height:1.35; max-width:280px; white-space:normal;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.help-popover::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #111;
}

/* Mostrar al pasar el cursor o al enfocar con teclado */
.tip-wrap:hover .help-popover,
.help-badge:focus + .help-popover{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}


/* Badge redondo */
.help-badge{
  width:28px; height:28px; padding:0; border-radius:50%;
  background:#A2741C; color:#fff; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; line-height:1; box-shadow:0 4px 12px rgba(162,116,28,.25);
}

/* Tooltip: oculto por defecto, visible con .show (hover/focus) */
.help-popover{
  display:none; position:absolute;
  bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:#111; color:#fff; padding:8px 10px; border-radius:8px;
  font-size:12px; line-height:1.35; max-width:280px; white-space:normal;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.help-popover.show{ display:block; }
.help-popover::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #111;
}

/* Para posicionar relativo al título si no hay wrapper */
.pret-title{ position:relative; }









/* === Tooltip redondo + a la DERECHA del ? (override limpio) === */

/* El título sirve sólo como contenedor en línea */
.pret-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
}

/* Botón ? – 100% redondo (no ovalado) */
#pretensionesTip.help-badge{
  width:28px !important;
  height:28px !important;
  min-width:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#A2741C !important;
  color:#fff !important;
  border:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:0 4px 12px rgba(162,116,28,.25) !important;
}

/* Tooltip: se muestra a la DERECHA del ? */
#pretensionesTooltip.help-popover{
  /* anula posiciones viejas (abajo/centro) */
  position:relative !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;

  /* estilo del globo */
  display:none;                 /* oculto por defecto */
  margin-left:10px;             /* a la derecha del ? */
  background:#111;
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  font-size:12px;
  line-height:1.35;
  max-width:280px;
  white-space:normal;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  z-index:10;
}

/* Flechita apuntando desde la izquierda hacia el tooltip */
#pretensionesTooltip.help-popover::after{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  transform:translateY(-50%);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-right:6px solid #111;
}

/* Mostrar sólo cuando pasas el cursor por el ? o lo enfocas con teclado */
#pretensionesTip.help-badge:hover + #pretensionesTooltip.help-popover,
#pretensionesTip.help-badge:focus + #pretensionesTooltip.help-popover{
  display:inline-block;
}






#pretensionesTooltip.help-popover{
      line-height: 1.55;         /* MÁS ALTURA DE LÍNEA */
  letter-spacing: .2px;      /* aire entre letras */
  word-spacing: .6px;        /* aire entre palabras */

    
}
    
    
/* === FIX anti-temblor del tooltip === */

/* El hover se ancla al título completo, no sólo al botón */
.pret-title{ position: relative !important; }

/* El tooltip siempre está en el flujo (display:block) y se oculta con opacity/visibility */
#pretensionesTooltip{
  display: block !important;
  position: absolute !important;
  left: calc(100% + 14px) !important;   /* a la derecha del ? */
  top: 50% !important;
  transform: translateY(-50%) !important;

  /* legibilidad que ya te funcionó */
  line-height: 1.55 !important;
  letter-spacing: .2px !important;
  word-spacing: .6px !important;

  /* oculta sin reflujo */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .15s ease, visibility .15s ease !important;
  will-change: opacity !important;
}

/* Mostrar tooltip al pasar por el área del título o con focus del botón */
.pret-title:hover #pretensionesTooltip,
#pretensionesTip:focus + #pretensionesTooltip{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Botón ? totalmente redondo y sin micro-animaciones en hover (evita el “salto”) */
#pretensionesTip{
  margin-left: 10px !important;   /* separa del texto */
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  border-radius: 50% !important;
}
#pretensionesTip:hover{ transform: none !important; }  /* anula cualquier translate/scale de hover */
    
    
    
/* ===== MODAL — encabezado mostaza y X en la esquina ===== */
#resultados .modal-content{
  position: relative;
  padding: 16px 22px 22px;      /* respiración arriba para el header */
  border-radius: 16px;
}

/* Banda de título (Soles / Dólares) */
#resultados .modal-banner{
  display:flex; align-items:center; gap:10px;
  background:#fff5e6;                 /* crema mostaza */
  border:1px solid #f3e1c3;
  border-radius:12px;
  padding:12px 14px;
  margin:4px 0 16px;
  color:var(--tm-mostaza);
  font-weight:800;
}
#resultados .modal-banner .emoji{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#ffe7bf; border-radius:8px; font-size:16px;
}

/* Botón cerrar (a la esquina) */
#resultados .close-btn{
  position:absolute !important;
  top:8px !important; right:8px !important; left:auto !important;
  width:36px; height:36px; border-radius:50%;
  background:var(--tm-mostaza); color:#fff; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  transition:transform .12s ease, filter .12s ease;
}
#resultados .close-btn:hover{ transform:scale(1.05); filter:brightness(1.05); }

/* Tarjetas y totales un toque más marcados */
#resultados .card-result{ border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; }
#resultados .card-result .card-head{
  background:var(--tm-mostaza); color:#fff;
  font-weight:800; text-align:center; padding:12px 16px;
}
#resultados .result-section{ display:flex; justify-content:space-between; padding:12px 16px; border-top:1px solid #e9eef3; }
#resultados .result-section:nth-child(odd){ background:#f9fbff; }
#resultados .totals-wrap{ background:#f8f9fa; border:1px solid #e1e1e1; border-radius:10px; padding:12px; }
#resultados .totals-wrap .total-row{ display:flex; justify-content:space-between; padding:10px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; margin-bottom:10px; }
#resultados .totals-wrap .total-row.strong{ font-size:18px; font-weight:900; }

/* Botonera inferior */
#resultados .action-buttons .action-btn{
  border-radius:12px; padding:12px 18px; font-weight:800;
}
    
    
    
/* ---------- MODAL: cabecera informativa y close ----------- */
.info-moneda{ 
  background:#fff8e6 !important; 
  border-left:4px solid var(--tm-mostaza) !important; 
  padding:14px 16px !important; 
  border-radius:10px !important;
}
.info-moneda h4{
  margin:0 0 2px 0 !important;
  color:var(--tm-mostaza) !important;
  font-weight:900 !important;
  font-size:18px !important;
  letter-spacing:.2px !important;
}

/* “X” fija al borde del modal */
.results-container .modal-content{ padding-top:22px !important; }
.results-container .close-btn{
  position:absolute !important;
  top:-12px !important;               /* fuera del borde, look flotante */
  right:-12px !important;
  width:36px !important; height:36px !important;
  border-radius:50% !important;
  background:var(--tm-mostaza) !important; color:#fff !important;
  line-height:36px !important; font-size:18px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-shadow:0 8px 18px rgba(162,116,28,.35) !important;
  border:0 !important; cursor:pointer !important;
  z-index:5 !important;
}

/* ---------- MODAL: tabs “píldora” (Único / Tribunal) ---------- */
.results-tabs{
  display:flex; gap:10px;
  background:#f1f3f5; padding:8px; border-radius:12px;
  margin:8px 0 14px 0;
  width:max-content;
}
.seg-btn{
  appearance:none; border:2px solid transparent;
  background:#fff; color:#0f172a; font-weight:800;
  padding:10px 14px; border-radius:10px; cursor:pointer;
  transition:.18s ease; white-space:nowrap;
}
.seg-btn:hover{ filter:brightness(1.02); }
.seg-btn.active{
  background:var(--tm-mostaza); color:#fff;
  border-color:var(--tm-mostaza);
  box-shadow:0 6px 18px rgba(162,116,28,.28);
}

/* ---------- MODAL: tarjetas y totales (pulido) ---------- */
.card-result{ border:1px solid #e6e8ee !important; border-radius:12px !important; overflow:hidden !important; }
.card-result .card-head{
  background:var(--tm-mostaza) !important; color:#fff !important;
  font-weight:900 !important; text-transform:none !important;
  letter-spacing:.2px !important;
}
.result-section{ padding:12px 16px !important; }
.result-section .sec-title{ color:#172132 !important; }
.result-section .sec-amount{ color:#0f172a !important; font-weight:900 !important; }
.totals-wrap{ background:#f8f9fb !important; border:1px solid #e6e8ee !important; }
.totals-wrap .total-row.strong{ background:#fff !important; border:2px dashed #e3e6ee !important; }
    
 .results-tabs{
  display:flex; gap:12px; margin:8px 0 14px;
}
.seg-btn{
  border:2px solid #e5e7eb; background:#f3f4f6; color:#111;
  padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer;
}
.seg-btn.active{
  background:#A2741C; border-color:#A2741C; color:#fff;
  box-shadow:0 8px 22px rgba(162,116,28,.28);
}





/* ====== FILA SUPERIOR: 3 botones a todo ancho ====== */
.type-selector{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
  margin: 12px 0 20px !important;
}
.type-btn{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

/* ====== FILA INFERIOR: 2 botones centrados ====== */
.document-buttons{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  justify-content:center !important;   /* centra la grilla si sobra espacio */
  gap:16px !important;
}
.doc-btn{ width:100% !important; text-align:center !important; }

/* ====== MODAL: pestañas a todo ancho ====== */
.results-tabs{
  width:100% !important;
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:14px !important;
  margin: 2px 0 12px !important;
}
.results-tabs .seg-btn{ width:100% !important; }

/* Botonera inferior del modal centrada */
.action-buttons{
  justify-content:center !important;
  gap:14px !important;
}
.action-buttons .action-btn{ min-width:220px; }

/* ====== QUITAR “Cálculo en Soles” (caja informativa) ====== */
.info-moneda{ display:none !important; }

/* Responsivo */
@media (max-width: 680px){
  .type-selector{ grid-template-columns: 1fr !important; }
  .document-buttons{ grid-template-columns: 1fr !important; }
  .results-tabs{ grid-template-columns: 1fr !important; }
  .action-buttons .action-btn{ width:100%; min-width:0; }
}



/* ========== 1) Título y subtítulo centrados ========== */
.calculadora-arbitraje-title{
  text-align:center !important;
  margin-left:0 !important; margin-right:0 !important;
}
.calc-subtitle{
  text-align:center !important;
  margin:6px auto 16px !important;
}

/* ========== 2) Hover con fondo para los 2 botones de documentos ========== */
/* (Tabla de Costos Arbitrales / Reglamento de Costos Arbitrales) */
.document-buttons{ justify-content:center; }
.doc-btn{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.doc-btn:hover{
  background:#fff4db !important;               /* fondo resaltado */
  border-color:#e9c882 !important;              /* borde en mostaza suave */
  box-shadow:0 8px 22px rgba(162,116,28,.22) !important;
  transform:translateY(-2px);
}

/* ========== 3) Dentro del modal: 2 botones arriba + 1 centrado abajo ========== */
/* (Descargar PDF y Nuevo Cálculo arriba; Cambiar a USD/S/ abajo centrado) */
.results-container .action-buttons{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  gap:14px !important;
  justify-items:center !important;
}
.results-container .action-buttons .toggle-moneda-btn{
  grid-column: 1 / -1 !important;               /* ocupa toda la fila */
  justify-self:center !important;               /* centrado */
}

/* Responsive: en móviles, todo en una sola columna */
@media (max-width: 640px){
  .results-container .action-buttons{
    grid-template-columns: 1fr !important;
  }
}

/* (opcional) un hover suave para los 3 botones de acción del modal */
.results-container .action-btn{
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.results-container .action-btn:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  transform:translateY(-1px);
}

   /* Botones del modal más juntos */
.results-container .action-buttons{
  display: grid !important;
  grid-template-columns: repeat(2, auto) !important; /* columnas al tamaño del botón */
  justify-content: center !important;               /* centrados */
  column-gap: 10px !important;                      /* separacion horizontal */
  row-gap: 10px !important;                         /* separacion vertical */
}

/* El botón de cambiar moneda queda abajo, centrado */
.results-container .action-buttons .toggle-moneda-btn{
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}



/* Ancho del modal: más angosto y 100% responsive */
.calculadora-arbitraje-container #resultados .results-container{
  width: clamp(680px, 60vw, 600px) !important; /* ajusta el 70vw o 960px si lo quieres más/menos angosto */
  max-width: 96vw !important;
  box-sizing: border-box !important;
  padding: 18px 20px 22px !important;          /* menos padding interno */
}

/* Quita un poco de blanco a los laterales del overlay */
.calculadora-arbitraje-container #resultados{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Compacta los bloques internos (solo dentro del modal) */
.calculadora-arbitraje-container #resultados .card-head,
.calculadora-arbitraje-container #resultados .result-section,
.calculadora-arbitraje-container #resultados .totals-wrap{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.calculadora-arbitraje-container #resultados .card-result{
  margin-bottom: 16px !important;
}

/* Menos aire en nota y botones */
.calculadora-arbitraje-container #resultados .nota-50{
  margin: 16px 0 10px !important;
}
.calculadora-arbitraje-container #resultados .action-buttons{
  margin-top: 8px !important;
}


















/* Reducir ancho del modal de resultados (solo esta calculadora) */
.calculadora-arbitraje-container #resultados{
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* White card del modal (varios selectores por seguridad) */
.calculadora-arbitraje-container #resultados .results-container,
.calculadora-arbitraje-container #resultados .modal-content,
.calculadora-arbitraje-container #resultados .results-panel,
.calculadora-arbitraje-container #resultados .modal-card,
.calculadora-arbitraje-container #resultados > .results-card,
.calculadora-arbitraje-container #resultados > .modal-card,
.calculadora-arbitraje-container #resultados > div{
  width: clamp(620px, 40vw, 680px) !important;  /* ← ajusta 64vw/940px a tu gusto */
  max-width: 94vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Compactar un poco el padding interno */
.calculadora-arbitraje-container #resultados .modal-body,
.calculadora-arbitraje-container #resultados .results-body,
.calculadora-arbitraje-container #resultados #resultado-detalle{
  padding-left: 18px !important;
  padding-right: 18px !important;
}