/* =============================================================================
 * mockup-tokens.css — design system del PRODUCTO real, para el mockup de la landing
 * -----------------------------------------------------------------------------
 * Objetivo: que el mockup interactivo de la web sea INDISTINGUIBLE de la app.
 * Todo valor visual del mockup sale de acá. Ningún hex ni px hardcodeado fuera
 * de este archivo.
 *
 * Todos los tokens llevan prefijo `--mk-` (mockup) para no chocar con las
 * variables que ya tenga el HTML de la landing.
 *
 * ---------------------------------------------------------------------------
 * SYNC — de dónde sale cada grupo (verificado contra `origin/main`, jul 2026)
 * ---------------------------------------------------------------------------
 * FUENTE DE VERDAD: repo Quotable, rama `origin/main` (NO el working tree local,
 * que estaba ~1769 commits atrás y todavía tenía la marca VERDE vieja, ya muerta).
 * Confirmado además visualmente contra docs/pantallazos/03b-cotizacion-app.png
 * (captura real de /cotizar, jul 2026).
 *
 *   COLORES ............. apps/web/src/styles.css (:root)  +  DESIGN.md §1
 *   TIPOGRAFÍA ......... apps/web/tailwind.config.js (fontFamily/fontSize) + DESIGN.md §2
 *   RADIOS / SOMBRAS ... apps/web/src/styles.css (--radius*, --shadow*) + DESIGN.md §9
 *   ESPACIADO / LAYOUT . DESIGN.md §6 (px-8, pt/pb, techo de cromo) + PageContainer
 *   PASTELES (avatares)  apps/web/src/styles.css (--pastel-*) — tiles de ítem en /cotizar
 *   TABLA ESTÁNDAR ..... apps/web/src/components/ui/data-table.tsx (celdas px-4 py-3, text-xs)
 *   TABLA COTIZADOR .... apps/web/src/features/generate-quote/quote-items-table.tsx (densa)
 *   HEADER / CHROME .... apps/web/src/components/page-chrome.tsx (h-14 sticky)
 *                        + features/generate-quote/components/module-top-bar.tsx (h-14)
 *   SIDEBAR ............ apps/web/src/components/sidebar.tsx (w-60 / rail w-16)
 *
 * REGLA DE SEMÁNTICA DE COLOR (DESIGN.md §1): la MARCA es azul acero #2C4A63
 * (CTAs, links, nav activa, tabs activos, focus, selección). El VERDE #2F6F4E
 * quedó reservado para ÉXITO (aprobado/aceptado/vendido/stock ok). Nunca uses el
 * azul de marca para "info" ni el verde para una acción.
 *
 * INCONSISTENCIAS DETECTADAS (ver bloque al final del archivo). No las resolví
 * inventando: quedan documentadas para tu decisión.
 * ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
   * SUPERFICIES
   * SYNC: styles.css --canvas / --background / --card / --popover · DESIGN.md §1
   * El lienzo es crema; las superficies (tablas, cards, inputs) son BLANCAS y
   * FLOTAN por contraste + borde hairline (look flat, sin sombra).
   * ------------------------------------------------------------------------- */
  --mk-canvas: #fcfaf3;        /* lienzo de página (crema "Apenas") */
  --mk-surface: #ffffff;       /* superficie default: cards, tablas, inputs, popovers */
  --mk-surface-soft: #eaf1f5;  /* brand-soft: hover de fila/card, chip secundario, item activo */

  /* ---------------------------------------------------------------------------
   * TEXTO
   * SYNC: styles.css --foreground / --muted-foreground / --faint · DESIGN.md §1-2
   * ------------------------------------------------------------------------- */
  --mk-ink: #292b29;     /* texto primario */
  --mk-muted: #565d5a;   /* secundario: timestamps, helper, headers de tabla */
  --mk-faint: #879189;   /* terciario: captions/placeholders más suaves que muted */

  /* ---------------------------------------------------------------------------
   * BORDES
   * SYNC: styles.css --border / --input · DESIGN.md §1 (hairline)
   * ------------------------------------------------------------------------- */
  --mk-border: #e8eae6;        /* hairline: separa superficies y filas de tabla */
  --mk-border-strong: #d9dcd6; /* borde un paso más marcado (derivado, para divisores fuertes) */

  /* ---------------------------------------------------------------------------
   * MARCA / ACENTO (azul acero) — acción, links, nav, focus, selección
   * SYNC: styles.css --primary / --primary-hover / --primary-dark / --secondary
   *       / --ring · DESIGN.md §1
   * ------------------------------------------------------------------------- */
  --mk-brand: #2c4a63;        /* marca: CTA, links, nav/tab activo, iconos activos */
  --mk-brand-hover: #243d52;  /* hover/active de CTA (un paso más oscuro) */
  --mk-brand-ink: #20394d;    /* texto sobre brand-soft */
  --mk-brand-soft: #eaf1f5;   /* superficie azul acero clarita (= surface-soft) */
  --mk-brand-fg: #ffffff;     /* texto/icono sobre la marca */
  --mk-ring: #2c4a63;         /* focus ring (= marca) */

  /* ---------------------------------------------------------------------------
   * ESTADOS
   * SYNC: styles.css --green / --amber / --amber-dark / --destructive / --blue
   *       · DESIGN.md §1
   * ------------------------------------------------------------------------- */
  --mk-success: #2f6f4e;       /* verde propio: aprobado/aceptado/vendido/stock ok */
  --mk-success-fg: #ffffff;
  --mk-warning: #ffd566;       /* ámbar Better: warning/pendiente (texto SIEMPRE en ink) */
  --mk-warning-deep: #ce8509;  /* ámbar profundo (--amber-dark): texto/fill legible sobre track claro */
  --mk-warning-ink: #292b29;   /* ink sobre ámbar (el amarillo es claro, nunca texto blanco) */
  --mk-danger: #b42318;        /* rojo cálido: error, perdida, cancelada, cancelar */
  --mk-danger-fg: #ffffff;
  --mk-info: #5f6368;          /* info: gris neutro (NO el azul de marca, NO slate-azul) */
  --mk-info-fg: #ffffff;

  /* ---------------------------------------------------------------------------
   * LOGO — el wordmark "mandino." (la "m"+letras en tinta, el punto en color).
   * SYNC: alineado con la app real. origin/main dibuja el punto del monograma
   * "m." con `text-primary` (azul acero #2C4A63): sidebar.tsx MandinoBrand →
   * `<span className="text-primary">.</span>`. El mockup usa el mismo azul
   * acero de marca. No hay divergencia con la app.
   * ------------------------------------------------------------------------- */
  --mk-logo-ink: #292b29;          /* la "m" y el wordmark van en tinta */
  --mk-logo-dot: var(--mk-brand);  /* el punto (cierre del trato) — azul acero de marca */

  /* ---------------------------------------------------------------------------
   * PASTELES — tiles de avatar de ítem (visualizador /cotizar)
   * SYNC: styles.css --pastel-* · quote-items-table.tsx (bucket por categoría)
   * Cada par: fondo claro + tinta legible del mismo hue.
   * ------------------------------------------------------------------------- */
  --mk-pastel-sun: #fbf4c7;      --mk-pastel-sun-ink: #8a6d1a;
  --mk-pastel-rose: #f8dcd0;     --mk-pastel-rose-ink: #9c4a2f;
  --mk-pastel-sky: #d6e5f2;      --mk-pastel-sky-ink: #33597e;
  --mk-pastel-sage: #deeddd;     --mk-pastel-sage-ink: #3f5829;

  /* ---------------------------------------------------------------------------
   * TIPOGRAFÍA
   * SYNC: tailwind.config.js (fontFamily.sans, fontSize) · DESIGN.md §2
   * Onest Variable es la ÚNICA font (cuerpo, titulares, números, tablas, códigos).
   * NO hay mono ni serif. Dos pesos: 400 y 700. Regla base: TODO va en 12px salvo
   * títulos. Numerales tabulares globales.
   * ------------------------------------------------------------------------- */
  --mk-font: 'Onest Variable', 'Onest', sans-serif;
  --mk-weight-regular: 400;
  --mk-weight-bold: 700;      /* todo titular/botón/énfasis va directo a 700 (sin peso intermedio) */

  /* Escala (px), comprimida 2026-07 (feedback: "todo el font está demasiado
     grande", estilo denso tipo Resend). El cuerpo es 12px uniforme (techo);
     lo secundario/meta baja a 2xs; los títulos crecen bastante menos que
     antes — la jerarquía la da el peso/color, no un salto grande de tamaño. */
  --mk-text-2xs: 11px;   /* micro: badges/eyebrows/meta densos (la mayoría del copy secundario) */
  --mk-text-xs: 12px;    /* CUERPO: techo — mensajes de chat, nombres, botones */
  --mk-text-nav: 13px;   /* labels de navegación (sidebar/rail) */
  --mk-text-panel: 13px; /* título de la franja de página (topbar) */
  --mk-text-base: 13px;  /* título de sección densa (sec-title) */
  --mk-text-lg: 15px;    /* título de documento (PDF) · cifra focal destacada (total, KPI hero) */
  --mk-text-2xl: 20px;   /* logo/monograma (rail, PDF) */
  --mk-text-3xl: 22px;   /* H1 de página */

  /* Line-heights */
  --mk-leading-body: 1.5;      /* texto corrido */
  --mk-leading-tight: 1.2;     /* títulos */
  --mk-leading-none: 1;        /* micro-cifras apretadas */

  /* Tracking — firma Better: interletraje negativo en titulares grandes */
  --mk-tracking-tight: -0.02em;   /* H1/H2 */
  --mk-tracking-tighter: -0.04em; /* hero grande */
  --mk-tracking-wide: 0.04em;     /* eyebrows/headers uppercase */

  /* Numerales: usar font-variant-numeric: tabular-nums en cifras (precios, IDs, %) */

  /* ---------------------------------------------------------------------------
   * RADIOS
   * SYNC: styles.css --radius* · DESIGN.md §5 (botones pill)
   * ------------------------------------------------------------------------- */
  --mk-radius-sm: 6px;
  --mk-radius-md: 8px;     /* default: inputs, cards, chips */
  --mk-radius-lg: 12px;    /* cards grandes */
  --mk-radius-xl: 16px;
  --mk-radius-pill: 9999px; /* TODOS los botones son pill */

  /* ---------------------------------------------------------------------------
   * SOMBRAS — flat por defecto
   * SYNC: styles.css --shadow* · DESIGN.md §9
   * La separación es por color (crema/blanco) + borde hairline, NO por elevación.
   * Solo overlays flotantes reales (popover/dialog) llevan lift.
   * ------------------------------------------------------------------------- */
  --mk-shadow-flat: none;                                 /* cards, tablas, sidebar: sin sombra */
  --mk-shadow-chrome: 0 1px 2px rgba(41, 43, 41, 0.04);   /* franja sticky superior (page-chrome) */
  --mk-shadow-pop: 0 2px 4px -2px rgba(41, 43, 41, 0.06), 0 6px 12px -4px rgba(41, 43, 41, 0.08);   /* popover/menú */
  --mk-shadow-overlay: 0 4px 8px -3px rgba(41, 43, 41, 0.08), 0 12px 24px -8px rgba(41, 43, 41, 0.10); /* dialog */

  /* ---------------------------------------------------------------------------
   * PRESENTACIÓN DEL MOCKUP EN LA WEB — stage, elevación, chrome de browser.
   * NO es parte del design system del producto (el producto real es flat, sin
   * sombra — ver nota arriba). Esto es decoración de MARKETING: cómo se exhibe
   * la app en la landing, no cómo se ve la app en sí.
   * SYNC: --mk-stage-grad replica --ink-grad de index-v3.html (mismo fondo
   * oscuro que ya envuelve el embed en #producto — consistencia intencional).
   * ------------------------------------------------------------------------- */
  --mk-stage-grad: linear-gradient(160deg, hsl(207 42% 17%), hsl(207 47% 12%));
  --mk-frame-shadow: 0 40px 80px -24px rgba(4, 9, 14, 0.6), 0 16px 32px -12px rgba(4, 9, 14, 0.4);
  --mk-frame-border: rgba(255, 255, 255, 0.08);
  --mk-frame-radius: 20px;
  --mk-chrome-bg: hsl(207 24% 97%);        /* barra de título: apenas más fría que --mk-surface */
  --mk-chrome-border: var(--mk-border);
  --mk-chrome-dot-red: #ec6a5e;
  --mk-chrome-dot-amber: #f4bf4f;
  --mk-chrome-dot-green: #61c454;
  --mk-chrome-url-fg: var(--mk-muted);
  --mk-chrome-url-bg: var(--mk-surface);

  /* ---------------------------------------------------------------------------
   * ESPACIADO
   * SYNC: DESIGN.md §6 (px-8 = 32px, pt-5/6, pb-10, gaps mb-4) · escala Tailwind (base 4px)
   * ------------------------------------------------------------------------- */
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 20px;
  --mk-space-6: 24px;
  --mk-space-8: 32px;
  --mk-space-10: 40px;

  --mk-page-px: 24px;   /* padding horizontal de página — comprimido para que quepa más sin scroll */
  --mk-page-pt: 16px;   /* padding top de página */
  --mk-page-pb: 20px;   /* padding bottom de página */
  --mk-block-gap: 12px; /* gap único entre bloques apilados */

  /* ---------------------------------------------------------------------------
   * ALTURAS / DIMENSIONES DE LAYOUT
   * SYNC: page-chrome.tsx (h-14) · module-top-bar.tsx (h-14) · sidebar.tsx (w-60/w-16)
   *       · data-table.tsx (px-4 py-3) · quote-items-table.tsx (denso)
   * ------------------------------------------------------------------------- */
  --mk-header-h: 44px;      /* franja/header sticky — comprimida (era 56px/h-14) */
  --mk-header-px: 20px;     /* padding horizontal de la franja */
  --mk-sidebar-w: 240px;    /* sidebar expandida (w-60) */
  --mk-sidebar-rail-w: 64px;/* sidebar colapsada, solo iconos (w-16) */
  --mk-sidebar-drawer-w: 288px; /* drawer móvil (w-72) */

  /* Tabla ESTÁNDAR (listados, CRM, embudo) — data-table.tsx: celdas px-4 py-3, text-xs */
  --mk-table-cell-px: 16px;   /* px-4 */
  --mk-table-cell-py: 12px;   /* py-3 */
  --mk-table-row-h: 44px;     /* alto de fila de contenido (12px texto + 2×12 padding ≈ 44px) */
  --mk-table-head-h: 44px;    /* header comparte padding; el TH va en text-xs uppercase muted */

  /* Tabla del COTIZADOR (/cotizar, editor de líneas) — quote-items-table.tsx: más densa */
  --mk-quote-cell-px: 10px;   /* px-2.5 */
  --mk-quote-cell-py: 8px;    /* py-2 */
  --mk-quote-row-h: 58px;     /* min-h de fila con descuento inline (min-h-[58px]) */
  --mk-quote-head-h: 30px;    /* header sticky denso (py-1.5 + text-[10px] uppercase) */
  --mk-quote-head-size: 10px; /* tamaño del header de esta tabla (excepción micro-UI a la escala 12px) */

  /* Avatares e iconos */
  --mk-item-avatar: 40px;   /* tile de avatar de ítem en el detalle de cotización (ver pantallazo 03b) */
  --mk-item-avatar-sm: 30px;/* tile compacto (scan rows, h-[30px]) */
  --mk-icon: 16px;          /* icono base Lucide (h-4 w-4) */
  --mk-icon-lg: 20px;       /* icono en botón grande (h-5 w-5) */
  --mk-icon-sm: 12px;       /* icono en badge/sidebar header (h-3 w-3) */
  --mk-dot: 7px;            /* punto de estado "en línea" / dot de nav (h-[7px]) */
}

