/* ==========================================================================
   Cotizador — 4 pantallas con resumen siempre visible
   ========================================================================== */

.cot-body{ background:#FAF6F0; }

.nav--solido{ background:rgba(255,255,255,.94); }

.cot{ padding:calc(var(--nav-h) + 54px) 0 80px; }

.cot__cab{ text-align:center; margin-bottom:38px; }
.cot__titulo{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.1rem, 3.6vw, 3rem); line-height:1.1;
  color:var(--tinta-60); margin-bottom:10px;
}
.cot__titulo strong{ font-weight:700; color:var(--azul-900); }
.cot__bajada{ color:var(--tinta-70); margin-bottom:30px; }

/* ---- Progreso ---- */
.pasos{
  list-style:none; margin:0 auto 14px; padding:0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px;
  max-width:720px;
}
.paso{
  display:flex; align-items:center; gap:9px;
  font-size:.88rem; font-weight:500; color:var(--tinta-45);
  transition:color .25s ease;
}
.paso span{
  width:26px; height:26px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:#E8DCCB; color:var(--tinta-45);
  font-size:.8rem; font-weight:700;
  transition:background .25s ease, color .25s ease;
}
.paso.is-activa{ color:var(--azul-900); font-weight:600; }
.paso.is-activa span{ background:var(--azul); color:#fff; }
.paso.is-lista span{ background:var(--celeste); color:var(--azul-900); }

.barra{ max-width:720px; margin-inline:auto; height:4px; border-radius:4px; background:#E8DCCB; overflow:hidden; }
.barra i{ display:block; height:100%; width:25%; border-radius:4px; background:linear-gradient(90deg,var(--naranja),var(--celeste)); transition:width .4s cubic-bezier(.2,.8,.3,1); }

/* ---- Rejilla principal ---- */
.cot__grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start; }

.cot__form{ background:var(--papel); border-radius:var(--r-xl); padding:34px; box-shadow:var(--sombra); }

.pantalla{ display:none; }
.pantalla.is-activa{ display:block; animation:entraPantalla .4s ease; }
@keyframes entraPantalla{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.ph{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.15;
  color:var(--tinta-60); margin-bottom:6px;
}
.ph strong{ font-weight:700; color:var(--azul-900); }
.pd{ color:var(--tinta-70); font-size:.98rem; margin-bottom:26px; }

.sub{
  font-family:var(--display); font-weight:500; font-size:1.2rem;
  color:var(--tinta-60); margin:30px 0 14px;
}
.sub strong{ font-weight:700; color:var(--azul-900); }
.sub em{ font-style:normal; font-size:.78rem; font-weight:500; color:var(--tinta-45); margin-left:8px; }

.revela{ animation:entraPantalla .4s ease; }

/* ---- Opciones ---- */
.opciones{ display:grid; gap:12px; }
.opciones--2{ grid-template-columns:repeat(2,1fr); }
.opciones--3{ grid-template-columns:repeat(3,1fr); }
.opciones--4{ grid-template-columns:repeat(4,1fr); }

.op{
  position:relative; text-align:left;
  display:flex; flex-direction:column; gap:4px;
  padding:18px 16px;
  background:var(--papel); color:inherit;
  border:1px solid var(--linea); border-radius:var(--r);
  cursor:pointer; font-family:var(--texto);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.op:hover{ border-color:var(--azul-claro); transform:translateY(-2px); }
.op .ico{ width:24px; height:24px; color:var(--azul); margin-bottom:8px; }
.op strong{ font-size:.98rem; font-weight:600; color:var(--azul-900); }
.op span{ font-size:.85rem; color:var(--tinta-45); line-height:1.35; }
.op.is-elegida{ border-color:var(--azul); background:#F3F7FF; }
.op.is-elegida::after{
  content:''; position:absolute; top:12px; right:12px;
  width:18px; height:18px; border-radius:50%;
  background:var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.opciones--chicas .op{ padding:14px 16px; }
.opciones--chicas .op strong{ font-size:1.02rem; }

/* ==========================================================================
   Lo pedido: lista 1..N de profesional + prestación
   El profesional funciona como pestaña (abre sus prestaciones) y cada
   prestación suma o resta de esta lista, sin salir del apartado.
   ========================================================================== */

/* El profesional abierto se distingue del que ya tiene algo pedido: uno es
   "estoy mirando esto", el otro es "esto ya está en la lista". */
.op.is-abierta{ border-color:var(--azul); background:#F3F7FF; }
.op.tiene strong{ color:var(--azul); }
.op.tiene span{ color:var(--azul); font-weight:600; }
.op.tiene::after{
  content:''; position:absolute; top:12px; right:12px;
  width:9px; height:9px; border-radius:50%; background:var(--naranja);
}

.pedido{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pedido__item{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px 12px 16px;
  background:#F3F7FF; border:1px solid #D8E4FA; border-radius:var(--r);
}
.pedido__txt{ display:grid; gap:1px; min-width:0; flex:1; }
.pedido__txt b{
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--azul);
}
.pedido__txt i{ font-style:normal; font-size:.95rem; color:var(--azul-900); }
.pedido__quitar{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid #D8E4FA; background:#fff; color:var(--tinta-45);
  font-size:1.2rem; line-height:1; cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.pedido__quitar:hover{ color:#C0392B; border-color:#E8C4BE; background:#FDF4F2; }

@media (max-width:680px){
  .pedido__item{ padding:11px 10px 11px 14px; }
  .pedido__txt i{ font-size:.9rem; }
}

/* ---- Formularios ---- */
.cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.caja{
  border:1px solid var(--linea); border-radius:var(--r);
  padding:20px; margin:0 0 16px; display:grid; gap:12px;
}
.caja legend{
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#C96A22; padding:0 8px;
}
.dosc{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.campo{ display:grid; gap:7px; }
.etq, .caja label, .cot__form label{
  font-size:.85rem; font-weight:600; color:var(--tinta-70);
}
.caja label{ display:grid; gap:7px; }
.caja label em, .cot__form label em{ font-style:normal; font-weight:400; color:var(--tinta-45); }

.cot__form input, .cot__form select, .cot__form textarea{
  font-family:var(--texto); font-size:1rem; font-weight:400; color:var(--tinta);
  padding:11px 14px; border:1px solid var(--linea); border-radius:10px;
  background:var(--papel); width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cot__form input:focus, .cot__form select:focus, .cot__form textarea:focus{
  outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(104,152,255,.13);
}
.cot__form input:disabled, .cot__form select:disabled{ background:var(--papel-2); color:var(--tinta-45); }
.cot__form textarea{ resize:vertical; }

.err{ font-size:.8rem; color:#C0392B; font-weight:500; }
.nota{ font-size:.86rem; color:var(--tinta-45); }
.nota--final{ text-align:center; margin-top:24px; }

/* ---- Avisos ---- */
.aviso{
  display:flex; align-items:center; gap:9px;
  font-size:.88rem; font-weight:500;
  padding:11px 14px; border-radius:var(--r-sm);
  background:#EBF2FF; color:var(--azul-700);
}
.aviso .ico{ width:17px; height:17px; flex:none; }
.aviso--ok{ background:#E6F7F8; color:#15707A; }
.aviso--mal{ background:#FDECEA; color:#C0392B; }
.aviso--info{ background:#FFF1E4; color:#A9561B; }

.codigo{ display:flex; gap:10px; }
.codigo input{ flex:1; }

/* ---- Pie de formulario ---- */
.cot__pie{
  display:flex; justify-content:flex-end; gap:12px;
  margin-top:28px; padding-top:22px; border-top:1px solid var(--linea);
}
.cot__pie .btn--clear{ margin-right:auto; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---- Resumen ---- */
.resumen{
  position:sticky; top:calc(var(--nav-h) + 28px);
  background:var(--azul-900); color:rgba(255,255,255,.72);
  border-radius:var(--r-xl); padding:26px 24px;
}
.resumen h2{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  color:#fff; margin-bottom:18px;
}
.resumen dl{ margin:0; display:grid; gap:14px; }
.resumen dl > div{ display:grid; gap:2px; }
.resumen dt{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--celeste); }
.resumen dd{ margin:0; font-size:.95rem; color:#fff; }
.resumen .vacio dd{ color:rgba(255,255,255,.6); font-size:.9rem; line-height:1.5; }

.resumen__total{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); display:grid; gap:9px; }
.fila{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; }
.fila b{ color:#fff; font-weight:600; }
.fila--desc b{ color:var(--celeste); }
.fila--total{ margin-top:6px; padding-top:12px; border-top:1px solid rgba(255,255,255,.16); font-size:1rem; }
.fila--total b{ font-family:var(--display); font-size:1.4rem; font-weight:700; color:var(--naranja); }
.resumen__nota{ font-size:.78rem; color:rgba(255,255,255,.5); margin-top:10px; line-height:1.5; }

/* ---- Pie de página ---- */
.cot__foot{ background:var(--azul-900); color:rgba(255,255,255,.6); padding:26px 0; text-align:center; font-size:.92rem; }
.cot__foot a{ color:var(--celeste); text-decoration:none; font-weight:600; }
.cot__foot a:hover{ text-decoration:underline; }

/* ---- Responsive ---- */
@media (max-width:1040px){
  .cot__grid{ grid-template-columns:1fr; }
  /* En vertical el formulario va primero: el resumen arriba empujaba todo
     y la persona abría la página sin ver qué tenía que hacer. */
  .resumen{ position:static; order:1; }
  .opciones--4{ grid-template-columns:repeat(2,1fr); }
  .cols{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .cot{ padding:calc(var(--nav-h) + 34px) 0 54px; }
  .cot__form{ padding:22px 18px; border-radius:var(--r-lg); }
  .opciones--2, .opciones--3, .opciones--4{ grid-template-columns:1fr; }
  .dosc{ grid-template-columns:1fr; }
  .pasos{ gap:8px 14px; }
  .paso{ font-size:.78rem; }
  .cot__pie{ flex-wrap:wrap; }
  .cot__pie .btn{ flex:1 1 100%; }
  .cot__pie .btn--clear{ margin-right:0; order:2; }
  .codigo{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  .pantalla.is-activa, .revela{ animation:none; }
}

/* ---- Botón de GPS ---- */
.conGps{ display:flex; gap:8px; }
.conGps input{ flex:1; }
.gps{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:0 13px; border-radius:10px;
  background:transparent; color:var(--azul);
  border:1px solid var(--linea); cursor:pointer;
  font-family:var(--texto); font-size:.82rem; font-weight:600;
  transition:background .2s ease, border-color .2s ease;
}
.gps:hover{ background:#F3F7FF; border-color:var(--azul-claro); }
.gps .ico{ width:15px; height:15px; }
@media (max-width:680px){ .conGps{ flex-direction:column; } .gps{ padding:12px 15px; justify-content:center; } }

/* ---- Señalar lo que falta ----
   Naranjo quemado de marca: llama la atención sin el tono de alarma del rojo. */
.falta input, .falta select, .falta textarea,
input.falta, select.falta, textarea.falta{
  border-color:#C96A22;
  background:#FFF9F4;
  box-shadow:0 0 0 3px rgba(255,145,73,.14);
}
.falta > .etq, .falta.etq{ color:#C96A22; }

.opciones.falta{
  border-radius:var(--r);
  outline:2px solid #C96A22;
  outline-offset:6px;
}

.faltan{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:18px; padding:13px 16px; border-radius:var(--r-sm);
  background:#FFF1E4; color:#A9561B;
  font-size:.9rem; font-weight:500;
  animation:entraPantalla .3s ease;
}
.faltan .ico{ width:18px; height:18px; flex:none; margin-top:1px; color:#C96A22; }
.faltan b{ font-weight:700; }

@media (max-width:680px){
  /* 2 y 2 en vez de 3 arriba y 1 suelto abajo. */
  .pasos{ display:grid; grid-template-columns:1fr 1fr; gap:10px 8px; max-width:330px; }
  .paso{ font-size:.78rem; gap:7px; }
  .paso span{ width:22px; height:22px; font-size:.72rem; }
  .cot__cab{ margin-bottom:26px; }
}

/* ---- Aviso de sesión retomada ---- */
.retomado{
  width:min(100% - 40px, var(--wrap)); margin:0 auto 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 18px; border-radius:var(--r-sm);
  background:#E6F7F8; color:#15707A;
  font-size:.9rem; font-weight:500;
}
.retomado__nuevo{
  flex:none; padding:8px 16px; border-radius:999px;
  background:transparent; color:#15707A;
  border:1px solid rgba(21,112,122,.35); cursor:pointer;
  font-family:var(--texto); font-size:.84rem; font-weight:600;
  transition:background .2s ease;
}
.retomado__nuevo:hover{ background:rgba(21,112,122,.1); }
@media (max-width:680px){ .retomado{ justify-content:center; text-align:center; } }

/* ==========================================================================
   Resumen como panel asomado (solo en pantalla angosta)
   Queda una franja azul visible al pie: se toca o se desliza hacia arriba y
   muestra en vivo todo lo que la persona lleva elegido.
   ========================================================================== */
.resumen__tirador{ display:none; }

@media (max-width:1040px){
  .resumen{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:90;
    order:0; margin:0;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:0 20px env(safe-area-inset-bottom);
    max-height:78svh; max-height:78vh;
    display:flex; flex-direction:column;
    box-shadow:0 -10px 40px rgba(10,26,58,.26);
    transition:transform .34s cubic-bezier(.2,.8,.3,1);
    transform:translateY(calc(100% - var(--asomo)));
    --asomo:64px;
  }
  .resumen.is-abierto{ transform:translateY(0); }

  .resumen__tirador{
    display:flex; align-items:center; gap:12px;
    width:100%; height:var(--asomo); flex:none;
    padding:0; border:0; background:transparent; cursor:pointer;
    font-family:var(--texto); color:#fff; text-align:left;
    touch-action:none;
  }
  .resumen__asa{
    position:absolute; top:9px; left:50%; transform:translateX(-50%);
    width:40px; height:4px; border-radius:4px; background:rgba(255,255,255,.3);
  }
  .resumen__rotulo{ font-weight:600; font-size:.95rem; margin-top:8px; }
  .resumen__monto{
    margin-left:auto; margin-top:8px;
    font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--naranja);
  }
  .resumen__cuerpo{
    overflow-y:auto; padding-bottom:24px;
    -webkit-overflow-scrolling:touch;
  }
  .resumen__cuerpo h2{ display:none; }

  /* El formulario deja sitio para la franja asomada. */
  .cot{ padding-bottom:96px; }
  .cot__foot{ padding-bottom:92px; }
}

@media (prefers-reduced-motion:reduce){
  .resumen{ transition:none; }
}

/* ---- Orden médica ----
   El input de archivo queda invisible encima de toda la caja: se puede
   tocar en cualquier parte, y el foco se ve en el borde. */
.cot__form .adjunto{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:16px; border:1.5px dashed #C9D6EE; border-radius:var(--r);
  background:#F7FAFF; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cot__form .adjunto:hover{ border-color:var(--azul-claro); background:#F3F7FF; }
.cot__form .adjunto:focus-within{ border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(104,152,255,.16); }
.cot__form .adjunto input{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; opacity:0; cursor:pointer;
}
.adjunto__ico{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:grid; place-items:center; background:#EBF2FF; color:var(--azul);
}
.adjunto__ico .ico{ width:20px; height:20px; }
.adjunto__txt{ display:grid; gap:2px; min-width:0; flex:1; }
.adjunto__txt strong{
  font-size:.95rem; font-weight:600; color:var(--azul-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.adjunto__txt small{ font-size:.82rem; font-weight:400; color:var(--tinta-45); }
.adjunto__accion{
  flex:none; padding:8px 14px; border-radius:999px;
  font-size:.84rem; font-weight:600; color:var(--azul);
  background:#fff; border:1px solid #D8E4FA;
}
.cot__form .adjunto.tiene{ border-style:solid; border-color:#BDE9EC; background:#F2FBFB; }
.adjunto.tiene .adjunto__ico{ background:#E6F7F8; color:#15707A; }
.cot__form .adjunto.falta{ border-color:#C96A22; background:#FFF9F4; box-shadow:0 0 0 3px rgba(255,145,73,.14); }
.aviso--adjuntar{ margin-top:16px; align-items:flex-start; }
@media (max-width:680px){
  .cot__form .adjunto{ flex-wrap:wrap; }
  .adjunto__accion{ width:100%; text-align:center; }
}

/* ---- Horario mixto ----
   Al elegir "Mixto" aparece un campo para escribir el horario exacto. */
.campoMixto{ display:grid; gap:7px; margin-top:14px; font-size:.85rem; font-weight:600; color:var(--tinta-70); }

/* Texto "opcional" dentro de un título de caja. */
.caja legend em{ font-style:normal; font-weight:500; letter-spacing:0; text-transform:none; color:var(--tinta-45); }

/* ---- Paso 3: tu cotización ----
   Resumen de la solicitud y, abajo, el valor estimado en grande. */
.resumenCot{ margin:10px 0 14px; }
.resumenCot > div{
  display:flex; justify-content:space-between; gap:14px;
  padding:8px 0; border-bottom:1px solid var(--linea); font-size:.93rem;
}
.resumenCot dt{ flex:none; color:var(--tinta-60); font-weight:500; }
.resumenCot dd{ margin:0; min-width:0; text-align:right; font-weight:600; color:var(--tinta); overflow-wrap:anywhere; }
.precioLinea{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:6px; }
.precioLinea > span{ font-weight:600; color:var(--tinta-70); }
.precioGrande{ font-family:var(--display); font-size:2.2rem; font-weight:700; line-height:1.1; color:var(--azul-900); }

/* ---- Listo ----
   Confirmación al enviar: reemplaza al formulario. */
.listo{ text-align:center; padding:12px 0 6px; }
.listo__ico{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center;
  background:#E6F7F8; color:#15707A;
}
.listo__ico .ico{ width:30px; height:30px; }
.listo .pd{ max-width:48ch; margin-inline:auto; }
.listo__acciones{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:8px; }
#errorEnvio a{ color:inherit; font-weight:600; }

@media (max-width:680px){
  .resumenCot > div{ flex-direction:column; gap:2px; }
  .resumenCot dd{ text-align:left; }
  .precioGrande{ font-size:1.9rem; }
  .listo__acciones .btn{ flex:1 1 100%; }
}

/* ---- Consentimiento ----
   Casilla obligatoria del paso 4, antes de enviar datos de salud. */
.cot__form .consentimiento{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:8px; padding:16px; border:1px solid var(--linea); border-radius:var(--r);
  background:var(--papel-2); cursor:pointer;
  font-size:.9rem; font-weight:500; line-height:1.5; color:var(--tinta-70);
}
.cot__form .consentimiento input{
  flex:none; width:20px; height:20px; margin:2px 0 0; padding:0;
  accent-color:var(--azul); cursor:pointer;
}
.cot__form .consentimiento a{ color:var(--azul); font-weight:600; }
.cot__form .consentimiento.falta{ border-color:#C96A22; background:#FFF9F4; box-shadow:0 0 0 3px rgba(255,145,73,.14); }
.cot__legal{ margin-top:8px; font-size:.82rem; }
.cot__legal a{ color:rgba(255,255,255,.7); font-weight:500; }