/* ================================================================
 * CORRECCIONES PARA CARDS DE HERRAMIENTAS - PÁGINA DE RECURSOS
 * ================================================================ */

/* ================================================================
 * AJUSTES DE ESPACIADO PARA ICONOS EN HERRAMIENTA HEADER
 * ================================================================ */

/* Reducir el gap entre icono y título */
.herramienta-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important; /* Reducido de 1.5rem a 0.5rem */
    margin-bottom: var(--space-lg) !important;
}

/* Ajustar el tamaño del icono */
.herramienta-icon {
    font-size: 1.5rem !important; /* Reducido de 2rem a 1.5rem */
    flex-shrink: 0 !important;
    margin-right: 0 !important; /* Eliminar margen adicional */
    margin-left: 0 !important; /* Eliminar margen izquierdo */
}

/* Asegurar que el título tenga espacio adecuado */
.herramienta-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    flex-grow: 1 !important;
    margin: 0 !important; /* Eliminar márgenes */
    line-height: 1.3 !important;
    padding-left: 0 !important; /* Eliminar padding izquierdo */
    padding-right: 0.5rem !important; /* Espacio antes del badge */
}

/* Ajustar el badge de tipo */
.herramienta-type {
    background: rgba(255, 215, 0, 0.2) !important;
    color: var(--brand-yellow) !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important; /* Espacio adicional desde el título */
}

/* ================================================================
 * AJUSTES PARA FEATURES LIST
 * ================================================================ */

/* Ajustar el espaciado de los checkmarks */
.features-list li {
    padding: 4px 0 !important;
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    position: relative !important;
    padding-left: 1rem !important; /* Reducido de 1.5rem a 1rem */
    line-height: 1.4 !important;
}

.features-list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--brand-green) !important;
    font-weight: bold !important;
    font-size: 0.9rem !important;
}

/* ================================================================
 * AJUSTES RESPONSIVE
 * ================================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .herramienta-header {
        gap: 0.5rem !important; /* Aún más reducido en tablet */
    }
    
    .herramienta-icon {
        font-size: 1.5rem !important;
    }
    
    .herramienta-title {
        font-size: 1.2rem !important;
    }
    
    .herramienta-type {
        font-size: 0.7rem !important;
        padding: 3px 6px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .herramienta-header {
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }
    
    .herramienta-icon {
        font-size: 1.5rem !important;
        margin-top: 0.25rem !important; /* Alinear con el título */
    }
    
    .herramienta-title {
        font-size: 1.1rem !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .herramienta-type {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
        margin-left: 0.25rem !important;
        align-self: flex-start !important;
    }
    
    .features-list li {
        padding-left: 1.25rem !important;
        font-size: 0.85rem !important;
    }
}

/* Mobile pequeño */
@media (max-width: 480px) {
    .herramienta-header {
        gap: 0.375rem !important;
    }
    
    .herramienta-icon {
        font-size: 1.25rem !important;
    }
    
    .herramienta-title {
        font-size: 1rem !important;
    }
    
    .herramienta-type {
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
    }
    
    .features-list li {
        padding-left: 1rem !important;
        font-size: 0.8rem !important;
    }
}

/* ================================================================
 * GARANTÍAS PARA ALINEACIÓN PERFECTA
 * ================================================================ */

/* Asegurar que los elementos estén bien alineados */
.herramienta-header {
    align-items: center !important;
}

.herramienta-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Asegurar que el título no se desborde */
.herramienta-title {
    word-wrap: break-word !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Asegurar que el tipo no se desborde */
.herramienta-type {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
}

/* ================================================================
 * REGLAS ESPECÍFICAS PARA SOBRESCRIBIR ESTILOS ORIGINALES
 * ================================================================ */

/* Forzar la aplicación de estilos con mayor especificidad */
.herramienta-card .herramienta-header {
    gap: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
}

.herramienta-card .herramienta-icon {
    font-size: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.herramienta-card .herramienta-title {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

.herramienta-card .features-list li {
    padding-left: 1rem !important;
}

/* Asegurar que no haya márgenes o padding adicionales */
.herramienta-header > * {
    margin: 0 !important;
}

.herramienta-icon {
    margin: 0 !important;
    padding: 0 !important;
}