/* ============================================================================ CENTRO LEGAL Y DE CONFIANZA · Namespace `lgl-` ---------------------------------------------------------------------------- UNA hoja para las TRES pantallas del sistema documental público: • terms/public.blade.php → LECTURA PÚBLICA de los T&C. • public/seguridad-privacidad → CENTRO DE CONFIANZA (venta + transparencia). • admin/terms/accept.blade.php → ACEPTACIÓN BLOQUEANTE (gate). Caja acotada con scroll interno (scroll-to-unlock). Su LÓGICA NO se toca: los IDs (#trmScroll, #trmChk, #trmSubmit, #trmForm, #trmHint, #trmCheckWrap) se preservan 1:1 desde el diseño anterior. Sustituye a `terminos.css` + `seguridad-privacidad.css` (eliminados): el documento legal y la página de seguridad son un PAR y deben compartir barra, pestañas, botones, escala tipográfica y pie. Duplicar ese chrome en dos hojas fue lo que permitió que se desincronizaran. REGLAS APLICADAS (CLAUDE.md) - Sección servida con `@cssAsset` (media queries crudas): NO pasa por PostCSS, NO tiene `.min.css`, NO hay que recompilar `app.min.css`. Cache-bust por mtime. - Contraste AA: el botón primario usa `--lgl-p7` (#116d5b, 6.25:1 sobre blanco). `--lgl-p` (#199c82) da 3.43:1 y NO se usa para texto ni sobre texto blanco. - Sin `backdrop-filter` (coste de composición en tablets Android de gama baja). - Anima solo `transform` y `opacity`. `dvh` antes que `vh` (WebKit). - Teal anclado a propósito: son páginas públicas del sistema, no heredan el branding per-doctora. ============================================================================ */ :root { /* Marca — teal canónico anclado. */ --lgl-p: #199c82; /* solo fondos decorativos / iconografía */ --lgl-p6: #168a73; --lgl-p7: #116d5b; /* texto, botones, enlaces → AA */ --lgl-p8: #0c5344; --lgl-p05: #e6f7f3; --lgl-p-rgb: 25, 156, 130; /* Neutrales (slate del sistema). */ --lgl-ink: #0f172a; --lgl-ink-2: #334155; /* Un punto más oscuro que el slate-500 del sistema (#64748b). Ese daba 4.30:1 sobre el chip teal (`--lgl-p05`) y 4.51:1 sobre `--lgl-bg`: pasaba raspando o no pasaba, según el fondo. Este pasa AA sobre los TRES fondos de estas páginas (blanco 5.45 · bg 5.17 · chip 4.92). */ --lgl-muted: #5b6b7f; --lgl-faint: #94a3b8; --lgl-line: #e6ecec; --lgl-line-2: #eef3f2; --lgl-bg: #f5faf8; --lgl-card: #ffffff; /* Semánticos (solo para el par "sí hacemos / no hacemos" y avisos). */ --lgl-warn: #92400e; --lgl-warn-bg: #fffbeb; --lgl-warn-line: #fde68a; --lgl-deny: #9f1239; --lgl-deny-bg: #fff1f2; /* Forma. */ --lgl-radius: 20px; --lgl-radius-md: 14px; --lgl-radius-sm: 10px; /* Elevación (suave, sin filtros caros). */ --lgl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --lgl-shadow-md: 0 10px 30px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04); --lgl-shadow-lg: 0 26px 64px rgba(16, 109, 91, .12), 0 6px 16px rgba(15, 23, 42, .05); /* Medidas. */ --lgl-maxw: 1180px; /* barra, pie, centro de confianza */ --lgl-readw: 720px; /* columna de lectura ≈ 70 caracteres */ --lgl-tocw: 244px; /* rail del índice */ /* Tipografía. */ --lgl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --lgl-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; /* Escala fluida. */ --lgl-fs-xs: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem); --lgl-fs-sm: clamp(0.86rem, 0.82rem + 0.18vw, 0.95rem); --lgl-fs-base: clamp(1.00rem, 0.96rem + 0.22vw, 1.09rem); --lgl-fs-read: clamp(1.02rem, 0.98rem + 0.24vw, 1.12rem); --lgl-fs-lead: clamp(1.08rem, 1.00rem + 0.42vw, 1.26rem); --lgl-fs-h3: clamp(1.10rem, 1.02rem + 0.38vw, 1.30rem); --lgl-fs-h2: clamp(1.5rem, 1.28rem + 1.05vw, 2.1rem); --lgl-fs-h1: clamp(1.85rem, 1.5rem + 2.0vw, 2.9rem); } /* ─── Reset acotado a la página ────────────────────────────────────────── */ .lgl-page *, .lgl-page *::before, .lgl-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .lgl-page { margin: 0; font-family: var(--lgl-font); color: var(--lgl-ink); background: var(--lgl-bg); line-height: 1.65; font-size: var(--lgl-fs-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; /* red de seguridad anti-overflow */ } .lgl-page img { max-width: 100%; display: block; } .lgl-page svg { display: block; } .lgl-page a { color: var(--lgl-p7); text-decoration: none; } .lgl-page a:hover { text-decoration: underline; } .lgl-page ul, .lgl-page ol { list-style: none; } .lgl-container { width: 100%; max-width: var(--lgl-maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); } /* Salto al contenido (visible solo al foco por teclado). */ .lgl-skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--lgl-p7); color: #fff; padding: 10px 16px; border-radius: var(--lgl-radius-sm); font-weight: 600; transition: top 160ms ease; } .lgl-skip:focus { top: 12px; text-decoration: none; } /* ════════════════════════════════════════════════════════════════════════ 1 · CHROME COMPARTIDO — barra, marca, pestañas, botones, pie ════════════════════════════════════════════════════════════════════════ */ /* Barra pegajosa. Fondo SÓLIDO a propósito: `backdrop-filter` obligaba a una capa de composición en cada scroll (CLAUDE.md R6/R12). */ .lgl-nav { position: sticky; top: 0; z-index: 20; background: var(--lgl-card); border-bottom: 1px solid var(--lgl-line); } .lgl-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; padding-block: 11px; } /* `min-height` de 44px: la marca es un enlace, y como tap target tenía 36px en móvil (WCAG 2.5.5). */ .lgl-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px; } .lgl-brand__logo { width: 40px; height: 40px; flex: none; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--lgl-p), var(--lgl-p7)); color: #fff; box-shadow: 0 8px 18px rgba(var(--lgl-p-rgb), .26), inset 0 1px 0 rgba(255, 255, 255, .25); } .lgl-brand__logo img { width: 100%; height: 100%; object-fit: cover; } .lgl-brand__logo svg { width: 21px; height: 21px; } .lgl-brand__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--lgl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Botones. */ .lgl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; /* WCAG 2.5.5 */ padding: 11px 19px; border-radius: 999px; font-family: inherit; font-size: var(--lgl-fs-sm); font-weight: 600; line-height: 1; cursor: pointer; border: 1.5px solid transparent; background: none; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease; white-space: nowrap; text-decoration: none; } .lgl-btn:hover { text-decoration: none; } .lgl-btn:focus-visible { outline: 3px solid rgba(var(--lgl-p-rgb), .4); outline-offset: 2px; } .lgl-btn svg { flex: none; width: 17px; height: 17px; } /* ⚠️ Los modificadores van scopeados con `.lgl-page` A PROPÓSITO. Estos botones son ``, y arriba existe `.lgl-page a { color: var(--lgl-p7) }` con especificidad (0,1,1). Un `.lgl-btn--primary` suelto es (0,1,0) y PIERDE: el botón primario quedaba con texto teal sobre fondo teal — contraste 1:1, la etiqueta era invisible («Escribir a privacidad» no se leía). El botón ghost tapaba el fallo porque él sí quiere texto teal. Con `.lgl-page` delante son (0,2,0) y ganan. Mismo motivo en los `:hover`: `.lgl-page a:hover` (0,2,1) le subrayaba el texto a todos los botones. */ /* Primario sobre `--lgl-p7`: 6.25:1 con texto blanco (AA). */ .lgl-page .lgl-btn--primary { background: var(--lgl-p7); color: #fff; box-shadow: 0 8px 20px rgba(var(--lgl-p-rgb), .26); } .lgl-page .lgl-btn--primary:hover:not(:disabled) { background: var(--lgl-p8); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--lgl-p-rgb), .32); } .lgl-page .lgl-btn--ghost { background: var(--lgl-card); color: var(--lgl-p7); border-color: rgba(var(--lgl-p-rgb), .38); } .lgl-page .lgl-btn--ghost:hover { background: var(--lgl-p05); transform: translateY(-1px); } .lgl-page .lgl-btn--quiet { color: var(--lgl-ink-2); border-color: var(--lgl-line); background: var(--lgl-card); } .lgl-page .lgl-btn--quiet:hover { border-color: var(--lgl-faint); color: var(--lgl-ink); transform: translateY(-1px); } /* Ningún botón se subraya al pasar por encima, sea `` o `