/* Formulario RMA de TurboPOS.
   Un parte de taller: el formulario a la izquierda y, al lado, el resguardo que se va
   rellenando con lo que importa para identificar la reparación. En el móvil el resguardo
   se queda en una barra inferior con lo que falta y el botón de enviar. */

@font-face {
  font-family: 'Atkinson Next';
  src: url('../fonts/atkinson-next.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Mono';
  src: url('../fonts/atkinson-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --tinta: #23272e;
  --tinta-suave: #525a66;
  --fondo: #e9edf1;
  --papel: #ffffff;
  --linea: #cfd6de;
  --linea-fuerte: #9aa4b1;
  --naranja: #ff8c20;          /* el de la marca: rellenos y marcas */
  --naranja-texto: #b35300;    /* el mismo tono, oscurecido para texto sobre blanco (5,4:1) */
  --naranja-velo: #fff1e3;
  --verde: #1d7a3e;
  --verde-velo: #e5f4ea;
  --rojo: #b3261e;
  --rojo-velo: #fdecea;
  --sombra: 0 1px 2px rgba(35, 39, 46, .08), 0 8px 24px rgba(35, 39, 46, .06);

  --f-texto: 'Atkinson Next', system-ui, sans-serif;
  --f-titulo: 'Montserrat', 'Atkinson Next', system-ui, sans-serif;
  --f-mono: 'Atkinson Mono', ui-monospace, monospace;

  /* Escala 1,25 sobre 17 px */
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.3rem;
  --t-xl: 1.65rem;
  --t-xxl: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);

  --radio-campo: 8px;
  --radio-bloque: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8ebef;
    --tinta-suave: #a9b1bc;
    --fondo: #15181c;
    --papel: #1f2328;
    --linea: #3a414a;
    --linea-fuerte: #5d6773;
    --naranja-texto: #ffa24d;
    --naranja-velo: #3a2716;
    --verde: #5cc983;
    --verde-velo: #16301f;
    --rojo: #ff8a80;
    --rojo-velo: #3b1c1a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
  .marca-logo--color { display: none; }
  .marca-logo--blanco { display: block; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.5;
}

a { color: var(--naranja-texto); text-underline-offset: 2px; }

:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

.solo-lector {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ───────── Cabecera ───────── */

.cabecera {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marca-logo { height: 30px; width: auto; display: block; }
.marca-logo--blanco { display: none; }
.cabecera-ayuda {
  font-size: var(--t-s);
  color: var(--tinta-suave);
  text-align: right;
}

/* ───────── Rejilla principal ───────── */

.pagina {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px 140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 960px) {
  .pagina {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    padding-bottom: 64px;
  }
}

.intro h1 {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-xxl);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  max-width: 18ch;
}
.intro-texto {
  margin: 0 0 20px;
  color: var(--tinta-suave);
  max-width: 60ch;
}

/* Tres cosas de las condiciones que el cliente tiene que saber antes de empezar */
.claves {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.claves li {
  background: var(--papel);
  border-left: 4px solid var(--naranja);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: var(--t-s);
  line-height: 1.35;
}
.claves strong {
  display: block;
  font-family: var(--f-titulo);
  font-size: var(--t-m);
  font-weight: 700;
}

.condiciones {
  background: var(--papel);
  border-radius: var(--radio-bloque);
  box-shadow: var(--sombra);
  margin-bottom: 28px;
}
.condiciones summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.condiciones summary::-webkit-details-marker { display: none; }
.condiciones summary::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s;
  flex: none;
}
.condiciones[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.condiciones ol {
  margin: 0;
  padding: 0 22px 18px 42px;
  font-size: var(--t-s);
  color: var(--tinta-suave);
  max-width: 72ch;
}
.condiciones li + li { margin-top: 10px; }
.condiciones li::marker { color: var(--naranja-texto); font-weight: 700; }

/* ───────── Bloques del formulario ───────── */

.bloque {
  background: var(--papel);
  border: 0;
  border-radius: var(--radio-bloque);
  box-shadow: var(--sombra);
  margin: 0 0 20px;
  padding: 22px 18px 24px;
  min-width: 0;
}
@media (min-width: 640px) {
  .bloque { padding: 28px 30px 30px; }
}
.bloque legend {
  float: left;           /* saca la legend del borde y deja que el padding la contenga */
  width: 100%;
  padding: 0;
  margin: 0 0 4px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
  line-height: 1.25;
}
.bloque legend + * { clear: both; }
.bloque-ayuda {
  clear: both;
  margin: 0 0 18px;
  font-size: var(--t-s);
  color: var(--tinta-suave);
}

.fila {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .fila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila--cp { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr); }
}
.fila + .fila, .fila + .campo, .campo + .fila, .campo + .campo { margin-top: 16px; }
/* Dentro de una fila la separación la pone el gap: el margen de arriba descuadraría las etiquetas */
.fila > .campo + .campo { margin-top: 0; }

.campo { min-width: 0; }
.campo label, .campo .etiqueta {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.opcional {
  font-weight: 400;
  color: var(--tinta-suave);
  font-size: var(--t-s);
}
.pista {
  display: block;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-top: 5px;
}

input[type='text'], input[type='email'], input[type='tel'], input[type='date'], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-campo);
  padding: 11px 12px;
  min-height: 48px;
  transition: border-color .15s;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta-suave); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-velo);
}
.campo--mono input {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.campo--mono input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--f-texto); }

