/**
 * theme-audit.css
 * Styles for the WordPress Theme Audit tool. Uses the site's design tokens so it
 * follows the light/dark theme, and keeps severity colors legible on the printed
 * (light) report captured by pdf-export.js.
 *
 * @since 7.0.0
 * @author Fernando Tellado
 */

/* Severity tokens — dark (default) */
:root {
    --ta-critico: #e0564a;
    --ta-critico-bg: rgba(224, 86, 74, 0.14);
    --ta-importante: #e0a106;
    --ta-importante-bg: rgba(224, 161, 6, 0.14);
    --ta-menor: #4a9eea;
    --ta-menor-bg: rgba(74, 158, 234, 0.14);
    --ta-ok: #4ec9b0;
    --ta-ok-bg: rgba(78, 201, 176, 0.14);
    --ta-warn-bg: rgba(224, 161, 6, 0.12);
}
/* Severity tokens — light (used on screen in light mode and in the print tab) */
[data-theme="light"] {
    --ta-critico: #c0392b;
    --ta-critico-bg: #fdecea;
    --ta-importante: #b9770b;
    --ta-importante-bg: #fdf4e3;
    --ta-menor: #2f6fb0;
    --ta-menor-bg: #eaf2fa;
    --ta-ok: #16825d;
    --ta-ok-bg: #e7f4ee;
    --ta-warn-bg: #fbf3d6;
}

/* Long findings list: don't keep the right column sticky for this tool */
#generator-theme-audit .output-section { position: static; }
#generator-theme-audit .form-section .generator-form { margin-bottom: 28px; }

/* Two fields side by side */
.ta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ta-row > label { flex: 1; min-width: 140px; }

