/* ============================================================================
 * COMPONENTES — botones, hero, tarjetas, sheets, toasts, skeletons.
 * Requiere tokens.css cargado antes. Sin @import: cada hoja se enlaza por
 * separado desde el HTML para no serializar las descargas.
 * ========================================================================= */

/* --- Botón -----------------------------------------------------------------
 * La animación de pulsación la controla button.js con motion (spring). El CSS
 * solo aporta la transición de color, que no compite con el resorte.
 * ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding-inline: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  cursor: pointer;
  /* Sin esto, un toque rápido en móvil selecciona el texto del botón en
     vez de activarlo. */
  user-select: none;
  touch-action: manipulation;
  will-change: transform;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn--urgent {
  background: var(--urgent-600);
  color: var(--paper);
  box-shadow: var(--shadow-urgent);
}
.btn--urgent:hover { background: var(--urgent-700); }

.btn--primary {
  background: var(--brand-800);
  color: var(--paper);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--brand-900); }

.btn--energy {
  background: var(--energy-400);
  color: var(--brand-950);
  box-shadow: var(--shadow-energy);
}
.btn--energy:hover { background: var(--energy-300); }

.btn--ghost {
  background: transparent;
  color: var(--brand-800);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--brand-800); background: var(--paper-2); }

/* Sobre fondo oscuro el fantasma invierte, o desaparece. */
.section--dark .btn--ghost,
.hero .btn--ghost {
  color: var(--paper);
  border-color: rgb(255 255 255 / 0.3);
}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: var(--paper);
}

/* La acción principal es más alta y más ancha que el resto: la jerarquía se
   ve antes de leer una sola palabra. */
.btn--lg {
  min-height: var(--touch-primary);
  padding-inline: var(--space-8);
  font-size: var(--text-lg);
}

.btn--block { width: 100%; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Hero ------------------------------------------------------------------
 * Lienzo oscuro: aquí vive la sofisticación. El único elemento rojo de la
 * pantalla es el CTA de auxilio, y sobre este fondo profundo salta solo.
 * ------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--brand-950);
  color: var(--paper);
  padding-block: var(--space-16) var(--space-12);
  overflow: hidden;
}

/* Resplandor ámbar detrás del contenido: sugiere corriente eléctrica sin
   recurrir a un icono literal de rayo. Decorativo y barato de pintar. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: 50%;
  top: -30%;
  width: min(120vw, 60rem);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(circle,
    rgb(245 165 36 / 0.16) 0%,
    rgb(245 165 36 / 0.05) 35%,
    transparent 68%);
  pointer-events: none;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 40ch;
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: 800;
}

@media (min-width: 768px) {
  .hero { padding-block: var(--space-24) var(--space-20); }
  .hero__title { font-size: var(--text-4xl); }

  /* En pantalla ancha, 40ch deja el hero desbalanceado: una columna estrecha
     de texto flotando en mucho vacío se lee como plantilla sin terminar.
     El titular gana ancho; la entradilla se queda en medida legible. */
  .hero__inner { max-width: 62ch; }
  .hero__lead  { max-width: 46ch; }
}

/* La palabra clave del titular en ámbar: dirige el ojo al beneficio real
   sin gastar el rojo, que está reservado para la acción. */
.hero__title em {
  font-style: normal;
  color: var(--energy-400);
}

.hero__lead {
  font-size: var(--text-lg);
  color: var(--brand-200);
  letter-spacing: var(--tracking-snug);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (max-width: 520px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* Prueba de confianza bajo el CTA: contrarresta la duda de "¿y si no
   llegan?" justo donde aparece. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--text-sm);
  color: var(--brand-200);
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__trust-item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--energy-400);
  flex-shrink: 0;
}

/* --- Tarjeta ---------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
  /* 2px es suficiente para que se sienta vivo. Más se vuelve saltarín. */
  transform: translateY(-2px);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--energy-100);
  /* brand-900 sobre ámbar claro: energy-600 daba 4.45:1, justo por debajo
     del 4.5 exigido. Los emoji ignoran el color, pero los iconos de texto
     (números de paso, símbolos) sí lo usan. */
  color: var(--brand-900);
  font-size: var(--text-xl);
}

.card__title { font-size: var(--text-lg); font-weight: 700; }
.card__text { color: var(--ink-600); font-size: var(--text-sm); }

/* Tarjeta del segmento premium (BMS/OBD2): fondo oscuro para señalar que es
   otra categoría de servicio, no un producto más del catálogo. */
.card--premium {
  background: var(--brand-900);
  border-color: var(--brand-700);
  color: var(--paper);
}
.card--premium .card__text { color: var(--brand-200); }
.card--premium .card__icon { background: rgb(245 165 36 / 0.15); color: var(--energy-400); }

/* --- Distintivo -------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--energy  { background: var(--energy-100); color: var(--energy-600); }
.badge--success { background: var(--success-100); color: var(--success-600); }

/* Punto latiendo: comunica "atención activa ahora mismo", que es justo la
   duda del cliente a las 2 de la madrugada. */
.badge--live {
  background: rgb(255 255 255 / 0.1);
  color: var(--paper);
}
.badge--live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success-600);
  box-shadow: 0 0 0 0 rgb(21 128 61 / 0.7);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  70%  { box-shadow: 0 0 0 7px rgb(21 128 61 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(21 128 61 / 0); }
}

/* --- Bottom sheet ----------------------------------------------------------
 * El posicionamiento vive aquí; la animación de entrada/salida y el arrastre
 * los controla sheet.js con motion, para que resorte y gesto compartan el
 * mismo motor de física.
 * ------------------------------------------------------------------------- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgb(6 13 24 / 0.55);
  backdrop-filter: blur(2px);
}

.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  background: var(--paper);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  /* Respeta la barra de gestos del iPhone: sin esto el último botón del
     sheet queda bajo el home indicator y es intocable. */
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.sheet__handle {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0;
  cursor: grab;
  touch-action: none;
}

.sheet__handle-bar {
  width: 2.25rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--ink-300);
}

.sheet__body { padding: 0 var(--space-5) var(--space-4); }
.sheet__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }

.hidden { display: none !important; }

/* --- Campo de formulario ---------------------------------------------------- */

.field { display: grid; gap: var(--space-2); }

.field__label { font-size: var(--text-sm); font-weight: 700; }

.field__input {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field__input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgb(44 109 168 / 0.15);
}

.field__error { font-size: var(--text-sm); color: var(--urgent-600); }

/* --- Toast (Sonner) --------------------------------------------------------
 * Se apilan desde abajo; motion.js anima entrada y salida.
 * ------------------------------------------------------------------------- */

.toast-stack {
  position: fixed;
  inset-inline: 0;
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  max-width: 24rem;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: var(--paper);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xl);
}

.toast--success { background: var(--success-600); }
.toast--warning { background: var(--warning-500); }
.toast--urgent  { background: var(--urgent-600); }

/* --- Skeleton (estado de carga) ---------------------------------------------
 * Un esqueleto con la forma del contenido real hace la espera más corta de
 * lo que es; un spinner genérico la hace más larga.
 * ------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg,
    var(--paper-3) 25%, var(--line) 37%, var(--paper-3) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton--text { height: 1em; margin-block: 0.3em; }
.skeleton--title { height: 1.6em; width: 60%; }

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}