/* =============================================================================
 * q-home.css — la home pública de Quasar ERP (`/`).
 *
 * Hoja PROPIA, no del panel: esta página la ve alguien que no ha entrado nunca, así que no arrastra
 * AdminLTE, ni Bootstrap, ni los plugins. Sólo los tokens, que son la marca.
 *
 * Se apoya en `q-tokens.css` para color, tipografía y espaciado: si la marca cambia allí, cambia
 * aquí. Ningún color literal salvo los dos del degradado de cabecera, derivados del acento.
 * ========================================================================== */

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

/* Los dos únicos tokens propios de esta hoja: el fondo del cierre a sangre. Se declaran en CLARO y
 * se redefinen con las MISMAS dos guardas que usa q-tokens.css, para que el cierre voltee igual que
 * el resto —y no quede negro sobre negro— tanto si el tema lo pone el sistema como el usuario. */
:root {
    --q-cta-bg: #1d1d1f; --q-cta-text: #f5f5f7;
    /* El verde de «aceptado» NO puede ser el mismo en los dos temas. `--q-success` (#34c759) sobre
     * una tarjeta blanca da 2,22 y WCAG pide 3,0 a un elemento GRÁFICO: las marcas del kardex y el
     * sello de la DIAN se perdían en claro. En claro va el verde de texto que ya existe en los
     * tokens (5,39); en oscuro el brillante sigue siendo correcto (6,89). */
    --q-ok-mark: var(--q-success-text);
    /* Los dos colores del LOGO, que hasta ahora no aparecían en ninguna parte de su propia página:
     * turquesa #049eac y azul #0469b4. Se usan como VELO, no como tinta: a tamaño de texto el
     * turquesa sobre fondo claro da 3,23 y no llegaría al 4,5 que exige un párrafo. */
    --q-marca-1: 4, 158, 172;
    --q-marca-2: 4, 105, 180;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-q-theme="light"]) { --q-cta-bg: #000000; --q-cta-text: #f5f5f7; --q-ok-mark: var(--q-success); }
}
:root[data-q-theme="dark"] { --q-cta-bg: #000000; --q-cta-text: #f5f5f7; --q-ok-mark: var(--q-success); }

body.q-home {
    margin: 0;
    background: var(--q-bg);
    color: var(--q-text);
    font-family: var(--q-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--q-text-base);
    line-height: 1.6;
}

/* Las BANDAS van a sangre y el contenido dentro: por eso el ancho máximo vive en el contenedor y
 * cada sección pone sólo su padding VERTICAL. Con el atajo `padding` en la sección se perdía el
 * lateral del contenedor —misma especificidad, gana la última— y el texto tocaba el borde. */
.q-home-band { width: 100%; background: var(--q-bg); }
.q-home-band--soft   { background: var(--q-surface); }
.q-home-band--soft .q-home-tile { background: var(--q-bg); }
/* El cierre lleva el MISMO velo que la portada, entrando por el lado contrario: la página abre y
 * cierra con la marca y el centro se queda neutro. Un velo en TODAS las bandas no rompería el
 * contraste —medido: la separación entre banda elevada y tarjeta se queda en 1,22, igual que hoy,
 * porque tiñe las dos por igual— pero volvería a igualarlas entre sí, y la alternancia es justo lo
 * que da el ritmo. El degradado enmarca; no rellena. Sobre el negro del cierre, el texto blanco
 * queda en 17,82. */
.q-home-band--strong {
    background:
        linear-gradient(330deg,
            rgba(var(--q-marca-1), .10) 0%,
            rgba(var(--q-marca-2), .07) 48%,
            transparent 78%),
        var(--q-cta-bg);
    color: var(--q-cta-text);
}
.q-home-band--strong .q-home-cta p { color: var(--q-cta-text); opacity: .74; }

/* 1.180 y no 980: a 1920 px el contenido ocupaba el 51 % de la ventana y la página se leía como una
 * columna estrecha flotando —peor todavía con bandas a sangre, donde el fondo sí cruza la pantalla—.
 * El texto corrido NO se estira con ella: la entradilla y las filas siguen con su tope de medida. */
.q-home-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--q-space-5); }

/* --- Cabecera: marca a la izquierda, entrar a la derecha ------------------- */
.q-home-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--q-space-4);
    padding-block: var(--q-space-4);
}
.q-home-brand { display: flex; align-items: center; gap: var(--q-space-3); text-decoration: none; color: inherit; }
.q-home-brand img { width: 34px; height: 34px; display: block; }
.q-home-brand b { font-size: var(--q-text-md); letter-spacing: .04em; }

