/* IL Participa — front-end styles (0.2.1). Self-contained under .il-participa.

   The blocks look like the native JNews modules of informacionlocal.es by default: the section label is the
   theme's block-heading bar (turquoise, white 16px/700, 36px tall), cards are flat (1px border, 2px radius, no
   shadow), titles 18px/600 #171717, text 14px #616161, meta 12px #a0a0a0, 20px between cards and 40px under
   the block. Typography is inherited from the theme (no font-family here). Badge colours are kept.

   Design tokens (same names in IL Agenda, IL Farmacias and IL Participa; the Elementor widgets print them inline
   on the block root, a theme rule such as `.il-participa { --il-brand: … }` overrides them globally):
     --il-brand  --il-accent  --il-text  --il-text-soft  --il-muted  --il-border  --il-bg      colours
     --il-heading-bg  --il-heading-color                                                     block heading bar
     --il-radius  --il-card-pad  --il-gap  --il-block-margin                                  spacing / radius
     --il-title-font                                                                          card title font (inherit)
     --il-cols                                                                                columns (1–3) */

.il-participa {
    --il-brand: #3fb8af;
    --il-accent: #f2295b;
    --il-text: #171717;
    --il-text-soft: #616161;
    --il-muted: #a0a0a0;
    --il-border: #e9e9e9;
    --il-bg: #ffffff;
    --il-radius: 2px;
    --il-card-pad: 14px 16px;
    --il-gap: 20px;
    --il-block-margin: 0 0 40px;
    --il-heading-bg: var(--il-brand);
    --il-heading-color: #ffffff;
    --il-title-font: "Source Sans Pro", Helvetica, Arial, sans-serif;
    /* derived / plugin-specific */
    --il-accent-contrast: #ffffff;
    --il-brand-soft: #e3f5f3;
    --il-brand-strong: #2a8f88;
    --il-success: #1f9d55;
    --il-success-soft: #dcf5e6;
    --il-surface: #f5f5f5;
    --il-surface-strong: #eeeeee;
    --il-btn-bg: #eeeeee;
    --il-btn-border: #cccccc;
    --il-btn-color: #212121;
    --il-title-size: 18px;
    --il-text-size: 14px;
    --il-meta-size: 12px;
    --il-badge-size: 11px;
    display: block;
    font-size: var(--il-text-size);
    line-height: 1.5;
    color: var(--il-text);
}

.il-participa--shortcode,
.il-participa--elementor {
    width: 100%;
    margin: var(--il-block-margin);
}

.il-participa *,
.il-participa *::before,
.il-participa *::after {
    box-sizing: border-box;
}

.il-participa a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.il-participa a:hover,
.il-participa a:focus-visible {
    color: var(--il-brand);
}

.il-participa :focus-visible {
    outline: 2px solid var(--il-brand);
    outline-offset: 2px;
}

.il-participa ul,
.il-participa ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.il-participa article {
    margin: 0;
}

/* ---------------------------------------------------------------- block heading (JNews .jeg_block_heading_3) */

.il-block-heading {
    display: flex;
    align-items: center;
    margin: 0 0 20px;
    padding: 0;
    border-radius: 2px;
    background: var(--il-heading-bg);
}

.il-block-heading__title {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0 15px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0;
    color: var(--il-heading-color);
    text-transform: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Underline variant (.il-block-heading--underline): plain label with a thin brand rule underneath. */
.il-block-heading--underline {
    border-radius: 0;
    background: transparent;
}

.il-block-heading--underline .il-block-heading__title {
    height: auto;
    padding: 0;
    overflow: visible;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--il-text);
    white-space: normal;
}

.il-block-heading--underline .il-block-heading__title::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 6px;
    background: var(--il-brand);
}

/* Sidebar: the theme drops its block title to 14px */
.jeg_sidebar .il-block-heading__title,
.il-participa--widget .il-block-heading__title {
    font-size: 14px;
}

/* ---------------------------------------------------------------- footer / placeholder */

.il-participa__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 16px 0 0;
}

.il-participa-placeholder {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--il-border);
    border-radius: var(--il-radius);
    background: var(--il-surface);
    font-size: 13px;
    color: var(--il-text-soft);
}

/* ---------------------------------------------------------------- icons */

.il-participa-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.15em;
}

