/** 
 * styles.css
 * Tema oscuro developer para la aplicacion de generadores de codigo.
 * Autor: Fernando Tellado
 * @since 1.7.0
 */
/* Reset basico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables de color - Tema oscuro developer (por defecto) */
:root {
    --color-bg: #1e1e1e;
    --color-bg-secondary: #252526;
    --color-bg-tertiary: #2d2d30;
    --color-border: #3e3e42;
    --color-border-hover: #555555;
    --color-text: #cccccc;
    --color-text-secondary: #9d9d9d;
    --color-text-tertiary: #858585;
    --color-primary: #007acc;
    --color-primary-hover: #005a9e;
    --color-success: #4ec9b0;
    --color-code-bg: #1e1e1e;
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-hover: rgba(0, 0, 0, 0.5);
    --max-width: 1400px;
    --header-height: 70px;
    --font-mono: 'Courier New', Courier, monospace;
}

/* Variables de color - Tema claro */
[data-theme="light"] {
    --color-bg: #f5f5f5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e8e8e8;
    --color-border: #d0d0d0;
    --color-border-hover: #b0b0b0;
    --color-text: #1e1e1e;
    --color-text-secondary: #505050;
    --color-text-tertiary: #707070;
    --color-primary: #007acc;
    --color-primary-hover: #005a9e;
    --color-success: #16825d;
    --color-code-bg: #f8f8f8;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-hover: rgba(0, 0, 0, 0.2);
}

/* Ajustes especificos para tema claro */

[data-theme="light"] .output-code {
    background-color: #f8f8f8;
    border-color: #d0d0d0;
    color: #1e1e1e;
}

[data-theme="light"] .tab-button.active {
    background-color: var(--color-primary);
    color: #ffffff;
}

[data-theme="light"] .btn-primary {
    color: #ffffff;
}

[data-theme="light"] #download-child-theme-zip {
    color: #ffffff;
}

[data-theme="light"] .file-tab.active {
    color: #ffffff;
}

/* Tipografia base */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Contenedor principal */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.site-header {
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    box-shadow: 0 2px 8px var(--color-shadow);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.logo {
    margin-right: 32px;
}

.logo img {
    display: block;
    height: 50px;
    width: auto;
    filter: brightness(0) invert(1);
}

.header-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-nav a {
    text-decoration: none;
}

/* Contenido principal */
.main-content {
    padding: 40px 0;
    min-height: calc(100vh - var(--header-height) - 80px);
}

/* Seccion de introduccion */
.intro-section {
    margin-bottom: 40px;
}

.intro-section h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text);
}

.intro-text {
    font-size: 18px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.intro-examples {
    font-size: 15px;
    color: var(--color-text-tertiary);
    line-height: 1.7;
}

.intro-examples strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* Navegacion de pestanas */
.generators-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-button {
    padding: 8px 16px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-button:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-hover);
    box-shadow: 0 2px 4px var(--color-shadow);
}

.tab-button.active {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* Botones de navegacion del header */
.nav-button {
    padding: 8px 16px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-block;
}

.nav-button:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-hover);
    box-shadow: 0 2px 4px var(--color-shadow);
}

/* Contenedores de generadores */
.generator-container {
    display: none;
}

.generator-container.active {
    display: block;
}

.generator-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Seccion de formulario */
.form-section h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-primary);
}

.section-description {
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    font-size: 15px;
}

/* Formulario */
.generator-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
}

.form-group label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group input[type="search"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-mono);
}

.help-text {
    font-size: 13px;
    color: var(--color-text-tertiary);
    font-weight: 400;
}

/* Checkbox personalizado */
.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.checkbox-label span {
    font-weight: 400;
}

/* Secciones colapsables */
.collapsible-section {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-bg-secondary);
}

.collapsible-trigger {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--color-bg-tertiary);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    transition: background-color 0.2s ease;
}

.collapsible-trigger:hover {
    background-color: #3a3a3d;
}

.collapsible-trigger .arrow {
    transition: transform 0.2s ease;
    font-size: 12px;
    color: var(--color-primary);
}

.collapsible-section.open .collapsible-trigger .arrow {
    transform: rotate(-180deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-section.open .collapsible-content {
    max-height: 2000px;
    padding: 16px;
}

/* Botones */

.btn-primary,
.btn-secondary,
.btn-copy,
.btn-download {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--color-success);
    color: #1e1e1e;
    border-color: var(--color-success);
}

.btn-primary:hover {
    background-color: #3fb89d;
    box-shadow: 0 2px 8px rgba(78, 201, 176, 0.3);
}

.btn-secondary {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-hover);
}

.btn-copy,
.btn-download {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-border);
    padding: 8px 16px;
    font-size: 13px;
}

