/* ============================================================ ANNY — UTILITIES ============================================================ Clases utilitarias reutilizables del sistema ANNY. RESPONSABILIDADES: - Visibilidad - Display - Alineación - Espaciado - Texto - Ancho - Posicionamiento - Accesibilidad - Helpers generales REGLA: Estas clases no deben depender de una página concreta ni de WooCommerce. NO INCLUIR AQUÍ: - Componentes - Catálogo - Producto - Menú - Carrito - Botones - Responsive específico ============================================================ */ /* ============================================================ 01 — VISIBILIDAD ============================================================ */ .anny-hidden { display: none !important; } .anny-invisible { visibility: hidden !important; } .anny-visible { visibility: visible !important; } /* ============================================================ 02 — DISPLAY ============================================================ */ .anny-block { display: block !important; } .anny-inline { display: inline !important; } .anny-inline-block { display: inline-block !important; } .anny-flex { display: flex !important; } .anny-inline-flex { display: inline-flex !important; } .anny-grid { display: grid !important; } /* ============================================================ 03 — FLEX ============================================================ */ .anny-flex-row { flex-direction: row !important; } .anny-flex-column { flex-direction: column !important; } .anny-flex-wrap { flex-wrap: wrap !important; } .anny-flex-nowrap { flex-wrap: nowrap !important; } .anny-items-start { align-items: flex-start !important; } .anny-items-center { align-items: center !important; } .anny-items-end { align-items: flex-end !important; } .anny-justify-start { justify-content: flex-start !important; } .anny-justify-center { justify-content: center !important; } .anny-justify-end { justify-content: flex-end !important; } .anny-justify-between { justify-content: space-between !important; } /* ============================================================ 04 — GAP ============================================================ */ .anny-gap-xs { gap: .35rem !important; } .anny-gap-sm { gap: .5rem !important; } .anny-gap { gap: 1rem !important; } .anny-gap-md { gap: 1.5rem !important; } .anny-gap-lg { gap: 2rem !important; } .anny-gap-xl { gap: 3rem !important; } /* ============================================================ 05 — MARGIN ============================================================ */ .anny-m-0 { margin: 0 !important; } .anny-m-auto { margin: auto !important; } .anny-mt-0 { margin-top: 0 !important; } .anny-mt-sm { margin-top: .5rem !important; } .anny-mt { margin-top: 1rem !important; } .anny-mt-md { margin-top: 1.5rem !important; } .anny-mt-lg { margin-top: 2rem !important; } .anny-mb-0 { margin-bottom: 0 !important; } .anny-mb-sm { margin-bottom: .5rem !important; } .anny-mb { margin-bottom: 1rem !important; } .anny-mb-md { margin-bottom: 1.5rem !important; } .anny-mb-lg { margin-bottom: 2rem !important; } .anny-ml-auto { margin-left: auto !important; } .anny-mr-auto { margin-right: auto !important; } /* ============================================================ 06 — PADDING ============================================================ */ .anny-p-0 { padding: 0 !important; } .anny-p-sm { padding: .5rem !important; } .anny-p { padding: 1rem !important; } .anny-p-md { padding: 1.5rem !important; } .anny-p-lg { padding: 2rem !important; } .anny-px { padding-right: 1rem !important; padding-left: 1rem !important; } .anny-py { padding-top: 1rem !important; padding-bottom: 1rem !important; } .anny-px-md { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .anny-py-md { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } /* ============================================================ 07 — ANCHO ============================================================ */ .anny-w-auto { width: auto !important; } .anny-w-full { width: 100% !important; } .anny-w-fit { width: fit-content !important; } .anny-max-w-full { max-width: 100% !important; } /* ============================================================ 08 — ALTURA ============================================================ */ .anny-h-auto { height: auto !important; } .anny-h-full { height: 100% !important; } /* ============================================================ 09 — TEXTO ============================================================ */ .anny-text-left { text-align: left !important; } .anny-text-center { text-align: center !important; } .anny-text-right { text-align: right !important; } .anny-text-uppercase { text-transform: uppercase !important; } .anny-text-lowercase { text-transform: lowercase !important; } .anny-text-normal { font-weight: 400 !important; } .anny-text-medium { font-weight: 500 !important; } .anny-text-semibold { font-weight: 600 !important; } .anny-text-bold { font-weight: 700 !important; } /* ============================================================ 10 — TIPOGRAFÍAS ANNY ============================================================ */ .anny-font-heading { font-family: var(--anny-font-heading), sans-serif !important; } .anny-font-ui { font-family: var(--anny-font-ui), sans-serif !important; } .anny-font-body { font-family: var(--anny-font-body), sans-serif !important; } .anny-font-accent { font-family: var(--anny-font-accent), sans-serif !important; } /* ============================================================ 11 — COLORES DE TEXTO ============================================================ */ .anny-color-primary { color: var(--anny-primary) !important; } .anny-color-secondary { color: var(--anny-secondary) !important; } .anny-color-text { color: var(--anny-text) !important; } .anny-color-accent { color: var(--anny-accent) !important; } .anny-color-white { color: var(--anny-white) !important; } /* ============================================================ 12 — FONDOS ============================================================ */ .anny-bg-white { background-color: var(--anny-white) !important; } .anny-bg-cream-light { background-color: var(--anny-cream-light) !important; } .anny-bg-cream { background-color: var(--anny-cream) !important; } .anny-bg-primary { background-color: var(--anny-primary) !important; } .anny-bg-secondary { background-color: var(--anny-secondary) !important; } .anny-bg-accent { background-color: var(--anny-accent) !important; } /* ============================================================ 13 — BORDES ============================================================ */ .anny-border { border: 1px solid var(--anny-border) !important; } .anny-border-top { border-top: 1px solid var(--anny-border) !important; } .anny-border-right { border-right: 1px solid var(--anny-border) !important; } .anny-border-bottom { border-bottom: 1px solid var(--anny-border) !important; } .anny-border-left { border-left: 1px solid var(--anny-border) !important; } .anny-border-none { border: 0 !important; } /* ============================================================ 14 — RADIOS ============================================================ */ .anny-radius-none { border-radius: 0 !important; } .anny-radius-sm { border-radius: var(--anny-radius-sm) !important; } .anny-radius { border-radius: var(--anny-radius) !important; } .anny-radius-lg { border-radius: var(--anny-radius-lg) !important; } .anny-radius-pill { border-radius: 999px !important; } /* ============================================================ 15 — SOMBRAS ============================================================ */ .anny-shadow-none { box-shadow: none !important; } .anny-shadow { box-shadow: var(--anny-shadow-soft) !important; } .anny-shadow-hover { box-shadow: var(--anny-shadow-hover) !important; } /* ============================================================ 16 — OVERFLOW ============================================================ */ .anny-overflow-hidden { overflow: hidden !important; } .anny-overflow-visible { overflow: visible !important; } .anny-overflow-auto { overflow: auto !important; } .anny-overflow-x-auto { overflow-x: auto !important; overflow-y: hidden !important; } /* ============================================================ 17 — POSICIONAMIENTO ============================================================ */ .anny-relative { position: relative !important; } .anny-absolute { position: absolute !important; } .anny-fixed { position: fixed !important; } .anny-sticky { position: sticky !important; } /* ============================================================ 18 — CENTRADO ============================================================ */ .anny-mx-auto { margin-right: auto !important; margin-left: auto !important; } /* ============================================================ 19 — IMÁGENES ============================================================ */ .anny-object-cover { object-fit: cover !important; } .anny-object-contain { object-fit: contain !important; } .anny-object-center { object-position: center !important; } /* ============================================================ 20 — CURSOR ============================================================ */ .anny-cursor-pointer { cursor: pointer !important; } .anny-cursor-default { cursor: default !important; } .anny-cursor-not-allowed { cursor: not-allowed !important; } /* ============================================================ 21 — INTERACCIÓN ============================================================ */ .anny-pointer-none { pointer-events: none !important; } .anny-pointer-auto { pointer-events: auto !important; } /* ============================================================ 22 — TRANSICIONES ============================================================ */ .anny-transition-none { transition: none !important; } .anny-transition-fast { transition: all var(--anny-transition-fast) !important; } .anny-transition { transition: all var(--anny-transition) !important; } .anny-transition-slow { transition: all var(--anny-transition-slow) !important; } /* ============================================================ 23 — OPACIDAD ============================================================ */ .anny-opacity-0 { opacity: 0 !important; } .anny-opacity-50 { opacity: .5 !important; } .anny-opacity-75 { opacity: .75 !important; } .anny-opacity-100 { opacity: 1 !important; } /* ============================================================ 24 — Z-INDEX ============================================================ */ .anny-z-auto { z-index: auto !important; } .anny-z-10 { z-index: 10 !important; } .anny-z-20 { z-index: 20 !important; } .anny-z-50 { z-index: 50 !important; } .anny-z-max { z-index: 9999 !important; } /* ============================================================ 25 — ACCESIBILIDAD ============================================================ */ .anny-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ============================================================ 26 — FOCUS ============================================================ */ .anny-focus:focus-visible { outline: 2px solid var(--anny-accent); outline-offset: 3px; } /* ============================================================ 27 — SEPARADOR ============================================================ */ .anny-divider { width: 100%; height: 1px; margin: 1.5rem 0; background-color: var(--anny-border); } /* ============================================================ 28 — CONTENEDOR DE CONTENIDO ============================================================ */ .anny-container { width: 100%; max-width: 1440px; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } /* ============================================================ 29 — CONTENEDOR ESTRECHO ============================================================ */ .anny-container-sm { width: 100%; max-width: 960px; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } /* ============================================================ 30 — CONTENEDOR AMPLIO ============================================================ */ .anny-container-lg { width: 100%; max-width: 1600px; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } /* ============================================================ 31 — TEXTO TRUNCADO ============================================================ */ .anny-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ 32 — NO WRAP ============================================================ */ .anny-nowrap { white-space: nowrap !important; } /* ============================================================ 33 — SELECCIÓN ============================================================ */ .anny-select-none { user-select: none !important; -webkit-user-select: none !important; } /* ============================================================ 34 — REDUCIR MOVIMIENTO ============================================================ */ @media (prefers-reduced-motion: reduce) { .anny-transition-fast, .anny-transition, .anny-transition-slow { transition: none !important; } }