/* =============================================================================
 * OVERRIDE MOBILE (≤767px) — decisión de MARKETING, no de producto.
 * -----------------------------------------------------------------------------
 * Pedido explícito de BBC: que el mockup se vea más denso/compacto en mobile
 * (referencia recerc.com/es), aunque eso signifique dejar de ser 1:1 con la
 * app real en ese ancho — la app real (apps/web) no tiene esta escala más
 * chica, es exclusiva de cómo se EXHIBE el mockup en la landing mobile.
 * Confirmado explícitamente antes de tocar este archivo (ver docs/
 * RESPONSIVE-STANDARDS.md, "compresión tipográfica del mockup"). No propagar
 * estos valores de vuelta a la app real ni asumir que están sincronizados.
 * ========================================================================== */
@media (max-width: 767px) {
  :root {
    --mk-text-2xs: 9px;
    --mk-text-xs: 10px;
    --mk-text-nav: 10px;
    --mk-text-panel: 11px;
    --mk-text-base: 11px;
    --mk-text-lg: 12px;
    --mk-text-2xl: 15px;
    --mk-text-3xl: 17px;

    --mk-page-px: 14px;
    --mk-page-pt: 10px;
    --mk-page-pb: 14px;
    --mk-header-h: 36px;

    /* Stage claro (ver mockup.html body + #producto en index.html): el
       --mk-frame-border rgba(255,255,255,.08) es invisible sobre fondo
       claro (se diseñó para contrastar contra --mk-stage-grad oscuro).
       Pasa a gris-acero sólido — el MISMO tono que --steel-200 de
       index.html (mockup.html es un documento aparte, sin acceso a esos
       tokens, así que se replica el valor acá). Se reusa este mismo
       token para el borde exterior (.mockup-embed-wrap en index.html,
       coordinado a mano) Y para el divisor interno chat↔cotización (ver
       .cflow-side más abajo) — una sola línea de diseño consistente en
       vez de bordes de colores distintos sin relación entre sí (feedback
       de BBC: "no habla nada con el brandbook"). Ajustado dos veces más
       después: en dispositivo real se seguía leyendo "transparente" —
       coordinado a mano con .mockup-embed-wrap en index.html (mismo
       valor exacto en ambas pasadas).
       2026-07-22 (BDA, 1ª vuelta): probó azul de marca (--mk-brand,
       hsl 207 38% 28%) acá y en .mockup-embed-wrap — con los dos bordes
       del mismo color se notó que eran DOS bordes concéntricos (el de
       .mockup-embed-wrap + este), no uno. Se sacó el borde del wrap en
       index.html; este vuelve a ser el único borde visible, así que
       vuelve también al gris-acero (no hace falta el azul saturado si ya
       no compite con un segundo borde). */
    --mk-frame-border: hsl(207 20% 52%);
    /* Mismo motivo que --mk-frame-border: el shadow original (40-80px de
       blur, pensado para "elevar" sobre el stage oscuro de desktop) se
       ve como un degradado difuso sobre fondo claro — tapa el borde
       sólido de arriba. Se achica a una sombra chica y ajustada. */
    --mk-frame-shadow: 0 2px 8px -4px rgba(41, 43, 41, .12);
  }
}

