/* --- Reseteo Básico y Variables --- */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #2980b9;
    --success-color: #2ecc71;
    --error-color: #e74c3c;
    --light-gray: #ecf0f1;
    --dark-gray: #34495e;
    --text-color: #333;
    --font-family: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--light-gray);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1370px;
    margin: auto;
    padding: 0 20px;
}

/* --- Encabezado y Navegación --- */
header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    z-index: 1001;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

/* --- Estilos para la Navegación (Diseño "Subrayado Animado") --- */

.main-nav {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 20px; /* Aumentamos el espacio para que el diseño respire */
}

/* 1. Estilo base para cada enlace del menú */
.main-nav a {
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 600;
    padding: 10px 4px; /* Un padding vertical sutil */
    position: relative; /* ¡MUY IMPORTANTE! Para posicionar el subrayado */
    transition: color 0.3s ease;
}

/* 2. El subrayado virtual creado con un pseudo-elemento ::after */
.main-nav a::after {
    content: ''; /* Necesario para que el pseudo-elemento se muestre */
    position: absolute;
    width: 100%;
    height: 3px; /* Grosor del subrayado */
    background-color: var(--secondary-color); /* Color del subrayado */
    
    /* Posición inicial de la línea */
    left: 0;
    bottom: -5px; /* Distancia entre el texto y la línea */
    
    /* ¡LA MAGIA DE LA ANIMACIÓN! */
    transform: scaleX(0); /* La línea empieza con tamaño 0 */
    transform-origin: center; /* La animación se origina desde el centro */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Transición suave */
}

/* 3. Activamos la animación al pasar el ratón o cuando el enlace está activo */
.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1); /* La línea crece a su tamaño completo */
}

/* 4. Cambiamos el color del texto en hover para mayor feedback */
.main-nav a:hover {
    color: var(--primary-color);
}

/* 5. Hacemos que el texto del enlace activo sea más prominente */
.main-nav a.active {
    color: var(--primary-color);
    font-weight: 700;
}

/* --- Estilos para Botones y Menú de Usuario --- */
.user-buttons {
    background-color: #f8f9fa; /* Color de fondo claro y limpio */
    padding: 8px;              /* Espacio interno para que los botones "respiren" */
    border-radius: 12px;         /* Bordes redondeados */
    border: 1px solid #e9ecef; /* Un borde sutil para definir el contenedor */
    display: flex;
    gap: 8px; /* Espacio entre los botones Acceder y Registro */
}

