/* ==========================================================================
   Rodaje — Estilos compartidos
   Cada página (index.html, cliente.html, mecanico.html) importa este archivo.
   Tokens de marca: ver /marca/rodaje-guia-marca.html
   ========================================================================== */

:root {
  /* Nocturne claro (2026-08-07) — mismo sistema, tema invertido a fondo
     blanco. Es literalmente el mismo esquema de tokens, así que todo lo que
     ya leía var(--bg)/var(--text)/etc. se actualiza solo con este bloque —
     sin tocar tarjeta por tarjeta. La ÚNICA parte del sitio que se queda en
     el oscuro original a propósito es la apertura (.step-splash y
     .step-intro en index.html): esas dos re-declaran estos mismos tokens
     con sus valores viejos más abajo, así que todo lo que hay DENTRO de
     ellas hereda el oscuro por cascada sin duplicar código.
     Fuente de verdad del sistema (versión oscura): nocturne-design-system-readme.md */
  --bg: #f7f7fa;

  /* Glassmorphism: en oscuro el vidrio era una superficie oscura
     translúcida; en claro es vidrio esmerilado BLANCO — mismo blur, mismo
     nombre de variable, alfa invertido. */
  --surface: rgba(255, 255, 255, 0.7);
  --surface-2: rgba(22, 24, 38, 0.05);
  --surface-solid: #ffffff; /* para los pocos casos que necesitan opacidad total (popups de Leaflet, etc.) */
  --glass-blur: blur(20px) saturate(160%);
  --glass-blur-sm: blur(14px) saturate(150%);
  --border: rgba(22, 24, 38, 0.1);
  --border-hover: rgba(22, 24, 38, 0.18);
  --text: #161826; /* el mismo hex que era --bg en oscuro — texto y fondo intercambian rol */
  --text-muted: rgba(22, 24, 38, 0.55);

  /* El acento se oscurece un poco respecto al oscuro (#9184d9): ese tono
     funciona como relleno de botón sobre fondo blanco, pero como TEXTO
     directo sobre blanco (81 usos en este archivo) no daba contraste
     suficiente. --teal-300 tenía el problema inverso — era un lila casi
     blanco pensado para leerse claro sobre fondo oscuro, así que sobre
     blanco quedaba invisible; ahora es un morado oscuro legible. */
  --teal: #6f61c4;
  --teal-dim: rgba(145, 132, 217, 0.14);
  --teal-100: #f5f4ff;
  --teal-300: #5d4fb0;
  --teal-800: #423a6a;

  /* Única excepción deliberada al mono-acento: estrellas de calificación.
     Oscurecido igual que el acento — el amarillo original casi no se veía
     sobre blanco. */
  --star: #ad841f;
  --star-dim: rgba(242, 201, 76, 0.14);

  /* Estados semánticos — fuera del esquema mono-acento; solo para
     avisos/errores puntuales, nunca como acento de interfaz. Oscurecidos
     por el mismo motivo que --teal: usados como texto directo sobre
     blanco, no solo como relleno. */
  --amber: #c85a17;
  --amber-dim: rgba(255, 138, 61, 0.12);
  --tomato: #d94526;
  --tomato-dim: rgba(255, 107, 74, 0.14);
  --red: #dc2626;
  --red-dim: rgba(239, 68, 68, 0.14);

  /* Verificado/éxito — el verde universal de "esto ya pasó la verificación",
     no el acento de marca. Antes el check y el estado "verificado" usaban
     --teal, que es el mismo morado que todo lo demás en la pantalla y no
     se distinguía como un estado logrado. */
  --exito: #16a34a;
  --exito-dim: rgba(22, 163, 74, 0.14);

  /* Elevación: en oscuro era un filo claro de 1px + oscuridad ambiental.
     En claro se invierte — filo oscuro tenue + sombra suave (nunca negro
     puro: el "tinte" es el mismo --text, da una sombra más natural que
     negro plano) y bastante menos opacidad, porque una sombra pensada
     para casi no verse en negro se ve como una mancha pesada sobre blanco. */
  --shadow-sm: 0 0 0 1px rgba(22, 24, 38, 0.08);
  --shadow-md: 0 0 0 1px rgba(22, 24, 38, 0.1), 0 6px 18px rgba(22, 24, 38, 0.1);
  --shadow-lg: 0 0 0 1px rgba(22, 24, 38, 0.12), 0 16px 40px rgba(22, 24, 38, 0.14);

  /* curva de entrada estándar del sistema — ease-out con más "punch" que el CSS por defecto */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Telón de fondo ambiental — sin esto, el vidrio esmerilado de las
   tarjetas no tendría nada de color detrás para refractar y se vería
   como una superficie sólida apagada. Manchas suaves del propio acento,
   fijas (no se mueven con el scroll), detrás de todo el contenido. Mismas
   manchas que en oscuro, opacidad bajada a menos de un tercio: un morado
   saturado al 32% se notaba apenas sobre fondo casi negro, pero sobre
   blanco se ve como un charco de color en vez de un halo sutil. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 620px 480px at 12% -8%, rgba(145, 132, 217, 0.1), transparent 60%),
    radial-gradient(ellipse 560px 460px at 105% 12%, rgba(111, 97, 196, 0.12), transparent 55%),
    radial-gradient(ellipse 700px 520px at 30% 108%, rgba(145, 132, 217, 0.06), transparent 60%),
    var(--bg);
}

/* Los botones ya dan su propio feedback al tocar (:active { scale }); esto
   solo quita el flash gris/azul por defecto de Android/iOS al tocar. */
button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 500; /* Nocturne: nunca más peso que 500 en títulos */
  letter-spacing: -0.015em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
}

/* Foco visible consistente para teclado, sin depender del outline por defecto del navegador */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Botones — feedback táctil inmediato al presionar
   ========================================================================== */

.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  cursor: pointer;
  transition: transform 120ms var(--ease), background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn.is-hidden {
  display: none;
}

/* Acción ya realizada — mismo tratamiento en toda la app (ver
   .history-review-btn.is-sent): tinte de acento en vez de opacado, para
   que "ya lo hiciste" se lea como un estado logrado, no como bloqueado. */
.btn.is-sent {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--teal-dim);
  opacity: 1;
  cursor: default;
}

/* Tags rápidos del modal "Calificar cliente" — fuera de .flow, así que
   usan --teal directo (no --flow-accent, que solo existe ahí). */
.client-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.client-tag {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 7px 13px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}

.client-tag:active {
  transform: scale(0.95);
}

.client-tag:hover {
  border-color: var(--border-hover);
}

.client-tag.is-selected {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--teal-dim);
}

/* Glassmorphism (review con el usuario): el primario pasa de delineado a
   relleno degradado — mismo acento, ahora como superficie de vidrio con
   color, no solo un contorno. */
.btn-primary {
  background: linear-gradient(135deg, #a99cf5 0%, #9184d9 55%, #6f61c4 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(145, 132, 217, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 10px 28px rgba(145, 132, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:active {
  box-shadow: 0 4px 14px rgba(145, 132, 217, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-secondary {
  background: rgba(22, 24, 38, 0.05);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: rgba(22, 24, 38, 0.1);
  border-color: var(--border-hover);
}

.btn-secondary:active {
  background: rgba(22, 24, 38, 0.16);
}

/* Botón de acento (ej. "Reservar cita"): mismo tamaño que btn-secondary
   pero con el color de marca, para que se note como una acción disponible
   y no se confunda con un botón neutro tipo "WhatsApp". */
.btn-accent {
  background: var(--teal-dim);
  color: var(--teal);
  border: 1px solid var(--teal);
}

.btn-accent:hover {
  background: var(--teal);
  color: #fff;
}

.btn-accent:active {
  background: var(--teal-800, var(--teal));
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { box-shadow: 0 10px 28px rgba(145, 132, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 150ms var(--ease); }
  .btn:active,
  .chip:active,
  .need-chip:active,
  .client-tag:active,
  .social-btn:active,
  .star-btn:active,
  .notif-bell:active,
  .vehicle-list-edit:active,
  .profile-tab:active,
  .tabbar-item:active,
  .role-card:active {
    transform: none;
  }
}

/* ==========================================================================
   Paso final del flujo — index.html ("¿Quién eres?")
   ========================================================================== */

.step-role {
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.selector-intro {
  max-width: 480px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(8px);
  animation: enter 500ms var(--ease-out) forwards;
}

.selector-intro .eyebrow {
  justify-content: center;
  margin-bottom: 14px;
}

.selector-intro h1 {
  font-size: 34px;
  letter-spacing: -0.02em;
}

.selector-intro p {
  color: var(--text-muted);
  font-size: 16px;
  margin-top: 12px;
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 640px;
}

@media (max-width: 560px) {
  .role-grid {
    grid-template-columns: 1fr;
  }
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  opacity: 0;
  transform: translateY(8px);
  animation: enter 500ms var(--ease-out) forwards;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.role-card:nth-child(1) { animation-delay: 80ms; }
.role-card:nth-child(2) { animation-delay: 150ms; }

@media (hover: hover) and (pointer: fine) {
  .role-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    background: var(--surface-2);
  }
}

.role-card:active {
  transform: scale(0.98);
}

.role-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-dim);
  color: var(--teal);
  flex-shrink: 0;
  transition: transform 180ms var(--ease);
}

/* Nocturne mono-acento: ambos roles comparten el mismo acento. */
.role-card.is-taller .role-icon {
  background: var(--teal-dim);
  color: var(--teal);
}

/* El flotado continuo va en el <svg>, no en .role-icon (el cuadro) — así
   el "bump" de hover (más abajo, en el cuadro) puede animar su propio
   transform sin pisar el keyframe del ícono: son dos elementos distintos
   controlando la misma propiedad cada uno por su lado. */
.role-icon svg {
  animation: role-icon-float 2.6s var(--ease) infinite;
}

.role-card:nth-child(2) .role-icon svg {
  animation-delay: 0.35s;
}

@keyframes role-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (hover: hover) and (pointer: fine) {
  .role-card:hover .role-icon {
    transform: scale(1.1) rotate(-4deg);
  }
}

.role-card h2 {
  font-size: 19px;
}

.role-card p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.role-card .role-cta {
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 150ms var(--ease);
}

.role-card.is-taller .role-cta {
  color: var(--teal);
}

@media (hover: hover) and (pointer: fine) {
  .role-card:hover .role-cta {
    gap: 10px;
  }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .selector-intro,
  .role-card {
    animation-duration: 1ms;
    animation-delay: 0ms;
    transform: none;
  }
  .role-card:hover {
    transform: none;
  }
  .role-icon svg {
    animation: none;
  }
}

/* ==========================================================================
   Flujo de registro — cliente.html, mecanico.html
   Splash → registro/login → pregunta de perfil → confirmación.
   Todo visual por ahora, sin backend (ver script.js).
   ========================================================================== */

.flow {
  min-height: 100vh;
  --flow-accent: var(--teal);
  --flow-accent-dim: var(--teal-dim);
}

/* Nocturne es mono-acento: el flujo de taller ya no cambia a ámbar;
   ambos roles comparten el mismo blurple. */
.flow[data-role="taller"] {
  --flow-accent: var(--teal);
  --flow-accent-dim: var(--teal-dim);
}

.flow-step {
  display: none;
  min-height: 100vh;
  flex-direction: column;
  box-sizing: border-box;
}

.flow-step.is-active {
  display: flex;
  opacity: 0;
  animation: enter 420ms var(--ease-out) forwards;
}

.flow-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}

.flow-back:hover {
  border-color: var(--border-hover);
}

/* Paso 0 — splash, y el paso intro que sigue (ver más abajo .step-intro):
   la apertura de la app se queda en Nocturne OSCURO a propósito, aunque el
   resto del sitio pasó a claro. Re-declarar acá los tokens con sus valores
   oscuros originales los aísla a todo lo que esté DENTRO de estos dos
   pasos — el resto del flujo (login, preguntas, perfiles) no hereda esto,
   sigue leyendo los valores claros de :root. */
.step-splash,
.step-intro {
  --bg: #161826;
  --surface: rgba(35, 37, 50, 0.6);
  --surface-2: rgba(43, 46, 61, 0.5);
  --surface-solid: #232532;
  --border: rgba(233, 233, 237, 0.16);
  --border-hover: rgba(233, 233, 237, 0.28);
  --text: #e9e9ed;
  --text-muted: rgba(233, 233, 237, 0.55);
  --teal: #9184d9;
  --teal-300: #d2cefd;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}

.step-splash {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  cursor: pointer;
}

.splash-logo {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--flow-accent);
  opacity: 0.5;
  animation: splash-pulse 1.6s var(--ease-out) infinite;
}

@keyframes splash-pulse {
  from { transform: scale(0.55); opacity: 0.55; }
  to { transform: scale(1.4); opacity: 0; }
}

.splash-mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  z-index: 1;
}

.splash-word {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--flow-accent);
}

