/*
 * pttreparaciones — estilos del formulario de reparación embebible.
 * Cargado por controllers/front/widget.php mediante un <link> propio
 * (no inline), para poder cachearse en el navegador y mantenerse aparte
 * del <script> que construye el HTML.
 *
 * Todo vive bajo el selector raíz .pttrf y usa variables CSS propias con
 * fallback a las variables de marca del tema (--primary_color, etc.) para
 * heredar el color/tipografía reales del sitio sin depender de que existan.
 */

.pttrf {
  --pttrf-primary: var(--color-primary, var(--primary_color, #C43540));
  --pttrf-primary-dark: #a12832;
  --pttrf-text: var(--color-text, #454546);
  --pttrf-text-muted: var(--color-dark-grey, #6A6A6B);
  --pttrf-black: var(--color-black, #020202);
  --pttrf-border: var(--color-bg, #ECECED);
  --pttrf-bg: var(--color-bg-1, #f7f7f7);
  --pttrf-white: #ffffff;
  --pttrf-error: #c0392b;
  --pttrf-error-bg: #fdecea;
  --pttrf-radius: 16px;
  --pttrf-radius-sm: 10px;
  --pttrf-font: var(--font-primary, "Manrope", sans-serif);

  font-family: var(--pttrf-font);
  color: var(--pttrf-text);
  background: var(--pttrf-white);
  border: 1px solid var(--pttrf-border);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  padding: 0 16px clamp(20px, 3vw, 32px);
  border-radius: 24px;
  max-width: 1140px;
  margin: 0 auto;
  scroll-margin-top: 24px;
  box-sizing: border-box;
}
.pttrf *, .pttrf *::before, .pttrf *::after { box-sizing: border-box; }

.pttrf__container { max-width: 760px; margin: 0 auto; }

/* ---------- Cabecera ---------- */
.pttrf__title {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--pttrf-black);
  margin: 0 0 4px;
}
.pttrf__subtitle { margin: 0; color: var(--pttrf-text-muted); font-size: 13.5px; }

/* ---------- Pantalla inicial: logo + elegir "nueva solicitud" o "ver estado" ---------- */
.pttrf__gate {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) 0 8px;
}
.pttrf__gate-logo { max-height: 40px; width: auto; margin: 0 auto 16px; display: block; }
.pttrf__gate .pttrf__title { margin-bottom: 6px; }
.pttrf__gate .pttrf__subtitle { margin-bottom: 20px; }
.pttrf__gate-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pttrf__gate-actions .pttrf__btn { margin: 0; width: 100%; }

/* ---------- "Ver el estado de mi reparación" ---------- */
.pttrf__lookup {
  max-width: 480px;
  margin: 0 auto;
  background: var(--pttrf-white);
  border-radius: var(--pttrf-radius);
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.pttrf__lookup .pttrf__subtitle { margin-bottom: 16px; }
.pttrf__lookup-ok {
  background: #eaf7ec;
  color: #2c7a3d;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 4px 0 0;
}

/* ---------- Indicador de pasos ---------- */
.pttrf__steps-nav {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 0;
}
.pttrf__step-dot {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--pttrf-text-muted);
}
.pttrf__step-dot span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pttrf-white);
  border: 2px solid var(--pttrf-border);
  color: var(--pttrf-text-muted);
  font-weight: 800;
  margin: 0 auto 4px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pttrf__step-dot.is-active,
.pttrf__step-dot.is-done { color: var(--pttrf-primary); }
.pttrf__step-dot.is-active span,
.pttrf__step-dot.is-done span {
  border-color: var(--pttrf-primary);
  background: var(--pttrf-primary);
  color: #fff;
}
.pttrf__step-dot.is-done span::after { content: "\2713"; }
.pttrf__step-dot.is-done span { font-size: 0; }

/* ---------- Tarjeta del formulario ---------- */
.pttrf__form {
  background: var(--pttrf-white);
  border-radius: var(--pttrf-radius);
  padding: clamp(14px, 2.2vw, 24px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.pttrf__step { display: none; border: 0; margin: 0; padding: 10px 0 0; }
.pttrf__step.is-active { display: block; animation: pttrf-fade .25s ease; }
@keyframes pttrf-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.pttrf__step-legend {
  font-size: 15.5px;
  font-weight: 800;
  margin: 0 0 12px;
  padding: 0;
  color: var(--pttrf-black);
}

/* ---------- Campos genéricos ---------- */
.pttrf__field { margin-bottom: 12px; }
.pttrf__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pttrf__label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }

.pttrf__field input[type="text"],
.pttrf__field input[type="email"],
.pttrf__field input[type="tel"],
.pttrf__field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--pttrf-border);
  background: var(--pttrf-bg);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--pttrf-text);
  transition: border-color .15s ease, background-color .15s ease;
}
.pttrf__field textarea { resize: vertical; min-height: 56px; }

.pttrf__field input[type="text"]:hover,
.pttrf__field input[type="email"]:hover,
.pttrf__field input[type="tel"]:hover,
.pttrf__field textarea:hover { border-color: #d8d8da; }

.pttrf__field input[type="text"]:focus,
.pttrf__field input[type="email"]:focus,
.pttrf__field input[type="tel"]:focus,
.pttrf__field textarea:focus {
  outline: none;
  border-color: var(--pttrf-primary);
  background: var(--pttrf-white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pttrf-primary) 15%, transparent);
}

.pttrf__hint { font-size: 11.5px; color: var(--pttrf-text-muted); margin: 4px 0 0; line-height: 1.3; }
.pttrf__photo-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pttrf__photo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pttrf-bg);
  border: 1px solid var(--pttrf-border);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 12px;
  color: var(--pttrf-text);
}
.pttrf__photo-chip__name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pttrf__photo-chip__remove {
  appearance: none;
  border: 0;
  background: var(--pttrf-white);
  color: var(--pttrf-text-muted);
  width: 20px;
  height: 20px;
  line-height: 18px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.pttrf__photo-chip__remove:hover { background: var(--pttrf-error-bg); color: var(--pttrf-error); }
.pttrf__error {
  font-size: 12px;
  font-weight: 600;
  color: var(--pttrf-error);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pttrf__error::before { content: "\26A0"; font-size: 12px; }
.pttrf__error[hidden] { display: none; }

/* Campo marcado como inválido tras intentar avanzar (ver widget.php) */
.pttrf__field--error .pttrf__label { color: var(--pttrf-error); }
.pttrf__field--error .pttrf__checkbox--block {
  border: 1.5px solid var(--pttrf-error);
  background: var(--pttrf-error-bg);
}
.pttrf__field--error input[type="text"],
.pttrf__field--error input[type="email"],
.pttrf__field--error input[type="tel"],
.pttrf__field--error textarea {
  border-color: var(--pttrf-error) !important;
  background: var(--pttrf-error-bg) !important;
}
.pttrf__field--error input[type="text"]:focus,
.pttrf__field--error input[type="email"]:focus,
.pttrf__field--error input[type="tel"]:focus,
.pttrf__field--error textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pttrf-error) 18%, transparent);
}