/* =============================================================================
 * INCONSISTENCIAS DETECTADAS en el design system real (NO resueltas — para decidir)
 * -----------------------------------------------------------------------------
 * 1. DARK MODE — doc vs código.
 *    styles.css tiene un bloque `.dark` completo (paleta oscura token por token),
 *    pero DESIGN.md §9 dice literal "No tiene dark mode. Better es light/crema; el
 *    sistema es solo claro a propósito". El código ya adoptó oscuro; el doc quedó
 *    atrás. Para el mockup NO afecta (la landing es modo claro y tomo el bloque
 *    :root). Solo lo dejo marcado por si querés que alguien alinee el DESIGN.md.
 *
 * 2. PUNTO DEL LOGO — RESUELTO y ya alineado con la app.
 *    origin/main dibuja el punto del monograma "m." con `text-primary` (azul acero
 *    #2C4A63): sidebar.tsx MandinoBrand → `<span className="text-primary">.</span>`.
 *    El mockup usa --mk-logo-dot = var(--mk-brand) (mismo acero). No hay divergencia
 *    con la app real: el "punto verde" del brandbook viejo quedó atrás.
 *
 * 3. DOS DENSIDADES DE TABLA (no es bug, es intención — pero son dos alturas).
 *    La tabla estándar (data-table.tsx) usa px-4 py-3 (~44px/fila); la del cotizador
 *    (quote-items-table.tsx) es más densa (py-2, header de 10px). DESIGN.md §6 lo
 *    respalda ("en tablas densas se mantiene la densidad propia"). Expuse las DOS
 *    (--mk-table-* y --mk-quote-*). Si una vista del mockup necesita otra densidad,
 *    preguntame antes de inventar un tercer valor.
 * ========================================================================== */