/* === MÓDULO: BASE Y LAYOUT === */

body {
    background-color: var(--smg-bg-primary);
}

.smg-modern-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 0 0 0 -20px;
    padding: 20px;
    background-color: var(--smg-bg-primary);
    transition: background-color 0.3s ease;
    min-height: calc(100vh - 32px);
}

.smg-spin {
    animation: smg-spin-anim 1s infinite linear;
}

@keyframes smg-spin-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Top Banner --- */
.smg-top-banner {
    background: var(--smg-dark-bg) !important; /* Solid dark blue color */
    border: none !important;
    box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.2) !important;
    border-radius: var(--smg-border-radius);
    padding: 15px 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.smg-top-banner-logo { display: flex; align-items: center; gap: 10px; }
.smg-top-banner-logo img { height: 35px; width: auto; }
.smg-top-banner .smg-top-banner-logo span { color: #FFFFFF !important; font-weight: 600; font-size: 18px; vertical-align: middle; }

/* This rule ensures all navigation items are vertically centered and spaced out */
.smg-top-banner-nav {
    display: flex;
    align-items: center;
    gap: 20px; /* Ensures consistent spacing */
}

.smg-top-banner-nav a { text-decoration: none; color: #cbd5e1 !important; font-weight: 500; transition: color 0.2s ease; }
.smg-top-banner-nav a:hover { color: #FFFFFF !important; }

.smg-top-banner-nav a.smg-kofi-button {
    background-color: #72A4F2 !important; 
    color: #ffffff !important; 
    padding: 6px 16px 6px 12px !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    border: none;
    box-shadow: 0 4px 15px -2px rgba(114, 164, 242, 0.4);
    transition: all 0.3s ease;
    display: inline-flex; 
    align-items: center;
    white-space: nowrap; /* Prevents the button text from wrapping */
}
.smg-top-banner-nav a.smg-kofi-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px -2px rgba(114, 164, 242, 0.6);
    filter: brightness(1.1);
}
.smg-top-banner-nav a.smg-kofi-button svg {
    height: 20px !important; /* Reduced logo size */
    width: auto !important;
    margin-right: 8px;
}

.smg-logo-link-wrapper { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; }
.smg-logo-link-wrapper:focus { box-shadow: none; }


/* --- Main Page Header --- */
.smg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background-color: var(--smg-header-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--smg-border-color);
}
.smg-header h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--smg-text-primary);
}
.smg-header-controls { display: flex; align-items: center; gap: 15px; }
.smg-header-transparent {
    background-color: transparent !important;
    border: none !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 20px !important;
}
.smg-header-transparent h1 { font-size: 28px; }

/* --- Theme Switcher (Sun/Moon) --- */
.smg-theme-switcher {
    background: transparent;
    border: 1px solid var(--smg-border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}
.smg-theme-switcher:hover {
    border-color: var(--smg-accent-fuchsia);
    background-color: var(--smg-bg-secondary);
}
.smg-theme-switcher img {
    width: 20px;
    height: 20px;
    transition: filter 0.3s ease;
}
.smg-dark-theme .smg-theme-switcher img {
    filter: invert(90%) brightness(150%);
}

/* --- Toolbar (Bulk actions and filters) --- */
.smg-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--smg-border-color);
    flex-wrap: wrap;
    gap: 15px;
}

#smg-cancel-bulk-action {
    margin-left: 10px;
}

.smg-modern-wrap > .smg-header + .notice { /* O selector más específico */
    clear: both; /* Asegura que baje */
    display: block;
    width: auto; /* O 100% si está dentro de un contenedor con padding */
    float: none;
    margin-top: 20px; /* Ajustar según sea necesario */
    margin-bottom: 20px; /* Ajustar según sea necesario */
    /* Quitar cualquier posicionamiento absoluto o relativo que lo haga flotar */
    position: relative; 
    top: auto;
    left: auto;
    box-sizing: border-box; /* Para que el padding no lo haga más ancho */
}