/* ---------- Selector de tipo de dispositivo (paso 1) ---------- */
/* Rediseño propio: tarjetas con icono en círculo arriba y check al
   seleccionar, en vez de simples "pills" de una fila. */
.pttrf__device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.pttrf__device-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 10px 6px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--pttrf-border);
  background: var(--pttrf-bg);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.pttrf__device-card:hover {
  border-color: color-mix(in srgb, var(--pttrf-primary) 45%, var(--pttrf-border));
  transform: translateY(-2px);
}
.pttrf__device-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.pttrf__device-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pttrf-white);
  color: var(--pttrf-primary);
  font-size: 14px;
  transition: background-color .18s ease, color .18s ease;
}
.pttrf__device-card__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pttrf-text);
  line-height: 1.2;
}
.pttrf__device-card__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pttrf-primary);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s ease, transform .15s ease;
}
.pttrf__device-card.is-checked {
  border-color: var(--pttrf-primary);
  background: color-mix(in srgb, var(--pttrf-primary) 6%, var(--pttrf-white));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pttrf-primary) 18%, transparent);
}
.pttrf__device-card.is-checked .pttrf__device-card__icon { background: var(--pttrf-primary); color: #fff; }
.pttrf__device-card.is-checked .pttrf__device-card__label { color: var(--pttrf-black); }
.pttrf__device-card.is-checked .pttrf__device-card__check { opacity: 1; transform: scale(1); }
.pttrf__device-card input:focus-visible ~ .pttrf__device-card__icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pttrf-primary) 30%, transparent); }

/* ---------- Casillas (averías, accesorios, bloques) ---------- */
/* Checkbox propio: se oculta el nativo y se dibuja uno a medida con la
   marca de la tienda, en vez del checkbox por defecto del navegador. */
.pttrf__checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }

.pttrf__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
}
.pttrf__checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pttrf__checkbox__box {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid #cfcfd1;
  background: var(--pttrf-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.pttrf__checkbox__box::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease;
  margin-bottom: 2px;
}
.pttrf__checkbox input:checked ~ .pttrf__checkbox__box {
  background: var(--pttrf-primary);
  border-color: var(--pttrf-primary);
}
.pttrf__checkbox input:checked ~ .pttrf__checkbox__box::after { transform: rotate(45deg) scale(1); }
.pttrf__checkbox input:focus-visible ~ .pttrf__checkbox__box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pttrf-primary) 25%, transparent); }

