/* Sistema visual de DocVault, portado de la app de escritorio.
   ---------------------------------------------------------------------------
   FUENTE DE VERDAD: src/renderer/styles.css de docvault-app. Los tokens de
   color y la escala tipografica se cambian ALLI primero y se replican aqui.
   Si divergen, manda la app: es donde se auditaron los contrastes.

   Se sirve directa desde public/, sin Vite: el portal nunca ha ejecutado un
   build y no depende de uno para arrancar.
   --------------------------------------------------------------------------- */

/* ── Tipografia ───────────────────────────────────────────────────────────── */
/* Alojada, no traida de Google Fonts: la red del cliente puede no alcanzarla,
   y ese es el mismo motivo por el que la app las empaqueta. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('IBM Plex Sans'), url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('IBM Plex Sans Medium'), url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('IBM Plex Sans SemiBold'), url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('IBM Plex Mono'), url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('IBM Plex Mono Medium'), url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('IBM Plex Mono SemiBold'), url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* ── Paleta ───────────────────────────────────────────────────────────────── */
/* Solo el tema claro. La app tiene ademas un bloque [data-theme="dark"], pero
   el portal no ofrece conmutador, asi que portarlo seria CSS que nunca corre. */

:root {
  color-scheme: light;

  --bg-primary: #f7f8fa;
  --bg-secondary: #f0f2f5;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #e4e7eb;
  --border: #dfe3e8;
  --border-accent: #c4cad1;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #5a6472;

  /* Como texto sobre fondo claro, --accent se queda cerca de 2:1. El texto y
     los iconos usan --accent-text. */
  --accent: #f59e0b;
  --accent-text: #92400e;
  --accent-dim: #fcd34d;
  --accent-glow: rgba(245, 158, 11, 0.16);

  --danger: #b91c1c;
  --danger-dim: #fecaca;
  --danger-on-dim: #991b1b;
  --danger-bg: #fef2f2;
  --danger-fg: #b91c1c;

  --success: #16a34a;
  --success-dim: #bbf7d0;
  --success-bg: #f0fdf4;
  --success-fg: #15803d;

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Unico sitio donde se ajusta el tamano de texto. Nada baja de 11px, y ese
   minimo se reserva a mayusculas con letter-spacing. */
:root {
  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-md:    14px;
  --fs-base:  15px;
  --fs-lg:    17px;
  --fs-xl:    21px;
  --fs-2xl:   23px;
  --fs-3xl:   25px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* A diferencia de la app, aqui no van overflow:hidden ni user-select:none:
   eso son decisiones de ventana de escritorio. En una pagina impedirian
   seleccionar el nombre de un archivo y romperian el scroll. */
html {
  background: var(--bg-primary);
}

/* Columna con el pie al fondo: main se come el espacio sobrante, asi que la
   vitrina queda abajo del todo aunque el contenido sea corto —el caso del
   login— y baja con normalidad cuando el contenido crece. Es lo que evita que
   la cinta flote a media altura en una pantalla alta. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

/* El 1.5 de arriba es para texto corrido. Los controles son de una linea y su
   altura la fija el padding, asi que vuelven a normal para no crecer. */
.btn-primary, .btn-ghost, .input-field, .insignia { line-height: normal; }

h1, h2, h3 { line-height: 1.25; font-weight: 600; }

a { color: var(--accent-text); }
a:hover { color: var(--accent-text); }

.mono { font-family: 'IBM Plex Mono', monospace; }
.oculto { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Un ancho maximo que la app no necesita: su ventana ya lo esta. */
.contenedor {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.cabecera {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin-bottom: 28px;
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.marca svg { color: var(--accent-text); flex-shrink: 0; }

.marca-nombre {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.marca-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  padding-left: 10px;
  margin-left: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.acciones form { display: inline; }

/* ── Controles ────────────────────────────────────────────────────────────── */

.input-field {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.input-field::placeholder { color: var(--text-muted); }
.input-field.mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.05em; }
.input-field:disabled { opacity: 0.4; cursor: not-allowed; }

.select-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.etiqueta {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
a.btn-primary, a.btn-primary:hover { color: #000; text-decoration: none; }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.btn-ghost:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.btn-bloque { width: 100%; }

/* ── Contenedores ─────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.caja-acceso { max-width: 420px; margin: 0 auto; padding: 28px; }

.titulo-seccion { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 4px; }
.sub-seccion { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 22px; }

/* ── Avisos ───────────────────────────────────────────────────────────────── */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid;
  border-radius: 4px;
  padding: 11px 14px;
  font-size: var(--fs-sm);
  margin-bottom: 18px;
}
.aviso svg { flex-shrink: 0; margin-top: 1px; }
.aviso-error { background: var(--danger-bg); border-color: var(--danger-dim); color: var(--danger-fg); }
.aviso-ok { background: var(--success-bg); border-color: var(--success-dim); color: var(--success-fg); }

/* ── Migas ────────────────────────────────────────────────────────────────── */

.migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  font-size: var(--fs-sm);
}
.migas a { color: var(--text-secondary); text-decoration: none; }
.migas a:hover { color: var(--accent-text); text-decoration: underline; }
.migas .actual { color: var(--text-primary); font-weight: 500; }
.migas .sep { color: var(--border-accent); display: flex; }

/* ── Tabla ────────────────────────────────────────────────────────────────── */

.tabla-card { overflow: hidden; }
.tabla-scroll { overflow-x: auto; }

.tabla { width: 100%; border-collapse: collapse; }

.tabla th {
  background: var(--bg-secondary);
  text-align: left;
  padding: 9px 14px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.tabla td {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  vertical-align: middle;
}

.tabla tbody tr:hover { background: var(--bg-secondary); }
.fila-carpeta { cursor: pointer; }
.fila-carpeta:hover { background: var(--accent-glow); }

.celda-nombre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.celda-nombre a { color: inherit; text-decoration: none; font-weight: 500; }
.fila-carpeta:hover .celda-nombre a { color: var(--accent-text); }

/* El idioma de la app para una fila: icono dentro de un cuadro neutro.
   La carpeta es lo unico que lleva acento; los archivos van en neutro y la
   extension la comunica la insignia de texto, no el color. */
.marco-icono {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.marco-icono.carpeta { color: var(--accent-text); }

.nombre-archivo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insignia {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 3px;
  padding: 2px 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.dato-menor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.col-fin { text-align: right; }

/* ── Estado vacio ─────────────────────────────────────────────────────────── */

.vacio {
  text-align: center;
  padding: 72px 24px;
  color: var(--text-muted);
}
.vacio svg { color: var(--border-accent); margin-bottom: 14px; }
.vacio p { font-size: var(--fs-md); }

/* ── Paginas de error ─────────────────────────────────────────────────────── */

.error-pagina {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 0 56px;
}

.error-ilustracion { width: 176px; height: 134px; margin-bottom: 26px; overflow: visible; }
.ilus-trasera { fill: var(--bg-secondary); stroke: var(--border-accent); stroke-width: 1.5; }
.ilus-hoja { fill: var(--bg-card); stroke: var(--border); stroke-width: 1.5; }
.ilus-renglon { fill: none; stroke: var(--border); stroke-width: 3; stroke-linecap: round; }
.ilus-frontal { fill: var(--bg-card); stroke: var(--border-accent); stroke-width: 1.5; }
.ilus-pestana { fill: var(--accent-glow); stroke: var(--accent); stroke-width: 1.5; }
.ilus-codigo {
  fill: var(--accent-text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.ilus-sello { fill: var(--accent); stroke: var(--bg-primary); stroke-width: 4; }
.ilus-sello-icono { color: #000; }

.ilus-hoja-grupo {
  transform-box: fill-box;
  animation: asomar 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes asomar {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ilus-hoja-grupo { animation: none; }
}

.error-codigo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.error-titulo {
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  max-width: 24ch;
  text-wrap: balance;
  margin-bottom: 12px;
}

.error-texto {
  max-width: 54ch;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.error-detalle {
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-text);
}

.error-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.error-ref {
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .error-titulo { font-size: var(--fs-xl); }
  .error-acciones { flex-direction: column; align-self: stretch; }
}

/* ── Vitrina de clientes ──────────────────────────────────────────────────── */
/* Los logos son imagenes que trae cada empresa: proporciones dispares, colores
   propios y fondos que unas veces son transparentes y otras blancos. De ahi la
   tarjeta: da a todos el mismo marco y el mismo fondo, que es lo que permite
   que una fila de logos ajenos se lea como un conjunto. */

/* Sin margenes: el hueco del pie lo pone el padding de .pie, y asi la cinta
   queda centrada en la banda en vez de descolgada hacia arriba. */
.vitrina { margin: 0; }

/* El desvanecido de los bordes es lo que hace que la cinta parezca continuar
   fuera de la pantalla en vez de cortarse en seco. */
.pista {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.rueda {
  display: flex;
  align-items: center;
  width: max-content;
  animation: vitrina-correr var(--vitrina-duracion, 40s) linear infinite;
}
.pista:hover .rueda,
.pista:focus-within .rueda { animation-play-state: paused; }

/* El recorrido lo fija la vista: es 100/copias, es decir exactamente un set.
   Fijarlo aqui en -50% obligaba a que las copias fueran siempre dos, y con
   tres logos eso no llegaba a cubrir el ancho de la pagina. */
@keyframes vitrina-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--vitrina-recorrido, -50%)); }
}

/* Separacion con margin y no con gap: el recorrido equivale a un set exacto, y
   con gap ese reparto cae dentro del hueco entre copias, asi que el bucle da un
   salto visible en cada vuelta. */
.marca-cliente {
  margin-right: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Grande a proposito: el nombre de la empresa se lee dentro de la propia
   imagen, asi que no hay texto al lado que lo rescate si sale pequeño.
   El tope de ancho existe para que un logotipo apaisado no ocupe media cinta
   cuando los demas son discos.

   A color y sin atenuar. Hubo un reposo en gris al 0.75 que se encendia al
   pasar por encima; se quito porque el color de cada marca es parte de lo que
   se viene a ver, y se quito entero: sin el gris, la opacidad sola solo
   deslavaba los colores. */
.marca-cliente img {
  height: 80px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

/* Solo las que tienen direccion web salen como <a>. Hay que anular el color de
   la regla global de enlaces: el nombre se tine segun el estado de la marca, no
   de ambar como el resto de enlaces del portal. */
a.marca-cliente {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}
a.marca-cliente:hover { color: inherit; }

/* Con la cinta en marcha, el foco del teclado tiene que verse sin depender del
   movimiento; el desplazamiento se para solo al enfocar, por :focus-within. */
a.marca-cliente:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

/* Con un solo logo no hay nada que desplazar: queda centrado y quieto. */
.vitrina-fija {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 46px;
}
.vitrina-fija .marca-cliente { margin-right: 0; }

/* Quien pide menos movimiento recibe la misma fila, sin animacion ni recorte. */
@media (prefers-reduced-motion: reduce) {
  .rueda {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: 20px 46px;
  }
  .rueda .marca-cliente { margin-right: 0; }
  .rueda .copia { display: none; }
  .pista { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 640px) {
  .marca-cliente { margin-right: 36px; }
  .marca-cliente img { height: 56px; max-width: 140px; }
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

/* Banda que hace pareja con la cabecera: mismo fondo y un filete, arriba en vez
   de abajo. Sin eso la cinta parecia contenido suelto al final de la pagina en
   lugar de un pie. */
.pie {
  flex-shrink: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

@media (max-width: 640px) {
  .contenedor { padding: 0 16px; }
  .marca-sub { display: none; }
  .oculto-movil { display: none; }
}

/* ── Escaparate del acceso ────────────────────────────────────────────────── */
/* Logos grandes a los lados del formulario; el turno lo lleva login.blade.php.

   O cabe entero o no esta: por debajo del umbral no se encoge, desaparece, y el
   acceso queda como siempre, solo el formulario. Es el caso del movil. */

.acceso {
  /* Lado de la caja de cada logo. Si se cambia, cambiar tambien el umbral del
     @container de abajo. */
  --escaparate-logo: 240px;
  container-type: inline-size;
}

.escaparate { display: none; }

/* Sentido del giro de Perspectiva: hacia el formulario. */
.escaparate-izquierda { --lado: 1; }
.escaparate-derecha { --lado: -1; }

.escaparate-logo {
  --pad: 26px;
  /* Margen del recorte de Revelado para no cortar la sombra. */
  --holgura: 48px;
  grid-area: 1 / 1;
  position: relative;
  padding: var(--pad);
  background: var(--bg-card);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 18px 40px -14px rgba(17, 24, 39, .22);
  /* Invisibles hasta que les toca: las animaciones usan fill-mode both, asi
     que mientras dura su turno la opacidad la pone la animacion. */
  opacity: 0;
}
.escaparate-logo.fijo { opacity: 1; }

.escaparate-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Reflejo de Destello, recortado a la forma del logo con --src. */
.escaparate-brillo {
  position: absolute;
  inset: var(--pad);
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) 95% 0 / 300% 100% no-repeat;
  mix-blend-mode: overlay;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
  opacity: 0;
}

/* EL UMBRAL SALE DE --escaparate-logo: 2 x logo + 420 del formulario + 2 x 32
   de separacion minima. Con 240 da 964; con 200, 884; con 250, 984. Hay que
   ajustarlo a mano porque ni @container ni @media aceptan var(). El techo es
   992, lo que deja .contenedor (1040 menos su padding): un umbral mayor hace
   que el escaparate no salga en ninguna pantalla, y eso pasa con logos de mas
   de 254.

   Container query y no @media: mide el ancho que de verdad queda para la fila,
   sin descontar a ojo el padding ni la barra de desplazamiento. */
@container (min-width: 964px) {
  .acceso-fila {
    display: grid;
    /* El 420 es el max-width de .caja-acceso. */
    grid-template-columns: var(--escaparate-logo) 420px var(--escaparate-logo);
    grid-template-areas: "izquierda acceso derecha";
    column-gap: 32px;
    /* Los logos se van a los bordes, alineados con la marca y las acciones de
       la cabecera, en vez de quedarse pegados al formulario. */
    justify-content: space-between;
    align-items: center;
  }

  .escaparate {
    display: grid;
    grid-template: var(--escaparate-logo) / var(--escaparate-logo);
  }
  .escaparate-izquierda { grid-area: izquierda; }
  .escaparate-derecha { grid-area: derecha; }

  /* margin 0: el auto que la centra fuera de la rejilla, dentro la encoge a lo
     que mide su contenido en vez de llenar la columna. */
  .caja-acceso { grid-area: acceso; margin: 0; }
}

/* ── Animaciones del escaparate ───────────────────────────────────────────── */
/* Cada data-anim debe estar en ROTACION de login.blade.php. */

.escaparate-logo[data-anim="perspectiva"].entra {
  animation: perspectiva-entra 1200ms cubic-bezier(.16, 1, .3, 1) both;
}
.escaparate-logo[data-anim="perspectiva"].sale {
  animation: perspectiva-sale 750ms cubic-bezier(.5, 0, .75, 0) both;
}
@keyframes perspectiva-entra {
  0%   { opacity: 0; transform: perspective(900px) translate3d(0, 22%, -160px) rotateX(40deg) rotateY(calc(var(--lado) * 24deg)); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
}
@keyframes perspectiva-sale {
  from { opacity: 1; transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
  to   { opacity: 0; transform: perspective(900px) translate3d(0, -16%, -120px) rotateX(-28deg) rotateY(calc(var(--lado) * -16deg)); }
}

.escaparate-logo[data-anim="revelado"].entra {
  animation: revelado-cortina-entra 1000ms cubic-bezier(.77, 0, .18, 1) both;
}
.escaparate-logo[data-anim="revelado"].entra img {
  animation: revelado-imagen-entra 1300ms cubic-bezier(.16, 1, .3, 1) both;
}
.escaparate-logo[data-anim="revelado"].sale {
  animation: revelado-cortina-sale 800ms cubic-bezier(.77, 0, .18, 1) both;
}
.escaparate-logo[data-anim="revelado"].sale img {
  animation: revelado-imagen-sale 800ms cubic-bezier(.5, 0, .75, 0) both;
}
@keyframes revelado-cortina-entra {
  from { opacity: 1; clip-path: inset(calc(100% + var(--holgura)) calc(var(--holgura) * -1) calc(var(--holgura) * -1)); }
  to   { opacity: 1; clip-path: inset(calc(var(--holgura) * -1)); }
}
@keyframes revelado-imagen-entra {
  from { transform: translateY(22%) scale(1.1); }
  to   { transform: none; }
}
@keyframes revelado-cortina-sale {
  from { opacity: 1; clip-path: inset(calc(var(--holgura) * -1)); }
  to   { opacity: 1; clip-path: inset(calc(var(--holgura) * -1) calc(var(--holgura) * -1) calc(100% + var(--holgura))); }
}
@keyframes revelado-imagen-sale {
  from { transform: none; }
  to   { transform: translateY(-14%) scale(1.04); }
}

.escaparate-logo[data-anim="destello"].entra {
  animation: destello-entra 900ms cubic-bezier(.16, 1, .3, 1) both;
}
.escaparate-logo[data-anim="destello"].entra .escaparate-brillo {
  animation: destello-barrido 1100ms cubic-bezier(.65, 0, .35, 1) 450ms both;
}
.escaparate-logo[data-anim="destello"].sale {
  animation: destello-sale 650ms cubic-bezier(.5, 0, .75, 0) both;
}
@keyframes destello-entra {
  from { opacity: 0; transform: translateY(9%) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes destello-barrido {
  from { opacity: 1; background-position: 95% 0; }
  to   { opacity: 1; background-position: 5% 0; }
}
@keyframes destello-sale {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6%) scale(.98); }
}