.splash-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.splash-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--flow-accent);
  animation: splash-dot 1.2s var(--ease) infinite;
}

.splash-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.splash-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes splash-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Paso intro — presentación cinemática antes del login (solo primera vez,
   sin sesión: ver px_intro_visto en script.js). Scroll real de 300vh con el
   escenario fijo por position:fixed (ver nota en .intro-stage); un cometa
   se mueve y cambia de color frío→marca según el progreso del scroll, y el
   texto de cada tercio se revela a la derecha. */

.step-intro {
  display: none;
  height: 300vh;
}

/* .flow-step.is-active trae "animation: enter" (opacity + translateY) —
   cualquier transform en este contenedor, incluso el de esa animación,
   convierte a .step-intro en containing block y rompe el position:fixed
   de .intro-stage (deja de fijarse al viewport). Se pisa acá con una
   entrada de solo opacidad, sin transform. */
.step-intro.is-active {
  display: block;
  animation: intro-fade 400ms var(--ease-out) forwards;
}

@keyframes intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .step-intro.is-active {
    animation-duration: 1ms;
  }
}

.intro-stage {
  /* position:fixed en vez de sticky: html/body llevan overflow-x:hidden
     (necesario para las filas horizontales de chips/tabs de toda la app),
     y eso rompe position:sticky en Chromium. Como el progreso ya se calcula
     en JS a partir del scroll real, fixed logra el mismo efecto "pinneado"
     mientras .step-intro es el único paso visible. */
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 700px 560px at 24% 24%, rgba(80, 60, 120, 0.22), transparent 60%),
    var(--bg);
}

/* Ya no es una bolita de luz ni tiene cola: es un contenedor para tres
   herramientas (llave inglesa, engranaje, chispa de bujía — ver
   .intro-comet-icon abajo) que se van turnando como cabeza del recorrido,
   cada una dando vueltas mientras viaja. El halo (::before) sigue detrás,
   leyendo el "color" que el JS fija — currentColor deja que el mismo
   color alimente el halo y el trazo de las herramientas. */
.intro-comet {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa3b8;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, color;
}

/* ::before (no ::after) para que el halo pinte detrás de los íconos —
   los pseudo-elementos ::after empatan después que los hijos reales en el
   orden de pintado y taparían las herramientas. */
.intro-comet::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 70%);
  filter: blur(11px);
  opacity: 0.4;
  animation: comet-pulse 2.2s var(--ease) infinite;
}

@keyframes comet-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.55; }
}

/* Centrado con margin negativo, no con align-items del flex del padre —
   los hijos position:absolute quedan fuera del algoritmo de flexbox, así
   que ese centrado no les aplica. Dejar el centrado en margin deja
   "transform" 100% libre para la rotación que el JS aplica cada frame. */
.intro-comet-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  opacity: 0;
  filter: drop-shadow(0 0 6px currentColor);
  will-change: transform, opacity;
}

/* .intro-copy y .intro-visual arrancan con opacity/filter en 0 aquí, pero
   desde el primer frame el JS (ver "Intro cinemática" en script.js) toma
   el control vía estilos inline — opacity/blur/translateY calculados cada
   frame a partir del scroll suavizado, no de una clase binaria. La
   transition corta de acá es solo para pulir el paso entre frames. */
.intro-copy {
  position: absolute;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear, filter 90ms linear, transform 90ms linear;
}

/* El texto cambia de lado en cada tercio (data-side, ver HTML) en vez de
   quedarse siempre a la derecha — refuerza la sensación de recorrido a
   medida que se scrollea, y deja que el badge de cada beat ocupe el lado
   contrario sin pisarse. */
.intro-copy[data-side="right"] {
  right: 24px;
  left: 24px;
  margin-left: auto;
  text-align: right;
}

.intro-copy[data-side="left"] {
  left: 24px;
  right: 24px;
  margin-right: auto;
  text-align: left;
}

.intro-copy p {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}

.intro-eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.intro-copy[data-beat="1"] { top: 38%; }
.intro-copy[data-beat="2"] { top: 50%; }
.intro-copy[data-beat="3"] { top: 62%; }

/* El visual de cada beat ahora es el mismo "badge" circular con un ícono
   de línea adentro — antes el beat 1 (dos autos dibujados a mano en
   stroke-width:6 + un "?" gigante suelto) desentonaba con los íconos
   prolijos de los beats 2 y 3. Un solo lenguaje visual para los tres. */
.intro-visual {
  position: absolute;
  top: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear, filter 90ms linear;
}

.intro-visual[data-side="left"] {
  left: 6%;
  transform: translateY(-50%);
}

.intro-visual[data-side="right"] {
  right: 6%;
  left: auto;
  transform: translateY(-50%);
}

.intro-visual[data-beat="1"] { top: 38%; }
.intro-visual[data-beat="2"] { top: 50%; }
.intro-visual[data-beat="3"] { top: 62%; }

.intro-badge {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Vidrio claro sobre fondo oscuro: la intro se queda en Nocturne oscuro
     a propósito (ver .step-splash, .step-intro más arriba), así que acá NO
     se usan los tokens de tema — esos ahora son claros en el resto del
     sitio. */
  background: rgba(233, 233, 237, 0.06);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -16px rgba(22, 24, 38, 0.16);
  color: var(--flow-accent);
  will-change: transform;
}

.intro-badge-icon {
  width: 34px;
  height: 34px;
}

/* Satélites del beat 1: moto y camión, más chicos y apagados que el auto
   central — dan la idea de "cualquier vehículo" sin competir con el ícono
   principal. Reemplazan el "?" suelto que no aportaba nada al mensaje. */
.intro-badge-satellite {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: 0 6px 16px -4px rgba(22, 24, 38, 0.16);
}

.intro-badge-satellite svg {
  width: 19px;
  height: 19px;
}

.intro-badge-satellite.is-moto {
  top: -10px;
  right: -14px;
}

.intro-badge-satellite.is-truck {
  bottom: -10px;
  left: -14px;
}

/* Posiciones genéricas de borde (arriba/izquierda/abajo) para los 3
   íconos del beat 2 — centrado con margin negativo en vez de translate,
   porque translate queda libre para la animación de rebote (ver
   satellite-bounce) sin que la centrada y el rebote se pisen en la misma
   propiedad. */
.intro-badge-satellite.is-top {
  top: -16px;
  left: 50%;
  margin-left: -19px;
}

.intro-badge-satellite.is-left {
  left: -16px;
  top: 50%;
  margin-top: -19px;
}

.intro-badge-satellite.is-bottom {
  bottom: -16px;
  left: 50%;
  margin-left: -19px;
}

.intro-badge-satellite.is-right {
  right: -16px;
  top: 50%;
  margin-top: -19px;
}

/* Todos los satélites rebotan igual (beat 1 se había quedado estático por
   error) — desfasados entre sí para que no se muevan en bloque. */
.intro-badge-satellite {
  animation: satellite-bounce 1.8s var(--ease) infinite;
}

.intro-badge-satellite.is-truck,
.intro-badge-satellite.is-left { animation-delay: 0.2s; }
.intro-badge-satellite.is-bottom { animation-delay: 0.4s; }
.intro-badge-satellite.is-right { animation-delay: 0.3s; }

@keyframes satellite-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 460px) {
  .intro-visual {
    width: 110px;
    height: 110px;
  }
  .intro-badge {
    width: 68px;
    height: 68px;
  }
  .intro-badge-icon {
    width: 28px;
    height: 28px;
  }
  .intro-badge-satellite {
    width: 30px;
    height: 30px;
  }
  .intro-badge-satellite svg {
    width: 15px;
    height: 15px;
  }
  .intro-badge-satellite.is-top,
  .intro-badge-satellite.is-bottom {
    margin-left: -15px;
  }
  .intro-badge-satellite.is-left,
  .intro-badge-satellite.is-right {
    margin-top: -15px;
  }
}

.intro-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  animation: intro-hint-bounce 1.6s var(--ease) infinite;
}

@keyframes intro-hint-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* Anticipo de la hoja de login: mismos tokens que .auth-sheet (más chico,
   sin campos reales — es un adelanto visual, no un formulario duplicado)
   que el JS va revelando (opacity + scale, ver render() en script.js)
   sobre el final del scroll, justo donde converge y se apaga el haz —
   así el corte hacia el paso de login real se siente continuo en vez de
   un salto. transform queda 100% en manos del JS (translate + scale
   juntos) para no pisarse con esta hoja base. */
.intro-login-preview {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(78vw, 260px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
}

.intro-login-preview-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px 20px;
  box-shadow: 0 24px 60px -20px rgba(22, 24, 38, 0.18);
}

.intro-login-preview-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.intro-login-preview-line {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  /* Línea de texto simulada sobre la lámina de vidrio oscura de la
     preview — ver nota en .intro-badge. */
  background: rgba(233, 233, 237, 0.1);
}

.intro-login-preview-line--short {
  width: 70%;
}

.intro-login-preview-btn {
  width: 100%;
  height: 14px;
  border-radius: 8px;
  background: var(--flow-accent);
  opacity: 0.85;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .intro-scroll-hint {
    animation: none;
  }
  .intro-copy {
    transition-duration: 1ms;
  }
  .intro-comet::before {
    animation: none;
  }
  .intro-badge {
    transition-duration: 1ms;
  }
  .intro-badge-satellite {
    animation: none;
  }
  .intro-login-preview {
    transition-duration: 1ms;
  }
}

@media (max-width: 460px) {
  .intro-copy {
    max-width: 240px;
    font-size: 13px;
  }
  .intro-copy p {
    font-size: 18px;
  }
}

/* Paso 1 — registro / login: ventana de vidrio flotante y centrada (antes
   era una hoja pegada al borde inferior — el review pidió específicamente
   esta composición: tarjeta suspendida sobre el fondo ambiental). */