.il-participa-icon--sm {
    width: 0.85em;
    height: 0.85em;
}

.il-participa-icon--lg {
    width: 2.25em;
    height: 2.25em;
    stroke-width: 1.25;
}

/* ---------------------------------------------------------------- badges (colours unchanged) */

.il-participa-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--il-surface-strong);
    box-shadow: none;
    color: #374151;
    font-size: var(--il-badge-size);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.il-participa-badge--type {
    background: var(--il-brand-soft);
    color: var(--il-brand-strong);
}

.il-participa-badge--incident {
    background: #fde8ee;
    color: #b0173f;
}

.il-participa-badge--question {
    background: #e8eefc;
    color: #2b4bb3;
}

.il-participa-badge--proposal {
    background: #efe7fb;
    color: #6b3fb5;
}

.il-participa-badge--topic {
    background: #fff3d6;
    color: #8a5a00;
}

.il-participa-badge--status.is-answered {
    background: var(--il-success-soft);
    color: var(--il-success);
}

/* ---------------------------------------------------------------- buttons (theme .btn: 35px, 13px, radius 5px) */

.il-participa .il-participa-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 35px;
    padding: 0 15px;
    border: 1px solid var(--il-accent);
    border-radius: 5px;
    background: var(--il-accent);
    box-shadow: none;
    color: var(--il-accent-contrast);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 33px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

.il-participa .il-participa-button:hover,
.il-participa .il-participa-button:focus-visible {
    color: var(--il-accent-contrast);
    filter: brightness(0.92);
}

.il-participa .il-participa-button--secondary {
    border-color: var(--il-btn-border);
    background: var(--il-btn-bg);
    color: var(--il-btn-color);
}

.il-participa .il-participa-button--secondary:hover,
.il-participa .il-participa-button--secondary:focus-visible {
    color: var(--il-btn-color);
    filter: brightness(0.96);
}

/* "Ver todas →": bold brand link with arrow (theme's "Ver todas" links) */
.il-participa .il-participa-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--il-brand);
    text-decoration: none;
}

.il-participa .il-participa-more:hover,
.il-participa .il-participa-more:focus-visible {
    color: var(--il-text);
}

.il-participa-more .il-participa-icon {
    width: 14px;
    height: 14px;
}

.il-participa-more:hover .il-participa-icon,
.il-participa-more:focus-visible .il-participa-icon {
    transform: translateX(2px);
    transition: transform 0.15s ease;
}

/* ---------------------------------------------------------------- lists & grids */

.il-participa-list {
    display: grid;
    grid-template-columns: repeat(var(--il-cols, 1), minmax(0, 1fr));
    gap: var(--il-gap);
    margin: 0;
    padding: 0;
}

.il-participa-grid {
    display: grid;
    grid-template-columns: repeat(var(--il-cols, 3), minmax(0, 1fr));
    gap: var(--il-gap);
    margin: 0;
    padding: 0;
}

@media (max-width: 599px) {
    .il-participa-list,
    .il-participa-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .il-participa-grid {
        grid-template-columns: repeat(min(var(--il-cols, 3), 2), minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------- submission card */

.il-participa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--il-card-pad);
    border: 1px solid var(--il-border);
    border-left: 3px solid var(--il-brand);
    border-radius: var(--il-radius);
    background: var(--il-bg);
    box-shadow: none;
}

.il-participa-card.is-answered {
    border-left-color: var(--il-success);
}

.il-participa-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Card title: h3 without a font-family of its own (the theme decides), 18px/600 like the theme's post titles. */
.il-participa-card__title,
.il-participa-inst__name {
    margin: 0 0 6px;
    padding: 0;
    font-family: var(--il-title-font);
    font-size: var(--il-title-size);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--il-text);
    text-transform: none;
}

.il-participa-card__badges + .il-participa-card__title {
    margin-top: 2px;
}

.il-participa-card__title a,
.il-participa-inst__name a {
    color: inherit;
    text-decoration: none;
}

.il-participa-card__title a:hover,
.il-participa-inst__name a:hover {
    color: var(--il-brand);
}

/* Meta: one line, 12px grey with 12px icons (wraps only when it must). */
.il-participa-card__meta,
.il-participa-inst__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    margin: 0;
    padding: 0;
    font-size: var(--il-meta-size);
    line-height: 1.4;
    color: var(--il-muted);
}

