/* ==========================================================================
   Pantalla de entrada de Maquilapp.
   --------------------------------------------------------------------------
   Va en un .css aparte y no dentro del Blade a propósito: Blade interpreta las
   arrobas, y una hoja con `@media` metida en una vista es una trampa esperando
   al siguiente que la edite. Aquí es CSS normal, y además el navegador lo
   guarda en caché.

   El render del troquel tiene fondo BLANCO. Por eso el panel es claro y la
   imagen va con `mix-blend-mode: multiply`: el blanco se multiplica contra el
   panel y desaparece, y sólo queda la pieza. Sobre un panel oscuro se vería un
   recuadro blanco, que es el error obvio aquí.

   No se usan los colores del semáforo (verde, amarillo, rojo, azul) para nada
   decorativo: ya significan algo dentro del sistema y esta pantalla no es sitio
   para enseñárselos con otro sentido.
   ========================================================================== */

:root {
  --ent-acero-claro: #F2F5F8;
  --ent-acero:       #DDE4EB;
  --ent-acero-hondo: #C3CEDA;
  --ent-tinta:       #1B2733;
  --ent-tinta-suave: #5B6B7B;
  --ent-linea:       #CBD5DF;
}

/* ── Estructura: dos mitades ───────────────────────────────────────────── */

.entrada {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Mitad izquierda: el taller ────────────────────────────────────────── */

.entrada-taller {
  align-items: center;
  background:
    radial-gradient(120% 90% at 30% 10%, var(--ent-acero-claro) 0%, var(--ent-acero) 55%, var(--ent-acero-hondo) 100%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 48px;
  position: relative;
}

/* Retícula de plano técnico. Es CSS, no una imagen: no pesa nada. */
.entrada-taller::before {
  background-image:
    linear-gradient(to right, rgba(27, 39, 51, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 39, 51, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  content: '';
  inset: 0;
  position: absolute;
}

/* Viñeta: hunde las esquinas para que la pieza cargue el centro. */
.entrada-taller::after {
  background: radial-gradient(70% 60% at 50% 45%, transparent 40%, rgba(27, 39, 51, .12) 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.entrada-pieza {
  position: relative;
  text-align: center;
  z-index: 1;
}

.entrada-pieza img {
  display: block;
  filter: saturate(.85) contrast(1.06);
  height: auto;
  /* El fondo blanco del render desaparece contra el panel claro. */
  mix-blend-mode: multiply;
  width: min(100%, 620px);
}

.entrada-pie {
  color: var(--ent-tinta-suave);
  font-size: .8125rem;
  letter-spacing: .02em;
  margin: 8px 0 0;
}

.entrada-pie strong {
  color: var(--ent-tinta);
  font-weight: 600;
}

/* ── Mitad derecha: el formulario ──────────────────────────────────────── */

.entrada-acceso {
  align-items: center;
  background: #fff;
  border-left: 1px solid var(--ent-linea);
  display: flex;
  justify-content: center;
  padding: 48px 32px;
}

.entrada-caja {
  max-width: 380px;
  width: 100%;
}

.entrada-marca {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}

/* La marca no es un logo que no tenemos: son unas iniciales en una placa. */
.entrada-placa {
  align-items: center;
  background: var(--ent-tinta);
  border-radius: 10px;
  color: #fff;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  letter-spacing: -.02em;
  width: 40px;
}

.entrada-nombre {
  color: var(--ent-tinta);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
}

.entrada-nombre span {
  color: var(--ent-tinta-suave);
  display: block;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .01em;
  margin-top: 2px;
}

.entrada-caja h1 {
  color: var(--ent-tinta);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 6px;
}

.entrada-caja .entrada-bajada {
  color: var(--ent-tinta-suave);
  margin: 0 0 28px;
}

.entrada-caja .form-label {
  color: var(--ent-tinta);
  font-size: .8125rem;
  font-weight: 500;
}

.entrada-caja .btn-primary {
  font-weight: 600;
  letter-spacing: .01em;
  padding-block: .6rem;
}

.entrada-nota {
  border-top: 1px solid var(--ent-linea);
  color: var(--ent-tinta-suave);
  font-size: .75rem;
  line-height: 1.5;
  margin-top: 32px;
  padding-top: 20px;
}

/* ── Teléfono: el formulario primero, la pieza como cinta arriba ───────── */

@media (max-width: 991.98px) {
  .entrada {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .entrada-taller {
    order: -1;
    padding: 24px 16px;
  }

  .entrada-pieza img { width: min(100%, 320px); }

  .entrada-acceso {
    border-left: none;
    border-top: 1px solid var(--ent-linea);
    padding: 32px 16px 48px;
  }

  .entrada-marca { margin-bottom: 28px; }
}

/* En pantalla muy baja y ancha la pieza estorba más de lo que aporta. */
@media (max-height: 560px) and (min-width: 992px) {
  .entrada-pieza img { width: min(100%, 380px); }
  .entrada-taller { padding: 24px; }
}

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