.step-auth {
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.auth-banner {
  text-align: center;
  max-width: 380px;
  margin: 0 auto 20px;
}

.auth-banner h1 {
  font-size: 26px;
  letter-spacing: -0.02em;
}

.auth-banner p {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 8px;
}

.auth-sheet {
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(22, 24, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-tabs {
  display: flex;
  background: rgba(22, 24, 38, 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.auth-tab.is-active {
  background: var(--flow-accent-dim, var(--teal-dim));
  color: var(--flow-accent, var(--teal));
  font-weight: 600;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.auth-form.is-hidden {
  display: none;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-form input {
  background: rgba(22, 24, 38, 0.05);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.auth-form input:focus-visible {
  border-color: var(--flow-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--flow-accent-dim);
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
  background: linear-gradient(135deg, #a99cf5 0%, #9184d9 55%, #6f61c4 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(145, 132, 217, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.auth-submit:hover,
.auth-submit:active {
  box-shadow: 0 10px 28px rgba(145, 132, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-social {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(22, 24, 38, 0.05);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), transform 120ms var(--ease);
}

.social-btn:active {
  transform: scale(0.95);
}

.social-btn:hover {
  border-color: var(--border-hover);
  background: rgba(22, 24, 38, 0.09);
}

.auth-terms {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

.auth-terms a {
  color: var(--flow-accent);
  text-decoration: none;
}

.auth-terms a:hover {
  text-decoration: underline;
}

/* Paso "saludo" — mecanico.html */

.step-greet {
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
}

.step-greet .flow-back {
  position: absolute;
  top: 24px;
  left: 24px;
}

.greet-body {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.greet-icon {
  margin-bottom: 8px;
  color: var(--flow-accent, var(--teal));
}

.step-greet h1 {
  font-size: 26px;
  letter-spacing: -0.02em;
}

.step-greet p {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 6px;
}

.step-greet .btn {
  margin-top: 20px;
  background: transparent;
  color: var(--flow-accent);
  border: 1px solid var(--flow-accent);
}

.step-greet .btn:hover,
.step-greet .btn:active {
  background: var(--flow-accent-dim);
}

/* Preguntas — pregunta de perfil / onboarding de taller */

.step-question {
  margin: 0 auto;
  padding: 24px 24px 100px;
  max-width: 480px;
  width: 100%;
  align-self: center;
  box-sizing: border-box;
}

.flow-step-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 24px 0 0;
}

.step-question .flow-progress {
  margin-top: 10px;
}

.flow-progress {
  display: flex;
  gap: 8px;
  margin: 24px 0 28px;
}

.flow-progress span {
  flex: 1;
  height: 4px;
  border-radius: 100px;
  background: var(--surface-2);
}

.flow-progress span.is-done,
.flow-progress span.is-active {
  background: var(--flow-accent);
}

.step-question h1 {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.flow-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 8px;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 48px 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
}

.option-desc {
  color: var(--text-muted);
  font-size: 13px;
}

.option-check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-hover);
}

.option-card.is-selected {
  border-color: var(--flow-accent);
  background: var(--flow-accent-dim);
}

.option-card.is-selected .option-check {
  border-color: var(--flow-accent);
  background: var(--flow-accent);
}

.option-card.is-selected .option-check::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--bg);
}

.option-card-compact {
  padding: 15px 48px 15px 20px;
}

.option-list-compact {
  margin-top: 20px;
}

/* Campos de texto sueltos (fuera de .auth-form) */

.field-group {
  margin-top: 22px;
}

.field-group.is-hidden {
  display: none;
}

.field-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.field-row .field-group {
  flex: 1;
  margin-top: 0;
}

.field-hint {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.field-hint.is-hidden {
  display: none;
}

.field-hint.is-error {
  background: var(--red-dim);
  color: var(--red);
}

.field-hint.is-success {
  background: var(--exito-dim);
  color: var(--exito);
}

.field-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: block;
}

.field-question {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 10px;
}

/* La grilla de marcas (27 chips) solo se revela si el mecánico contesta
   "Sí, me especializo" en el filtro previo — de entrada era una pared
   visual siempre visible incluso para quien trabaja con todas las marcas.
   Separada del toggle con margin-top para no quedar pegada. */
[data-brand-chip-grid] {
  margin-top: 12px;
}

.field-input {
  width: 100%;
  background: var(--surface-2);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  /* 16px, no 14px: por debajo de eso Safari en iOS hace zoom automático
     al enfocar el campo, un salto brusco muy típico en sitios mal
     adaptados a móvil. */
  font-size: 16px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.field-input:focus-visible {
  border-color: var(--flow-accent, var(--teal));
  outline: none;
  box-shadow: 0 0 0 3px var(--teal-dim);
}

textarea.field-input {
  resize: vertical;
  min-height: 72px;
  font-family: 'Inter', sans-serif;
}

.revision-domicilio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.revision-domicilio input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--teal);
  flex-shrink: 0;
}

.revision-domicilio small {
  display: block;
  color: var(--text-muted);
  font-size: 11.5px;
  margin-top: 2px;
}

/* Chips — selección múltiple (marcas, especialidades) */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}

.chip:active {
  transform: scale(0.96);
}

.chip.is-selected {
  border-color: var(--flow-accent);
  background: var(--flow-accent-dim);
  color: var(--flow-accent);
}

/* Checklist de equipamiento — pregunta 4 del onboarding de taller */

.equip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.equip-list.is-hidden {
  display: none;
}

.equip-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.equip-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.equip-check {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid var(--border-hover);
  flex-shrink: 0;
  margin-top: 2px;
}

.equip-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--bg);
  opacity: 0;
}

.equip-item.is-selected {
  border-color: var(--flow-accent);
  background: var(--flow-accent-dim);
}

.equip-item.is-selected .equip-check {
  border-color: var(--flow-accent);
  background: var(--flow-accent);
}

.equip-item.is-selected .equip-check::after {
  opacity: 1;
}

.equip-text strong {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  display: block;
}

.equip-text small {
  color: var(--text-muted);
  font-size: 12px;
}

.equip-result {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
}

.equip-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.equip-result-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.equip-score {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
}

.equip-result-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.equip-stars {
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--border-hover);
}

.equip-badge {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-muted);
  white-space: nowrap;
}

.equip-stars[data-level="muy-equipado"],
.equip-stars[data-level="equipado"] {
  color: var(--teal);
}

.equip-stars[data-level="regular"] {
  color: var(--amber);
}

.equip-badge[data-level="muy-equipado"],
.equip-badge[data-level="equipado"] {
  background: var(--teal-dim);
  color: var(--teal);
}

.equip-badge[data-level="regular"] {
  background: var(--amber-dim);
  color: var(--amber);
}

/* Ubicación — pregunta 5 del onboarding de taller */

.location-btn {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.location-status {
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
}

.flow-next {
  position: fixed;
  /* 216px = mitad del ancho de .step-question (480px) menos sus 24px de
     padding — así el botón queda pegado a la tarjeta centrada en pantallas
     anchas, y a 24px del borde real en pantallas angostas (móvil). */
  right: max(24px, calc(50% - 216px));
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--flow-accent);
  background: var(--surface);
  color: var(--flow-accent);
  box-shadow: var(--shadow-sm);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms var(--ease), transform 120ms var(--ease);
}

.flow-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.flow-next:active:not(:disabled) {
  transform: scale(0.94);
}

/* Paso 3 — confirmación */

.step-done {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 32px 24px;
}

.done-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--flow-accent-dim);
  color: var(--flow-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.step-done h1 {
  font-size: 24px;
}

.step-done p {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 320px;
}

.step-done .btn {
  display: block;
  width: 100%;
  max-width: 280px;
  text-align: center;
}

/* Tarjetas de "sabías que" en la pantalla ¡Listo! — mismo contenido y
   mismos tres colores que TIPS en onboarding-cliente.tsx/onboarding-taller.tsx
   de la app móvil (ver ahí antes de tocar el texto acá, para que no diverjan). */
.done-tips {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  margin: 4px 0;
}

.done-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.done-tip-icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.done-tip-icono svg {
  width: 16px;
  height: 16px;
}

.done-tip-icono.is-exito {
  background: var(--exito-dim);
  color: var(--exito);
}

.done-tip-icono.is-teal {
  background: var(--teal-dim);
  color: var(--teal);
}

.done-tip-icono.is-star {
  background: var(--star-dim);
  color: var(--star);
}

.done-tip-texto {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.done-tip-texto strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .flow-step.is-active {
    animation-duration: 1ms;
  }
  .splash-ring {
    animation: none;
    opacity: 0.35;
  }
  .splash-dots span {
    animation: none;
    opacity: 0.7;
  }
}

/* ==========================================================================
   Perfil de taller — perfil-taller.html
   Estilo "perfil social": header con cover/avatar, stats, tabs
   (Trabajos en curso / Info / Reseñas / Fotos). Datos de ejemplo — sin backend.
   ========================================================================== */

.profile {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.profile-header {
  position: relative;
}

.profile-cover {
  height: 120px;
  background: linear-gradient(120deg, var(--teal-dim), var(--surface-2) 60%, var(--teal-dim));
}

.profile-identity {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 24px;
  margin-top: -36px;
}

.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--teal);
  flex-shrink: 0;
}

.profile-titles {
  padding-bottom: 4px;
}

.profile-titles h1 {
  font-size: 22px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Antes era un círculo tenue (--teal-dim de fondo, --teal de texto) del
   mismo peso que cualquier otro detalle — un taller verificado de verdad
   merece que se note más. Relleno sólido en --exito (el mismo verde de
   "verificado" en todo el sitio, no el acento de marca) y más grande. */
.profile-verified {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--exito);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

.profile-meta {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* "1 trabajo completado", justo debajo de la calificación — antes vivía
   en una ficha aparte más abajo, separada de la otra señal de confianza. */
.profile-meta-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.profile-rating-count {
  font-size: 13px;
  font-weight: 400;
}

.profile-rating {
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

.profile-rating-count {
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
}

.profile-dot {
  color: var(--text-muted);
}

/* Giro de negocio (taller/lubricadora/lavadora/otro) — un vistazo rápido
   de qué ofrece este negocio, sacado de la columna tipo_negocio (no de
   especialidades, que ahora solo trae marcas/tipo de trabajo/aceites). */
.tipo-negocio-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.tipo-negocio-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 5px 12px 5px 8px;
  border-radius: 100px;
  background: var(--teal-800);
  color: var(--teal-100);
}

.tipo-negocio-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.profile-actions {
  display: flex;
  gap: 10px;
  padding: 20px 24px 0;
}

.profile-actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Aviso de perfil incompleto (solo el dueño, y solo si de verdad falta algo
   — lo decide renderProfileTodo en script.js). Usa el ámbar de "pendiente",
   no el rojo de error: no está roto, está a medio llenar. Mismo margen
   lateral que .capacity-bar para que quede alineado con las barras de estado
   que vienen debajo. */
.profile-todo {
  margin: 16px 24px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--amber);
  background: var(--amber-dim);
}

.profile-todo.is-hidden {
  display: none;
}

.profile-todo-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.profile-todo-icon {
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
  color: var(--amber);
  display: flex;
}

.profile-todo-title {
  display: block;
  font-size: 14px;
  color: var(--text);
}

.profile-todo-sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.profile-todo-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.profile-todo-list strong {
  color: var(--text);
  font-weight: 500;
}

.profile-todo-cta {
  margin-top: 12px;
  width: 100%;
}

.capacity-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 24px 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.capacity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}

.capacity-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.capacity-label {
  color: var(--text);
}

.capacity-edit {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--teal);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
}

.capacity-edit:hover {
  text-decoration: underline;
}

.home-service-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 24px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.home-service-icon {
  font-size: 16px;
}

.home-service-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.home-service-bar[data-home-service="si"] {
  border-color: rgba(145, 132, 217, 0.35);
  background: var(--teal-dim);
}

.home-service-bar[data-home-service="si"] .home-service-label {
  color: var(--teal);
  font-weight: 500;
}

.home-service-toggle {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--teal);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
}

.home-service-toggle:hover {
  text-decoration: underline;
}

.capacity-bar[data-capacity="verde"] {
  border-color: rgba(145, 132, 217, 0.35);
  background: var(--teal-dim);
}

.capacity-bar[data-capacity="verde"] .capacity-dot {
  background: var(--teal);
}

.capacity-bar[data-capacity="tomate"] {
  border-color: rgba(255, 107, 74, 0.35);
  background: var(--tomato-dim);
}

.capacity-bar[data-capacity="tomate"] .capacity-dot {
  background: var(--tomato);
}

.capacity-bar[data-capacity="rojo"] {
  border-color: rgba(239, 68, 68, 0.35);
  background: var(--red-dim);
}

.capacity-bar[data-capacity="rojo"] .capacity-dot {
  background: var(--red);
}

/* Modal: opciones de capacidad de atención */

.modal-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.capacity-option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.capacity-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 44px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.capacity-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.capacity-option-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
  background: var(--text-muted);
}

.capacity-option[data-level="verde"] .capacity-option-dot { background: var(--teal); }
.capacity-option[data-level="tomate"] .capacity-option-dot { background: var(--tomato); }
.capacity-option[data-level="rojo"] .capacity-option-dot { background: var(--red); }

.capacity-option-text strong {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  display: block;
}

.capacity-option-text small {
  color: var(--text-muted);
  font-size: 12px;
}

.capacity-option-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-hover);
}

.capacity-option[data-level="verde"].is-selected {
  border-color: var(--teal);
  background: var(--teal-dim);
}

.capacity-option[data-level="tomate"].is-selected {
  border-color: var(--tomato);
  background: var(--tomato-dim);
}

.capacity-option[data-level="rojo"].is-selected {
  border-color: var(--red);
  background: var(--red-dim);
}

.capacity-option[data-level="verde"].is-selected .capacity-option-check { border-color: var(--teal); background: var(--teal); }
.capacity-option[data-level="tomate"].is-selected .capacity-option-check { border-color: var(--tomato); background: var(--tomato); }
.capacity-option[data-level="rojo"].is-selected .capacity-option-check { border-color: var(--red); background: var(--red); }

