/* * elementor-tabla-contenido — CSS crítico * Inyectado en via PHP (zero render-blocking, LCP-safe). * Solo CSS moderno: custom properties, flex, logical props, @media. * SIN JavaScript. */ /* ── Reset de lista ────────────────────────────────────────────────────────── */ .etoc-box *, .etoc-box *::before, .etoc-box *::after { box-sizing: border-box; } /* ── Contenedor principal ──────────────────────────────────────────────────── */ .etoc-box { /* Valores base; Elementor los sobreescribe vía selectors */ --etoc-bg: #fdf4f4; --etoc-radius: 12px; --etoc-padding: 24px 28px; --etoc-heading-clr: #1a1a1a; --etoc-text-clr: #333333; --etoc-hover-clr: #c0392b; --etoc-icon-clr: #e74c3c; --etoc-icon-sz: 20px; --etoc-gap-items: 10px; --etoc-gap-icon: 10px; background-color: var(--etoc-bg); border-radius: var(--etoc-radius); padding: var(--etoc-padding); /* Mejora contenido en pantallas pequeñas */ overflow-wrap: break-word; } /* ── Nav (sin margen por defecto del navegador) ────────────────────────────── */ .etoc-box nav { margin: 0; padding: 0; } /* ── Encabezado ────────────────────────────────────────────────────────────── */ .etoc-heading { color: var(--etoc-heading-clr); font-weight: 700; margin-block: 0 14px; padding: 0; line-height: 1.3; } /* ── Lista ─────────────────────────────────────────────────────────────────── */ .etoc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: var(--etoc-gap-items); } /* ── Ítems ─────────────────────────────────────────────────────────────────── */ .etoc-item { display: block; padding: 0 !important; margin: 0 !important; } /* Prevenir que viñetas globales del tema (::before) se filtren al widget */ .etoc-list li::before, .etoc-list li::after { content: none !important; display: none !important; } /* ── Enlace / span ─────────────────────────────────────────────────────────── */ .etoc-link { display: flex; align-items: center; gap: var(--etoc-gap-icon); color: var(--etoc-text-clr); text-decoration: none; line-height: 1.5; /* Transición suave solo en color — sin impacto en LCP */ transition: color 0.2s ease; } .etoc-link:hover, .etoc-link:focus-visible { color: var(--etoc-hover-clr); text-decoration: underline; text-underline-offset: 3px; } .etoc-link:focus-visible { outline: 2px solid var(--etoc-icon-clr); outline-offset: 3px; border-radius: 3px; } /* ── Texto ─────────────────────────────────────────────────────────────────── */ .etoc-text { flex: 1 1 0; } /* ── Icono SVG ─────────────────────────────────────────────────────────────── */ .etoc-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--etoc-icon-clr); font-size: var(--etoc-icon-sz); width: var(--etoc-icon-sz); height: var(--etoc-icon-sz); /* SVGs heredan color vía currentColor */ line-height: 1; } .etoc-icon svg { width: 1em; height: 1em; display: block; } /* ── Variante punto ────────────────────────────────────────────────────────── */ .etoc-icon--dot { border-radius: 50%; background-color: currentColor; width: 0.55em; height: 0.55em; font-size: var(--etoc-icon-sz); } /* ── Sin ancla (span) — no underline ──────────────────────────────────────── */ .etoc-link--no-anchor { cursor: default; } .etoc-link--no-anchor:hover { text-decoration: none; } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .etoc-box { --etoc-padding: 18px 20px; --etoc-gap-items: 8px; --etoc-icon-sz: 18px; } } @media (max-width: 479px) { .etoc-box { --etoc-padding: 16px; --etoc-gap-items: 8px; --etoc-icon-sz: 17px; } } /* ── Editor Elementor: highlight de ítem al hover ──────────────────────────── */ .elementor-editor-active .etoc-item:hover { outline: 2px dashed rgba(102, 102, 102, 0.4); border-radius: 4px; }