/*
Tokens de marca de Quantum Qwerty (docs/saas-context/BRANDING.md) - no
introducir colores fuera de esta paleta sin decision documentada.
*/
:root {
  --qq-purple: #5A1B84;
  --qq-navy: #014276;
  --qq-pink: #E8A9D8;
  --qq-teal: #76D7D9;
  --qq-neutral: #EAE7E5;
  --qq-navy-dark: #011f30;
  --qq-purple-dark: #1b1140;
  --qq-purple-deep: #3a1458;
}

/*
Tipografia real de marca (BRANDING.md #2): mismos nombres de familia que
el sitio de marketing (main.css) para que ambos productos se sientan del
mismo dueño. Geometr212-heavy en titulos principales, Geometr212-book en
subtitulos, Montserrat-regular en cuerpo de texto.
*/
@font-face {
  font-family: 'Geometr212-heavy';
  src: url('../font/Geometr212-BkCn-BT-Heavy.ttf');
}

@font-face {
  font-family: 'Geometr212-book';
  /* El nombre de archivo real trae un espacio antes de "BT-Book" - se
     referencia tal cual, con el espacio url-encodeado. */
  src: url('../font/Geometr212-BkCn%20BT-Book.ttf');
}

@font-face {
  font-family: 'Montserrat-regular';
  src: url('../font/Montserrat-Regular.ttf');
}

h1, h2, h3 {
  font-family: 'Geometr212-heavy', sans-serif;
}

h4, h5, h6 {
  font-family: 'Geometr212-book', sans-serif;
}

p {
  font-family: 'Montserrat-regular', sans-serif;
}

/*
Footer siempre al fondo (patron "sticky footer"): body como columna flex
de altura minima 100vh, <main> crece para llenar el espacio sobrante
(flex: 1 0 auto) y empuja <footer> hasta el borde inferior del viewport
cuando el contenido de la pagina es corto (ej. un panel recien creado sin
identidad de marca todavia) - sin esto el footer quedaba pegado justo
debajo del contenido, a media pantalla, en vez de al fondo real.
*/
html, body {
  height: 100%;
}

body {
  background: linear-gradient(135deg, var(--qq-navy-dark) 0%, var(--qq-purple-dark) 55%, var(--qq-purple-deep) 100%);
  color: var(--qq-neutral);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat-regular', sans-serif;
}

main {
  flex: 1 0 auto;
}