.capacity-option.is-selected .capacity-option-check::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px 24px 0;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  text-align: center;
}

.stat-value {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 17px;
}

.stat-accent {
  color: var(--teal);
}

/* Ficha "Verificado": el mismo verde --exito del check junto al nombre y
   de "Correo verificado" en el perfil del cliente — un solo color para
   "esto ya se comprobó" en todo el sitio. */
.stat-accent-exito {
  color: var(--exito);
}

.stat-tile-exito {
  /* Solo el marco — el relleno tapaba el vidrio de .stat-tile de abajo y
     quedaba como una mancha sólida en vez de un detalle. */
  border-color: rgba(22, 163, 74, 0.35);
}

/* "Verificado por Rodaje" es una frase, no un número corto como el resto
   de los valores — más chico y con interlineado propio para que no se
   apriete contra el borde de la ficha. */
.stat-tile-exito .stat-value {
  font-size: 13px;
  line-height: 1.35;
}

/* Nivel de equipamiento: mismo tinte "buena noticia" que .capacity-bar en
   verde — se nota antes que las fichas neutras de al lado. */
.stat-tile-equipo {
  border-color: rgba(145, 132, 217, 0.35);
  background: var(--teal-dim);
}

/* Tile clickeable ("Cómo llegar") — mismo tratamiento visual que un botón
   secundario, para que se note que hace algo distinto a los tiles
   informativos (distancia, experiencia). */
.stat-tile-action {
  /* Solo el marco, igual que .stat-tile-exito — nada de relleno sólido. */
  border-color: rgba(255, 138, 61, 0.35);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}

.stat-tile-action:hover {
  border-color: var(--amber);
}

.stat-accent-action {
  color: var(--amber);
}

.stat-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Insignia rellena arriba del valor — MISMO look que .profile-menu-icon
   (cuadrado redondeado, no círculo) del ícono de "Verificaciones" en el
   menú de perfil: relleno sólido, ícono blanco encima, con su sombra
   propia, no un trazo de color suelto sobre el fondo de la ficha. */
.stat-icon-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: 0 auto 6px;
  box-shadow: 0 4px 10px rgba(22, 24, 38, 0.14);
}

.stat-icon-badge-exito {
  background: var(--exito);
}

.stat-icon-badge-teal {
  background: var(--teal);
}

.stat-icon-badge-action {
  background: var(--amber);
}

.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Segunda línea de la ficha de experiencia+equipamiento: las estrellas del
   nivel de equipamiento, en vez del texto "Muy equipado (100/100)" — una
   sola línea corta y visual, no una segunda etiqueta larga compitiendo con
   "años de experiencia". */
.stat-equip-stars {
  color: var(--star);
  font-size: 13px;
  letter-spacing: 1px;
  margin-top: 3px;
}

.trust-card {
  margin: 20px 24px 0;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.trust-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trust-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.trust-score {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.trust-number {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: var(--teal);
  letter-spacing: -0.02em;
}

.trust-max {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
}

.trust-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--teal-dim);
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
}

.trust-bars {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trust-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 12.5px;
}

.trust-bar-head .weight {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
}

.trust-bar-track {
  height: 6px;
  border-radius: 100px;
  background: var(--surface-2);
  overflow: hidden;
}

.trust-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--teal);
}

.trust-bar-foot {
  margin-top: 4px;
  text-align: right;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
}

.trust-note {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.profile-tabs {
  display: flex;
  gap: 4px;
  margin: 24px 24px 0;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 8px;
  overflow-x: auto;
}

.profile-tab {
  flex: 1;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}

.profile-tab:active {
  transform: scale(0.95);
}

.profile-tab.is-active {
  background: var(--surface);
  color: var(--text);
}

/* El ícono de cada pestaña solo se usa en modo dueño (nav inferior tipo
   app); en la fila de arriba del cliente queda oculto y se ve solo el
   texto, como antes. */
.profile-tab .tab-icon {
  display: none;
}

/* Modo dueño: la fila de pestañas se convierte en la misma pastilla
   flotante del tabbar del cliente — ícono + label corto, con insignia en
   degradado para la pestaña activa (el dueño no ve el CTA fijo de cliente,
   así que no hay choque en la franja inferior). */
.profile-tabs.is-owner-nav {
  position: fixed;
  left: 50%;
  top: auto;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 460px;
  margin: 0;
  padding: 6px;
  gap: 0;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(22, 24, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 20;
  overflow-x: visible;
}

.profile-tabs.is-owner-nav .profile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  white-space: normal;
  padding: 5px 2px 4px;
  border-radius: 16px;
  font-size: 9.5px;
  line-height: 1.15;
  text-align: center;
}

.profile-tabs.is-owner-nav .profile-tab .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: 10px;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}

.profile-tabs.is-owner-nav .profile-tab .tab-icon svg {
  width: 16px;
  height: 16px;
}

.profile-tabs.is-owner-nav .profile-tab.is-active {
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

.profile-tabs.is-owner-nav .profile-tab.is-active .tab-icon {
  background: linear-gradient(135deg, #a99cf5 0%, #9184d9 55%, #6f61c4 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(145, 132, 217, 0.4);
}

.profile-panel {
  padding: 20px 24px 0;
  opacity: 0;
  animation: enter 350ms var(--ease-out) forwards;
}

.profile-panel.is-hidden {
  display: none;
}

/* Barra de acciones de un panel (ej: "+ Nueva orden", "+ Añadir colaborador") */

.panel-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}

.btn-add:hover {
  border-color: var(--border-hover);
}

.btn-add-icon {
  font-size: 15px;
  line-height: 1;
  color: var(--teal);
}

/* Trabajos en curso */

.job-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  margin-bottom: 12px;
  transition: border-color 150ms var(--ease), opacity 150ms var(--ease), padding 150ms var(--ease);
}

/* Color de la tarjeta según en qué punto va el trabajo — no solo la
   etiqueta chiquita de estado, para que se lea de un vistazo bajando la
   lista sin tener que leer cada texto. Mismo lenguaje de color que ya
   usaban los badges sueltos (.job-status, .job-pago-badge): ámbar = te
   toca decidir algo (solicitud nueva sin precio, o falta confirmarla),
   teal = ya la aceptaste y está en curso, verde = ya se entregó. */
.job-card.is-nueva {
  border-left-color: var(--amber);
}

.job-card.is-activa {
  border-left-color: var(--teal);
}

/* Completada además se encoge: menos padding, ícono de hora más chico y
   el checklist entero colapsado en un <details> (ver .job-detail más
   abajo) — con varios trabajos terminados en la lista, antes cada uno
   ocupaba lo mismo que uno recién llegado y la pantalla se volvía
   interminable. */
.job-card.is-completada {
  border-left-color: var(--exito);
  padding: 12px 16px;
  opacity: 0.86;
}

.job-card.is-completada .job-time {
  min-width: 52px;
  padding: 6px;
}

.job-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.job-day {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.job-hour {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
}

.job-body {
  flex: 1;
  min-width: 0;
}

.job-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.job-car {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
}

.job-status {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-muted);
}

.job-status.is-confirmada {
  background: var(--teal-dim);
  color: var(--teal);
}

.job-status.is-proceso {
  background: var(--amber-dim);
  color: var(--amber);
}

.job-status.is-completada {
  background: var(--teal-dim);
  color: var(--teal);
}

.job-pago-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.job-pago-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.job-pago-badge.is-pendiente {
  background: var(--amber-dim);
  color: var(--amber);
}

.job-pago-badge.is-pagado {
  background: var(--teal-dim);
  color: var(--teal);
}

/* Trabajo completado sin ningún monto registrado — no es un estado
   "normal" de progreso como .is-pendiente (esperando que el cliente
   pague), es una señal de que quizás se cobró en efectivo por fuera de la
   app, así que lleva el color de alerta en vez del ámbar de "en curso". */
.job-pago-badge.is-sin-cobro {
  background: var(--red-dim);
  color: var(--red);
}

.job-client {
  font-size: 13px;
  color: var(--text);
  margin-top: 6px;
}

.job-reason {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.job-responsible {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.job-responsible strong {
  color: var(--text);
  font-weight: 500;
}

.job-photos {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Ya no hay fotos de antes/después a nivel de toda la orden — se sacaron
   por redundantes: cada tarea del checklist ya tiene las suyas
   (.task-photo). Esta clase sigue viva solo en la vista de ejemplo
   estática de mi-orden.html (.tracking-card, una demo ilustrativa, no
   datos reales). */
.job-photo {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
}

.job-photo::after {
  content: attr(data-label);
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Equipo */

.team-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  margin-bottom: 10px;
}

.team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--teal);
  flex-shrink: 0;
}

.team-info {
  flex: 1;
  min-width: 0;
}

.team-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.team-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Info */

.info-row {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.info-row:last-child {
  padding-bottom: 0;
}

.info-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}

.info-value {
  font-size: 14px;
  color: var(--text);
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--text);
}

/* Reseñas */

.review-card {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.review-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--teal);
  flex-shrink: 0;
}

.review-who {
  flex: 1;
  min-width: 0;
}

.review-name {
  font-size: 13px;
  font-weight: 500;
}

.review-stars {
  font-size: 12px;
  color: var(--star);
  letter-spacing: 1px;
}

.review-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.review-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.6;
}

.photo-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Modales — "Nueva orden de trabajo" / "Añadir colaborador" */