.error-campo {
  display: none;
  color: var(--rojo);
  font-size: var(--t-s);
  font-weight: 600;
  margin-top: 6px;
}
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--rojo); }
.con-error > .error-campo, .con-error .error-campo { display: block; }

/* Opciones en pastillas (horario, problema) */
.pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.pastilla { position: relative; }
.pastilla input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.pastilla span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: var(--t-s);
  font-weight: 600;
  background: var(--papel);
  transition: background-color .15s, border-color .15s;
}
.pastilla input:hover + span { border-color: var(--tinta-suave); }
.pastilla input:checked + span {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}
.pastilla input:focus-visible + span { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* ───────── Selector de equipo ───────── */

.equipos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) {
  .equipos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.equipo { position: relative; }
.equipo input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.equipo-cara {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 100%;
  min-height: 132px;
  padding: 16px 10px 14px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  font-size: var(--t-s);
  line-height: 1.2;
  transition: border-color .15s, background-color .15s;
}
.equipo-cara svg {
  width: 64px;
  height: 64px;
  flex: none;
  color: var(--tinta-suave);
  transition: color .15s;
}
.equipo input:hover + .equipo-cara { border-color: var(--tinta-suave); }
.equipo input:checked + .equipo-cara {
  border-color: var(--naranja);
  background: var(--naranja-velo);
  box-shadow: inset 0 0 0 1.5px var(--naranja);
}
.equipo input:checked + .equipo-cara svg { color: var(--naranja-texto); }
.equipo input:focus-visible + .equipo-cara { outline: 3px solid var(--naranja); outline-offset: 2px; }

.modelo {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--linea);
}
.modelo[hidden] { display: none; }

/* ───────── Fotos ───────── */

.fotos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 420px) {
  .fotos { gap: 8px; }
}
.foto { position: relative; min-width: 0; }
.foto input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}
.foto-marco {
  aspect-ratio: 3 / 4;
  border: 2px dashed var(--linea-fuerte);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  text-align: center;
  overflow: hidden;
  position: relative;
  background: var(--fondo);
  transition: border-color .15s;
}
.foto-marco svg { width: 34px; height: 34px; color: var(--tinta-suave); }
.foto-nombre { font-weight: 700; font-size: var(--t-s); line-height: 1.2; }
.foto-accion { font-size: var(--t-xs); color: var(--tinta-suave); }
.foto input:hover + .foto-marco, .foto.arrastrando .foto-marco { border-color: var(--naranja); }
.foto input:focus-visible + .foto-marco { outline: 3px solid var(--naranja); outline-offset: 2px; }
.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto.con-foto .foto-marco { border-style: solid; border-color: var(--verde); }
.foto-quitar {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 22, 26, .78);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.foto-quitar[hidden] { display: none; }
.foto-sello {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(20, 22, 26, .72);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 5px 6px;
}
.foto.con-error .foto-marco { border-color: var(--rojo); }

/* ───────── Consentimiento ───────── */

.casilla {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: var(--t-s);
}
.casilla + .casilla { margin-top: 14px; }
.casilla input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--naranja-texto);
}

