/* ============================================
   Cambres Oficials de Catalunya — Eleccions 2026
   Vote / Papeleta Custom CSS
   ============================================
   Alineado con los design tokens del landing
   (landing/css/tokens.css). Mismas variables de
   color, sombras, radios y escala de espaciado.
   ============================================ */

:root {
    /* --- COLORES (espejo del landing) --- */
    --color-primary: #B6112C;
    --color-primary-dark: #8a0c1f;
    --color-primary-darker: #6b0817;
    --color-primary-light: #fbeef0;
    --color-secondary: #1B365D;
    --color-secondary-dark: #122947;
    --color-accent: #F2A900;
    --color-text: #1a1a1a;
    --color-text-muted: #5a6478;
    --color-text-inverse: #ffffff;
    --color-bg: #f5f7fa;
    --color-bg-soft: #eef2f7;
    --color-card: #ffffff;
    --color-border: #d9dfe8;
    --color-border-strong: #a9b3c4;
    --color-disabled-bg: #e6e9ef;
    --color-disabled-text: #8a93a3;

    /* --- ALIASES legados (para no tocar el jade/i18n) --- */
    --cambres-primary: var(--color-primary);
    --cambres-primary-dark: var(--color-primary-dark);
    --cambres-primary-darker: var(--color-primary-darker);
    --cambres-secondary: var(--color-secondary);
    --cambres-secondary-dark: var(--color-secondary-dark);
    --cambres-accent: var(--color-accent);
    --cambres-light-bg: var(--color-bg);
    --cambres-medium-bg: var(--color-bg-soft);
    --cambres-text-on-primary: var(--color-text-inverse);
    --cambres-text-on-light: var(--color-text);

    /* --- SOMBRAS, RADIOS, ANILLO DE FOCO --- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
    --ring: 0 0 0 3px rgba(27, 54, 93, 0.25);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* --- ESPACIADO --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* --- TIPOGRAFÍA / ACCESIBILIDAD --- */
    --font-stack: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-size-base: 1rem;
    --font-size-large: 1.25rem;
}

/* ============================================
   BASE
   ============================================ */