.q-home-btn {
    display: inline-block; padding: 10px var(--q-space-5);
    background: var(--q-accent-strong); color: #fff; text-decoration: none;
    border-radius: 8px; font-weight: 600; font-size: var(--q-text-sm);
    border: 0; transition: background .15s ease;
}
.q-home-btn:hover  { background: var(--q-accent-strong-hover); }
.q-home-btn:active { background: var(--q-accent-strong-active); }
.q-home-btn:focus-visible { outline: none; box-shadow: var(--q-focus-ring); }
.q-home-btn--lg { padding: 14px var(--q-space-6); font-size: var(--q-text-base); }

/* --- Portada -------------------------------------------------------------- */
.q-home-hero { padding-block: clamp(40px, 5.5vw, 96px); }
/* El velo reproduce el degradado del LOGOTIPO —turquesa arriba a la izquierda, azul abajo a la
 * derecha—, que es lo único de la marca que la página no usaba. A 0,10 y 0,07 tiñe sin teñir el
 * texto: el contraste de todo lo que va encima no se mueve más de una centésima. */
.q-home-band--hero {
    background:
        linear-gradient(150deg,
            rgba(var(--q-marca-1), .10) 0%,
            rgba(var(--q-marca-2), .07) 48%,
            transparent 78%),
        var(--q-bg);
}
/* La escala CRECE con la ventana en vez de topar en 44 px: en un portátil de 1440-1920, que es donde
 * se evalúa un ERP, un titular de 44 px se lee como pantalla de aplicación y no como portada. */
.q-home-hero h1 {
    margin: 0 0 var(--q-space-4);
    font-size: clamp(30px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -0.025em;
    /* 26ch, no 18: con 18 el titular caía en CUATRO líneas estrechas a 60 px y parecía una
     * columna; a 26 entra en tres y la última no queda huérfana. */
    max-width: 26ch; text-wrap: balance;
}
.q-home-hero p {
    margin: 0 0 var(--q-space-6);
    font-size: clamp(16px, 1.05vw, 20px); color: var(--q-text-secondary); max-width: 62ch;
}

/* --- La vista del producto -------------------------------------------------
 * El SVG toma su color de los tokens, así que sigue al tema claro/oscuro sin una regla más y sin
 * una segunda paleta que pueda desalinearse de la primera. */
.q-home-shot { margin: var(--q-space-7) 0 0; }
.q-home-shot svg {
    width: 100%; height: auto; display: block;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06);
}
.q-s-frame  { fill: var(--q-surface);   stroke: var(--q-hairline); }
.q-s-bar    { fill: var(--q-surface-2); }
.q-s-side   { fill: var(--q-surface-2); }
.q-s-card   { fill: var(--q-surface);   stroke: var(--q-hairline); }
.q-s-dot    { fill: var(--q-gray-300); }
.q-s-soft   { fill: var(--q-gray-300); }
.q-s-strong { fill: var(--q-gray-500); }
.q-s-bar2   { fill: var(--q-gray-300); }
.q-s-accent { fill: var(--q-accent); }
/* El verde NO es decoración: marca lo que el sistema da por bueno —el sello del documento que la
 * DIAN aceptó y el saldo del kardex que cuadra—. El azul queda para lo accionable. */
.q-s-ok     { fill: var(--q-ok-mark); }
.q-s-navsel { fill: var(--q-accent-soft); }

/* Los rótulos del dibujo son TEXTO, no trazos: los lee el barrido anónimo, se buscan en la página
 * y escalan sin pixelarse. El tamaño va en unidades del viewBox —no en px de pantalla—, así que la
 * jerarquía se mantiene a cualquier ancho. `inherit` en la familia evita que el SVG caiga a la
 * serif por defecto del navegador, que es lo que pasa si no se declara ninguna. */
.q-home-shot svg text { font-family: inherit; }
.q-s-t-brand { font-size: 12px;   font-weight: 700; fill: var(--q-accent); letter-spacing: .08em; }
.q-s-t-crumb { font-size: 11px;   fill: var(--q-text-secondary); }
.q-s-t-nav   { font-size: 10px;   fill: var(--q-text-secondary); }
.q-s-t-nav.is-on { font-weight: 600; fill: var(--q-accent); }
.q-s-t-label { font-size: 10px;   fill: var(--q-text-secondary); }
.q-s-t-card  { font-size: 11.5px; font-weight: 600; fill: var(--q-text); }
.q-s-t-row   { font-size: 9.5px;  fill: var(--q-text-secondary); }
.q-s-t-link  { font-size: 9px;    fill: var(--q-accent); }
.q-s-t-axis  { font-size: 8.5px;  fill: var(--q-gray-400); }
/* Las cifras van con cifras TABULARES: en una columna de importes, un 1 estrecho desalinea la
 * coma y el conjunto deja de leerse como un dato. */