/* ========================================================================= */
/* FIX: WordPress Admin Notices Positioning inside SEO Magic pages         */
/* ========================================================================= */

/* Target common WP notice classes that are DIRECT children of our wrapper */
.smg-modern-wrap > .notice,
.smg-modern-wrap > .update-nag, 
.smg-modern-wrap > .error,
.smg-modern-wrap > .updated {
    /* --- INICIO DE LA MODIFICACIÓN --- */
    display: block !important;          /* Forzar a que sea un bloque */
    float: none !important;             /* Quitar cualquier float */
    clear: both !important;             /* Limpiar floats (por si acaso) */
    position: relative !important;      /* Quitar posicionamiento absoluto */
    width: 100% !important;             /* ¡LA CLAVE! Forzar ancho completo */
    max-width: 100% !important;         /* Asegurar que no se desborde */
    box-sizing: border-box !important;  /* Para que el padding no lo haga más ancho */
    margin: 20px 0 !important;          /* Forzar márgenes superior/inferior y resetear izq/der */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* --- FIN DE LA MODIFICACIÓN --- */
}

/* ==========================================================================
   INICIO: FIX MODO OSCURO (Global)
   ========================================================================== */

/* --- 1. Botones Secundarios (Azules en modo claro) --- */
.smg-dark-theme .button-secondary:not(.smg-filter-button),
.smg-dark-theme .button.button-secondary,
.smg-dark-theme .smg-ai-tools-buttons .button {
    background: transparent !important;
    border-color: var(--smg-text-secondary) !important; /* Borde gris claro */
    color: var(--smg-text-secondary) !important; /* Texto gris claro */
    box-shadow: none !important;
    opacity: 0.8;
}
.smg-dark-theme .button-secondary:not(.smg-filter-button):hover,
.smg-dark-theme .button.button-secondary:hover,
.smg-dark-theme .smg-ai-tools-buttons .button:hover {
    border-color: var(--smg-text-primary) !important; /* Borde blanco */
    color: var(--smg-text-primary) !important; /* Texto blanco */
    background: #2D3748 !important; /* Fondo de tarjeta oscuro */
    opacity: 1;
}

/* --- 2. Botones Primarios (Fucsia) --- */
/* (Estos ya deberían funcionar, pero nos aseguramos) */
.smg-dark-theme .button-primary,
.smg-dark-theme .smg-button-gradient {
    background: var(--smg-accent-fuchsia) !important;
    border-color: var(--smg-accent-fuchsia) !important;
    color: white !important;
    box-shadow: var(--smg-accent-shadow) !important;
}
.smg-dark-theme .button-primary:hover,
.smg-dark-theme .smg-button-gradient:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}


/* --- 3. Texto de la Tabla (Load an Existing Post) --- */
.smg-dark-theme #smg-posts-table-assistant th.sortable a {
    color: var(--smg-text-primary); /* Cabeceras de tabla */
}
.smg-dark-theme #smg-posts-table-body-assistant td {
    color: var(--smg-text-secondary); /* Texto (ej. 142 words) */
}
.smg-dark-theme #smg-posts-table-body-assistant td a {
    color: var(--smg-accent-blue-light); /* Enlaces (títulos) */
    font-weight: bold;
}
.smg-dark-theme #smg-posts-table-body-assistant td a:hover {
    color: var(--smg-accent-fuchsia);
}

/* --- 4. Botones "Load for Editing" (Fucsia) --- */
.smg-dark-theme #smg-posts-table-body-assistant .smg-load-post-for-editing {
    background-color: var(--smg-accent-fuchsia) !important;
    border-color: transparent !important;
    color: white !important;
    font-weight: bold !important;
    box-shadow: var(--smg-accent-shadow) !important;
}
.smg-dark-theme #smg-posts-table-body-assistant .smg-load-post-for-editing:hover {
    background-color: #ff4d75 !important;
    transform: translateY(-1px);
}

/* === FIN: FIX MODO OSCURO === */