/* ==========================================================================
   cotizador.css — Cotizador Wooden Panel
   ==========================================================================
   TODO lo visual pasa por tokens. Para adaptarlo a la marca no se toca nada
   más abajo del bloque :root — se sobreescriben las variables desde el tema.

   Los tokens intentan tomar primero los presets de WordPress (theme.json) y
   caen a un valor neutro si no existen. La tipografía hereda del tema por
   defecto, así que no hay que declarar nada para que tome la fuente del sitio.

   Para fijar la marca, en el CSS del tema:

       .wpc {
         --wpc-tinta:  #1B1B1B;   /* color principal, botones, contornos  */
         --wpc-papel:  #F4F1EC;   /* fondo del cotizador                  */
         --wpc-acento: #8A5A32;   /* CTA y elementos destacados           */
         --wpc-corte:  #A6402F;   /* marca de corte en el plano           */
         --wpc-radio:  4px;       /* 0 = esquinas vivas                   */
       }

   Los colores del PLANO se leen desde estas mismas variables en tiempo de
   ejecución (ver leerPaleta() en cotizador.js), así que el dibujo sigue a la
   marca sin editar el JavaScript.
   ========================================================================== */

.wpc {
  /* ---- Tipografía: hereda del tema ---- */
  --wpc-font: inherit;
  --wpc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wpc-size-base: 15px;

  /* ---- Color ---- */
  --wpc-tinta:      var(--wp--preset--color--contrast, #171B1A);
  --wpc-papel:      var(--wp--preset--color--base, #E9EAE6);
  --wpc-papel-2:    #DFE1DC;
  --wpc-acento:     var(--wpc-tinta);
  --wpc-acento-txt: var(--wpc-papel);
  --wpc-suave:      #6C7570;
  --wpc-borde:      #C6CBC4;
  --wpc-corte:      #A6402F;
  --wpc-ok:         #3E6B57;

  /* ---- Color del plano ---- */
  --wpc-plano-fieltro: #D8D3C9;
  --wpc-plano-liston:  #F7F5F1;
  --wpc-plano-junta:   #8E958F;
  --wpc-plano-hueco:   #DFE1DC;
  --wpc-plano-linea:   #A9B0AA;

  /* ---- Forma ---- */
  --wpc-radio: 0px;
  --wpc-ancho-cajon: 480px;
  --wpc-z: 99000;
}

/* ========================================================================== */
.wpc, .wpc *, .wpc *::before, .wpc *::after { box-sizing: border-box; }

/* ---------- Botón disparador ---------- */
.wpc-abrir {
  font-family: var(--wpc-font); font-size: var(--wpc-size-base); font-weight: 500;
  background: var(--wpc-acento); color: var(--wpc-acento-txt);
  border: 0; border-radius: var(--wpc-radio);
  padding: 14px 30px; cursor: pointer; transition: opacity .15s ease;
}
.wpc-abrir:hover { opacity: .86; }

/* ---------- Cajón ---------- */
.wpc-velo {
  position: fixed; inset: 0; background: rgba(23,27,26,.45);
  z-index: var(--wpc-z); opacity: 0; transition: opacity .22s ease;
}
.wpc-velo[hidden] { display: none; }
.wpc-velo.wpc-visible { opacity: 1; }

.wpc {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(var(--wpc-ancho-cajon), 100vw);
  z-index: calc(var(--wpc-z) + 1);
  background: var(--wpc-papel); color: var(--wpc-tinta);
  font-family: var(--wpc-font); font-size: var(--wpc-size-base);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(23,27,26,.16);
}
.wpc[hidden] { display: none; }
.wpc.wpc-visible { transform: translateX(0); }

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

/* ---------- Cabecera ---------- */
.wpc-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--wpc-borde);
}
.wpc-head-txt { flex: 1 1 auto; min-width: 0; }
/* Cambio de modo (esquema ⇄ rápido), arriba a la derecha */
.wpc-modo {
  display: block; width: 100%; margin: 0 0 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  padding: 12px 14px; background: transparent; color: var(--wpc-tinta);
  border: 1px solid var(--wpc-tinta); border-radius: 0; transition: background .15s, color .15s;
}
.wpc-modo:hover { background: var(--wpc-tinta); color: #FFF; }
.wpc-grid--rapido { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpc-grid--datos { margin-top: 18px; } /* aire entre la línea de los pasos y Nombre/Apellido */
.wpc-nubes-bloque { margin-top: 16px; }
.wpc-nubes-bloque > .wpc-campo-titulo { display: flex; align-items: center; gap: 6px; }
.wpc-grupo { margin-top: 8px; }
/* Resumen del panel en el paso de datos: imagen y botón al ancho de la columna */
.wpc-sel--resumen .wpc-prev { max-width: none; width: 100%; }
.wpc-sel-cambiar { margin: 10px 0 0; width: 100%; }
/* Adjuntos */
.wpc-adj-btn { margin: 0; text-align: left; }
.wpc-adj-btn .wpc-u { font-weight: 400; }
.wpc-adj-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.wpc-adj-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #FFF; border: 1px solid var(--wpc-borde); border-radius: var(--wpc-radio); font-size: 13px; }
.wpc-adj-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-paso {
  font-family: var(--wpc-font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wpc-suave); margin: 0 0 3px;
}
.wpc-titulo { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 600; }
.wpc-cerrar {
  flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--wpc-borde);
  background: transparent; color: var(--wpc-tinta); cursor: pointer;
  border-radius: var(--wpc-radio); font-size: 17px; line-height: 1;
}
.wpc-cerrar:hover { background: var(--wpc-papel-2); }

/* ---------- Total fijo ---------- */
.wpc-total {
  background: var(--wpc-tinta); color: var(--wpc-papel);
  padding: 16px 20px; flex: 0 0 auto;
}
.wpc-total-eyebrow {
  margin: 0; font-family: var(--wpc-font-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; opacity: .62;
}
.wpc-total-cifra {
  margin: 2px 0 4px; font-family: var(--wpc-font-mono);
  font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; font-weight: 600;
}
.wpc-total-cifra span { font-size: .44em; font-weight: 400; opacity: .78; }
.wpc-total-sub { margin: 0; font-size: 13px; opacity: .8; }
/* Aviso de volumen + WhatsApp dentro del total */
.wpc-total-extra:empty { display: none; }
.wpc-total-aviso { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12.5px; line-height: 1.45; opacity: .92; }
.wpc-total-aviso--tope { color: #FFD9CF; }
.wpc-total-wa {
  display: inline-block; margin-top: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--wpc-papel); border: 1px solid rgba(255,255,255,.55); border-radius: 0; transition: background .15s;
}
.wpc-total-wa:hover { background: rgba(255,255,255,.12); }

/* ---------- Cuerpo ---------- */
.wpc-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 26px; }

/* ---------- Muro ---------- */
.wpc-muro {
  border: 1px solid var(--wpc-borde); background: #FFF;
  border-radius: var(--wpc-radio); margin-bottom: 12px;
}
.wpc-muro-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 14px; background: transparent; border: 0;
  font-family: var(--wpc-font); font-size: 14.5px; color: var(--wpc-tinta);
  cursor: pointer; text-align: left;
}
.wpc-muro-head::before {
  content: "▸"; font-size: 11px; color: var(--wpc-suave); transition: transform .18s ease;
}
.wpc-muro[open] .wpc-muro-head::before { transform: rotate(90deg); }
.wpc-muro-nombre { flex: 1 1 auto; font-weight: 500; min-width: 0; }
.wpc-muro-med { font-family: var(--wpc-font-mono); font-size: 12px; color: var(--wpc-suave); }
.wpc-muro-cant {
  font-family: var(--wpc-font-mono); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.wpc-muro-body { padding: 0 14px 16px; border-top: 1px solid var(--wpc-borde); }
.wpc-muro[open] .wpc-muro-body { padding-top: 14px; }

.wpc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.wpc-grid--full > * { grid-column: 1 / -1; }
.wpc-campo label {
  display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 5px;
}
.wpc-u { font-weight: 400; font-size: 11px; color: var(--wpc-suave); font-family: var(--wpc-font-mono); }

.wpc input[type="text"], .wpc input[type="number"], .wpc input[type="email"],
.wpc input[type="tel"], .wpc select, .wpc textarea {
  width: 100%; font-family: var(--wpc-font-mono); font-size: 16px;
  color: var(--wpc-tinta); background: #FFF;
  border: 1px solid var(--wpc-borde); border-radius: var(--wpc-radio);
  padding: 10px 11px; line-height: 1.2; appearance: none; -webkit-appearance: none;
}
.wpc select, .wpc textarea, .wpc input[type="text"], .wpc input[type="email"] {
  font-family: var(--wpc-font); font-size: 14.5px;
}
.wpc select {
  background-image: linear-gradient(45deg, transparent 50%, var(--wpc-suave) 50%),
                    linear-gradient(135deg, var(--wpc-suave) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
.wpc :is(input, select, textarea, button, summary):focus-visible {
  outline: 2px solid var(--wpc-tinta); outline-offset: 2px;
}
.wpc textarea { min-height: 84px; resize: vertical; }

.wpc-check {
  display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer;
  padding: 11px 12px; border: 1px solid var(--wpc-borde);
  border-radius: var(--wpc-radio); background: #FFF; font-weight: 500;
}
.wpc-check input { width: 16px; height: 16px; accent-color: var(--wpc-tinta); flex: 0 0 auto; }

.wpc-sub {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px;
  margin-top: 10px; padding: 12px; background: var(--wpc-papel);
  border: 1px solid var(--wpc-borde); border-radius: var(--wpc-radio);
}
.wpc-sub > .wpc-campo--full { grid-column: 1 / -1; }
.wpc-gp-checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
@media (max-width: 480px) { .wpc-gp-checks { grid-template-columns: 1fr; } }

/* ---------- Avanzado ---------- */
.wpc-avz > summary .wpc-u { font-weight: 400; font-size: 12.5px; }
.wpc-avz > summary { flex-wrap: wrap; row-gap: 2px; }
.wpc-avz-extras { color: var(--wpc-tinta); font-weight: 500; }

/* Refuerzo: el display:grid de .wpc-grid le ganaba a la regla del navegador que
   oculta el contenido de un <details> cerrado. */
details.wpc-avanzado:not([open]) > :not(summary) { display: none !important; }
.wpc-avz .wpc-avanzado { border-top: 1px dashed var(--wpc-borde); grid-column: 1 / -1; }

.wpc-avanzado { margin-top: 12px; border-top: 1px solid var(--wpc-borde); padding-top: 11px; }
.wpc-avanzado summary {
  cursor: pointer; font-size: 14.5px; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 7px; color: var(--wpc-tinta);
}
.wpc-avanzado summary::-webkit-details-marker { display: none; }
.wpc-avanzado summary::before { content: "+"; font-family: var(--wpc-font-mono); color: var(--wpc-suave); }
.wpc-avanzado[open] summary::before { content: "–"; }
/* Icono de informacion con burbuja (hover / foco / toque) */
.wpc-info { position: relative; display: inline-flex; margin-left: 2px; }
.wpc-info-btn {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--wpc-suave); background: #FFF;
  color: var(--wpc-suave); font: 600 11px/1 var(--wpc-font-mono, monospace); cursor: help; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.wpc-info-btn:hover, .wpc-info-btn:focus-visible, .wpc-info--on .wpc-info-btn { color: #FFF; background: var(--wpc-tinta); border-color: var(--wpc-tinta); }
.wpc-tip {
  position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%);
  width: min(320px, 78vw); padding: 11px 13px; background: var(--wpc-tinta); color: #FFF;
  font-size: 12.5px; font-weight: 400; line-height: 1.5; border-radius: var(--wpc-radio);
  box-shadow: 0 6px 22px rgba(0,0,0,.18); z-index: 20; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.wpc-tip::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--wpc-tinta); }
.wpc-info:hover .wpc-tip, .wpc-info-btn:focus-visible + .wpc-tip, .wpc-info--on .wpc-tip { opacity: 1; visibility: visible; }
@media (max-width: 480px) { .wpc-tip { left: auto; right: -8px; transform: none; } .wpc-tip::after { left: auto; right: 12px; margin-left: 0; } }

/* Alto + selector de unidad (m / cm / mm) al costado */
/* Ancho + alto (75 %) y unidad (25 %) en una fila */
.wpc-medidas { display: grid; grid-template-columns: 3fr 3fr 2fr; gap: 11px; }
.wpc-medidas select { min-width: 0; padding-left: 10px; padding-right: 26px; }
/* Móvil: "centímetros"/"milímetros" no caben en un 25 % de 300 px → la unidad pasa a una segunda fila a todo el ancho */
@media (max-width: 480px) { .wpc-medidas { grid-template-columns: 1fr 1fr; gap: 8px; } .wpc-medidas > :last-child { grid-column: 1 / -1; } }
/* Número con la abreviatura de la unidad dentro del campo: el número va alineado
   a la derecha, pegado a su unidad ("2,50 m"), y sin flechas nativas que se
   superpongan con la abreviatura. */
.wpc-num { position: relative; }
.wpc .wpc-num input[type="number"] { width: 100%; padding-right: 36px; -moz-appearance: textfield; appearance: textfield; }
.wpc .wpc-num input::-webkit-outer-spin-button,
.wpc .wpc-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpc-num-u { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--wpc-suave); pointer-events: none; }

/* Posicion: numero + barra deslizante */
.wpc-rango { display: flex; align-items: center; gap: 10px; }
.wpc-rango input[type="number"] { flex: 0 0 92px; width: 92px; }
.wpc-rango .wpc-num { flex: 0 0 104px; width: 104px; }
.wpc-rango .wpc-num input[type="number"] { width: 100%; flex: none; }
.wpc-rango input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--wpc-tinta); height: 22px; cursor: pointer; margin: 0; }