body {
    font-family: var(--font-stack);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container,
.container-fluid {
    font-family: var(--font-stack);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

h1, h2, h3, h4, h5 {
    color: var(--color-secondary);
    font-weight: 700;
    line-height: 1.25;
}

/* Anillo de foco coherente con el landing */
:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
label:focus-within {
    box-shadow: var(--ring);
}

/* ============================================
   SPINNER
   ============================================ */
.spinner {
    left: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0 auto;
    -webkit-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(15, 23, 42, .10);
    border-right: 6px solid rgba(15, 23, 42, .10);
    border-bottom: 6px solid rgba(15, 23, 42, .10);
    border-top: 6px solid var(--color-primary);
    border-radius: 100%;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

/* ============================================
   ERRORES DE VALIDACIÓN
   ============================================ */
.error {
    width: 100%;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-text-inverse);
    background-color: var(--color-primary-dark);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-sizing: border-box;
}

.error.active {
    padding: 0.4em var(--space-3);
}

/* ============================================
   PAPELETA - MARCAS DE VOTO
   ============================================ */
.ballot {
    display: none;
}

.ballot + label {
    width: 100%;
    cursor: pointer;
    margin: 0;
}

.ballot + label .marca {
    cursor: pointer;
    background: url("/assets/images/papeleta_mark.png") center no-repeat;
    height: 80px;
    width: 68px;
    display: inline-block;
    padding: 0;
}

.ballot:checked + label .marca {
    background: url("/assets/images/papeleta_marked.png") center no-repeat;
    height: 80px;
    width: 68px;
    display: inline-block;
    padding: 0;
}

.ballot + label .marca-square {
    border: 3px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    height: 60px;
    width: 68px;
    display: inline-block;
    padding: 0;
    background: var(--color-card);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ballot + label:hover .marca-square {
    border-color: var(--color-primary);
}

.ballot:checked + label .marca-square {
    background: url("/assets/images/papeleta_marked_cr.png") center no-repeat var(--color-primary);
    border-color: var(--color-primary);
    height: 60px;
    width: 68px;
    display: inline-block;
    padding: 0;
    box-shadow: 0 4px 12px rgba(182, 17, 44, 0.25);
}

.image-option {
    display: table-cell;
    vertical-align: middle;
    height: 80px;
}

/* ============================================
   COLORES TEMÁTICOS (clases legadas EvColor*)
   ============================================ */
.EvColor {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse);
}

.EvColorBlue {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-inverse);
}

.EvColorLightBlue {
    background-color: var(--color-secondary-dark) !important;
    color: var(--color-text-inverse);
}

.EvColorGris {
    background-color: var(--color-bg-soft) !important;
}

.EvColorGrisLight {
    background-color: var(--color-card) !important;
    border-bottom: 1px solid var(--color-border);
}

/* Texto inverso dentro de bandas con fondo de marca:
   evita que la regla genérica de headings (color: secondary)
   pinte texto navy sobre rojo o navy sobre navy. */
.EvColor,
.EvColor h1, .EvColor h2, .EvColor h3, .EvColor h4, .EvColor h5, .EvColor h6,
.EvColor p, .EvColor span, .EvColor a,
.EvColorBlue,
.EvColorBlue h1, .EvColorBlue h2, .EvColorBlue h3, .EvColorBlue h4, .EvColorBlue h5, .EvColorBlue h6,
.EvColorBlue p, .EvColorBlue span:not(.badge),
.EvColorLightBlue,
.EvColorLightBlue h1, .EvColorLightBlue h2, .EvColorLightBlue h3, .EvColorLightBlue h4, .EvColorLightBlue h5, .EvColorLightBlue h6 {
    color: var(--color-text-inverse);
}

/* ============================================
   BOTONES (estilo del landing: hero__cta / resource-card a)
   ============================================ */
.btn {
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: 0;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn.EvColor {
    box-shadow: 0 4px 12px rgba(182, 17, 44, 0.25);
}

.btn.EvColor:hover {
    background-color: var(--color-primary-dark) !important;
    box-shadow: 0 8px 20px rgba(182, 17, 44, 0.35);
}

.btn.EvColorBlue {
    box-shadow: 0 4px 12px rgba(27, 54, 93, 0.20);
}

.btn.EvColorBlue:hover {
    background-color: var(--color-secondary-dark) !important;
    box-shadow: 0 8px 20px rgba(27, 54, 93, 0.30);
}

/* ============================================
   LOGOS
   ============================================ */
.logoEV {
    max-height: 50px;
}

.logo {
    max-height: 130px;
}

/* ============================================
   ESTADOS VISUALES
   ============================================ */
.blured {
    filter: blur(100px) !important;
}

.crossOut {
    background: url("/assets/images/sistema_seguro.jpg") repeat;
}

.mati-hide,
.hidden {
    display: none;
}

/* ============================================
   HEADER / BARRA DE ACCESIBILIDAD + LANG SWITCH
   ============================================ */
.header-wrapper {
    position: relative;
    box-shadow: var(--shadow-sm);
}

.accessibility-bar {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 1050;
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.accessibility-btn {
    background-color: var(--color-card);
    color: var(--color-secondary);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
    padding: 0;
    box-shadow: var(--shadow-xs);
}

.accessibility-btn:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    border-color: var(--color-secondary);
}

.accessibility-btn.active {
    background-color: #000;
    color: #ff0;
    border-color: #ff0;
}

.lang-switch {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-right: var(--space-2);
    background: var(--color-card);
    box-shadow: var(--shadow-xs);
}

.lang-switch a {
    padding: 6px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-muted);
    background: transparent;
    transition: background-color 0.18s ease, color 0.18s ease;
    font-family: inherit;
}

.lang-switch a:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
    text-decoration: none;
}

.lang-switch a.active {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    box-shadow: inset 0 -2px 0 var(--color-accent);
    text-decoration: none;
}

.lang-switch a.active:hover {
    background: var(--color-secondary-dark);
    color: var(--color-text-inverse);
}