.btn-copy:hover,
.btn-download:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Seccion de salida */
.output-section {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    align-self: start;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.output-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

.output-actions {
    display: flex;
    gap: 8px;
}

.output-code {
    display: block;
    padding: 16px;
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: #d4d4d4;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 600px;
    overflow-y: auto;
    box-shadow: inset 0 2px 8px var(--color-shadow);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
    margin-top: 60px;
    text-align: center;
    background-color: var(--color-bg-secondary);
}

.site-footer p {
    color: var(--color-text-secondary);
    font-size: 14px;
}

.site-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

/* Responsive */
@media (max-width: 1024px) {
    .generator-content {
        grid-template-columns: 1fr;
    }

    .output-section {
        position: static;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .header-nav {
        gap: 6px;
    }

    .logo {
        margin-right: 12px;
    }

    .logo img {
        height: 40px;
    }

    .main-content {
        padding: 24px 0;
    }

    .intro-section h1 {
        font-size: 24px;
    }

    .intro-text {
        font-size: 16px;
    }

    .intro-examples {
        font-size: 14px;
    }

    .generators-nav {
        gap: 6px;
    }

    .tab-button {
        font-size: 13px;
        padding: 6px 12px;
    }

    .form-section h2 {
        font-size: 20px;
    }

    .output-section {
        margin-top: 24px;
    }
}

/* Animacion para copiar */
@keyframes copied {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.copied {
    animation: copied 0.3s ease;
}

/* Validador de robots.txt */
#robots-validator-input {
    background: var(--color-bg-primary) !important;
    color: var(--color-text) !important;
}

/* Estilos para el validador */
.validation-error {
    background: #bcbcbc;
    border-left: 4px solid #e74c3c;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    color: #333;
}

.validation-warning {
    background: #bcbcbc;
    border-left: 4px solid #f39c12;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    color: #333;
}

.validation-success {
    background: #bcbcbc;
    border-left: 4px solid #27ae60;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    color: #333;
}

.validation-info {
    background: #bcbcbc;
    border-left: 4px solid #3498db;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    color: #333;
}

.validation-error ul,
.validation-warning ul,
.validation-info ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.validation-error code,
.validation-warning code,
.validation-info code {
    background: rgba(0,0,0,0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.validation-summary {
    margin-top: 20px;
    padding: 12px;
    background: var(--color-bg-tertiary);
    border-radius: 6px;
    color: var(--color-text);
}

/* Estilos para el generador de Child Themes */
.file-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 12px;
}

.file-tab {
    padding: 8px 16px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px 6px 0 0;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-mono);
}

.file-tab:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border-hover);
}

.file-tab.active {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* Botón de descarga ZIP destacado */
#download-child-theme-zip {
    background-color: var(--color-success);
    color: #1e1e1e;
    border-color: var(--color-success);
    font-weight: 600;
}

#download-child-theme-zip:hover:not(:disabled) {
    background-color: #3fb89d;
    box-shadow: 0 2px 8px rgba(78, 201, 176, 0.3);
}

#download-child-theme-zip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toggle de tema claro/oscuro */
#theme-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* En modo oscuro (por defecto): mostrar icono sol, ocultar luna */
.theme-toggle-dark {
    display: inline;
}

.theme-toggle-light {
    display: none;
}

/* En modo claro: mostrar luna, ocultar sol */
[data-theme="light"] .theme-toggle-dark {
    display: none;
}

[data-theme="light"] .theme-toggle-light {
    display: inline;
}

/* Logos para tema claro/oscuro */
.logo img.logo-dark {
    display: block;
}

.logo img.logo-light {
    display: none;
    filter: none;
}

[data-theme="light"] .logo img.logo-dark {
    display: none;
}

[data-theme="light"] .logo img.logo-light {
    display: block;
}

/* ==========================================================================
   ESTILOS ACTUALIZADOS PARA SECURITY HEADERS
   Añadir/reemplazar en styles.css
   ========================================================================== */

/* Tabs de modo para security headers - sin iconos, más compactos */
.security-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 12px;
}

/* Estilos específicos para los tabs de modo - evita conflicto con .tab-button global */
.security-mode-tab {
    padding: 10px 20px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    transition: all 0.2s ease;
}

.security-mode-tab:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}

.security-mode-tab.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

[data-theme="light"] .security-mode-tab {
    color: var(--color-text);
}

[data-theme="light"] .security-mode-tab.active {
    color: #ffffff;
}

/* Grid de presets - más compacto sin iconos */
.preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

/* Botones de preset - versión sin iconos, más pequeños */
.preset-button {
    padding: 12px 16px;
    background-color: var(--color-bg-secondary);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

.preset-button:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-tertiary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--color-shadow);
}

.preset-button.active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #ffffff !important;
}

/* Asegurar que el texto sea visible en ambos temas */
[data-theme="light"] .preset-button {
    color: var(--color-text);
}

