/* ========================================================================== LIVIT · PRIMITIVAS v1.0 Capa maestra. Se apoya SOLO en los roles de livit-tokens.css. Ninguna página vuelve a declarar un HEX, un radio o un tamaño de letra. Orden de inyección obligatorio: livit-fonts.css -> livit-tokens.css -> livit-primitives.css Lo hace stamp.py. No copiar este archivo dentro de una página a mano. ========================================================================== */ :root{ /* ── radios en px ────────────────────────────────────────────────────── livit-tokens.css los guarda sin unidad porque también alimenta las variables de Figma. Aquí se convierten una vez, para todo el sistema. */ --r-none:0; --r-xs:calc(var(--radius-xs) * 1px); --r-sm:calc(var(--radius-sm) * 1px); --r-md:calc(var(--radius-md) * 1px); --r-lg:calc(var(--radius-lg) * 1px); --r-xl:calc(var(--radius-xl) * 1px); --r-2xl:calc(var(--radius2xl) * 1px); --r-3xl:calc(var(--radius3xl) * 1px); --r-4xl:calc(var(--radius3xl) * 1px + 8px); --r-full:999px; /* Mapa de radios - a mayor elemento, mayor radio (CLAUDE.md 4). Decidido 27 ago 2026: el sistema sube al radio de la home. chip, pill, boton ....... --r-full 999 campo, control .......... --r-lg 8 tarjeta, panel .......... --r-2xl 16 tarjeta destacada, contenedor de pagina .... --r-3xl 24 El boton es pildora en toda la casa - home, web, SOW y NDA ya lo eran. Ponerlo en 8 habria cambiado el caracter de todo, que es justo lo que esta decision evita. */ /* ── espaciado en px ── */ --sp-2:calc(var(--space2) * 1px); --sp-4:calc(var(--space4) * 1px); --sp-6:calc(var(--space6) * 1px); --sp-8:calc(var(--space8) * 1px); --sp-10:calc(var(--space10)* 1px); --sp-12:calc(var(--space12)* 1px); --sp-16:calc(var(--space16)* 1px); --sp-20:calc(var(--space20)* 1px); --sp-24:calc(var(--space24)* 1px); --sp-32:calc(var(--space32)* 1px); --sp-40:calc(var(--space40)* 1px); --sp-48:calc(var(--space48)* 1px); --sp-64:calc(var(--space64)* 1px); --sp-80:calc(var(--space80)* 1px); --sp-96:calc(var(--space96)* 1px); /* ── escala de interfaz · Inter ──────────────────────────────────────── */ --fs-displayL:40px; --lh-displayL:48px; --fs-displayS:30px; --lh-displayS:38px; --fs-headline:24px; --lh-headline:32px; --fs-titleL:18px; --lh-titleL:26px; --fs-titleM:15px; --lh-titleM:22px; --fs-titleS:13px; --lh-titleS:18px; --fs-bodyL:15px; --lh-bodyL:24px; --fs-bodyM:13px; --lh-bodyM:20px; /* por defecto */ --fs-bodyS:12px; --lh-bodyS:18px; --fs-labelL:13px; --lh-labelL:16px; --fs-labelM:12px; --lh-labelM:16px; --fs-labelS:11px; --lh-labelS:14px; /* Micro. Sustituye a los seis valores sueltos que usaba la home (8 / 8.5 / 9 / 9.5 / 10 / 10.5). Solo en mayusculas y con tracking: nunca cuerpo de texto. */ --fs-labelXS:10px; --lh-labelXS:14px; /* ── escala de canvas · DM Sans (piezas que ve el cliente) ───────────── */ --fs-cDisplayL:57px; --lh-cDisplayL:64px; /* 21 sep 2026: entre 57 y 96 no habia nada -un salto de 1,68x- y el filete de manifiesto del deck se queda en medio. XL pasa a ser ese escalon (57 x 1,33, justo la regla de contraste de la escala) y el hero del sitio, que no se mueve, pasa a llamarse 2XL. Solo lo usaban dos reglas. */ --fs-cDisplayXL:76px; --lh-cDisplayXL:76px; /* ceñido, como el resto de la familia display */ --fs-cDisplay2XL:96px;--lh-cDisplay2XL:76px; /* hero del sitio publico y portada del deck */ --fs-cDisplayM:46px; --lh-cDisplayM:50px; /* cabecera de seccion */ --fs-cDisplayS:36px; --lh-cDisplayS:44px; --fs-cTitleXL:30px; --lh-cTitleXL:34px; /* titular de bloque y de card */ --fs-cHeadline:28px; --lh-cHeadline:36px; --fs-cTitleL:22px; --lh-cTitleL:28px; --fs-cTitleM:16px; --lh-cTitleM:24px; --fs-cBodyL:16px; --lh-cBodyL:26px; --fs-cBodyM:14px; --lh-cBodyM:22px; --fs-cLabelL:14px; --lh-cLabelL:20px; --fs-cLabelM:12px; --lh-cLabelM:16px; --fs-cLabelS:11px; --lh-cLabelS:16px; --fs-cLabelXS:9px; --lh-cLabelXS:12px; /* sub-puntos del Menu 360 */ /* ── alturas · cinco, no nueve. 28 chip y badge · 32 caja de icono, fila de cabecera, control pequeno 38 control por defecto · 44 control grande y fila de tabla 52 barra superior, la misma en la home y en cada herramienta ── */ /* --ctl-bar 52 → 56 (Pedro, 29 sep 2026): a 52 los mandos de 38 quedaban a 7 px del borde y la cabecera se veía apretada; 56 da 9 px y cae en la retícula de 8. */ --ctl-xs:28px; --ctl-sm:32px; --ctl-md:38px; --ctl-lg:44px; --ctl-bar:56px; /* ── movimiento ─────────────────────────────────────────────────────── livit-tokens.css cubre controles pequeños. Una tarjeta de 300 px con motion-standard (0.2,0,0,1) arranca de golpe y se percibe tosca: las superficies grandes llevan su propia curva. */ --motion-surface:360ms cubic-bezier(.22,.61,.36,1); /* Duracion y curva por separado. livit-tokens.css las da unidas (--motion-fast: 200ms cubic-bezier(...)), que sirve para `transition: opacity var(--motion-fast)` pero no para componer `transition: color var(--m-fast) var(--e1)`. Mismos valores, partidos. */ --e1:cubic-bezier(0,0,.2,1); /* estandar, entrada */ --e2:cubic-bezier(.2,0,0,1); /* enfatizado, salida */ --e3:cubic-bezier(.34,1.56,.64,1); /* rebote, solo confirmaciones */ --e-soft:cubic-bezier(.22,.61,.36,1); /* superficies grandes */ --m-instant:100ms; --m-fast:200ms; --m-std:300ms; --m-slow:450ms; /* ── papel ──────────────────────────────────────────────────────────── Los documentos comerciales no tienen modo oscuro: el papel es papel. Valores fijos de la misma paleta, nunca dependientes de tema. */ --paper-bg:var(--neutral-0); --paper-text:var(--neutral-900); --paper-body:var(--neutral-700); --paper-meta:var(--neutral-600); --paper-rule:var(--neutral-150); --paper-label:var(--brand-600); --paper-accent:var(--brand-500); } /* ══ base ═══════════════════════════════════════════════════════════════ */ .lv{font-family:var(--font-ui);font-size:var(--fs-bodyM);line-height:var(--lh-bodyM); color:var(--text-primary);background:var(--bg-base); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .lv *,.lv *::before,.lv *::after{box-sizing:border-box} /* El reset va en :where() para tener especificidad cero. Si no, `.lv button` (0,1,1) le gana a `.lv-btn--primary` (0,1,0) y los botones salen sin fondo. */ :where(.lv) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} :where(.lv) a{color:inherit;text-decoration:none} .lv-cv{font-family:var(--font-canvas)} /* EL MAGENTA QUE ES TEXTO NO ES EL MAGENTA QUE ES RELLENO. #E6007E sobre cualquier superficie del sistema da 4,15 y no llega a AA en texto pequeño, que es justo donde más se usaba: pestañas, etiquetas de rol, «Abrir», encabezados de bloque. El relleno, la marca y el acento serif de >=24 px siguen en --brand-primary; el texto va a --text-accent (brand-300 en oscuro, brand-600 en claro), que da 7,2 y 5,8. (Pedro, 24 sep 2026) */ .lv-it{font-family:var(--font-accent);font-style:italic;color:var(--brand-primary)} .lv-mono{font-family:var(--font-mono)} /* El foco visible nunca se elimina. Es el único estado no opcional. */ .lv :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px} .lv-btn,.lv-card{-webkit-appearance:none;appearance:none;text-align:left} /* ══ tipografía ═════════════════════════════════════════════════════════ */ .t-displayL{font-size:var(--fs-displayL);line-height:var(--lh-displayL)} .t-displayS{font-size:var(--fs-displayS);line-height:var(--lh-displayS)} .t-headline{font-size:var(--fs-headline);line-height:var(--lh-headline);font-weight:500;letter-spacing:-.014em} .t-titleL{font-size:var(--fs-titleL);line-height:var(--lh-titleL);font-weight:500} .t-titleM{font-size:var(--fs-titleM);line-height:var(--lh-titleM);font-weight:500} .t-titleS{font-size:var(--fs-titleS);line-height:var(--lh-titleS);font-weight:600} .t-bodyL{font-size:var(--fs-bodyL);line-height:var(--lh-bodyL)} .t-bodyM{font-size:var(--fs-bodyM);line-height:var(--lh-bodyM)} .t-bodyS{font-size:var(--fs-bodyS);line-height:var(--lh-bodyS)} .t-labelL{font-size:var(--fs-labelL);line-height:var(--lh-labelL);font-weight:500} .t-labelM{font-size:var(--fs-labelM);line-height:var(--lh-labelM);font-weight:500} .t-labelS{font-size:var(--fs-labelS);line-height:var(--lh-labelS);font-weight:600; letter-spacing:.12em;text-transform:uppercase} .t-labelXS{font-size:var(--fs-labelXS);line-height:var(--lh-labelXS);font-weight:600; letter-spacing:.14em;text-transform:uppercase} .t-cDisplayL{font-family:var(--font-canvas);font-size:var(--fs-cDisplayL); line-height:var(--lh-cDisplayL);font-weight:400;letter-spacing:-.03em} .t-cDisplayM{font-family:var(--font-canvas);font-size:var(--fs-cDisplayM); line-height:var(--lh-cDisplayM);font-weight:400;letter-spacing:-.03em} .t-cDisplayS{font-family:var(--font-canvas);font-size:var(--fs-cDisplayS); line-height:var(--lh-cDisplayS);font-weight:400;letter-spacing:-.025em} .t-cTitleXL{font-family:var(--font-canvas);font-size:var(--fs-cTitleXL); line-height:var(--lh-cTitleXL);font-weight:400;letter-spacing:-.024em} .t-cHeadline{font-family:var(--font-canvas);font-size:var(--fs-cHeadline); line-height:var(--lh-cHeadline);font-weight:400;letter-spacing:-.02em} .t-cTitleL{font-family:var(--font-canvas);font-size:var(--fs-cTitleL); line-height:var(--lh-cTitleL);font-weight:500} .t-cTitleM{font-family:var(--font-canvas);font-size:var(--fs-cTitleM); line-height:var(--lh-cTitleM);font-weight:500} .t-cBodyL{font-family:var(--font-canvas);font-size:var(--fs-cBodyL);line-height:var(--lh-cBodyL)} .t-cBodyM{font-family:var(--font-canvas);font-size:var(--fs-cBodyM);line-height:var(--lh-cBodyM)} /* ══ botón · uno, con variantes y tres tallas ═══════════════════════════ */ .lv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8); height:var(--ctl-md);padding:0 var(--sp-16);border-radius:var(--r-lg); /* radio 8, no píldora (Pedro, 17 sep 2026): la píldora queda para estados y contadores */ font-size:var(--fs-titleS);line-height:1;font-weight:500;white-space:nowrap; border:1px solid transparent; transition:background var(--motion-fast),color var(--motion-fast), border-color var(--motion-fast),box-shadow var(--motion-fast)} .lv-btn--sm{height:var(--ctl-sm);padding:0 var(--sp-12);font-size:var(--fs-labelM)} .lv-btn--lg{height:var(--ctl-lg);padding:0 var(--sp-20);font-size:var(--fs-titleM)} .lv-btn svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor; stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} /* Botón de peligro. En reposo va en CONTORNO, no relleno: en Administración había 54 «Dar de baja» en rojo sólido, uno por persona, y eran el elemento más saturado y más repetido de toda la plataforma —se entraba en la pantalla por ellos y no por los nombres—. Además el blanco sobre el rojo daba 3,65 y no llegaba a AA. Un destructivo se anuncia; se rellena en la confirmación, donde es la única acción de la pantalla. (Pedro, 24 sep 2026) */ .lv-btn--danger{background:transparent;color:var(--status-error-text); border:1px solid var(--status-error-border)} .lv-btn--danger:hover{background:var(--status-error-bg);border-color:var(--status-error)} /* dentro de un diálogo de confirmación sí va relleno: ahí ya es LA acción */ :is(.lv-modal,.lv-dialog,[role="alertdialog"],[role="dialog"]) .lv-btn--danger{ background:var(--status-error);color:var(--text-on-accent);border-color:transparent} :is(.lv-modal,.lv-dialog,[role="alertdialog"],[role="dialog"]) .lv-btn--danger:hover{ background:var(--status-error-hover);border-color:transparent} .lv-btn--primary{background:var(--brand-primary);color:var(--text-on-accent)} .lv-btn--primary:hover{background:var(--brand-primary-hover)} .lv-btn--primary:active{background:var(--brand-primary-active)} /* Jerarquía de botón (2 sep 2026, Pedro): el relleno magenta es SOLO para el CTA que cierra el flujo -Generar documento, Generar presentación, Imprimir-. Avanzar de paso es --solid (relleno neutro inverso), retroceder es --ghost. Así el magenta señala una sola cosa en cada pantalla. */ .lv-btn--solid{background:var(--surface-inverse);color:var(--text-on-inverse)} .lv-btn--solid:hover{background:color-mix(in srgb,var(--surface-inverse) 86%,var(--bg-base))} .lv-btn--solid:active{background:color-mix(in srgb,var(--surface-inverse) 76%,var(--bg-base))} .lv-btn--outline{border-color:var(--border-default);color:var(--text-secondary)} .lv-btn--outline:hover{border-color:var(--border-strong);color:var(--text-primary)} .lv-btn--ghost{color:var(--text-tertiary)} .lv-btn--ghost:hover{color:var(--text-primary); background:color-mix(in srgb,var(--text-primary) calc(var(--state-hover)*100%),transparent)} .lv-btn[disabled],.lv-btn[aria-disabled="true"]{ background:color-mix(in srgb,var(--text-primary) calc(var(--state-disabled-surface)*100%),transparent); color:var(--text-disabled);border-color:transparent;cursor:not-allowed} /* Botón BLOQUEADO por rol (19 sep 2026, Pedro). Son tres estados distintos y conviene no confundirlos nunca: · deshabilitado → «ahora no»: falta rellenar algo, y en cuanto lo rellenes se enciende. Fondo apagado, sin borde. · discontinuo → «todavía no existe» (.lv-card--quiet, las tarjetas «Próximamente»). · bloqueado → «existe, funciona, y no es para tu rol». Por eso este conserva el borde entero del contorno y solo baja el texto: no tiene que parecer roto, tiene que parecer de otro. El candado lo pone el kit —no cada pantalla—, y el motivo va en su `title`, que el tooltip de la casa recoge solo. Sigue siendo pulsable a propósito: el clic es lo que dispara el aviso, así que lleva aria-disabled pero NO el atributo disabled. */ .lv-btn--locked,.lv-btn--locked[aria-disabled="true"]{ background:transparent;border-color:var(--border-default); color:var(--text-tertiary);cursor:not-allowed} .lv-btn--locked:hover,.lv-btn--locked[aria-disabled="true"]:hover{ background:transparent;border-color:var(--border-strong);color:var(--text-secondary)} .lv-btn--locked svg{opacity:.75} /* ══ campo ══════════════════════════════════════════════════════════════ */ .lv-field{display:flex;flex-direction:column;gap:var(--sp-6);margin-bottom:var(--sp-12)} /* En una fila (color + hex, fecha + duración) el campo no lleva el margen de la columna: catorce sitios lo anulaban con un `mb-0!` de Tailwind sobre el kit. */ .lv-field--tight{margin-bottom:0} /* Prefijo pintado dentro del campo (#, €, %): el símbolo no se escribe ni se selecciona, y el texto arranca después de él. */ .lv-input--prefix{position:relative;display:flex;align-items:center;width:100%} .lv-input--prefix>span{position:absolute;left:var(--sp-12);pointer-events:none; font-size:var(--fs-bodyS);color:var(--text-muted)} .lv-input--prefix>input:not(#_){padding-left:calc(var(--sp-12) + 11px)} .lv-field>label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-8); font-size:var(--fs-labelM);line-height:var(--lh-labelM);font-weight:600;color:var(--text-secondary)} .lv-field>label em,.lv-field>label span{font-style:normal;font-weight:400; color:var(--text-muted)} /* Contador de caracteres «n/max» (Pedro, 6 sep 2026): a la derecha del rótulo, en mono 11 apagado. Avisa en ámbar cuando quedan ≤ 10 % (o ≤ 10 caracteres) y en rojo al llegar al límite. Vale dentro del label de .lv-field o suelto junto a un eyebrow. */ .lv-field-count{margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:var(--fs-labelS);line-height:var(--lh-labelS); font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-muted);font-variant-numeric:tabular-nums} .lv-field-count.is-near{color:var(--status-warning-text)} .lv-field-count.is-over{color:var(--status-error-text)} /* ══ Subida de archivo (7 sep) ══════════════════════════════════════════ Traer un archivo del ordenador. El icono file-up marca SIEMPRE eso, y solo eso: distingue subir de pegar una URL, que es la otra vía del mismo bloque. Dos estados. Vacío: el botón de contorno a todo el ancho de su columna (es un campo, no un pie de acciones) y la ayuda de formatos debajo. Con archivo: una fila de campo relleno —miniatura, nombre y meta— con su papelera dentro, y el botón pasa a «Cambiar». Antes solo cambiaba el verbo del botón y el panel no decía cuál era el archivo. */ .lv-upload{display:flex;flex-direction:column;gap:var(--sp-6)} .lv-upload>.lv-btn{width:100%} .lv-upload-file{display:flex;align-items:center;gap:var(--sp-8);height:var(--ctl-md); padding:0 var(--sp-6);border-radius:var(--r-lg); background:var(--bg-default);border:1px solid var(--border-default)} .lv-upload-thumb{display:flex;align-items:center;justify-content:center;flex:0 0 auto; width:26px;height:26px;border-radius:var(--r-sm);overflow:hidden; background:var(--surface-raised);border:1px solid var(--border-subtle);color:var(--text-tertiary)} .lv-upload-thumb>img{width:100%;height:100%;object-fit:cover;display:block} .lv-upload-thumb>svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .lv-upload-name{flex:1 1 auto;min-width:0;font-size:var(--fs-bodyS);color:var(--text-primary); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lv-upload-meta{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:var(--fs-labelXS); color:var(--text-muted);font-variant-numeric:tabular-nums} .lv-upload.is-busy{opacity:.6;pointer-events:none} .lv-field--narrow{max-width:620px} /* El control llena el campo aunque venga envuelto (combobox): mismo ancho que un input suelto. */ .lv-field .lv-input,.lv-field>div>.lv-input, .lv-field>:is(input,select,textarea):not([type=checkbox],[type=radio],[type=range],[type=color]){width:100%;min-width:0} .lv-field{min-width:0} /* El campo va HUNDIDO respecto al panel: fondo un paso mas oscuro que la superficie y filete de --border-default. Es el estilo del paso Legal del SOW, y desde el 31 ago 2026 es la norma para todo campo de texto. */ .lv-input,.lv-field :is(input,select,textarea){height:var(--ctl-md); padding:0 var(--sp-12);border-radius:var(--r-lg); background:var(--bg-default);border:1px solid var(--border-default); color:var(--text-primary);font-family:var(--font-ui);font-size:var(--fs-bodyM); transition:border-color var(--motion-fast),box-shadow var(--motion-fast)} .lv-input::placeholder,.lv-field :is(input,textarea)::placeholder{ color:var(--text-placeholder)} .lv-input:focus,.lv-field :is(input,select,textarea):focus{outline:none; border-color:var(--border-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 20%,transparent)} .lv-field textarea{height:auto;min-height:calc(var(--ctl-md) * 2); padding:var(--sp-10) var(--sp-12);line-height:var(--lh-bodyM);resize:none} .lv-field :is(input,select,textarea):disabled{opacity:.38;cursor:not-allowed} /* Ayuda y error bajo el control; el error también tiñe el filete. */ .lv-field-help,.lv-field-error{font-size:var(--fs-labelS);line-height:var(--lh-labelS); color:var(--text-muted)} .lv-field-error{color:var(--status-error-text)} .lv-field.is-error :is(input,select,textarea){border-color:var(--status-error)} /* Un control suelto también puede estar en error: una celda de una tabla o de una lista no vive dentro de un .lv-field y hasta hoy no tenía cómo decirlo (20 sep 2026, las semanas que faltan en el alta a mano). */ .lv-input.is-error,.lv-input.is-error:focus{border-color:var(--status-error)} /* Dos campos a la par: 12 px entre ellos, como entre filas. */ /* minmax(0,1fr): el ancho intrinseco de un input (~180) no puede ensanchar la columna; sin esto, dos campos dentro de un dialogo de 440 se salen del cuadro (revision Pedro, 6 sep). */ .lv-fields-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--sp-12)} .lv-fields-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sp-12)} /* Campo que crece con su contenido (textarea sin asa, contenteditable del panel de textos del SOW, caja del chat): misma receta que el campo, alto automático desde 38, texto en varias líneas. `field-sizing:content` (9 sep 2026) es lo que hace que un TEXTAREA crezca de verdad —hasta hoy la clase lo prometía y solo lo cumplían los contenteditable—. Sin soporte del navegador se queda en su `rows`, que es el comportamiento de antes: degrada, no rompe. El tope se pasa por `--grow-max` y por defecto NO hay: así los paneles de texto del SOW, que usan esta clase sobre contenteditable, siguen creciendo sin límite. El kit lo fija en 5 líneas. */ .lv-input--grow,.lv-field .lv-input--grow{height:auto;min-height:var(--ctl-md);padding:var(--sp-8) var(--sp-12);line-height:var(--lh-bodyM); white-space:pre-wrap;overflow-wrap:anywhere;resize:none;display:block;width:100%; field-sizing:content;max-height:var(--grow-max,none);overflow-y:auto} .lv-input--grow:focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 20%,transparent)} .lv-fields-2>.lv-field--full,.lv-fields-3>.lv-field--full{grid-column:1 / -1} @media(max-width:760px){.lv-fields-2,.lv-fields-3{grid-template-columns:minmax(0,1fr)}} /* Selector de fecha. El icono nativo se pegaba a la derecha y no se veia; se mueve a la izquierda. Con color-scheme (abajo) Chromium ya lo pinta claro en oscuro y oscuro en claro: nada de invertirlo -invertido desaparecia contra el fondo (5 sep 2026)-, solo opacidad: .78 en reposo, 1 al pasar. */ .lv-field input[type="date"]{position:relative;padding-left:34px} .lv-field input[type="date"]::-webkit-calendar-picker-indicator{ position:absolute;left:var(--sp-10);top:50%;transform:translateY(-50%); margin:0;padding:0;width:16px;height:16px;cursor:pointer; filter:opacity(.78);transition:filter var(--motion-fast)} .lv-field input[type="date"]:hover::-webkit-calendar-picker-indicator, .lv-field input[type="date"]:focus::-webkit-calendar-picker-indicator{filter:opacity(1)} /* ══ controles nativos: siguen al tema ══════════════════════════════════ Lo que el navegador dibuja por su cuenta -la lista de un nativo, que desplegaba las 100 marcas de golpe en el estilo del sistema. Se escribe, aparecen hasta 8 coincidencias debajo con su logotipo; clic o Enter para elegir, Esc para limpiar. Decisión Pedro, 5 sep 2026. */ .lv-find{position:relative;max-width:320px;margin-top:var(--sp-6)} .lv-find>input{width:100%} .lv-find-res{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-6)} .lv-find-res:empty{display:none} .lv-find-res button{display:flex;align-items:center;gap:var(--sp-10);width:100%;height:var(--ctl-sm); padding:0 var(--sp-10);border-radius:var(--r-lg);border:1px solid transparent; background:var(--surface-raised);color:var(--text-primary);font-family:var(--font-ui); font-size:var(--fs-bodyS);cursor:pointer;text-align:left; transition:border-color var(--motion-fast),background var(--motion-fast)} .lv-find-res button:hover,.lv-find-res button.is-on{border-color:var(--border-accent); background:color-mix(in srgb,var(--brand-primary) 10%,var(--surface-raised))} /* El que crece es el RÓTULO, y se dice con su clase. Antes crecía cualquier `span` de la fila, y como la marca de la izquierda también es un span —un logotipo en el buscador de marcas, un avatar en el de personas— se repartía el ancho con el nombre: el avatar salía estirado en una pastilla de 103 px y todo parecía centrado (Pedro, 23 sep 2026). Misma familia que `.filtro-op>.t`. */ .lv-find-res button > *{flex:0 0 auto} .lv-find-res button > .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* El logotipo de la fila, sólo si cuelga directamente del botón: una foto dentro de un avatar no es un logotipo y no se recorta en blanco. */ .lv-find-res button > img{width:34px;height:17px;object-fit:contain; background:#fff;border-radius:3px;padding:1px} .lv-find-res button em{margin-left:auto;font-style:normal;color:var(--text-muted); font-size:var(--fs-labelS);white-space:nowrap} .lv-find-more{font-size:var(--fs-labelS);color:var(--text-muted);padding:var(--sp-4) var(--sp-10)} /* ══ diálogo · uno para toda la plataforma ═══════════════════════════════ Viene de Kore al sistema (Kit v1, 5 sep 2026). 440 de ancho (--md: 640), radio 24, superficie elevada, sombra modal, velo con desenfoque. El foco entra al primer control y vuelve al cerrar; Esc cierra (eso lo hace el componente, aquí solo la forma). */ .lv-scrim{position:fixed;inset:0;z-index:100;display:flex;align-items:center; justify-content:center;padding:var(--sp-24);overflow-y:auto; background:color-mix(in srgb,var(--bg-base) 70%,transparent);backdrop-filter:blur(2px)} .lv-dialog{width:100%;max-width:440px;border-radius:var(--r-3xl);padding:var(--sp-24); background:var(--surface-raised);color:var(--text-primary);box-shadow:var(--shadow-modal); outline:none} .lv-dialog--md{max-width:640px} .lv-dialog--lg{max-width:800px} .lv-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-16)} .lv-dialog-t{margin:0;font-size:var(--fs-titleL);line-height:var(--lh-titleL);font-weight:500; color:var(--text-primary)} .lv-dialog-d{margin:var(--sp-4) 0 0;font-size:var(--fs-bodyS);line-height:var(--lh-bodyS); color:var(--text-muted)} .lv-dialog-x{display:flex;align-items:center;justify-content:center;width:32px;height:32px; margin:-4px -8px 0 0;color:var(--text-muted);border-radius:var(--r-full); transition:color var(--motion-fast)} .lv-dialog-x:hover{color:var(--text-accent)} .lv-dialog-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round} .lv-dialog-body{margin-top:var(--sp-20)} .lv-dialog-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-8); margin-top:var(--sp-24)} .lv-dialog-foot>.lv-nav-note{margin-right:auto} /* Diálogo LARGO (revisión del alcance de un SOW, listas de documentos): el cuerpo se lleva el scroll y la cabecera y el pie se quedan quietos, en vez de crecer el diálogo entero por fuera de la pantalla y dejar los botones donde no se ven. No es el comportamiento por defecto a propósito: un cuerpo con scroll RECORTA los desplegables que nacen dentro (combobox, calendario, menú), así que se pide con solo donde no los hay. El -12/+12 del cuerpo es para que el fondo de una fila al pasar y el foco no queden cortados contra el borde. */ .lv-dialog--scroll{display:flex;flex-direction:column;max-height:calc(100vh - 48px)} .lv-dialog--scroll>.lv-dialog-head,.lv-dialog--scroll>.lv-dialog-foot{flex:0 0 auto} .lv-dialog--scroll>.lv-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto; overscroll-behavior:contain;margin-inline:calc(var(--sp-12)*-1);padding-inline:var(--sp-12)} /* Aviso dentro de un diálogo o panel: fondo tenue del estado, filete a la mezcla. */ .lv-note{padding:var(--sp-10) var(--sp-12);border-radius:var(--r-xl); font-size:var(--fs-bodyS);line-height:var(--lh-bodyS); background:var(--status-info-bg);border:1px solid var(--status-info-border);color:var(--status-info-text)} .lv-note--warning{background:var(--status-warning-bg);border-color:var(--status-warning-border);color:var(--status-warning-text)} .lv-note--error{background:var(--status-error-bg);border-color:var(--status-error-border);color:var(--status-error-text)} .lv-note--success{background:var(--status-success-bg);border-color:var(--status-success-border);color:var(--status-success-text)} /* Aviso con contenido (6 sep 2026): título, lista de detalle y acciones. El color del estado queda en el título y en lo destacado; el detalle va en texto normal. */ /* Nota de persistencia: una línea de pie que dice si lo que se escribe ahí se guarda, y dónde. Formato «Estado (detalle)» (Pedro, 7 sep): una sola línea, sin frases explicativas encima. El punto lleva el significado — verde se guarda · gris solo lienzo, a propósito · ámbar debería guardarse y no puede — y si el texto no cabe se recorta con elipsis y queda entero en el tooltip. */ .lv-sync{display:flex;align-items:center;gap:var(--sp-6);min-width:0; font-size:var(--fs-labelS);line-height:var(--lh-labelS);color:var(--text-muted)} .lv-sync>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Toast: es .lv-note flotando, no una forma nueva. Una sola posición en toda la casa (Pedro, 7 sep): abajo-centro DEL BLOQUE que falló y dentro de él — en un lienzo de ocho bloques la posición es lo que dice cuál falló, porque el mensaje no siempre lo dice. Antes: tres copias abajo-centro con caja neutra y una cuarta abajo-derecha, fuera del bloque y encima del siguiente. El padre marca `position:relative`; el tono y el color los pone .lv-note. */ .lv-toast{position:absolute;left:50%;bottom:var(--sp-12);transform:translateX(-50%);z-index:60; width:max-content;max-width:calc(100% - var(--sp-32));box-shadow:var(--shadow-lift); animation:lv-toast-in var(--motion-standard) ease-out} @keyframes lv-toast-in{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}} @media(prefers-reduced-motion:reduce){.lv-toast{animation:none}} .lv-note--rich{padding:var(--sp-16) var(--sp-20);color:var(--text-secondary)} /* márgenes: revisión Pedro, 6 sep */ .lv-note--rich>.lv-note-t{display:block;font-size:var(--fs-labelL);line-height:var(--lh-labelL);font-weight:600;margin-bottom:var(--sp-12)} .lv-note--warning.lv-note--rich>.lv-note-t,.lv-note--warning.lv-note--rich b{color:var(--status-warning-text)} .lv-note--error.lv-note--rich>.lv-note-t,.lv-note--error.lv-note--rich b{color:var(--status-error-text)} .lv-note--success.lv-note--rich>.lv-note-t,.lv-note--success.lv-note--rich b{color:var(--status-success-text)} .lv-note--rich>.lv-note-t{color:var(--status-info-text)} .lv-note--rich ul{list-style:none;margin:0 0 var(--sp-12);padding:0} .lv-note--rich li{margin-bottom:var(--sp-8)} .lv-note--rich li:last-child{margin-bottom:0} .lv-note--rich li>em{display:block;font-style:normal;font-size:var(--fs-labelXS);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:2px} .lv-note--rich li>span{display:block;line-height:var(--lh-bodyM)} .lv-note--rich li>span>i{font-style:normal;font-variant-numeric:tabular-nums;font-size:var(--fs-labelM);color:var(--text-muted);margin-right:var(--sp-4);font-variant-numeric:tabular-nums} .lv-note--rich>.lv-note-actions{display:flex;gap:var(--sp-8);margin-top:var(--sp-12)} /* ══ popover de lista · la lista de un combobox o de un menú de acciones (.lv-pop: .lv-menu es el Menú 360 del deck) ══ Misma superficie que el diálogo, radio 12, sombra modal; la fila es de 32 (control compacto) con el tinte magenta en la elegida. */ .lv-pop{position:absolute;z-index:40;left:0;right:0;margin-top:var(--sp-4); padding:var(--sp-4);border-radius:var(--r-xl);background:var(--surface-raised); border:1px solid var(--border-subtle);box-shadow:var(--shadow-modal)} .lv-pop-list{max-height:240px;overflow:auto;margin:0;padding:0;list-style:none} .lv-pop-item{display:flex;align-items:center;gap:var(--sp-10);width:100%; min-height:var(--ctl-sm);padding:0 var(--sp-10);border-radius:var(--r-lg); font-size:var(--fs-bodyM);line-height:var(--lh-bodyM);color:var(--text-primary); text-align:left;cursor:pointer;transition:background var(--motion-fast)} .lv-pop-item:hover,.lv-pop-item.is-hi{background:color-mix(in srgb,var(--text-primary) 6%,transparent)} .lv-pop-item.is-on{background:color-mix(in srgb,var(--brand-primary) 14%,transparent)} .lv-pop-item svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .lv-pop-item>.chk{margin-left:auto;color:var(--text-accent)} .lv-pop-item:disabled,.lv-pop-item[aria-disabled="true"]{color:var(--text-disabled);cursor:not-allowed;background:none} .lv-pop-empty{padding:var(--sp-8) var(--sp-10);font-size:var(--fs-bodyS);color:var(--text-muted)} .lv-pop-search{padding:var(--sp-4) var(--sp-4) var(--sp-8);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--sp-4)} .lv-pop-search input{height:var(--ctl-sm);font-size:var(--fs-bodyS)} /* Casilla · diseño «contorno» (Pedro, 2 oct 2026, elegida entre cuatro en una maqueta). El magenta MARCA pero no ocupa: borde y check en acento sobre un velo al 14 %, nunca un bloque relleno. 18 px. El check se dibuja al entrar (220 ms); .is-still lo deja quieto cuando la casilla se repinta sin haber cambiado -los asistentes HTML repintan el panel entero en cada clic-. Vale para el menú múltiple (Combobox) y para las listas de .lv-listrow--check. */ .lv-check{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border-radius:var(--r-sm);border:1.5px solid var(--border-strong);flex:0 0 auto;color:var(--text-accent); transition:background var(--motion-fast),border-color var(--motion-fast)} :hover>.lv-check:not(.is-on){border-color:var(--text-secondary)} .lv-check.is-on{border-color:var(--text-accent);background:color-mix(in srgb,var(--brand-primary) 14%,transparent)} .lv-check svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:30;animation:lv-check-draw 220ms cubic-bezier(.2,0,0,1) both} .lv-check.is-still svg{animation:none} @keyframes lv-check-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){.lv-check svg{animation:none}} /* etiqueta elegida dentro de un campo múltiple */ .lv-tag{display:inline-flex;align-items:center;gap:var(--sp-4);height:22px;padding:0 var(--sp-8); border-radius:var(--r-full);background:color-mix(in srgb,var(--text-primary) 8%,transparent); font-size:var(--fs-labelM);color:var(--text-primary);white-space:nowrap} .lv-tag button{display:flex;color:var(--text-muted)} .lv-tag button:hover{color:var(--text-accent)} .lv-tag svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} /* La misma etiqueta con un DATO LITERAL en vez de una elección: la fuente de una respuesta del asistente, un identificador, el correo de la sesión de desarrollo. Mono, que es lo que el kit reserva para códigos y metadatos, y más apagada porque no se puede quitar: no lleva aspa. (7 sep) */ .lv-tag--code{height:20px;font-family:var(--font-mono);font-size:var(--fs-labelXS); font-weight:500;letter-spacing:.02em;color:var(--text-tertiary); background:color-mix(in srgb,var(--text-primary) 6%,transparent)} /* Insignia de sesión de desarrollo: la misma pieza en ámbar. La posición la pone quien la usa; no es producto, pero tampoco merece un dibujo aparte. */ .lv-tag--warn{background:var(--status-warning-bg);color:var(--status-warning-text); border:1px solid var(--status-warning-border)} /* campo que contiene tags (multi-select): crece con el contenido */ .lv-input--tags{height:auto;min-height:var(--ctl-md);display:flex;flex-wrap:wrap; align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-8)} /* el control de un combobox lleva chevron como el select */ .lv-input--combo:not(#_){padding-right:34px;text-align:left;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right var(--sp-10) center;background-size:16px 16px} [data-theme="light"] .lv-input--combo:not(#_){ background-image:url("data:image/svg+xml;utf8,")} /* ══ desplegable · calendario · selector de color PROPIOS ═══════════════════ La lista que abre un