/*
Animate.css es el motion language validado del sitio de marketing
(BRANDING.md regla 7) - se usa solo para fades de entrada monotonos
(fadeIn/fadeInUp), nunca rebote (regla 6). prefers-reduced-motion no es
opcional (regla 5): esto deja el estado final visible de inmediato sin
animar, para cualquier clase .animate__animated que se agregue.
*/
@media (prefers-reduced-motion: reduce) {
  .animate__animated {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.qq-navbar {
  background: rgba(2, 44, 68, 0.35);
  backdrop-filter: blur(14px);
}

.text-qq-neutral { color: var(--qq-neutral); }

.qq-card {
  background: rgba(2, 44, 68, 0.35);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(118, 215, 217, 0.4);
  border-radius: 0.5rem;
}

.btn-qq-primary {
  background: linear-gradient(90deg, var(--qq-pink), var(--qq-teal));
  border: none;
  color: var(--qq-purple-dark);
}
.btn-qq-primary:hover { color: var(--qq-purple-dark); filter: brightness(1.05); }

/*
Estilo de campos para formularios que iteran sus campos en el template
(en vez de usar `.as_p`) sin tocar `forms.py` - marca/configurar.html
combina tres ModelForm en un unico submit y esas clases ya estan
revisadas/aprobadas, asi que el look de Bootstrap ".form-control" se
aplica aqui por selector descendente sobre `.qq-form` en lugar de por
atributo de widget. `width: 100%` + `max-width: 100%` evita que los
`<textarea>` (que por defecto miden su ancho en `cols`) desborden en
viewports angostos.
*/
.qq-form input[type="text"],
.qq-form input[type="url"],
.qq-form input[type="number"],
.qq-form input[type="file"],
.qq-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  /* #212529/#fff/#ced4da: no son tokens --qq-* nuevos, son los mismos
     colores por defecto de Bootstrap ".form-control" que ya se usan en
     login.html/equipo_invitar.html/invitacion_aceptar.html via la
     clase de Bootstrap directa - se replican aqui a mano (no via
     forms.py) para que este formulario se vea igual, no para
     introducir un color nuevo fuera de paleta. */
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.qq-form textarea {
  min-height: 6rem;
  resize: vertical;
}

.qq-form input[type="text"]:focus,
.qq-form input[type="url"]:focus,
.qq-form input[type="number"]:focus,
.qq-form input[type="file"]:focus,
.qq-form textarea:focus {
  outline: none;
  border-color: var(--qq-teal);
  box-shadow: 0 0 0 0.25rem rgba(118, 215, 217, 0.25);
}

.qq-form .form-text {
  color: var(--qq-neutral);
  opacity: 0.75;
}

/*
El <select> nativo de Bootstrap (".form-select") no hereda el tema
oscuro del resto de los campos - sin esta regla queda como caja
blanca solida chocando con los floating labels oscuros alrededor
(equipo_invitar.html). Reutiliza los mismos tokens/rgba que ya usan
los inputs oscuros de arriba, no colores nuevos. El listado de
"pintarlo" del <option> desplegado es un limite del navegador (fuera
de CSS) - solo se controla el estado cerrado/en reposo del <select>.
*/
select.form-select {
  background-color: rgba(2, 44, 68, 0.6);
  color: var(--qq-neutral);
  border: 1px solid rgba(118, 215, 217, 0.4);
}
select.form-select:focus {
  border-color: var(--qq-teal);
  box-shadow: 0 0 0 0.25rem rgba(118, 215, 217, 0.25);
  outline: none;
}

/*
Marca del navbar: OmnivendIA es la identidad principal (igual que el
<h1> de login.html), el logo de QQ es un sello secundario chico junto
al titulo (BRANDING.md #8: variante rosa sobre fondo oscuro). El texto
"un producto de Quantum Qwerty" se quito del navbar por ser redundante
con el logo ya visible - esa mencion textual solo queda en el footer,
que no tiene logo. El titulo reusa la fuente de titulos
(Geometr212-heavy) aunque no sea un tag <h1> real, para no duplicar el
<h1> semantico de cada pagina dentro del <nav>.
*/
.qq-brand-title {
  font-family: 'Geometr212-heavy', sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--qq-neutral);
}

.qq-navbar-logo-small {
  height: 18px;
  width: auto;
  display: block;
}

/* Footer discreto, mismo tema oscuro que el resto del portal. */
.qq-footer {
  border-top: 1px solid rgba(118, 215, 217, 0.25);
  padding: 1.25rem 0;
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--qq-neutral);
  opacity: 0.75;
}

.qq-footer a {
  color: var(--qq-teal);
}

/*
Labels flotantes adaptados al tema oscuro, inspirados en la interaccion
del formulario de contacto real (quantumqwerty.com/static/css/contact.css)
pero con la paleta oscura ya aprobada del portal en vez de su tarjeta
blanca: input transparente, borde inferior en --qq-teal, label en
--qq-neutral que sube y se tine de --qq-teal al enfocar. Requiere que el
input/textarea tenga placeholder=" " (no vacio) y que el <label> venga
DESPUES del input en el HTML (selector hermano `~`).

`padding-top` en el wrapper reserva espacio propio del campo para el
label flotado (ver fix de encimamiento en formularios densos mas abajo):
un elemento con `position:absolute` se ubica respecto al borde del
wrapper ignorando el padding de este, asi que sumar padding-top empuja
el <input>/<textarea> (flujo normal) hacia abajo sin mover el origen
top:0 del label - eso deja una franja vacia arriba, propia de este
campo, donde el label puede subir sin invadir jamas el elemento anterior
(encabezado de seccion u otro campo), sin depender de cuanto margen
tenga ese elemento anterior.
*/
.qq-floating {
  position: relative;
  padding-top: 0.9rem;
  margin-bottom: 1.75rem;
}