[data-theme="light"] .preset-button.active {
    color: #ffffff !important;
}

/* Nombre del preset - sin icono */
.preset-name {
    font-size: 13px;
    line-height: 1.3;
    color: inherit;
}

/* Info del preset seleccionado - sin iconos en título */
.preset-info {
    background-color: var(--color-bg-tertiary);
    border-left: 4px solid var(--color-primary);
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 24px;
}

.preset-info h4 {
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--color-primary);
}

.preset-info p {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--color-text-secondary);
}

/* Warnings del preset - sin emoji, usando viñeta simple */
.preset-warnings {
    list-style: none;
    padding: 0;
}

.preset-warnings li {
    font-size: 13px;
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    color: var(--color-text-secondary);
}

.preset-warnings li:before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--color-primary);
    font-weight: bold;
}

/* Análisis de seguridad - badges sin emojis */
.security-grade {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

.grade-a-plus { background-color: #27ae60; color: white; }
.grade-a { background-color: #2ecc71; color: white; }
.grade-b { background-color: #3498db; color: white; }
.grade-c { background-color: #f39c12; color: white; }
.grade-d { background-color: #e67e22; color: white; }
.grade-e { background-color: #e74c3c; color: white; }
.grade-f { background-color: #c0392b; color: white; }

.header-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    margin-bottom: 8px;
    background-color: var(--color-bg-secondary);
    border-radius: 6px;
    border-left: 4px solid transparent;
}

.header-status.present {
    border-left-color: #27ae60;
}

.header-status.missing {
    border-left-color: #e74c3c;
}

.header-status.suboptimal {
    border-left-color: #f39c12;
}

.header-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
}

.header-badge {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.badge-present {
    background-color: #27ae60;
    color: white;
}

.badge-missing {
    background-color: #e74c3c;
    color: white;
}

.badge-suboptimal {
    background-color: #f39c12;
    color: white;
}

.header-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Responsive para presets - ajustado para versión sin iconos */
@media (max-width: 768px) {
    .preset-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }
    
    .preset-button {
        padding: 10px 12px;
    }
    
    .preset-name {
        font-size: 12px;
    }
    
    .security-mode-tabs {
        flex-direction: column;
    }
}

/* Eliminar reglas de iconos que ya no se usan */
.preset-icon {
    display: none;
}

/* ==============================================
   ESTILOS PARA EL OPTIMIZADOR DE PROMPTS v2
   Añadir al final de styles.css
   ============================================== */

/* Filas de formulario en tercios */
.form-row-thirds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .form-row-thirds {
        grid-template-columns: 1fr;
    }
}

/* ========== ANÁLISIS DEL PROMPT ========== */
.prompt-analysis {
    margin-top: 12px;
    padding: 0;
    border-radius: 6px;
    font-size: 13px;
}

.prompt-analysis:empty {
    display: none;
}

.analysis-score {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.score-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.score-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.score-label {
    font-weight: 500;
    color: var(--color-text);
}

.score-points {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* Colores de puntuación */
.grade-a {
    background-color: rgba(78, 201, 176, 0.15);
}
.grade-a .score-grade {
    background-color: #4ec9b0;
    color: #1e1e1e;
}

.grade-b {
    background-color: rgba(78, 201, 176, 0.1);
}
.grade-b .score-grade {
    background-color: #7dd3c0;
    color: #1e1e1e;
}

.grade-c {
    background-color: rgba(255, 193, 7, 0.15);
}
.grade-c .score-grade {
    background-color: #ffc107;
    color: #1e1e1e;
}

.grade-d {
    background-color: rgba(255, 152, 0, 0.15);
}
.grade-d .score-grade {
    background-color: #ff9800;
    color: #1e1e1e;
}

.grade-f {
    background-color: rgba(244, 67, 54, 0.15);
}
.grade-f .score-grade {
    background-color: #f44336;
    color: #ffffff;
}

/* Secciones de análisis */
.analysis-good,
.analysis-issues,
.analysis-suggestions {
    margin-bottom: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    background-color: var(--color-bg-tertiary);
}

.analysis-good {
    border-left: 3px solid #4ec9b0;
}

.analysis-issues {
    border-left: 3px solid #ff9800;
}

.analysis-suggestions {
    border-left: 3px solid #ffc107;
}

.analysis-good strong,
.analysis-issues strong,
.analysis-suggestions strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
}

.analysis-good ul,
.analysis-issues ul,
.analysis-suggestions ul {
    margin: 0;
    padding-left: 18px;
}

.analysis-good li,
.analysis-issues li,
.analysis-suggestions li {
    margin-bottom: 4px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.analysis-good li {
    color: #4ec9b0;
}

.analysis-ok {
    padding: 10px 14px;
    border-radius: 6px;
    background-color: rgba(78, 201, 176, 0.1);
    border-left: 3px solid #4ec9b0;
    color: var(--color-text-secondary);
}

/* ========== SECCIÓN DE EJEMPLOS ========== */
.examples-section {
    display: none;
    margin-bottom: 24px;
    padding: 20px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.examples-section.visible {
    display: block;
}

.examples-section h3 {
    margin-bottom: 16px;
    font-size: 16px;
    color: var(--color-primary);
}

.example-card {
    margin-bottom: 20px;
    padding: 16px;
    background-color: var(--color-bg-tertiary);
    border-radius: 6px;
}

.example-card:last-child {
    margin-bottom: 0;
}

.example-card h4 {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--color-text);
}

.example-comparison {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .example-comparison {
        grid-template-columns: 1fr;
    }
}

.example-before,
.example-after {
    padding: 12px;
    border-radius: 4px;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
}

.example-before strong,
.example-after strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.example-before p,
.example-after p {
    margin: 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.example-after pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--color-text-secondary);
}

/* ========== PRESETS DE RESTRICCIONES ========== */
.restriction-presets {
    padding: 16px;
    background-color: var(--color-bg-tertiary);
    border-radius: 6px;
    margin-bottom: 16px;
}

.restriction-presets h4 {
    margin-bottom: 12px;
}

.restriction-presets .checkbox-label {
    margin-bottom: 8px;
}

/* ========== HISTORIAL ========== */
.history-list {
    max-height: 300px;
    overflow-y: auto;
}

.history-item {
    padding: 12px;
    margin-bottom: 8px;
    background-color: var(--color-bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.history-item:last-child {
    margin-bottom: 0;
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.history-date {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.btn-load-history {
    padding: 4px 10px;
    font-size: 12px;
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-load-history:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.history-preview {
    font-size: 13px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== HELP TEXT PARA CHECKBOXES ========== */
.checkbox-help {
    display: block;
    margin-left: 28px;
    margin-top: -6px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.4;
}

/* ========== AJUSTES TEMA CLARO ========== */
[data-theme="light"] .analysis-good {
    background-color: rgba(22, 130, 93, 0.08);
}

[data-theme="light"] .analysis-issues {
    background-color: rgba(255, 152, 0, 0.08);
}

[data-theme="light"] .analysis-suggestions {
    background-color: rgba(255, 193, 7, 0.1);
}

[data-theme="light"] .analysis-ok {
    background-color: rgba(22, 130, 93, 0.08);
}

[data-theme="light"] .grade-a {
    background-color: rgba(22, 130, 93, 0.12);
}

[data-theme="light"] .grade-b {
    background-color: rgba(22, 130, 93, 0.08);
}

[data-theme="light"] .grade-a .score-grade,
[data-theme="light"] .grade-b .score-grade {
    background-color: #16825d;
    color: #ffffff;
}

[data-theme="light"] .example-before {
    background-color: rgba(244, 67, 54, 0.05);
}

[data-theme="light"] .example-after {
    background-color: rgba(22, 130, 93, 0.05);
}

[data-theme="light"] .restriction-presets {
    background-color: var(--color-bg-tertiary);
}

[data-theme="light"] .history-item {
    background-color: var(--color-bg-tertiary);
}

/* ========== FIX HOVER COLLAPSIBLE (GLOBAL) ========== */
[data-theme="light"] .collapsible-trigger:hover {
    background-color: #d0d0d0;
}

/**
 * Estilos adicionales para el generador de Lorem Ipsum ES
 */

/* Grid de checkboxes para elementos opcionales */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.checkbox-grid .checkbox-label {
    margin: 0;
}

/* Estilos para las filas de formulario */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Ajustes para el output del Lorem Ipsum */
#output-lorem-ipsum,
#output-fictional-data {
    min-height: 200px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Estilo para el preset aplicado */
#btn-wordpress-preset:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Separador entre generadores */
.generator-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 48px 0;
    position: relative;
}

.generator-separator::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
    margin: 0 auto;
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
}

/* Homenaje Chiquito */
.tribute-box {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px dashed #444;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #777;
}

.tribute-box p {
    margin: 0;
    line-height: 1.5;
}

.tribute-box strong {
    color: #999;
}

.tribute-box em {
    color: #888;
    font-style: italic;
}

/* Responsive para el generador de datos ficticios */
@media (max-width: 768px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .generator-separator {
        margin: 32px 0;
    }
}

/* ============================================
   OPTIMIZADOR DE IMAGENES
   Anadir al final de styles.css
   ============================================ */

/* Zona de arrastrar y soltar */
.image-drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-bg-secondary);
}

.image-drop-zone:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-tertiary);
}

.image-drop-zone.drag-over {
    border-color: var(--color-primary);
    background-color: var(--color-bg-tertiary);
    transform: scale(1.01);
}

.image-drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.image-drop-zone-content svg {
    color: var(--color-text-secondary);
}

.image-drop-zone-content p {
    font-size: 16px;
    color: var(--color-text);
    margin: 0;
}

.image-drop-zone-info {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.image-drop-zone-warning {
    font-size: 12px;
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Contador de archivos */
.image-file-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    margin-top: 16px;
    margin-bottom: 8px;
}

/* Lista de archivos */
.image-file-list {
    margin-top: 8px;
}

.image-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--color-bg-tertiary);
    border-radius: 4px;
    font-size: 13px;
}

.image-list-item-info {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.image-list-item-name {
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-list-item-size {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.image-list-item-remove {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s ease;
}

.image-list-item-remove:hover {
    color: #e74c3c;
}

/* Sugerencias automaticas */
.image-suggestions {
    margin-top: 16px;
}

.image-suggestion {
    padding: 12px 16px;
    background-color: rgba(0, 122, 204, 0.1);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.image-suggestion strong {
    color: var(--color-primary);
}

/* Mensaje de error */
.image-error-message {
    padding: 12px 16px;
    background-color: rgba(231, 76, 60, 0.1);
    border-left: 3px solid #e74c3c;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #e74c3c;
    margin-bottom: 16px;
}

/* Aviso de formato */
.format-warning {
    padding: 10px 14px;
    background-color: rgba(241, 196, 15, 0.1);
    border-left: 3px solid #f1c40f;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 12px;
}

.format-warning a {
    color: var(--color-primary);
}

/* Botones de accion */
.image-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Barra de progreso */
.image-progress-container {
    margin-top: 20px;
}

.image-progress-bar-wrapper {
    height: 8px;
    background-color: var(--color-bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.image-progress-bar {
    height: 100%;
    background-color: var(--color-primary);
    width: 0;
    transition: width 0.3s ease;
}

.image-progress-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 8px;
    text-align: center;
}

/* Estadisticas totales */
.image-total-stats {
    padding: 12px 16px;
    background-color: var(--color-bg-tertiary);
    border-radius: 6px;
    margin-bottom: 16px;
}

.image-total-stats-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.image-total-saved {
    color: var(--color-success);
    font-weight: 500;
}

/* Lista de resultados */
.image-results-list {
    margin-top: 8px;
}

.image-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--color-bg-tertiary);
    border-radius: 6px;
    gap: 12px;
    flex-wrap: wrap;
}

.image-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
}

.image-result-name {
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
}

.image-result-dims {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.image-result-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.image-result-size {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.image-result-saved {
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.image-result-saved.positive {
    color: var(--color-success);
    background-color: rgba(78, 201, 176, 0.1);
}

.image-result-saved.negative {
    color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.1);
}

.image-result-actions {
    display: flex;
    gap: 8px;
}

.btn-preview-image,
.btn-download-single {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-preview-image:hover,
.btn-download-single:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-bg-secondary);
}

/* Comparador visual */
.image-comparison-container {
    margin-top: 24px;
    padding: 20px;
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.image-comparison-container h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: var(--color-text);
}

.image-comparison-wrapper {
    position: relative;
    margin-top: 16px;
}

.image-comparison-images {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--color-bg-tertiary);
}

.image-comparison-images .comparison-image {
    display: block;
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    margin: 0 auto;
}

.image-comparison-images #comparison-original {
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 50% 0 0);
}

.comparison-slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background-color: #fff;
    pointer-events: none;
    z-index: 10;
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.comparison-slider {
    width: 100%;
    margin-top: 12px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
    outline: none;
}

.comparison-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
}

.comparison-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.image-comparison-info {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: 12px;
}

.comparison-info-item {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.comparison-info-item strong {
    color: var(--color-text);
}

.comparison-saved {
    color: var(--color-success);
    font-weight: 500;
}

/* Separacion entre secciones colapsables */
#generator-imagenes .collapsible-section {
    margin-top: 24px;
}

/* Ajustes de espaciado */
#generator-imagenes .image-file-list {
    margin-top: 4px;
    margin-bottom: 24px;
}

#generator-imagenes .image-file-count {
    margin-top: 12px;
    margin-bottom: 4px;
}

#generator-imagenes .image-file-count:empty {
    margin: 0;
}

#generator-imagenes .image-file-list .help-text {
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .image-drop-zone {
        padding: 30px 15px;
    }
    
    .image-result-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .image-result-stats {
        width: 100%;
        justify-content: space-between;
    }
    
    .image-result-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .image-total-stats-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .image-comparison-info {
        flex-direction: column;
    }
    
    .image-actions {
        flex-direction: column;
    }
    
    .image-actions button {
        width: 100%;
    }
}
/* ==============================================
   ESTILOS PARA LIMITES DE RASTREO (crawl-limit)
   ============================================== */