.modal {
  border: none;
  border-radius: 22px;
  padding: 0;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  opacity: 1;
  transform: scale(1) translateY(0);
  box-shadow: 0 24px 60px rgba(22, 24, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}

.modal::backdrop {
  background: rgba(10, 8, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  transition: opacity 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}

/* Estado de "cerrado, todavía en el DOM" durante la transición de salida. */
.modal:not([open]) {
  opacity: 0;
  transform: scale(0.94) translateY(6px);
}

.modal:not([open])::backdrop {
  opacity: 0;
}

/* Estado inicial justo antes de abrirse, para que la transición de entrada
   arranque desde aquí en vez de aparecer de golpe. */
@starting-style {
  .modal[open] {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }

  .modal[open]::backdrop {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal::backdrop {
    transition-duration: 1ms;
  }
}

.modal-form {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-head h2 {
  font-size: 19px;
  letter-spacing: -0.01em;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.modal-close:hover {
  border-color: var(--border-hover);
}

.modal-form .field-group {
  margin-top: 18px;
}

.modal-form .field-row {
  margin-top: 18px;
}

select.field-input {
  cursor: pointer;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.modal-actions .btn {
  flex: 1;
}

.modal-avatar-wrap {
  align-self: center;
  margin-bottom: 4px;
}

/* Correo y contraseña dentro de "Editar perfil": secciones aparte del form
   principal (ver el comentario en el HTML) — mismo padding que
   .modal-form, pero sin el padding-top duplicado del separador de arriba. */
.modal-subform {
  padding-top: 20px;
  padding-bottom: 20px;
}

.modal-subform > .btn {
  align-self: flex-start;
  margin-top: 14px;
  padding-left: 20px;
  padding-right: 20px;
}

.upload-row {
  display: flex;
  gap: 10px;
}

.photo-upload {
  position: relative;
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed var(--border-hover);
  border-radius: 14px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}

.photo-upload:hover {
  border-color: var(--flow-accent, var(--teal));
}

.photo-upload-icon {
  font-size: 18px;
}

.photo-upload-text {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 0 8px;
}

.photo-upload.has-image {
  border-style: solid;
}

.photo-upload.has-image .photo-upload-icon,
.photo-upload.has-image .photo-upload-text {
  display: none;
}

.photo-upload-round {
  flex: none;
  width: 88px;
  height: 88px;
  aspect-ratio: auto;
  border-radius: 50%;
  margin: 0 auto;
}

.task-input-row {
  display: flex;
  gap: 10px;
}

.task-add-btn {
  flex: none;
  padding: 0 16px;
}

.task-save-template-btn {
  width: 100%;
  margin-top: 10px;
  font-size: 12.5px;
  padding: 8px 12px;
}

.task-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
}

/* La descripción ocupa el espacio disponible, empujando precio + botón de
   quitar a la derecha — funciona igual con o sin precio (el span de
   precio es opcional, ver addTarea en script.js). */
.task-list-item > span:first-child {
  flex: 1;
}

.task-list-price {
  color: var(--teal);
  font-weight: 500;
  flex-shrink: 0;
}

/* Fila para añadir un trabajo: el nombre ocupa el espacio disponible, el
   precio queda angosto y fijo — sin esto, .field-input al 100% de ancho
   haría que las tres columnas (nombre, precio, botón) compitan por el
   mismo espacio en partes iguales. */
/* flex-wrap: en modales angostos (celular) el input de nombre + el de
   precio + el botón "+ Añadir" no entran todos en una sola fila — sin
   wrap, en vez de acomodarse el botón queda empujado fuera de la vista y
   el modal entero termina con scroll horizontal (el bug real detrás de
   "no encuentro el botón +"). Con wrap, lo que no entra baja de línea. */
.task-add-row {
  flex-wrap: wrap;
}

.task-add-row .field-input {
  width: auto;
  flex: 1;
  min-width: 140px;
}

.task-add-row .task-price-input {
  flex: 0 0 90px;
  min-width: 0;
}

.task-list-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 150ms var(--ease);
}

.task-list-remove:hover {
  color: var(--red);
}

/* Acta + checklist de una orden ya completada, colapsados — ver donde se
   arma en script.js (buildJobCard, las dos copias). <details> nativo:
   nada de JS de estado, el navegador ya sabe abrir/cerrar y recordar
   accesibilidad (aria-expanded, teclado). */
.job-detail {
  margin-top: 10px;
}

.job-detail-summary {
  list-style: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--exito);
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.job-detail-summary::-webkit-details-marker {
  display: none;
}

/* Flechita propia en vez del triángulo del navegador, para que combine
   con el resto de iconos de la página — gira al abrirse. */
.job-detail-summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms var(--ease);
}

.job-detail[open] .job-detail-summary::before {
  transform: rotate(45deg);
}

.job-detail[open] .job-detail-summary {
  margin-bottom: 8px;
}

.job-checklist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.job-task {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.job-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-task input[type="checkbox"] {
  accent-color: var(--teal);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.job-task.is-hecha span {
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Fotos de antes/después por trabajo individual — pareja pequeña de
   casillas bajo cada línea del checklist, alineada con el texto (no con
   el checkbox). */
.task-photos {
  display: flex;
  gap: 6px;
  padding-left: 23px;
}

.task-photo {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px dashed var(--border-hover);
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-photo:hover {
  border-color: var(--teal);
}

.task-photo-icon {
  display: flex;
  opacity: 0.6;
}

.task-photo-icon svg {
  width: 13px;
  height: 13px;
}

.task-photo.has-photo {
  border-style: solid;
  border-color: var(--border);
}

.task-photo.has-photo .task-photo-icon {
  display: none;
}

.task-photo.is-readonly {
  cursor: default;
}

.task-photo::after {
  content: attr(data-label);
  position: absolute;
  right: 1px;
  bottom: 1px;
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  /* Ojo: NO es un token de tema — es una etiqueta oscura fija sobre una
     foto, para que el texto blanco se lea encima sin importar el fondo
     de la página. Se queda igual en claro y en oscuro. */
  background: rgba(0, 0, 0, 0.6);
  padding: 0 3px;
  border-radius: 3px;
}

.job-fijar-precio {
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed var(--amber);
  border-radius: 8px;
  background: var(--amber-dim);
}

.job-fijar-precio label {
  display: block;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
}

.job-fijar-precio-row {
  display: flex;
  gap: 8px;
}

.job-fijar-precio-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.job-fijar-precio-row .btn {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 13px;
}

/* Hallazgo por tarea (026) — el taller reporta algo que encontró en un
   trabajo puntual y no estaba en el plan; el cliente lo aprueba o
   rechaza desde mi-orden.html. Ver pxRenderHallazgoTaller en script.js
   (panel del taller/colaborador) y el bloque de rt-checklist (cliente).
   El ícono de entrada vive en la misma fila que las fotos de antes/
   después (.task-photos) — mismo tamaño (28px) para que se sienta un
   miembro más de esa fila, no una línea de aviso repetida por tarea. */
.task-hallazgo-btn {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px dashed var(--border-hover);
  background-color: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: border-color 150ms var(--ease), color 150ms var(--ease), opacity 150ms var(--ease);
}

.task-hallazgo-btn svg {
  width: 13px;
  height: 13px;
}

.task-hallazgo-btn:hover {
  opacity: 1;
  border-color: var(--amber);
  color: var(--amber);
}

/* Ya tiene un hallazgo: deja de ser un botón discreto y pasa a ser un
   indicador de estado — sólido, a todo color, sin la opacidad rebajada
   de "esto casi nunca hace falta tocarlo". */
.task-hallazgo-btn.is-pendiente {
  opacity: 1;
  border-style: solid;
  border-color: var(--amber);
  color: var(--amber);
  background-color: var(--amber-dim);
}

.task-hallazgo-btn.is-aprobada {
  opacity: 1;
  border-style: solid;
  border-color: var(--exito);
  color: var(--exito);
  background-color: var(--exito-dim);
}

.task-hallazgo-btn.is-rechazada {
  opacity: 1;
  border-style: solid;
  border-color: var(--red);
  color: var(--red);
  background-color: var(--red-dim);
}

.job-hallazgo.is-hidden {
  display: none;
}

.job-hallazgo-form {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.job-hallazgo-form label {
  display: block;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
}

.job-hallazgo-form textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

.job-hallazgo-form-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.job-hallazgo-form-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.job-hallazgo-form-row .btn {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 13px;
}

.job-hallazgo-cancelar {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}

/* Estado de un hallazgo ya reportado — mismo panel se usa en el lado del
   taller (solo lectura) y en el del cliente (con botones de Aprobar /
   Rechazar cuando está pendiente). */
.job-hallazgo {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.job-hallazgo.is-pendiente {
  background: var(--amber-dim);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
}

.job-hallazgo.is-aprobada {
  background: var(--exito-dim);
  border-color: color-mix(in srgb, var(--exito) 35%, transparent);
}

.job-hallazgo.is-rechazada {
  background: var(--red-dim);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
}

.job-hallazgo-titulo {
  margin: 0 0 3px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
}

.job-hallazgo-texto {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.job-hallazgo-nota {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
}

.job-hallazgo-acciones {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.job-hallazgo-acciones .btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
}

.job-hallazgo-resuelto {
  margin: 10px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
}

.job-hallazgo-resuelto.is-aprobada {
  color: var(--exito);
}

.job-hallazgo-resuelto.is-rechazada {
  color: var(--red);
}

.job-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.job-actions .btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
}

.team-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

@media (max-width: 420px) {
  .profile-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   Mi orden — mi-orden.html
   Vista del cliente: cotización a aprobar y, tras aprobarla, seguimiento
   del trabajo con estado, responsable y fotos de antes/después.
   Datos de ejemplo — sin backend.
   ========================================================================== */

.order {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.order-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0 4px;
}

.order-shop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.order-shop-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--teal);
  flex-shrink: 0;
}

.order-shop-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-shop-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.order-shop-meta a {
  color: var(--teal);
  text-decoration: none;
}

.order-shop-meta a:hover {
  text-decoration: underline;
}

/* Cotización */

.quote-card {
  margin-top: 20px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.quote-card.is-hidden {
  display: none;
}

.quote-card h1 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin-top: 10px;
}

.quote-vehicle {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 6px;
}

.quote-breakdown {
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

/* En este proyecto NO hay una regla genérica `.is-hidden` — cada componente
   declara la suya. A .quote-breakdown se le había olvidado, así que el
   desglose se mostraba siempre: script.js solo lo RELLENA cuando hay cupón,
   de modo que en toda orden sin cupón el cliente leía "Trabajo —, Cupón —,
   Total a pagar —" justo debajo del botón que sí decía el precio real. */
.quote-breakdown.is-hidden {
  display: none;
}

.quote-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.quote-row.quote-total {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  border-bottom: none;
  padding-top: 14px;
}

.quote-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.quote-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.quote-actions .btn {
  flex: 1;
}

.quote-reject-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--tomato);
}

.quote-reject-note.is-hidden {
  display: none;
}

/* Notas y bloques que se revelan progresivamente en los modales (detalle de
   día/hora/problema, confirmaciones de envío) — ocultos hasta que el JS
   les quita esta clase en el momento correcto. */
.reveal-note.is-hidden {
  display: none;
}

/* Pago */

.payment-card {
  margin-top: 20px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  opacity: 0;
  animation: enter 350ms var(--ease-out) forwards;
}

.payment-card.is-hidden {
  display: none;
}

.payment-card h1 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin-top: 10px;
}

.payment-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.payment-form {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.payment-form .field-group {
  margin-top: 18px;
}

.payment-form .field-group:first-child {
  margin-top: 0;
}

.payment-form .field-row {
  margin-top: 18px;
}

.payment-submit {
  width: 100%;
  margin-top: 22px;
}

.payment-security {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}

.payment-security.is-error {
  color: var(--red);
}

.payment-security.is-hidden {
  display: none;
}

/* Retriggeada desde JS (mostrarMensajePago) cada vez que el mensaje cambia
   de texto — "Confirmando tu pago…" → "✅ Pago confirmado" necesita su
   propio aviso, no solo heredar la entrada de la tarjeta contenedora. */
.payment-security.is-updating {
  animation: enter 200ms var(--ease-out);
}

/* Seguimiento */

.tracking {
  margin-top: 28px;
  opacity: 0;
  animation: enter 350ms var(--ease-out) forwards;
}

.tracking.is-hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tracking,
  .payment-card {
    animation-duration: 1ms;
  }
  .payment-security.is-updating {
    animation: none;
  }
}

.tracking-steps {
  display: flex;
  flex-direction: column;
}

.tracking-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 22px;
}

.tracking-step:last-child {
  padding-bottom: 0;
}

.tracking-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: -6px;
  width: 2px;
  background: var(--border);
}

.tracking-step.is-done:not(:last-child)::after {
  background: var(--teal);
}

.tracking-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border-hover);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

.tracking-step.is-done .tracking-dot {
  background: var(--teal);
  border-color: var(--teal);
}

.tracking-step.is-active .tracking-dot {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-dim);
}

.tracking-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 1px;
}

.tracking-step.is-done .tracking-label,
.tracking-step.is-active .tracking-label {
  color: var(--text);
}

.tracking-card {
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.tracking-card .job-reason {
  margin-top: 8px;
}

.tracking-photos {
  margin-top: 20px;
}

.job-photo.is-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1.5px dashed var(--border-hover);
}

.job-photo-pending-text {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 0 10px;
}

.tracking-whatsapp {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ==========================================================================
   Mi panel — cliente-home.html
   Vista principal del cliente: vehículo, acción rápida, orden activa,
   historial y gastos, con una barra inferior estilo app móvil.
   Datos de ejemplo — sin backend.
   ========================================================================== */

.home {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 24px calc(96px + 24px);
}

.tab-panel {
  opacity: 0;
  animation: enter 350ms var(--ease-out) forwards;
}

.tab-panel.is-hidden {
  display: none;
}

.tab-back {
  margin-bottom: 14px;
}

.home-greet {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.home-greet-name {
  font-size: 22px;
  /* Excepción puntual a "nunca más de 500 en títulos": el saludo se perdía
     contra el fondo. La app ya usa Inter_600SemiBold acá mismo. */
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

/* Tarjeta de vehículo con ilustración */

.vehicle-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.vehicle-illustration {
  width: 84px;
  flex-shrink: 0;
  color: var(--teal);
}

.vehicle-illustration svg {
  width: 100%;
  height: auto;
}

.vehicle-info {
  flex: 1;
  min-width: 0;
}

.vehicle-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
}

.vehicle-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.vehicle-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vehicle-fact-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vehicle-fact-value {
  font-size: 12.5px;
  color: var(--text);
}

/* Selector de tipo de carrocería (modal Añadir/editar vehículo) */
.tipo-carroceria-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tipo-carroceria-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease);
}

.tipo-carroceria-opt svg {
  width: 100%;
  height: auto;
  max-width: 64px;
  color: inherit;
}

.tipo-carroceria-opt span {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
}

.tipo-carroceria-opt:hover {
  border-color: var(--border-hover);
}

.tipo-carroceria-opt[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal-dim);
  color: var(--teal);
}