/*
!important en color/fondo/borde: en configurar.html el <form> tiene la
clase `.qq-form` (para el look Bootstrap-like de sus inputs de archivo)
Y sus campos de texto estan ademas envueltos en `.qq-floating` - la regla
de arriba `.qq-form input[type="text"], ...` usa un selector de atributo
que le da MAS especificidad (clase+atributo+elemento) que esta de aqui
(clase+elemento), asi que sin !important esa regla Bootstrap-like ganaba
sobre el estilo oscuro/transparente flotante para cualquier input de una
sola linea (Nombre, Sitio web, Semilla fija quedaban con fondo blanco y
el label en reposo casi invisible sobre el, lo que se percibia como el
label "encimado" al borde del campo al enfocar). Los <textarea> no
sufrian esto porque esa regla no los tiene por atributo de tipo y el
empate de especificidad ya lo resolvia el orden de aparicion en el
archivo a favor de esta seccion.
*/
.qq-floating input,
.qq-floating textarea,
.qq-floating select {
  display: block;
  width: 100%;
  padding: 1rem 0.25rem 0.4rem 0.25rem;
  font-size: 1rem;
  color: var(--qq-neutral) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--qq-teal) !important;
  border-radius: 0 !important;
  outline: none;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
}

.qq-floating textarea {
  min-height: 6rem;
  resize: vertical;
}

.qq-floating input:focus,
.qq-floating textarea:focus {
  border-color: var(--qq-pink) !important;
}

/*
top:1.9rem = los 0.9rem de padding-top del wrapper + el 1rem de
padding-top propio del input/textarea (linea de arriba) - asi el label
en reposo queda visualmente superpuesto a la zona en blanco donde
arrancaria el texto real, igual en un input de una linea que en un
textarea alto (el label es absolute, no se centra con la altura del
campo).
*/
.qq-floating label {
  position: absolute;
  top: 1.9rem;
  left: 0.25rem;
  font-size: 1rem;
  color: var(--qq-neutral);
  opacity: 0.75;
  pointer-events: none;
  transition: 0.2s ease all;
}

/*
top:0 (no negativo) es la clave del fix: el label flotado nunca sale
del propio border-box del wrapper, solo sube hasta la franja que le
reservo el padding-top de arriba - por eso jamas puede encimarse con el
campo anterior o el encabezado de seccion, sin importar el margen que
tengan esos elementos.
*/
.qq-floating input:focus ~ label,
.qq-floating input:not(:placeholder-shown) ~ label,
.qq-floating textarea:focus ~ label,
.qq-floating textarea:not(:placeholder-shown) ~ label {
  top: 0;
  font-size: 0.75rem;
  color: var(--qq-teal);
  opacity: 1;
}

/*
Los campos de archivo (logo, brandbook, tipografias en configurar.html)
no llevan tratamiento de label flotante - un <input type="file"> no
soporta placeholder ni :placeholder-shown, asi que se dejan con su label
normal arriba (ver configurar.html) y solo se asegura que el texto nativo
del navegador sea legible sobre el fondo oscuro del portal.
*/
input[type="file"] {
  color: var(--qq-neutral);
}

/*
Boton "Mostrar/Ocultar" del campo de contraseña (icono + texto, ver
mostrar-contrasena.js): el fondo tipo "pastilla" (rgba + borde + radio
grande) es deliberado - un icono solo, transparente y chico, se perdia
contra el fondo oscuro del portal (feedback real de uso). padding-right
en el input deja espacio para que la pastilla nunca quede encima del
texto escrito; el boton se posiciona absolute dentro del mismo
.qq-floating (ya es position:relative) del lado opuesto al label.
*/
.qq-floating-password input {
  padding-right: 5.5rem;
}

.qq-toggle-password {
  position: absolute;
  right: 0.25rem;
  top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(118, 215, 217, 0.15);
  border: 1px solid rgba(118, 215, 217, 0.5);
  border-radius: 999px;
  color: var(--qq-teal);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qq-toggle-password svg {
  display: block;
  flex-shrink: 0;
}

.qq-toggle-password:hover,
.qq-toggle-password:focus {
  background: rgba(232, 169, 216, 0.2);
  border-color: var(--qq-pink);
  color: var(--qq-pink);
  outline: none;
}