/* Greenwashing Audit Toolkit — ported from wordpress-plugin/greenwashing-audit.php (ga_enqueue_assets)
   Client-side rewrite: analyzes pasted HTML/text instead of fetching a URL server-side. */

#gw-app {
    max-width: 920px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: #1f2937;
    line-height: 1.6;
}

/* ---- FORM ---- */
#gw-app .ga-form-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
#gw-app .ga-form-section h3 { margin: 0 0 6px; font-size: 22px; color: #111827; }
#gw-app .ga-subtitle { color: #6b7280; margin: 0 0 24px; font-size: 14px; }
#gw-app .ga-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
#gw-app .ga-full-width { grid-column: 1 / -1; }
#gw-app .ga-form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #374151; font-size: 14px; }
#gw-app .ga-required { color: #c0392b; }
#gw-app .ga-input {
    width: 100%; padding: 11px 14px; border: 1px solid #d1d5db;
    border-radius: 8px; font-size: 15px; box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s; background: #fff;
    font-family: inherit;
}
#gw-app .ga-input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
#gw-app .ga-btn-primary {
    background: #0a6f4d; color: #fff; border: none;
    padding: 13px 32px; border-radius: 8px; font-size: 16px; font-weight: 600;
    cursor: pointer; transition: background .2s, transform .15s;
}
#gw-app .ga-btn-primary:hover { background: #085c40; transform: translateY(-1px); }
#gw-app .ga-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
#gw-app .ga-disclaimer-form { font-size: 12px; color: #6b7280; margin: 14px 0 0; }

/* ---- CODE TAGS ---- */
#gw-app code, #gw-app pre {
    background: #1e293b; color: #e2e8f0; padding: 2px 7px; border-radius: 5px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px; line-height: 1.6; word-break: break-all;
}

/* ---- ISSUE CTA ---- */
#gw-app .ga-issue-cta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.06);
}
#gw-app .ga-issue-cta-label { font-size: 12px; color: #6b7280; font-weight: 600; white-space: nowrap; }
#gw-app .ga-issue-cta-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: #f0fdf4; color: #065f46; border: 1px solid #bbf7d0;
    text-decoration: none; transition: all .2s; white-space: nowrap;
}
#gw-app .ga-issue-cta-link:hover { background: #065f46; color: #fff; border-color: #065f46; text-decoration: none; }

/* ---- ECOSYSTEM PANEL ---- */
#gw-app .ga-ecosystem-panel {
    margin-top: 32px; border-radius: 14px; overflow: hidden;
    border: 2px solid #d1fae5;
    box-shadow: 0 4px 16px rgba(16,185,129,.1);
}
#gw-app .ga-ecosystem-header { background: linear-gradient(135deg, #064e3b, #065f46); padding: 20px 24px; }
#gw-app .ga-ecosystem-header h4 { margin: 0 0 6px; font-size: 17px; color: #fff; }
#gw-app .ga-ecosystem-header p  { margin: 0; font-size: 13px; color: #a7f3d0; line-height: 1.5; }
#gw-app .ga-ecosystem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #d1fae5; }
#gw-app .ga-eco-card {
    display: flex; flex-direction: column; gap: 5px;
    padding: 18px 20px; background: #fff;
    text-decoration: none; transition: background .2s; position: relative;
}
#gw-app .ga-eco-card:hover { background: #f0fdf4; text-decoration: none; }
#gw-app .ga-eco-card-top { background: #f0fdf4; }
#gw-app .ga-eco-badge-top {
    display: inline-block; align-self: flex-start; background: #10b981; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    padding: 2px 8px; border-radius: 10px; margin-bottom: 4px; text-transform: uppercase;
}
#gw-app .ga-eco-emoji { font-size: 24px; line-height: 1; }
#gw-app .ga-eco-name  { font-size: 14px; font-weight: 700; color: #064e3b; line-height: 1.3; }
#gw-app .ga-eco-desc  { font-size: 12px; color: #6b7280; line-height: 1.5; }
#gw-app .ga-eco-relevance {
    font-size: 11px; color: #065f46; font-weight: 600;
    background: #d1fae5; padding: 2px 8px; border-radius: 10px; align-self: flex-start;
}
#gw-app .ga-eco-cta { font-size: 12px; font-weight: 700; color: #10b981; margin-top: 4px; }
#gw-app .ga-eco-card:hover .ga-eco-cta { color: #064e3b; }