.q-s-t-kpi   { font-size: 22px;   font-weight: 700; fill: var(--q-text);   font-variant-numeric: tabular-nums; }
.q-s-t-peak  { font-size: 9.5px;  font-weight: 600; fill: var(--q-accent); font-variant-numeric: tabular-nums; }

/* Las barras crecen al cargar, escalonadas, y la azul llega la última: un solo momento, sin JS.
 * `backwards` hace que ANTES de su turno la barra ya esté encogida, y no que parpadee entera. */
@keyframes q-home-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.q-s-bars rect {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: q-home-crece .55s cubic-bezier(.2, .7, .3, 1) backwards;
}
.q-s-bars rect:nth-child(1) { animation-delay: .06s; }
.q-s-bars rect:nth-child(2) { animation-delay: .12s; }
.q-s-bars rect:nth-child(3) { animation-delay: .18s; }
.q-s-bars rect:nth-child(4) { animation-delay: .24s; }
.q-s-bars rect:nth-child(5) { animation-delay: .30s; }
.q-s-bars rect:nth-child(6) { animation-delay: .36s; }
.q-s-bars rect:nth-child(7) { animation-delay: .42s; }
.q-s-bars rect:nth-child(8) { animation-delay: .52s; }

/* --- Franja de términos ---------------------------------------------------
 * Los filetes van en la LISTA y no en la banda: así la línea respeta el ancho del contenido en vez
 * de cruzar la pantalla de lado a lado, que en una franja de siete palabras se lee como un corte. */
.q-home-terms {
    /* `margin-block: 0` y NO `margin: 0`: el atajo anula el `margin-inline: auto` de
     * `.q-home-wrap` —misma especificidad, regla posterior— y la franja se descuelga a la
     * izquierda mientras el resto de la página sigue centrado. Es la misma colisión de
     * cascada que el `padding` de las secciones, dos reglas más arriba. */
    list-style: none; margin-block: 0; padding-block: var(--q-space-4);
    display: flex; flex-wrap: wrap; gap: var(--q-space-2) var(--q-space-6);
    /* Los filetes toman el turquesa de marca: es un elemento gráfico, no texto, así que aquí el
     * color sí puede llevar la identidad sin comprometer la lectura. */
    border-top: 1px solid rgba(var(--q-marca-1), .38);
    border-bottom: 1px solid rgba(var(--q-marca-1), .38);
    font-size: var(--q-text-xs); letter-spacing: .14em; text-transform: uppercase;
    color: var(--q-text-secondary);
}
.q-home-terms li { white-space: nowrap; }

/* --- Qué incluye ---------------------------------------------------------- */
.q-home-section { padding-block: clamp(40px, 3.6vw, 64px); }
/* Las dos bandas elevadas son las que llevan el contenido que vende: respiran más que la lista. */
.q-home-band--soft .q-home-section { padding-block: clamp(48px, 5vw, 88px); }
.q-home-section > h2 {
    margin: 0 0 var(--q-space-2);
    font-size: clamp(22px, 2.1vw, 34px); line-height: 1.15; letter-spacing: -0.02em;
}
.q-home-section > p.q-home-lead {
    margin: 0 0 var(--q-space-6); color: var(--q-text-secondary); max-width: 62ch;
}