.pttrf__checkbox--block {
  padding: 10px 12px;
  background: var(--pttrf-bg);
  border-radius: 10px;
  border: 1.5px solid transparent;
}

/* ---------- Honeypot (invisible para humanos) ---------- */
.pttrf__hp { position: absolute !important; left: -9999px !important; top: -9999px !important; }

/* ---------- Subida de fotos ---------- */
.pttrf__field input[type="file"] {
  display: block;
  width: 100%;
  font-size: 13px;
  color: var(--pttrf-text-muted);
}
.pttrf__field input[type="file"]::file-selector-button {
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--pttrf-primary);
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  margin-right: 12px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.pttrf__field input[type="file"]::file-selector-button:hover { background: var(--pttrf-primary-dark); }

/* ---------- Bloque "trae tu equipo al taller" (info + mapa) ---------- */
.pttrf__store {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
  text-align: left;
}
.pttrf__store-info {
  background: var(--pttrf-bg);
  border-left: 4px solid var(--pttrf-primary);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
}
.pttrf__store-title {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--pttrf-black);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pttrf__store-title i { color: var(--pttrf-primary); }
.pttrf__store-facts { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pttrf__store-facts li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.pttrf__store-facts i { color: var(--pttrf-primary); font-size: 12px; width: 14px; margin-top: 2px; text-align: center; flex: 0 0 auto; }
.pttrf__store-facts a { color: inherit; text-decoration: underline; }
.pttrf__store-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--pttrf-primary);
  text-decoration: none;
}
.pttrf__store-link:hover { text-decoration: underline; }
.pttrf__store-link i { font-size: 10px; }
.pttrf__store-map {
  border-radius: 10px;
  overflow: hidden;
  min-height: 150px;
}
.pttrf__store-map iframe { width: 100%; height: 100%; min-height: 150px; border: 0; display: block; }

/* ---------- Resumen final ---------- */
.pttrf__summary {
  background: var(--pttrf-bg);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 13px;
}
.pttrf__summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.pttrf__summary dt { font-weight: 700; color: var(--pttrf-text-muted); }
.pttrf__summary dd { margin: 0; }

/* ---------- Navegación entre pasos ---------- */
.pttrf__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.pttrf__btn {
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  margin-left: auto;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease, opacity .15s ease;
}
.pttrf__btn:active { transform: translateY(1px); }
.pttrf__btn--primary { background: var(--pttrf-primary); color: #fff; }
.pttrf__btn--primary:hover { background: var(--pttrf-primary-dark); }
.pttrf__btn--primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.pttrf__btn--ghost {
  background: transparent;
  border-color: var(--pttrf-primary);
  color: var(--pttrf-primary);
  margin-left: 0;
  margin-right: auto;
}
.pttrf__btn--ghost:hover { background: color-mix(in srgb, var(--pttrf-primary) 8%, transparent); }

/* ---------- Empresa/autónomo ---------- */
[data-business-fields] { margin-top: -4px; }

/* ---------- Confirmación de envío ---------- */
.pttrf__success {
  text-align: center;
  background: var(--pttrf-white);
  border-radius: var(--pttrf-radius);
  padding: 32px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.pttrf__success-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--pttrf-white);
  box-shadow: 0 6px 18px rgba(44, 122, 61, .18), 0 0 0 8px color-mix(in srgb, #2c7a3d 8%, transparent);
  color: #2c7a3d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pttrf__success h3 { font-size: 22px; margin: 0 0 8px; color: var(--pttrf-black); }
.pttrf__success p { color: var(--pttrf-text-muted); margin: 4px 0; }
.pttrf__success-note { font-weight: 700; color: var(--pttrf-black) !important; margin-top: 14px !important; }
.pttrf__success [data-success-back] { margin: 22px auto 0; }
.pttrf__success-code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 26px;
  font-weight: 800;
  color: var(--pttrf-primary) !important;
  letter-spacing: .06em;
  margin: 10px 0 18px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .pttrf__field-row,
  .pttrf__checkbox-grid { grid-template-columns: 1fr; }
  .pttrf__device-grid { grid-template-columns: repeat(2, 1fr); }
  .pttrf__store { grid-template-columns: 1fr; }
  .pttrf__store-map { min-height: 170px; }
}
@media (max-width: 420px) {
  .pttrf__device-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pttrf__device-card { padding: 9px 6px 8px; }
}