/* ======================================================
   AYUDA SEGURO · ESTILOS BASE
   ====================================================== */

body{
  background:#f4f7fb;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#1f2937;
}

/* ======================================================
   TARJETAS DE SELECCIÓN
   ====================================================== */

.selector-box{
  background:#ffffff;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
  cursor:pointer;
  transition:all .2s ease;
}

.selector-box:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}

.selector-icon{
  font-size:26px;
  color:#0072ce;
}

.selector-box strong{
  font-size:16px;
  font-weight:600;
}

.selector-box small{
  font-size:14px;
  color:#6b7280;
}

/* ======================================================
   COPAGO (DOS OPCIONES EN LA MISMA TARJETA)
   ====================================================== */

.copago-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.copago-item{
  padding:12px;
  text-align:center;
  border:1px solid #d1d5db;
  border-radius:12px;
  background:#f9fafb;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s ease;
}

.copago-item:hover{
  background:#0072ce;
  color:#ffffff;
  border-color:#0072ce;
}

/* Responsive: móvil → dos filas */
@media (max-width:576px){
  .copago-row{
    grid-template-columns:1fr;
  }
}

/* ======================================================
   CHAT (RESTAURADO Y CONTROLADO)
   ====================================================== */

.chat-wrapper{
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  height:600px;                 /* altura fija */
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.chat-header{
  background:#0072ce;
  color:#ffffff;
  padding:14px 16px;
  font-weight:600;
  font-size:15px;
}

/* Área de mensajes */
.chat-box{
  flex:1;
  padding:16px;
  overflow-y:auto;
  background:#ffffff;
}

/* Mensajes */
.msg{
  padding:10px 14px;
  border-radius:12px;
  margin-bottom:10px;
  max-width:85%;
  font-size:14px;
  line-height:1.4;
}

.msg.user{
  background:#0072ce;
  color:#ffffff;
  margin-left:auto;
}

.msg.gpt{
  background:#f1f3f5;
  color:#1f2937;
}

/* ======================================================
   FORMULARIO CHAT
   ====================================================== */

.chat-form{
  padding:12px;
  border-top:1px solid #e5e7eb;
  display:flex;
  gap:8px;
  background:#ffffff;
}

.chat-form input{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d1d5db;
  font-size:14px;
}

.chat-form input:focus{
  outline:none;
  border-color:#0072ce;
}

.chat-form button{
  background:#0072ce;
  color:#ffffff;
  border:none;
  border-radius:10px;
  padding:0 16px;
  font-weight:600;
  cursor:pointer;
}

.chat-form button:hover{
  background:#005fa3;
}

/* ======================================================
   BOTÓN CALCULAR PRECIO
   ====================================================== */

.btn-calcular{
  background:#16a34a;
  color:#ffffff;
  border:none;
  border-radius:12px;
  padding:14px;
  font-size:16px;
  font-weight:700;
  width:100%;
  cursor:pointer;
}

.btn-calcular:hover{
  background:#15803d;
}
/* ======================================================
   MODAL CALCULAR PRECIO · RESPONSIVE REAL
   ====================================================== */

.modal-calculo{
  max-width:420px;       /* escritorio */
  width:100%;
}

.modal-calculo-content{
  border-radius:16px;
  overflow:hidden;
}

/* iframe */
.calculo-iframe{
  width:100%;
  height:540px;
  border:0;
}

/* ===== MÓVIL: FULLSCREEN ===== */
@media (max-width:576px){

  .modal-calculo{
    margin:0;
    max-width:100%;
    height:100vh;
  }

  .modal-calculo-content{
    height:100vh;
    border-radius:0;
  }

  .calculo-iframe{
    height:calc(100vh - 56px); /* header modal */
  }
}