/** * Estilos de las vistas que NO son páginas de código: entradas del blog, * páginas normales, archivos y WooCommerce. * * Todo se expresa con variables CSS de valores sobrios. Antes estos estilos * llevaban escritos a mano los colores, las fuentes y los fondos de un cliente * concreto, de modo que el tema imponía una identidad ajena a cualquier sitio * que lo instalara. * * Para adaptarlo a un sitio basta redefinir las variables, ya sea desde * Apariencia → Personalizar → CSS adicional o desde el global. * * POR QUÉ TODO CUELGA DE `#r77-contenido` * --------------------------------------- * El tema envuelve cada vista en el envoltorio del diseño (`#mi-app`) para que * el header y el pie globales se vean. Ese envoltorio trae un reset escrito * para el markup de la página, y con selectores de id: * * #mi-app * { margin: 0; padding: 0 } * * Una clase nunca le gana a un id, así que un archivo escrito sólo con clases * quedaba anulado entero: el artículo salía sin aire y sin centrar. Por eso el * contenido lleva un id propio y todas las reglas cuelgan de él — juegan en la * misma liga que el reset y le ganan por ser más específicas. * * Para redefinir algo desde «CSS adicional» hace falta esa misma altura: * `#r77-contenido .r77-entry__title { … }`. */ :root { --r77-bg: transparent; --r77-surface: rgba(0, 0, 0, 0.03); --r77-text: inherit; --r77-text-muted: #6b7280; --r77-accent: #4f46e5; --r77-accent-hover: #4338ca; --r77-accent-contrast: #ffffff; --r77-border: rgba(0, 0, 0, 0.12); --r77-font-body: inherit; --r77-font-heading: inherit; --r77-radius: 10px; --r77-measure: 42rem; --r77-wide: 72rem; --r77-space: 1.5rem; } /* ------------------------------------------- Defensa frente al reset del sitio El diseño del sitio vive encapsulado bajo un envoltorio (`#mi-app …`) y el tema abre ese mismo envoltorio alrededor de todas las vistas, porque sin él el header y el pie globales llegan sin una sola regla que los dibuje. El efecto colateral es que el reset de la página —pensado para SU markup— cae también sobre el artículo del blog: #mi-app * { margin: 0; padding: 0 } ← el texto queda sin aire #mi-app ul { list-style: none !important } ← las listas pierden viñetas #mi-app a { text-decoration: none !imp } ← los enlaces, el subrayado #mi-app h1 { font-weight: 800 !important } ← los titulares, su jerarquía Un selector de clase nunca gana a uno de id, así que el contenido lleva un id propio y aquí se le devuelven los valores del navegador. `revert` es exactamente eso: «lo que valdría si nadie hubiera dicho nada». Sólo se defiende lo que el reset ataca. El resto del archivo sigue siendo CSS normal, redefinible desde Personalizar → CSS adicional. */ #r77-contenido * { margin: revert; padding: revert; } #r77-contenido ul, #r77-contenido ol { list-style: revert !important; padding-inline-start: 1.5em !important; margin: revert !important; } #r77-contenido li { display: revert !important; } #r77-contenido a { text-decoration: revert !important; } #r77-contenido h1, #r77-contenido h2, #r77-contenido h3, #r77-contenido h4, #r77-contenido h5, #r77-contenido h6 { font-weight: revert !important; text-transform: revert !important; letter-spacing: revert !important; color: var(--r77-text, inherit) !important; } #r77-contenido img { max-width: 100% !important; height: auto !important; } /* ---------------------------------------------------------------- Layout */ #r77-contenido { background: var(--r77-bg); color: var(--r77-text); font-family: var(--r77-font-body); /* Un header flotante no ocupa altura: sin este hueco el contenido empieza debajo de la barra y el primer elemento sale tapado. --r77-header-alto lo mide el navegador (inc/r77-diseno.php) y vale 0 cuando el header no flota. */ /* Con !important porque el reset del sitio pone `padding: 0` sobre todo lo que cuelgue del envoltorio, y un id le gana a una clase. */ padding: calc(var(--r77-header-alto, 0px) + clamp(2rem, 6vw, 4rem)) 1.25rem clamp(2rem, 6vw, 4rem) !important; } #r77-contenido.r77-content--page .r77-entry, #r77-contenido.r77-content--single .r77-entry { max-width: var(--r77-measure); margin-inline: auto; } #r77-contenido.r77-content--wide > * { max-width: var(--r77-wide); margin-inline: auto; } /* ----------------------------------------------------------------- Entry */ #r77-contenido .r77-entry__title { font-family: var(--r77-font-heading); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; margin: 0 0 var(--r77-space); } #r77-contenido .r77-entry__meta { color: var(--r77-text-muted); font-size: 0.875rem; margin-bottom: var(--r77-space); } #r77-contenido .r77-entry__meta a { color: inherit; } #r77-contenido .r77-entry__thumbnail { margin: 0 0 calc(var(--r77-space) * 1.5); border-radius: var(--r77-radius); overflow: hidden; } #r77-contenido .r77-entry__thumbnail img { display: block; width: 100%; height: auto; } #r77-contenido .r77-entry__body { line-height: 1.7; } #r77-contenido .r77-entry__body > * + * { margin-top: var(--r77-space); } #r77-contenido .r77-entry__body h2, #r77-contenido .r77-entry__body h3, #r77-contenido .r77-entry__body h4 { font-family: var(--r77-font-heading); line-height: 1.25; margin-top: calc(var(--r77-space) * 1.75); } #r77-contenido .r77-entry__body a { color: var(--r77-accent); } #r77-contenido .r77-entry__body a:hover { color: var(--r77-accent-hover); } #r77-contenido .r77-entry__body img { max-width: 100%; height: auto; border-radius: var(--r77-radius); } #r77-contenido .r77-entry__body blockquote { border-inline-start: 3px solid var(--r77-accent); padding-inline-start: var(--r77-space); color: var(--r77-text-muted); font-style: italic; } #r77-contenido .r77-entry__body ul, #r77-contenido .r77-entry__body ol { padding-inline-start: 1.5rem; } #r77-contenido .r77-entry__body li + li { margin-top: 0.4rem; } #r77-contenido .r77-entry__body pre { background: var(--r77-surface); border-radius: var(--r77-radius); padding: var(--r77-space); overflow-x: auto; } #r77-contenido .r77-entry__body :where(table) { display: block; overflow-x: auto; max-width: 100%; } /* ------------------------------------------------------------ Navegación */ #r77-contenido .r77-post-nav { display: flex; justify-content: space-between; gap: var(--r77-space); margin-top: calc(var(--r77-space) * 2); padding-top: var(--r77-space); border-top: 1px solid var(--r77-border); font-size: 0.9rem; } #r77-contenido .r77-post-nav a { color: var(--r77-accent); text-decoration: none; } #r77-contenido .r77-post-nav a:hover { color: var(--r77-accent-hover); text-decoration: underline; } /* ---------------------------------------------------------- WooCommerce */ /* Sólo lo imprescindible para que no se vea roto. La identidad visual la pone el sitio, no el tema. */ #r77-contenido .r77-woocommerce .woocommerce-products-header__title { font-family: var(--r77-font-heading); margin-bottom: var(--r77-space); } #r77-contenido .r77-woocommerce .woocommerce-info, #r77-contenido .r77-woocommerce .woocommerce-message, #r77-contenido .r77-woocommerce .woocommerce-error { background: var(--r77-surface); border-top: 3px solid var(--r77-accent); border-radius: var(--r77-radius); padding: 1rem; margin-bottom: var(--r77-space); list-style: none; } #r77-contenido .r77-woocommerce .button, #r77-contenido .r77-woocommerce button.button, #r77-contenido .r77-woocommerce a.button { background-color: var(--r77-accent); color: var(--r77-accent-contrast); border-radius: 999px; border: 0; padding: 0.7em 1.6em; font-weight: 600; transition: background-color 0.2s ease; } #r77-contenido .r77-woocommerce .button:hover, #r77-contenido .r77-woocommerce button.button:hover, #r77-contenido .r77-woocommerce a.button:hover { background-color: var(--r77-accent-hover); color: var(--r77-accent-contrast); } #r77-contenido .r77-woocommerce .price { color: inherit; font-weight: 700; } /* --------------------------------------------------- Menús globales */ /* Estilos mínimos para que el header y el footer globales se vean bien también en el blog y la tienda. Un sitio con su propio diseño los redefine desde su CSS: aquí sólo se garantiza legibilidad. */ #r77-contenido .nav-link, #r77-contenido .mobile-nav-link, #r77-contenido .footer-link { text-decoration: none; color: inherit; transition: color 0.2s ease, opacity 0.2s ease; } #r77-contenido .nav-link:hover, #r77-contenido .mobile-nav-link:hover, #r77-contenido .footer-link:hover { color: var(--r77-accent); } #r77-contenido .nav-link.active, #r77-contenido .nav-link.current-menu-item { font-weight: 700; } #r77-contenido .footer-link { color: var(--r77-text-muted); font-size: 0.92rem; } #r77-contenido .mobile-nav-link { display: block; padding: 0.5rem 0; font-size: 1.25rem; } /* ========================================================================== LISTADOS: categorías, etiquetas, búsqueda y 404 ========================================================================== Todo sale de las mismas variables de arriba. Ningún color ni tipografía escrita a mano: cada sitio redefine los tokens y estos listados le siguen. ========================================================================== */ #r77-contenido .r77-listing__head { max-width: var(--r77-measure); margin: 0 auto calc(var(--r77-space) * 2); text-align: center; } #r77-contenido .r77-listing__title { font-family: var(--r77-font-heading); color: var(--r77-text); margin: 0 0 calc(var(--r77-space) * .5); line-height: 1.2; } #r77-contenido .r77-listing__sub { color: var(--r77-text-muted); margin: 0; } /* ---- Rejilla de tarjetas ---- */ #r77-contenido .r77-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--r77-space) * 1.5); align-items: stretch; } #r77-contenido .r77-card { display: flex; flex-direction: column; background: var(--r77-surface); border: 1px solid var(--r77-border); border-radius: var(--r77-radius); overflow: hidden; } #r77-contenido .r77-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--r77-bg); } #r77-contenido .r77-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } #r77-contenido .r77-card__body { display: flex; flex-direction: column; flex: 1; padding: calc(var(--r77-space) * 1.2); gap: calc(var(--r77-space) * .5); } #r77-contenido .r77-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--r77-space) * .5); margin: 0; font-size: .82rem; color: var(--r77-text-muted); } #r77-contenido .r77-card__cat { padding: .15em .7em; border: 1px solid var(--r77-border); border-radius: 999px; } #r77-contenido .r77-card__title { font-family: var(--r77-font-heading); font-size: 1.15rem; line-height: 1.35; margin: 0; } #r77-contenido .r77-card__title a { color: var(--r77-text); text-decoration: none; } #r77-contenido .r77-card__title a:hover { color: var(--r77-accent); } #r77-contenido .r77-card__excerpt { flex: 1; margin: 0; color: var(--r77-text-muted); font-size: .94rem; line-height: 1.6; } #r77-contenido .r77-card__link { align-self: flex-start; color: var(--r77-accent); font-weight: 600; text-decoration: none; } #r77-contenido .r77-card__link:hover { color: var(--r77-accent-hover); } /* ---- Paginación ---- */ #r77-contenido .r77-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: calc(var(--r77-space) * 2); } #r77-contenido .r77-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem; border: 1px solid var(--r77-border); border-radius: var(--r77-radius); color: var(--r77-text); text-decoration: none; } #r77-contenido .r77-pager .page-numbers:hover { border-color: var(--r77-accent); color: var(--r77-accent); } #r77-contenido .r77-pager .page-numbers.current { background: var(--r77-accent); border-color: var(--r77-accent); color: var(--r77-accent-contrast); } /* ---- Sin resultados y 404 ---- */ #r77-contenido .r77-empty { max-width: var(--r77-measure); margin: 0 auto; text-align: center; padding: calc(var(--r77-space) * 2) 0; } #r77-contenido .r77-empty p { color: var(--r77-text-muted); } #r77-contenido .r77-empty__code { font-family: var(--r77-font-heading); font-size: clamp(3rem, 12vw, 6rem); line-height: 1; margin: 0 0 calc(var(--r77-space) * .5); color: var(--r77-border); } #r77-contenido .r77-empty__home { margin-top: calc(var(--r77-space) * 1.5); } /* ---- Buscador ---- */ #r77-contenido .r77-search { display: flex; gap: .5rem; max-width: 26rem; margin: calc(var(--r77-space) * 1.5) auto 0; } #r77-contenido .r77-search__input { flex: 1; min-width: 0; padding: .65rem .9rem; font: inherit; color: var(--r77-text); background: var(--r77-surface); border: 1px solid var(--r77-border); border-radius: var(--r77-radius); } #r77-contenido .r77-search__input:focus { outline: 2px solid var(--r77-accent); outline-offset: 1px; } #r77-contenido .r77-search__btn { padding: .65rem 1.1rem; font: inherit; font-weight: 600; color: var(--r77-accent-contrast); background: var(--r77-accent); border: 0; border-radius: var(--r77-radius); cursor: pointer; } #r77-contenido .r77-search__btn:hover { background: var(--r77-accent-hover); } /* ---- Comentarios ---- */ #r77-contenido .r77-comments { max-width: var(--r77-measure); margin: calc(var(--r77-space) * 3) auto 0; padding-top: calc(var(--r77-space) * 2); border-top: 1px solid var(--r77-border); } #r77-contenido .r77-comments__title { font-family: var(--r77-font-heading); color: var(--r77-text); margin: 0 0 var(--r77-space); } #r77-contenido .r77-comments__list, #r77-contenido .r77-comments__list .children { list-style: none; padding: 0; margin: 0; } #r77-contenido .r77-comments__list .children { padding-left: calc(var(--r77-space) * 1.5); } #r77-contenido .r77-comments__list li.comment { padding: var(--r77-space) 0; border-bottom: 1px solid var(--r77-border); } #r77-contenido .r77-comments__list .avatar { border-radius: 50%; vertical-align: middle; margin-right: .6rem; } #r77-contenido .r77-comments__closed { color: var(--r77-text-muted); } #r77-contenido .r77-comments__form input[type="text"], #r77-contenido .r77-comments__form input[type="email"], #r77-contenido .r77-comments__form input[type="url"], #r77-contenido .r77-comments__form textarea { width: 100%; padding: .65rem .9rem; font: inherit; color: var(--r77-text); background: var(--r77-surface); border: 1px solid var(--r77-border); border-radius: var(--r77-radius); } #r77-contenido .r77-comments__form .submit { padding: .65rem 1.3rem; font: inherit; font-weight: 600; color: var(--r77-accent-contrast); background: var(--r77-accent); border: 0; border-radius: var(--r77-radius); cursor: pointer; } /* Sólo para lectores de pantalla. */ #r77-contenido .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }