/**
 * VAF Content Addon - Override de pruebas (máxima especificidad + !important)
 * Cargar al final (prioridad alta) o pegar en User CSS del navegador.
 */

/* ==========================================================================
   Variables CSS y sistema de diseño (forzadas)
   ========================================================================== */
:root{
    --space-xs:4px !important;
    --space-sm:8px !important;
    --space-md:12px !important;
    --space-lg:16px !important;
    --space-xl:24px !important;
    --space-2xl:32px !important;
    --font-size-xs:11px !important;
    --font-size-sm:13px !important;
    --font-size-base:14px !important;
    --font-size-lg:16px !important;
    --font-size-xl:18px !important;
    --transition-fast:150ms ease-out !important;
    --transition-base:220ms ease-out !important;
    --transition-slow:350ms ease-out !important;
    --z-panel:100 !important;
    --z-modal-overlay:999998 !important;
    --z-modal:999999 !important;
    --z-tooltip:10000 !important;
    --cat-accent:#4f46e5 !important;
    --cat-on-accent:#ffffff !important;
    --cat-accent-weak:color-mix(in oklab, var(--cat-accent) 20%, transparent) !important;
    --cat-accent-border:color-mix(in oklab, var(--cat-accent) 85%, currentColor) !important;
}

/* Sistema de colores por categoría (forzado) */
html body [data-active-category="estrategia"]{
    --cat-accent:#4f46e5 !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="cro"]{
    --cat-accent:#7c3aed !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="flujos-captacion"]{
    --cat-accent:#0d9488 !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="identidad-visual"]{
    --cat-accent:#c026d3 !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="micro-conversiones"]{
    --cat-accent:#ea580c !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="legal-cumplimiento"]{
    --cat-accent:#1d4ed8 !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="propuesta-valor"]{
    --cat-accent:#059669 !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="seguridad"]{
    --cat-accent:#15803d !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="transparencia"]{
    --cat-accent:#0891b2 !important;
    --cat-on-accent:#ffffff !important;
}
html body [data-active-category="trust-certificaciones"]{
    --cat-accent:#d97706 !important;
    --cat-on-accent:#ffffff !important;
}

/* Recalcular variables derivadas (forzado) */
html body [data-active-category]{
    --cat-accent-weak:color-mix(in oklab, var(--cat-accent) 20%, transparent) !important;
    --cat-accent-border:color-mix(in oklab, var(--cat-accent) 85%, currentColor) !important;
}

/* ==========================================================================
   Panel Enhanced
   ========================================================================== */
html body .vaf-enhanced-control-panel.vaf-enhanced-control-panel{
    background:#fff !important;
    position:sticky !important;
    top:0 !important;
    display:flex !important;
    flex-direction:column !important;
    height:100dvh !important;
    min-height:100vh !important;
    width:30% !important;
}

html body .vaf-ecp-header.vaf-ecp-header{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
    color:#fff !important;
    padding:var(--space-xl) !important;
    flex:0 0 auto !important;
}

html body .vaf-ecp-content.vaf-ecp-content{
    padding:var(--space-xl) !important;
    flex:1 1 0% !important;
    min-height:0 !important;
    overflow-y:auto !important;
}

/* Categoría activa con color dinámico */
html body [data-active-category] .vaf-ecp-category.open .vaf-ecp-category-header{
    background:var(--cat-accent) !important;
    color:var(--cat-on-accent) !important;
}

/* Badges */
html body .vaf-ecp-mini-badge.vaf-ecp-mini-badge{
    cursor:pointer !important;
    padding:var(--space-xs) var(--space-sm) !important;
    border-radius:var(--space-md) !important;
    font-size:var(--font-size-xs) !important;
    transition:transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}
html body .vaf-ecp-mini-badge.vaf-ecp-mini-badge:hover{
    transform:scale(1.1) !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.15) !important;
}