/* Icono pequeño de tipo de carrocería en cada item de "Mis vehículos" */
.vehicle-list-icon {
  width: 32px;
  flex-shrink: 0;
  color: var(--teal);
}

.vehicle-list-icon svg {
  width: 100%;
  height: auto;
}

.vehicle-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-edit:hover {
  border-color: var(--border-hover);
}

/* Acción rápida */

.quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}

.quick-action:hover {
  border-color: var(--border-hover);
}

.quick-action-icon {
  font-size: 18px;
}

.quick-action-text {
  flex: 1;
  text-align: left;
}

.quick-action-arrow {
  color: var(--teal);
}

/* Orden activa */

.active-order-card {
  display: block;
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  text-decoration: none;
  color: var(--text);
}

.active-order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.active-order-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.active-order-title {
  font-size: 13px;
  margin-top: 10px;
}

.active-order-cta {
  font-size: 12.5px;
  color: var(--teal);
  margin-top: 8px;
  font-weight: 500;
}

/* Historial */

.history-card {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  margin-bottom: 10px;
}

.history-card .job-reason {
  margin-top: 6px;
}

.history-cost {
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--teal);
}

.history-review-btn {
  margin-top: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}

.history-review-btn:hover {
  border-color: var(--border-hover);
}

.history-review-btn.is-sent {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--teal-dim);
  cursor: default;
}

/* Modal: dejar reseña */

.resena-job {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.star-picker {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.star-btn {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--border-hover);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
}

.star-btn:active {
  transform: scale(0.9);
}

.star-btn:hover {
  border-color: var(--border-hover);
}

.star-btn.is-filled {
  color: var(--star);
  border-color: var(--star);
  background: var(--star-dim);
}

/* Gastos */

.expenses-card {
  padding: 4px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Perfil del cliente */

.client-profile-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.client-profile-texto {
  flex: 1;
  min-width: 0;
}

.client-edit-btn {
  flex-shrink: 0;
  align-self: flex-start;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.client-edit-btn:hover {
  border-color: var(--border-hover);
}

.client-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.client-avatar-verificado {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  background: var(--exito);
  border: 2px solid var(--bg);
}

.client-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--teal);
}

.client-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.client-avatar-edit {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Blanco fijo — el ícono va sobre el relleno morado sólido de abajo, no
     sobre la página, así que no debe seguir var(--text) (con el emoji no
     se notaba, pero un trazo SVG oscuro sobre este morado casi no se vería). */
  color: #fff;
  background: var(--teal);
  border: 2px solid var(--bg);
}

.client-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
}

.client-email {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.client-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.perfil-vehiculos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.vehicle-list {
  margin-top: 14px;
}

.vehicle-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  margin-bottom: 10px;
}

.vehicle-list-info {
  flex: 1;
  min-width: 0;
}

.vehicle-list-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.vehicle-list-facts {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.vehicle-list-edit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms var(--ease), transform 120ms var(--ease);
}

.vehicle-list-edit:active {
  transform: scale(0.92);
}

.vehicle-list-edit:hover {
  border-color: var(--border-hover);
}

/* Barra inferior estilo app móvil — pastilla flotante de vidrio, el ítem
   activo saca una insignia sólida en degradado detrás del ícono (referencia
   compartida por el usuario: Home/Swap/Analyze/Profit). */

.tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  width: calc(100% - 32px);
  max-width: 380px;
  margin: 0;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(22, 24, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 20;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px 2px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 120ms var(--ease);
}

.tabbar-item:active {
  transform: scale(0.94);
}

.tabbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  border-radius: 12px;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}

.tabbar-item svg {
  width: 20px;
  height: 20px;
}

.tabbar-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
}

.tabbar-item.is-active .tabbar-icon {
  background: linear-gradient(135deg, #a99cf5 0%, #9184d9 55%, #6f61c4 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(145, 132, 217, 0.4);
}

.tabbar-item.is-active .tabbar-label {
  color: var(--text);
  font-weight: 600;
}

/* Servicios rápidos — "tienda de iconos" */

.quick-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.quick-service-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}

.quick-service-tile:hover {
  border-color: var(--border-hover);
}

.quick-service-icon {
  font-size: 22px;
}

.quick-service-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}

/* Mapa de ejemplo */

.map-card {
  margin-top: 24px;
}

.map-card .eyebrow {
  margin-bottom: 12px;
}

.map-visual {
  position: relative;
  height: 220px;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface-2);
}

.map-visual .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85);
  color: #57606f;
}

.map-visual .leaflet-control-attribution a {
  color: #57606f;
}

.map-visual .leaflet-popup-content-wrapper {
  /* Sólido a propósito: Leaflet posiciona sus popups en su propio
     contexto de transform, donde backdrop-filter no siempre captura lo
     que hay detrás — el vidrio se ve roto ahí. */
  background: var(--surface-solid);
  color: var(--text);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.map-visual .leaflet-popup-tip {
  background: var(--surface-solid);
}

.map-visual .leaflet-popup-close-button {
  color: var(--text-muted) !important;
}

.map-visual .leaflet-popup-close-button:hover {
  color: var(--text) !important;
}

/* Botón "ir a mi ubicación" — mismo .leaflet-bar que los +/− de zoom, solo
   centra el ícono (Leaflet lo alinea con line-height, pensado para texto,
   no para un SVG) y usa el color del tema en vez del negro por defecto. */
.map-locate-control a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.map-locate-control a:hover {
  color: var(--teal);
}

.map-popup {
  font-family: 'Inter', sans-serif;
  min-width: 170px;
}

.map-popup-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}

.map-popup-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal-dim);
  color: var(--teal);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-popup-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.map-popup-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--teal-dim);
  color: var(--teal);
}

.map-popup-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
}

.map-popup-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
}

.map-popup-link:hover {
  text-decoration: underline;
}

.map-popup-cta {
  margin-top: 4px;
  border: 1px solid var(--teal);
  background: transparent;
  color: var(--teal);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.map-popup-cta:hover {
  background: var(--teal-dim);
}

.map-caption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Talleres cerca de ti */

.nearby-list {
  margin-top: 20px;
}

.nearby-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  margin-top: 10px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 150ms var(--ease);
}

.nearby-card:hover {
  border-color: var(--border-hover);
}

.nearby-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--teal);
  flex-shrink: 0;
}

.nearby-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nearby-info {
  flex: 1;
  min-width: 0;
}

.nearby-name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nearby-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: 'Inter', sans-serif;
}

.capacity-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-right: 5px;
  vertical-align: middle;
}

.capacity-dot-inline[data-capacity="verde"] { background: var(--teal); }
.capacity-dot-inline[data-capacity="tomate"] { background: var(--tomato); }
.capacity-dot-inline[data-capacity="rojo"] { background: var(--red); }

.nearby-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--teal-dim);
  color: var(--teal);
}

.nearby-tag.is-hidden {
  display: none;
}

.nearby-tag-delivery {
  background: var(--surface-2);
  color: var(--text);
}

/* ==========================================================================
   Notificaciones — campanita compartida entre cliente-home.html y
   perfil-taller.html. Ver window.pxNotify() en script.js.
   ========================================================================== */

.home-greet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Puntos por pagar con tarjeta — mismo lenguaje visual que .tag/.tipo-
   negocio-badge (relleno tintado del acento), para que se sienta parte
   del mismo sistema y no un elemento suelto. */
.puntos-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 100px;
  background: var(--teal-dim);
  color: var(--teal);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.puntos-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.puntos-balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 24px;
  border-radius: 14px;
  background: var(--teal-dim);
  margin-top: 4px;
}

.puntos-balance-number {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--teal);
}

.puntos-balance-label {
  font-size: 12px;
  color: var(--text-muted);
}

.puntos-recompensas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.puntos-recompensa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.puntos-recompensa-info {
  display: flex;
  flex-direction: column;
}

.puntos-recompensa-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.puntos-recompensa-costo {
  font-size: 11.5px;
  color: var(--text-muted);
}

.pago-cupon {
  font-size: 12.5px;
  color: var(--teal);
  font-weight: 500;
  margin-top: -8px;
}

.pago-cupon.is-hidden {
  display: none;
}

.notif-wrap {
  position: relative;
  flex-shrink: 0;
}

.notif-wrap-floating {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}

.notif-bell {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms var(--ease), transform 120ms var(--ease);
}

.notif-bell:active {
  transform: scale(0.92);
}

.notif-bell:hover {
  border-color: var(--border-hover);
}

.notif-bell.has-new {
  animation: notif-wiggle 600ms var(--ease-out);
}

@keyframes notif-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}

.notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  /* marca de acento corta y sólida — permitido en Nocturne */
  background: var(--teal);
  color: var(--bg);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-badge.is-hidden {
  display: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 48px);
  max-height: 360px;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px);
  animation: enter 180ms var(--ease-out) forwards;
}

.notif-panel.is-hidden {
  display: none;
}

.notif-panel-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
}

.notif-clear {
  border: none;
  background: transparent;
  color: var(--teal);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  cursor: pointer;
}

.notif-clear:hover {
  text-decoration: underline;
}

.notif-list {
  padding: 6px;
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
}

.notif-item.is-unread {
  background: var(--teal-dim);
}

.notif-item-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-text {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}

.notif-item-time {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .notif-bell.has-new {
    animation-duration: 1ms;
  }
  .notif-panel {
    animation-duration: 1ms;
  }
}

/* ==========================================================================
   Animación de entrada escalonada — listas de tarjetas (trabajos, equipo,
   reseñas, historial, talleres cercanos, servicios rápidos). Cada tarjeta
   entra con un pequeño retraso respecto a la anterior.
   ========================================================================== */

.job-card,
.team-card,
.review-card,
.history-card,
.nearby-card,
.quick-service-tile {
  opacity: 0;
  animation: enter 420ms var(--ease-out) forwards;
}

.job-card:nth-child(1), .team-card:nth-child(1), .review-card:nth-child(1),
.history-card:nth-child(1), .nearby-card:nth-child(1), .quick-service-tile:nth-child(1) {
  animation-delay: 0ms;
}
.job-card:nth-child(2), .team-card:nth-child(2), .review-card:nth-child(2),
.history-card:nth-child(2), .nearby-card:nth-child(2), .quick-service-tile:nth-child(2) {
  animation-delay: 45ms;
}
.job-card:nth-child(3), .team-card:nth-child(3), .review-card:nth-child(3),
.history-card:nth-child(3), .nearby-card:nth-child(3), .quick-service-tile:nth-child(3) {
  animation-delay: 90ms;
}
.job-card:nth-child(4), .team-card:nth-child(4), .review-card:nth-child(4),
.history-card:nth-child(4), .nearby-card:nth-child(4), .quick-service-tile:nth-child(4) {
  animation-delay: 135ms;
}
.job-card:nth-child(5), .team-card:nth-child(5), .review-card:nth-child(5),
.history-card:nth-child(5), .nearby-card:nth-child(5), .quick-service-tile:nth-child(5) {
  animation-delay: 180ms;
}
.job-card:nth-child(6), .team-card:nth-child(6), .review-card:nth-child(6),
.history-card:nth-child(6), .nearby-card:nth-child(6), .quick-service-tile:nth-child(6) {
  animation-delay: 225ms;
}

/* Pop de estrellas al calificar (modal de reseña) */

.star-btn.is-filled {
  animation: star-pop 260ms var(--ease-out);
}

@keyframes star-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .job-card,
  .team-card,
  .review-card,
  .history-card,
  .nearby-card,
  .quick-service-tile {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
  .star-btn.is-filled {
    animation: none;
  }
}

/* Modo de vista del perfil de taller — ver script.js. Los controles con
   [data-owner-only] solo los ve el dueño verificado; lo marcado con
   [data-client-only] (pedir servicio, WhatsApp, distancia) se le oculta
   al dueño en su propio panel. */
[data-owner-only].is-hidden,
[data-client-only].is-hidden {
  display: none;
}

/* ==========================================================================
   Nocturne — elevación (fusionado desde nocturne-cliente.css, que era la
   capa piloto de cliente-home.html; ahora aplica a todo el proyecto).
   En un fondo oscuro la elevación es un filo de 1px + oscuridad ambiental,
   nunca sombras pesadas apiladas.
   ========================================================================== */

