/* ========================================================================== BIBLEREPLY — Hoja de estilos (rediseño editorial) -------------------------------------------------------------------------- Lenguaje visual: IMPRESO CLÁSICO, no app. Como una Biblia de editorial fina: esquinas rectas (cero border-radius), filetes de 1px, dobles líneas, versalitas espaciadas, ornamentos tipográficos (✦), y oro usado como tinta —no como brillo—. Sin sombras difusas, sin gradientes, sin glow: la elegancia sale de la tipografía y las líneas. ========================================================================== */ :root { /* ====================================================================== PALETA "ESTUDIO A LA LUZ DE UNA VELA" (tema oscuro por defecto) Estudio de color aplicado: - Base: índigo profundo DESATURADO (azul = serenidad/profundidad; al quitarle saturación deja de ser frío o "de app genérica"). - Acento: miel/ámbar apagado (luz de vela = calidez, refugio, confianza — el contraste frío-cálido es el más agradable al ojo). - Texto: marfil cálido, nunca blanco puro (el blanco absoluto sobre oscuro produce fatiga y halo). - Nada de saturados puros ni negro #000: todo apagado y entonado. ====================================================================== */ /* PALETA "REFUGIO EDITORIAL" (tema nocturno) Dirección: calma, privacidad, compañía. Verde salvia profundo como base (bosque de noche: confianza y refugio), acción en salvia clara, y el dorado RESERVADO solo para referencias y fragmentos bíblicos. */ --pv-night: #111815; /* fondo: verde bosque nocturno */ --pv-night-2: #18221e; /* superficies */ --pv-night-3: #1f2c26; /* superficies elevadas */ --pv-action: #76b5a5; /* acción principal (salvia clara) */ --pv-gold: #d3ad60; /* SOLO referencias/fragmentos bíblicos */ --pv-gold-dim: #9a7f47; --pv-care: #d09a9e; /* cuidado/emoción (rosa apagado) */ --pv-parchment: #e8eee9; /* texto destacado */ --pv-ink: #ccd6cf; /* texto normal */ --pv-muted: #8ba095; /* secundario */ --pv-line: #2d3b35; /* bordes */ --pv-line-gold: #3d4f47; /* bordes marcados */ --pv-font-display: "Literata", Georgia, serif; /* lectura larga */ --pv-font-ui: "Inter", system-ui, -apple-system, sans-serif; } /* Transición suave al cambiar de tema (sin mareos: solo color y fondo) */ body, .pv-card, .pv-navbar, .pv-footer, .pv-chat-sidebar, .pv-chat-inputbar, .pv-auth-card, .form-control, .pv-verse-card { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* ========================================================================== TEMA CLARO — "página de libro a la luz del día". Cómo funciona: mismo diseño editorial, pero remapeando las variables: la tinta nocturna pasa a papel crema, el texto claro a tinta sepia, y el oro se oscurece para mantener contraste legible sobre claro. Se activa con data-theme="light" en (theme.js + botón navbar). ========================================================================== */ [data-theme="light"] { /* PALETA "REFUGIO EDITORIAL" (tema claro) Papel verdoso muy suave, superficies blancas, tinta verde-gris profunda, acción en verde bosque (confianza) y dorado solo para lo bíblico. Nada deslumbra; todo acompaña. */ --pv-night: #f6f7f4; /* fondo papel verdoso */ --pv-night-2: #ffffff; /* superficies */ --pv-night-3: #eef1ec; /* superficies elevadas */ --pv-action: #2f6f62; /* acción principal (verde bosque) */ --pv-gold: #b6852f; /* referencias bíblicas */ --pv-gold-dim: #c9a765; --pv-care: #9d646b; /* cuidado/emoción */ --pv-parchment: #1f2b27; /* texto destacado */ --pv-ink: #33403a; /* texto normal */ --pv-muted: #6d7d75; /* secundario */ --pv-line: #d8e0dc; --pv-line-gold: #c4cfc8; } /* La cita «...» del chat usa un tono fijo: se adapta por tema */ [data-theme="light"] .pv-quote { color: #6b5416; } /* ---------- Base: NADA redondeado, NADA con sombra difusa -------------- */ *, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; } body { background: var(--pv-night); color: var(--pv-ink); font-family: var(--pv-font-ui); font-size: .95rem; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } h1, h2, h3, .pv-display { font-family: var(--pv-font-display); color: var(--pv-parchment); font-weight: 500; } a { color: var(--pv-action); text-decoration: none; } a:hover { color: var(--pv-parchment); } ::selection { background: var(--pv-action); color: var(--pv-night); } /* Etiqueta editorial reutilizable: VERSALITAS espaciadas */ .pv-label { font-family: var(--pv-font-ui); font-size: .78rem; font-weight: 600; color: var(--pv-muted); } /* Ornamento tipográfico centrado: ───── ✦ ───── */ .pv-ornament { display: flex; align-items: center; gap: 1rem; color: var(--pv-gold); margin: 1.5rem auto; max-width: 280px; } .pv-ornament::before, .pv-ornament::after { content: ""; flex: 1; border-top: 1px solid var(--pv-line-gold); } /* ---------- Navbar: cabecera de periódico -------------------------------- */ .pv-navbar { background: var(--pv-night); border-bottom: 1px solid var(--pv-line-gold); } .pv-brand { font-family: var(--pv-font-display); font-size: 1.45rem; letter-spacing: .04em; color: var(--pv-parchment) !important; } .pv-brand .pv-flame { color: var(--pv-action); } .pv-brand-accent { color: var(--pv-action); } /* --- Menú de cuenta (avatar con inicial, estilo Claude/ChatGPT) --------- */ .pv-avatar { width: 2.2rem; height: 2.2rem; background: var(--pv-night-3); border: 1px solid var(--pv-line-gold); color: var(--pv-gold); font-family: var(--pv-font-display); font-size: 1.05rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pv-avatar:hover { border-color: var(--pv-action); } .pv-avatar.dropdown-toggle::after { display: none; } /* sin la flechita de Bootstrap */ .pv-dropdown { background: var(--pv-night-2); border: 1px solid var(--pv-line-gold); padding: .4rem 0; min-width: 220px; } .pv-dropdown .dropdown-item { color: var(--pv-ink); font-size: .85rem; padding: .55rem 1rem; } .pv-dropdown .dropdown-item:hover { background: var(--pv-night-3); color: var(--pv-action); } .pv-dropdown .dropdown-divider { border-color: var(--pv-line); opacity: 1; } .pv-dropdown-header { padding: .5rem 1rem .4rem; } .pv-dropdown-name { font-family: var(--pv-font-display); font-size: 1.05rem; color: var(--pv-parchment); } .pv-dropdown-mail { font-size: .72rem; color: var(--pv-muted); } .navbar-nav .nav-link { font-size: .88rem; font-weight: 500; color: var(--pv-muted); } .navbar-nav .nav-link:hover { color: var(--pv-action); } /* Selector de idioma ES · EN */ .pv-lang { font-size: .75rem; letter-spacing: .1em; color: var(--pv-muted); } .pv-lang a { color: var(--pv-muted); } .pv-lang a.active { color: var(--pv-action); border-bottom: 1px solid var(--pv-action); } .pv-lang a:hover { color: var(--pv-gold); } /* Botón de tema claro/oscuro (☾ / ☀) */ .pv-theme-btn { background: transparent; border: 1px solid var(--pv-line); color: var(--pv-muted); width: 2.1rem; height: 2.1rem; line-height: 1; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .pv-theme-btn:hover { color: var(--pv-action); border-color: var(--pv-action); } /* ---------- Botones: rectangulares, tipo papelería fina ------------------ */ .btn-gold, .btn-ghost { font-family: var(--pv-font-ui); font-size: .88rem; font-weight: 600; padding: .65rem 1.5rem; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn-gold { background: transparent; border: 1px solid var(--pv-action); color: var(--pv-action); } .btn-gold:hover:not(:disabled) { background: var(--pv-action); /* hover: se invierte, con calma */ color: var(--pv-night); border-color: var(--pv-action); } .btn-gold:disabled { border-color: var(--pv-line); color: var(--pv-muted); background: transparent; } .btn-ghost { background: transparent; border: 1px solid var(--pv-line); color: var(--pv-muted); } .btn-ghost:hover { border-color: var(--pv-action); color: var(--pv-action); background: transparent; } /* ---------- Superficies: filete + doble línea superior ------------------- */ .pv-card { background: var(--pv-night-2); border: 1px solid var(--pv-line); border-top: 3px double var(--pv-gold-dim); /* firma editorial */ padding: .25rem; } /* ---------- Hero (portada): portada de libro ----------------------------- */ .pv-hero { padding: 5.5rem 0 2.5rem; text-align: center; } .pv-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 500; letter-spacing: .01em; } .pv-hero h1 em { font-style: italic; color: var(--pv-gold); } .pv-hero .lead { color: var(--pv-muted); max-width: 620px; margin: 1.25rem auto 2rem; font-size: 1rem; line-height: 1.8; } /* Los rayos SVG ya no se usan (quedó el bloque por compatibilidad) */ .pv-rays { display: none; } /* Versículo del día: enmarcado como lámina, doble filete ------------------ */ .pv-verse-card { max-width: 700px; margin: 0 auto; padding: 2.75rem 2.5rem; background: var(--pv-night-2); border: 1px solid var(--pv-line-gold); outline: 1px solid var(--pv-line-gold); outline-offset: 5px; /* marco doble clásico de imprenta */ position: relative; } .pv-verse-card::before { /* pequeño ornamento superior en lugar de la comilla gigante */ content: "·"; position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--pv-night); padding: 0 .75rem; color: var(--pv-gold); font-size: .9rem; } .pv-verse-text { font-family: var(--pv-font-display); font-size: 1.55rem; font-style: italic; line-height: 1.7; color: var(--pv-parchment); } .pv-verse-ref { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--pv-gold); margin-top: 1.25rem; } /* ---------- Formularios (login / registro): ficha de registro civil ------ */ .pv-auth-card { max-width: 440px; margin: 4rem auto; padding: 2.5rem 2.25rem; background: var(--pv-night-2); border: 1px solid var(--pv-line); border-top: 3px double var(--pv-gold-dim); } .pv-auth-card .form-control { background: var(--pv-night); border: none; border-bottom: 1px solid var(--pv-line); /* subrayado, como formulario impreso */ color: var(--pv-ink); padding: .7rem .75rem; } .pv-auth-card .form-control:focus { border-bottom-color: var(--pv-gold); background: var(--pv-night); color: var(--pv-ink); outline: none; } .pv-auth-card label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pv-muted); } /* ---------- Lector bíblico: índice de libro clásico ----------------------- */ .pv-testament-title { font-family: var(--pv-font-ui); font-size: .72rem; font-weight: 600; color: var(--pv-muted); border-bottom: 3px double var(--pv-line-gold); padding-bottom: .6rem; margin: 2rem 0 1rem; } .pv-book-link { display: block; padding: .45rem .25rem; color: var(--pv-ink); font-family: var(--pv-font-display); font-size: 1.05rem; border-bottom: 1px dotted var(--pv-line); /* línea de índice/tabla de contenido */ } .pv-book-link:hover { color: var(--pv-gold); border-bottom-color: var(--pv-gold-dim); } /* Capítulos: casillas cuadradas, numeración de imprenta */ .pv-chapter-grid { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--pv-line); border-left: 1px solid var(--pv-line); max-width: 46rem; } .pv-chapter-pill { width: 3.1rem; height: 3.1rem; display: inline-flex; align-items: center; justify-content: center; border-right: 1px solid var(--pv-line); border-bottom: 1px solid var(--pv-line); color: var(--pv-parchment); font-family: var(--pv-font-display); font-size: 1.05rem; } .pv-chapter-pill:hover { background: var(--pv-action); color: var(--pv-night); } /* ---------- Lector de capítulo: página de libro interactiva -------------- */ /* Barra de lectura fija (arriba): navegar sin perder el hilo */ .pv-reader-bar { position: sticky; top: 0; z-index: 10; background: var(--pv-night); border-bottom: 1px solid var(--pv-line-gold); padding: .55rem 0; } .pv-reader-nav { font-size: .72rem; color: var(--pv-muted); white-space: nowrap; } .pv-reader-nav:hover { color: var(--pv-gold); } .pv-reader-title { font-family: var(--pv-font-display); font-size: 1.1rem; color: var(--pv-parchment); } .pv-chapter-select { background: var(--pv-night); color: var(--pv-gold); border: 1px solid var(--pv-line); font-family: var(--pv-font-ui); font-size: .85rem; padding: .2rem .5rem; cursor: pointer; } .pv-chapter-select:focus { border-color: var(--pv-gold); outline: none; } /* El texto: columna de lectura cómoda */ .pv-scripture { font-family: var(--pv-font-display); color: var(--pv-parchment); max-width: 42rem; margin: 0 auto; } /* Cada versículo es un bloque clicable con número colgante a la izquierda */ .pv-verse { position: relative; font-size: 1.3rem; line-height: 1.85; margin: 0 0 .35rem; padding: .35rem 1rem .35rem 3.2rem; cursor: pointer; scroll-margin-top: 5rem; /* que la barra fija no tape el ancla #v5 */ transition: background .12s ease; } .pv-verse:hover { background: var(--pv-night-2); } /* Seleccionado (click) o llegando por link directo (#v5): resaltado */ .pv-verse.selected, .pv-verse:target { background: var(--pv-night-3); border-left: 2px solid var(--pv-gold); padding-left: calc(3.2rem - 2px); } /* Número colgante en el margen, como Biblia de estudio */ .pv-verse-num { position: absolute; left: .5rem; top: .55rem; width: 2.2rem; text-align: right; font-family: var(--pv-font-ui); font-size: .72rem; color: var(--pv-gold-dim); } .pv-verse-num:hover { color: var(--pv-gold); } /* Capitular dorada en el primer versículo del capítulo */ .pv-verse:first-of-type .pv-verse-body::first-letter { font-size: 3em; float: left; line-height: .85; padding-right: .1em; color: var(--pv-gold); } /* Barra de acciones del versículo (copiar / link / compartir) */ .pv-verse-actions { max-width: 42rem; margin: .25rem auto .9rem; padding-left: 3.2rem; display: flex; gap: .5rem; } .pv-verse-actions button { background: transparent; border: 1px solid var(--pv-line); color: var(--pv-muted); font-family: var(--pv-font-ui); font-size: .7rem; padding: .4rem .9rem; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .pv-verse-actions button:hover { border-color: var(--pv-action); color: var(--pv-action); } /* --- SUBRAYADOS de colores (persistidos en el navegador) ------------------ Funcionan en ambos temas: fondos translúcidos sobre el texto. !important a propósito: el subrayado debe verse SIEMPRE, incluso cuando el versículo está seleccionado/:target/hover (esas reglas pintan su propio fondo y taparían el color — era el bug de "no funciona"). */ .pv-hl-gold { background: rgba(201, 169, 97, .22) !important; } .pv-hl-olive { background: rgba(133, 153, 92, .25) !important; } .pv-hl-rose { background: rgba(198, 106, 106, .22) !important; } .pv-hl-blue { background: rgba(100, 133, 186, .25) !important; } /* Paleta de colores en la barra de acciones */ .pv-swatches { display: inline-flex; gap: .35rem; margin-left: .5rem; align-items: center; } .pv-swatch { width: 1.5rem; height: 1.5rem; border: 1px solid var(--pv-line); cursor: pointer; padding: 0; } .pv-swatch:hover { border-color: var(--pv-gold); } .pv-swatch-gold { background: rgba(201, 169, 97, .55); } .pv-swatch-olive { background: rgba(133, 153, 92, .55); } .pv-swatch-rose { background: rgba(198, 106, 106, .55); } .pv-swatch-blue { background: rgba(100, 133, 186, .55); } .pv-swatch-none { background: transparent; color: var(--pv-muted); font-size: .9rem; line-height: 1; } /* Cierre del capítulo: seguir leyendo */ .pv-reader-footer { max-width: 42rem; margin: 3rem auto 0; display: flex; justify-content: space-between; gap: 1rem; border-top: 3px double var(--pv-line-gold); padding-top: 1.5rem; } /* ---------- Chat: diálogo de libro impreso, no burbujas ------------------- */ /* 100dvh: altura real en móviles (la barra del navegador no rompe el layout) */ .pv-chat-wrap { display: flex; height: calc(100dvh - 62px); } .pv-chat-sidebar { width: 300px; background: var(--pv-night-2); border-right: 1px solid var(--pv-line); overflow-y: auto; padding: 1.25rem 1rem; } .pv-thread { display: block; padding: .6rem .5rem; color: var(--pv-muted); font-size: .9rem; border-bottom: 1px dotted var(--pv-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-thread:hover { color: var(--pv-gold); } .pv-thread.active { color: var(--pv-parchment); border-left: 2px solid var(--pv-gold); padding-left: .75rem; } .pv-chat-main { flex: 1; display: flex; flex-direction: column; position: relative; } .pv-chat-messages { flex: 1; overflow-y: auto; padding: 2.5rem 1.25rem; scroll-behavior: smooth; } /* --- Botón flotante "bajar al final" (aparece si no estás abajo) -------- */ .pv-scroll-bottom { position: absolute; bottom: 6.5rem; left: 50%; transform: translateX(-50%) translateY(8px); width: 2.6rem; height: 2.6rem; border-radius: 50% !important; background: var(--pv-night-3); border: 1px solid var(--pv-line-gold); color: var(--pv-action); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 20; } .pv-scroll-bottom.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .pv-scroll-bottom:hover { border-color: var(--pv-action); color: var(--pv-parchment); } .pv-msg { max-width: 44rem; margin: 0 auto 1.75rem; display: block; } .pv-msg-bubble { line-height: 1.75; } .pv-msg-bubble::before { display: block; font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; margin-bottom: .5rem; font-family: var(--pv-font-ui); } /* --- MENSAJE DEL USUARIO: se destaca como tarjeta a la derecha ---------- (estilo ChatGPT/Claude). Superficie propia, alineado a la derecha y ancho acotado, para que "lo que yo escribí" salte a la vista frente a la respuesta editorial de BibleReply. */ .pv-msg-user { display: flex; flex-direction: column; align-items: flex-end; } .pv-msg-user .pv-msg-bubble { background: var(--pv-night-3); border: 1px solid var(--pv-line); border-right: 3px solid var(--pv-action); color: var(--pv-parchment); padding: .85rem 1.1rem; max-width: 85%; white-space: pre-wrap; /* respeta los saltos de línea del usuario */ } .pv-msg-user .pv-msg-bubble::before { content: "Tú"; color: var(--pv-action); text-align: right; } /* --- RESPUESTA DE BIBLEREPLY: bloque editorial abierto, filete dorado */ .pv-msg-assistant .pv-msg-bubble { border-left: 2px solid var(--pv-gold); padding: 0 0 0 1.25rem; font-family: var(--pv-font-display); font-size: 1.14rem; line-height: 1.85; color: var(--pv-parchment); } .pv-msg-assistant .pv-msg-bubble::before { content: "BibleReply"; color: var(--pv-action); } /* --- Formato enriquecido de los mensajes de la IA (via chat.js) --- */ /* Párrafos con aire entre ideas */ .pv-msg-assistant .pv-msg-bubble p { margin: 0 0 1rem; } .pv-msg-assistant .pv-msg-bubble p:last-child { margin-bottom: 0; } /* Bloque de versículo citado: sangrado con doble filete dorado */ .pv-msg-assistant .pv-msg-bubble .pv-verse-block { border-left: 3px double var(--pv-gold-dim); padding: .35rem 0 .35rem 1.1rem; margin: 1.1rem 0; } /* La cita «...» en sí: tono papel cálido, cursiva */ .pv-quote { color: #e8d5a3; font-style: italic; } /* Referencia bíblica linkeada: dorada con subrayado punteado; lleva al versículo exacto en el lector */ .pv-ref { color: var(--pv-gold); border-bottom: 1px dotted var(--pv-gold-dim); white-space: nowrap; font-family: var(--pv-font-ui); font-size: .82em; letter-spacing: .06em; } .pv-ref:hover { color: var(--pv-parchment); border-bottom-color: var(--pv-gold); } /* Resaltado de ideas clave (las **negritas** del modelo) */ .pv-msg-assistant .pv-msg-bubble strong { color: var(--pv-gold); font-weight: 600; } .pv-msg-assistant .pv-msg-bubble em { color: var(--pv-parchment); } /* --- "Pensando": tres ✦ que laten en secuencia (editorial, sin spinners) */ .pv-thinking span { color: var(--pv-gold); animation: pv-pulse 1.2s ease-in-out infinite; display: inline-block; margin-right: .4rem; } .pv-thinking span:nth-child(2) { animation-delay: .2s; } .pv-thinking span:nth-child(3) { animation-delay: .4s; } @keyframes pv-pulse { 0%, 100% { opacity: .15; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* Cursor de escritura (typewriter) */ .pv-caret { color: var(--pv-gold); animation: pv-blink 1s step-end infinite; font-family: var(--pv-font-ui); } @keyframes pv-blink { 50% { opacity: 0; } } /* Botón ☰ del sidebar en móvil */ .pv-sidebar-toggle { position: fixed; top: 72px; left: .6rem; z-index: 45; background: var(--pv-night-2); border: 1px solid var(--pv-line-gold); color: var(--pv-gold); width: 2.4rem; height: 2.4rem; cursor: pointer; } /* Barra de entrada: escritorio de trabajo, línea superior fina */ .pv-chat-inputbar { border-top: 1px solid var(--pv-line-gold); padding: 1.1rem 1.25rem; background: var(--pv-night-2); } .pv-chat-inputbar .form-control { background: var(--pv-night); border: none; border-bottom: 1px solid var(--pv-line); color: var(--pv-ink); padding: .75rem .5rem; } .pv-chat-inputbar .form-control:focus { border-bottom-color: var(--pv-gold); background: var(--pv-night); outline: none; } /* ---------- Bootstrap: aplacar sus redondeos/sombras restantes ----------- */ .alert { border: 1px solid var(--pv-line); border-left: 3px solid currentColor; background: var(--pv-night-2); } .breadcrumb { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; } .input-group .form-control { background: var(--pv-night); border: 1px solid var(--pv-line); color: var(--pv-ink); } .input-group .form-control:focus { border-color: var(--pv-gold); } /* ---------- Footer: colofón editorial de 3 columnas ---------------------- */ .pv-footer { border-top: 3px double var(--pv-line-gold); color: var(--pv-muted); font-size: .82rem; line-height: 1.7; padding: 2.5rem 0 1.25rem; margin-top: 4rem; background: var(--pv-night-2); } .pv-footer .pv-brand { font-size: 1.2rem; } .pv-footer-links { list-style: none; padding: 0; margin: 0; } .pv-footer-links li { padding: .15rem 0; } .pv-footer-links a { color: var(--pv-muted); } .pv-footer-links a:hover { color: var(--pv-gold); } .pv-footer-bottom { border-top: 1px solid var(--pv-line); margin-top: 1.75rem; padding-top: 1rem; text-align: center; font-family: var(--pv-font-display); font-style: italic; font-size: .95rem; } /* Aviso bajo el input del chat */ .pv-chat-disclaimer { max-width: 46rem; margin: .5rem auto 0; text-align: center; font-size: .68rem; color: var(--pv-muted); } /* ---------- Páginas legales ------------------------------------------------ */ .pv-legal h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--pv-line); } .pv-legal p, .pv-legal li { color: var(--pv-ink); line-height: 1.8; font-size: .92rem; } .pv-legal strong { color: var(--pv-parchment); } .pv-legal ul { padding-left: 1.25rem; } /* ---------- Panel de admin -------------------------------------------------- */ .pv-admin-nav { display: flex; justify-content: center; gap: 0; border: 1px solid var(--pv-line); } .pv-admin-nav a { padding: .6rem 1.4rem; font-size: .75rem; color: var(--pv-muted); border-right: 1px solid var(--pv-line); } .pv-admin-nav a:last-child { border-right: none; } .pv-admin-nav a.active { color: var(--pv-action); background: var(--pv-night-2); } .pv-admin-nav a:hover { color: var(--pv-action); } .pv-admin-num { font-family: var(--pv-font-display); font-size: 1.9rem; color: var(--pv-gold); } .pv-admin-table { --bs-table-bg: transparent; color: var(--pv-ink); font-size: .84rem; } .pv-admin-table th { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--pv-muted); border-color: var(--pv-line-gold) !important; } .pv-admin-table td { border-color: var(--pv-line) !important; color: var(--pv-ink); } .form-select.pv-admin-input, .pv-card .form-control, .pv-card .form-select { background: var(--pv-night); border: 1px solid var(--pv-line); color: var(--pv-ink); } .pv-card .form-control:focus, .pv-card .form-select:focus { border-color: var(--pv-gold); } /* ---------- Responsive ------------------------------------------------------ */ @media (max-width: 768px) { /* CHAT móvil: el sidebar se convierte en panel deslizante (botón ☰) */ .pv-chat-sidebar { display: none; position: fixed; top: 62px; bottom: 0; left: 0; width: min(85vw, 320px); z-index: 40; border-right: 1px solid var(--pv-line-gold); } .pv-chat-sidebar.open { display: block; } .pv-chat-messages { padding: 1.25rem .9rem 1.25rem 3.4rem; } /* aire para el ☰ */ .pv-msg-assistant .pv-msg-bubble { font-size: 1.08rem; } /* Portada y lector */ .pv-hero { padding: 3rem 0 2rem; } .pv-hero h1 { font-size: 2.4rem; } .pv-verse-card { padding: 2rem 1.25rem; } .pv-verse-text { font-size: 1.25rem; } .pv-verse { font-size: 1.15rem; padding-left: 2.6rem; } .pv-verse.selected, .pv-verse:target { padding-left: calc(2.6rem - 2px); } .pv-verse-num { width: 1.8rem; left: .3rem; } .pv-verse-actions { padding-left: 2.6rem; flex-wrap: wrap; row-gap: .5rem; } .pv-reader-footer { flex-direction: column; } .pv-reader-bar .pv-reader-nav { font-size: .65rem; } /* Formularios y tarjetas cómodos en pantalla chica */ .pv-auth-card { margin: 2rem auto; padding: 1.75rem 1.25rem; } .pv-chapter-pill { width: 2.8rem; height: 2.8rem; } /* Inputs: 16px mínimo para que iOS no haga zoom al enfocar */ .form-control, .pv-chat-inputbar .form-control { font-size: 16px; } } /* Pantallas muy chicas: compactar la navbar */ @media (max-width: 400px) { .pv-brand { font-size: 1.2rem; } .pv-hero h1 { font-size: 2rem; } } /* ---------- Compositor del chat: textarea que crece 2-8 líneas ---------- */ .pv-chat-inputbar textarea.form-control { resize: none; overflow-y: auto; min-height: 3rem; max-height: 12rem; line-height: 1.5; } /* ---------- Banner fino de apoyo (descartable) --------------------------- */ .pv-banner { background: var(--pv-night-3); border-bottom: 1px solid var(--pv-line); font-size: .8rem; color: var(--pv-muted); padding: .45rem 0; } .pv-banner a { color: var(--pv-action); } .pv-banner button { background: none; border: none; color: var(--pv-muted); cursor: pointer; padding: 0 .5rem; font-size: 1rem; line-height: 1; } /* ---------- Chips de temas en la portada --------------------------------- */ .pv-topics { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .pv-topic { border: 1px solid var(--pv-line); background: var(--pv-night-2); color: var(--pv-ink); padding: .55rem 1.1rem; font-size: .88rem; } .pv-topic:hover { border-color: var(--pv-action); color: var(--pv-action); } /* ---------- Accesibilidad: respetar la preferencia de menos movimiento --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================== EDITORIAL SERENA 2026 -------------------------------------------------------------------------- Capa final del sistema visual seleccionado. Mantiene los contratos de las plantillas y de JavaScript, pero reemplaza el tratamiento ornamental por una composición editorial sobria, legible y consistente en claro/oscuro. ========================================================================== */ :root, [data-theme="light"] { --pv-night: #f3f0e8; --pv-night-2: #fbfaf6; --pv-night-3: #e9ece5; --pv-action: #426b5c; --pv-action-strong: #315348; --pv-accent: #8d3a42; --pv-gold: #9a6d2f; --pv-gold-dim: #b49460; --pv-care: #8d3a42; --pv-parchment: #202522; --pv-ink: #39413c; --pv-muted: #687068; --pv-line: #c9c8bc; --pv-line-gold: #aeb5ae; --pv-hero-panel: #426b5c; --pv-hero-panel-ink: #f7f2e8; --pv-shadow: rgba(32, 37, 34, .08); --pv-font-display: "Literata", Georgia, "Times New Roman", serif; --pv-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } [data-theme="dark"] { --pv-night: #121715; --pv-night-2: #18201d; --pv-night-3: #202b26; --pv-action: #78ad98; --pv-action-strong: #9bc5b5; --pv-accent: #d07b83; --pv-gold: #d1a65a; --pv-gold-dim: #92784e; --pv-care: #d07b83; --pv-parchment: #e9e5da; --pv-ink: #cdd3cd; --pv-muted: #97a198; --pv-line: #38443e; --pv-line-gold: #52625a; --pv-hero-panel: #294d41; --pv-hero-panel-ink: #f2eee4; --pv-shadow: rgba(0, 0, 0, .18); } *, *::before, *::after { border-radius: 0 !important; letter-spacing: 0 !important; } html { min-width: 320px; scroll-behavior: smooth; } body { background: var(--pv-night); color: var(--pv-ink); font-family: var(--pv-font-ui); font-size: .95rem; line-height: 1.6; } main { min-width: 0; } h1, h2, h3, h4, h5, h6, .pv-display { color: var(--pv-parchment); font-family: var(--pv-font-display); font-weight: 500; } p, li { text-wrap: pretty; } a { color: var(--pv-action); } a:hover { color: var(--pv-accent); } .text-secondary, .form-text { color: var(--pv-muted) !important; } ::selection { background: var(--pv-accent); color: #fff; } .container { --bs-gutter-x: 2rem; } .pv-label { color: var(--pv-accent); font-family: var(--pv-font-ui); font-size: .7rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; } .pv-ornament { width: 4rem; height: 1px; margin: 1.25rem auto; overflow: hidden; background: var(--pv-accent); color: transparent; } /* Navegación ------------------------------------------------------------- */ .pv-navbar { min-height: 72px; padding: 0; border-bottom: 1px solid var(--pv-parchment); background: color-mix(in srgb, var(--pv-night) 96%, transparent); --bs-navbar-color: var(--pv-muted); --bs-navbar-hover-color: var(--pv-parchment); --bs-navbar-active-color: var(--pv-parchment); --bs-navbar-brand-color: var(--pv-parchment); --bs-navbar-brand-hover-color: var(--pv-parchment); backdrop-filter: blur(10px); } .pv-navbar .container { min-height: 72px; } .pv-brand { display: inline-flex; align-items: center; gap: .7rem; margin: 0; color: var(--pv-parchment) !important; font-family: var(--pv-font-display); font-size: 1.35rem; font-weight: 600; } .pv-brand-mark { width: 2.5rem; height: 2.5rem; display: inline-block; flex: 0 0 auto; } .pv-brand-mark svg { display: block; width: 100%; height: 100%; fill: none; } .pv-brand-mark path { stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; } .pv-brand-page { stroke: var(--pv-action); } .pv-brand-lift { stroke: var(--pv-gold); } .pv-brand-word { white-space: nowrap; } .pv-brand-accent { color: var(--pv-action); font-style: italic; font-weight: 400; } .pv-auth-brand { justify-content: center; margin-bottom: .75rem; font-size: 1.45rem; } .pv-navbar .nav-link { position: relative; padding: 1.55rem .65rem 1.45rem; color: var(--pv-muted); font-size: .76rem; font-weight: 600; text-transform: uppercase; } .pv-navbar .nav-link::after { content: ""; position: absolute; left: .65rem; right: .65rem; bottom: 0; height: 3px; background: transparent; } .pv-navbar .nav-link.active { color: var(--pv-parchment); } .pv-navbar .nav-link.active::after { background: var(--pv-accent); } .navbar-toggler { width: 42px; height: 42px; padding: 7px; border: 1px solid var(--pv-line); } .navbar-toggler:focus { box-shadow: none; border-color: var(--pv-action); } .pv-lang { min-height: 36px; color: var(--pv-line-gold); font-size: .68rem; } .pv-lang a { color: var(--pv-muted); } .pv-lang a.active { color: var(--pv-accent); font-weight: 700; } .pv-theme-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--pv-line); background: transparent; color: var(--pv-parchment); cursor: pointer; } .pv-theme-btn:hover { border-color: var(--pv-action); color: var(--pv-action); } [data-theme="light"] .pv-theme-icon-light { display: none; } [data-theme="dark"] .pv-theme-icon-dark { display: none; } .pv-avatar { width: 38px; height: 38px; border: 1px solid var(--pv-action); border-radius: 50% !important; background: var(--pv-action); color: var(--pv-night); font-size: .78rem; font-weight: 700; } .pv-dropdown { min-width: 250px; padding: .5rem; border: 1px solid var(--pv-line); background: var(--pv-night-2); color: var(--pv-ink); } .pv-dropdown .dropdown-item { padding: .6rem .7rem; color: var(--pv-ink); font-size: .82rem; } .pv-dropdown .dropdown-item:hover { background: var(--pv-night-3); color: var(--pv-parchment); } .pv-dropdown-header { padding: .65rem .7rem; } .pv-dropdown-name { color: var(--pv-parchment); font-weight: 600; } .pv-dropdown-mail { color: var(--pv-muted); font-size: .75rem; } .dropdown-divider { border-color: var(--pv-line); } .pv-banner { padding: .45rem 0; border-bottom: 1px solid var(--pv-line); background: var(--pv-night-3); color: var(--pv-muted); font-size: .76rem; } /* Botones y formularios -------------------------------------------------- */ .btn { min-height: 40px; padding: .65rem 1rem; border-width: 1px; font-size: .76rem; font-weight: 700; text-transform: uppercase; } .btn-sm { min-height: 34px; padding: .45rem .75rem; font-size: .7rem; } .btn-lg { min-height: 48px; padding: .85rem 1.3rem; font-size: .78rem; } .btn-gold { border-color: var(--pv-action); background: var(--pv-action); color: var(--pv-night); } .btn-gold:hover, .btn-gold:focus { border-color: var(--pv-action-strong); background: var(--pv-action-strong); color: var(--pv-night); } .btn-ghost { border-color: var(--pv-line-gold); background: transparent; color: var(--pv-parchment); } .btn-ghost:hover, .btn-ghost:focus { border-color: var(--pv-accent); color: var(--pv-accent); } .form-control, .form-select, .input-group .form-control, .pv-card .form-control, .pv-card .form-select, .form-select.pv-admin-input { min-height: 44px; border: 1px solid var(--pv-line); background: var(--pv-night-2); color: var(--pv-ink); } .form-control::placeholder { color: color-mix(in srgb, var(--pv-muted) 75%, transparent); } .form-control:focus, .form-select:focus, .input-group .form-control:focus, .pv-card .form-control:focus, .pv-card .form-select:focus { border-color: var(--pv-action); background: var(--pv-night-2); color: var(--pv-parchment); box-shadow: inset 3px 0 0 var(--pv-action) !important; } .form-label, .pv-auth-card label { color: var(--pv-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; } .form-check-input { border: 1px solid var(--pv-line-gold); background-color: var(--pv-night-2); } .form-check-input:checked { border-color: var(--pv-action); background-color: var(--pv-action); } /* Portada ---------------------------------------------------------------- */ .pv-home-hero { width: min(1440px, 100%); min-height: 520px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr); margin: 0 auto; border-bottom: 1px solid var(--pv-line); } .pv-home-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 5.5rem max(3rem, calc((100vw - 1320px) / 2 + 1rem)); } .pv-home-copy h1 { max-width: 870px; margin: 0; font-size: 4.2rem; line-height: 1.03; } .pv-home-copy h1 em { color: var(--accent, var(--pv-accent)); font-weight: 400; } .pv-home-lead { max-width: 720px; margin: 1.6rem 0 0; color: var(--pv-muted); font-family: var(--pv-font-display); font-size: 1.18rem; line-height: 1.65; } .pv-home-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; } .pv-home-verse { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 3.5rem 2.6rem; border-left: 1px solid var(--pv-parchment); background: var(--pv-hero-panel); color: var(--pv-hero-panel-ink); } .pv-home-verse-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; } .pv-home-verse blockquote { margin: auto 0 1.5rem; color: var(--pv-hero-panel-ink); font-family: var(--pv-font-display); font-size: 1.75rem; line-height: 1.45; } .pv-home-verse cite { padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--pv-hero-panel-ink) 40%, transparent); color: var(--pv-hero-panel-ink); font-size: .72rem; font-style: normal; font-weight: 700; text-transform: uppercase; } .pv-home-content { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; padding-top: 3.5rem; padding-bottom: 5rem; } .pv-home-index { border-top: 3px solid var(--pv-accent); } .pv-home-index > .pv-label { padding: 1rem 0 .7rem; } .pv-home-index nav { display: grid; } .pv-home-index a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--pv-line); color: var(--pv-muted); font-size: .78rem; } .pv-home-index a:hover { color: var(--pv-parchment); } .pv-home-index a span { color: var(--pv-accent); font-variant-numeric: tabular-nums; } .pv-home-editorial { min-width: 0; } .pv-home-intro { max-width: 760px; } .pv-home-intro p { margin: .8rem 0 2.5rem; color: var(--pv-parchment); font-family: var(--pv-font-display); font-size: 1.55rem; line-height: 1.5; } .pv-home-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pv-parchment); } .pv-home-features article { min-width: 0; padding: 1.5rem 1.5rem 1rem 0; } .pv-home-features article + article { padding-left: 1.5rem; border-left: 1px solid var(--pv-line); } .pv-home-features article > span { color: var(--pv-accent); font-size: .72rem; font-weight: 700; } .pv-home-features h2 { margin: .7rem 0; font-size: 1.25rem; } .pv-home-features p { margin: 0; color: var(--pv-muted); font-size: .86rem; line-height: 1.65; } /* Biblia e índice -------------------------------------------------------- */ .pv-bible-page { min-width: 0; } .pv-bible-hero { width: min(1440px, 100%); min-height: 310px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); margin: 0 auto; border-bottom: 1px solid var(--pv-line); } .pv-bible-hero > div { display: flex; flex-direction: column; justify-content: center; padding: 4rem max(3rem, calc((100vw - 1320px) / 2 + 1rem)); } .pv-bible-hero h1 { margin: 0; font-size: 3.5rem; } .pv-bible-hero p { max-width: 650px; margin: 1rem 0 0; color: var(--pv-muted); font-family: var(--pv-font-display); font-size: 1.1rem; } .pv-bible-search { display: flex; flex-direction: column; justify-content: center; padding: 3rem 2.5rem; border-left: 1px solid var(--pv-parchment); background: var(--pv-hero-panel); } .pv-bible-search label { margin-bottom: .8rem; color: var(--pv-hero-panel-ink); font-size: .72rem; font-weight: 700; text-transform: uppercase; } .pv-bible-search .form-control { border-color: color-mix(in srgb, var(--pv-hero-panel-ink) 45%, transparent); background: transparent; color: var(--pv-hero-panel-ink); } .pv-bible-search .form-control::placeholder { color: color-mix(in srgb, var(--pv-hero-panel-ink) 72%, transparent); } .pv-bible-search .btn { border-color: var(--pv-hero-panel-ink); background: var(--pv-hero-panel-ink); color: var(--pv-hero-panel); } .pv-testaments { padding-top: 2.5rem; padding-bottom: 5rem; } .pv-testaments .col-md-6 + .col-md-6 { border-left: 1px solid var(--pv-line); } .pv-testament-title { margin: 0 0 1rem; padding: 0 0 .8rem; border-bottom: 3px solid var(--pv-accent); color: var(--pv-parchment); font-family: var(--pv-font-ui); font-size: .72rem; font-weight: 700; text-transform: uppercase; } .pv-book-link { padding: .55rem .25rem; border-bottom: 1px solid var(--pv-line); color: var(--pv-ink); font-family: var(--pv-font-display); font-size: 1rem; } .pv-book-link:hover { border-bottom-color: var(--pv-accent); color: var(--pv-accent); } .breadcrumb { margin-bottom: 2rem; font-size: .72rem; text-transform: uppercase; } .breadcrumb-item.active { color: var(--pv-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--pv-line-gold); } .pv-chapter-grid { max-width: 52rem; gap: 0; border-top: 1px solid var(--pv-line); border-left: 1px solid var(--pv-line); } .pv-chapter-pill { width: 3.35rem; height: 3.35rem; border-right: 1px solid var(--pv-line); border-bottom: 1px solid var(--pv-line); color: var(--pv-parchment); } .pv-chapter-pill:hover { background: var(--pv-action); color: var(--pv-night); } /* Lector ----------------------------------------------------------------- */ .pv-reader-bar { top: 72px; padding: .65rem 0; border-bottom: 1px solid var(--pv-line); background: color-mix(in srgb, var(--pv-night) 96%, transparent); backdrop-filter: blur(10px); } .pv-reader-title { color: var(--pv-parchment); font-size: 1.02rem; } .pv-reader-nav { color: var(--pv-muted); font-size: .72rem; } .pv-reader-nav:hover { color: var(--pv-accent); } .pv-chapter-select { min-height: 34px; border: 1px solid var(--pv-line); background: var(--pv-night-2); color: var(--pv-accent); } .pv-scripture { max-width: 46rem; color: var(--pv-parchment); } .pv-verse { margin: 0 0 .2rem; padding: .55rem 1rem .55rem 3.4rem; font-size: 1.24rem; line-height: 1.9; scroll-margin-top: 9rem; } .pv-verse:hover { background: var(--pv-night-2); } .pv-verse.selected, .pv-verse:target { border-left: 3px solid var(--pv-accent); background: var(--pv-night-3); padding-left: calc(3.4rem - 3px); } .pv-verse-num { top: .78rem; color: var(--pv-accent); font-size: .7rem; } .pv-verse:first-of-type .pv-verse-body::first-letter { color: var(--pv-accent); } .pv-verse-actions { max-width: 46rem; padding: .7rem 0 .7rem 3.4rem; align-items: center; justify-content: space-between; gap: .8rem; border-top: 1px solid var(--pv-line); border-bottom: 1px solid var(--pv-line); } .pv-verse-command-list, .pv-highlight-tools, .pv-swatches { display: flex; align-items: center; } .pv-verse-command-list { gap: .35rem; } .pv-verse-actions .pv-verse-command-list button { min-height: 36px; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .58rem; border-color: var(--pv-line); color: var(--pv-muted); white-space: nowrap; } .pv-verse-actions button:hover { border-color: var(--pv-action); color: var(--pv-action); } .pv-verse-actions button:focus-visible { outline: 2px solid var(--pv-action); outline-offset: 2px; } .pv-highlight-tools { gap: .6rem; margin-left: auto; padding-left: .8rem; border-left: 1px solid var(--pv-line); } .pv-highlight-label { flex: 0 0 auto; color: var(--pv-muted); font-family: var(--pv-font-ui); font-size: .68rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; } .pv-swatches { gap: .42rem; margin-left: 0; } .pv-verse-actions .pv-swatch { position: relative; flex: 0 0 2rem; width: 2rem; height: 2rem; min-height: 2rem; padding: 0; border: 2px solid var(--pv-night-2); border-radius: 50% !important; outline: 1px solid var(--pv-line); color: #17201b; } .pv-verse-actions .pv-swatch:hover { border-color: var(--pv-night-2); outline-color: var(--pv-action); } .pv-verse-actions .pv-swatch-gold { background: #e7c968; } .pv-verse-actions .pv-swatch-olive { background: #aebe78; } .pv-verse-actions .pv-swatch-rose { background: #d99ca3; } .pv-verse-actions .pv-swatch-blue { background: #91b5da; } .pv-verse-actions .pv-swatch.is-active { border-color: var(--pv-night-2); outline: 3px solid var(--pv-parchment); outline-offset: 1px; } .pv-swatch.is-active::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .82rem; font-weight: 800; } .pv-verse-actions .pv-swatch-none { display: grid; place-items: center; border-width: 1px; background: var(--pv-night-2); color: var(--pv-muted); outline: 1px solid var(--pv-line); } .pv-verse-actions .pv-swatch-none:disabled { cursor: default; opacity: .35; } /* El color se reconoce de inmediato sin reducir el contraste del texto. */ .pv-verse.pv-hl-gold, .pv-verse.pv-hl-olive, .pv-verse.pv-hl-rose, .pv-verse.pv-hl-blue { padding-left: calc(3.4rem - 4px); border-left: 4px solid var(--pv-highlight-line); background: var(--pv-highlight-bg) !important; } .pv-verse.pv-hl-gold { --pv-highlight-line: #d8b64f; --pv-highlight-bg: #393322; } .pv-verse.pv-hl-olive { --pv-highlight-line: #93aa61; --pv-highlight-bg: #2c3828; } .pv-verse.pv-hl-rose { --pv-highlight-line: #c77f88; --pv-highlight-bg: #3b292c; } .pv-verse.pv-hl-blue { --pv-highlight-line: #78a4cf; --pv-highlight-bg: #263542; } [data-theme="light"] .pv-verse.pv-hl-gold { --pv-highlight-line: #b88a18; --pv-highlight-bg: #f7e6a8; } [data-theme="light"] .pv-verse.pv-hl-olive { --pv-highlight-line: #6f873d; --pv-highlight-bg: #dce8b9; } [data-theme="light"] .pv-verse.pv-hl-rose { --pv-highlight-line: #aa5f69; --pv-highlight-bg: #f2cdd1; } [data-theme="light"] .pv-verse.pv-hl-blue { --pv-highlight-line: #4f79a5; --pv-highlight-bg: #cfe0f0; } .pv-reader-footer { max-width: 46rem; border-top: 1px solid var(--pv-parchment); } /* Tarjetas, cuenta, planes y admin --------------------------------------- */ .pv-card { border: 1px solid var(--pv-line); border-top: 3px solid var(--pv-action); background: var(--pv-night-2); color: var(--pv-ink); } .pv-verse-card { outline: 0; border-top-color: var(--pv-accent); } .pv-verse-card::before { display: none; } .pv-verse-text { color: var(--pv-parchment); font-size: 1.45rem; } .pv-verse-ref { color: var(--pv-accent); } .pv-auth-card { max-width: 470px; margin: 4rem auto; padding: 2.5rem; border: 1px solid var(--pv-line); border-top: 4px solid var(--pv-accent); background: var(--pv-night-2); } .pv-auth-card .form-control { border: 1px solid var(--pv-line); background: var(--pv-night); } .pv-auth-card .form-control:focus { border-color: var(--pv-action); background: var(--pv-night); } .pv-plan-list { margin: 0 0 1.5rem; padding: 0; list-style: none; } .pv-plan-list li { padding: .65rem 0 .65rem 1.2rem; border-bottom: 1px solid var(--pv-line); color: var(--pv-ink); } .pv-plan-list li::before { content: ""; width: 6px; height: 6px; display: inline-block; margin-left: -1.2rem; margin-right: .8rem; background: var(--pv-action); } .pv-admin-nav { justify-content: flex-start; overflow-x: auto; border: 0; border-bottom: 1px solid var(--pv-line); } .pv-admin-nav a { flex: 0 0 auto; padding: .7rem 1rem; border: 0; border-bottom: 3px solid transparent; color: var(--pv-muted); } .pv-admin-nav a.active { border-bottom-color: var(--pv-accent); background: transparent; color: var(--pv-parchment); } .pv-admin-num { color: var(--pv-action); } .pv-admin-table { --bs-table-bg: transparent; --bs-table-color: var(--pv-ink); } .pv-admin-table th { color: var(--pv-muted); border-color: var(--pv-line) !important; } .pv-admin-table td { color: var(--pv-ink); border-color: var(--pv-line) !important; } /* Admin operativo: compacto, legible y usable durante sesiones largas. */ .pv-admin-container { max-width: 76rem; } .pv-admin-head, .pv-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .pv-admin-panel { border: 1px solid var(--pv-line); border-top: 3px solid var(--pv-action); background: var(--pv-night-2); } .pv-admin-kpi { padding: 1.1rem 1.2rem; border-left: 3px solid var(--pv-action); background: var(--pv-night-2); } .pv-status { display: inline-block; padding: .2rem .45rem; border: 1px solid var(--pv-line); color: var(--pv-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; } .pv-status.is-ok { border-color: var(--pv-action); color: var(--pv-action); } .pv-status.is-danger { border-color: var(--pv-care); color: var(--pv-care); } .pv-status.is-warning { border-color: #d3ad60; color: #d3ad60; } .pv-admin-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .pv-admin-section-head h2 { margin: .25rem 0 0; font-size: 1.15rem; } .pv-admin-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .pv-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--pv-line); } .pv-kpi-grid article { display: flex; align-items: flex-start; gap: .9rem; min-width: 0; padding: 1.1rem; background: var(--pv-night-2); } .pv-kpi-grid article:nth-child(n+2) { border-left: 1px solid var(--pv-line); } .pv-kpi-grid article:nth-child(n+4) { border-top: 1px solid var(--pv-line); } .pv-kpi-grid article:nth-child(4) { border-left: 0; } .pv-kpi-grid article > i { flex: 0 0 auto; color: var(--pv-action); font-size: 1.1rem; } .pv-kpi-grid article > div { min-width: 0; } .pv-kpi-grid span, .pv-kpi-grid small { display: block; color: var(--pv-muted); font-size: .7rem; } .pv-kpi-grid strong { display: block; margin: .18rem 0; color: var(--pv-parchment); font-size: 1.35rem; overflow-wrap: anywhere; } .pv-budget-row + .pv-budget-row { margin-top: 1.15rem; } .pv-budget-row > div:first-child { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; font-size: .78rem; } .pv-progress { height: 8px; overflow: hidden; background: var(--pv-night); } .pv-progress span { display: block; height: 100%; background: var(--pv-action); } .pv-inline-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.2rem; color: var(--pv-action); font-size: .78rem; } .pv-money-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--pv-line); font-size: .82rem; } .pv-money-list .is-result { color: var(--pv-action); } .pv-status-line { display: flex; flex-wrap: wrap; gap: .5rem; } .pv-status-line span { padding: .25rem .45rem; border: 1px solid var(--pv-line); color: var(--pv-muted); font-size: .68rem; } .pv-bar-chart { display: grid; grid-template-columns: repeat(14, minmax(12px, 1fr)); gap: .35rem; height: 210px; align-items: end; } .pv-bar-column { display: grid; grid-template-rows: 22px 150px 18px; min-width: 0; text-align: center; } .pv-bar-value { align-self: end; overflow: hidden; color: var(--pv-muted); font-size: .55rem; } .pv-bar-track { position: relative; height: 150px; background: var(--pv-night); } .pv-bar-track i { position: absolute; right: 0; bottom: 0; left: 0; min-height: 2px; background: var(--pv-action); } .pv-bar-chart.is-cost .pv-bar-track i { background: var(--pv-accent); } .pv-bar-column small { padding-top: .25rem; color: var(--pv-muted); font-size: .6rem; } .pv-admin-alerts { border: 1px solid var(--pv-line); border-top: 3px solid #d3ad60; background: var(--pv-night-2); padding: 1rem 1.25rem; } .pv-alert-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .65rem 0; border-top: 1px solid var(--pv-line); color: var(--pv-ink); } .pv-alert-row > i { color: #d3ad60; } .pv-alert-row.is-critical > i { color: var(--pv-care); } .pv-alert-row strong, .pv-alert-row small { display: block; } .pv-alert-row small, .pv-alert-row time { color: var(--pv-muted); font-size: .7rem; } .pv-content-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 680px; overflow: auto; } .pv-content-books a { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: .55rem; border-bottom: 1px solid var(--pv-line); color: var(--pv-ink); font-size: .8rem; } .pv-content-books a.active { border-left: 3px solid var(--pv-action); background: var(--pv-night); } .pv-content-books a > span { color: var(--pv-muted); } .pv-content-books small { grid-column: 2; color: var(--pv-muted); font-size: .62rem; } .pv-verse-admin-list article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .75rem 0; border-bottom: 1px solid var(--pv-line); } .pv-verse-admin-list article > span { color: var(--pv-action); font-weight: 700; } .pv-verse-admin-list p { margin: 0; font-family: var(--pv-font-display); line-height: 1.65; } .pv-verse-admin-list article > div { display: flex; gap: .25rem; } @media (max-width: 767.98px) { .pv-admin-head, .pv-admin-toolbar { align-items: stretch; flex-direction: column; } .pv-admin-head .btn, .pv-admin-toolbar .btn-gold { width: 100%; } .pv-admin-table { min-width: 700px; } .pv-admin-layout { grid-template-columns: 1fr; } .pv-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-kpi-grid article:nth-child(n) { border-left: 0; border-top: 1px solid var(--pv-line); } .pv-kpi-grid article:nth-child(even) { border-left: 1px solid var(--pv-line); } .pv-kpi-grid article:nth-child(-n+2) { border-top: 0; } .pv-bar-chart { gap: .2rem; } .pv-bar-value { display: none; } .pv-alert-row { grid-template-columns: 20px minmax(0, 1fr); } .pv-alert-row time { display: none; } .pv-content-books { grid-template-columns: 1fr; max-height: 360px; } } .alert { border: 1px solid var(--pv-line); border-left: 4px solid currentColor; background: var(--pv-night-2); color: var(--pv-ink); } /* Chat ------------------------------------------------------------------- */ .pv-chat-wrap { height: calc(100dvh - 73px); border-top: 0; } .pv-chat-sidebar { width: 290px; padding: 1.4rem 1rem; border-right: 1px solid var(--pv-line); background: var(--pv-night-2); } .pv-thread { padding: .72rem .55rem; border-bottom: 1px solid var(--pv-line); color: var(--pv-muted); } .pv-thread.active { border-left: 3px solid var(--pv-accent); color: var(--pv-parchment); } .pv-chat-main { min-width: 0; } .pv-chat-messages { padding: 2.75rem 1.5rem; } .pv-msg { max-width: 48rem; margin-bottom: 2rem; } .pv-msg-bubble::before { color: var(--pv-accent); font-size: .67rem; font-weight: 700; } .pv-msg-user .pv-msg-bubble { max-width: 82%; padding: .9rem 1.1rem; border: 1px solid var(--pv-line); border-right: 3px solid var(--pv-action); background: var(--pv-night-3); color: var(--pv-parchment); } .pv-msg-assistant .pv-msg-bubble { padding-left: 1.35rem; border-left: 3px solid var(--pv-accent); color: var(--pv-parchment); font-size: 1.08rem; line-height: 1.85; } .pv-msg-assistant .pv-msg-bubble::before { color: var(--pv-accent); } .pv-msg-assistant .pv-msg-bubble .pv-verse-block { border-left: 3px solid var(--pv-gold); } .pv-quote { color: var(--pv-gold); } [data-theme="light"] .pv-quote { color: #72521f; } .pv-ref { color: var(--pv-gold); border-bottom-color: var(--pv-gold-dim); } .pv-msg-assistant .pv-msg-bubble strong { color: var(--pv-accent); } .pv-chat-inputbar { padding: 1rem 1.25rem; border-top: 1px solid var(--pv-line); background: var(--pv-night-2); } .pv-chat-inputbar .form-control { min-height: 50px; padding: .75rem; border: 1px solid var(--pv-line); background: var(--pv-night); } .pv-chat-inputbar .form-control:focus { border-color: var(--pv-action); background: var(--pv-night); } .pv-chat-disclaimer { color: var(--pv-muted); } .pv-sidebar-toggle { top: 82px; border-color: var(--pv-line); background: var(--pv-night-2); color: var(--pv-accent); } .pv-scroll-bottom { border-radius: 50% !important; border-color: var(--pv-line); background: var(--pv-night-3); color: var(--pv-action); } /* Footer ----------------------------------------------------------------- */ .pv-footer { margin-top: 0; padding: 3rem 0 1.25rem; border-top: 1px solid var(--pv-parchment); background: var(--pv-night-2); color: var(--pv-muted); } .pv-footer .pv-brand { font-size: 1.15rem; } .pv-footer-links a { color: var(--pv-muted); } .pv-footer-links a:hover { color: var(--pv-accent); } .pv-footer-bottom { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--pv-line); text-align: left; color: var(--pv-muted); } @media (max-width: 991px) { .pv-navbar .container { padding-top: .55rem; padding-bottom: .55rem; } .pv-navbar .navbar-collapse { padding: .8rem 0 1rem; border-top: 1px solid var(--pv-line); } .pv-navbar .nav-link { padding: .65rem 0; } .pv-navbar .nav-link::after { left: 0; right: auto; width: 34px; height: 2px; } .pv-lang { margin: .5rem 0; } .pv-home-copy h1 { font-size: 3.45rem; } .pv-home-content { grid-template-columns: 180px minmax(0, 1fr); gap: 2rem; } .pv-home-features { grid-template-columns: 1fr; } .pv-home-features article { padding: 1.25rem 0; border-bottom: 1px solid var(--pv-line); } .pv-home-features article + article { padding-left: 0; border-left: 0; } } @media (max-width: 768px) { .container { --bs-gutter-x: 1.25rem; } .pv-navbar, .pv-navbar .container { min-height: 62px; } .pv-brand { font-size: 1.12rem; } .pv-brand-mark { width: 2rem; height: 2rem; } .pv-home-hero, .pv-bible-hero { grid-template-columns: 1fr; min-height: 0; } .pv-home-copy { padding: 3.5rem 1.25rem 3rem; } .pv-home-copy h1 { font-size: 2.65rem; line-height: 1.08; } .pv-home-lead { font-size: 1.05rem; } .pv-home-actions .btn { flex: 1 1 150px; } .pv-home-verse { min-height: 280px; padding: 2rem 1.4rem; border-left: 0; border-top: 1px solid var(--pv-parchment); } .pv-home-verse blockquote { margin-top: 3rem; font-size: 1.45rem; } .pv-home-content { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 2.5rem; padding-bottom: 3.5rem; } .pv-home-index nav { grid-template-columns: 1fr 1fr; } .pv-home-index a:nth-child(2) { border-top-color: var(--pv-line); } .pv-home-intro p { font-size: 1.3rem; } .pv-bible-hero > div { padding: 3.25rem 1.25rem 2.5rem; } .pv-bible-hero h1 { font-size: 2.65rem; } .pv-bible-search { padding: 2rem 1.25rem; border-left: 0; border-top: 1px solid var(--pv-parchment); } .pv-testaments { padding-top: 1.5rem; padding-bottom: 3.5rem; } .pv-testaments > .row, .pv-testaments .row-cols-2 { margin-left: 0; margin-right: 0; } .pv-testaments > .row > .col-md-6 { padding-left: 0; padding-right: 0; } .pv-testaments .row-cols-2 > .col { padding-left: 0; padding-right: 1rem; } .pv-testaments .col-md-6 + .col-md-6 { border-left: 0; } .pv-reader-bar { top: 62px; } .pv-reader-bar .container { padding-left: .6rem; padding-right: .6rem; } .pv-reader-bar .pv-reader-nav { max-width: 72px; overflow: hidden; text-overflow: ellipsis; font-size: .62rem; } .pv-scripture { max-width: 100%; } .pv-verse { padding-left: 2.8rem; padding-right: .25rem; font-size: 1.1rem; line-height: 1.85; } .pv-verse.selected, .pv-verse:target { padding-left: calc(2.8rem - 3px); } .pv-verse-actions { padding: .75rem 0 .75rem 2.8rem; align-items: stretch; flex-direction: column; gap: .7rem; } .pv-verse-command-list { width: 100%; } .pv-verse-command-list button { flex: 1 1 auto; justify-content: center; } .pv-highlight-tools { width: 100%; justify-content: space-between; margin-left: 0; padding: .65rem 0 0; border-top: 1px solid var(--pv-line); border-left: 0; } .pv-verse-actions .pv-swatch { flex-basis: 2.5rem; width: 2.5rem; height: 2.5rem; min-height: 2.5rem; } .pv-verse.pv-hl-gold, .pv-verse.pv-hl-olive, .pv-verse.pv-hl-rose, .pv-verse.pv-hl-blue { padding-left: calc(2.8rem - 4px); } .pv-chat-wrap { height: calc(100dvh - 63px); } .pv-chat-sidebar { top: 62px; } .pv-chat-messages { padding: 1.5rem .9rem 1.25rem 3.25rem; } .pv-msg-user .pv-msg-bubble { max-width: 92%; } .pv-msg-assistant .pv-msg-bubble { font-size: 1.02rem; } .pv-chat-inputbar { padding: .8rem; } .pv-sidebar-toggle { top: 72px; } .pv-scroll-bottom { bottom: 7rem; } .pv-auth-card { margin: 2rem auto; padding: 1.6rem 1.25rem; } .pv-plan-grid { margin-left: 0; margin-right: 0; } .pv-plan-grid > [class*="col-"] { padding-left: 0; padding-right: 0; } .pv-footer { padding-top: 2.25rem; } .pv-footer .row { margin-left: 0; margin-right: 0; } .pv-footer .row > * { padding-left: 0; padding-right: 0; } } @media (max-width: 420px) { .pv-home-copy h1, .pv-bible-hero h1 { font-size: 2.25rem; } .pv-home-index nav { grid-template-columns: 1fr; } .pv-book-link { font-size: .94rem; } .pv-chapter-pill { width: 2.9rem; height: 2.9rem; } .pv-verse-actions { padding-left: 0; } .pv-swatches { gap: .3rem; } .pv-verse-actions .pv-swatch { flex-basis: 2.35rem; width: 2.35rem; height: 2.35rem; min-height: 2.35rem; } } /* Portada v2: producto editorial, cercanía y límites claros -------------- */ .pv-home-stage { position: relative; isolation: isolate; min-height: min(760px, calc(100svh - 110px)); display: flex; align-items: stretch; overflow: hidden; border-bottom: 1px solid #82978d; background: #17231e url("../brand/home-bible.webp") center 62% / cover no-repeat; } .pv-home-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(13, 24, 19, .76); } .pv-home-stage-inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 5rem; padding-bottom: 7.5rem; } .pv-home-stage .pv-label { color: #d3ad60; } .pv-home-stage h1 { max-width: 920px; margin: 1rem 0 0; color: #f6f7f4; font-size: 4.35rem; line-height: 1.04; } .pv-home-stage h1 em { color: #d3ad60; font-weight: 400; } .pv-home-stage-lead { max-width: 760px; margin: 1.6rem 0 0; color: #d9e2dc; font-family: var(--pv-font-display); font-size: 1.2rem; line-height: 1.65; } .pv-home-stage .pv-home-actions { margin-top: 2.15rem; } .pv-home-stage .btn-gold { border-color: #e8eee9; background: #e8eee9; color: #111815; } .pv-home-stage .btn-gold:hover { border-color: #76b5a5; background: #76b5a5; color: #111815; } .pv-home-stage .btn-ghost { border-color: #8ba095; color: #f6f7f4; } .pv-home-stage .btn-ghost:hover { border-color: #d3ad60; color: #d3ad60; } .pv-home-boundary { display: flex; align-items: flex-start; gap: .65rem; max-width: 720px; margin: 1.35rem 0 0; color: #aebdb5; font-size: .78rem; line-height: 1.55; } .pv-home-boundary i { margin-top: .1rem; color: #d3ad60; font-size: 1rem; } .pv-home-stage-meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; border-top: 1px solid rgba(232, 238, 233, .3); background: rgba(13, 24, 19, .84); color: #c8d5ce; } .pv-home-stage-meta span { min-width: 210px; padding: 1rem 2rem; text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase; } .pv-home-stage-meta span + span { border-left: 1px solid rgba(232, 238, 233, .22); } .pv-home-foundation, .pv-home-method, .pv-home-voices, .pv-home-closing { padding: 5.5rem 0; } .pv-home-section-head { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); gap: 4rem; align-items: end; margin-bottom: 3rem; } .pv-home-section-head h2, .pv-home-method h2, .pv-home-voices h2, .pv-home-closing h2 { margin: 0; font-size: 2.65rem; line-height: 1.15; } .pv-home-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pv-parchment); } .pv-home-principles article { min-width: 0; padding: 1.8rem 2rem 0 0; } .pv-home-principles article + article { padding-left: 2rem; border-left: 1px solid var(--pv-line); } .pv-home-principles article > span, .pv-home-method li > span { color: var(--pv-accent); font-size: .72rem; font-weight: 700; } .pv-home-principles h3 { margin: .8rem 0; font-size: 1.35rem; } .pv-home-principles p, .pv-home-method li p, .pv-home-closing p { margin: 0; color: var(--pv-muted); line-height: 1.75; } .pv-home-method { border-top: 1px solid var(--pv-line); border-bottom: 1px solid var(--pv-line); background: var(--pv-night-2); } .pv-home-method-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 6rem; } .pv-home-method header .pv-label { margin-bottom: 1rem; } .pv-home-method ol { margin: 0; padding: 0; list-style: none; } .pv-home-method li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 1rem; padding: 1.45rem 0; border-top: 1px solid var(--pv-line); } .pv-home-method li:last-child { border-bottom: 1px solid var(--pv-line); } .pv-home-method li h3 { margin: 0 0 .45rem; font-size: 1.18rem; } .pv-home-voices-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: 6rem; } .pv-home-voices h2 { max-width: 520px; margin-top: 1rem; } .pv-home-voices-copy { padding-top: .15rem; border-top: 3px solid var(--pv-accent); } .pv-home-voices-copy p { margin: 1.4rem 0 0; color: var(--pv-ink); font-family: var(--pv-font-display); font-size: 1.18rem; line-height: 1.75; } .pv-home-voices-copy p + p { color: var(--pv-muted); font-family: var(--pv-font-ui); font-size: .9rem; } .pv-home-daily { padding: 4.5rem 0; border-top: 1px solid #6f8e80; border-bottom: 1px solid #6f8e80; background: #315f52; color: #f6f7f4; } .pv-home-daily .pv-label { color: #d3ad60; } .pv-home-daily blockquote { max-width: 960px; margin: 1.4rem 0 1.5rem; color: #f6f7f4; font-family: var(--pv-font-display); font-size: 2.15rem; line-height: 1.5; } .pv-home-daily cite { color: #dbe5df; font-size: .75rem; font-style: normal; font-weight: 700; text-transform: uppercase; } .pv-home-closing-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 6rem; margin-top: 1rem; } .pv-home-closing p { max-width: 560px; margin-top: 1.2rem; } .pv-home-closing nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--pv-parchment); } .pv-home-closing nav a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--pv-line); color: var(--pv-ink); font-size: .88rem; } .pv-home-closing nav a:nth-child(odd) { padding-right: 1.5rem; } .pv-home-closing nav a:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--pv-line); } .pv-home-closing nav a:hover { color: var(--pv-action); } .pv-home-closing nav i { color: var(--pv-accent); } @media (max-width: 991px) { .pv-home-stage h1 { font-size: 3.55rem; } .pv-home-section-head, .pv-home-method-grid, .pv-home-voices-grid, .pv-home-closing-grid { gap: 3rem; } } @media (max-width: 768px) { .pv-home-stage { min-height: calc(100svh - 96px); background-position: 54% center; } .pv-home-stage::before { background: rgba(13, 24, 19, .8); } .pv-home-stage-inner { padding-top: 4rem; padding-bottom: 8.5rem; } .pv-home-stage h1 { font-size: 2.55rem; line-height: 1.08; } .pv-home-stage-lead { font-size: 1rem; line-height: 1.6; } .pv-home-stage .pv-home-actions { width: 100%; } .pv-home-stage .pv-home-actions .btn { flex: 1 1 145px; padding-left: .75rem; padding-right: .75rem; } .pv-home-stage-meta { display: grid; grid-template-columns: repeat(3, 1fr); } .pv-home-stage-meta span { min-width: 0; padding: .85rem .4rem; font-size: .56rem; line-height: 1.35; } .pv-home-foundation, .pv-home-method, .pv-home-voices, .pv-home-closing { padding: 3.5rem 0; } .pv-home-section-head, .pv-home-method-grid, .pv-home-voices-grid, .pv-home-closing-grid { grid-template-columns: 1fr; gap: 2rem; } .pv-home-section-head h2, .pv-home-method h2, .pv-home-voices h2, .pv-home-closing h2 { font-size: 2.1rem; } .pv-home-principles { grid-template-columns: 1fr; } .pv-home-principles article { padding: 1.4rem 0; border-bottom: 1px solid var(--pv-line); } .pv-home-principles article + article { padding-left: 0; border-left: 0; } .pv-home-method li { grid-template-columns: 38px minmax(0, 1fr); } .pv-home-voices-copy p { font-size: 1.05rem; } .pv-home-daily { padding: 3.25rem 0; } .pv-home-daily blockquote { font-size: 1.55rem; } .pv-home-closing nav { grid-template-columns: 1fr; } .pv-home-closing nav a:nth-child(odd), .pv-home-closing nav a:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; } } @media (max-width: 420px) { .pv-home-stage h1 { font-size: 2.3rem; } .pv-home-boundary { font-size: .72rem; } } /* Home conversation demo */ .pv-home-demo { padding: 5.5rem 0; border-bottom: 1px solid var(--pv-line); background: var(--pv-night); } .pv-home-demo-grid { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(3rem, 7vw, 6.5rem); align-items: center; } .pv-home-demo-copy { min-width: 0; } .pv-home-demo-copy h2 { margin: 1rem 0 1.25rem; font-size: 2.65rem; line-height: 1.15; } .pv-home-demo-copy > p { margin: 0; color: var(--pv-muted); line-height: 1.75; } .pv-home-demo-copy .pv-home-demo-note { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--pv-line); font-size: .78rem; line-height: 1.55; } .pv-home-demo-note i { flex: 0 0 auto; margin-top: .08rem; color: var(--pv-action); font-size: 1rem; } .pv-demo-shell { min-width: 0; border: 1px solid var(--pv-line-gold); background: var(--pv-night-2); box-shadow: 0 24px 70px rgba(6, 10, 8, .16); } .pv-demo-header, .pv-demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: .8rem 1.4rem; } .pv-demo-header { border-bottom: 1px solid var(--pv-line); } .pv-demo-footer { border-top: 1px solid var(--pv-line); } .pv-demo-brand .pv-brand-mark { width: 32px; height: 32px; } .pv-demo-brand .pv-brand-word { font-size: 1rem; } .pv-demo-header > span { color: var(--pv-muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; } .pv-demo-transcript { height: 430px; overflow: auto; padding: 1.65rem 1.75rem; scrollbar-width: thin; scrollbar-color: var(--pv-line-gold) transparent; } .pv-demo-message { min-width: 0; animation: pv-demo-enter .28s ease-out both; } .pv-demo-message + .pv-demo-message { margin-top: 1.7rem; } .pv-demo-message > span { display: block; margin-bottom: .5rem; color: var(--pv-action); font-size: .64rem; font-weight: 700; text-transform: uppercase; } .pv-demo-message p { margin: 0; line-height: 1.7; } .pv-demo-user { max-width: 78%; margin-left: auto; padding: 1rem 1.15rem; border: 1px solid var(--pv-line); background: var(--pv-night-3); } .pv-demo-user > span { color: var(--pv-muted); } .pv-demo-assistant { max-width: 92%; padding-left: 1.25rem; border-left: 3px solid var(--pv-accent); } .pv-demo-assistant blockquote { margin: 1.15rem 0 .55rem; padding-left: 1rem; border-left: 1px solid var(--pv-line-gold); color: var(--pv-parchment); font-family: var(--pv-font-display); font-size: 1.06rem; line-height: 1.7; } .pv-demo-assistant cite { color: var(--pv-accent); font-size: .68rem; font-style: normal; font-weight: 700; text-transform: uppercase; } .pv-demo-thinking { display: flex; align-items: center; gap: .35rem; min-height: 28px; } .pv-demo-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--pv-action); animation: pv-demo-pulse 1s ease-in-out infinite; } .pv-demo-thinking span:nth-child(2) { animation-delay: .14s; } .pv-demo-thinking span:nth-child(3) { animation-delay: .28s; } .pv-demo-status { color: var(--pv-muted); font-size: .72rem; } .pv-demo-footer a { display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; color: var(--pv-action); font-size: .75rem; font-weight: 700; } .pv-demo-footer a:hover { color: var(--pv-accent); } @keyframes pv-demo-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes pv-demo-pulse { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @media (max-width: 991px) { .pv-home-demo-grid { gap: 3rem; } .pv-demo-transcript { height: 450px; } } @media (max-width: 768px) { .pv-home-demo { padding: 3.5rem 0; } .pv-home-demo-grid { grid-template-columns: 1fr; gap: 2.25rem; } .pv-home-demo-copy h2 { font-size: 2.1rem; } .pv-demo-transcript { height: 480px; padding: 1.35rem 1.15rem; } .pv-demo-user { max-width: 90%; } .pv-demo-assistant { max-width: 96%; } } @media (max-width: 420px) { .pv-demo-header, .pv-demo-footer { padding: .75rem 1rem; } .pv-demo-header > span { display: none; } .pv-demo-footer { align-items: flex-start; flex-direction: column; } .pv-demo-transcript { height: 510px; } } @media (prefers-reduced-motion: reduce) { .pv-demo-message, .pv-demo-thinking span { animation: none; } } .pv-membership-price { color: var(--pv-gold); font-family: var(--pv-font-display); font-size: 1.3rem; } .pv-membership-price small { display: block; color: var(--pv-muted); font-family: var(--pv-font-ui); font-size: .75rem; margin-top: .2rem; } .pv-payment-methods { display: grid; gap: .65rem; } .pv-payment-trust { display: grid; gap: .35rem; color: var(--pv-muted); font-size: .78rem; } .pv-payment-trust span { display: flex; align-items: center; gap: .45rem; } .pv-positioning { font-family: var(--pv-font-display); font-size: 1.05rem; font-style: italic; } /* Chat app polish --------------------------------------------------------- */ .pv-chat-wrap { display: flex; height: calc(100dvh - 73px); min-height: 0; overflow: hidden; background: var(--pv-night); } .pv-chat-sidebar { flex: 0 0 292px; width: 292px; padding: .9rem; border-right: 1px solid var(--pv-line); background: var(--pv-night-2); overflow-y: auto; } .pv-chat-sidebar-head { position: sticky; top: 0; z-index: 2; padding-bottom: .8rem; background: var(--pv-night-2); } .pv-thread-list { display: grid; gap: .25rem; } .pv-thread-row { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; align-items: center; gap: .25rem; } .pv-thread { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .72rem .75rem; border: 1px solid transparent; color: var(--pv-muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-thread span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pv-thread:hover, .pv-thread.active { color: var(--pv-parchment); background: var(--pv-night-3); border-color: var(--pv-line); } .pv-thread.active { border-left: 3px solid var(--pv-action); } .pv-chat-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; } .pv-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2rem clamp(1rem, 4vw, 3rem); scroll-behavior: smooth; } .pv-msg { width: min(100%, 50rem); max-width: none; margin: 0 auto 1.35rem; } .pv-msg-bubble { overflow-wrap: anywhere; word-break: normal; } .pv-msg-user { display: flex; justify-content: flex-end; } .pv-msg-user .pv-msg-bubble { max-width: min(82%, 38rem); padding: .78rem 1rem; border: 1px solid var(--pv-line); background: var(--pv-night-3); color: var(--pv-parchment); font-family: var(--pv-font-ui); font-size: .95rem; line-height: 1.55; white-space: pre-wrap; } .pv-msg-user .pv-msg-bubble::before { content: none; } .pv-msg-assistant .pv-msg-bubble { max-width: 100%; padding-left: 1rem; border-left: 3px solid var(--pv-action); color: var(--pv-parchment); font-size: 1.05rem; line-height: 1.78; } .pv-msg-assistant .pv-msg-bubble::before { content: "BibleReply"; margin-bottom: .55rem; } .pv-chat-inputbar { flex: 0 0 auto; padding: .9rem clamp(.85rem, 3vw, 1.4rem) calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--pv-line); background: color-mix(in srgb, var(--pv-night-2) 94%, transparent); } .pv-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: .6rem; width: min(100%, 50rem); margin: 0 auto; align-items: end; } .pv-chat-inputbar textarea.form-control { width: 100%; min-height: 3.15rem; max-height: 12rem; resize: none; padding: .85rem .95rem; border: 1px solid var(--pv-line); background: var(--pv-night); color: var(--pv-ink); line-height: 1.45; } .pv-chat-send { width: 3rem; height: 3.15rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .pv-chat-disclaimer { width: min(100%, 50rem); margin: .45rem auto 0; font-size: .68rem; } .pv-chat-topbar { flex: 0 0 auto; height: 3.5rem; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem; align-items: center; gap: .5rem; padding: .55rem .75rem; border-bottom: 1px solid var(--pv-line); background: var(--pv-night-2); } .pv-chat-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pv-parchment); font-size: .92rem; font-weight: 600; text-align: center; } .pv-chat-new { justify-self: end; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--pv-action); border: 1px solid var(--pv-line); } .pv-sidebar-toggle { position: static; justify-self: start; z-index: 1; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pv-line); background: var(--pv-night-2); color: var(--pv-action); } body.pv-chat-sidebar-open .pv-sidebar-toggle { position: relative; z-index: 75; } .pv-chat-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); } .pv-chat-backdrop[hidden] { display: none; } .pv-scroll-bottom { bottom: 6.7rem; } .pv-vision-output { white-space: pre-wrap; line-height: 1.75; } .pv-vision-result { min-height: 17rem; } @media (max-width: 767.98px) { body.pv-chat-sidebar-open { overflow: hidden; } .pv-chat-wrap { height: calc(100dvh - 63px); } .pv-chat-sidebar { display: block; position: fixed; top: 63px; bottom: 0; left: 0; z-index: 60; width: min(86vw, 320px); transform: translateX(-102%); transition: transform .18s ease; border-right: 1px solid var(--pv-line); } .pv-chat-sidebar.open { transform: translateX(0); } .pv-chat-main { width: 100%; } .pv-chat-messages { padding: 1.05rem .85rem 1.15rem; } .pv-msg { margin-bottom: 1.1rem; } .pv-msg-user .pv-msg-bubble { max-width: 88%; font-size: .94rem; } .pv-msg-assistant .pv-msg-bubble { font-size: 1rem; line-height: 1.7; padding-left: .85rem; } .pv-chat-inputbar { padding: .7rem .7rem calc(.65rem + env(safe-area-inset-bottom)); } .pv-chat-form { grid-template-columns: minmax(0, 1fr) 2.75rem; gap: .5rem; } .pv-chat-send { width: 2.75rem; } .pv-scroll-bottom { bottom: 6.4rem; } } /* --- HOME: chips de consulta sobre oración (abren el chat con la pregunta) --- */ .pv-pray-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .pv-pray-chips a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem .9rem; border: 1px solid var(--pv-line); background: var(--pv-night-2); color: var(--pv-ink); font-size: .86rem; text-decoration: none; } .pv-pray-chips a:hover { border-color: var(--pv-action); color: var(--pv-action); } .pv-pray-chips i { color: var(--pv-accent); } @media (max-width: 575px) { .pv-pray-chips { grid-template-columns: 1fr; } }