/* Barras de progreso */
html body .vaf-ecp-summary-bar.vaf-ecp-summary-bar{
    height:20px !important;
    background:#f0f0f0 !important;
    border-radius:10px !important;
    overflow:hidden !important;
    position:relative !important;
}
html body .vaf-ecp-summary-fill.vaf-ecp-summary-fill{
    height:100% !important;
    transition:width var(--transition-slow) !important;
    position:relative !important;
}
html body .vaf-ecp-summary-fill.vaf-ecp-summary-fill::after{
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3)) !important;
    animation:shimmer 2s infinite !important;
}

/* Animación */
@keyframes shimmer{
    0%{ transform:translateX(-100%) }
    100%{ transform:translateX(100%) }
}

/* ==========================================================================
   Lienzo - Colores por categoría
   ========================================================================== */
html body [data-active-category] .vaf-region.is-visible{
    stroke:var(--cat-accent-border) !important;
    stroke-width:2px !important;
    fill:var(--cat-accent-weak) !important;
    transition:stroke var(--transition-fast), fill var(--transition-fast) !important;
}


html body [data-active-category] .vaf-region.is-highlighted{
    stroke:var(--cat-accent) !important;
    stroke-width:3px !important;
    filter:drop-shadow(0 0 10px var(--cat-accent-weak)) !important;
}


/* ==========================================================================
   Modal unificado
   ========================================================================== */
html body .vafc-modal-overlay.vafc-modal-overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,0.7) !important;
    z-index:var(--z-modal-overlay) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:var(--space-xl) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:opacity var(--transition-base), visibility var(--transition-base) !important;
}
html body .vafc-modal-overlay.vafc-modal-active{
    opacity:1 !important;
    visibility:visible !important;
}
html body .vafc-modal.vafc-modal{
    background:#fff !important;
    border-radius:var(--space-md) !important;
    box-shadow:0 20px 60px rgba(0,0,0,0.3) !important;
    max-width:800px !important;
    width:90% !important;
    max-height:80vh !important;
    display:flex !important;
    flex-direction:column !important;
    transform:scale(0.95) !important;
    transition:transform var(--transition-base) !important;
}
html body .vafc-modal-overlay.vafc-modal-active .vafc-modal.vafc-modal{
    transform:scale(1) !important;
}

/* ==========================================================================
   Accesibilidad / motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
    html body *, 
    html body *::before, 
    html body *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
    html body .vaf-ecp-summary-fill.vaf-ecp-summary-fill::after{
        display:none !important;
    }
}

/* Focus visible */
html body *:focus-visible{
    outline:2px solid var(--cat-accent, #4f46e5) !important;
    outline-offset:2px !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:768px){
    html body .vaf-enhanced-control-panel.vaf-enhanced-control-panel{
        width:100% !important;
        position:relative !important;
        height:auto !important;
        min-height:auto !important;
    }
    html body .vaf-ecp-content.vaf-ecp-content{
        max-height:400px !important;
    }
}



.vaf-ecp-category-content {
    padding: 0.5rem;
}





/* ==========================================================================
   Modo Single-Category y barras normalizadas
   ========================================================================== */

/* Toolbar de navegación */
.vaf-ecp-toolbar {
    padding: 12px 20px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e1e5ea 100%);
    border-bottom: 1px solid #d1d5db;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -20px -20px 20px -20px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.vaf-ecp-back-btn {
    background: white;
    border: 1px solid #cbd5e0;
    color: #4a5568;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.vaf-ecp-back-btn:hover {
    background: #f7fafc;
    border-color: #a0aec0;
    transform: translateX(-2px);
}

.vaf-ecp-active-indicator {
    font-size: 13px;
    color: #2d3748;
}