.user-buttons a.btn-login, 
.user-buttons a.btn-register {
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    white-space: nowrap;
}
.btn-login { color: var(--dark-gray); background-color: transparent; border-color: #dcdcdc; }
.btn-login:hover { background-color: var(--light-gray); color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.btn-register { color: #fff; background-color: var(--secondary-color); border-color: var(--secondary-color); }
.btn-register:hover { background-color: #3498db; border-color: #3498db; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(41, 128, 185, 0.3); }

/* Contenedor principal del perfil de usuario logueado */
.user-profile-menu {
    position: relative;
    cursor: pointer;
    padding-bottom: 15px;
    margin-bottom: -15px;
    width: 200px; /* <-- AUMENTADO A 200px */
}

/* Contenedor del ícono y nombre */
.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    color: var(--dark-gray);
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.3s;
    width: 100%;
}
.user-profile-menu:hover .user-avatar {
    background-color: var(--light-gray);
}
.user-avatar i {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

/* Menú Desplegable */
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    list-style: none;
    padding: 10px 0;
    width: 200px; /* <-- AUMENTADO A 200px */
    z-index: 100;
    border: 1px solid #f0f0f0;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeIn 0.2s ease-out forwards;
}
.user-profile-menu:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.dropdown-menu li a:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
}

/* Estilos para el nuevo botón "Hazte Premium" */
.dropdown-premium {
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(45deg, #ffc107, #ff8a00);
}
.dropdown-premium:hover {
    color: #fff !important;
    background: linear-gradient(45deg, #ffca2c, #ff9b22);
    transform: scale(1.05);
}
.dropdown-premium i {
    color: #fff !important;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Botón de Hamburguesa --- */
.hamburger-menu {
    display: none;
    font-size: 1.5rem;
    color: var(--primary-color);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

/* --- Sección Principal (Hero) --- */
.hero {
    text-align: center;
    
}
.hero h1 {
    font-size: 2.8rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.hero p {
    font-size: 1.2rem;
    color: var(--dark-gray);
    margin-bottom: 30px;
}
.formats {
    margin-top: 15px !important;
    font-size: 0.9rem !important;
    color: #777;
}

/* --- ESTILOS MEJORADOS, UNIFICADOS Y PROFESIONALES PARA UPLOAD-AREA --- */

.upload-area {
    /* --- CONTROL DE TAMAÑO Y POSICIÓN (LA CLAVE DE TU PETICIÓN) --- */
    max-width: 700px; /* 1. Define un ancho máximo fijo para las 3 páginas. */
    margin: 40px auto 20px auto; /* 2. Centra el contenedor y le da espacio vertical. */

    /* --- DISEÑO ATRACTIVO Y PROFESIONAL --- */
    border: 2px dashed #dcdcdc; /* Borde más sutil y moderno. */
    border-radius: 15px;
    padding: 50px 40px;
    background-color: #ffffff;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Sombra suave para darle profundidad. */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más fluida. */
}

.upload-area:hover, .upload-area.dragover {
    border-color: var(--secondary-color); /* Resalta el borde con el color de tu marca. */
    background-color: #f7f9fc;
    transform: translateY(-5px); /* Efecto de "levantamiento" al pasar el ratón. */
    box-shadow: 0 12px 30px rgba(41, 128, 185, 0.15); /* Sombra más pronunciada y con color. */
}

/* --- MEJORAS AL CONTENIDO INTERNO --- */
.upload-content .icon {
    font-size: 4.5rem; /* Ícono ligeramente más grande. */
    color: var(--secondary-color);
    transition: transform 0.3s ease;
}

.upload-area:hover .upload-content .icon {
    transform: scale(1.1); /* El ícono late sutilmente al pasar el ratón. */
}

.upload-content p {
    margin-bottom: 5px; /* Ajuste menor de espaciado. */
}

.btn-upload {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-upload:hover {
    background: var(--secondary-color);
}

/* --- Sección de Resultados --- */
.results {
    padding: 20px 0;
    background-color: #fff;
}
.results h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2rem;
    color: var(--primary-color);
}
.error-box {
    background-color: #ffebee;
    border: 1px solid var(--error-color);
    color: #c62828;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.image-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}
.image-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.image-card img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
    object-fit: contain;
}
.image-card .info { width: 100%; }
.filename { font-weight: 700; word-break: break-all; margin-bottom: 10px; font-size: 0.9rem; }
.size-info { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 10px; }
.original-size { color: #e74c3c; }
.new-size { color: var(--success-color); font-weight: 700; }
.saving-bar { width: 100%; height: 8px; background-color: var(--light-gray); border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.saving-bar .saved { height: 100%; background-color: var(--success-color); border-radius: 4px; }
.saving-percent { font-size: 0.9rem; font-weight: 700; color: var(--success-color); }
.btn-download { display: block; width: 100%; background: var(--success-color); color: #fff; text-decoration: none; padding: 10px; margin-top: 15px; border-radius: 8px; font-weight: 600; transition: opacity 0.3s; }
.btn-download:hover { opacity: 0.85; }

/* --- Pie de Página --- */
footer {
    background: var(--dark-gray);
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* --- ESTILOS PARA DISPOSITIVOS MÓVILES (MEDIA QUERIES) --- */
@media (max-width: 992px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.4s ease-in-out;
        padding-top: 80px;
        gap: 0;
    }
    .main-nav.active { right: 0; }
    .main-nav ul { flex-direction: column; text-align: left; width: 100%; gap: 0; }
    .main-nav a { font-size: 1.1rem; display: block; padding: 15px 25px; width: 100%; border-radius: 0; }
    
    .user-buttons { display: none; }
    
    .main-nav .mobile-auth-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px;
        margin-top: 20px;
        border-top: 1px solid #eee;
        gap: 15px; /* Espacio entre los botones */
    }
    
    
    .main-nav .mobile-auth-buttons a {
        width: 100%;
        text-align: center;
        padding: 12px; /* Ajusta el padding si es necesario */
    }
    
    .main-nav .user-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px;
        margin-top: 20px;
        border-top: 1px solid #eee;
    }
    .main-nav .user-buttons a {
        width: 100%;
        text-align: center;
    }

    .hamburger-menu { display: block; }
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
}

/* --- Estilos para Página de Conversión --- */
.conversion-options { margin-top: 30px; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.conversion-options h3 { text-align: center; margin-bottom: 20px; color: var(--primary-color); }
.options-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-convert { display: flex; align-items: center; gap: 8px; font-family: var(--font-family); font-size: 1.1rem; font-weight: 600; padding: 12px 25px; border-radius: 8px; border: 2px solid var(--primary-color); background-color: var(--primary-color); color: #fff; cursor: pointer; transition: all 0.3s ease; }
.btn-convert:hover { background-color: #fff; color: var(--primary-color); transform: translateY(-2px); }
.btn-convert i { font-size: 1.2rem; }
.spinner { border: 6px solid var(--light-gray); border-top: 6px solid var(--secondary-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 30px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.preview-container { margin: 0 auto 25px auto; width: 100%; max-width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; border: 2px solid var(--light-gray); border-radius: 8px; background-color: #f9f9f9; overflow: hidden; }
#image-preview { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.preview-list-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 25px; padding: 10px; background-color: #f9f9f9; border-radius: 8px; border: 1px solid #e0e0e0; max-height: 250px; overflow-y: auto; }
.preview-item { width: 100px; text-align: center; }
.preview-item img { width: 80px; height: 80px; border-radius: 5px; border: 1px solid #ddd; object-fit: cover; }
.preview-item p { font-size: 0.75rem; color: #555; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Estilos para Herramienta de Recorte --- */
.editor-area { display: flex; flex-direction: column; gap: 20px; max-width: 1200px; margin: 40px auto; background-color: #f7f7f7; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
@media (min-width: 768px) { .editor-area { flex-direction: row; align-items: flex-start; } }
.cropper-container { flex: 2; max-height: 500px; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: #e9e9e9; border-radius: 5px; }
.controls-container { flex: 1; padding: 20px; background-color: #ffffff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); text-align: left; }
.controls-container h4 { text-align: center; margin-top: 0; color: #333; }
.input-group { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.input-group label { font-weight: bold; color: #555; flex-shrink: 0; }
.input-group input[type="number"] { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; width: auto; text-align: right; }
#btn-process { display: block; width: 100%; margin-top: 25px; }
.results-container { max-width: 800px; margin: 40px auto; text-align: center; background-color: #f9f9f9; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.results-container h2 { color: #28a745; margin-bottom: 20px; }

/* --- Estilos para Formularios de IA --- */
.generate-form, .edit-form { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 30px; padding: 25px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); max-width: 700px; margin-left: auto; margin-right: auto; }
.generate-form textarea, .edit-form textarea { width: 100%; padding: 15px; font-family: var(--font-family); font-size: 1.1rem; border: 2px solid #ddd; border-radius: 8px; resize: vertical; transition: border-color 0.3s; }
.generate-form textarea:focus { outline: none; border-color: var(--secondary-color); }
#generate-button { width: 100%; max-width: 300px; padding: 15px; font-size: 1.1rem; }
#generate-button:disabled { background-color: #95a5a6; cursor: not-allowed; }
#generate-button i { margin-right: 8px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }    

/* --- Estilos para el Ícono Premium del Menú --- */
.premium-icon { margin-left: 8px; color: #ffc107; animation: glow 2s ease-in-out infinite; }
@keyframes glow { 0% { text-shadow: 0 0 3px #ffc107; } 50% { text-shadow: 0 0 10px #ffc107, 0 0 15px #fff3cd; } 100% { text-shadow: 0 0 3px #ffc107; } }
.main-nav a.active .premium-icon { color: #fff; animation: none; text-shadow: 0 0 5px rgba(255, 255, 255, 0.7); }
    
/* --- Estilos para Formularios de Usuario --- */
.form-container { max-width: 450px; margin: 40px auto; padding: 30px; background-color: #fff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; }
.form-container h2 { margin-bottom: 25px; color: var(--primary-color); }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark-gray); }
.form-group input { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; }
.btn-submit { width: 100%; padding: 15px; border: none; border-radius: 6px; background-color: var(--secondary-color); color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s; }
.btn-submit:hover { background-color: #2980b9; }
.divider { margin: 25px 0; color: #aaa; position: relative; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background-color: #ddd; }
.divider::before { left: 0; }
.divider::after { right: 0; }
.social-buttons { display: flex; gap: 15px; justify-content: center; margin-bottom: 20px; }
.btn-social-google, .btn-social-facebook { flex: 1; padding: 12px; border-radius: 6px; text-decoration: none; font-weight: 600; color: #fff; transition: opacity 0.3s; }
.btn-social-google { background-color: #DB4437; }
.btn-social-facebook { background-color: #4267B2; }
.btn-social-google:hover, .btn-social-facebook:hover { opacity: 0.9; }
.form-footer { margin-top: 20px; font-size: 0.9rem; }

/* --- Estilos para Página de Registro Exitoso --- */
.success-container { text-align: center; }
.success-icon { font-size: 5rem; color: var(--success-color); margin-bottom: 20px; animation: pop-in 0.5s ease-out; }
@keyframes pop-in { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.success-container h2 { font-size: 2rem; margin-bottom: 10px; }
.success-subtitle { font-size: 1.1rem; color: #555; margin-bottom: 30px; max-width: 350px; margin-left: auto; margin-right: auto; }
.benefits-list { margin-bottom: 30px; text-align: left; display: inline-block; }
.benefits-list p { font-size: 1rem; margin-bottom: 10px; color: var(--dark-gray); font-weight: 500; }
.benefits-list i { color: var(--secondary-color); margin-right: 12px; width: 20px; text-align: center; }
.success-container .btn-submit { background-color: var(--success-color); transition: all 0.3s ease; white-space: nowrap;}
.success-container .btn-submit:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(46, 204, 113, 0.4); }


/* --- Estilos para el Panel de Usuario --- */
.panel-main .container {
    max-width: 1200px;
}

.panel-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .panel-container {
        flex-direction: row;
    }
}

/* Sidebar del Panel */
.panel-sidebar {
    flex: 0 0 280px; /* Ancho fijo */
    background-color: #fff;
    
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 15px 0;
    width: 100%;
}

.sidebar-header {
    padding: 0 25px 15px 25px;
    border-bottom: 1px solid #eee;
}

.sidebar-header h3 {
    color: var(--primary-color);
    font-size: 1.4rem;
}

.panel-sidebar ul {
    list-style: none;
    padding: 15px 0;
}

.panel-sidebar ul a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 600;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.panel-sidebar ul a:hover {
    background-color: #f8f9fa;
    color: var(--secondary-color);
}

.panel-sidebar ul a.active {
    background-color: #eaf5ff;
    border-left-color: var(--secondary-color);
    color: var(--secondary-color);
}

.panel-sidebar ul a i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

/* Contenido del Panel */
.panel-content {
    flex-grow: 1;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    width: 100%;
}

.panel-header {
    padding: 25px 30px;
    border-bottom: 1px solid #eee;
}
.panel-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-header p {
    margin-top: 5px;
    color: #6c757d;
}

.panel-body {
    padding: 30px;
}

.panel-form {
    max-width: 500px;
}

.panel-form small {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Tabla de Tareas */
.info-banner {
    background-color: #eaf5ff;
    border: 1px solid #bde0ff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #005c9e;
}
.table-container {
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
th {
    background-color: #f8f9fa;
    font-weight: 700;
    color: var(--primary-color);
}
.status-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}
.status-badge.completado { background-color: var(--success-color); }
.status-badge.fallido { background-color: var(--error-color); }
.btn-download-small {
    padding: 6px 12px;
    background-color: var(--secondary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.btn-download-small.disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Tarjetas de Planes */
.plans-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.plan-card {
    border: 2px solid #eee;
    border-radius: 12px;
    text-align: center;
    padding: 30px;
    transition: all 0.3s ease;
}
.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--secondary-color);
}
.plan-card.full {
    border-color: var(--secondary-color);
}
.plan-header {
    margin-bottom: 25px;
}
.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.plan-price span {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
}
.plan-features {
    list-style: none;
    margin-bottom: 30px;
}
.plan-features li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.plan-features li i {
    color: var(--success-color);
}
.plan-card .btn-submit {
    width: 100%;
}
.plan-card.full .btn-submit {
    background-color: var(--primary-color);
}







/* ================================================================== */
/* --- NUEVOS ESTILOS PARA EL PANEL DE USUARIO PROFESIONAL --- */
/* ================================================================== */

/* Prepara el body para un layout de pantalla completa */
body.panel-body-fullscreen {
    background-color: #f4f7f6; /* Un gris muy suave para el fondo */
    overflow-x: hidden; /* Evita scroll horizontal */
}

/* Oculta el footer en la vista del panel */
body.panel-body-fullscreen footer {
    display: none;
}

/* Contenedor principal que ocupa toda la pantalla */
.panel-container-fullscreen {
    display: flex;
    /* Altura total de la pantalla menos la altura del header (aprox 74px) */
    min-height: calc(100vh - 74px); 
}

/* Sidebar de Navegación del Panel */
.panel-sidebar {
    width: 260px;
    background: linear-gradient(180deg, #2c3e50, #34495e); /* Gradiente oscuro y elegante */
    color: #ecf0f1;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease;
    flex-shrink: 0; /* Evita que la barra lateral se encoja */
}

.sidebar-header {
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #4a627a; /* Separador sutil */
}

.sidebar-header i {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.sidebar-header h3 {
    font-size: 1.3rem;
    margin: 0;
    color: #fff;
}

.panel-sidebar ul {
    list-style: none;
    padding: 15px 0;
    flex-grow: 1; /* Ocupa el espacio restante */
}

.panel-sidebar ul a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 25px;
    text-decoration: none;
    color: #bdc3c7; /* Un gris claro para el texto */
    font-weight: 600;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.panel-sidebar ul a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff; /* Texto blanco al pasar el ratón */
}

.panel-sidebar ul a.active {
    background-color: rgba(0, 0, 0, 0.2);
    border-left-color: var(--secondary-color);
    color: #fff;
}

.panel-sidebar ul a i {
    width: 22px;
    text-align: center;
    font-size: 1.1rem;
}

/* Contenido Principal del Panel */
.panel-content-fullscreen {
    flex-grow: 1; /* Ocupa todo el espacio restante */
    padding: 40px;
    background-color: #f4f7f6;
    overflow-y: auto; /* Permite scroll si el contenido es muy largo */
}

.panel-header {
    padding-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 30px;
}
.panel-header h2 {
    margin: 0;
    font-size: 2rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 12px;
}
.panel-header p {
    margin-top: 8px;
    color: #6c757d;
    font-size: 1.1rem;
}

.panel-body {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    padding: 30px;
}

.panel-form {
    max-width: 600px;
}
.panel-form small {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Tabla de Tareas (mejorada) */
.info-banner {
    background-color: #eaf5ff;
    border-left: 4px solid var(--secondary-color);
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #005c9e;
    font-weight: 500;
}
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; }
th { background-color: #f8f9fa; font-weight: 700; color: var(--primary-color); font-size: 0.9rem; text-transform: uppercase; }
td { color: #555; }
.status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; color: #fff; }
.status-badge.completado { background-color: var(--success-color); }
.status-badge.fallido { background-color: var(--error-color); }
.btn-download-small { padding: 6px 12px; background-color: var(--secondary-color); color: #fff; text-decoration: none; border-radius: 5px; font-size: 0.85rem; font-weight: 600; border: none; cursor: pointer; transition: background-color 0.2s; }
.btn-download-small:hover { background-color: #2980b9; }
.btn-download-small.disabled { background-color: #ccc; cursor: not-allowed; }

/* Tarjetas de Planes (mejoradas) */
.plans-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.plan-card { border: 1px solid #e0e0e0; border-radius: 12px; text-align: center; padding: 30px; transition: all 0.3s ease; background-color: #fff; }
.plan-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
.plan-card.full { border-width: 2px; border-color: var(--secondary-color); position: relative; overflow: hidden; }
.plan-card.full::before { content: 'Recomendado'; position: absolute; top: 18px; right: -30px; background: var(--secondary-color); color: white; padding: 5px 30px; font-size: 0.8rem; font-weight: 700; transform: rotate(45deg); }
.plan-header { margin-bottom: 25px; }
.plan-price { font-size: 3rem; font-weight: 700; color: var(--primary-color); }
.plan-price span { font-size: 1rem; font-weight: 400; color: #6c757d; }
.plan-features { list-style: none; margin-bottom: 30px; padding: 0; }
.plan-features li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; text-align: left; }
.plan-features li i { color: var(--success-color); }
.plan-card .btn-submit { width: 100%; padding: 15px; font-size: 1.1rem; }
.plan-card.full .btn-submit { background-color: var(--primary-color); }

/* Adaptación del panel para móviles */
@media (max-width: 992px) {
    .panel-container-fullscreen {
        flex-direction: column;
    }
    .panel-sidebar {
        width: 100%;
        flex: 0 0 auto;
        border-radius: 0;
    }
    .panel-content-fullscreen {
        padding: 20px;
    }
}

/* --- Estilos para la Paginación del Panel --- */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.pagination-container a {
    text-decoration: none;
    color: var(--secondary-color);
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
}

.pagination-container a:hover {
    background-color: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

.pagination-container a.active {
    background-color: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
    cursor: default;
}

.pagination-container a.pagination-arrow {
    border: none;
    font-weight: bold;
}

.pagination-container a.pagination-arrow:hover {
    background-color: transparent;
    color: #0056b3;
}





/* --- NUEVOS ESTILOS PROFESIONALES PARA TARJETAS DE PLANES --- */

.plans-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    align-items: center; /* Alinea las tarjetas si tienen alturas diferentes */
}

.plan-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    text-align: center;
    padding: 35px 30px;
    transition: all 0.3s ease;
    position: relative; /* Necesario para la insignia */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

.plan-card.recommended-plan {
    border-color: var(--secondary-color);
    border-width: 2px;
}

/* Estilo para la tarjeta del plan actual del usuario */
.plan-card.current-plan {
    border-color: var(--success-color);
    border-width: 2px;
    box-shadow: 0 8px 30px rgba(46, 204, 113, 0.2);
}

/* Insignia "Plan Actual" */
.plan-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--success-color);
    color: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.plan-header h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.plan-price {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 10px 0;
}

.plan-price span {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
}

.plan-features {
    list-style: none;
    margin: 30px 0;
    text-align: left;
    padding: 0;
}

.plan-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #555;
}

.plan-features li i {
    color: var(--success-color);
    font-size: 1.2rem;
}

.plan-button-container {
    margin-top: auto; /* Empuja el botón al fondo */
}

.plan-card .btn-submit {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
}

.plan-card .btn-submit:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    border: none;
}

.plan-card .btn-upgrade {
    background-color: var(--secondary-color);
}





/* --- ESTILOS PARA EL PLAN RECOMENDADO --- */

.plan-card.recommended-plan {
    /* Resaltamos el borde con el color secundario de tu marca */
    border-color: var(--secondary-color); 
    border-width: 2px;

    /* Posicionamiento relativo para poder colocar la cinta */
    position: relative; 
    overflow: hidden; /* Oculta las partes de la cinta que se salen de la tarjeta */
}

/* --- CORRECCIÓN PARA LA CINTA DE RECOMENDADO --- */
.plan-card.recommended-plan::before {
    content: 'Recomendado';
    position: absolute;
    background: var(--secondary-color);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transform: rotate(45deg);

    /* --- AJUSTES CLAVE --- */
    top: 25px;         /* <-- La bajamos un poco */
    right: -35px;        /* <-- La movemos un poco más hacia afuera */
    width: 150px;        /* <-- Le damos un ancho fijo para que el texto no se corte */
    padding: 5px 0;      /* <-- Ajustamos el padding vertical */
    text-align: center;  /* <-- Nos aseguramos de que el texto esté centrado */
}




/* --- ESTILOS PARA EL PANEL DE RESUMEN (DASHBOARD) --- */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.stat-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 25px 30px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
}

.stat-card h3 {
    font-size: 1.1rem;
    color: var(--dark-gray);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.stat-main {
    margin: 10px 0;
    text-align: center;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    color: #6c757d;
    margin-top: 5px;
}

.stat-progress {
    margin-top: auto; /* Empuja la barra al final */
    padding-top: 20px;
}

.progress-bar {
    height: 10px;
    background-color: var(--light-gray);
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-top: 8px;
    color: #6c757d;
}

.plan-info {
    text-align: center;
}

.plan-badge {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}
.plan-badge.plan-gratuito { background-color: #7f8c8d; }
.plan-badge.plan-básico { background-color: var(--secondary-color); }
.plan-badge.plan-premium { background: linear-gradient(45deg, #ffc107, #ff8a00); }

.plan-description {
    color: #555;
    font-size: 1rem;
}

.plan-renewal {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
}

/* Estilos para la tarjeta de llamada a la acci¨®n */
.cta-card {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #fff;
    text-align: center;
}

.cta-card h3, .cta-card p {
    color: #fff;
}

.cta-card h3 i {
    color: #ffc107;
}

.btn-cta {
    display: inline-block;
    margin-top: 20px;
    background-color: #ffc107;
    color: var(--primary-color);
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}




/* --- ESTILOS PARA LA VENTANA MODAL DE REGISTRO --- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

.modal-content {
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 450px;
    width: 90%;
    position: relative;
    transform: scale(0.9);
    animation: popIn 0.3s 0.1s forwards;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-close:hover {
    color: #333;
}

.modal-icon {
    font-size: 3rem;
    color: #fff;
    background: var(--secondary-color);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
}

.modal-content h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.modal-content p {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-modal {
    padding: 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-modal.btn-register {
    background-color: var(--success-color);
    color: #fff;
}
.btn-modal.btn-register:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn-modal.btn-login {
    background-color: var(--light-gray);
    color: var(--dark-gray);
}
.btn-modal.btn-login:hover {
    background-color: #e0e0e0;
}

@keyframes fadeIn { to { opacity: 1; } }
@keyframes popIn { to { transform: scale(1); } }




/* style.css */

/* --- Animación de Carga para Tarjetas de Imagen --- */
.image-card.is-processing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px; /* Ajusta la altura según tu diseño */
    background-color: #f8f9fa;
}

.card-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #007bff; /* Usa tu color primario, ej: var(--primary-color) */
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* style.css */

/* style.css */

/* --- Estilos para la Barra de Progreso y Descargar Todo (Versión Alineada) --- */

/* Nuevo contenedor para alinear la barra y el botón */
.progress-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; /* Espacio entre la barra y el botón */
    margin: 20px auto;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
    max-width: 800px;
}

/* El contenedor de la barra ahora ocupa el espacio disponible */
.progress-container {
    flex-grow: 1; /* Permite que la barra se estire */
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 25px;
    background-color: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background-color: #28a745; /* Verde de éxito */
    transition: width 0.4s ease;
}

#progress-text {
    margin-top: 8px;
    font-weight: bold;
    color: #495057;
    display: block;
}

/* El contenedor del botón ya no necesita margen superior */
.download-all-container {
    text-align: center;
}

.btn-download-all {
    background-color: #28a745;
    color: white;
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Evita que el texto del botón se parta */
}

.btn-download-all:hover {
    background-color: #218838;
}





/* style.css */

/* --- Estilos para una Cuadrícula de Resultados Uniforme --- */

/* 1. Convertimos el contenedor principal en una cuadrícula (Grid) */
/* Pega esto en tu style.css en lugar del código anterior */
.image-results-grid {
    display: grid;
    gap: 20px;
    /* Por defecto (móviles), mostramos 2 columnas */
    grid-template-columns: repeat(2, 1fr);
}

/* Cuando la pantalla sea más ancha (tablets), mostramos 3 columnas */
@media (min-width: 768px) {
    .image-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cuando la pantalla sea muy ancha (escritorios), mostramos las 5 columnas que quieres */
@media (min-width: 1200px) {
    .image-results-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 2. Hacemos que cada tarjeta sea un contenedor flexible vertical */
.image-card {
    display: flex;
    flex-direction: column; /* Alinea los elementos de arriba a abajo */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

/* 3. Permitimos que la sección de información crezca */
.image-card .info {
    padding: 15px;
    flex-grow: 1; /* ¡Esta es la clave! Empuja el botón hacia abajo */
    display: flex;
    flex-direction: column;
}

/* 4. Aseguramos que el nombre del archivo no ocupe más de 2 líneas */
.image-card .filename {
    font-weight: bold;
    margin-bottom: 10px;
    word-wrap: break-word; /* Permite que palabras largas se corten */
    
    /* Opcional: Truncar texto si es muy largo con "..." */
    /* Descomenta las siguientes 3 líneas si prefieres esto */
    /*
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    */
}

/* 5. Empujamos la barra de ahorro y el porcentaje hacia abajo */
.image-card .saving-bar,
.image-card .saving-percent {
    margin-top: auto; /* Empuja estos elementos hacia el final de la sección .info */
}

/* 6. Estilo consistente para el botón de descarga */
.image-card .btn-download {
    margin: 0; /* Quitamos márgenes innecesarios */
    border-radius: 0; /* El botón ocupa todo el ancho inferior */
    width: 100%;
    padding: 12px;
}




/* style.css */

/* --- Estilos para Fijar el Footer al Final de la Página --- */

html {
    height: 100%;
}

body {
    min-height: 100%; /* Asegura que el body ocupe al menos toda la altura de la pantalla */
    display: flex;     /* Activa el modo Flexbox */
    flex-direction: column; /* Organiza los elementos (header, main, footer) en una columna */
}

main {
    flex-grow: 1; /* ¡Esta es la clave! Hace que el contenido principal crezca y ocupe todo el espacio sobrante, empujando el footer hacia abajo. */
}


/* style.css */

/* --- Estilos para Ordenar 'Antes' y 'Ahora' en los Resultados --- */

.size-info {
    display: flex;
    flex-direction: column; /* ¡Esta es la clave! Apila los elementos verticalmente. */
    align-items: flex-start; /* Alinea el texto a la izquierda. */
    margin-bottom: 10px;   /* Añade un espacio debajo, antes de la barra de ahorro. */
}

.size-info .original-size {
    color: #d9534f; /* Color rojo para el tamaño original. */
    font-size: 0.9em;
    margin-bottom: 4px; /* Pequeño espacio entre las dos líneas. */
}

.size-info .new-size {
    color: #28a745; /* Color verde para el nuevo tamaño. */
    font-size: 0.9em;
    font-weight: bold;
}



/* style.css */

/* --- Estilos para alinear miniaturas y texto (Versión Corregida y Mejorada) --- */

/* 1. Contenedor de la miniatura con TAMAÑO MÁS PEQUEÑO Y ESTABLE */
.image-preview-container {
    width: 100%;
    height: 120px; /* Reducimos la altura de 150px a 120px */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    box-sizing: border-box;
    flex-shrink: 0;
}


/* style.css */

/* --- Estilo definitivo para el nombre del archivo en la tarjeta de resultado --- */
.image-card .filename {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4em; /* Altura de una sola línea de texto */
    height: 2.8em;      /* ¡CLAVE 1! Altura fija para EXACTAMENTE 2 líneas (1.4em * 2) */
    margin-bottom: 10px;
    word-wrap: break-word;

    /* ¡CLAVE 2! Estas propiedades cortan el texto si es más largo de 2 líneas y añaden "..." */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Número máximo de líneas a mostrar */
    -webkit-box-orient: vertical;
}


/* style.css */

/* --- Estilos para la Paginación --- */
.pagination-container {
    text-align: center;
    margin: 30px 0 10px 0;
}

.pagination-container button {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #007bff;
    padding: 8px 16px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.pagination-container button:hover:not(:disabled) {
    background-color: #007bff;
    color: #fff;
}

.pagination-container button:disabled {
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

#page-info {
    font-weight: bold;
    color: #495057;
    padding: 0 10px;
}


/* style.css */

/* ================================================================== */
/* --- AJUSTES FINALES PARA DISPOSITIVOS MÓVILES --- */
/* ================================================================== */

/* Estas reglas solo se aplicarán en pantallas de 992px de ancho o menos (tablets y móviles) */
@media (max-width: 992px) {

    /* 1. Hacemos que la barra de progreso y el botón se apilen verticalmente */
    .progress-wrapper {
        flex-direction: column; /* Cambia la dirección a columna */
        align-items: stretch;   /* Hace que ambos elementos ocupen todo el ancho */
        gap: 15px;
    }

    .download-all-container {
        width: 100%;
    }

    .btn-download-all {
        width: 100%; /* El botón ocupa todo el ancho */
    }


    /* 2. Reducimos el tamaño de los textos principales */
    .hero h1 {
        font-size: 2.2rem; /* Más pequeño que el original de 2.8rem */
    }

    .hero p {
        font-size: 1.1rem; /* Más pequeño que el original de 1.2rem */
    }
    
    .results h2 {
        font-size: 1.6rem; /* Reducimos el título de resultados */
    }


    /* 3. Ajustes menores en los formularios para que no se peguen a los bordes */
    .form-container {
        width: 90%;
        padding: 25px;
    }
}


/* Ajustes adicionales solo para móviles muy pequeños */
@media (max-width: 576px) {
    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    /* Hacemos que en móviles la cuadrícula de resultados siempre muestre 1 columna */
    .image-results-grid {
        grid-template-columns: 1fr;
    }
}



/* style.css */

/* ================================================================== */
/* --- AJUSTES PARA ÁREAS DE TRABAJO EN MÓVILES --- */
/* ================================================================== */

@media (max-width: 768px) {

    /* --- Ajustes para la herramienta RECORTAR --- */

    /* Reducimos el padding general del editor para que ocupe menos espacio */
    .editor-area {
        padding: 15px;
        gap: 15px;
    }

    /* Ajustamos el contenedor de controles */
    .controls-container {
        padding: 15px;
        width: 100%; /* Aseguramos que ocupe todo el ancho */
    }

    /* Hacemos los botones de control un poco más grandes para ser fáciles de tocar */
    .control-buttons button {
        padding: 10px 15px;
        font-size: 1rem;
    }


    /* --- Ajustes para la herramienta CONVERTIR --- */

    /* Reducimos el padding y margen de las opciones */
    .conversion-options {
        margin-top: 20px;
        padding: 15px;
    }
    
    /* Hacemos que los botones de conversión ocupen más ancho */
    .options-grid {
        gap: 10px;
    }

    .btn-convert {
        width: 100%;
        justify-content: center; /* Centramos el texto e ícono */
    }

    /* Hacemos la lista de previsualización más compacta */
    .preview-list-container {
        max-height: 200px;
    }

}



/* style.css */

.task-filename {
    /* Mantenemos el ancho máximo para que la columna no se estire demasiado */
    display: inline-block;
    max-width: 300px; 
    vertical-align: middle;
}



/* --- ESTILOS MEJORADOS PARA LA PÁGINA DE PRECIOS --- */
.plans-container {
    align-items: center; /* Alinea verticalmente las tarjetas si tienen alturas diferentes */
}

.plan-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Hace que todas las tarjetas tengan la misma altura */
}

.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

/* Estilos para la tarjeta recomendada (el plan Básico) */
.plan-card.recommended-plan {
    border-color: var(--secondary-color);
    border-width: 3px;
    transform: scale(1.05); /* La hace ligeramente más grande */
}

.plan-card.recommended-plan:hover {
    transform: scale(1.08) translateY(-10px);
}

/* Insignia "Recomendado" */
.plan-badge-recommended {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary-color);
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(41, 128, 185, 0.4);
}

.plan-card .plan-header h3 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.plan-card .plan-price {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 10px 0;
}

.plan-features {
    list-style: none;
    margin: 25px 0;
    text-align: left;
    padding: 0;
    flex-grow: 1; /* Empuja el botón hacia el fondo */
}

.plan-features li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #555;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li i {
    color: var(--success-color);
    font-size: 1.2rem;
}



/* ================================================================== */
/* --- DISEÑO ATRACTIVO Y CORREGIDO PARA TARJETAS DE PLANES --- */
/* ================================================================== */

.plans-container-wrapper {
    margin-top: 40px;
    padding-bottom: 40px;
}

/* style.css */

.plans-container {
    display: grid;
    gap: 30px;
    align-items: stretch;

    /* Por defecto (móviles), mostramos 1 sola columna para que se vea bien */
    grid-template-columns: 1fr; 
}

/* Cuando la pantalla sea un poco más ancha (tablets), mostramos 2 columnas */
@media (min-width: 768px) {
    .plans-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Cuando la pantalla sea ancha (escritorios), forzamos las 3 columnas que quieres */
@media (min-width: 992px) {
    .plans-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.plan-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    
    /* CLAVE 2: Hacemos la tarjeta un contenedor flexible vertical. */
    display: flex;
    flex-direction: column;
    position: relative; /* Necesario para la insignia */
}

.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.plan-card.recommended-plan {
    border-width: 3px;
    border-color: var(--secondary-color);
    transform: scale(1.05);
}

.plan-card.recommended-plan:hover {
    transform: scale(1.08) translateY(-10px);
}

/* Insignia "Recomendado" */
.plan-badge-recommended {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary-color);
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(41, 128, 185, 0.4);
}

.plan-card .plan-header {
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.plan-card .plan-header h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.plan-card .plan-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.plan-card .plan-price span {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    
    /* CLAVE 3: Esta es la magia. La lista de características crece para empujar el botón hacia abajo. */
    flex-grow: 1; 
}

.plan-features li {
    padding: 12px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #555;
    font-size: 0.95rem;
}

.plan-features li i {
    color: var(--success-color);
    margin-top: 4px; /* Alinea el ícono con la primera línea de texto */
}

/* El botón ya no necesita margen extra, se alinea automáticamente */
.plan-button-container {
    margin-top: 20px;
}

.plan-card .btn-submit {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
}

.plan-card.recommended-plan .btn-submit {
    background-color: var(--secondary-color);
    box-shadow: 0 5px 15px rgba(41, 128, 185, 0.3);
}



/* --- NUEVOS ESTILOS PARA SECCIÓN DE CONTENIDO ADSENSE --- */
.content-section {
    background-color: #ffffff;
    padding: 60px 0;
    margin-top: 40px; /* Espacio entre la herramienta y esta sección */
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.content-section h2 {
    text-align: center;
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.content-section .section-intro {
    text-align: center;
    font-size: 1.1rem;
    color: #6c757d;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
    gap: 30px;
}

/* --- NUEVOS ESTILOS PROFESIONALES PARA CONTENT-CARD --- */

.content-card {
    /* Definimos una variable de color por defecto como fallback */
    --card-color: #34495e; 
    --card-color-rgb: 52, 73, 94;

    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    text-align: left; /* Alineamos el texto a la izquierda como en el ejemplo */
    
    /* El borde de color superior que le da el toque elegante */
    border-top: 4px solid var(--card-color);
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    
    /* Hacemos la tarjeta un contenedor flex para alinear el link al final */
    display: flex;
    flex-direction: column;
}

.content-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09);
    
    /* El color de fondo claro en hover, usando el color de la tarjeta con transparencia */
    background-color: rgba(var(--card-color-rgb), 0.05);
}

.card-icon {
    width: 50px; /* Hacemos el icono un poco más pequeño */
    height: 50px;
    margin: 0 0 20px 0; /* Lo alineamos a la izquierda */
    border-radius: 10px; /* Ligeramente menos redondeado */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    
    /* El color del icono ahora viene de la variable de la tarjeta */
    background-color: var(--card-color);
}

.content-card h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    text-align: left;
}

.content-card p {
    color: #555;
    line-height: 1.7;
    text-align: left;
    flex-grow: 1; /* Esto empuja el link hacia el final de la tarjeta */
}

/* Estilos para el nuevo enlace opcional tipo "Buy now" */
.card-link {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-weight: 700;
    
    /* El color del enlace también viene de la variable */
    color: var(--card-color);
    
    transition: transform 0.2s ease;
}

.card-link:hover {
    transform: translateX(4px); /* Pequeño efecto de movimiento */
}

/* --- Adaptación para móviles --- */
@media (max-width: 992px) {
    .content-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en tablets */
    }
}

@media (max-width: 768px) {
    .content-section {
        padding: 40px 0;
    }
    .content-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
    .content-section h2 {
        font-size: 1.8rem;
    }
}



/* --- ESTILOS PARA LA GUÍA DETALLADA Y FAQ --- */
.detailed-guide {
    padding: 40px 0;
    max-width: 900px;
    margin: 40px auto 0 auto;
}

.detailed-guide h3 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
}

.detailed-guide p, .detailed-guide li {
    font-size: 1.05rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px;
}

.detailed-guide ul {
    list-style: none;
    padding-left: 0;
}

.detailed-guide ul li::before {
    content: "\f058"; /* Icono de check de Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--success-color);
    margin-right: 12px;
}



/* --- ESTILOS MEJORADOS PARA EL FOOTER --- */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
    gap: 15px;
}

.footer-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    transition: text-decoration 0.3s;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* En pantallas pequeñas, centra todo */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        justify-content: center;
    }
}



/* --- ESTILOS PARA LA PÁGINA DE CONTACTO --- */
.contact-form-container {
    max-width: 700px; /* Un poco más ancho para el formulario */
    text-align: center;
}

.form-intro {
    margin-bottom: 30px;
    color: #555;
    font-size: 1.05rem;
}

#contact-form {
    text-align: left;
}

#contact-form .form-group {
    margin-bottom: 20px;
}

#contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-gray);
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.3s, box-shadow 0.3s;
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 8px rgba(41, 128, 185, 0.2);
}

#contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

#contact-form .btn-submit:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}


/* ================================================= */
/* == ESTILOS PARA EL NUEVO GENERADOR DE IMAGEN IA == */
/* ================================================= */

/* --- Contenedor Principal del Generador --- */
.ia-generator-box {
    background: #ffffff; /* Fondo blanco para contraste */
    border-radius: 20px; /* Bordes más redondeados */
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra sutil para profundidad */
    border: 1px solid #e9ecef; /* Borde muy ligero */
    margin-top: 2rem;
    max-width: 800px; /* Ancho máximo para mantenerlo centrado y legible */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* Asegura que los elementos internos respeten el borde redondeado */
}

/* --- Encabezado dentro del contenedor --- */
.generator-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #343a40;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #f1f3f5;
    padding-bottom: 1rem;
}

.generator-header .fa-magic-sparkles {
    color: #845ef7; /* Un color violeta vibrante */
    font-size: 1.5rem;
}

.generator-header h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
}

/* --- Cuerpo del generador (textarea y botón) --- */
.generator-body {
    display: flex;
    gap: 1rem;
    align-items: stretch; /* Asegura que el textarea y el botón tengan la misma altura */
}

/* --- Estilo del Área de Texto (Prompt) --- */
#prompt-input {
    flex-grow: 1; /* Ocupa el espacio disponible */
    border: 2px solid #ced4da;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    resize: vertical; /* Permite redimensionar solo verticalmente */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #f8f9fa;
    color: #495057;
}

#prompt-input::placeholder {
    color: #adb5bd;
}

#prompt-input:focus {
    outline: none;
    border-color: #845ef7; /* Color principal al enfocar */
    box-shadow: 0 0 0 4px rgba(132, 94, 247, 0.15); /* Efecto de "resplandor" */
}

/* --- El Botón Mágico (Protagonista) --- */
#generate-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 2rem;
    border: none;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
    
    /* El degradado llamativo */
    background: linear-gradient(45deg, #a665f0, #7367f0, #3f5efb);
    background-size: 200% 200%;
    
    /* Pequeña animación para atraer la vista */
    animation: gradient-animation 4s ease infinite;
}

#generate-button .fa-paper-plane {
    font-size: 1rem;
}

#generate-button:hover {
    transform: translateY(-3px); /* Se eleva ligeramente */
    box-shadow: 0 8px 20px rgba(115, 103, 240, 0.4); /* Sombra de color */
}

#generate-button:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(115, 103, 240, 0.3);
}

#generate-button:disabled {
    background: #adb5bd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
#generate-button:disabled span {
    animation: pulse 1.5s infinite ease-in-out;
}


/* --- Pie de la caja (Contador de generaciones) --- */
.generator-footer {
    margin-top: 1rem;
    text-align: center;
}

#generation-counter {
    font-size: 0.9rem;
    color: #868e96;
    margin: 0;
}


/* --- Animaciones --- */
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* --- Adaptabilidad para Móviles --- */
@media (max-width: 768px) {
    .generator-body {
        flex-direction: column; /* Apila el textarea y el botón en pantallas pequeñas */
    }

    #generate-button {
        padding: 1rem; /* Asegura un buen tamaño de botón en móviles */
    }
}


/* ================================================================= */
/* == ESTILOS AISLADOS PARA LA SECCIÓN DE RESULTADOS DE IA == */
/* ================================================================= */

/* Nota: Ahora todos los selectores empiezan con .ai-generator-results 
   para que no afecten a otras herramientas. */

/* --- Contenedor que centra la tarjeta de imagen --- */
.ai-generator-results .image-results-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

/* --- La Nueva Tarjeta de Imagen ('Image Card') --- */
.ai-generator-results .image-card {
    width: 100%;
    max-width: 600px; /* Vista previa más grande */
    background: #fff;
    border-radius: 24px; /* Bordes más suaves y modernos */
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); /* Sombra más pronunciada */
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.6s ease-out;
}

/* --- Encabezado de la tarjeta (donde va el prompt) --- */
.ai-generator-results .image-card .card-header {
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.ai-generator-results .image-card .prompt-text {
    margin: 0;
    font-size: 0.95rem;
    color: #495057;
    line-height: 1.5;
    font-style: italic;
}

.ai-generator-results .image-card .prompt-text .fa-quote-left {
    margin-right: 0.5rem;
    color: #adb5bd;
}

/* --- Cuerpo de la tarjeta (la imagen en sí) --- */


/* DESPUÉS - Versión más potente para la imagen */
.ai-generator-results .image-card .card-body img {
    /* Estilos base */
    display: block;
    width: 100%;
    height: auto;

    /* --- Líneas Clave para Anular Estilos Antiguos --- */
    max-width: 100%;     /* Anula cualquier 'max-width' de miniatura (ej: 120px) */
    max-height: none;    /* Anula cualquier límite de altura de miniatura */
    min-width: 100%;     /* Fuerza a la imagen a ocupar todo el ancho del contenedor */
    object-fit: contain; /* Asegura que la imagen se vea completa sin deformarse */
}

/* --- Pie de la tarjeta (el botón de descarga) --- */
.ai-generator-results .image-card .card-footer {
    padding: 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

/* --- El Nuevo Botón de Descarga (Profesional y Atractivo) --- */
.ai-generator-results .btn-download {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.9rem 1rem;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #1abc9c, #16a085);
    box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3);
}

.ai-generator-results .btn-download:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(26, 188, 156, 0.4);
}

.ai-generator-results .btn-download:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(26, 188, 156, 0.3);
}

/* --- Animación de aparición de la tarjeta --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Estilos para la tarjeta de invitación a mejorar el plan */
.upgrade-prompt-card {
    background-color: #1a1d2c; /* Un fondo oscuro acorde a tu diseño */
    border: 1px solid #3a3f5a;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    max-width: 550px;
    margin: 2rem auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.upgrade-prompt-card .upgrade-icon {
    font-size: 3rem;
    color: #00d1b2; /* Un color vibrante para el ícono */
    margin-bottom: 1rem;
}

.upgrade-prompt-card h3 {
    font-size: 1.75rem;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.upgrade-prompt-card p {
    color: #aeb9e1;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

.upgrade-prompt-card .btn-upgrade {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}





/* ================================================================== */
/* --- AJUSTES PARA MENÚ DE NAVEGACIÓN MÓVIL --- */
/* ================================================================== */

/* Por defecto en ESCRITORIO, los menús específicos de móvil están ocultos */
.mobile-auth-buttons, 
.mobile-user-menu {
    display: none;
}

/* Estas reglas solo se aplicarán en pantallas de 992px de ancho o menos */
@media (max-width: 992px) {

    /* 1. Ocultamos el contenedor de botones de escritorio */
    .user-buttons { 
        display: none; 
    }
    
    /* 2. Mostramos el contenedor de botones para "visitantes" en móvil */
    .main-nav .mobile-auth-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px;
        margin-top: 20px;
        border-top: 1px solid #eee;
        gap: 15px;
    }

    /* 3. Mostramos el menú para "usuarios logueados" en móvil */
    .main-nav .mobile-user-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px 25px;
        margin-top: 20px;
        border-top: 1px solid #eee;
        gap: 5px; /* Espacio pequeño entre enlaces */
    }

    /* 4. Estilos para el saludo al usuario en el menú móvil */
    .mobile-user-menu .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

    .mobile-user-menu .user-info i {
        font-size: 1.6rem;
    }

    /* 5. Estilos para los enlaces dentro del menú móvil */
    .mobile-user-menu a {
        padding: 14px 0 !important;
        font-size: 1rem !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-user-menu a i {
        width: 20px;
        text-align: center;
    }

    /* 6. Estilos específicos para el botón "Hazte Premium" móvil */
    .mobile-user-menu a.dropdown-premium {
        background: linear-gradient(45deg, #ffc107, #ff8a00);
        color: #fff !important;
        border-radius: 8px;
        padding: 14px 15px !important;
        justify-content: center;
        margin-top: 10px;
    }
    
    .mobile-user-menu a.dropdown-premium:hover {
        color: #fff !important;
    }
}


/* ================================================================== */
/* --- ESTILOS PARA EL PANEL RESPONSIVE (MENÚ MÓVIL) --- */
/* ================================================================== */

/* 1. Por defecto (escritorio), el botón del menú móvil está oculto */
.panel-sidebar-toggle {
    display: none;
}

/* 2. Reglas que se aplican solo en pantallas de 992px o menos (tablets y móviles) */
@media (max-width: 992px) {

    /* Hacemos que el contenedor principal ocupe toda la pantalla */
    .panel-container-fullscreen {
        flex-direction: column;
    }

    /* 3. Mostramos y estilizamos el nuevo botón de hamburguesa */
    .panel-sidebar-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: var(--primary-color);
        color: #fff;
        border: none;
        padding: 10px 15px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 20px;
    }

    /* 4. Preparamos el menú lateral para estar oculto fuera de la pantalla */
    .panel-sidebar {
        position: fixed; /* Lo sacamos del flujo normal */
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1100; /* Por encima del header y otros elementos */
        transform: translateX(-100%); /* ¡La clave! Lo mueve fuera de la pantalla a la izquierda */
        transition: transform 0.3s ease-in-out; /* Animación suave */
        width: 280px; /* Ancho fijo para el menú desplegable */
    }

    /* 5. Creamos la clase 'is-visible' que mostrará el menú */
    .panel-sidebar.is-visible {
        transform: translateX(0); /* Vuelve a su posición original (visible) */
    }
    
    /* 6. Hacemos que el contenido principal ya no sea empujado por el menú */
    .panel-content-fullscreen {
        padding: 20px;
    }
    
    /* 7. (Opcional pero recomendado) Añadimos un fondo oscuro al abrir el menú */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1099; /* Justo debajo del menú */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }
}


/* ================================================================== */
/* --- ESTILOS PARA LA PAGINACIÓN RESPONSIVE DEL PANEL --- */
/* ================================================================== */

/* 1. Por defecto (escritorio), ocultamos el texto de página móvil */
.pagination-mobile-info {
    display: none;
}

/* 2. Reglas que se aplican solo en pantallas de 768px o menos */
@media (max-width: 768px) {

    /* 3. Cambiamos el contenedor a Flexbox para alinear todo */
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 4. Ocultamos los números de página en el medio */
    .pagination-page-numbers {
        display: none;
    }
    
    /* 5. Ocultamos el texto "Anterior" y "Siguiente" */
    .pagination-text {
        display: none;
    }

    /* 6. Mostramos y estilizamos el texto "Página X de Y" */
    .pagination-mobile-info {
        display: block;
        font-weight: 600;
        color: var(--dark-gray);
    }
    
    /* 7. Ajustamos el padding de los botones de flecha */
    .pagination-container a.pagination-arrow {
        padding: 8px 12px;
    }
}


/* ================================================================== */
/* --- ESTILOS MEJORADOS Y PROFESIONALES PARA EL FOOTER --- */
/* ================================================================== */

.site-footer {
    background-color: var(--primary-color); /* Usamos tu color primario oscuro */
    color: #bdc3c7; /* Un gris claro para el texto */
    padding: 60px 0 20px 0;
    margin-top: 40px;
    border-top: 4px solid var(--secondary-color); /* Un acento con tu color secundario */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
    gap: 40px; /* Espacio entre columnas */
    margin-bottom: 40px;
}

.footer-column .footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

/* Línea decorativa debajo de los títulos */
.footer-column .footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--secondary-color);
}

.footer-column p {
    line-height: 1.8;
    margin-bottom: 20px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 12px;
}

.footer-links-list a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: #fff;
    transform: translateX(5px); /* Pequeño movimiento al pasar el ratón */
}

/* Estilos para los íconos de redes sociales */
.footer-social-icons {
    display: flex;
    gap: 15px;
}

.footer-social-icons a {
    color: #fff;
    background-color: #34495e; /* Un poco más oscuro que el fondo del footer */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.footer-social-icons a:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px); /* Efecto de elevación */
}

/* Línea divisoria y texto de copyright */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #34495e; /* Separador sutil */
    font-size: 0.9rem;
}