.vehicle-card,
.map-card,
.nearby-card,
.history-card,
.expenses-card,
.active-order-card,
.job-card,
.team-card {
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Vista cliente v2 (cliente-home.html) — home tipo "Mapa" según el
   prototipo Manito: saludo + buscador + chips de servicio + mapa con pines
   avatar + lista "Cerca tuyo". Las reglas de abajo ganan por cascada a las
   definiciones originales de .quick-services / .nearby-*.
   ========================================================================== */

.home-greet-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Buscador */

.home-search {
  position: relative;
  margin-top: 14px;
}

.home-search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal);
  pointer-events: none;
}

.home-search-input {
  width: 100%;
  min-height: 42px;
  padding: 8px 14px 8px 38px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  caret-color: var(--teal);
  background: var(--surface);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.home-search-input::placeholder {
  color: var(--text-muted);
}

.home-search-input:hover {
  border-color: var(--border-hover);
}

.home-search-input:focus-visible {
  border-color: var(--teal);
  outline: none;
}

/* Catálogo de servicios — cuadrícula 4×4 fija: los 14 tipos se ven de una
   vez, sin scroll horizontal. */

.quick-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.quick-service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 4px 10px;
  border-radius: 14px;
}

.quick-service-icon {
  display: flex;
  align-items: center;
  color: var(--teal-300);
}

.quick-service-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.quick-service-label {
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--text);
}

/* En la cuadrícula, la etiqueta "Pronto" va en la esquina del tile. */
.quick-service-tile .soon-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 7.5px;
  padding: 1px 5px;
}

/* Mapa */

.map-card {
  margin-top: 16px;
}

.map-visual .leaflet-control-attribution,
.map-visual .leaflet-control-attribution a {
  background: rgba(22, 24, 38, 0.8);
  color: var(--text-muted);
}

.map-pin-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.map-user-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(145, 132, 217, 0.35);
}

/* Lista "Cerca tuyo" */

.nearby-eyebrow {
  display: block;
  margin-top: 22px;
  color: var(--text-muted);
}

.nearby-list {
  margin-top: 10px;
}

.nearby-card {
  align-items: flex-start;
}

.nearby-avatar {
  border-radius: 50%;
  color: #fff;
}

.nearby-avatar.av-1 { background: var(--teal-800); }
.nearby-avatar.av-2 { background: #5d5294; }
.nearby-avatar.av-3 { background: #796cbf; }

.nearby-rating {
  font-size: 12px;
  color: var(--teal-300);
  margin-top: 2px;
}

.nearby-specs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.nearby-spec {
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
}

/* Mismos .tipo-negocio-badge del perfil del taller (mismo ícono = mismo
   significado en todo el sitio) pero alineados a la izquierda, no
   centrados como en la cabecera del perfil — acá conviven con nombre,
   rating y dirección que también van a la izquierda. */
.nearby-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.nearby-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  font-size: 11px;
}

.nearby-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.gastos-eyebrow {
  display: block;
  margin-top: 26px;
}

/* Asistente de diagnóstico (Mecánica General) — opciones grandes y
   claras, pensadas para responder sin saber de mecánica. */

.diag-step.is-hidden {
  display: none;
}

.diag-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diag-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.diag-option:hover {
  border-color: var(--teal);
  background: var(--teal-dim);
}

.diag-option-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.diag-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.diag-option-text strong {
  font-weight: 500;
  font-size: 14px;
}

.diag-option-text small {
  font-size: 12px;
  color: var(--text-muted);
}

.diag-back {
  margin-top: 14px;
}

/* Paso de modalidad: precio a la derecha, chip "Recomendado" y estado
   seleccionado (para la cita, que espera día y hora). */

.diag-option.is-selected {
  border-color: var(--teal);
  background: var(--teal-dim);
}

.diag-option-price {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--teal-300);
  white-space: nowrap;
}

.diag-option-price.is-free {
  font-weight: 400;
  color: var(--text-muted);
}

.diag-reco {
  display: inline-block;
  margin-left: 7px;
  vertical-align: middle;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--teal-800);
  color: var(--teal-100);
}

.diag-cita {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.diag-cita.is-hidden {
  display: none;
}

.diag-cita-continuar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

/* Equipo v2 — acciones del dueño sobre cada colaborador */

.team-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.team-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms var(--ease);
}

.team-action-btn:hover {
  border-color: var(--border-hover);
}

/* Botón de acción destructiva — delineado en el tinte de urgencia. */
.btn-danger {
  background: transparent;
  color: var(--tomato);
  border: 1px solid var(--tomato);
}

.btn-danger:hover {
  background: var(--tomato-dim);
}

[data-colab-acceso].is-hidden {
  display: none;
}

/* Estadísticas del taller (perfil-taller.html, pestaña Estadísticas) */

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stats-tiles-2 {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 10px;
}

.stats-mes {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.stats-block {
  margin-top: 26px;
}

.stats-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.stats-bar-row .trust-bar-head {
  margin-bottom: 5px;
}

.stats-note {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Pagos y garantía */

.pagos-proximo {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.pagos-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.pagos-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.pagos-item-info {
  flex: 1;
  min-width: 0;
}

.pagos-item-name {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagos-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.pagos-item-monto {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
}

/* Nota de garantía (mi-orden.html, seguimiento del cliente) */

.garantia-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-800);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}

.garantia-note.is-hidden {
  display: none;
}

.garantia-note.is-vencida {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Nivel del taller v2 — barra única + pasos accionables */

.trust-bar-main {
  margin-top: 12px;
}

.trust-hint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 14px;
}

.trust-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.trust-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
}

.trust-step-mark {
  flex-shrink: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.trust-step.is-done .trust-step-mark {
  color: var(--teal);
}

.trust-step.is-done {
  color: var(--text-muted);
}

/* Recordatorios por placa (home del cliente) */

.reminders-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.reminders-card.is-hidden {
  display: none;
}

.reminders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.reminders-head .eyebrow {
  color: var(--text-muted);
}

.reminders-placa {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-hover);
  background: var(--surface-2);
}

.reminders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reminder-icon {
  font-size: 15px;
  margin-top: 1px;
}

.reminder-title {
  font-size: 13px;
  font-weight: 500;
}

.reminder-detail {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.reminder-item.is-urgent .reminder-title {
  color: var(--amber);
}

.reminders-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reminders-invite {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Selector de zona en el modal de pago */

.pago-zona-select {
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  max-width: 60%;
}

/* Repuestos original vs. alterno (cotización de mi-orden) */

.repuesto-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.repuesto-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.repuesto-option:hover {
  border-color: var(--border-hover);
}

.repuesto-option.is-selected {
  border-color: var(--teal);
  background: var(--teal-dim);
}

.repuesto-option input {
  accent-color: var(--teal);
}

.repuesto-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.repuesto-info strong {
  font-weight: 500;
  font-size: 13px;
}

.repuesto-info small {
  font-size: 11.5px;
  color: var(--text-muted);
}

.repuesto-precio {
  font-weight: 500;
  font-size: 13px;
  color: var(--teal-300);
}

/* Acta de recepción (Nueva orden) */

.acta-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.acta-items.is-hidden {
  display: none;
}

.acta-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.acta-check:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-dim);
}

/* Subtítulo de cada grupo de especialidades del modal "Editar información"
   (Tipo de trabajo / Tipo de aceite / Servicios de lavado…). Los grupos los
   arma script.js según el giro del taller. */
.info-esp-group {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
}

.info-esp-group:first-child {
  margin-top: 0;
}

/* Contenedor de los grupos: apilado vertical, NO flex-wrap — cada grupo trae
   su propio .acta-items horizontal adentro. */
.info-esp-groups {
  display: block;
  margin-top: 8px;
}

/* ── Lista de precios del taller (022_servicios_precio.sql) ─────────────
   Vista pública (pestaña Info del perfil) y selector del cliente al
   reservar cita. */
.precio-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.precio-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.precio-item-nombre {
  font-size: 13px;
  color: var(--text);
}

.precio-item-monto {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
}

.precio-item-giro {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Gestión del dueño, dentro del modal */
.precio-admin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  max-height: 240px;
  overflow-y: auto;
}

.precio-admin-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.precio-admin-texto {
  flex: 1;
  min-width: 0;
}

.precio-admin-form {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.precio-field-nombre {
  flex: 2;
}

.precio-field-monto {
  flex: 1;
}

/* Selector del cliente al reservar: un clic elige servicio Y precio. */
.servicio-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.servicio-picker.is-hidden {
  display: none;
}

.servicio-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}

.servicio-option:hover {
  border-color: var(--border-hover);
}

.servicio-option.is-selected {
  border-color: var(--teal);
  background: var(--teal-dim);
}

.servicio-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.servicio-option-text strong {
  font-size: 13.5px;
  font-weight: 500;
}

.servicio-option-text small {
  font-size: 11.5px;
  color: var(--text-muted);
}

.servicio-option-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
}

/* "No estoy seguro — que me coticen": la salida para lo que sí hay que
   revisar antes de poner precio. Sin monto a la derecha, a propósito. */
.servicio-option.is-quote {
  border-style: dashed;
}

/* Atajos de días del modal de info ("Lun a Vie", "Todos los días"): marcar
   los 6 días de a uno era lo más tedioso del formulario. */
.horario-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

.horario-presets .chip {
  font-size: 12px;
  padding: 5px 12px;
}

/* Vista previa del horario: el mismo texto que verá el cliente en el perfil,
   armado en vivo desde los días y horas (composeHorario en script.js). */
.horario-preview {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.horario-preview-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.horario-preview-value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.horario-preview-value.is-empty {
  font-weight: 400;
  color: var(--text-muted);
}

.acta-check input {
  accent-color: var(--teal);
}

.job-acta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

.job-acta svg {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}

.job-task-price {
  color: var(--teal);
  font-weight: 500;
  font-size: 12px;
  margin-left: auto;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Referidos (perfil del cliente) */

.referral-card {
  margin-top: 22px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--teal-800);
  background: var(--teal-dim);
}

.referral-card .eyebrow {
  color: var(--teal-300);
}

.referral-text {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}

.referral-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.referral-code {
  flex: 1;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed var(--teal);
  /* --teal-100 es casi blanco — pensado para texto sobre un relleno sólido
     de --teal, no sobre este fondo (var(--surface), casi blanco también en
     claro): quedaba invisible, texto claro sobre fondo claro. */
  color: var(--teal-300);
  background: var(--surface);
}

.referral-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Consentimiento LOPDP (registro) */

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.consent-check input {
  margin-top: 2px;
  accent-color: var(--teal);
  flex-shrink: 0;
}

.consent-check a {
  color: var(--teal);
  text-decoration: none;
}

.consent-check a:hover {
  text-decoration: underline;
}

/* Página legal (legal.html) */

.legal {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}

.legal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.legal-header h1 {
  font-size: 24px;
}

.legal-updated {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.legal-block {
  margin-bottom: 26px;
}

.legal-block h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.legal-block p {
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.legal-block ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-block li {
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 85%, transparent);
}

.legal-contact {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Tip educativo del asistente de lubricadora */

.oil-tip {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-800);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

/* Recomendación final */

.diag-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diag-taller {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--teal-800);
}

.diag-taller-name {
  font-weight: 500;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.diag-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.diag-reasons li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.45;
}

.diag-reasons li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 500;
}

.diag-profile-link {
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
}

.diag-profile-link:hover {
  text-decoration: underline;
}

/* Menú del perfil del cliente — icono en losa + etiqueta + chevron */

.profile-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  text-align: left;
  transition: background-color 150ms var(--ease);
}

.profile-menu-item:hover {
  background: rgba(22, 24, 38, 0.05);
}

/* Cuadrado a color sólido + icono blanco encima, con una sombra suave que
   lo despega de la tarjeta — cada fila lleva su propio tono para que se
   distingan de un vistazo. Variedad de TONO dentro de la misma familia
   morada de marca (más los dos semánticos de --verificado/--pendiente),
   no un arcoíris de colores sueltos: Nocturne sigue siendo mono-acento. */
.profile-menu-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(22, 24, 38, 0.14);
}

.profile-menu-icon-historial {
  background: var(--teal);
}

.profile-menu-icon-legal {
  background: var(--teal-800);
}

.profile-menu-label {
  flex: 1;
  font-size: 14px;
}

