/* =========================================================================
   Paleta oficial ExSgreen (Guía Práctica de Uso de Marca V1)
   ---------------------------------------------------------------------
   NOTA TIPOGRAFÍA: la guía especifica la fuente "Pllant" para títulos y
   texto, y "Helvetica LT Std" para notas/legales. Como no contamos con
   los archivos de esa fuente (la guía es un PDF, no trae los .otf/.ttf),
   se usó como reemplazo temporal "Poppins" (Google Fonts) por ser la
   alternativa gratuita más cercana en forma (geométrica, redondeada,
   buena legibilidad). Si el cliente entrega los archivos reales de
   Pllant, solo hay que declarar los @font-face y cambiar la variable
   --fuente-titulos / --fuente-texto de abajo.
   ========================================================================= */
:root {
    /* Paleta primaria (50%) */
    --verde-profundo: #00310e;
    --verde-sostenible: #a8d5b4;
    --blanco-natural: #f6f7f5;

    /* Paleta secundaria (30%) */
    --azul-nova: #1e4e5f;
    --verdita: #6f8f7a;
    --gris-nexa: #8e8b87;

    /* Paleta complementaria (20%) */
    --terra-savia: #c26d3d;
    --arena-sostiva: #e3c46a;
    --azul-grisaceo: #62707d;

    /* Semáforo de resultados (mapeado sobre la paleta complementaria/secundaria) */
    --verde: var(--verdita);
    --amarillo: var(--arena-sostiva);
    --rojo: var(--terra-savia);

    /* Alias funcionales usados en toda la hoja */
    --marca-oscura: var(--verde-profundo);
    --marca-clara: var(--verde-sostenible);
    --gris: #6b6b68;
    --borde: #e1e0dc;

    --fuente-titulos: 'Poppins', Arial, Helvetica, sans-serif;
    --fuente-texto: 'Poppins', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    background: var(--blanco-natural);
    color: #23281f;
}

.contenedor {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px;
}

.topbar {
    background: var(--marca-oscura);
    color: #fff;
    padding: 14px 0;
}
.topbar .contenedor { padding: 0 20px; }
.topbar-flex { display: flex; justify-content: space-between; align-items: center; }
.topbar-marca { display: flex; align-items: center; gap: 10px; }
.topbar-marca img { height: 30px; width: auto; display: block; }
.link-informes {
    color: var(--verde-sostenible);
    font-size: 13px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.35);
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 600;
}
.link-informes:hover { background: rgba(255,255,255,.12); }

.footer {
    color: var(--gris);
    text-align: center;
    font-size: 12px;
    padding: 20px 0 40px;
}

h1 { font-family: var(--fuente-titulos); font-weight: 700; font-size: 24px; color: var(--marca-oscura); }
h2 { font-family: var(--fuente-titulos); font-weight: 700; font-size: 19px; color: var(--marca-oscura); margin-top: 28px; }
h3 { font-family: var(--fuente-titulos); font-weight: 600; font-size: 15px; color: var(--azul-nova); }

.card {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 24px;
    margin-top: 18px;
}

.form-grupo { margin-bottom: 16px; }
.form-grupo label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; color: #2b3227; }
.form-grupo input[type=text],
.form-grupo input[type=email],
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--fuente-texto);
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus {
    outline: none;
    border-color: var(--verdita);
    box-shadow: 0 0 0 3px rgba(168, 213, 180, .35);
}
.form-grupo textarea { min-height: 90px; }
.ayuda { color: var(--gris); font-size: 12px; margin-top: 4px; }

.btn {
    display: inline-block;
    background: var(--marca-oscura);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--fuente-texto);
}
.btn:hover { opacity: 0.88; }
.btn.secundario {
    background: #fff;
    color: var(--marca-oscura);
    border: 1px solid var(--marca-oscura);
}
.btn.gris { background: var(--gris-nexa); }

.acciones { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }

.alerta {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}
.alerta.error { background: #fbeae2; color: #8a3c1f; border: 1px solid var(--terra-savia); }
.alerta.exito { background: #eaf3ec; color: #205339; border: 1px solid var(--verdita); }

.pregunta-bloque {
    border-bottom: 1px solid var(--borde);
    padding: 16px 0;
}
.pregunta-bloque:last-child { border-bottom: none; }
.pregunta-texto { font-size: 14px; margin-bottom: 10px; }
.pregunta-meta { font-size: 12px; color: var(--gris); margin-bottom: 6px; }

.opciones-respuesta { display: flex; gap: 18px; }
.opciones-respuesta label {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: normal; cursor: pointer;
}

.seccion-titulo {
    background: var(--marca-oscura);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    margin-top: 28px;
    font-size: 14px;
    font-weight: 600;
}
.categoria-titulo {
    font-weight: 700;
    margin-top: 18px;
    margin-bottom: 6px;
    color: var(--azul-nova);
}

.barra-progreso {
    background: #e6e6e6;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    margin: 10px 0 20px;
}
.barra-progreso > div {
    background: var(--verdita);
    height: 100%;
}

.resumen-tabla { width: 100%; border-collapse: collapse; margin-top: 10px; }
.resumen-tabla td, .resumen-tabla th {
    padding: 8px 6px;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
    text-align: left;
}
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.dot.verde { background: var(--verde); }
.dot.amarillo { background: var(--amarillo); }
.dot.rojo { background: var(--rojo); }

.pregunta-pantalla {
    text-align: center;
    padding: 30px 10px;
}
.pregunta-pantalla h2 { margin-top: 0; }
.pregunta-pantalla .acciones { justify-content: center; }

.pasos {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.paso {
    font-size: 12px;
    background: #eee;
    color: #555;
    padding: 4px 10px;
    border-radius: 12px;
}
.paso.activo { background: var(--marca-oscura); color: #fff; }

.badge-vigente {
    display: inline-block; background: #e5f0e8; color: #205339;
    border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-left: 6px;
}
.badge-historico {
    display: inline-block; background: #eef2ee; color: #6b6b68;
    border-radius: 10px; padding: 1px 8px; font-size: 11px; margin-left: 6px;
}