/* Anular el grid de dos columnas del resto de generadores */
#generator-crawl-limit .generator-content {
    display: block;
}

/* Formulario inline: input + boton */
.crawl-form-inline {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.crawl-form-inline .form-group {
    flex: 1;
    margin-bottom: 0;
}

.crawl-form-inline .btn-primary {
    flex-shrink: 0;
    height: 42px;
    white-space: nowrap;
}

/* Estado de carga */
.crawl-loading {
    text-align: center;
    padding: 24px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Spinner de carga */
.crawl-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: crawl-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 10px;
}

@keyframes crawl-spin {
    to { transform: rotate(360deg); }
}

/* Notas y textos auxiliares */
.crawl-empty-note {
    color: var(--color-text-secondary);
    font-size: 14px;
}

.crawl-footnote {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 8px;
}

/* =============================================
   Desplegable de referencia
   ============================================= */

.crawl-reference {
    margin: 20px 0 28px;
}

.crawl-reference-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s;
    text-align: left;
    font-family: inherit;
}

.crawl-reference-toggle:hover {
    background-color: var(--color-bg-tertiary);
}

.crawl-toggle-icon {
    font-size: 10px;
}

.crawl-reference-content {
    display: none;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background-color: var(--color-bg-secondary);
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.crawl-reference-content p {
    margin-bottom: 12px;
}

.crawl-reference-content strong {
    color: var(--color-text);
}

.crawl-reference-content a {
    color: var(--color-primary);
}

.crawl-reference-content a:hover {
    text-decoration: underline;
}

.crawl-ref-links {
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
    margin-top: 14px;
}

.crawl-ref-links p {
    margin-bottom: 4px;
}

/* =============================================
   Banner resumen superior
   ============================================= */

.crawl-banner {
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
}

.crawl-banner.crawl-ok {
    background-color: rgba(39, 174, 96, 0.08);
    border-color: rgba(39, 174, 96, 0.3);
}

.crawl-banner.crawl-warning {
    background-color: rgba(243, 156, 18, 0.08);
    border-color: rgba(243, 156, 18, 0.3);
}

.crawl-banner.crawl-danger {
    background-color: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.3);
}

