/* Portal de devoluciones. Misma identidad que el portal de factura: una
   columna, legible desde 360px, barra negra con el logo y tarjeta al centro.
   La mayoria llega desde el celular, con el correo de su pedido a la mano. */

:root {
  --jl-negro: #111114;
  --jl-tinta: #1d1d21;
  --jl-gris: #6b6b74;
  --jl-linea: #e3e3e8;
  --jl-fondo: #f6f6f8;
  --jl-blanco: #ffffff;
  --jl-error: #b3261e;
  --jl-error-fondo: #fdecea;
  --jl-ok: #1b5e20;
  --jl-ok-fondo: #e8f5e9;
  --jl-info-fondo: #eef4ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--jl-fondo);
  color: var(--jl-tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;   /* 16px o mas: menos y iOS hace zoom al enfocar un input */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.dv-top {
  background: var(--jl-negro);
  padding: 18px 16px;
  text-align: center;
}

.dv-logo {
  display: block;
  width: 200px;   /* el logotipo es alargado: 1040x101 */
  height: auto;
  margin: 0 auto;
}

/* La tarjeta al centro; crece hacia abajo si el contenido es largo. */
.dv-centro {
  width: 100%;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dv-titulo {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 16px 0;
  font-size: 26px;
  font-weight: 700;
}

#app {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px 48px;
}

.dv-card {
  background: var(--jl-blanco);
  border: 1px solid var(--jl-linea);
  border-radius: 12px;
  padding: 26px 26px 24px;
  margin-bottom: 16px;
}

.dv-card h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.dv-intro {
  margin: 0 0 18px;
  color: var(--jl-gris);
  font-size: 14px;
}

/* -------------------------------------------------------------- pasos */

.dv-progreso {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
}

.dv-progreso span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--jl-linea);
}

.dv-progreso span.on { background: var(--jl-negro); }

/* ------------------------------------------------------------- campos */

.dv-campo { display: block; margin-bottom: 20px; }

.dv-label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
}

.dv-input {
  width: 100%;
  padding: 14px;
  font-size: 17px;
  font-family: inherit;
  color: var(--jl-tinta);
  background: var(--jl-blanco);
  border: 1px solid var(--jl-linea);
  border-radius: 8px;
}

.dv-input:focus {
  outline: none;
  border-color: var(--jl-negro);
  box-shadow: 0 0 0 3px rgba(17, 17, 20, 0.08);
}

.dv-ayuda {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--jl-gris);
}

.dv-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

@media (max-width: 480px) {
  .dv-dos { grid-template-columns: 1fr; }
}

/* Selector del dato de verificacion: segmentado, como un interruptor. */
.dv-tabs {
  display: flex;
  padding: 3px;
  margin-bottom: 10px;
  background: var(--jl-fondo);
  border: 1px solid var(--jl-linea);
  border-radius: 10px;
}

.dv-tab {
  flex: 1;
  padding: 9px 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--jl-gris);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.dv-tab.on {
  color: var(--jl-tinta);
  background: var(--jl-blanco);
  box-shadow: 0 1px 3px rgba(17, 17, 20, 0.12);
}

/* ------------------------------------------------------------ botones */

.dv-btn {
  display: block;
  width: 100%;
  padding: 15px 16px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  color: var(--jl-blanco);
  background: var(--jl-negro);
  border: 1px solid var(--jl-negro);
  border-radius: 8px;
  cursor: pointer;
}

.dv-btn:disabled { opacity: 0.55; cursor: default; }

.dv-btn-plano {
  color: var(--jl-tinta);
  background: transparent;
  border-color: var(--jl-linea);
}

/* ------------------------------------------------------------- avisos */

.dv-aviso {
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 14px;
}

.dv-aviso-error {
  color: var(--jl-error);
  background: var(--jl-error-fondo);
  border: 1px solid rgba(179, 38, 30, 0.25);
}

.dv-aviso-ok {
  color: var(--jl-ok);
  background: var(--jl-ok-fondo);
  border: 1px solid rgba(27, 94, 32, 0.25);
}

/* ------------------------------------------------------------ prendas */

.dv-meta {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--jl-gris);
}

.dv-prendas { border-top: 1px solid var(--jl-linea); }

.dv-prenda {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jl-linea);
}

.dv-prenda.apagada { opacity: 0.5; }

.dv-foto {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--jl-fondo);
  border: 1px solid var(--jl-linea);
  border-radius: 8px;
}

.dv-prenda-txt { flex: 1; min-width: 0; }

.dv-prenda-nombre {
  display: block;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dv-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--jl-gris);
}

.dv-motivo {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--jl-tinta);
  background: var(--jl-blanco);
  border: 1px solid var(--jl-linea);
  border-radius: 8px;
}

.dv-contador {
  flex: none;
  display: flex;
  align-items: center;
  border: 1px solid var(--jl-linea);
  border-radius: 8px;
  overflow: hidden;
}

.dv-contador button {
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-family: inherit;
  color: var(--jl-tinta);
  background: var(--jl-blanco);
  border: 0;
  cursor: pointer;
}

