/* ============================================================================
   Sistema de diseño — Champion Desk / Traspaso
   ============================================================================
   Todo el aspecto vive acá, en fichas con nombre. Cambiar la marca de un
   concesionario es cambiar el bloque MARCA y nada más: ni una plantilla se
   toca. Por eso los nombres dicen para qué sirve el color, no de qué color es
   (--accion, no --azul).

   Paleta base tomada del CSS de championmotors.com.pa:
     #1C3490  azul de marca (117 usos)      #FA7C22  naranja de acento
     #143250  azul oscuro                   #17222C  casi negro azulado
   ========================================================================= */

:root{
  /* ── MARCA — lo único que cambia por concesionario ───────────────── */
  --marca:        #1C3490;
  --marca-clara:  #2A47B4;
  --marca-honda:  #16296F;
  --acento:       #FA7C22;
  --acento-clara: #FC9715;

  /* ── superficies, de la más honda a la más alta ──────────────────── */
  --fondo:  #0B1120;
  --sup-1:  #121B2C;
  --sup-2:  #1A2537;
  --sup-3:  #233046;
  --linea:  #22304A;
  --linea-2:#334560;

  /* ── texto, por jerarquía ────────────────────────────────────────── */
  --tx:   #EEF2F8;
  --tx-2: #B6C2D4;
  --tx-3: #7C8AA0;
  --tx-4: #5A6879;

  /* ── estados ─────────────────────────────────────────────────────── */
  --accion:      #4E79E8;
  --accion-suave:#141F3D;
  --ok:   #34D399;  --ok-fondo:  #0E2A20;
  --aviso:#FA7C22;  --aviso-fondo:#2E1A0B;
  --error:#F87171;  --error-fondo:#2C1414;

  /* ── forma ───────────────────────────────────────────────────────── */
  --radio:   14px;
  --radio-g: 18px;
  --radio-p: 11px;

  /* ── profundidad ─────────────────────────────────────────────────── */
  --sombra-1: 0 1px 2px rgba(0,0,0,.35);
  --sombra-2: 0 2px 4px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.75);
  --sombra-3: 0 4px 10px rgba(0,0,0,.34), 0 18px 44px -18px rgba(0,0,0,.85);
  --brillo:   0 0 0 3px rgba(78,121,232,.18);

  /* ── movimiento ──────────────────────────────────────────────────── */
  /* Rápido para lo que se toca, lento para lo que solo se mira. Nada por
     encima de 350ms: pasado ese punto se siente lento, no elegante. */
  --v-rapida: 120ms;
  --v-media:  190ms;
  --v-lenta:  340ms;
  --curva:      cubic-bezier(.4,0,.2,1);
  --curva-suave:cubic-bezier(.34,1.2,.64,1);

  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

/* ── El fondo ────────────────────────────────────────────────────────
   Dos halos muy tenues del azul de marca, arriba y abajo, sobre el fondo
   hondo. Fijos al viewport para que no se muevan al hacer scroll: un
   degradado que acompaña el scroll marea y distrae de lo que se lee. */
body{
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(28,52,144,.30) 0%, transparent 62%),
    radial-gradient(90% 55% at 88% 108%, rgba(250,124,34,.07) 0%, transparent 60%),
    var(--fondo);
  background-attachment: fixed;
  color: var(--tx);
}

/* ── Botones ─────────────────────────────────────────────────────────
   Se levantan al pasar por encima y se hunden al tocarlos. El hundido dura
   menos que el levantado a propósito: así el toque se siente inmediato y el
   regreso, suave. */
.btn{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--marca-clara) 0%, var(--marca) 100%);
  color:#fff; border:0; box-shadow: var(--sombra-1);
  transition: transform var(--v-rapida) var(--curva),
              box-shadow var(--v-media) var(--curva),
              filter var(--v-media) var(--curva);
}
.btn:hover{ filter:brightness(1.1); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.btn:active{ transform: translateY(1px) scale(.994); box-shadow: var(--sombra-1);
             transition-duration: 60ms; }
.btn[disabled]{ opacity:.4; filter:grayscale(.35); pointer-events:none; box-shadow:none; }

.btn.sec{ background: var(--sup-2); color: var(--tx); border:1px solid var(--linea-2); }
.btn.sec:hover{ background: var(--sup-3); filter:none; }

/* El destello que recorre el botón al tocarlo: confirma el toque sin sonido
   ni vibración, que es lo que hace falta en el patio con ruido. */
.btn::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%); pointer-events:none;
}
.btn:active::after{ animation: destello 520ms var(--curva); }
@keyframes destello{ to{ transform: translateX(120%); } }

/* ── Tarjetas que se pueden tocar ────────────────────────────────── */
.accion, .auto{
  transition: transform var(--v-rapida) var(--curva),
              border-color var(--v-media) var(--curva),
              box-shadow var(--v-media) var(--curva),
              background var(--v-media) var(--curva);
}
.accion:hover, .auto:hover{ transform: translateY(-2px); box-shadow: var(--sombra-2); }
.accion:active, .auto:active{ transform: translateY(0) scale(.99); transition-duration: 60ms; }

.accion.pri{
  background: linear-gradient(135deg, var(--marca-clara) 0%, var(--marca) 62%, var(--marca-honda) 100%);
  border-color: rgba(255,255,255,.12); color:#fff; box-shadow: var(--sombra-2);
}
.accion.pri:hover{ box-shadow: var(--sombra-3); }

/* ── Campos ──────────────────────────────────────────────────────── */
input, select, textarea{
  transition: border-color var(--v-rapida) var(--curva),
              box-shadow var(--v-rapida) var(--curva),
              background var(--v-rapida) var(--curva);
}
input:focus, select:focus, textarea:focus{
  border-color: var(--accion); box-shadow: var(--brillo); background: var(--sup-2);
}

/* ── Entrada de la página ────────────────────────────────────────
   Un solo movimiento corto al cargar. Sin escalonar por elemento: en una
   herramienta que se abre cincuenta veces al día, eso cansa. */
.env{ animation: entrar var(--v-lenta) var(--curva-suave) both; }
@keyframes entrar{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

/* La barra de avance corre suave; es lo que dice que se está progresando. */
.avance i{ transition: width var(--v-lenta) var(--curva); }

/* ── Accesibilidad ───────────────────────────────────────────────── */
:focus-visible{ outline: 2px solid var(--accion); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .env{ animation:none; }
}