.crawl-banner-verdict {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.crawl-banner-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.crawl-banner.crawl-ok .crawl-banner-icon { color: #27ae60; }
.crawl-banner.crawl-warning .crawl-banner-icon { color: #f39c12; }
.crawl-banner.crawl-danger .crawl-banner-icon { color: #e74c3c; }

.crawl-banner-text strong {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--color-text);
}

.crawl-banner-text p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.crawl-banner-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}

.crawl-kpi {
    text-align: center;
}

.crawl-kpi-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    font-family: var(--font-mono);
    margin-bottom: 2px;
}

.crawl-kpi-label {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =============================================
   Secciones accordion
   ============================================= */

.crawl-accordion {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: var(--color-bg-secondary);
}

.crawl-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 0.15s;
    gap: 12px;
}

.crawl-accordion-header:hover {
    background-color: var(--color-bg-tertiary);
}

.crawl-accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.crawl-accordion-arrow {
    font-size: 10px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.crawl-accordion-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.crawl-accordion-summary {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crawl-accordion-body {
    padding: 18px;
    border-top: 1px solid var(--color-border);
}

/* Badge de estado en accordion headers */
.crawl-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.crawl-status-badge.crawl-ok {
    background-color: rgba(39, 174, 96, 0.12);
    color: #27ae60;
}

.crawl-status-badge.crawl-warning {
    background-color: rgba(243, 156, 18, 0.12);
    color: #c47f00;
}

.crawl-status-badge.crawl-danger {
    background-color: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}

/* =============================================
   Estadistica principal (barra HTML)
   ============================================= */

.crawl-main-stat {
    background-color: var(--color-bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--color-border);
}

.crawl-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.crawl-stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.crawl-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-mono);
}

.crawl-stat-value-lg {
    font-size: 20px;
}

.crawl-stat-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* =============================================
   Barras de progreso
   ============================================= */

.crawl-bar {
    width: 100%;
    height: 10px;
    background-color: var(--color-bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.crawl-bar-large { height: 14px; border-radius: 7px; }
.crawl-bar-small { height: 6px; border-radius: 3px; margin-top: 6px; }

.crawl-bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.4s ease;
}

.crawl-bar-fill.crawl-ok { background-color: #27ae60; }
.crawl-bar-fill.crawl-warning { background-color: #f39c12; }
.crawl-bar-fill.crawl-danger { background-color: #e74c3c; }

.crawl-bar-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background-color: var(--color-text-secondary);
    transform: translateX(-1px);
}

/* Desglose inline */
.crawl-inline-detail {
    margin-top: 12px;
    padding: 10px 16px;
    background-color: var(--color-bg-tertiary);
    border-radius: 6px;
    font-size: 13px;
}

.crawl-inline-title {
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.crawl-inline-item {
    display: inline-block;
    margin-right: 20px;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 13px;
}

/* =============================================
   Nota de columna (usada dentro de accordion)
   ============================================= */

.crawl-column-note {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 12px 0 16px;
    line-height: 1.5;
}

/* =============================================
   Tarjetas de totales
   ============================================= */

.crawl-totals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

.crawl-totals-grid-four {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 16px;
}

.crawl-total-card {
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crawl-total-card-compact { padding: 10px 14px; }

.crawl-total-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.crawl-total-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-mono);
}

.crawl-total-value-sm {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-mono);
}

/* =============================================
   Lista de recursos individuales
   ============================================= */

.crawl-resources-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crawl-resource-item {
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 14px;
}

.crawl-resource-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.crawl-resource-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    flex-shrink: 0;
}

.crawl-type-css { background-color: #3498db; color: #fff; }
.crawl-type-js { background-color: #f39c12; color: #1e1e1e; }
.crawl-type-image { background-color: #27ae60; color: #fff; }
.crawl-type-video { background-color: #9b59b6; color: #fff; }

.crawl-resource-name {
    font-size: 13px;
    color: var(--color-text);
    font-family: var(--font-mono);
    word-break: break-all;
}

.crawl-resource-size {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-top: 4px;
}

.crawl-resource-size span:first-child {
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-mono);
}

.crawl-resource-pct {
    color: var(--color-text-secondary);
    font-size: 12px;
}

/* Badges de estado */
.crawl-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.crawl-badge-danger { background-color: #e74c3c; color: #fff; }
.crawl-badge-warning { background-color: #f39c12; color: #1e1e1e; }

/* Peso total */
.crawl-total-page {
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

/* Caja informativa */
.crawl-info-box {
    background-color: var(--color-bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid var(--color-primary);
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-top: 16px;
}

.crawl-info-box a { color: var(--color-primary); }
.crawl-info-box a:hover { text-decoration: underline; }

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 900px) {
    .crawl-banner-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .crawl-totals-grid-four {
        grid-template-columns: 1fr 1fr;
    }

    .crawl-accordion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .crawl-accordion-summary {
        text-align: left;
        padding-left: 24px;
    }
}

@media (max-width: 600px) {
    .crawl-form-inline {
        flex-direction: column;
    }

    .crawl-form-inline .btn-primary {
        width: 100%;
    }

    .crawl-banner {
        padding: 16px;
    }

    .crawl-banner-kpis {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .crawl-kpi-value {
        font-size: 15px;
    }

    .crawl-totals-grid {
        grid-template-columns: 1fr;
    }

    .crawl-totals-grid-four {
        grid-template-columns: 1fr 1fr;
    }

    .crawl-stat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .crawl-resource-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .crawl-resource-size {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .crawl-inline-item {
        display: block;
        margin-right: 0;
        margin-bottom: 4px;
    }

    .crawl-accordion-body {
        padding: 14px;
    }
}

/* ==============================================
   ESTILOS PARA ANALIZADOR DE VISIBILIDAD IA
   ============================================== */

/* Full-width layout like crawl-limit */
#generator-ai-visibility .generator-content {
    display: block;
}

/* Reference panel (same pattern as crawl-limit) */
.aiv-reference {
    margin: 20px 0 28px;
}

.aiv-reference-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s;
    text-align: left;
    font-family: inherit;
}

.aiv-reference-toggle:hover {
    background-color: var(--color-bg-tertiary);
}

.aiv-toggle-icon {
    font-size: 10px;
}

.aiv-reference-content {
    display: none;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background-color: var(--color-bg-secondary);
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.aiv-reference-content p {
    margin-bottom: 12px;
}

.aiv-reference-content strong {
    color: var(--color-text);
}

.aiv-reference-content a {
    color: var(--color-primary);
}

.aiv-reference-content a:hover {
    text-decoration: underline;
}

.aiv-ref-links {
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
    margin-top: 14px;
}

.aiv-ref-links p {
    margin-bottom: 6px;
}

/* Loading state */
.aiv-loading {
    text-align: center;
    padding: 24px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.aiv-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: aiv-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 10px;
}

@keyframes aiv-spin {
    to { transform: rotate(360deg); }
}

/* =============================================
   Banner (same structure as crawl-limit)
   ============================================= */

.aiv-banner {
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}

.aiv-banner.aiv-ok {
    background: linear-gradient(135deg, rgba(78, 201, 176, 0.12), rgba(78, 201, 176, 0.04));
    border: 1px solid rgba(78, 201, 176, 0.3);
}

.aiv-banner.aiv-warning {
    background: linear-gradient(135deg, rgba(240, 173, 78, 0.12), rgba(240, 173, 78, 0.04));
    border: 1px solid rgba(240, 173, 78, 0.3);
}

.aiv-banner.aiv-danger {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.12), rgba(231, 76, 60, 0.04));
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.aiv-banner-verdict {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.aiv-banner-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiv-ok .aiv-banner-icon { color: #4ec9b0; }
.aiv-warning .aiv-banner-icon { color: #f0ad4e; }
.aiv-danger .aiv-banner-icon { color: #e74c3c; }

.aiv-banner-text strong {
    font-size: 16px;
    color: var(--color-text);
    display: block;
    margin-bottom: 6px;
}

.aiv-banner-text p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.aiv-banner-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.aiv-kpi {
    text-align: center;
}

.aiv-kpi-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.aiv-kpi-value small {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.aiv-kpi-label {
    display: block;
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 4px;
}

/* Grade display in KPI */
.aiv-grade-display {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.aiv-grade-display.grade-a-plus,
.aiv-grade-display.grade-a {
    background-color: rgba(78, 201, 176, 0.2);
    color: #4ec9b0;
}

.aiv-grade-display.grade-b {
    background-color: rgba(240, 173, 78, 0.2);
    color: #d4a24c;
}

.aiv-grade-display.grade-c {
    background-color: rgba(240, 173, 78, 0.2);
    color: #f0ad4e;
}

.aiv-grade-display.grade-d {
    background-color: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.aiv-grade-display.grade-e,
.aiv-grade-display.grade-f {
    background-color: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

/* =============================================
   Accordions (same pattern as crawl-limit)
   ============================================= */

.aiv-accordion {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.aiv-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 18px;
    background: var(--color-bg-secondary);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text);
    transition: background-color 0.15s;
}

.aiv-accordion-header:hover {
    background-color: var(--color-bg-tertiary);
}

.aiv-accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.aiv-accordion-arrow {
    font-size: 10px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.aiv-accordion-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aiv-accordion-summary {
    font-size: 13px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    margin-left: 16px;
}

.aiv-accordion-body {
    padding: 18px;
    border-top: 1px solid var(--color-border);
}

/* Status badges */
.aiv-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.aiv-status-badge.aiv-ok {
    background-color: rgba(78, 201, 176, 0.15);
    color: #4ec9b0;
}

.aiv-status-badge.aiv-warning {
    background-color: rgba(240, 173, 78, 0.15);
    color: #f0ad4e;
}

.aiv-status-badge.aiv-danger {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* =============================================
   Individual checks
   ============================================= */

.aiv-check {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.aiv-check:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.aiv-check:first-child {
    padding-top: 0;
}

.aiv-check-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aiv-check-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.aiv-check-label {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text);
}

.aiv-check-points {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.aiv-check-pass .aiv-check-points {
    background-color: rgba(78, 201, 176, 0.12);
    color: #4ec9b0;
}

.aiv-check-detail {
    margin-top: 6px;
    margin-left: 26px;
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Recommendations */
.aiv-recommendation {
    margin-top: 8px;
    margin-left: 26px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--color-primary);
    line-height: 1.5;
}

.aiv-recommendation a {
    color: var(--color-primary);
    font-weight: 500;
}

.aiv-recommendation a:hover {
    text-decoration: underline;
}

/* =============================================
   Recommendations summary block
   ============================================= */

.aiv-recommendations {
    margin-top: 24px;
    padding: 20px;
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.aiv-recommendations h4 {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--color-primary);
}

.aiv-plugin-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.aiv-plugin-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}

.aiv-plugin-link:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* =============================================
   Light theme adjustments
   ============================================= */

[data-theme="light"] .aiv-banner.aiv-ok {
    background: linear-gradient(135deg, rgba(22, 130, 93, 0.08), rgba(22, 130, 93, 0.02));
    border-color: rgba(22, 130, 93, 0.25);
}

[data-theme="light"] .aiv-ok .aiv-banner-icon { color: #16825d; }

[data-theme="light"] .aiv-status-badge.aiv-ok {
    background-color: rgba(22, 130, 93, 0.12);
    color: #16825d;
}

[data-theme="light"] .aiv-grade-display.grade-a-plus,
[data-theme="light"] .aiv-grade-display.grade-a {
    background-color: rgba(22, 130, 93, 0.15);
    color: #16825d;
}

[data-theme="light"] .aiv-grade-display.grade-b {
    background-color: rgba(180, 130, 30, 0.15);
    color: #8a6d1b;
}

[data-theme="light"] .aiv-check-pass .aiv-check-points {
    background-color: rgba(22, 130, 93, 0.1);
    color: #16825d;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 640px) {
    .aiv-banner-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .aiv-accordion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .aiv-accordion-summary {
        margin-left: 0;
    }

    .aiv-check-header {
        flex-wrap: wrap;
    }

    .aiv-plugin-list {
        flex-direction: column;
    }

    .aiv-plugin-link {
        justify-content: center;
    }
}