/* ==========================================================================
   Cotizador Portón — estilos
   Usa los tokens del tema si existen (var(--pc-red, …)); si el plugin se usa
   en otro tema, cae en los valores de marca por defecto.
   ========================================================================== */

.pc-cot{
  --_red:      var(--pc-red,#E4221D);
  --_red-dark: var(--pc-red-dark,#B81813);
  --_red-soft: var(--pc-red-soft,#FDECEB);
  --_black:    var(--pc-black,#0A0A0A);
  --_s500:     var(--pc-slate-500,#71717A);
  --_s700:     var(--pc-slate-700,#3F3F46);
  --_border:   var(--pc-border,#E4E4E7);
  --_alt:      var(--pc-bg-alt,#F5F6F7);
  --_wa:       var(--pc-whatsapp,#25D366);
  --_ok:       var(--pc-success,#15803D);
  --_radius:   var(--pc-radius,4px);
  --_display:  var(--pc-font-display,'Barlow Condensed',system-ui,sans-serif);
  --_body:     var(--pc-font-body,'Inter',system-ui,sans-serif);

  font-family:var(--_body);
  color:var(--_black);
}
.pc-cot *,.pc-cot *::before,.pc-cot *::after{box-sizing:border-box}

/* --------------------------------------------------------- Tarjeta */
.pc-cot__card{
  background:#fff;
  border:1px solid var(--_border);
  border-top:5px solid var(--_red);
  border-radius:8px;
  box-shadow:0 12px 40px rgba(10,10,10,.16);
  padding:32px 24px;
  position:relative;
  z-index:10;
}
@media(min-width:768px){.pc-cot__card{padding:48px}}

/* Interruptor "Montar sobre la sección siguiente" del widget.
   Solo en escritorio: en móvil la tarjeta va apilada, sin solapes. */
@media(min-width:1024px){
  .pc-cot-montado-yes{margin-bottom:-610px;position:relative;z-index:20}
}

/* --------------------------------------------------------- Encabezado */
.pc-cot__head{
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:flex-end;justify-content:space-between;margin-bottom:32px;
}
.pc-cot__eyebrow{
  font-family:var(--_display);font-weight:700;font-size:.875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--_red);margin:0 0 8px;
}
.pc-cot__title{
  font-family:var(--_display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.1;margin:0;
}
.pc-cot__sub{margin:8px 0 0;color:var(--_s700);max-width:58ch}

.pc-cot__steps{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pc-cot__chip{
  display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;
  color:var(--_s500);
}
.pc-cot__chip b{
  width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:var(--_border);color:var(--_s700);font-size:.8125rem;
}
.pc-cot__chip[data-state="active"]{color:var(--_black)}
.pc-cot__chip[data-state="active"] b{background:var(--_red);color:#fff}
.pc-cot__chip[data-state="done"] b{background:var(--_ok);color:#fff}

/* --------------------------------------------------------- Pasos */
.pc-cot__step{display:none}
.pc-cot__step[data-active="true"]{display:block}

/* ---- Ramas condicionales del paso 2 ----
   Solo se ve la del producto elegido. Las ocultas además se desactivan por JS
   para que no se validen ni viajen en el envío. */
.pc-cot__rama{display:none}
.pc-cot__rama[data-visible="true"]{display:block}
.pc-cot [data-cuando]{display:none}
.pc-cot [data-cuando][data-visible="true"]{display:block}

/* ---- Opciones cortas en fila (tipo de panel, mantenimiento) ---- */
.pc-cot__radios{display:flex;flex-wrap:wrap;gap:8px}
.pc-cot__radios label{position:relative;flex:1 1 120px;margin:0}
.pc-cot__radios input{position:absolute;opacity:0;width:1px;height:1px}
.pc-cot__radios span{
  display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 16px;text-align:center;
  border:1.5px solid var(--_border);border-radius:10px;
  cursor:pointer;font-weight:600;font-size:.875rem;
  transition:border-color .2s,background-color .2s;
}
.pc-cot__radios span:hover{border-color:var(--_s500)}
.pc-cot__radios input:checked + span{
  border-color:var(--_red);background:var(--_red-soft);
  box-shadow:0 0 0 1.5px var(--_red);
}
.pc-cot__radios input:focus-visible + span{outline:3px solid var(--_red);outline-offset:3px}

/* ---- Lista de opciones únicas (servicio técnico) ---- */
.pc-cot__checks{display:grid;gap:8px}
.pc-cot__checks label{position:relative;display:block;margin:0}
.pc-cot__checks input{position:absolute;opacity:0;width:1px;height:1px}
.pc-cot__checks span{
  display:flex;align-items:center;gap:12px;
  min-height:48px;padding:8px 16px;
  border:1.5px solid var(--_border);border-radius:10px;
  cursor:pointer;font-weight:600;font-size:.875rem;line-height:1.3;
  transition:border-color .2s,background-color .2s;
}
/* Círculo, no cuadrado: la forma le dice al usuario que solo puede elegir uno.
   El cuadrado con palomita significa "puedes marcar varios". */
.pc-cot__checks span::before{
  content:"";width:20px;height:20px;flex:none;border-radius:50%;
  border:1.5px solid var(--_border);background:transparent;
  background-position:center;background-repeat:no-repeat;background-size:20px;
  transition:background-color .18s,border-color .18s;
}
.pc-cot__checks span:hover{border-color:var(--_s500)}
.pc-cot__checks input:checked + span{border-color:var(--_red);background:var(--_red-soft)}
.pc-cot__checks input:checked + span::before{
  background-color:var(--_red);border-color:var(--_red);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23fff'/%3E%3C/svg%3E");
}
.pc-cot__checks input:focus-visible + span{outline:3px solid var(--_red);outline-offset:3px}

/* ---- Subir foto ---- */
.pc-cot__foto input[type="file"]{position:absolute;opacity:0;width:1px;height:1px}
.pc-cot__file{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:0 16px;
  border:1.5px dashed var(--_border);border-radius:10px;
  cursor:pointer;font-size:.875rem;font-weight:600;color:var(--_s700);
  transition:border-color .2s,background-color .2s,color .2s;
}
.pc-cot__file:hover{border-color:var(--_s500);background:var(--_alt)}
.pc-cot__file svg{width:20px;height:20px;flex:none;color:var(--_red)}
.pc-cot__file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-cot__foto[data-con-archivo="true"] .pc-cot__file{
  border-style:solid;border-color:var(--_red);background:var(--_red-soft);
}
.pc-cot__foto input[type="file"]:focus-visible + .pc-cot__file{
  outline:3px solid var(--_red);outline-offset:2px;
}

.pc-cot__fieldset{border:0;padding:0;margin:0 0 32px;min-width:0}
.pc-cot__fieldset legend{font-weight:600;margin-bottom:12px;padding:0}
.pc-cot__req{color:var(--_red)}

/* --------------------------------------------------------- Campos */
.pc-cot__grid{display:grid;gap:24px;margin-bottom:24px}
@media(min-width:768px){
  .pc-cot__grid--2{grid-template-columns:1fr 1fr}
  .pc-cot__grid--3{grid-template-columns:repeat(3,1fr)}
}
/* Grupo de campos con un título común (por ejemplo, las dos medidas) */
.pc-cot__group{border:0;padding:0;margin:0 0 24px;min-width:0}
.pc-cot__group legend{font-weight:600;font-size:.875rem;padding:0;margin-bottom:2px}
.pc-cot__group .pc-cot__hint{margin:0 0 12px}
.pc-cot__group .pc-cot__grid{margin-bottom:0}
.pc-cot--oscuro .pc-cot__group legend{color:#fff}

.pc-cot__field{min-width:0;margin-bottom:0}
.pc-cot__field > label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:8px}
.pc-cot__hint{font-size:.8125rem;color:var(--_s500);margin:6px 0 0}

.pc-cot__field input,
.pc-cot__field select,
.pc-cot__field textarea{
  width:100%;min-height:48px;padding:12px 16px;
  font-family:inherit;font-size:1rem;color:var(--_black);background:#fff;
  border:1.5px solid var(--_border);border-radius:var(--_radius);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.pc-cot__field textarea{min-height:110px;resize:vertical}
.pc-cot__field input:focus,
.pc-cot__field select:focus,
.pc-cot__field textarea:focus{
  outline:none;border-color:var(--_red);box-shadow:0 0 0 3px var(--_red-soft);
}

/* Errores: junto al campo, nunca solo arriba */
.pc-cot__error{
  display:none;align-items:center;gap:6px;
  color:var(--_red);font-size:.8125rem;font-weight:600;margin:6px 0 0;
}
.pc-cot__error svg{width:14px;height:14px;flex:none}
.pc-cot__field[data-invalid="true"] input,
.pc-cot__field[data-invalid="true"] select{border-color:var(--_red)}
.pc-cot__field[data-invalid="true"] .pc-cot__error,
.pc-cot__fieldset[data-invalid="true"] .pc-cot__error{display:flex}

/* --------------------------------------------------------- Opciones del paso 1 */
.pc-cot__choices{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.pc-cot__choices{grid-template-columns:repeat(3,1fr)}}

.pc-cot__choice{position:relative;display:block;margin:0}
.pc-cot__choice span{position:relative}
/* Palomita de confirmación en la esquina de la opción elegida */
.pc-cot__choice span::after{
  content:"";position:absolute;top:7px;right:7px;width:19px;height:19px;
  border-radius:50%;background:var(--_red);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
  opacity:0;transform:scale(.4);
  transition:opacity .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pc-cot__choice input:checked + span::after{opacity:1;transform:none}
.pc-cot__choice input{position:absolute;opacity:0;width:1px;height:1px}
.pc-cot__choice span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;min-height:112px;padding:16px 12px;
  border:1.5px solid var(--_border);border-radius:var(--_radius);
  cursor:pointer;font-weight:600;font-size:.9375rem;line-height:1.3;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.pc-cot__choice span svg{width:30px;height:30px;color:var(--_s500);transition:color .2s ease}
.pc-cot__choice span:hover{border-color:var(--_s500);transform:translateY(-2px)}
.pc-cot__choice input:checked + span{
  border-color:var(--_red);border-width:2px;background:var(--_red-soft);
}
.pc-cot__choice input:checked + span svg{color:var(--_red)}
.pc-cot__choice input:focus-visible + span{outline:3px solid var(--_red);outline-offset:2px}

/* --------------------------------------------------------- Resumen y notas */
.pc-cot__summary{
  background:var(--_alt);border-left:4px solid var(--_red);
  padding:16px;border-radius:var(--_radius);margin-bottom:24px;
}
.pc-cot__summary dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.pc-cot__summary dt{font-size:.875rem;color:var(--_s500)}
.pc-cot__summary dd{margin:0;font-weight:600;font-size:.9375rem}

.pc-cot__note{
  display:flex;gap:12px;align-items:flex-start;font-size:.875rem;color:var(--_s700);
  background:#fff;border:1px dashed var(--_border);padding:16px;
  border-radius:var(--_radius);margin:0 0 16px;
}
.pc-cot__note svg{width:20px;height:20px;color:var(--_red);flex:none;margin-top:2px}

.pc-cot__aviso{
  display:none;margin:0 0 16px;padding:12px 16px;border-radius:var(--_radius);
  background:var(--_red-soft);border-left:4px solid var(--_red);
  color:#7F1D1D;font-size:.9375rem;font-weight:500;
}
.pc-cot__aviso[data-visible="true"]{display:block}

/* --------------------------------------------------------- Acciones */
.pc-cot__actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;
  padding-top:24px;border-top:1px solid var(--_border);
}
.pc-cot__spacer{flex:1}

/* Botones propios por si el tema no los define */
.pc-cot .pc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;
  font-family:var(--_display);font-weight:700;font-size:1.0625rem;line-height:1;
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;
  border:2px solid transparent;border-radius:var(--pc-radius-pill,50px);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.pc-cot .pc-btn:hover{transform:translateY(-1px)}
.pc-cot .pc-btn--primary{background:var(--_red);color:#fff}
.pc-cot .pc-btn--primary:hover{background:var(--_red-dark);color:#fff}
.pc-cot .pc-btn--ghost{background:transparent;color:var(--_black);border-color:var(--_black)}
.pc-cot .pc-btn--ghost:hover{background:var(--_black);color:#fff}
.pc-cot .pc-btn--wa{background:var(--_wa);color:#062E17}
.pc-cot .pc-btn--wa:hover{background:#1FBA5A;color:#062E17}
.pc-cot .pc-btn--lg{min-height:56px;font-size:1.1875rem;padding:0 32px}
.pc-cot .pc-btn[disabled]{opacity:.6;cursor:progress;transform:none}
.pc-cot .pc-btn:focus-visible{outline:3px solid var(--_red);outline-offset:2px}

/* --------------------------------------------------------- Éxito */
.pc-cot__done{text-align:center;padding:48px 16px}
.pc-cot__done > svg{width:64px;height:64px;color:var(--_ok);margin:0 auto 16px;display:block}
.pc-cot__done h3{
  font-family:var(--_display);font-weight:800;text-transform:uppercase;
  font-size:1.75rem;margin:0 0 12px;
}
.pc-cot__done p{color:var(--_s700);max-width:48ch;margin:0 auto 24px}
.pc-cot__done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --------------------------------------------------------- Trampa antispam */
.pc-cot__hp{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ==========================================================================
   VARIANTE OSCURA — la que va montada en el hero (interruptor "Tema" del widget).
   Es la aprobada en el mockup: tarjeta azul-negra sobre la foto del slider.
   ========================================================================== */

.pc-cot--oscuro{--_ink:var(--pc-ink-2,#171717)}

.pc-cot--oscuro .pc-cot__card{
  background:var(--_ink);color:#fff;
  border:1px solid rgba(255,255,255,.10);border-top-width:1px;
  border-radius:var(--pc-radius-card,16px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:24px;
}
@media(min-width:768px){.pc-cot--oscuro .pc-cot__card{padding:32px}}

.pc-cot--oscuro .pc-cot__title{color:#fff}
.pc-cot--oscuro .pc-cot__sub{color:var(--pc-on-dark,#ABABAB)}

.pc-cot--oscuro .pc-cot__steps{
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);
}
.pc-cot--oscuro .pc-cot__chip{color:#8A8A8A}
.pc-cot--oscuro .pc-cot__chip b{background:rgba(255,255,255,.10);color:#D2D2D2}
.pc-cot--oscuro .pc-cot__chip[data-state="active"]{color:#fff}
.pc-cot--oscuro .pc-cot__chip[data-state="done"]{color:#D2D2D2}

.pc-cot--oscuro .pc-cot__fieldset legend,
.pc-cot--oscuro .pc-cot__group legend,
.pc-cot--oscuro .pc-cot__field > label{color:#fff}
.pc-cot--oscuro .pc-cot__hint{color:#909090}

/* Variantes oscuras de los componentes del paso 2 */
.pc-cot--oscuro .pc-cot__radios span,
.pc-cot--oscuro .pc-cot__checks span{
  border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#EAEAEA;
}
.pc-cot--oscuro .pc-cot__radios span:hover,
.pc-cot--oscuro .pc-cot__checks span:hover{border-color:rgba(255,255,255,.42)}
.pc-cot--oscuro .pc-cot__radios input:checked + span{
  border-color:var(--_red);background:rgba(228,34,29,.30);color:#fff;
}
.pc-cot--oscuro .pc-cot__checks input:checked + span{
  border-color:var(--_red);background:rgba(228,34,29,.22);color:#fff;
}
.pc-cot--oscuro .pc-cot__checks span::before{border-color:rgba(255,255,255,.35)}
.pc-cot--oscuro .pc-cot__radios input:focus-visible + span,
.pc-cot--oscuro .pc-cot__checks input:focus-visible + span{outline-color:#fff}

.pc-cot--oscuro .pc-cot__file{
  border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#C9C9C9;
}
.pc-cot--oscuro .pc-cot__file:hover{
  border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);color:#fff;
}
.pc-cot--oscuro .pc-cot__foto[data-con-archivo="true"] .pc-cot__file{
  border-color:var(--_red);background:rgba(228,34,29,.14);color:#fff;
}

.pc-cot--oscuro .pc-cot__field input,
.pc-cot--oscuro .pc-cot__field select,
.pc-cot--oscuro .pc-cot__field textarea{
  color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
}
.pc-cot--oscuro .pc-cot__field input::placeholder,
.pc-cot--oscuro .pc-cot__field textarea::placeholder{color:#909090}
/* Los desplegables deben verse distintos de un campo de texto: fondo algo más
   claro, flecha con contraste y cursor de mano. Si parecen campos de escribir,
   la gente no los toca. */
.pc-cot--oscuro .pc-cot__field select{
  appearance:none;cursor:pointer;
  background-color:rgba(255,255,255,.10);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EAEAEA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:20px;padding-right:46px;
}
/* La lista que se despliega la pinta el sistema operativo, en blanco en
   Windows, y las opciones heredaban el texto blanco del select: se veía vacía
   hasta pasar el mouse. Se le da fondo oscuro propio y se avisa al navegador
   de que el control es oscuro (barra de desplazamiento incluida). */
.pc-cot--oscuro .pc-cot__field select{color-scheme:dark}
.pc-cot--oscuro .pc-cot__field select option,
.pc-cot--oscuro .pc-cot__field select optgroup{
  background-color:var(--_ink,#171717);color:#fff;
}
.pc-cot--oscuro .pc-cot__field select:hover{
  border-color:rgba(255,255,255,.34);background-color:rgba(255,255,255,.14);
}
.pc-cot--oscuro .pc-cot__field input:focus,
.pc-cot--oscuro .pc-cot__field select:focus,
.pc-cot--oscuro .pc-cot__field textarea:focus{
  border-color:var(--_red);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(228,34,29,.28);
}
/* Rojo puro sobre fondo oscuro no llega a 4.5:1 en texto pequeño: aclaramos. */
.pc-cot--oscuro .pc-cot__error{color:#FF8A84}

.pc-cot--oscuro .pc-cot__choices{grid-template-columns:repeat(2,1fr);gap:8px}
.pc-cot--oscuro .pc-cot__choice span{
  min-height:98px;padding:16px 8px;gap:8px;font-size:.8125rem;color:#EAEAEA;
  border:1.5px solid rgba(255,255,255,.16);border-radius:10px;
  background:rgba(255,255,255,.05);
}
.pc-cot--oscuro .pc-cot__choice span svg{width:26px;height:26px;color:#BBBBBB}
.pc-cot--oscuro .pc-cot__choice span:hover{
  border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.09);
}
/* Estado elegido: se nota de un vistazo. El borde extra va con box-shadow y no
   con border-width, para que la tarjeta no cambie de tamaño al marcarla. */
.pc-cot--oscuro .pc-cot__choice input:checked + span{
  border-color:var(--_red);border-width:1.5px;
  box-shadow:0 0 0 1.5px var(--_red),0 6px 18px rgba(228,34,29,.28);
  background:rgba(228,34,29,.30);color:#fff;
}
.pc-cot--oscuro .pc-cot__choice input:checked + span svg{color:#fff}
.pc-cot--oscuro .pc-cot__choice input:focus-visible + span{
  outline:3px solid #fff;outline-offset:3px;
}

.pc-cot--oscuro .pc-cot__actions{border-top-color:rgba(255,255,255,.10)}
.pc-cot--oscuro .pc-cot__actions .pc-btn{flex:1 1 auto}
.pc-cot--oscuro .pc-btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.pc-cot--oscuro .pc-btn--ghost:hover{background:#fff;color:var(--pc-ink,#0F0F0F);border-color:#fff}

.pc-cot--oscuro .pc-cot__summary{
  background:rgba(255,255,255,.05);border-left:3px solid var(--_red);border-radius:8px;
}
.pc-cot--oscuro .pc-cot__summary dt{color:#909090}
.pc-cot--oscuro .pc-cot__summary dd{color:#fff}

.pc-cot--oscuro .pc-cot__note{
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.16);
  color:var(--pc-on-dark,#ABABAB);border-radius:10px;
}
.pc-cot--oscuro .pc-cot__aviso{
  background:rgba(228,34,29,.16);border-left:4px solid var(--_red);color:#FFC9C6;
}
.pc-cot--oscuro .pc-cot__done h3{color:#fff}
.pc-cot--oscuro .pc-cot__done p{color:var(--pc-on-dark,#ABABAB)}
.pc-cot--oscuro .pc-cot__done > svg{color:#4ADE80}

/* --------------------------------------------------------- Movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .pc-cot *,.pc-cot *::before,.pc-cot *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
  }
}