/* ---- FALSE POSITIVE ---- */
#gw-app .ga-fp-btn {
    margin-left: auto; padding: 3px 10px; border-radius: 6px;
    border: 1px solid #d1d5db; background: #f9fafb; color: #6b7280;
    font-size: 11px; font-weight: 500; cursor: pointer; transition: all .2s;
    white-space: nowrap; line-height: 1.4;
}
#gw-app .ga-fp-btn:hover { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
#gw-app .ga-issue.ga-fp-active {
    opacity: .45; border-left-color: #9ca3af !important;
    background: #f9fafb !important; position: relative;
}
#gw-app .ga-issue.ga-fp-active::after {
    content: "Excluido del score"; position: absolute; top: 10px; right: 12px;
    font-size: 11px; color: #9ca3af; font-style: italic;
}
#gw-app .ga-fp-note {
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6; border-radius: 6px;
    padding: 10px 14px; font-size: 13px; color: #1e40af; margin: 10px 0 16px;
}

/* ---- FORM FIELDS ---- */
#gw-app .ga-textarea { resize: vertical; min-height: 56px; font-family: inherit; }
#gw-app .ga-label-optional { font-weight: 400; color: #6b7280; font-size: 12px; }
#gw-app .ga-field-hint { font-size: 12px; color: #6b7280; margin: 5px 0 0; line-height: 1.5; }

/* ---- LEGAL DISCLAIMER ---- */
#gw-app .ga-legal-disclaimer {
    background: #fffbeb; border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b; border-radius: 6px;
    padding: 12px 16px; font-size: 13px; color: #78350f;
    margin-bottom: 20px; line-height: 1.5;
}

/* ---- SCORE CARD ---- */
#gw-app .ga-score-card {
    border-radius: 14px; padding: 24px; margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08); border: 2px solid transparent;
}
#gw-app .ga-score-good  { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: #10b981; }
#gw-app .ga-score-medium{ background: linear-gradient(135deg,#fffbeb,#fef3c7); border-color: #f59e0b; }
#gw-app .ga-score-bad   { background: linear-gradient(135deg,#fef2f2,#fee2e2); border-color: #ef4444; }
#gw-app .ga-score-inner { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
#gw-app .ga-score-circle {
    width: 130px; height: 130px; border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; color: #fff; flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
#gw-app .ga-score-num  { font-size: 50px; font-weight: 800; line-height: 1; }
#gw-app .ga-score-sub  { font-size: 18px; opacity: .85; }
#gw-app .ga-score-meta { flex: 1; min-width: 0; }
#gw-app .ga-score-meta h3 { margin: 0 0 14px; font-size: 20px; }

#gw-app .ga-meta-table { border-collapse: collapse; width: 100%; font-size: 14px; }
#gw-app .ga-meta-table th, #gw-app .ga-meta-table td { padding: 5px 10px 5px 0; vertical-align: top; text-align: left; }
#gw-app .ga-meta-table th { color: #6b7280; font-weight: 600; white-space: nowrap; padding-right: 14px; width: 38%; }
#gw-app .ga-meta-table td { word-break: break-word; }
#gw-app .ga-meta-table td a { color: #0284c7; word-break: break-all; }
#gw-app .ga-meta-small { color: #9ca3af; font-size: 12px; display: block; margin-top: 2px; }
#gw-app .ga-ok-count { color: #047857; font-weight: 600; }

/* ---- ISSUES ---- */
#gw-app .ga-issues-wrap h4 { font-size: 18px; margin-bottom: 6px; }
#gw-app .ga-issues-intro { font-size: 13px; color: #6b7280; margin-bottom: 16px; }
#gw-app .ga-issue {
    border-left: 4px solid; border-radius: 0 10px 10px 0;
    padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
#gw-app .ga-issue-high   { border-color: #b91c1c; background: #fff1f1; }
#gw-app .ga-issue-medium { border-color: #b45309; background: #fffbeb; }
#gw-app .ga-issue-low    { border-color: #047857; background: #f0fdf4; }
#gw-app .ga-issue-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

#gw-app .ga-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
#gw-app .ga-badge-high   { background: #b91c1c; color: #fff; }
#gw-app .ga-badge-medium { background: #92400e; color: #fff; }
#gw-app .ga-badge-low    { background: #065f46; color: #fff; }