/* ---- Severity radios as pills ---- */
.ta-fieldset { border: 0; padding: 0; margin: 0; }
.ta-fieldset legend { font-size: 14px; font-weight: 500; color: var(--color-text); padding: 0; margin-bottom: 6px; }
.ta-gravedades { display: flex; gap: 8px; flex-wrap: wrap; }
.ta-grav { position: relative; flex: 1; min-width: 92px; cursor: pointer; }
.ta-grav input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ta-grav span {
    display: block; text-align: center; border: 1.5px solid var(--color-border);
    border-radius: 6px; padding: 8px 6px; font-size: 13.5px; font-weight: 600;
    color: var(--color-text-secondary); background: var(--color-bg-secondary);
    transition: border-color .15s, color .15s, background .15s;
}
.ta-grav span::before {
    content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle; background: currentColor; opacity: .8;
}
.ta-grav[data-g="critico"] span { color: var(--ta-critico); }
.ta-grav[data-g="importante"] span { color: var(--ta-importante); }
.ta-grav[data-g="menor"] span { color: var(--ta-menor); }
.ta-grav input:focus-visible + span { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.ta-grav[data-g="critico"] input:checked + span { background: var(--ta-critico); border-color: var(--ta-critico); color: #fff; }
.ta-grav[data-g="importante"] input:checked + span { background: var(--ta-importante); border-color: var(--ta-importante); color: #1e1e1e; }
.ta-grav[data-g="menor"] input:checked + span { background: var(--ta-menor); border-color: var(--ta-menor); color: #fff; }
.ta-grav input:checked + span::before { background: currentColor; opacity: 1; }

.ta-btn-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.ta-danger { color: var(--ta-critico); }
.ta-danger:hover { border-color: var(--ta-critico); color: var(--ta-critico); }

/* ---- KPIs ---- */
.ta-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ta-kpi {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-top-width: 3px; border-radius: 8px; padding: 10px 6px; text-align: center;
    display: flex; flex-direction: column; gap: 2px;
}
.ta-kpi .n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.ta-kpi .l { font-size: 12px; color: var(--color-text-secondary); }
.ta-kpi.c-critico { border-top-color: var(--ta-critico); }
.ta-kpi.c-critico .n { color: var(--ta-critico); }
.ta-kpi.c-importante { border-top-color: var(--ta-importante); }
.ta-kpi.c-importante .n { color: var(--ta-importante); }
.ta-kpi.c-menor { border-top-color: var(--ta-menor); }
.ta-kpi.c-menor .n { color: var(--ta-menor); }
.ta-kpis-sec { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 4px; font-size: 14px; color: var(--color-text-secondary); }
.ta-kpis-sec b { color: var(--color-text); font-size: 16px; }

/* ---- Cards inside the output column ---- */
.ta-card { margin-top: 20px; border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 15px; background: var(--color-bg-secondary); }
.ta-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ta-card-head h4 { font-size: 15px; font-weight: 600; color: var(--color-text); margin: 0; }
.ta-orden { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ta-orden input { accent-color: var(--color-primary); }

/* ---- Coverage ---- */
.ta-cob-lista { display: flex; flex-direction: column; gap: 7px; }
.ta-cob-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ta-cob-item .nom { flex: 1; color: var(--color-text); }
.ta-cob-item select { width: auto; max-width: 210px; padding: 5px 8px; font-size: 13px;
    border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); background: var(--color-bg); }
.ta-cob-estado { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ta-cob-estado.hall { color: var(--ta-critico); background: var(--ta-critico-bg); }
.ta-cob-estado.limpio { color: var(--ta-ok); background: var(--ta-ok-bg); }
.ta-cob-estado.napl { color: var(--color-text-tertiary); background: var(--color-bg-tertiary); }

/* ---- Findings list ---- */
.ta-aviso { font-size: 13px; background: var(--ta-warn-bg); border: 1px solid var(--ta-importante); color: var(--color-text); border-radius: 7px; padding: 8px 11px; margin-bottom: 12px; }
.ta-vacio { color: var(--color-text-secondary); font-size: 14px; text-align: center; padding: 22px 10px; border: 1px dashed var(--color-border); border-radius: 8px; }
.ta-hallazgo { border: 1px solid var(--color-border); border-left: 5px solid var(--color-border); border-radius: 8px; padding: 11px 13px; margin-bottom: 10px; background: var(--color-bg); }
.ta-hallazgo.g-critico { border-left-color: var(--ta-critico); }
.ta-hallazgo.g-importante { border-left-color: var(--ta-importante); }
.ta-hallazgo.g-menor { border-left-color: var(--ta-menor); }
.ta-hallazgo.oculto { opacity: .55; }
.ta-h-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.ta-h-bloque { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .03em; }
.ta-h-desc { color: var(--color-text); margin: 2px 0 5px; }
.ta-h-archivo { font-size: 12.5px; color: var(--color-text-secondary); font-family: var(--font-mono); margin-bottom: 5px; }
.ta-h-codigo { font-size: 12px; background: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: 6px; padding: 7px 9px; margin: 6px 0; white-space: pre-wrap; overflow-x: auto; font-family: var(--font-mono); }
.ta-h-accion { font-size: 13px; color: var(--color-text); }
.ta-h-accion b { color: var(--color-text-secondary); }
.ta-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 7px; }
.ta-badge { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.ta-badge.grav-critico { color: var(--ta-critico); background: var(--ta-critico-bg); }
.ta-badge.grav-importante { color: var(--ta-importante); background: var(--ta-importante-bg); }
.ta-badge.grav-menor { color: var(--ta-menor); background: var(--ta-menor-bg); }
.ta-badge.estado { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.ta-badge.estado.resuelto, .ta-badge.estado.aceptado { background: var(--ta-ok-bg); color: var(--ta-ok); }
.ta-badge.esfuerzo { background: var(--color-bg-tertiary); color: var(--color-primary); }
.ta-badge.napl { background: var(--ta-critico-bg); color: var(--ta-critico); }
.ta-h-acciones { margin-left: auto; display: flex; gap: 4px; }
.ta-ico { border: 1px solid var(--color-border); background: var(--color-bg-secondary); border-radius: 6px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--color-text-secondary); cursor: pointer; }
.ta-ico:hover { color: var(--color-text); border-color: var(--color-border-hover); }
.ta-ico.del:hover { color: var(--ta-critico); border-color: var(--ta-critico); }

/* ---- Budget block ---- */
.ta-presu { border: 1px dashed var(--color-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.ta-presu-campos { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.ta-presu-campos[hidden] { display: none; }
.ta-presu-campos label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--color-text); }
.ta-presu-campos input, .ta-presu-campos textarea {
    padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: 14px;
    color: var(--color-text); background: var(--color-bg-secondary);
}

/* =====================================================================
   Report body (.ta-r-*). Rendered in the in-page preview and cloned into
   the print tab by pdf-export.js, so it relies only on design tokens.
   ===================================================================== */
.ta-report:not(:empty) { margin-top: 32px; padding-top: 8px; border-top: 2px solid var(--color-border); }
.ta-r-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 26px; font-size: 13px; margin: 8px 0 18px; }
.ta-r-datos div { padding: 3px 0; border-bottom: 1px solid var(--color-border); }
.ta-r-datos span { color: var(--color-text-secondary); }
.ta-r-sec { font-size: 14px; font-weight: 600; color: var(--color-text); border-bottom: 1px solid var(--color-border); padding-bottom: 6px; margin: 22px 0 12px; }
.ta-r-frase { font-size: 13.5px; margin: 6px 0; }
.ta-r-muted { color: var(--color-text-secondary); }

table.ta-r-resumen { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
table.ta-r-resumen th { background: var(--color-bg-tertiary); text-align: center; font-size: 11px; color: var(--color-text-secondary); font-weight: 600; border: 1px solid var(--color-border); padding: 6px; text-transform: uppercase; letter-spacing: .03em; }
table.ta-r-resumen td { text-align: center; font-size: 20px; font-weight: 700; color: var(--color-text); border: 1px solid var(--color-border); padding: 8px 6px; }
table.ta-r-resumen td.t-critico { color: var(--ta-critico); }
table.ta-r-resumen td.t-importante { color: var(--ta-importante); }
table.ta-r-resumen td.t-menor { color: var(--ta-menor); }

table.ta-r-cob { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ta-r-cob td { padding: 6px 4px; border-bottom: 1px solid var(--color-border); }
table.ta-r-cob td:last-child { text-align: right; font-weight: 600; }
.ta-r-cob .c-hall { color: var(--ta-critico); }
.ta-r-cob .c-limpio { color: var(--ta-ok); }
.ta-r-cob .c-napl { color: var(--color-text-tertiary); }
.ta-r-cob .c-sinrev { color: var(--ta-importante); }

.ta-r-bloque { margin-bottom: 18px; }
.ta-r-bloque h4 { font-size: 13.5px; margin: 0 0 4px; color: var(--color-text); }
.ta-r-hall { padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.ta-r-hall:last-child { border-bottom: 0; }
.ta-r-grav { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 4px; margin-right: 8px; vertical-align: middle; border: 1.5px solid; }
.ta-r-grav.g-critico { color: var(--ta-critico); border-color: var(--ta-critico); }
.ta-r-grav.g-importante { color: var(--ta-importante); border-color: var(--ta-importante); }
.ta-r-grav.g-menor { color: var(--ta-menor); border-color: var(--ta-menor); }
.ta-r-hall .d { font-weight: 600; color: var(--color-text); }
.ta-r-hall .linea { font-size: 12px; color: var(--color-text-secondary); font-family: var(--font-mono); margin: 3px 0; }
.ta-r-hall .cod { font-size: 11.5px; background: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: 5px; padding: 6px 8px; margin: 5px 0; white-space: pre-wrap; font-family: var(--font-mono); }
.ta-r-hall .acc { font-size: 13px; margin-top: 3px; }
.ta-r-hall .acc b { color: var(--color-text-secondary); }
.ta-r-hall .meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }

ol.ta-r-plan { margin: 0; padding-left: 22px; font-size: 13px; }
ol.ta-r-plan li { margin-bottom: 8px; }
ol.ta-r-plan .g { font-weight: 700; }
ol.ta-r-plan .g.g-critico { color: var(--ta-critico); }
ol.ta-r-plan .g.g-importante { color: var(--ta-importante); }
ol.ta-r-plan .g.g-menor { color: var(--ta-menor); }
ol.ta-r-plan .blq { color: var(--color-text-secondary); }

.ta-r-presu table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ta-r-presu td { padding: 7px 4px; border-bottom: 1px solid var(--color-border); }
.ta-r-presu td:last-child { text-align: right; }
.ta-r-presu .total td { font-weight: 700; color: var(--color-text); border-top: 2px solid var(--color-border); border-bottom: 0; }
.ta-r-presu .nota { font-size: 12.5px; color: var(--color-text-secondary); margin-bottom: 8px; white-space: pre-wrap; }
.ta-r-rev input { border: 0; border-bottom: 1px solid var(--color-border); font: inherit; font-size: 13.5px; padding: 2px 4px; width: auto; color: var(--color-text); background: transparent; }
.ta-r-notas { font-size: 13px; white-space: pre-wrap; color: var(--color-text); }

@media (max-width: 768px) {
    .ta-kpi .n { font-size: 22px; }
    .ta-r-datos { grid-template-columns: 1fr; }
}