.profile-menu-chevron {
  opacity: 0.4;
  flex-shrink: 0;
}

/* "Método de pago" (Pronto): deshabilitado de verdad, no solo visualmente
   apagado — mismo tratamiento que .quick-service-tile.is-soon. Conserva su
   color (como las demás filas): la opacidad de la fila entera ya comunica
   "no disponible todavía" sin tener que desaturar el icono aparte. */
.profile-menu-item.is-soon {
  cursor: default;
  opacity: 0.6;
}

.profile-menu-item.is-soon:hover {
  background: none;
}

.profile-menu-icon-disabled {
  /* Uno de los mismos morados decorativos que ya usan los avatares de
     "Cerca tuyo" (.nearby-avatar.av-3) — variedad de tono, no un color nuevo. */
  background: #796cbf;
}

/* Verificaciones: el icono y el texto de estado cambian de color según el
   dato real (email confirmado o no) — ámbar para "pendiente" (mismo tono
   que el resto del sitio, ver .insignia en perfil-taller.html) y verde
   (--exito) para "verificado", el único estado que sí necesita su propio
   color fuera del acento de marca. */
.profile-menu-status {
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.profile-menu-status.is-verificado {
  color: var(--exito);
}

.profile-menu-status.is-pendiente {
  color: var(--amber);
}

.profile-menu-icon.is-verificado {
  background: var(--exito);
}

.profile-menu-icon.is-pendiente {
  background: var(--amber);
}

/* Separador con desvanecido en los extremos — firma Nocturne */

.profile-divider {
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(to right,
    transparent, var(--border) 48px,
    var(--border) calc(100% - 48px), transparent);
}

.profile-switch-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 22px;
  gap: 8px;
  text-decoration: none;
  text-align: center;
}

.profile-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  gap: 8px;
  text-align: center;
}

/* Pago in-app — modal "Confirmar y pagar" (cliente-home.html) */

.pago-resumen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.pago-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.pago-row.is-hidden {
  display: none;
}

.pago-row > span:first-child {
  color: var(--text-muted);
}

.pago-precio {
  font-weight: 500;
  color: var(--teal-300);
}

.pago-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

.pago-card svg {
  color: var(--teal-300);
  flex-shrink: 0;
}

.pago-card-label {
  flex: 1;
  font-size: 13px;
}

.pago-aviso {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Chat in-app con el taller (mi-orden.html) */

.tracking-chat {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
  gap: 8px;
}

.tracking-whatsapp {
  margin-top: 10px;
}

.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg);
}

.chat-overlay.is-hidden {
  display: none;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.chat-peer-name {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-peer-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-bubble {
  max-width: 75%;
  align-self: flex-start;
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  animation: enter 240ms var(--ease-out);
}

.chat-bubble.is-mine {
  align-self: flex-end;
  background: var(--teal-800);
  color: var(--teal-100);
}

.chat-inputbar {
  display: flex;
  gap: 8px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.chat-inputbar .field-input {
  flex: 1;
}

.chat-send {
  flex-shrink: 0;
  width: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Perfil del taller v2 (perfil-taller.html) — presentación tipo prototipo
   Manito: cabecera con volver, identidad centrada, franja de métricas,
   especialidades/certificaciones/"los clientes dicen" y el selector
   "¿Qué necesitás?" con CTA fijo. Todas las funciones anteriores se
   conservan debajo (capacidad, confianza, pestañas).
   ========================================================================== */

.profile {
  padding-bottom: 130px; /* espacio para el CTA fijo */
}

.profile-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 4px;
}

.profile-topbar-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
}

/* Portada del taller: degradado de marca por defecto; con foto subida se
   ve la imagen. El dueño tiene el botón "Cambiar portada". */
.profile-cover {
  position: relative;
  height: 130px;
  margin-top: 10px;
  background: linear-gradient(120deg, var(--teal-dim), var(--surface-2) 60%, var(--teal-dim));
}

.profile-cover.has-photo {
  background-size: cover;
  background-position: center;
}

.cover-edit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  /* Insignia oscura sobre la foto de portada — fija a propósito, NO tokens
     de tema: sobre una foto necesita quedarse oscura con texto claro sin
     importar si el resto de la página está en claro u oscuro. Antes usaba
     var(--text)/var(--border), que en claro son oscuros y el texto casi
     desaparecía contra este mismo fondo oscuro. */
  background: rgba(22, 24, 38, 0.75);
  border: 1px solid rgba(233, 233, 237, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
  backdrop-filter: blur(6px);
}

.cover-edit:hover {
  border-color: var(--teal);
}

.cover-edit.is-hidden {
  display: none;
}

/* Identidad centrada, avatar circular en el acento (solapa la portada) */
.profile-identity {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-top: -42px;
  padding: 0 24px 4px;
  position: relative;
}

.profile-avatar-wrap {
  position: relative;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--teal-800);
  color: #fff;
  font-size: 30px;
}

.profile-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 2px solid var(--bg);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 150ms var(--ease);
}

.avatar-edit:hover {
  background: var(--teal-800);
}

.avatar-edit.is-hidden {
  display: none;
}

.profile-name {
  font-size: 24px;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-identity .profile-meta {
  justify-content: center;
  margin-top: 0;
}

.profile-star {
  color: var(--star);
  font-size: 15px;
}

.profile-stats {
  padding-top: 16px;
}

/* Barra de atención 24/7 (emergencias) — cuando está activa toma el tinte
   de urgencia (tomate, semántico), no el acento. */
.emergency-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 24px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.emergency-icon {
  font-size: 16px;
}

.emergency-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.emergency-bar[data-emergencia="si"] {
  border-color: rgba(255, 107, 74, 0.35);
  background: var(--tomato-dim);
}

.emergency-bar[data-emergencia="si"] .emergency-label {
  color: var(--tomato);
  font-weight: 500;
}

.emergency-toggle {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--teal);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
}

.emergency-toggle:hover {
  text-decoration: underline;
}

.emergency-toggle.is-hidden {
  display: none;
}

/* Bloques de contenido del perfil */
.profile-block {
  padding: 20px 24px 0;
}

.block-eyebrow {
  display: block;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Especialidades en el perfil: relleno tintado del acento (paso 800 +
   texto 100), como las tags del prototipo. */
.profile-block .tag {
  background: var(--teal-800);
  color: var(--teal-100);
}

/* Insignias: medallas ganadas (color, relieve) vs. todavía no (apagadas,
   con candado) — el contraste entre ambas es justamente el incentivo a
   completar equipamiento/certificaciones/atención 24-7 (ver renderBadges
   en script.js, que calcula is-earned a partir de datos reales, no
   decorativos). */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 14px 8px;
}

.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  opacity: 0.42;
}

.badge-tile.is-earned {
  opacity: 1;
}

.badge-tile-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Relleno sólido + ícono blanco cuando la insignia ya se ganó — antes todas
   compartían el mismo tinte morado tenue (--teal-dim), así que costaba
   distinguir una insignia de otra de un vistazo. Cada una tiene su color
   real (ver ACHIEVEMENT_BADGES en script.js), no un arcoíris al azar. */
.badge-tile.is-earned .badge-tile-icon {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(22, 24, 38, 0.14);
}

.badge-tile-icon.is-teal { background: var(--teal); }
.badge-tile-icon.is-teal800 { background: var(--teal-800); }
.badge-tile-icon.is-tomato { background: var(--tomato); }
.badge-tile-icon.is-amber { background: var(--amber); }
.badge-tile-icon.is-star { background: var(--star); }
.badge-tile-icon.is-exito { background: var(--exito); }

.badge-tile-icon svg {
  width: 19px;
  height: 19px;
}

.badge-tile-lock {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.badge-tile.is-earned .badge-tile-lock {
  display: none;
}

.badge-tile-label {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

.badge-tile.is-earned .badge-tile-label {
  color: var(--text);
}

.cert-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

/* Insignia rellena de Certificaciones/Horario/Ubicación — mismo trato que
   .stat-icon-badge y .profile-menu-icon: relleno sólido, ícono blanco
   encima, cada bloque con su propio color en vez de un trazo suelto del
   mismo morado de siempre. */
.cert-icon-badge {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(22, 24, 38, 0.14);
}

.cert-icon-badge.is-teal { background: var(--teal); }
.cert-icon-badge.is-amber { background: var(--amber); }
.cert-icon-badge.is-tomato { background: var(--tomato); }

.cert-text {
  margin: 0;
  line-height: 1.5;
  padding-top: 3px;
}

.say-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.say-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius: 100px;
  border: 1px solid var(--teal);
  color: var(--teal);
}

/* Selector "¿Qué necesitás?" — chips con insignia de icono */
.need-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.need-chips::-webkit-scrollbar {
  display: none;
}

.need-chip.is-hidden {
  display: none;
}

/* Horarios disponibles del modal "Reservar cita" */
.reserva-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reserva-slot-btn {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease);
}

.reserva-slot-btn:hover {
  border-color: var(--border-hover);
}

.reserva-slot-btn.is-selected {
  border-color: var(--teal);
  background: var(--teal-dim);
  color: var(--teal);
}

.need-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--text);
  padding: 6px 13px 6px 6px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), transform 120ms var(--ease);
}

.need-chip:active {
  transform: scale(0.96);
}

.need-chip:hover {
  border-color: var(--border-hover);
}

.need-chip.is-selected {
  border-color: var(--teal);
  background: var(--teal-800);
  color: var(--teal-100);
}

.need-chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
}

/* Categorías "Pronto": apagadas hasta que se activen en el catálogo.
   Aplica a los chips del home y a los del perfil del taller. El atenuado
   va en los hijos (icono y texto) y no en el chip, porque la animación de
   entrada del home termina con fill forwards en opacity 1 y pisaría una
   opacidad puesta directamente sobre el botón. */
.quick-service-tile.is-soon,
.need-chip.is-soon {
  cursor: not-allowed;
}

.quick-service-tile.is-soon .quick-service-icon,
.quick-service-tile.is-soon .quick-service-label,
.need-chip.is-soon .need-chip-badge {
  opacity: 0.45;
}

.need-chip.is-soon {
  color: var(--text-muted);
}

.quick-service-tile.is-soon:hover,
.need-chip.is-soon:hover {
  border-color: var(--border);
}

.soon-badge {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* CTA fijo con desvanecido hacia arriba */
.need-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(22, 24, 38, 0.1);
  z-index: 20;
}

/* Aunque todavía no elegiste un servicio, el botón debe leerse como la
   acción principal de la página — no como algo bloqueado/ignorable. */
.need-cta-bar .btn:disabled {
  opacity: 0.85;
}

.need-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

/* Mientras se comprueba la sesion en cliente-home.html, el panel queda
   oculto: sin esto se alcanzaba a ver un parpadeo de la maqueta con los
   datos de relleno del HTML antes de redirigir a index.html. */
.px-esperando-sesion body {
  visibility: hidden;
}

/* Canje de puntos dentro del bloque de pago (mi-orden.html). El cupon se
   canjea aqui y no en el panel del cliente porque el descuento se topa
   contra la comision de Rodaje en esa orden concreta. */
.puntos-canje {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  border-radius: 12px;
}

.puntos-canje [data-field="pr-recompensas"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ==========================================================================
   `is-hidden` genérico — RED DE SEGURIDAD (agregado el 2026-07-26)
   ==========================================================================
   Hasta ahora este proyecto NO tenía una regla genérica: cada componente
   declaraba la suya (`.btn.is-hidden`, `.payment-card.is-hidden`, …). El
   patrón se rompió en al menos 8 componentes a los que se les olvidó, y como
   `is-hidden` no hacía nada en ellos, quedaban VISIBLES aunque el JS los
   marcara como ocultos. Verificado en el navegador: el desglose de pago
   mostraba "Trabajo —, Cupón —, Total a pagar —" en toda orden sin cupón,
   el canje de puntos y el aviso de solicitud pendiente se veían siempre, y
   el selector de servicio viejo aparecía junto al nuevo.

   Va al FINAL a propósito: tiene la misma especificidad (0,1,0) que las
   reglas de componente que fijan `display`, así que solo gana por orden de
   aparición. Las reglas más específicas que ocultan a propósito
   (`.X.is-hidden`, `[data-owner-only].is-hidden`) siguen funcionando igual.
   ========================================================================== */
.is-hidden {
  display: none;
}