/* ============================================================================ MOD-280 · LOS MODALES DEL LIVE BAIT — vestidos como el resto de OMNIA ---------------------------------------------------------------------------- Todo acotado a `#cotportal-ov`, que cuelga de . POR QUÉ EXISTE ESTE ARCHIVO: los modales de MOD-230 tenían el estilo escrito a mano, atributo por atributo, dentro de las cadenas de HTML. Eso trae dos problemas y los dos se notaban: · El botón principal decía `background:var(--turq)` con `color:#04252a` —texto casi negro—. En el tema actual `--turq` resuelve a un azul fuerte, y el resultado era texto oscuro sobre azul: ilegible. Un color escrito a mano no puede saber sobre qué acabará pintado. · Cambiar el aspecto obligaba a editar cadenas de JavaScript, así que en la práctica no se cambiaba nunca y el modal se fue quedando atrás del resto. El lenguaje es el de siempre: Notion, Linear y GitHub. Espacio generoso, jerarquía por tamaño y color y no por adornos, bordes de 1 px, nada de sombras dramáticas ni degradados. ========================================================================== */ #cotportal-ov{ --lbm-bg: var(--bg, #0d1117); --lbm-bg2: var(--bg2, #161b22); --lbm-bd: var(--border, #30363d); --lbm-tx: var(--text, #e6edf3); --lbm-tx2: var(--dim, #8b949e); --lbm-ac: var(--turq, #39d3c3); --lbm-warn: #f0883e; } #cotportal-ov *{box-sizing:border-box} #cotportal-ov button, #cotportal-ov input{font-family:inherit} /* La caja. Se reemplaza el `padding` uniforme por secciones, que es lo que permite que la cabecera y el pie tengan su propia línea divisoria. */ #cotportal-ov .lbm{ background:var(--lbm-bg); color:var(--lbm-tx); border:1px solid var(--lbm-bd); border-radius:14px; width:min(460px,100%); max-height:88vh; overflow:auto; box-shadow:0 24px 64px rgba(0,0,0,.45); text-transform:none; letter-spacing:0; } #cotportal-ov .lbm-hd{display:flex; align-items:center; gap:12px; padding:18px 20px 14px} #cotportal-ov .lbm-ic{ width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; font-size:15px; background:rgba(137,87,229,.16); color:#a371f7; } #cotportal-ov .lbm-hd h3{margin:0; font-size:15.5px; font-weight:650; line-height:1.3} #cotportal-ov .lbm-hd small{display:block; margin-top:2px; font-size:11.5px; color:var(--lbm-tx2)} #cotportal-ov .lbm-bd{padding:0 20px 4px} #cotportal-ov .lbm-ft{ display:flex; gap:9px; padding:16px 20px 18px; margin-top:14px; border-top:1px solid var(--lbm-bd); } /* Resumen de lo que se va a enviar. Caja tenue, no una lista de viñetas. */ #cotportal-ov .lbm-resumen{ padding:12px 14px; margin-bottom:16px; background:var(--lbm-bg2); border:1px solid var(--lbm-bd); border-radius:10px; font-size:12.5px; line-height:1.6; color:var(--lbm-tx2); } #cotportal-ov .lbm-resumen b{color:var(--lbm-tx); font-weight:600} #cotportal-ov .lbm-datos{display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:6px} #cotportal-ov .lbm-dato{display:flex; align-items:baseline; gap:6px} #cotportal-ov .lbm-dato span{font-size:10.5px; letter-spacing:.06em; color:var(--lbm-tx2); text-transform:uppercase} /* Campos */ #cotportal-ov .lbm-campo{display:block; margin-bottom:16px} #cotportal-ov .lbm-campo > label{ display:block; margin-bottom:7px; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--lbm-tx2); } #cotportal-ov .lbm-campo input{ width:100%; padding:10px 12px; font-size:13.5px; background:var(--lbm-bg2); color:var(--lbm-tx); border:1px solid var(--lbm-bd); border-radius:9px; text-transform:none; } #cotportal-ov .lbm-campo input:focus{border-color:var(--lbm-ac); outline:none} #cotportal-ov .lbm-campo > small{ display:block; margin-top:6px; font-size:11.5px; line-height:1.5; color:var(--lbm-tx2); } /* Botones. El principal NO lleva color de texto escrito a mano: se calcula contra su propio fondo, que es lo que evita el texto negro sobre azul. */ #cotportal-ov .lbm-b{ padding:10px 16px; border-radius:9px; font-size:13.5px; cursor:pointer; background:transparent; color:var(--lbm-tx2); border:1px solid var(--lbm-bd); font-weight:500; transition:border-color .14s, color .14s, background .14s; } #cotportal-ov .lbm-b:hover:not(:disabled){color:var(--lbm-tx); border-color:var(--lbm-tx2)} #cotportal-ov .lbm-b:disabled{opacity:.5; cursor:not-allowed} #cotportal-ov .lbm-pri{ flex:1; background:var(--lbm-ac); border-color:var(--lbm-ac); /* Blanco fijo. El acento de OMNIA es oscuro en todos los temas vivos, y un texto oscuro sobre él era justo el problema que se venía arrastrando. */ color:#fff; font-weight:600; } #cotportal-ov .lbm-pri:hover:not(:disabled){filter:brightness(1.1); color:#fff} #cotportal-ov .lbm-pri i{margin-right:6px} /* Avisos */ #cotportal-ov .lbm-aviso{ margin-top:12px; padding:10px 12px; border-radius:9px; font-size:12px; line-height:1.5; background:rgba(240,136,62,.10); border:1px solid rgba(240,136,62,.32); color:var(--lbm-warn); } #cotportal-ov .lbm-err{display:none; margin-top:12px; font-size:12.5px; color:var(--lbm-warn)} /* Selector de subcotizaciones */ #cotportal-ov .lbm-cots{margin-bottom:16px} #cotportal-ov .lbm-cots > small{ display:block; margin-top:7px; font-size:11.5px; color:var(--lbm-tx2); } @media (prefers-reduced-motion: reduce){ #cotportal-ov .lbm-b{transition:none} } /* Los demás modales de MOD-230 (creando, resultado, enviar por correo) todavía traen su estilo escrito a mano y no usan cabecera/pie. Antes se apoyaban en el `padding` de la caja; al pasar a secciones se habrían quedado pegados al borde. Esta clase les devuelve su respiro sin tocar su marcado, y sirve de puente hasta que se conviertan también. */ #cotportal-ov .lbm-suelto{padding:24px} /* Botón "fantasma": el acento como borde y texto, sin relleno. Se usa para las acciones secundarias fuertes —Ver portal, Enviar por correo—, que no compiten con la principal pero tampoco son un simple Cancelar. */ #cotportal-ov .lbm-fantasma{ flex:1; background:transparent; color:var(--lbm-ac); border-color:var(--lbm-ac); font-weight:600; } #cotportal-ov .lbm-fantasma:hover:not(:disabled){ background:color-mix(in srgb, var(--lbm-ac) 12%, transparent); color:var(--lbm-ac); border-color:var(--lbm-ac); }