/* ============================================================================ Términos y Condiciones — DOCTORAS · Namespace `trm-` ---------------------------------------------------------------------------- DOS pantallas standalone que comparten estos estilos y el MISMO contenido (resources/views/terms/_doctor-content.blade.php): • terms/public.blade.php → LECTURA PÚBLICA (login/footer). → el documento FLUYE por la página (nav + masthead + hoja de lectura + footer). Sin caja acotada. • admin/terms/accept.blade.php → ACEPTACIÓN BLOQUEANTE (gate). → caja acotada `.trm-shell` con scroll interno (scroll-to-unlock). NO se toca su lógica. Diseñado como PAR coherente con la página de Seguridad (`sp-`): mismos tokens teal canónicos (CLAUDE.md / design-system MASTER), misma familia display Fraunces sobre Inter, mismo lenguaje de nav / hero / cards / botones / footer. Cero CSS inline en Blade. Anima solo transform/opacity. dvh > vh (WebKit). ============================================================================ */ :root { /* Marca — teal canónico anclado (no depende del branding global). */ --trm-primary: #199c82; --trm-primary-600: #168a73; --trm-primary-700: #116d5b; --trm-primary-050: #e6f7f3; --trm-primary-rgb: 25, 156, 130; /* Neutrales (slate del sistema). */ --trm-ink: #0f172a; --trm-ink-2: #334155; --trm-muted: #64748b; --trm-faint: #94a3b8; --trm-line: #e6ecec; --trm-line-2: #eef3f2; --trm-bg: #f5faf8; --trm-card: #ffffff; /* Forma. */ --trm-radius: 20px; --trm-radius-md: 14px; --trm-radius-sm: 10px; /* Elevación (suave, sin filtros caros). */ --trm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --trm-shadow-md: 0 10px 30px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04); --trm-shadow-lg: 0 26px 64px rgba(16, 109, 91, .12), 0 6px 16px rgba(15, 23, 42, .05); --trm-maxw: 1140px; /* nav / footer */ --trm-readw: 820px; /* hoja de lectura del documento */ /* Tipografía. */ --trm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --trm-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; /* Escala fluida (misma que `sp-` para coherencia). */ --trm-fs-sm: clamp(0.86rem, 0.82rem + 0.18vw, 0.95rem); --trm-fs-base: clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem); --trm-fs-lead: clamp(1.08rem, 1.00rem + 0.42vw, 1.26rem); --trm-fs-h3: clamp(1.08rem, 1.02rem + 0.34vw, 1.24rem); --trm-fs-h2: clamp(1.5rem, 1.28rem + 1.05vw, 2.05rem); --trm-fs-h1: clamp(1.85rem, 1.5rem + 2.0vw, 2.85rem); } /* ─── Reset acotado a la página ────────────────────────────────────────── */ .trm-page *, .trm-page *::before, .trm-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .trm-page { margin: 0; /* reset del margen por defecto del (evita franja alrededor del footer oscuro) */ font-family: var(--trm-font); color: var(--trm-ink); background: var(--trm-bg); line-height: 1.65; font-size: var(--trm-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 */ } .trm-page img { max-width: 100%; display: block; } .trm-page svg { display: block; } .trm-page a { color: var(--trm-primary-700); text-decoration: none; } .trm-page a:hover { text-decoration: underline; } /* Skip-link accesible (oculto hasta foco por teclado). */ .trm-skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--trm-primary-700); color: #fff; padding: 10px 16px; border-radius: var(--trm-radius-sm); font-weight: 600; transition: top 160ms ease; } .trm-skip:focus { top: 12px; text-decoration: none; } /* ─── Marca (compartida: nav pública + head del gate) ──────────────────── */ .trm-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; } .trm-brand__logo { width: 42px; height: 42px; flex: none; border-radius: 13px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--trm-primary), var(--trm-primary-700)); color: #fff; box-shadow: 0 8px 18px rgba(var(--trm-primary-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .25); } .trm-brand__logo img { width: 100%; height: 100%; object-fit: cover; } .trm-brand__logo svg { width: 22px; height: 22px; } .trm-brand__name { font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; color: var(--trm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ─── Botones (gemelos de `sp-btn`) ────────────────────────────────────── */ .trm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; /* touch WCAG 2.5.5 */ padding: 11px 20px; border-radius: 999px; font-family: inherit; font-size: var(--trm-fs-sm); font-weight: 600; line-height: 1; cursor: pointer; border: 1.5px solid transparent; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; white-space: nowrap; text-decoration: none; } .trm-btn:hover { text-decoration: none; } .trm-btn:focus-visible { outline: 3px solid rgba(var(--trm-primary-rgb), .35); outline-offset: 2px; } .trm-btn svg { flex: none; } .trm-btn--primary { background: var(--trm-primary); color: #fff; box-shadow: 0 8px 20px rgba(var(--trm-primary-rgb), .28); width: 100%; /* en el gate ocupa el ancho del pie */ } .trm-btn--primary:hover:not(:disabled) { background: var(--trm-primary-600); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--trm-primary-rgb), .34); } .trm-btn--ghost { background: #fff; color: var(--trm-primary-700); border-color: rgba(var(--trm-primary-rgb), .35); } .trm-btn--ghost:hover { background: var(--trm-primary-050); transform: translateY(-1px); } .trm-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* ════════════════════════════════════════════════════════════════════════ VISTA PÚBLICA — documento que fluye (.trm-page--doc) ════════════════════════════════════════════════════════════════════════ */ .trm-page--doc { display: flex; flex-direction: column; background: radial-gradient(1200px 520px at 50% -6%, rgba(var(--trm-primary-rgb), .14), transparent 60%), linear-gradient(180deg, #ffffff 0, var(--trm-bg) 260px); } /* Barra de navegación (gemela de `.sp-nav`). */ .trm-nav { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .82); border-bottom: 1px solid var(--trm-line); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); } .trm-nav__inner { width: 100%; max-width: var(--trm-maxw); margin-inline: auto; padding: 12px clamp(18px, 5vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 68px; } .trm-nav__back-short { display: none; } /* Zona principal + hoja de lectura (papel). */ .trm-main { flex: 1 0 auto; width: 100%; max-width: var(--trm-readw); margin-inline: auto; padding: clamp(26px, 5vw, 56px) clamp(16px, 5vw, 32px) clamp(40px, 7vw, 72px); } .trm-sheet { background: var(--trm-card); border: 1px solid var(--trm-line); border-radius: var(--trm-radius); box-shadow: var(--trm-shadow-lg); padding: clamp(26px, 5vw, 56px); overflow: hidden; /* respalda el radio en el borde superior */ } /* Footer (gemelo de `.sp-footer`). */ .trm-footer { flex: none; background: var(--trm-ink); color: #cbd5e1; padding-block: clamp(26px, 4vw, 38px); } .trm-footer__inner { width: 100%; max-width: var(--trm-maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .trm-footer__brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; } .trm-footer__brand svg { width: 22px; height: 22px; color: var(--trm-primary); flex: none; } .trm-footer__meta { font-size: var(--trm-fs-sm); color: #94a3b8; } .trm-footer__links { display: inline-flex; gap: 20px; flex-wrap: wrap; } .trm-footer a { color: #e2e8f0; } /* ════════════════════════════════════════════════════════════════════════ DOCUMENTO (compartido: hoja pública + scroll del gate) ════════════════════════════════════════════════════════════════════════ */ .trm-doc { color: var(--trm-ink-2); counter-reset: trm-sec; } .trm-doc a { text-decoration: underline; font-weight: 600; } /* Masthead: cabecera fuerte del documento. */ .trm-doc__head { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 2px solid rgba(var(--trm-primary-rgb), .18); } .trm-doc__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--trm-primary-700); background: var(--trm-primary-050); border: 1px solid rgba(var(--trm-primary-rgb), .22); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; } .trm-title { font-family: var(--trm-display); font-optical-sizing: auto; font-weight: 600; font-size: var(--trm-fs-h1); line-height: 1.1; letter-spacing: -.015em; color: var(--trm-ink); } /* Metadatos como chips (Versión / Vigente desde / Aplica a). */ .trm-meta { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; } .trm-meta__item { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; background: var(--trm-bg); border: 1px solid var(--trm-line); border-radius: var(--trm-radius-md); min-width: 0; } .trm-meta dt { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--trm-muted); } .trm-meta dd { font-size: .95rem; font-weight: 600; color: var(--trm-ink); } .trm-meta__item:first-child { background: var(--trm-primary-050); border-color: rgba(var(--trm-primary-rgb), .22); } .trm-meta__item:first-child dd { color: var(--trm-primary-700); } /* Entradilla. */ .trm-lead { font-size: var(--trm-fs-lead); line-height: 1.7; color: var(--trm-ink-2); padding-left: 44px; /* alinea con el cuerpo de las secciones */ text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Secciones numeradas. */ .trm-section { margin-top: 30px; } .trm-section:first-of-type { margin-top: 28px; } .trm-section h2 { counter-increment: trm-sec; display: flex; align-items: center; gap: 14px; font-family: var(--trm-display); font-optical-sizing: auto; font-weight: 600; font-size: var(--trm-fs-h3); letter-spacing: -.01em; color: var(--trm-ink); margin-bottom: 10px; } .trm-section h2::before { content: counter(trm-sec); flex: none; width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--trm-font); font-size: .84rem; font-weight: 700; line-height: 1; color: var(--trm-primary-700); background: var(--trm-primary-050); border: 1px solid rgba(var(--trm-primary-rgb), .22); } .trm-section p { color: var(--trm-ink-2); line-height: 1.72; padding-left: 44px; /* insignia 30 + gap 14 */ text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .trm-section + .trm-section { border-top: 1px solid var(--trm-line-2); padding-top: 4px; } @media (max-width: 520px) { .trm-lead, .trm-section p { padding-left: 0; } .trm-section h2 { gap: 11px; } } /* ════════════════════════════════════════════════════════════════════════ GATE — aceptación bloqueante (.trm-page--gate) · NO tocar la lógica ════════════════════════════════════════════════════════════════════════ */ .trm-page--gate { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 44px) clamp(14px, 4vw, 28px); background: radial-gradient(1100px 460px at 50% -10%, rgba(var(--trm-primary-rgb), .12), transparent 60%), var(--trm-bg); } .trm-shell { width: 100%; max-width: var(--trm-readw); background: var(--trm-card); border: 1px solid var(--trm-line); border-radius: var(--trm-radius); box-shadow: var(--trm-shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - clamp(32px, 8vw, 88px)); } /* Cabecera del gate. */ .trm-head { display: flex; align-items: center; gap: 12px; padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 34px); border-bottom: 1px solid var(--trm-line); background: linear-gradient(180deg, #fff, #fbfefe); flex: none; } .trm-head__tag { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--trm-primary-700); background: rgba(var(--trm-primary-rgb), .1); border: 1px solid rgba(var(--trm-primary-rgb), .22); padding: 5px 12px; border-radius: 999px; white-space: nowrap; } /* Contenido scrollable — scroll-to-unlock depende de esto. NO cambiar. */ .trm-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(20px, 4vw, 36px); flex: 1 1 auto; min-height: 0; background: var(--trm-card); /* fondo de respaldo (momentum WebKit) */ } /* Pie de acciones del gate. */ .trm-actions { flex: none; border-top: 1px solid var(--trm-line); padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 34px); background: linear-gradient(180deg, #fbfefe, #fff); } .trm-scrollhint { text-align: center; font-size: .84rem; color: var(--trm-muted); margin-bottom: 12px; transition: opacity .2s ease; } .trm-scrollhint.is-hidden { display: none; } .trm-check { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1.5px solid var(--trm-line); border-radius: var(--trm-radius-sm); background: #fff; transition: border-color .2s ease, background .2s ease, opacity .2s ease; margin-bottom: 14px; } .trm-check.is-locked { opacity: .55; } .trm-check:not(.is-locked) { border-color: rgba(var(--trm-primary-rgb), .4); background: var(--trm-primary-050); } .trm-check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--trm-primary); cursor: pointer; } .trm-check label { font-size: .95rem; color: var(--trm-ink-2); cursor: pointer; } .trm-check strong { color: var(--trm-ink); } .trm-logout { display: block; width: 100%; margin-top: 12px; background: none; border: none; color: var(--trm-muted); font-family: inherit; font-size: .9rem; text-align: center; cursor: pointer; padding: 8px; text-decoration: underline; } .trm-logout:hover { color: #991b1b; } .trm-alert { display: flex; gap: 10px; align-items: flex-start; background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .28); color: #991b1b; border-radius: var(--trm-radius-sm); padding: 11px 14px; font-size: .9rem; margin-bottom: 14px; } .trm-alert--info { background: rgba(59, 130, 246, .07); border-color: rgba(59, 130, 246, .28); color: #1e40af; } .trm-back { margin-top: 14px; text-align: center; } .trm-back a { font-size: .92rem; } /* ─── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 560px) { .trm-nav__inner { min-height: 60px; } .trm-nav__back-full { display: none; } .trm-nav__back-short { display: inline; } .trm-brand__name { max-width: 46vw; } } @media (max-width: 768px) { .trm-footer__inner { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .trm-brand__logo { width: 38px; height: 38px; border-radius: 11px; } .trm-brand__name { font-size: 1rem; } .trm-shell { max-height: calc(100dvh - 24px); } } @media (prefers-reduced-motion: reduce) { .trm-page * { transition: none !important; animation: none !important; } .trm-btn:hover { transform: none; } }