.wpc-ar > .wpc-check { justify-content: flex-start; }
.wpc-ar > .wpc-check .wpc-info { margin-left: auto; }
.wpc-ar-item { margin-top: 8px; }
.wpc-ar .wpc-agregar--mini { background: #FFF; border-style: solid; } /* sobre el fondo crema del bloque, en blanco para que se vean */
.wpc-ar-aviso { color: var(--wpc-corte); }

.wpc-seg-titulo { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 7px; color: var(--wpc-tinta); }
.wpc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.wpc-seg-op {
  flex: 1 1 auto; padding: 9px 12px; font: inherit; font-size: 13.5px; line-height: 1.2; cursor: pointer;
  background: #FFF; color: var(--wpc-tinta); border: 1px solid var(--wpc-borde); border-radius: var(--wpc-radio);
}
.wpc-seg-op:hover:not(:disabled) { border-color: var(--wpc-tinta); }
.wpc-seg-op--on { background: var(--wpc-tinta); color: #FFF; border-color: var(--wpc-tinta); }
.wpc-seg-op:disabled { opacity: .4; cursor: not-allowed; }
.wpc-nota { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--wpc-suave); }
.wpc-nota:empty { display: none; }

/* ---------- Plano ---------- */
.wpc-plano { margin-top: 13px; background: var(--wpc-papel-2); padding: 8px; border-radius: var(--wpc-radio); }
.wpc-plano svg { display: block; width: 100%; height: auto; }
/* Movil: el plano sangra el padding de la tarjeta del muro para ganar ancho de lectura */
@media (max-width: 480px) {
  .wpc-plano { margin-left: -14px; margin-right: -14px; padding: 6px 4px; border-radius: 0; }
}
.wpc-leyenda { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 15px; }
.wpc-leyenda li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--wpc-suave); }