.dv-contador button:disabled { color: var(--jl-linea); cursor: default; }

.dv-contador b {
  min-width: 28px;
  text-align: center;
  font-size: 15px;
}

.dv-totales {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  margin: 16px 0 0;
  font-size: 14px;
}

.dv-totales dt { color: var(--jl-gris); }
.dv-totales dd { margin: 0; text-align: right; }
.dv-totales .dv-fuerte { color: var(--jl-tinta); font-weight: 700; font-size: 18px; }

/* ----------------------------------------------- tienda o paqueteria */

.dv-opciones { display: grid; gap: 10px; margin-bottom: 6px; }

.dv-opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  font-family: inherit;
  text-align: left;
  color: var(--jl-tinta);
  background: var(--jl-blanco);
  border: 1px solid var(--jl-linea);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dv-opcion:hover,
.dv-opcion:focus-visible {
  outline: none;
  border-color: var(--jl-negro);
  box-shadow: 0 0 0 3px rgba(17, 17, 20, 0.08);
}

.dv-opcion.on {
  border: 2px solid var(--jl-negro);
  padding: 15px;
}

.dv-opcion-icono {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--jl-fondo);
  border-radius: 10px;
}

.dv-opcion-txt { flex: 1; min-width: 0; }

.dv-opcion-nombre {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.dv-opcion-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--jl-gris);
}

.dv-opcion-flecha {
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--jl-gris);
}

.dv-check {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--jl-linea);
  border-radius: 50%;
}

.dv-opcion.on .dv-check {
  border: 6px solid var(--jl-negro);
}

.dv-subtitulo {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 700;
}

/* ------------------------------------------- instrucciones y estado */

.dv-pasos {
  padding: 14px 16px 6px;
  margin: 0 0 18px;
  background: var(--jl-fondo);
  border: 1px solid var(--jl-linea);
  border-radius: 10px;
}

.dv-pasos-titulo {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
}

.dv-pasos ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.dv-pasos li { margin-bottom: 8px; }

.dv-folio {
  display: inline-block;
  margin: 2px 0 14px;
  padding: 4px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  background: var(--jl-fondo);
  border: 1px solid var(--jl-linea);
  border-radius: 6px;
}

.dv-estado {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jl-tinta);
  background: var(--jl-info-fondo);
  border-radius: 999px;
}

.dv-listo { text-align: center; }

.dv-listo-icono {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--jl-ok);
  background: var(--jl-ok-fondo);
  border-radius: 50%;
}

/* Linea de tiempo vertical; los tramos son del hilo de colores (abajo). */
.dv-tl { margin: 6px 0 18px; }

.dv-tl-n {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  font-size: 14px;
  color: var(--jl-gris);
}

.dv-tl-n .p {
  position: relative;
  z-index: 1;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--jl-linea);
}

.dv-tl-n.done { color: var(--jl-tinta); }
.dv-tl-n.done .p { background: var(--jl-ok); }
.dv-tl-n.act { font-weight: 700; }
.dv-tl-n.act .p { background: var(--jl-negro); --c: var(--jl-negro); }

.dv-pie {
  margin-top: 16px;
  font-size: 13px;
  text-align: center;
  color: var(--jl-gris);
}
/* Hilo de colores de las lineas de tiempo (copia de TL_HILO_CSS de appv202) */
@keyframes lbTlGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes lbTlGrowV{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes lbTlFlow{from{background-position:0 0,0 0}to{background-position:24px 0,0 0}}@keyframes lbTlFlowV{from{background-position:0 0,0 0}to{background-position:0 24px,0 0}}.lb-tl-seg{position:absolute;border-radius:2px;z-index:0;pointer-events:none;background-image:linear-gradient(90deg,var(--a),var(--b));transform-origin:left center;animation:lbTlGrow .45s ease-out both;animation-delay:var(--d,0s)}.lb-tl-seg.v{background-image:linear-gradient(180deg,var(--a),var(--b));transform-origin:center top;animation-name:lbTlGrowV}.lb-tl-seg.flow{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 6px,transparent 6px 12px),linear-gradient(90deg,var(--a),var(--b));background-size:24px 100%,100% 100%;animation:lbTlGrow .45s ease-out both,lbTlFlow .8s linear infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + .45s)}.lb-tl-seg.v.flow{background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 6px,transparent 6px 12px),linear-gradient(180deg,var(--a),var(--b));background-size:100% 24px,100% 100%;animation-name:lbTlGrowV,lbTlFlowV}@keyframes lbTlPulse{0%{box-shadow:0 0 0 2px var(--c),0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent)}70%{box-shadow:0 0 0 2px var(--c),0 0 0 9px color-mix(in srgb,var(--c) 0%,transparent)}100%{box-shadow:0 0 0 2px var(--c),0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent)}}.lb-tl-pulse{animation:lbTlPulse 1.8s ease-in-out infinite}@media (prefers-reduced-motion:reduce){.lb-tl-seg,.lb-tl-pulse{animation:none!important}}