/* ============================================
   TÍTULO DE PREGUNTA STICKY
   ============================================ */
.question-title-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-4);
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    border-bottom: 3px solid var(--color-accent);
}

.question-title-sticky h5 {
    margin: 0;
    color: var(--color-text-inverse);
    font-weight: 700;
    line-height: 1.3;
}

.question-title-sticky .badge {
    font-size: 0.78rem;
    background-color: rgba(242, 169, 0, 0.20) !important;
    color: var(--color-accent) !important;
    border: 1px solid rgba(242, 169, 0, 0.35);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

/* ============================================
   BOTÓN FLOTANTE MOBILE (mismo patrón que hero__cta)
   ============================================ */
.floating-vote-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1040;
    padding: var(--space-3) var(--space-6);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: 0 8px 24px rgba(182, 17, 44, 0.35);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    font-family: inherit;
}

.floating-vote-btn:hover {
    transform: translateY(-2px);
    background-color: var(--color-primary-dark);
    box-shadow: 0 12px 32px rgba(182, 17, 44, 0.45);
}

.floating-vote-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(182, 17, 44, 0.40);
}

@media (max-width: 768px) {
    .floating-vote-btn {
        display: block;
    }

    .accessibility-bar {
        position: relative;
        top: auto;
        right: auto;
        justify-content: flex-end;
        padding: var(--space-1) var(--space-2);
    }
}

/* ============================================
   GRUP CHOICE BLOCK (mismo patrón que camara-card)
   ============================================ */
.choice-block {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.choice-block:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.ballot:checked + label .choice-block {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.ballot:checked + label .choice-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 0 0 3px 3px;
}

.choice-block .candidate-name {
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.3;
    font-size: 1.02rem;
}

/* ============================================
   MODO ALTO CONTRASTE
   ============================================ */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast .container-fluid,
body.high-contrast .container {
    background-color: #000;
    color: #fff;
}

body.high-contrast .EvColor,
body.high-contrast .EvColorBlue {
    background-color: #000 !important;
    color: #ff0 !important;
    border: 2px solid #ff0;
}

body.high-contrast .EvColorGrisLight {
    background-color: #111 !important;
    color: #fff !important;
    border-bottom-color: #ff0;
}

body.high-contrast .question-title-sticky {
    background: #000 !important;
    color: #ff0 !important;
    border-bottom: 2px solid #ff0;
}

body.high-contrast .question-title-sticky h5 {
    color: #ff0 !important;
}

body.high-contrast .floating-vote-btn {
    background-color: #ff0 !important;
    color: #000 !important;
    box-shadow: none;
}

body.high-contrast .ballot + label .marca-square {
    border-color: #ff0;
    background: #000;
}

body.high-contrast .choice-block {
    background: #111 !important;
    border-color: #ff0 !important;
    color: #fff !important;
    box-shadow: none;
}

body.high-contrast .ballot:checked + label .choice-block {
    background: #000 !important;
    border-color: #ff0 !important;
}

body.high-contrast .lang-switch {
    background: #111;
    border-color: #ff0;
}

body.high-contrast .lang-switch a {
    background: #111;
    color: #ff0;
    border-color: #ff0;
}

body.high-contrast .lang-switch a.active {
    background: #ff0;
    color: #000;
    box-shadow: none;
}

body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast label,
body.high-contrast span {
    color: #fff !important;
}

/* ============================================
   MODO FUENTE GRANDE
   ============================================ */
body.large-font {
    --font-size-base: 1.25rem;
    --font-size-large: 1.5rem;
}

body.large-font h5 { font-size: 1.5rem; }
body.large-font h6 { font-size: 1.25rem; }
body.large-font .badge { font-size: 1rem; }
body.large-font label,
body.large-font p { font-size: 1.15rem; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 576px) {
    .logo { max-height: 90px; }
    h6 { word-break: break-word; hyphens: auto; }
    .image-option { height: 60px; }
    .choice-block { padding: var(--space-3) var(--space-4); }
}