/* ---------- Acciones ---------- */
.wpc-quitar {
  background: transparent; border: 0; color: var(--wpc-suave); cursor: pointer;
  font-size: 12px; padding: 4px 6px; text-decoration: underline; font-family: var(--wpc-font);
}
.wpc-quitar:hover { color: var(--wpc-corte); }

.wpc-agregar {
  width: 100%; padding: 13px; margin-top: 4px;
  background: transparent; border: 1px dashed var(--wpc-borde);
  border-radius: var(--wpc-radio); color: var(--wpc-tinta);
  font-family: var(--wpc-font); font-size: 14px; font-weight: 500; cursor: pointer;
}
.wpc-agregar:hover { background: #FFF; border-color: var(--wpc-tinta); }

.wpc-alerta {
  margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--wpc-corte);
  background: rgba(166,64,47,.08); font-size: 12.5px; line-height: 1.5;
}
.wpc-alerta[hidden] { display: none; }

/* ---------- Pie ---------- */
.wpc-pie {
  flex: 0 0 auto; padding: 14px 20px 18px;
  border-top: 1px solid var(--wpc-borde); background: var(--wpc-papel);
}
.wpc-cta {
  width: 100%; padding: 14px; border: 0; border-radius: var(--wpc-radio);
  background: var(--wpc-acento); color: var(--wpc-acento-txt);
  font-family: var(--wpc-font); font-size: 15px; font-weight: 500; cursor: pointer;
}
.wpc-cta:hover { opacity: .88; }
.wpc-cta:disabled { opacity: .45; cursor: default; }
.wpc-volver {
  display: block; width: 100%; margin-top: 9px; padding: 8px;
  background: transparent; border: 0; color: var(--wpc-suave);
  font-family: var(--wpc-font); font-size: 13px; cursor: pointer; text-decoration: underline;
}
/* Empezar de nuevo: limpia solo la calculadora, disponible a mitad de camino */
.wpc-limpiar {
  display: block; width: 100%; margin-top: 6px; padding: 6px;
  background: transparent; border: 0; color: var(--wpc-suave);
  font-family: var(--wpc-font); font-size: 12px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.wpc-limpiar:hover { color: var(--wpc-tinta); }
/* Dentro de la fila del Modo avanzado (bajo Unidad y su línea), a la derecha */
.wpc-limpiar--muro { display: inline; width: auto; margin: 0 0 0 auto; padding: 0; font-size: 12px; }
.wpc-legal { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wpc-suave); }
.wpc-legal a { color: var(--wpc-tinta); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Paso 3 ---------- */
.wpc-listo { text-align: center; padding: 40px 10px; }
.wpc-listo-icono {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  border: 2px solid var(--wpc-ok); color: var(--wpc-ok);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.wpc-listo h3 { margin: 0 0 8px; font-size: 19px; }
.wpc-listo p { margin: 0 auto; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--wpc-suave); }

/* ---------- Escritorio ---------- */
@media (min-width: 640px) {
  .wpc-total-cifra { font-size: 40px; }
}

/* Móvil: solo "Modo avanzado" + lo que ya tiene el muro; la enumeración larga se
   oculta y sube el cuerpo de letra. (Al final del archivo para ganar la cascada.) */
@media (max-width: 480px) {
  .wpc-avz-desc { display: none; }
  .wpc-avz > summary { font-size: 15px; }
  .wpc-avz > summary .wpc-u { font-size: 13px; }
  .wpc .wpc-nota { font-size: 13px; }
  .wpc .wpc-legal { font-size: 12.5px; }
  .wpc .wpc-ab-titulo { font-size: 13.5px; }
}