/* ─────────────────────────────────────────────────────────────────────────────
   Creaty · Archivos — estilos propios para FileBrowser (files.creaty.plus)

   Paleta tomada del template de correo aprobado (_Company/brand/email/), que es
   la fuente canonica de la marca. No se inventan tonos nuevos: los grises y los
   estados se derivan de los que ya estaban ahi.

     #9c07ac  morado Creaty (principal)
     #14213d  azul marino (texto y superficies oscuras)
     #1a0a2e  morado casi negro (fondo del login)
     #c4b5d8  lavanda (bordes, apoyos)
     #6b7280  gris de texto secundario
     #faf5ff  morado casi blanco (fondos suaves)

   Solo se toca lo visual. Ninguna regla oculta controles ni cambia el
   comportamiento de la aplicacion.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --creaty-morado: #9c07ac;
  --creaty-morado-oscuro: #7d0589;
  --creaty-navy: #14213d;
  --creaty-tinta: #1a0a2e;
  --creaty-lavanda: #c4b5d8;
  --creaty-gris: #6b7280;
  --creaty-nieve: #faf5ff;

  /* Variables propias de FileBrowser */
  --primaryColor: var(--creaty-morado);
  --blue: var(--creaty-morado);
}

/* ── Pantalla de login ───────────────────────────────────────────────────── */

#login {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(156, 7, 172, 0.35), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(20, 33, 61, 0.55), transparent 55%),
    var(--creaty-tinta);
}

#login .card,
#login form {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(196, 181, 216, 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(26, 10, 46, 0.45);
  padding: 2.25rem 2rem;
}

/* El logotipo entra grande y con aire: es lo primero que se ve.
   El DOM real es `div#login > form > img`, y la hoja de la app le fija un ancho
   de 4rem — por eso hace falta `width` explicito con esa especificidad, no un
   `max-width` suelto, que no agranda nada. Se usa la version oscura del
   logotipo (creaty-logotype, sin sufijo -white): la blanca desaparecia sobre la
   tarjeta clara. */
#login form img {
  width: 200px !important;
  max-width: 70%;
  height: auto;
  margin: 0 auto 1.35rem;
  display: block;
}

/* El h1 repite el nombre que ya dice el logotipo. En vez de competir con el,
   baja a etiqueta discreta: logotipo grande, etiqueta chica, campos. */
#login h1 {
  color: var(--creaty-gris);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  text-align: center;
}

#login input {
  background: var(--creaty-nieve);
  border: 1px solid rgba(196, 181, 216, 0.7);
  border-radius: 9px;
  color: var(--creaty-navy);
  padding: 0.85rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#login input:focus {
  border-color: var(--creaty-morado);
  box-shadow: 0 0 0 3px rgba(156, 7, 172, 0.16);
  outline: none;
}

#login button,
#login .button--block {
  background: var(--creaty-morado);
  border-radius: 9px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85rem 1rem;
  transition: background 0.15s ease, transform 0.05s ease;
}

#login button:hover,
#login .button--block:hover {
  background: var(--creaty-morado-oscuro);
}

#login button:active,
#login .button--block:active {
  transform: translateY(1px);
}

/* El aviso de credenciales incorrectas: rojo legible sobre fondo claro, no un
   bloque de alarma. */
#login .wrong {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  padding: 0.7rem 0.9rem;
}

/* ── Aplicacion ──────────────────────────────────────────────────────────── */

header,
#dropdown,
.dashboard #nav {
  background: var(--creaty-navy);
}

/* El mismo logo.svg se usa en el login (tarjeta blanca) y en la cabecera (azul
   marino). La version oscura es la correcta sobre blanco; aca se pasa a blanco
   con un filtro para que no se pierda sobre el navy. */
header img,
header .logo img {
  filter: brightness(0) invert(1);
}

/* Las carpetas y archivos venian en el azul generico de la aplicacion, que no
   es de la marca. Pasan al morado Creaty. */
#listing .item i,
#listing .item[data-type="dir"] i {
  color: var(--creaty-morado) !important;
}

/* Los archivos, un tono mas apagado para que las carpetas guien la lectura. */
#listing .item[data-type="image"] i,
#listing .item[data-type="video"] i,
#listing .item[data-type="audio"] i,
#listing .item[data-type="pdf"] i,
#listing .item[data-type="text"] i,
#listing .item[data-type="blob"] i {
  color: var(--creaty-lavanda) !important;
}

header .action:hover,
nav .action:hover {
  background: rgba(156, 7, 172, 0.14);
}

/* Seleccion de archivos y elementos activos en morado de marca */
#listing .item[aria-selected="true"],
#listing .item.activebutton {
  background: var(--creaty-morado) !important;
  color: #fff !important;
}

#listing .item[aria-selected="true"] i,
#listing .item[aria-selected="true"] .size,
#listing .item[aria-selected="true"] .modified {
  color: rgba(255, 255, 255, 0.85) !important;
}

.button--flat {
  color: var(--creaty-morado);
}

.button--flat:hover {
  background: rgba(156, 7, 172, 0.1);
}

#progress > div {
  background: var(--creaty-morado);
}

/* Barra de espacio usado del panel lateral — era el ultimo azul generico.
   La pinta el componente vue-simple-progress con estilo en linea, por eso hace
   falta !important; el nombre de la clase salio de inspeccionar el DOM, no de
   suponerlo. */
.vue-simple-progress-bar {
  background-color: var(--creaty-morado) !important;
}

/* Barra de subida y notificaciones */
#popup-notification,
.upload-info {
  border-left: 3px solid var(--creaty-morado);
}