.q-home-grid {
    display: grid; gap: var(--q-space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.q-home-card {
    background: var(--q-surface);
    border: 1px solid var(--q-hairline);
    border-radius: 12px;
    padding: var(--q-space-5);
}
.q-home-card h3 {
    margin: 0 0 var(--q-space-2);
    font-size: var(--q-text-base); font-weight: 600;
}
.q-home-card p { margin: 0; color: var(--q-text-secondary); font-size: var(--q-text-sm); }

/* --- El mosaico: tres módulos con maqueta ---------------------------------
 * `auto-fit` con un mínimo de 260 px da tres columnas en escritorio, dos en tablet y una en móvil
 * sin una sola media query: las tarjetas no se estiran sobre hueco muerto ni queda una sola en su
 * fila. La maqueta va al FONDO de la tarjeta y sangra hasta el borde —de ahí el `overflow: hidden`
 * y el padding inferior a cero—, que es lo que la hace parecer una ventana y no un icono. */
.q-home-mosaic {
    display: grid; gap: var(--q-space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.q-home-tile {
    display: flex; flex-direction: column;
    transition: border-color .18s ease, transform .18s ease;
    background: var(--q-surface);
    border: 1px solid var(--q-hairline);
    border-radius: 14px;
    padding: var(--q-space-5) var(--q-space-5) 0;
    overflow: hidden;
}
.q-home-tile:hover { border-color: var(--q-accent); transform: translateY(-2px); }
.q-home-tile h3 { margin: 0 0 var(--q-space-2); font-size: var(--q-text-md); font-weight: 600; }
.q-home-tile p  { margin: 0; color: var(--q-text-secondary); font-size: var(--q-text-sm); }
/* `margin-top: auto` empuja la maqueta al fondo: las descripciones miden 3 y 4 líneas, y sin esto
 * las tres maquetas arrancaban a alturas distintas y la fila se leía descuadrada. */
.q-home-art     { margin: auto calc(var(--q-space-3) * -1) 0; padding-top: var(--q-space-5); }
.q-home-art svg { width: 100%; height: auto; display: block; }

/* --- La lista: los seis restantes, y las tres promesas ---------------------
 * Fila con el nombre a ancho fijo y la descripción al lado: se lee como un índice, que es
 * justo lo que no conseguían nueve tarjetas del mismo tamaño. La línea separa filas DENTRO de
 * cada columna (`+`), así que la primera de cada una no arranca con un filete suelto. */
.q-home-list {
    display: grid; gap: 0 var(--q-space-6);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.q-home-row {
    display: flex; gap: var(--q-space-4);
    padding: var(--q-space-4) 0;
}
.q-home-row + .q-home-row { border-top: 1px solid var(--q-hairline); }
.q-home-row b    { flex: none; width: 10.5em; font-size: var(--q-text-base); font-weight: 600; }
/* El tope de medida sólo actúa cuando la lista va a UNA columna —las promesas—: a ancho completo
 * la línea se iba a ~90 caracteres, que ya no se lee de un golpe. */
.q-home-row span { color: var(--q-text-secondary); font-size: var(--q-text-sm); max-width: 62ch; }

/* --- Cierre y pie --------------------------------------------------------- */
/* El cierre ya NO es una tarjeta: es la banda. Dejarle borde y radio dentro de una banda a sangre
 * sería una caja dentro de otra, que es justo el ruido que las bandas vienen a quitar. */
.q-home-cta { padding-block: clamp(48px, 5vw, 88px); text-align: center; }
.q-home-cta h2 { margin: 0 0 var(--q-space-2); font-size: var(--q-text-lg); }
.q-home-cta p  { margin: 0 0 var(--q-space-5); color: var(--q-text-secondary); }

.q-home-foot {
    border-top: 1px solid var(--q-hairline);
    padding-block: var(--q-space-5) var(--q-space-6);
    color: var(--q-text-secondary); font-size: var(--q-text-sm);
    display: flex; flex-wrap: wrap; gap: var(--q-space-3); justify-content: space-between;
}

/* Esta página NO carga `q-base.css`, donde vive el bloque global de `prefers-reduced-motion` del
 * tema: enlaza sólo los tokens y esta hoja. Sin esta guarda propia, quien pide no tener movimiento
 * lo tendría igual — y es la única página que ve alguien de fuera. */
@media (prefers-reduced-motion: reduce) {
    .q-s-bars rect { animation: none; }
    .q-home-tile   { transition: none; }
    .q-home-tile:hover { transform: none; }
}

/* En movil la cabecera NO pasa a columna: la marca y el boton caben de sobra en una fila —a 320 px,
 * el ancho mas estrecho que se usa hoy, ocupan ~235 de los 272 disponibles— y apilarlos empujaba el
 * boton a una segunda linea, comiendose una franja entera antes del titular. Se aprieta el espaciado
 * en vez de romper la fila. */
@media (max-width: 560px) {
    .q-home-wrap  { padding-inline: var(--q-space-4); }
    .q-home-top   { gap: var(--q-space-3); padding-block: var(--q-space-3); }
    .q-home-brand img { width: 28px; height: 28px; }
    .q-home-brand b   { font-size: var(--q-text-base); }
    .q-home-btn       { padding: 9px var(--q-space-4); }
    .q-home-btn--lg   { padding: 13px var(--q-space-5); }
    .q-home-hero      { padding-block: var(--q-space-6); }
    /* En una columna el nombre ya no compite por el ancho con la descripción: apilar es más legible
     * que dejar `b` en 10,5em y estrujar el texto a tres palabras por línea. */
    .q-home-row   { flex-direction: column; gap: var(--q-space-1); }
    .q-home-row b { width: auto; }
}