/* ============================================================================
   carga.css - Pantalla de carga y pie de Astra para Obradores CRM
   ----------------------------------------------------------------------------
   Va despues de vidrio.css y usa sus tokens (--marca, --acento, --font-marca).
   Si se quita el <link>, el panel vuelve a arrancar como antes: el splash lo
   crea js/carga.js y sin estos estilos no se ve nada raro, solo no aparece.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Splash */
.carga {
  position: fixed;
  inset: 0;
  z-index: 10100;              /* por encima de #auth-wrapper, que usa 10000 */
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(90% 70% at 12% -12%,
      color-mix(in oklab, var(--marca, #0F5132) 30%, #ffffff 70%) 0%, transparent 55%),
    radial-gradient(60% 50% at 100% 110%,
      color-mix(in oklab, var(--acento, #128C7E) 18%, transparent), transparent 60%),
    linear-gradient(158deg,
      color-mix(in oklab, var(--marca, #0F5132) 92%, #ffffff) 0%,
      color-mix(in oklab, var(--marca, #0F5132) 78%, #0A1410) 42%,
      color-mix(in oklab, var(--marca, #0F5132) 42%, #060A08) 100%);
  transition: opacity .6s ease, visibility .6s;
}

/* Haces de luz diagonales, muy suaves */
.carga::before,
.carga::after {
  content: "";
  position: absolute;
  top: -30%;
  width: 38vw;
  height: 160%;
  pointer-events: none;
  /* Mas bajos que antes: desde que el fondo lleva burbujas, los haces eran
     dos cosas compitiendo por el mismo sitio. Ahora solo dan profundidad. */
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  filter: blur(26px);
  transform: rotate(24deg);
}
.carga::before { left:  8%; animation: cargaHaz 14s ease-in-out infinite alternate; }
.carga::after  { left: 30%; width: 18vw; opacity: .7;
                 animation: cargaHaz 18s ease-in-out infinite alternate-reverse; }
@keyframes cargaHaz {
  from { transform: rotate(24deg) translateX(-4vw); }
  to   { transform: rotate(24deg) translateX(6vw); }
}

.carga canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.carga-centro {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}

.carga-disco {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 18px 50px -12px rgba(0,0,0,.35),
    0 0 0 10px rgba(255,255,255,.08),
    0 0 80px 10px color-mix(in oklab, var(--marca, #0F5132) 45%, transparent);
  animation: cargaRespira 3.2s ease-in-out infinite;
}
/* El logo llena el disco y se recorta en circulo. Va asi para que el logo
   generico (y manana el de cada cliente) no se vea como una pegatina
   cuadrada dentro de un circulo. */
.carga-disco { overflow: hidden; }
.carga-disco img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
@keyframes cargaRespira {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 18px 50px -12px rgba(0,0,0,.35),
             0 0 0 10px rgba(255,255,255,.08), 0 0 60px 6px color-mix(in oklab, var(--marca, #0F5132) 40%, transparent); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 18px 50px -12px rgba(0,0,0,.35),
             0 0 0 16px rgba(255,255,255,.05), 0 0 100px 16px color-mix(in oklab, var(--marca, #0F5132) 55%, transparent); }
}

.carga-nombre {
  font-family: var(--font-marca, Georgia, serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  margin: 4px 0 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.carga-estado { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); }

.carga-progreso {
  width: 120px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.carga-progreso i {
  display: block; width: 40%; height: 100%; border-radius: inherit;
  background: rgba(255,255,255,.85);
  animation: cargaProgreso 1.4s ease-in-out infinite;
}
@keyframes cargaProgreso {
  from { transform: translateX(-110%); }
  to   { transform: translateX(260%); }
}

.carga-pie {
  position: absolute; z-index: 1; left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 0 16px; text-align: center;
  font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.72);
}

.carga--fuera { opacity: 0; visibility: hidden; }
.carga--fuera .carga-centro { transform: scale(1.04); transition: transform .6s ease; }

@media (prefers-reduced-motion: reduce) {
  .carga::before, .carga::after, .carga-disco, .carga-progreso i { animation: none; }
}

/* ------------------------------------------------- 2. Pie dentro del panel */
/* Franja fina al final del area de contenido. Para que no tape nada, .view
   deja 32 px libres por abajo: es la unica medida que se toca del panel. */
/* OJO: .view lleva 'inset: 0' Y 'height: 100%'. Con top, bottom y height a la
   vez, el navegador IGNORA bottom, asi que poner solo 'bottom: 32px' no hacia
   ningun hueco: la vista seguia midiendo el alto entero y, con z-index 10,
   tapaba el pie y se comia sus clics. Hay que recortar tambien la altura. */
.view-container .view { bottom: 32px; height: calc(100% - 32px); }

.pie-astra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  /* Sobre el degradado del fondo, --text-muted se quedaba casi invisible */
  color: color-mix(in oklab, var(--marca, #0F5132) 72%, #5b6b63);
  background: linear-gradient(to top,
              color-mix(in oklab, #ffffff 86%, transparent),
              color-mix(in oklab, #ffffff 40%, transparent) 70%,
              transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  z-index: 11;
}
[data-theme="dark"] .pie-astra {
  color: #8FB9A4;
  background: linear-gradient(to top, rgba(11,20,26,.88), rgba(11,20,26,.4) 70%, transparent);
}
.pie-astra .firma {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pie-astra img { opacity: .9; flex: none; }
.pie-astra a {
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding: 2px 4px;
  white-space: nowrap;
}
.pie-astra a:hover { color: var(--marca-oscura, #0b3a24); text-decoration: underline; }
.pie-sep { opacity: .5; }
[data-theme="dark"] .pie-astra a:hover { color: #9BE7C4; }

/* En movil el menu ya es la barra inferior: el pie no cabe y estorbaria */
@media (max-width: 768px) {
  .pie-astra { display: none; }
  .view-container .view { bottom: 0; height: 100%; }
}

/* ============================================================================
   3. Acceso - mismo esquema que el panel de Silvia, con el verde de Obradores
   ----------------------------------------------------------------------------
   El marcado ya era el mismo (foto a la izquierda, tarjeta a la derecha), asi
   que esto es solo estilo: no se toca el index.html ni auth.js.
   El duotono se consigue con backdrop-filter sobre .login-hero-overlay, que
   desatura la foto que tiene debajo, y encima va el tinte verde. Asi no hay
   que repetir la URL de la imagen en ningun sitio.
   ========================================================================== */

/* ---- Izquierda: foto en duotono verde ---- */
.login-hero { background-color: #081A11; }

.login-hero-overlay {
  -webkit-backdrop-filter: grayscale(.92) contrast(1.08) brightness(1.34);
  backdrop-filter: grayscale(.92) contrast(1.08) brightness(1.34);
  background:
    linear-gradient(90deg, rgba(5,22,13,.60) 0%, rgba(5,22,13,.20) 55%, rgba(5,22,13,0) 82%),
    linear-gradient(180deg, rgba(5,22,13,.08) 0%, rgba(5,22,13,.46) 100%),
    color-mix(in oklab, var(--marca, #0F5132) 36%, transparent);
}

.login-hero-content { padding: 52px 56px; }
.login-hero-logo { width: 150px; height: auto; border-radius: 0; filter: brightness(0) invert(1); }

.login-hero-text h1 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-shadow: 0 2px 24px rgba(0,0,0,.3);
}
.login-hero-text p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 34ch;
  color: rgba(255,255,255,.86);
  margin: 0;
}

/* Chips de secciones, los pone js/carga.js */
.login-chips {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
.login-chips span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.login-hero-domain {
  font-size: 13.5px; letter-spacing: .01em; color: rgba(255,255,255,.72);
}

/* ---- Derecha: panel oscuro con tarjeta de vidrio ---- */
.login-panel {
  position: relative;
  background:
    radial-gradient(60% 45% at 100% 0%,  color-mix(in oklab, var(--marca, #0F5132) 30%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 100%,  color-mix(in oklab, var(--acento, #128C7E) 18%, transparent), transparent 70%),
    #0B140F;
  color: #E9EDEF;
}

.login-panel-inner {
  position: relative;
  width: min(430px, 100%);
  padding: 34px 32px 30px;
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 42%),
              rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 30px 70px -30px rgba(0,0,0,.8);
}

.login-panel-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.login-panel-logo {
  width: 46px; height: 46px; border-radius: 13px; object-fit: contain;
  background: #fff; padding: 5px; flex: none;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
.login-panel-brand > span {
  font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2;
}
/* Subtitulo bajo el nombre, lo pone js/carga.js.
   Lleva el selector completo a proposito: style.css define
   '.login-panel-brand span { color: var(--text-dark) }', que con el tipo de
   elemento pesa mas que una clase sola y dejaba el texto en azul oscuro. */
.login-panel-brand span.login-panel-marca {
  display: block; font-size: 12.5px; font-weight: 500;
  color: rgba(233,237,239,.6); margin-top: 1px;
}

.login-panel-title {
  font-size: clamp(26px, 3vw, 32px); font-weight: 700; color: #fff;
  letter-spacing: -.02em; margin: 0 0 8px;
}
.login-panel-sub { color: rgba(233,237,239,.66); font-size: 15px; margin: 0 0 22px; }

/* Fila de garantias al pie del panel, la pone js/carga.js */
.login-garantias {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 22px;
  font-size: 12.5px; color: rgba(233,237,239,.6);
}
.login-garantias span { display: inline-flex; align-items: center; gap: 7px; }
.login-garantias a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.login-garantias a:hover { color: #9BE7C4; }
.login-garantias svg { opacity: .75; }

@media (max-width: 900px) {
  .login-hero-content { padding: 34px 26px; }
  .login-chips { display: none; }

  /* OJO: .login-panel es un flex en FILA (style.css:159). Al quitarle a las
     garantias el position:absolute se convertian en un SEGUNDO elemento de esa
     fila: se colocaban a la derecha de la tarjeta y la dejaban en 188 px, con
     el boton de Google y el campo de correo cortados. En columna caen debajo,
     que es su sitio. */
  .login-panel { flex-direction: column; justify-content: center; }
  .login-garantias {
    position: static;
    margin-top: 22px;
    gap: 14px;
    width: min(430px, 100%);
    flex: none;            /* que no se estire ni se encoja con la tarjeta */
  }
}

/* ---- El acceso en el movil: la foto arriba, la tarjeta debajo ----
   style.css esconde la foto en el movil en DOS sitios (lineas 217 y 1471) y
   deja el formulario solo sobre fondo plano. En el panel de Silvia la foto se
   queda arriba como banda y la tarjeta cae debajo, que es lo que se espera de
   una pantalla de acceso: primero sabes donde estas y luego entras.

   Al apilar, el contenido pasa de 100vh, asi que el envoltorio tiene que poder
   desplazarse: .auth-wrapper es position:fixed con overflow:hidden y sin esto
   el boton de Continuar se queda por debajo del borde en las pantallas cortas.
   El dvh va despues del vh a proposito, como respaldo para los navegadores
   viejos: en el movil la barra de direcciones se traga parte del vh. */
@media (max-width: 768px) {
  .auth-wrapper {
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .login-hero {
    display: flex;
    flex: none;
    min-height: 44vh;
    min-height: 44dvh;
  }
  .login-hero-content { padding: 26px 22px 20px; }
  .login-hero-logo { width: 126px; }
  .login-hero-text h1 {
    font-size: clamp(27px, 8.4vw, 38px);
    margin-bottom: 10px;
  }
  .login-hero-text p { font-size: 14.5px; max-width: 30ch; }

  /* Los chips vuelven: en vertical hay sitio de sobra y son lo que cuenta de
     un vistazo que hay dentro. El que los esconde es el bloque de 900 px, que
     es para la franja estrecha de tablet, donde la foto sigue a la izquierda
     y mide 58% del ancho. */
  .login-chips { display: flex; gap: 8px; margin-top: 18px; }
  .login-chips span { padding: 6px 12px; font-size: 12.5px; }

  .login-hero-domain { margin-top: 16px; font-size: 12.5px; }

  .login-panel { flex: none; padding: 30px 24px 34px; }
}

/* ============================================================================
   4. El formulario de Clerk dentro de la tarjeta
   ----------------------------------------------------------------------------
   Clerk pinta su propia tarjeta blanca, y dentro de la nuestra, oscura, queda
   una caja dentro de otra. Esto la deja plana y transparente, para que se vea
   un solo formulario.

   Las clases cl-* son las estables que publica Clerk (las mismas que acepta
   appearance.elements). Van con el id delante a proposito: Clerk inyecta sus
   estilos al montar, despues de esta hoja, y con la clase sola ganaria el.
   Son dos ids porque segun version pinta en nuestro hueco (#login-container)
   o en un contenedor suyo al final del body (#clerk-components).

   Si Clerk cambiase esos nombres, lo unico que pasa es que vuelve a salir su
   tarjeta blanca: no se rompe el acceso.
   ========================================================================== */

/* La caja: sin fondo, sin borde, sin sombra y a todo el ancho */
:is(#login-container, #clerk-components) .cl-rootBox,
:is(#login-container, #clerk-components) .cl-cardBox,
:is(#login-container, #clerk-components) .cl-card,
:is(#login-container, #clerk-components) .cl-main,
:is(#login-container, #clerk-components) .cl-form {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
#login-container, #login-container.cl-rootBox { display: block !important; width: 100% !important; }

:is(#login-container, #clerk-components) .cl-cardBox,
:is(#login-container, #clerk-components) .cl-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* La cabecera sobra: el titulo y el subtitulo ya los pone el panel */
:is(#login-container, #clerk-components) .cl-header { display: none; }

/* Google en blanco aunque la tarjeta sea oscura: es como lo reconoce la gente,
   y asi el logo de color se ve */
:is(#login-container, #clerk-components) .cl-socialButtonsBlockButton,
:is(#login-container, #clerk-components) .cl-socialButtonsIconButton {
  height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #fff;
  color: #13262A;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
:is(#login-container, #clerk-components) .cl-socialButtonsBlockButton *,
:is(#login-container, #clerk-components) .cl-socialButtonsBlockButtonText { color: #13262A; }
:is(#login-container, #clerk-components) .cl-socialButtonsBlockButton:hover {
  background: #F2F4F3;
  border-color: #F2F4F3;
}

/* Separador y etiquetas sobre fondo oscuro */
:is(#login-container, #clerk-components) .cl-dividerLine { background: rgba(255,255,255,.14); }
:is(#login-container, #clerk-components) .cl-dividerText { color: rgba(233,237,239,.55); font-size: 13px; }
:is(#login-container, #clerk-components) .cl-formFieldLabel {
  color: rgba(233,237,239,.82); font-size: 14px; font-weight: 600;
}
:is(#login-container, #clerk-components) .cl-formFieldHintText,
:is(#login-container, #clerk-components) .cl-formFieldInfoText { color: rgba(233,237,239,.5); }

/* El campo */
:is(#login-container, #clerk-components) .cl-formFieldInput,
:is(#login-container, #clerk-components) .cl-otpCodeFieldInput {
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #E9EDEF;
  box-shadow: none;
}
:is(#login-container, #clerk-components) .cl-formFieldInput::placeholder { color: rgba(233,237,239,.38); }
:is(#login-container, #clerk-components) .cl-formFieldInput:focus,
:is(#login-container, #clerk-components) .cl-otpCodeFieldInput:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--acento, #128C7E) 70%, #fff);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--acento, #128C7E) 28%, transparent);
  background: rgba(255,255,255,.09);
}

/* El boton de continuar, en el verde de la marca */
:is(#login-container, #clerk-components) .cl-formButtonPrimary {
  height: 50px;
  border-radius: 12px;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--acento, #128C7E) 86%, #fff),
              var(--acento, #128C7E));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 16px 30px -16px color-mix(in oklab, var(--acento, #128C7E) 90%, transparent);
}
:is(#login-container, #clerk-components) .cl-formButtonPrimary:hover { filter: brightness(1.05); }

/* Enlaces y pie */
:is(#login-container, #clerk-components) .cl-footerActionText { color: rgba(233,237,239,.55); }
:is(#login-container, #clerk-components) .cl-footerActionLink,
:is(#login-container, #clerk-components) .cl-formResendCodeLink,
:is(#login-container, #clerk-components) .cl-alternativeMethodsBlockButton {
  color: #9BE7C4;
  font-weight: 600;
}
/* "Secured by Clerk" se queda, pero discreto: es suyo y no se quita */
:is(#login-container, #clerk-components) .cl-footer,
:is(#login-container, #clerk-components) .cl-internal-piyvrh {
  background: transparent;
  border: 0;
  padding: 14px 0 0;
  opacity: .62;
}
:is(#login-container, #clerk-components) .cl-footer > * { background: transparent; border: 0; }

/* La pegatina "Last used" se sale del boton y aqui no aporta nada */
:is(#login-container, #clerk-components) [class*="lastAuthenticationStrategy"],
:is(#login-container, #clerk-components) [class*="LastAuthenticationStrategy"] { display: none !important; }