/**
 * cle_clientes_empresa — estilos de front.
 * Tokens Clearis. Deliberadamente escueto: el módulo se apoya en los estilos
 * del tema y del checkout, solo aporta lo suyo.
 */
:root {
  --cle-empresa-verde: #70a617;
  --cle-empresa-fondo: #eef5e2;
  --cle-empresa-texto: #424242;
  --cle-empresa-borde: #d7e6bf;
  --cle-empresa-blanco: #ffffff;
  --cle-empresa-sombra: 0 2px 8px rgba(66, 66, 66, 0.18);
  --cle-empresa-pill: 999px;
  --cle-empresa-curva: cubic-bezier(0.65, 0, 0.35, 1);
}

.cle-empresa-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--cle-empresa-verde);
  border-radius: 8px;
  background: var(--cle-empresa-fondo);
  color: var(--cle-empresa-texto);
  font-size: 14px;
}

.cle-empresa-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

/* El bloque oculto no debe seguir siendo tabulable. */
.cle-empresa-activa [name$="lastname"],
.cle-empresa-activa [name="lastname"] {
  visibility: hidden;
}

/* Asterisco de obligatorio cuando el tema no da un modelo que copiar. */
.cle-empresa-obligatorio {
  color: #d9534f;
}

/* =====================================================================
   Selector Particular / Empresa (1.2.0)
   Sustituye a la casilla "Soy una empresa", que sigue en el formulario
   (oculta) porque es la que viaja en el POST.

   Estilo de los botones de la tienda (Oficinas Montiel): negro, texto en
   mayúsculas y negrita, esquinas de 8px. La pista negra se desliza bajo la
   opción elegida, que queda como un botón negro; la otra, en blanco.
   Para otra tienda basta con redefinir las variables --cle-tipo-*.
   ===================================================================== */

/* La casilla original y su fila. Con !important: algunos temas fuerzan
   `display` en los grupos de formulario. */
.cle-tipo-cliente-origen,
.cle-tipo-cliente-origen[hidden] {
  display: none !important;
}

.cle-tipo-cliente {
  --cle-tipo-acento: #000000;     /* pista (opción elegida) */
  --cle-tipo-sobre-acento: #ffffff;
  --cle-tipo-tinta: #000000;      /* texto de la opción sin elegir */
  --cle-tipo-fondo: #ffffff;
  --cle-tipo-borde: #000000;
  --cle-tipo-radio: 8px;
  --cle-tipo-alto: 40px;
  --cle-tipo-hueco: 3px;
  --cle-tipo-letra: 13px;
  --cle-tipo-curva: cubic-bezier(0.65, 0, 0.35, 1);

  box-sizing: border-box;
  /* Ocupa la fila entera también dentro de las filas flex de Creative
     Elements y del checkout. */
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 8px 0 12px;
}

.cle-tipo-cliente[hidden] {
  display: none !important;
}

/* Rótulo solo para lectores de pantalla: el selector se explica solo. */
.cle-tipo-cliente__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cle-tipo-cliente__switch {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: var(--cle-tipo-alto);
  padding: var(--cle-tipo-hueco);
  box-sizing: border-box;
  border: 1px solid var(--cle-tipo-borde);
  border-radius: var(--cle-tipo-radio);
  background: var(--cle-tipo-fondo);
}

/* La pista que se desliza bajo la opción elegida. */
.cle-tipo-cliente__pista {
  position: absolute;
  z-index: -1;
  top: var(--cle-tipo-hueco);
  bottom: var(--cle-tipo-hueco);
  left: var(--cle-tipo-hueco);
  width: calc(50% - var(--cle-tipo-hueco));
  border-radius: calc(var(--cle-tipo-radio) - 3px);
  background: var(--cle-tipo-acento);
  transform: translateX(0);
  transition: transform 0.32s var(--cle-tipo-curva);
}

.cle-tipo-cliente.is-empresa .cle-tipo-cliente__pista {
  transform: translateX(100%);
}

.cle-tipo-cliente__opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 12px;
  border-radius: calc(var(--cle-tipo-radio) - 3px);
  color: var(--cle-tipo-tinta);
  font-family: inherit;
  font-size: var(--cle-tipo-letra);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

.cle-tipo-cliente__opcion[aria-checked="true"] {
  color: var(--cle-tipo-sobre-acento);
}

.cle-tipo-cliente__opcion:not([aria-checked="true"]):hover {
  opacity: 0.7;
}

.cle-tipo-cliente__opcion:focus {
  outline: none;
}

.cle-tipo-cliente__opcion:focus-visible {
  outline: 2px solid var(--cle-tipo-tinta);
  outline-offset: 3px;
}

/* --- Registro / datos personales: más pequeño y centrado. --- */
.cle-tipo-cliente--registro {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

.cle-tipo-cliente--registro .cle-tipo-cliente__switch {
  width: 360px;
  max-width: 100%;
}

/* --- Checkout y direcciones: a lo ancho, como las pestañas de la tienda. --- */
.cle-tipo-cliente--checkout {
  margin: 8px 0 12px;
}

/* Al pintarse por primera vez (o tras un repintado del checkout), la pista
   se coloca sin deslizarse. */
.cle-tipo-cliente--quieto .cle-tipo-cliente__pista,
.cle-tipo-cliente--quieto .cle-tipo-cliente__opcion {
  transition: none;
}

/* Campos que aparecen al cambiar de tipo de cliente. */
@keyframes cle-aparece {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cle-aparece {
  animation: cle-aparece 0.25s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .cle-tipo-cliente__pista,
  .cle-tipo-cliente__opcion {
    transition: none;
  }

  .cle-aparece {
    animation: none;
  }
}