.vaf-ecp-active-indicator strong {
    color: var(--cat-accent, #4f46e5);
    font-weight: 600;
}

/* Ocultar categorías no activas */
.vaf-ecp-content.single-category-mode .vaf-ecp-category.is-hidden {
    display: none !important;
}

/* Categoría activa resaltada */
.vaf-ecp-content.single-category-mode .vaf-ecp-category.is-active {
    /*border: 2px solid var(--cat-accent, #4f46e5);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);*/
    animation: focusIn 0.3s ease-out;
}

@keyframes focusIn {
    from {
        opacity: 0.8;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Barra de progreso por región */
.vaf-ecp-region-bar {
    position: relative;
    height: 16px;
    margin: 8px 0 4px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vaf-ecp-region-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cat-accent, #4f46e5), color-mix(in srgb, var(--cat-accent, #4f46e5) 70%, white));
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
}

.vaf-ecp-region-pct {
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

/* Animación de entrada para las barras */
.vaf-ecp-category.is-active .vaf-ecp-region-bar .vaf-ecp-region-fill {
    animation: fillBar 1s ease-out;
}

@keyframes fillBar {
    from {
        width: 0 !important;
    }
}

/* Hover en región con barra */
.vaf-ecp-region:hover .vaf-ecp-region-bar .vaf-ecp-region-fill {
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .vaf-ecp-toolbar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .vaf-ecp-back-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Accesibilidad - Focus visible */
.vaf-ecp-back-btn:focus-visible {
    outline: 2px solid var(--cat-accent, #4f46e5);
    outline-offset: 2px;
}

/* Transiciones con reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vaf-ecp-toolbar,
    .vaf-ecp-region-fill,
    .vaf-ecp-category.is-active {
        animation: none !important;
        transition: none !important;
    }
}











/* === Toolbar unificada con categoría activa (aditivo) ===================== */
/* En modo single-category ocultamos el header redundante dentro de la tarjeta */
.vaf-ecp-content.single-category-mode .vaf-ecp-category.is-active .vaf-ecp-category-header{
  display:none !important;
}

/* Layout mínimo para alojar el proxy */
.vaf-ecp-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}



/* Descripción bajo la toolbar (hereda esquema de color de la categoría activa) */
.vaf-ecp-toolbar-meta{
  margin: 8px -20px 16px -20px; /* alinear con toolbar si ésta usa márgenes negativos */
  padding: 10px 20px;
  font-size: var(--font-size-sm, 13px);
  line-height: 1.45;
  color: #1f2937;
  background: color-mix(in oklab, var(--cat-accent, #4f46e5) 6%, #fff);
  border-top: 1px solid color-mix(in oklab, var(--cat-accent, #4f46e5) 18%, #fff);
  border-bottom: 1px solid color-mix(in oklab, var(--cat-accent, #4f46e5) 18%, #fff);
}
html body [data-active-category] .vaf-ecp-toolbar-meta{
  background: color-mix(in oklab, var(--cat-accent) 6%, #fff);
  border-top-color: color-mix(in oklab, var(--cat-accent) 18%, #fff);
  border-bottom-color: color-mix(in oklab, var(--cat-accent) 18%, #fff);
}






/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  .vaf-ecp-category-toggle-proxy{ transition:none !important; }
}















/* Icon-only back button */
.vaf-ecp-back-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:100%; padding:0;
  border:1px solid #cbd5e0; background:#fff; border-radius:6px;
  cursor:pointer; transition:transform var(--transition-fast,150ms ease-out), border-color var(--transition-fast,150ms ease-out);
}
.vaf-ecp-back-btn .dashicons{ line-height:1; }
.vaf-ecp-back-btn:hover{ transform:translateX(-1px); border-color:#a0aec0; }

/* Tooltip minimalista (usa data-tooltip). Si prefieres nativo, basta con title="" */
.vaf-ecp-back-btn[data-tooltip]{ position:relative; }
.vaf-ecp-back-btn[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%);
  white-space:nowrap; background:#111; color:#fff; font-size:12px;
  padding:4px 8px; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.15);
  opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s ease;
  pointer-events:none; z-index:10;
}
.vaf-ecp-back-btn[data-tooltip]::before{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#111; 
  opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s ease;
}
.vaf-ecp-back-btn[data-tooltip]:hover::after,
.vaf-ecp-back-btn[data-tooltip]:hover::before{ opacity:1; visibility:visible; }

/* Proxy de categoría (fusiona icono + nombre + contador) */
.vaf-ecp-category-toggle-proxy{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #cbd5e0; background:#fff; border-radius:6px;
  font-size:13px; cursor:pointer;
  transition:transform var(--transition-fast,150ms ease-out), border-color var(--transition-fast,150ms ease-out);
}
.vaf-ecp-category-toggle-proxy:hover{ transform:translateY(-1px); border-color:#a0aec0; }
.vaf-ecp-category-toggle-proxy .vaf-ecp-catname{ font-weight:600; }
.vaf-ecp-category-toggle-proxy .vaf-ecp-category-count{ opacity:.8; }
.vaf-ecp-category-toggle-proxy .dashicons{ line-height:1; }

/* Oculta el indicador textual redundante si algún template antiguo lo imprimiera */
.vaf-ecp-toolbar .vaf-ecp-active-indicator{ display:none !important; }

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  .vaf-ecp-back-btn, .vaf-ecp-category-toggle-proxy{ transition:none !important; }
}









/* === Filas de región: esquema de color según categoría activa ============ */
/* Toma --cat-accent del contenedor [data-active-category] */
html body [data-active-category] .vaf-ecp-content .vaf-ecp-region{
  --row-accent: var(--cat-accent);
  --row-bg: color-mix(in oklab, var(--row-accent) 6%, #fff);
  --row-border: color-mix(in oklab, var(--row-accent) 28%, #fff);
  --focus-ring: color-mix(in oklab, var(--row-accent) 45%, #000);

  display:block;
  background:#fff;
  border:1px solid var(--row-border);
  border-left:4px solid var(--row-accent);
  border-radius:8px;
  margin:8px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

html body [data-active-category] .vaf-ecp-content .vaf-ecp-region.has-content{
  background:var(--row-bg);
}

html body [data-active-category] .vaf-ecp-content .vaf-ecp-region:hover{
  background:color-mix(in oklab, var(--row-accent) 10%, #fff);
  border-color:color-mix(in oklab, var(--row-accent) 38%, #fff);
}

html body [data-active-category] .vaf-ecp-content .vaf-ecp-region:focus-within{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}

/* EXCEPCIÓN: los badges de pivote mantienen su color de destino (llevan inline style).
   No aplicamos estilos de color aquí para no sobreescribirlos. */




   

/* Header coloreado por la categoría activa (usa --cat-accent / --cat-on-accent) */
html body .vaf-ecp-header.vaf-ecp-header{
    background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--cat-accent, #4f46e5) 85%, #000) 0%,
        var(--cat-accent, #4f46e5) 100%
    ) !important;
    color: var(--cat-on-accent, #ffffff) !important;
    border-bottom: 1px solid color-mix(in oklab, var(--cat-accent, #4f46e5) 60%, #fff) !important;
    padding: var(--space-xl) !important;
    flex: 0 0 auto !important;
}

/* Asegura contraste de iconos/acciones dentro del header */
html body .vaf-ecp-header.vaf-ecp-header .dashicons,
html body .vaf-ecp-header.vaf-ecp-header .vaf-ecp-actions button{
    color: var(--cat-on-accent, #ffffff) !important;
    border-color: color-mix(in oklab, var(--cat-accent, #4f46e5) 65%, #fff) !important;
    background: none;
}











/* === VAF ECP: Region rows styling (aditivo, solo filas de regiones) === */
/* Usa --vaf-category-color si ya existe en el árbol; cae a #4f46e5 */
.vaf-ecp-content .vaf-ecp-region {
  --row-accent: var(--vaf-category-color, #4f46e5);
  --row-bg: color-mix(in oklab, var(--row-accent) 6%, #fff);
  --row-border: color-mix(in oklab, var(--row-accent) 28%, #fff);
  --text-muted: #60646c;
  --focus-ring: color-mix(in oklab, var(--row-accent) 45%, #000);
  display: block;
  border: 1px solid var(--row-border);
  border-left: 4px solid var(--row-accent);
  border-radius: 8px;
  background: #fff;
  margin: 8px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.vaf-ecp-content .vaf-ecp-region.has-content {
  background: var(--row-bg);
}

.vaf-ecp-content .vaf-ecp-region:hover {
  background: color-mix(in oklab, var(--row-accent) 10%, #fff);
  border-color: color-mix(in oklab, var(--row-accent) 38%, #fff);
}

.vaf-ecp-content .vaf-ecp-region:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Layout interno de la fila */
.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-main {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 12px;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-info {
  min-width: 0;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-name {
  display: inline-block;
  font-weight: 600;
  line-height: 1.25;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-preview {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Controles a la derecha */
.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-self: end;
}

/* Botones compactos y neutrales, respetando dashicons */
.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #fff;
  cursor: pointer;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-controls button:hover {
  border-color: var(--row-border);
  background: color-mix(in oklab, var(--row-accent) 6%, #fff);
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-controls button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-region-controls .dashicons {
  line-height: 1;
  transform: translateY(0.5px);
}

/* Toggle de visibilidad (switch) */
.vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #e6e8eb;
  border: 1px solid #d5d7db;
  padding: 0;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-toggle .vaf-ecp-visibility-checkbox {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-slider {
  position: relative;
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-slider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #c9ccd1;
  transform: translate(0, -50%);
  transition: transform .18s ease;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-checkbox:checked + .vaf-ecp-visibility-slider {
  background: color-mix(in oklab, var(--row-accent) 85%, #fff);
  border-radius: 999px;
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-checkbox:checked + .vaf-ecp-visibility-slider::after {
  transform: translate(16px, -50%);
  border-color: color-mix(in oklab, var(--row-accent) 50%, #c9ccd1);
}

.vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-checkbox:focus-visible + .vaf-ecp-visibility-slider {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Estados opcionales útiles si tu JS los usa */
.vaf-ecp-content .vaf-ecp-region.is-active {
  border-left-color: color-mix(in oklab, var(--row-accent) 80%, #000);
  background: color-mix(in oklab, var(--row-accent) 14%, #fff);
}

.vaf-ecp-content .vaf-ecp-region.is-muted {
  opacity: .5;
  filter: saturate(.8);
}




/* Accesibilidad y compatibilidad */
@media (prefers-reduced-motion: reduce) {
  .vaf-ecp-content .vaf-ecp-region * {
    transition: none !important;
  }
}

/* Alto contraste (Windows) */
@media (forced-colors: active) {
  .vaf-ecp-content .vaf-ecp-region {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-toggle {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .vaf-ecp-content .vaf-ecp-region .vaf-ecp-visibility-slider::after {
    border: 1px solid CanvasText;
    background: CanvasText;
  }
}









/* Selector sugerido (máxima compatibilidad con tu override):
   html body .vaf-region.vaf-region.vaf-pulse-effect  */
html body .vaf-region.vaf-region.vaf-pulse-effect{
  /* Usa el color activo si existe; si no, cae al global o al fallback */
  --_pulse-color: var(--cat-accent, #4f46e5);
  --_pulse-weak:  var(--cat-accent-weak, color-mix(in oklab, var(--_pulse-color) 20%, transparent));
  animation: vaf-region-pulse 1.6s ease-out infinite !important;
  stroke: var(--_pulse-color) !important;
  stroke-width: 3px !important;
  /* halo suave animado vía drop-shadow (funciona en SVG) */
  filter: drop-shadow(0 0 0 var(--_pulse-weak)) !important;
}

/* Si además está resaltada, sube ligeramente el trazo */
html body .vaf-region.vaf-region.is-highlighted.vaf-pulse-effect{
  stroke-width: 3.5px !important;
}

@keyframes vaf-region-pulse{
  0%   { filter: drop-shadow(0 0 0   var(--_pulse-weak)); }
  50%  { filter: drop-shadow(0 0 10px var(--_pulse-weak)); }
  100% { filter: drop-shadow(0 0 0   var(--_pulse-weak)); }
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  html body .vaf-region.vaf-region.vaf-pulse-effect{ animation: none !important; }
}

/* Alto contraste */
@media (forced-colors: active){
  html body .vaf-region.vaf-region.vaf-pulse-effect{ filter: none !important; }
}


html body [data-active-category] .vaf-region.is-visible {
    stroke: var(--cat-accent-border) !important;
    stroke-width: 2px !important;
    fill: var(--cat-accent-weak) !important;
    stroke-dasharray: 6 3 !important;   /* dashed */
    stroke-linecap: butt !important;    /* opcional: evita redondeo entre trazos */
    filter:drop-shadow(0 0 10px var(--cat-accent-weak)) !important;
    transition: stroke var(--transition-fast), fill var(--transition-fast) !important;

}









/* --- Estilo 3.1: Dinámico y Cohesivo (Mejorado) --- */

/* 1. Define los colores para cada categoría */
/* Usamos el atributo 'data-category-slug' del HTML para asignar un color a cada tarjeta */

[data-category-slug="estrategia"] {
  --category-color: #4f46e5;
  --category-color-light: #eef2ff;
}
[data-category-slug="cro-conversion-rate-optimization"] {
  --category-color: #7c3aed;
  --category-color-light: #f5f3ff;
}
[data-category-slug="flujos-de-captacion"] {
  --category-color: #0d9488;
  --category-color-light: #f0fdfa;
}
[data-category-slug="identidad-visual"] {
  --category-color: #c026d3;
  --category-color-light: #fdf4ff;
}
[data-category-slug="micro-conversiones-lead-management"] {
  --category-color: #ea580c;
  --category-color-light: #fff7ed;
}
[data-category-slug="legal-cumplimiento"] {
  --category-color: #1d4ed8;
  --category-color-light: #eef2ff;
}
[data-category-slug="propuesta-de-valor"] {
  --category-color: #059669;
  --category-color-light: #ecfdf5;
}
[data-category-slug="seguridad"] {
  --category-color: #15803d;
  --category-color-light: #f0fdf4;
}
[data-category-slug="transparencia"] {
  --category-color: #0891b2;
  --category-color-light: #ecfeff;
}
[data-category-slug="trust-certificaciones"] {
  --category-color: #d97706;
  --category-color-light: #fffbeb;
}


/* 2. Estilos generales (no necesitas tocar esto) */

.vaf-ecp-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.vaf-ecp-category-tile {
  background-color: #ffffff; /* Fondo blanco para un look más limpio */
  border: 1px solid #f3f4f6; /* Borde muy sutil */
  border-bottom: 3px solid var(--category-color); /* Borde inferior con el color de la categoría */
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Transiciones más suaves y centralizadas */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Efecto al pasar el ratón y al enfocar */
.vaf-ecp-category-tile:hover,
.vaf-ecp-category-tile:focus-visible {
  transform: translateY(-6px);
  border-color: var(--category-color-light);
  border-bottom-color: var(--category-color);
  box-shadow: 0 10px 25px -10px var(--category-color); /* Sombra de color más sutil */
  outline: none;
}

/* Estilo del icono */
.vaf-ecp-tile-icon {
  font-size: 1.75rem; /* Ligeramente más pequeño para el círculo */
  margin-bottom: 1rem;
  background-color: var(--category-color-light); /* Fondo con el color claro de la categoría */
  color: var(--category-color); /* Icono con el color principal */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.vaf-ecp-category-tile:hover .vaf-ecp-tile-icon {
  background-color: var(--category-color); /* El fondo se vuelve del color principal */
  color: var(--category-color-light) !important; /* El icono se vuelve blanco */
}

/* Estilo del nombre de la categoría */
.vaf-ecp-tile-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
  margin-bottom: 1rem; /* Margen inferior para separar del contador */
}

/* Estilo del contador */
.vaf-ecp-tile-count {
  margin-top: auto; /* Empuja este elemento al final */
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  background-color: #f3f4f6;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px; /* Formato de píldora */
  align-self: flex-start; /* Se alinea a la izquierda */
  transition: color 0.3s ease, background-color 0.3s ease, font-weight 0.3s ease;
}

.vaf-ecp-category-tile:hover .vaf-ecp-tile-count {
  color: var(--category-color);
  background-color: var(--category-color-light);
  font-weight: 600; /* Hacemos el texto negrita en hover */
}





/* 1. Definiciones de color (sin cambios) */
[data-category-slug="estrategia"] {
  --category-color: #4f46e5;
  --category-color-light: #eef2ff;
}
[data-category-slug="cro-conversion-rate-optimization"] {
  --category-color: #7c3aed;
  --category-color-light: #f5f3ff;
}
/* ... (resto de definiciones de color igual que antes) ... */
[data-category-slug="flujos-de-captacion"]{--category-color:#0d9488;--category-color-light:#f0fdfa}[data-category-slug=identidad-visual]{--category-color:#c026d3;--category-color-light:#fdf4ff}[data-category-slug="micro-conversiones-lead-management"]{--category-color:#ea580c;--category-color-light:#fff7ed}[data-category-slug="legal-cumplimiento"]{--category-color:#1d4ed8;--category-color-light:#eef2ff}[data-category-slug="propuesta-de-valor"]{--category-color:#059669;--category-color-light:#ecfdf5}[data-category-slug=seguridad]{--category-color:#15803d;--category-color-light:#f0fdf4}[data-category-slug=transparencia]{--category-color:#0891b2;--category-color-light:#ecfeff}[data-category-slug="trust-certificaciones"]{--category-color:#d97706;--category-color-light:#fffbeb}


/* 2. Estilos generales con animaciones */

/* NOVEDAD: Keyframes para la animación de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vaf-ecp-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.vaf-ecp-category-tile {
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-bottom: 3px solid var(--category-color);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* NOVEDAD: Transición elástica y animación de entrada */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0; /* Empieza invisible para la animación */
}

/* NOVEDAD: Añadimos un retraso escalonado a la animación de entrada de cada tarjeta */
.vaf-ecp-category-tile:nth-child(1) { animation-delay: 0.05s; }
.vaf-ecp-category-tile:nth-child(2) { animation-delay: 0.1s; }
.vaf-ecp-category-tile:nth-child(3) { animation-delay: 0.15s; }
.vaf-ecp-category-tile:nth-child(4) { animation-delay: 0.2s; }
.vaf-ecp-category-tile:nth-child(5) { animation-delay: 0.25s; }
/* ... puedes continuar para más tarjetas */


/* Efecto al pasar el ratón y al enfocar */
.vaf-ecp-category-tile:hover,
.vaf-ecp-category-tile:focus-visible {
  transform: translateY(-8px); /* Elevamos un poco más */
  box-shadow: 0 12px 28px -8px var(--category-color); /* Sombra más pronunciada */
  outline: none;
}

/* Estilo del icono */
.vaf-ecp-tile-icon {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  background-color: var(--category-color-light);
  color: var(--category-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* NOVEDAD: Añadimos 'transform' a la transición */
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vaf-ecp-category-tile:hover .vaf-ecp-tile-icon {
  background-color: var(--category-color);
  color: white;
  /* NOVEDAD: El icono rota y escala al pasar el ratón */
  transform: rotate(-15deg) scale(1.1);
}

/* Estilo del nombre de la categoría */
.vaf-ecp-tile-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
  margin-bottom: 1rem;
  /* NOVEDAD: Preparamos el nombre para la animación */
  transition: transform 0.3s ease;
  transition-delay: 0.05s; /* Pequeño retraso para efecto escalonado */
}

/* NOVEDAD: El nombre se desliza hacia arriba en hover */
.vaf-ecp-category-tile:hover .vaf-ecp-tile-name {
    transform: translateY(-2px);
}

/* Estilo del contador */
.vaf-ecp-tile-count {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  background-color: #f3f4f6;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  align-self: flex-start;
  /* NOVEDAD: Aumentamos el retraso de la transición */
  transition: all 0.3s ease;
  transition-delay: 0.1s; /* Es el último en reaccionar */
}

.vaf-ecp-category-tile:hover .vaf-ecp-tile-count {
  color: var(--category-color);
  background-color: var(--category-color-light);
  font-weight: 600;
}