/* * TurnoPro Design — base.css * -------------------------- * Reset ligero + defaults para páginas que opten por el nuevo sistema. * Aplica al (NO se aplica globalmente para * evitar romper módulos legacy que aún usan Bootstrap 3 + Limitless). */ .tp-page, .tp-page * { box-sizing: border-box; } .tp-page { margin: 0; min-height: 100vh; color: var(--tp-text); font-family: var(--tp-font-sans); font-size: var(--tp-text-base); line-height: var(--tp-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: radial-gradient(1100px 600px at 100% -10%, rgba(var(--tp-brand-rgb), 0.10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(var(--tp-brand-rgb), 0.06), transparent 55%), var(--tp-bg); background-attachment: fixed; position: relative; } /* Patrón de puntos decorativo (sutil) */ .tp-page::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, var(--tp-gray-300) 1px, transparent 0); background-size: 28px 28px; opacity: 0.35; z-index: 0; mask-image: linear-gradient(180deg, transparent 0, black 30%, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, black 30%, black 70%, transparent 100%); } .tp-page > * { position: relative; z-index: 1; } .tp-page h1, .tp-page h2, .tp-page h3, .tp-page h4, .tp-page h5, .tp-page h6 { margin: 0; color: var(--tp-text); font-weight: var(--tp-weight-semibold); line-height: var(--tp-leading-tight); letter-spacing: var(--tp-tracking-tight); } .tp-page p { margin: 0; } .tp-page a { color: var(--tp-brand); text-decoration: none; transition: color var(--tp-transition); } .tp-page a:hover { color: var(--tp-brand-strong); } .tp-page button { font-family: inherit; cursor: pointer; } .tp-page img, .tp-page svg { display: block; max-width: 100%; } .tp-page :focus-visible { outline: 2px solid var(--tp-brand); outline-offset: 2px; border-radius: var(--tp-radius-sm); } /* Tipografía utilitaria */ .tp-h1 { font-size: var(--tp-text-3xl); font-weight: var(--tp-weight-bold); letter-spacing: var(--tp-tracking-tight); } .tp-h2 { font-size: var(--tp-text-2xl); font-weight: var(--tp-weight-semibold); } .tp-h3 { font-size: var(--tp-text-xl); font-weight: var(--tp-weight-semibold); } .tp-h4 { font-size: var(--tp-text-lg); font-weight: var(--tp-weight-semibold); } .tp-text-sm { font-size: var(--tp-text-sm); } .tp-text-xs { font-size: var(--tp-text-xs); } .tp-text-lg { font-size: var(--tp-text-lg); } .tp-muted { color: var(--tp-text-muted); } .tp-subtle { color: var(--tp-text-subtle); } .tp-strong { font-weight: var(--tp-weight-semibold); } /* Helpers de layout */ .tp-container { max-width: var(--tp-container); margin: 0 auto; padding: 0 var(--tp-space-6); } .tp-container-narrow { max-width: var(--tp-container-narrow); margin: 0 auto; padding: 0 var(--tp-space-6); } .tp-stack { display: flex; flex-direction: column; gap: var(--tp-space-4); } .tp-stack-sm { display: flex; flex-direction: column; gap: var(--tp-space-2); } .tp-stack-lg { display: flex; flex-direction: column; gap: var(--tp-space-8); } .tp-row { display: flex; align-items: center; gap: var(--tp-space-3); } .tp-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-4); } .tp-grid, .tp-grid-2, .tp-grid-3, .tp-grid-4 { display: grid; gap: var(--tp-space-5); } .tp-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .tp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .tp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .tp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .tp-grid-tight { gap: var(--tp-space-3); } .tp-grid-loose { gap: var(--tp-space-8); } /* Tablet: 2 columnas para .tp-grid-3 */ @media (min-width: 641px) and (max-width: 1023px) { .tp-grid-3 { grid-template-columns: repeat(2, 1fr); } .tp-grid-4 { grid-template-columns: repeat(2, 1fr); } } /* Móvil: siempre 1 columna y gap reducido */ @media (max-width: 640px) { .tp-grid, .tp-grid-2, .tp-grid-3, .tp-grid-4 { grid-template-columns: 1fr; gap: var(--tp-space-3); } } /* Spacing utilitarios mínimos */ .tp-mt-0 { margin-top: 0; } .tp-mt-2 { margin-top: var(--tp-space-2); } .tp-mt-4 { margin-top: var(--tp-space-4); } .tp-mt-6 { margin-top: var(--tp-space-6); } .tp-mt-8 { margin-top: var(--tp-space-8); } .tp-py-section { padding-top: var(--tp-space-10); padding-bottom: var(--tp-space-10); } .tp-py-page { padding-top: var(--tp-space-12); padding-bottom: var(--tp-space-12); }