#gw-app .ga-penalty { font-weight: 700; color: #b91c1c; font-size: 15px; }
#gw-app .ga-issue-label { font-size: 13px; color: #374151; font-style: italic; }
#gw-app .ga-issue-msg { margin: 6px 0 10px; font-size: 15px; color: #111827; }
#gw-app .ga-issue-context {
    background: rgba(0,0,0,.04); border-radius: 6px;
    padding: 8px 12px; font-size: 13px; color: #374151;
    margin-bottom: 10px; font-style: italic;
}
#gw-app .ga-issue-normas { margin-top: 10px; }
#gw-app .ga-issue-normas strong { font-size: 13px; color: #1e3a5f; }
#gw-app .ga-issue-normas ul { margin: 6px 0 0 16px; padding: 0; }
#gw-app .ga-issue-normas li { font-size: 13px; color: #1e3a5f; margin-bottom: 4px; line-height: 1.5; }

/* ---- RECOMMENDATIONS ---- */
#gw-app .ga-recommendations {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1px solid #bae6fd; border-radius: 12px; padding: 22px 24px; margin-top: 22px;
}
#gw-app .ga-recommendations h5 { margin: 0 0 16px; font-size: 17px; color: #0369a1; }
#gw-app .ga-recs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#gw-app .ga-rec-item { background: #fff; border-radius: 8px; padding: 14px 16px; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
#gw-app .ga-rec-item strong { display: block; margin-bottom: 5px; color: #0c4a6e; font-size: 14px; }
#gw-app .ga-rec-item p { margin: 0; color: #374151; }

/* ---- NO ISSUES ---- */
#gw-app .ga-no-issues {
    background: #f0fdf4; border: 2px solid #bbf7d0; color: #14532d;
    padding: 22px; border-radius: 12px; text-align: center; font-size: 17px; margin: 16px 0;
}

/* ---- ACTIONS ---- */
#gw-app .ga-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
#gw-app .ga-btn-action {
    padding: 11px 22px; border-radius: 8px; border: 1px solid #d1d5db;
    background: #fff; color: #374151; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all .2s; flex: 1; min-width: 160px; text-align: center;
}
#gw-app .ga-btn-action:hover { background: #f9fafb; box-shadow: 0 2px 6px rgba(0,0,0,.1); transform: translateY(-1px); }

/* ---- AUDIT NOTE ---- */
#gw-app .ga-audit-note {
    margin-top: 18px; padding: 12px 16px; background: #f9fafb;
    border-radius: 8px; border-left: 4px solid #9ca3af; font-size: 13px; color: #4b5563;
}

/* ---- ERROR ---- */
#gw-app .ga-error {
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    padding: 16px 18px; border-radius: 8px; font-weight: 500; margin: 16px 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    #gw-app .ga-form-grid, #gw-app .ga-recs-grid { grid-template-columns: 1fr; }
    #gw-app .ga-score-inner { flex-direction: column; align-items: center; text-align: center; }
    #gw-app .ga-score-meta { min-width: 0; width: 100%; }
    #gw-app .ga-actions { flex-direction: column; }
    #gw-app .ga-score-circle { width: 110px; height: 110px; }
    #gw-app .ga-score-num { font-size: 42px; }

    #gw-app .ga-meta-table,
    #gw-app .ga-meta-table tbody,
    #gw-app .ga-meta-table tr { display: block; width: 100%; }
    #gw-app .ga-meta-table tr { border-bottom: 1px solid #e5e7eb; padding: 6px 0; }
    #gw-app .ga-meta-table tr:last-child { border-bottom: none; }
    #gw-app .ga-meta-table th {
        display: block; width: 100%; padding: 0 0 2px 0;
        font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
        color: #9ca3af; white-space: normal;
    }
    #gw-app .ga-meta-table td { display: block; padding: 0; font-size: 14px; }

    #gw-app .ga-ecosystem-grid { grid-template-columns: 1fr; }
    #gw-app .ga-issue-cta { flex-direction: column; align-items: flex-start; }
    #gw-app .ga-issue { padding: 14px 14px; }
    #gw-app .ga-issue-normas ul { padding-left: 12px; }
}

@media (max-width: 480px) {
    #gw-app .ga-form-section, #gw-app .ga-score-card { padding: 16px; }
    #gw-app .ga-score-circle { width: 96px; height: 96px; }
    #gw-app .ga-score-num { font-size: 36px; }
    #gw-app .ga-score-sub { font-size: 15px; }
    #gw-app .ga-badge { font-size: 10px; padding: 3px 9px; }
    #gw-app .ga-btn-action { min-width: 0; }
}

@media print {
    #gw-app .ga-actions, #gw-app .ga-form-section { display: none !important; }
    #gw-app { max-width: 100%; }
    #gw-app .ga-issue-normas ul { page-break-inside: avoid; }
    #gw-app .ga-meta-table th, #gw-app .ga-meta-table td { display: table-cell !important; }
}