/* Paleta de marca (estilo marketplace artesanal, tipo Etsy: naranja terracota + crema). Se define aquí, una sola vez, porque main.css lo carga toda plantilla (incluida pattern_detail.html, que no lleva daisyUI); theme.css (solo en páginas con daisyUI, ver _platform_assets.html) reusa estas mismas variables para el tema "crochet" en vez de repetir los valores hexadecimales. */ :root { --brand-bg: #fffbf5; --brand-bg-soft: #f7efe1; --brand-border: #ede0c9; --brand-text: #2e2118; --brand-primary: #f1641e; --brand-primary-content: #ffffff; --brand-secondary: #2b6e63; --brand-accent: #e2a32d; font-family: 'Poppins', system-ui, sans-serif; } body { background-color: var(--brand-bg); color: var(--brand-text); } /* HTML: */ .breadcrumb { --s: 20px; /* control the shape */ /* line-height se aplica a CADA línea, no solo una vez a la caja entera: con 1.8 (pensado para una etiqueta de una sola línea, como "PB") un punto de nombre largo ("Medio punto alto") que envuelve a dos líneas quedaba con un hueco enorme entre ellas. Se baja a algo normal y se recupera aire con padding-block, que sí solo se aplica una vez (arriba y abajo de toda la etiqueta), no entre líneas envueltas. control the height */ line-height: 1.3; padding-block: 0.35em; padding-inline: calc(var(--s) + .3em); clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%); background: #EAEAEA; width: fit-content; } /* Feedback visual al reordenar (secciones y elementos de una sección de "Patrón"), aplicado dinámicamente desde js/dnd.js. */ .dragging { opacity: 0.6; box-shadow: 0 10px 20px rgb(0 0 0 / 0.3); transform: scale(1.03) rotate(-1deg); cursor: grabbing; } /* Contenedor donde se está reordenando algo: lo marca como zona activa mientras dura el arrastre. */ .drop-target-active { outline: 2px dashed #64908A; outline-offset: 4px; background-color: rgb(100 144 138 / 0.08); } /* Solo para pattern_detail.html (vista de solo lectura / PDF con WeasyPrint): esa plantilla no carga daisyUI (ver css/pattern-detail.css, Tailwind precompilado sin plugins, para que WeasyPrint no necesite ejecutar JS), así que sus botones (enlaces de idioma, "Descargar PDF") y el recuadro de una sección de "Nota" se escriben aquí a mano en vez de con las clases .btn/.alert de daisyUI que sí usa pattern.html (el editor). */ .detail-btn { display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--brand-primary); border-radius: 999px; color: var(--brand-primary); text-decoration: none; background-color: transparent; } .detail-btn:hover { background-color: var(--brand-primary); color: var(--brand-primary-content); } .note-box { padding: 1rem; border-radius: 0.5rem; background-color: #f3f4f6; } /* En pantallas pequeñas, "Secciones" y "Vista previa" se comportan como pestañas: solo se muestra una a la vez (ver .tabs en pattern.html). A partir del breakpoint lg (1024px, ver lg:flex-row/lg:w-1/2/lg:hidden en pattern.html) ambos paneles se muestran siempre, lado a lado. Se restringe a "screen" para que nunca afecte a la exportación a PDF (@media print más abajo), sea cual sea el ancho de pantalla del usuario. */ @media screen and (max-width: 1023px) { .panel-hidden-mobile { display: none; } /* La flecha de colapsar/expandir una sección (▾/▸, ver .collapse-btn en sections.js) usa btn-xs de daisyUI (~1.5rem), demasiado pequeña para tocarla con precisión. Se agranda el área de toque (y el propio glifo) solo en pantallas estrechas, sin tocar el tamaño en escritorio. !important porque btn-xs (daisyUI) se carga después de este archivo en y, a igual especificidad, ganaría por ir después. */ .collapse-btn { min-width: 2.75rem !important; min-height: 2.75rem !important; font-size: 1.25rem !important; } } /* Al exportar/imprimir, solo se muestra #panel-output (y no sus propios controles, ni el resto de la página), todo ello marcado con .no-print (#panel-top, la cabecera, las pestañas, "Personalización de página", el título "Vista previa"...). Se usa display:none (no visibility:hidden) para ocultarlo: un elemento en visibility:hidden sigue ocupando su espacio en el documento, así que con eso todo el contenido oculto (secciones, botones...) seguía contando para la altura total y generaba varias páginas en blanco de más al imprimir. */ @media print { .no-print { display: none; } @page { margin: 0; } /* Pinta toda la hoja (no solo la caja de #panel-output, que puede quedarse más corta que la página) con el color de fondo elegido en "Personalización de página". La variable la actualiza page-config.js; aquí no se toca nada más de / para no afectar a la pantalla de edición, solo a la impresión. */ html, body, #panel-output, #panel-output * { /* Los navegadores no imprimen colores de fondo por defecto (dependen de la opción "Gráficos de fondo" del diálogo de impresión, que el usuario puede tener desmarcada); esto fuerza a respetar los colores elegidos en una sección de "Nota" (y el fondo de página) aunque esa opción esté desactivada. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } html, body { /* Si no queda un poco de espacio en blanco al final del documento cuando el contenido no llena una página entera: es el elemento "raíz" y su fondo (si lo tiene) es el que se usa para rellenar toda la hoja (por delante del de ), así que Tailwind o daisyUI podían estar aplicándole ya un color propio con más peso que esta regla; !important fuerza a que gane siempre el elegido aquí, tanto en como en . */ background-color: var(--print-page-bg-color, #ffffff) !important; } /* Firefox no siempre extiende el fondo de / más allá de su contenido cuando este no llena una página entera (a diferencia de Chrome, que sí lo hace); para no depender de eso, se fuerza a que la propia caja de #panel-output mida al menos una página de alto, así su propio fondo (el mismo color, ya aplicado en JS) cubre ese hueco también en Firefox. */ #panel-output { min-height: 100vh; width: 100%; border: none; /* Por defecto el padding de una caja que ocupa varias páginas solo se aplica una vez, al principio y al final de toda la caja (no en cada página); box-decoration-break: clone hace que cada fragmento (cada página) se trate como una caja independiente con su propia copia del padding, así el hueco queda igual en todas las páginas. Se hace así (en vez de con @page margin) porque @page margin puede quedar invalidado por el propio ajuste de "Márgenes" del diálogo de impresión del navegador si el usuario no lo deja en "Predeterminado".*/ padding: 2cm; box-sizing: border-box; -webkit-box-decoration-break: clone; box-decoration-break: clone; } }