/* Estilos Base */
.joke-menu-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.joke-section, .menu-section, .meme-section {
    margin-bottom: 40px;
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.category-filter {
    margin: 20px 0;
}

.category-filter button {
    padding: 10px 20px;
    margin-right: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.joke-list, .meme-list {
    display: grid;
    gap: 20px;
}

.joke, .meme {
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.joke .category, .meme .category {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.meme img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.menu-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.menu-gallery img {
    max-width: 200px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.menu-gallery img:hover {
    transform: scale(1.05);
}

/* Estilos para Likes y Compartir */
.joke-actions, .meme-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.like-button {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    transition: color 0.3s;
}

.like-button:hover, .like-button.liked {
    color: #e74c3c;
}

.like-count {
    font-size: 14px;
}

.share-button {
    display: inline-block;
    padding: 5px;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    width: 24px;
    height: 24px;
    text-align: center;
    transition: background 0.3s;
}

.share-button.whatsapp {
    background: #25D366;
}

.share-button.facebook {
    background: #3b5998;
}

.share-button.instagram {
    background: #E1306C;
}

.share-button:hover {
    opacity: 0.8;
}

.dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Estilo para Anuncios */
.ad-block {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Estilo 1: Moderno */
.style-modern .joke-menu-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.style-modern h2 {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
}

.style-modern .category-filter button {
    background: #3498db;
    color: white;
    border-radius: 20px;
}

.style-modern .category-filter button.active,
.style-modern .category-filter button:hover {
    background: #2980b9;
}

.style-modern .joke, .style-modern .meme {
    background: #ecf0f1;
    border-left: 5px solid #3498db;
}

.style-modern .ad-block {
    background: #ecf0f1;
    border-left: 5px solid #3498db;
}

/* Estilo 2: Clásico */
.style-classic .joke-menu-container {
    background: #f5f5f5;
    border: 1px solid #ddd;
}

.style-classic h2 {
    color: #444;
    font-family: 'Georgia', serif;
}

.style-classic .category-filter button {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.style-classic .category-filter button.active,
.style-classic .category-filter button:hover {
    background: #ddd;
}

.style-classic .joke, .style-classic .meme {
    background: white;
    border: 1px solid #ccc;
}

.style-classic .ad-block {
    background: white;
    border: 1px solid #ccc;
}

/* Estilo 3: Minimalista */
.style-minimal .joke-menu-container {
    background: none;
    box-shadow: none;
}

.style-minimal h2 {
    color: #333;
    font-family: 'Helvetica', sans-serif;
    border-bottom: none;
}

.style-minimal .category-filter button {
    background: none;
    border-bottom: 2px solid transparent;
    color: #666;
}

.style-minimal .category-filter button.active,
.style-minimal .category-filter button:hover {
    border-bottom: 2px solid #000;
    background: none;
}

.style-minimal .joke, .style-minimal .meme {
    background: none;
    box-shadow: none;
    border-bottom: 1px solid #eee;
}

.style-minimal .ad-block {
    background: none;
    box-shadow: none;
}

/* Estilo 4: Oscuro */
.style-dark .joke-menu-container {
    background: #2c2c2c;
    color: #fff;
}

.style-dark h2 {
    color: #fff;
    border-bottom: 2px solid #e74c3c;
}

.style-dark .category-filter button {
    background: #444;
    color: #fff;
    border-radius: 5px;
}

.style-dark .category-filter button.active,
.style-dark .category-filter button:hover {
    background: #e74c3c;
}

.style-dark .joke, .style-dark .meme {
    background: #333;
    border-left: 5px solid #e74c3c;
}

.style-dark .ad-block {
    background: #333;
    border-left: 5px solid #e74c3c;
}

/* Estilo 5: Divertido */
.style-fun .joke-menu-container {
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQImWNggIL///8zMDBgZGQEGRgY/gMA8TMKDQELlwcAAAAASUVORK5CYII=') repeat;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.style-fun h2 {
    color: #ff6f61;
    font-family: 'Comic Sans MS', cursive;
    text-shadow: 1px 1px #fff;
}

.style-fun .category-filter button {
    background: #ffd700;
    color: #333;
    border-radius: 50px;
    font-family: 'Comic Sans MS', cursive;
}

.style-fun .category-filter button.active,
.style-fun .category-filter button:hover {
    background: #ff4500;
    color: #fff;
}

.style-fun .joke, .style-fun .meme {
    background: #fffacd;
    border: 3px dashed #ff6f61;
    font-family: 'Comic Sans MS', cursive;
}

.style-fun .ad-block {
    background: #fffacd;
    border: 3px dashed #ff6f61;
}

/* Estilos Admin */
.button-danger {
    background: #d63638;
    color: white;
    border: none;
}

.wp-list-table th {
    background: #f1f1f1;
}

.form-table th {
    width: 150px;
}

/* Mejoras para formularios */
.joke-menu-form .large-text {
    width: 100%;
    max-width: 500px;
}
.joke-menu-form .regular-text {
    width: 200px;
}
.joke-menu-form .description {
    color: #666;
    font-style: italic;
}