.il-participa-card__meta li,
.il-participa-inst__meta li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.il-participa-card__meta .il-participa-icon,
.il-participa-inst__meta .il-participa-icon {
    width: 12px;
    height: 12px;
}

.il-participa-card__excerpt {
    margin: 2px 0 0;
    font-size: var(--il-text-size);
    line-height: 1.6;
    color: var(--il-text-soft);
}

.il-participa-card__response {
    margin: 4px 0 0;
    padding: 7px 10px;
    border: 0;
    border-left: 2px solid var(--il-success);
    border-radius: 0 var(--il-radius) var(--il-radius) 0;
    background: var(--il-success-soft);
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    color: var(--il-text-soft);
}

.il-participa-card__response-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 4px;
    font-size: var(--il-badge-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--il-success);
    text-transform: uppercase;
}

.il-participa-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 4px 0 0;
    font-size: var(--il-meta-size);
}

.il-participa-card__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--il-muted);
}

/* Compact (widget / formato="compact") */
.il-participa-card--compact {
    gap: 4px;
    padding: 10px 12px;
}

.il-participa-card--compact .il-participa-card__title {
    margin-bottom: 2px;
    font-size: 16px;
}

.il-participa-list--compact {
    gap: 10px;
}

.il-participa--widget .il-participa__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
}

/* ---------------------------------------------------------------- stats */

.il-participa-stats {
    padding: var(--il-card-pad);
    border: 1px solid var(--il-border);
    border-radius: var(--il-radius);
    background: var(--il-bg);
}

.il-participa-stats__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--il-gap);
    margin: 0;
    padding: 0;
}

@media (min-width: 600px) {
    .il-participa-stats__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.il-participa-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 12px 10px;
    border-radius: var(--il-radius);
    background: var(--il-surface);
    text-align: center;
}

.il-participa-stat__value {
    font-family: var(--il-title-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--il-brand-strong);
}

.il-participa-stat--rate .il-participa-stat__value {
    color: var(--il-accent);
}

.il-participa-stat__label {
    font-size: var(--il-badge-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--il-muted);
    text-transform: uppercase;
}

.il-participa-stats__note {
    margin: 10px 0 0;
    font-size: var(--il-meta-size);
    color: var(--il-muted);
}

.il-participa-stats .il-participa__footer {
    margin-top: 14px;
}

/* ---------------------------------------------------------------- institution card */

.il-participa-inst {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--il-card-pad);
    border: 1px solid var(--il-border);
    border-radius: var(--il-radius);
    background: var(--il-bg);
}

.il-participa-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: var(--il-meta-size);
    font-weight: 600;
    color: var(--il-text-soft);
}

.il-participa-meter__bar {
    flex: 1;
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--il-surface-strong);
    overflow: hidden;
}

.il-participa-meter__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--il-brand);
}

.il-participa-inst--high .il-participa-meter__fill {
    background: var(--il-success);
}

.il-participa-inst--low .il-participa-meter__fill {
    background: var(--il-accent);
}

.il-participa-inst--none .il-participa-meter__fill {
    background: transparent;
}

.il-participa-inst__sla {
    margin: 0;
    font-size: var(--il-meta-size);
    color: var(--il-muted);
}

/* ---------------------------------------------------------------- CTA band */

.il-participa-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--il-radius);
    background: var(--il-brand);
    color: #ffffff;
}

@media (min-width: 720px) {
    .il-participa-cta {
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }
}

.il-participa-cta__icon {
    display: flex;
    color: rgba(255, 255, 255, 0.85);
}

.il-participa-cta__body {
    flex: 1;
    min-width: 0;
}

.il-participa-cta__title {
    margin: 0 0 3px;
    font-family: var(--il-title-font);
    font-size: var(--il-title-size);
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.il-participa-cta__text {
    margin: 0;
    font-size: var(--il-text-size);
    line-height: 1.5;
    opacity: 0.92;
}

.il-participa-cta .il-participa-button {
    align-self: flex-start;
    flex: none;
    border-color: var(--il-accent);
}

.il-participa-cta a:hover,
.il-participa-cta a:focus-visible {
    color: var(--il-accent-contrast);
}