/* ==========================================================================
   PESTAÑA MÉDICO — Cotizador Alfa Medical
   Reutiliza el diseño del cotizador de Retiro (clases ims-* y sus variables).
   Aquí solo van las piezas propias de Gastos Médicos (prefijo gm-).
   ========================================================================== */

/* Campos de texto y select con el mismo aspecto que Retiro */
.gm-duo { display: grid; gap: 14px; }
.gm-campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--secondary); }
.gm-campo select,
.gm-campo input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #FAFBFA;
  font-size: 17px;
  font-weight: 500;
  color: var(--neutral-dark);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gm-campo select:focus,
.gm-campo input:focus { border-color: var(--secondary-light); background: var(--white); box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12); }
.ims-field.is-invalid .gm-campo select,
.ims-field.is-invalid .gm-campo input { border-color: var(--danger); }

.gm-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--primary-tint);
  font-size: 14px;
  color: var(--neutral-dark);
  cursor: pointer;
}
.gm-check input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--primary); }
.ims-field.is-invalid .gm-check { outline: 2px solid var(--danger); }
.gm-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gm-error:empty { display: none; }
/* Los títulos reciben foco por accesibilidad al cambiar de pantalla; no necesitan contorno */
#gm-res-titulo:focus,
#gm-filtro-titulo:focus { outline: none; }

/* ---------- Personas ---------- */
.gm-personas { display: grid; gap: 10px; margin-top: 6px; }
.gm-persona {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #FAFBFA;
}
.gm-persona-nombre { font-weight: 700; color: var(--secondary); padding-right: 36px; }
.gm-edad { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--neutral-gray); }
.gm-edad input {
  width: 96px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-size: 18px;
  font-weight: 700;
  -moz-appearance: textfield;
}
/* Edad de "Tú": viene de la fecha de nacimiento */
.gm-edad input[readonly] { border-style: dashed; background: transparent; color: var(--secondary); cursor: default; }
.gm-edad input::-webkit-outer-spin-button,
.gm-edad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gm-sexo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-sexo label { position: relative; cursor: pointer; }
.gm-sexo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gm-sexo span {
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-weight: 700;
  color: var(--secondary);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.gm-sexo input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--white); }
.gm-sexo input:focus-visible + span { outline: 3px solid rgba(0, 102, 204, 0.45); outline-offset: 2px; }
.gm-quitar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--neutral-gray);
}
.gm-quitar:hover { background: var(--primary-tint); }
.gm-agregar { width: 100%; border-style: dashed; }

/* ---------- Capa 1: gasto máximo ---------- */
.gm-techo {
  display: grid;
  gap: 8px;
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--secondary), #0B4A80);
  color: var(--white);
}
.gm-techo-titulo { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.gm-techo-monto {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 13vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #FFB38F;
  font-variant-numeric: tabular-nums;
}
.gm-techo-desglose { margin: 0; font-size: 14px; color: #C9D6E6; }
.gm-techo-resto { margin: 4px 0 0; font-weight: 600; }
.gm-campo-oscuro { color: #DCE6F2; margin-top: 6px; }
.gm-campo-oscuro select { background: var(--white); border-color: transparent; }

/* ---------- Resultados ---------- */
.gm-resultados .ims-card p { margin: 0 0 10px; }
.gm-resultados .ims-card p:last-child { margin-bottom: 0; }
.gm-ayuda { font-size: 14px; color: var(--neutral-gray); }
.gm-fuente { margin-top: 14px !important; font-size: 13px; color: var(--neutral-gray); }

.gm-escenarios { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.gm-escenario-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.gm-escenario-cab strong { color: var(--secondary); }
.gm-escenario-cab span { font-weight: 800; color: var(--secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-barra { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--primary); }
.gm-barra-tu { background: var(--accent); }
.gm-barra-aseg { flex: 1; }
.gm-escenario-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 8px; font-size: 14px; color: var(--neutral-gray); }
.gm-escenario-pie strong { color: var(--neutral-dark); font-variant-numeric: tabular-nums; }
.gm-punto { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }
.gm-punto-tu { background: var(--accent); }
.gm-punto-aseg { background: var(--primary); }
.gm-escenario-nota { margin: 8px 0 0 !important; padding: 10px 12px; border-radius: 12px; background: #FFF1E9; font-size: 14px; }

.gm-hitos { list-style: none; margin: 0; padding: 0; }
.gm-hito { position: relative; display: grid; gap: 2px; margin-left: 6px; padding: 0 0 16px 22px; border-left: 2px solid #DDE5E0; }
.gm-hito:last-child { padding-bottom: 0; border-left-color: transparent; }
.gm-hito::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--primary);
}
.gm-hito-fecha { font-size: 13px; font-weight: 700; color: var(--primary); }
.gm-hito strong { color: var(--secondary); }
.gm-hito-items { font-size: 14px; color: var(--neutral-gray); }

.gm-ruta { background: #FFF1E9; border: 1.5px solid rgba(255, 107, 53, 0.35); box-shadow: none; }

.gm-duo-cards { display: grid; gap: 18px; }
.gm-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.gm-lista li { position: relative; padding-left: 28px; }
.gm-lista li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.gm-lista-si li::before { content: "✓"; color: var(--primary); }
.gm-lista-no li::before { content: "✕"; color: var(--neutral-gray); }

.gm-cierre { gap: 12px; }
.gm-calendario { display: block; width: 100%; height: 700px; border: 0; border-radius: 14px; background: var(--neutral-light); }
.gm-enlace { font-weight: 700; color: var(--secondary-light); }
.gm-legal { margin: 0; font-size: 12px; line-height: 1.5; color: var(--neutral-gray); text-align: center; }

.gm-filtro { display: grid; gap: 12px; }
.gm-filtro p { margin: 0; color: var(--neutral-gray); }

@media (min-width: 600px) {
  .gm-duo { grid-template-columns: 1fr 1fr; }
  .gm-persona { grid-template-columns: auto 1fr; align-items: center; }
  .gm-persona-nombre { grid-column: 1 / -1; }
  .gm-span-2 { grid-column: 1 / -1; }
  .gm-duo-cards { grid-template-columns: 1fr 1fr; }
  .gm-calendario { height: 760px; }
}