/* ============================================================================= Elocuenta · Utilidades y componentes compartidos entre vistas ============================================================================= */ .card-cv { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } .text-secondary-cv { color: var(--color-text-secondary); } .text-muted-cv { color: var(--color-text-muted); } .text-center-cv { text-align: center; } .mt-4-cv { margin-top: var(--space-4); } .mt-6-cv { margin-top: var(--space-6); } .mt-8-cv { margin-top: var(--space-8); } .mb-0-cv { margin-bottom: 0; } .mb-4-cv { margin-bottom: var(--space-4); } .mb-6-cv { margin-bottom: var(--space-6); } .container-cv { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); } /* --- Alertas de feedback --- */ .alert-cv { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-weight: var(--font-weight-medium); } .alert-cv-exito { background: var(--brand-accent-light); color: var(--brand-accent-dark); } .alert-cv-error { background: #FEE2E2; color: var(--color-danger); } /* --- Selector de tenant (topbar del panel) --- */ .selector-tenant { margin-right: auto; } .selector-tenant-select { width: auto; min-width: 200px; padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); } /* --- Badges de estado --- */ .badge-cv { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .badge-cv-activo { background: var(--brand-accent-light); color: var(--brand-accent-dark); } .badge-cv-pausado { background: #FEF3C7; color: var(--color-warning); } /* --- Tablas del panel --- */ .tabla-cv { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .tabla-cv th, .tabla-cv td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); } .tabla-cv th { background: var(--color-bg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } .tabla-cv tr:last-child td { border-bottom: none; } /* --- Cabecera de página del panel --- */ .pagina-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); } .pagina-cabecera h2 { margin-bottom: 0; } .acciones-fila { display: flex; gap: var(--space-2); align-items: center; } /* --- Elementos de marca compartidos (home + páginas interiores) --- */ .landing-eyebrow { display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--brand-primary-dark); background: var(--brand-primary-light); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); margin-bottom: var(--space-4); } .landing-degradado { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-feature-icono, .publica-icono { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--brand-primary-light); color: var(--brand-primary-dark); margin-bottom: var(--space-4); } .landing-feature-icono svg, .publica-icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Reveal al hacer scroll: visible por defecto; el estado oculto solo se activa (clase en ) cuando conversia-publica.js confirma que IntersectionObserver funciona — el contenido jamás puede quedarse invisible */ .landing-con-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .landing-con-reveal [data-reveal].visible { opacity: 1; transform: translateY(0); } /* --- Páginas públicas interiores (precios, funcionalidades, contacto, legales) --- */ .publica-hero { text-align: center; padding: var(--space-16) var(--space-6) var(--space-12); background: radial-gradient(55% 90% at 82% 0%, var(--brand-primary-light) 0%, transparent 55%), radial-gradient(45% 80% at 12% 100%, var(--brand-accent-light) 0%, transparent 50%), var(--color-surface); } .publica-hero h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -0.015em; color: var(--brand-ink); max-width: 820px; margin: 0 auto var(--space-4); } .publica-sub { color: var(--color-text-secondary); font-size: var(--font-size-lg); max-width: 680px; margin: 0 auto; } .publica-seccion { padding: var(--space-8) 0 var(--space-16); } .publica-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } /* Cards con vida en la parte pública (el panel no se ve afectado: selector con ámbito) */ .publica-grid .card-cv, .blog-grid .card-cv { transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .publica-grid .card-cv:hover, .blog-grid .card-cv:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); border-color: var(--brand-primary-light); } .publica-check { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .publica-check li { position: relative; padding-left: 26px; color: var(--color-text-secondary); } .publica-check li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-accent); font-weight: var(--font-weight-bold); } .publica-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); } .publica-faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); transition: border-color var(--transition-base), box-shadow var(--transition-base); } .publica-faq details:hover, .publica-faq details[open] { border-color: var(--brand-primary-light); box-shadow: var(--shadow-sm); } .publica-faq summary { cursor: pointer; font-weight: var(--font-weight-semibold); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); list-style: none; } .publica-faq summary::-webkit-details-marker { display: none; } /* Chevron que gira al abrir */ .publica-faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--brand-primary); border-bottom: 2px solid var(--brand-primary); transform: rotate(45deg); transition: transform var(--transition-base); flex-shrink: 0; margin-top: -4px; } .publica-faq details[open] summary::after { transform: rotate(225deg); margin-top: 4px; } .publica-faq details p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); } .publica-cta-final { background: var(--brand-gradient); border-radius: var(--radius-xl); padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-text-inverse); margin: var(--space-8) 0 var(--space-16); } .publica-cta-final h2 { color: inherit; margin-bottom: var(--space-2); } .publica-cta-final p { opacity: .92; max-width: 520px; margin: 0 auto var(--space-6); } /* Botón blanco sobre el degradado del CTA (las páginas interiores no cargan landing-index.css) */ .publica-cta-final .btn-cv { background: var(--color-surface); color: var(--brand-primary-dark); font-size: var(--font-size-lg); padding: var(--space-4) var(--space-8); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform var(--transition-base), box-shadow var(--transition-base); } .publica-cta-final .btn-cv:hover { transform: translateY(-2px); color: var(--brand-primary-dark); box-shadow: 0 14px 36px rgba(0, 0, 0, .3); } /* Separador con líneas laterales (login y contacto lo comparten) */ .login-separador { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); } .login-separador::before, .login-separador::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); } /* Texto legal largo (aviso legal, cookies, condiciones): mismo patrón que privacidad */ .publica-legal { max-width: 800px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); } .publica-legal h1 { margin-bottom: var(--space-2); } .publica-legal h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--font-size-xl); } .publica-legal p, .publica-legal li { color: var(--color-text-secondary); } /* Bloque visible de datos pendientes de completar (páginas noindex hasta rellenarse) */ .publica-pendiente { background: #FEF3C7; border: 1px dashed var(--color-warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); color: #92400E; font-size: var(--font-size-sm); margin: var(--space-4) 0; } /* --- Mock de teléfono con chat (home animada y páginas de sectores estáticas) --- */ .landing-telefono { width: min(360px, 100%); background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 28px; box-shadow: var(--shadow-elevated), 0 24px 60px rgba(37, 99, 235, .18); overflow: hidden; animation: landing-flotar 7s ease-in-out infinite; } @keyframes landing-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .landing-telefono-cabecera { display: flex; align-items: center; gap: var(--space-3); background: var(--brand-gradient); color: var(--color-text-inverse); padding: var(--space-3) var(--space-4); } .landing-telefono-avatar { width: 38px; height: 38px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); } .landing-telefono-nombre { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); } .landing-telefono-estado { display: block; font-size: var(--font-size-xs); opacity: .85; } .landing-telefono-chat { height: 380px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; justify-content: flex-end; } /* Variante estática (sectores): altura al contenido, sin recorte */ .landing-telefono-chat.estatico { height: auto; justify-content: flex-start; } .landing-burbuja { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); line-height: 1.45; animation: landing-aparecer .35s ease both; white-space: pre-line; } .landing-burbuja.usuario { align-self: flex-end; background: var(--brand-accent-light); border-bottom-right-radius: var(--radius-sm); } .landing-burbuja.bot { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .landing-burbuja.escribiendo { display: flex; gap: 5px; padding: var(--space-3); } .landing-burbuja.escribiendo span { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-text-muted); animation: landing-punto 1.2s ease-in-out infinite; } .landing-burbuja.escribiendo span:nth-child(2) { animation-delay: .18s; } .landing-burbuja.escribiendo span:nth-child(3) { animation-delay: .36s; } @keyframes landing-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } @keyframes landing-aparecer { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .landing-telefono, .landing-burbuja { animation: none; } [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --- Páginas de sectores --- */ .sector-demo { display: flex; justify-content: center; margin: var(--space-8) auto; } .sector-dolores { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); } .sector-dolores li { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .sector-dolores li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* --- Blog (índice y artículos, comparten estilos) --- */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); } .blog-card { display: flex; flex-direction: column; gap: var(--space-2); } .blog-card time { font-size: var(--font-size-xs); color: var(--color-text-muted); } .blog-card h2 { font-size: var(--font-size-lg); margin: 0; } .blog-card h2 a { color: var(--color-text-primary); transition: color var(--transition-base); } .blog-card:hover h2 a { color: var(--brand-primary-dark); } .blog-card p { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin: 0; flex: 1; } .articulo { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); } .articulo-cabecera { margin-bottom: var(--space-8); } .articulo-cabecera h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.01em; margin-bottom: var(--space-3); } .articulo-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); } .articulo h2 { font-size: var(--font-size-xl); margin: var(--space-8) 0 var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .articulo p, .articulo li { color: var(--color-text-secondary); line-height: 1.7; } /* Entradilla: el primer párrafo, más grande y en tinta */ .articulo > p:first-of-type { font-size: var(--font-size-lg); color: var(--color-text-primary); line-height: 1.6; } .articulo a { font-weight: var(--font-weight-medium); } .articulo-nota { background: var(--brand-primary-soft, var(--color-bg)); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); margin: var(--space-4) 0; } .articulo-tabla { overflow-x: auto; margin: var(--space-4) 0; } /* --- Páginas de error (404/500, comparten estilos) --- */ .pagina-error { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-16) var(--space-6); } .pagina-error-codigo { font-size: clamp(56px, 12vw, 96px); font-weight: var(--font-weight-bold); line-height: 1; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--space-4); } .pagina-error h1 { font-size: var(--font-size-2xl, 28px); margin-bottom: var(--space-3); } .pagina-error p { color: var(--color-text-secondary); max-width: 480px; margin-bottom: var(--space-6); } .pagina-error-acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; } /* --- Móvil: patrones globales --- */ @media (max-width: 768px) { /* Las tablas anchas se desplazan en horizontal dentro de su marco */ .tabla-cv { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Cabeceras de página: el título y las acciones envuelven en vez de comprimirse */ .pagina-cabecera { flex-wrap: wrap; gap: var(--space-3); } .acciones-fila { flex-wrap: wrap; } /* iOS hace zoom automático al enfocar campos con letra menor de 16px */ .form-control-cv { font-size: 16px; } }