/* Explain: App theme tokens for colors, fonts, and branding. */
:root {
    /* Marca - Tonos corporativos serios y profesionales */
    --primary-color: #0f172a; /* Azul marino */
    --primary-hover: #1e293b;
    --primary-light: #334155;
    --bg-color: #f8fafc;

    /* Nota: se conservan los nombres (btn-green / btn-orange) por compatibilidad,
       pero ahora usan la misma paleta seria y corporativa de todo el sitio. */
    --btn-green: #0f766e;      /* Verde azulado corporativo */
    --btn-green-hover: #115e59;
    --btn-orange: #1d4ed8;     /* Azul corporativo */
    --btn-orange-hover: #1e3a8a;

    --accent-soft: #e2e8f0;    /* Fondo suave para insignias e íconos */
    --accent-once: #4338ca;    /* Contenido de un solo uso (comunidad) */

    --text-main: #334155;
    --text-muted: #64748b;

    /* Tipografía corporativa y limpia (Inter) */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Ayudas y etiquetas reutilizables para formularios */
.field-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .875rem;
    font-weight: 600;
    color: #334155;
}

.field-help {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--text-muted);
}

.form-block {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.25rem;
}