/* core/static/core/css/main.css */
/* =====================================================================
    Peronismo Debate — hoja de estilos global
    Variables, overrides de Bootstrap y utilidades compartidas.
   ===================================================================== */

:root {
    /* Paleta sobria, neutra. Ajustable cuando el cliente defina colores. */
    --pd-primary:         #0d3b66;
    --pd-primary-dark:    #082746;
    --pd-primary-light:   #1b5da0;
    --pd-accent:          #c8b560;

    --pd-text:            #1f2937;
    --pd-text-muted:      #6b7280;
    --pd-text-inverse:    #ffffff;

    --pd-bg:              #f7f7f8;
    --pd-surface:         #ffffff;
    --pd-border:          #e5e7eb;

    --pd-success:         #2e7d32;
    --pd-danger:          #b91c1c;
    --pd-warning:         #b45309;

    /* Tipografía */
    --pd-font-base:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pd-font-size-base:  15px;

    /* Layout */
    --pd-radius:          6px;
    --pd-radius-lg:       10px;
    --pd-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.05);
    --pd-shadow-md:       0 2px 8px rgba(0, 0, 0, 0.07);
}

/* Overrides de variables Bootstrap para heredar la paleta */
:root {
    --bs-primary:         var(--pd-primary);
    --bs-primary-rgb:     13, 59, 102;
    --bs-body-color:      var(--pd-text);
    --bs-body-bg:         var(--pd-bg);
    --bs-border-color:    var(--pd-border);
    --bs-border-radius:   var(--pd-radius);
}

/* ---------- base ---------- */

html, body {
    min-height: 100%;
}

body {
    font-family: var(--pd-font-base);
    font-size: var(--pd-font-size-base);
    color: var(--pd-text);
    background-color: var(--pd-bg);
}

a { color: var(--pd-primary); }
a:hover { color: var(--pd-primary-dark); }

h1, h2, h3, h4, h5, h6 {
    color: var(--pd-text);
    font-weight: 600;
}

/* ---------- navbar ---------- */

.pd-navbar {
    background-color: var(--pd-primary);
    color: var(--pd-text-inverse);
    border-bottom: 1px solid var(--pd-primary-dark);
}

.pd-navbar a,
.pd-navbar .navbar-brand,
.pd-navbar .nav-link {
    color: var(--pd-text-inverse);
}

.pd-navbar .nav-link:hover {
    color: var(--pd-accent);
}

.pd-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ---------- cards / surfaces ---------- */

.pd-card {
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-sm);
}

/* ---------- buttons (override Bootstrap primary) ---------- */

.btn-primary {
    background-color: var(--pd-primary);
    border-color: var(--pd-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pd-primary-dark);
    border-color: var(--pd-primary-dark);
}

.btn-outline-primary {
    color: var(--pd-primary);
    border-color: var(--pd-primary);
}

.btn-outline-primary:hover {
    background-color: var(--pd-primary);
    border-color: var(--pd-primary);
}

/* ---------- form helpers ---------- */

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

.form-control:focus,
.form-select:focus {
    border-color: var(--pd-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(27, 93, 160, 0.15);
}

/* ---------- utilidades ---------- */

.pd-text-muted { color: var(--pd-text-muted); }

.pd-footer {
    background-color: var(--pd-surface);
    border-top: 1px solid var(--pd-border);
    color: var(--pd-text-muted);
    font-size: 0.875rem;
    padding: 1.25rem 0;
    margin-top: 3rem;
}

/* Asterisco rojo para campos obligatorios */
.form-label.required::after {
    content: " *";
    color: var(--pd-danger);
    font-weight: 500;
}

/* Etiqueta visual estilo "chip" para nombres de referentes/links en listados */
.pd-chip {
    font-family: var(--bs-font-monospace);
    background-color: rgba(214, 51, 132, 0.1);
    color: #d63384;
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.875em;
}

/* ---------- responsive tweaks ---------- */

@media (max-width: 576px) {
    body { font-size: 14px; }
}