/* El campo trampa: fuera de la vista y del foco, solo lo rellena un bot */
.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captcha { margin-top: 18px; min-height: 65px; }

/* ───────── El resguardo ───────── */

.resguardo-col { min-width: 0; }

.resguardo {
  background: var(--papel);
  border-radius: var(--radio-bloque);
  box-shadow: var(--sombra);
  position: sticky;
  top: 20px;
  overflow: hidden;
}
.resguardo-cabeza {
  background: var(--tinta);
  color: var(--papel);
  padding: 16px 20px 18px;
}
.resguardo-cabeza p { margin: 0; font-size: var(--t-xs); opacity: .8; }
.resguardo-cabeza h2 {
  margin: 2px 0 0;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-l);
  line-height: 1.2;
}
.resguardo-ref {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: .04em;
}
.resguardo dl { margin: 0; padding: 14px 20px 6px; }
.resguardo-linea {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
}
.resguardo-linea:last-child { border-bottom: 0; }
.resguardo dt { font-size: var(--t-xs); color: var(--tinta-suave); grid-column: 2; }
.resguardo dd {
  margin: 0;
  grid-column: 2;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.resguardo dd.vacio { font-weight: 400; color: var(--tinta-suave); }
.resguardo dd.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: .05em; }
.marca-estado {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--linea-fuerte);
  position: relative;
  transition: background-color .2s, border-color .2s;
}
.resguardo-linea.listo .marca-estado { background: var(--verde); border-color: var(--verde); }
.resguardo-linea.listo .marca-estado::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Troquel entre el resguardo y el botón, como el de un parte de taller */
.troquel {
  position: relative;
  height: 20px;
  margin: 4px 0;
}
.troquel::before {
  content: '';
  position: absolute;
  left: 14px; right: 14px; top: 50%;
  border-top: 2px dashed var(--linea);
}
.troquel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0 50%, var(--fondo) 10px, transparent 10.5px),
    radial-gradient(circle at 100% 50%, var(--fondo) 10px, transparent 10.5px);
}
.resguardo-pie { padding: 8px 20px 20px; }
.resguardo-faltan {
  margin: 0 0 12px;
  font-size: var(--t-s);
  color: var(--tinta-suave);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--naranja);
  color: #23160a;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-m);
  cursor: pointer;
  transition: filter .15s;
}
.boton:hover { filter: brightness(.95); }
.boton:disabled { cursor: progress; filter: saturate(.4); }
.boton .girando {
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gira .8s linear infinite;
}
.boton .girando[hidden] { display: none; }
@keyframes gira { to { transform: rotate(360deg); } }

/* En el móvil el resguardo cede el sitio a una barra fija con lo que falta */
.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: var(--papel);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
}
.barra-movil .resguardo-faltan { margin: 0; flex: 1; min-width: 0; line-height: 1.3; }
.barra-movil .boton { width: auto; flex: none; }

@media (max-width: 959px) {
  .resguardo-col { display: none; }
}
@media (min-width: 960px) {
  .barra-movil { display: none; }
}

/* ───────── Avisos y resultado ───────── */

.aviso {
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: var(--t-s);
  font-weight: 600;
}
.aviso[hidden] { display: none; }
.aviso--error { background: var(--rojo-velo); color: var(--rojo); border: 1px solid currentColor; }

.hecho {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.hecho[hidden] { display: none; }
.hecho .resguardo { position: static; }
.hecho-titulo {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: var(--t-xxl);
  line-height: 1.1;
  margin: 8px 0 12px;
}
.hecho-texto { color: var(--tinta-suave); margin: 0 0 24px; max-width: 60ch; }
.hecho ol { padding-left: 1.3em; margin: 0; }
.hecho ol li + li { margin-top: 6px; }
.hecho-pasos { padding: 4px 20px 20px; font-size: var(--t-s); }
.hecho-pasos h3 { font-size: var(--t-m); margin: 8px 0; }
.hecho-otro { margin-top: 20px; text-align: center; }
.hecho-otro button {
  font: inherit;
  font-weight: 700;
  background: none;
  border: 0;
  color: var(--naranja-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 8px;
}

.pie {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}
@media (max-width: 959px) {
  .pie { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}