@import "https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap";

:root {
    --medios-color-primary: #323232;
    --medios-color-primary-dark: #232323;
    --main-urosario: #da0921;
    --color-format-digital: #006d77;
    --color-format-television: #639;
    --color-format-radio: #1d4ed8;
    --color-format-impreso: #b91c1c;
    --color-white: #fff;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e7e7e7;
    --color-gray-300: #dcdcdc;
    --color-gray-400: #9ca3af;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-900: #111827;
    --spacing-2xs: .125rem;
    --spacing-xs: .25rem;
    --spacing-sm: .5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --font-family-base: "Carlito", sans-serif;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --control-height: 2.625rem;
    --control-height-sm: 2.25rem;
    --control-height-xs: 1.875rem;
    --transition-fast: .15s ease-in-out;
    --transition-normal: .2s ease
}

*,
:before,
:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    background-color: #f5f5f5;
    min-height: 100vh;
    margin: 0;
    line-height: 1.5
}

input,
button,
select,
textarea,
optgroup {
    font-family: inherit
}

:focus-visible {
    outline: 2px solid var(--medios-color-primary);
    outline-offset: 2px
}

:focus:not(:focus-visible) {
    outline: none
}

.medios-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    font-family: var(--font-family-base);
    height: 100%;
    transition: all var(--transition-normal);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: visible;
    box-shadow: 0 7px 15px #00000012, 0 0 0 1px #0000000d
}

.medios-card:hover {
    box-shadow: 0 7px 20px #00000029, 0 0 0 1px #00000012
}

.medios-card__content {
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    padding: 0;
    display: flex;
    overflow: visible
}

.medios-card__header {
    padding: var(--spacing-md) var(--spacing-lg)
}

.medios-card__topic-list {
    border-top: 1px solid var(--color-gray-300);
    padding: var(--spacing-sm) var(--spacing-lg);
    justify-self: flex-end
}

.medios-card__title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    -webkit-box-orient: vertical;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--font-size-lg) !important
}

.medios-card__date {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-xs)
}

.medios-card__topic-list ul {
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.medios-card__topic-list li {
    font-size: var(--font-size-sm);
    margin: var(--spacing-xs) 0;
    align-items: center;
    display: inline-flex
}

.medios-card__topic-list li:not(:last-child):after {
    background-color: var(--color-gray-400);
    content: "";
    height: var(--spacing-md);
    margin: 0 var(--spacing-sm);
    width: 1px
}

.medios-card__medium-link {
    color: var(--color-gray-700);
    align-items: center;
    gap: var(--spacing-sm);
    transition: color var(--transition-fast);
    text-decoration: underline;
    display: inline-flex
}

.medios-card__medium-link span {
    font-size: var(--font-size-base)
}

.medios-card__medium-link:hover {
    color: var(--color-gray-900);
    text-decoration: underline
}

.medios-card__medium-link:hover .medios-card__media-icon {
    transform: scale(1.15)
}

.medios-card__media-icon {
    color: var(--color-gray-600);
    transition: transform var(--transition-fast), color var(--transition-fast);
    flex: none
}

.medios-card__media-icon--digital {
    color: var(--color-format-digital)
}

.medios-card__media-icon--television {
    color: var(--color-format-television)
}

.medios-card__media-icon--radio {
    color: var(--color-format-radio)
}

.medios-card__media-icon--impreso {
    color: var(--color-format-impreso)
}

.medios-card__medium-link--digital:hover {
    color: var(--color-format-digital)
}

.medios-card__medium-link--television:hover {
    color: var(--color-format-television)
}

.medios-card__medium-link--radio:hover {
    color: var(--color-format-radio)
}

.medios-card__medium-link--impreso:hover {
    color: var(--color-format-impreso)
}

.filters {
    font-family: var(--font-family-base);
    gap: var(--spacing-md);
    flex-direction: column;
    width: 100%;
    padding: 0;
    display: flex
}

.filters__search-row {
    gap: var(--spacing-md);
    align-items: flex-end;
    width: 100%;
    display: flex
}

.filters__group {
    flex-direction: column;
    display: flex
}

.filters__group--search {
    flex: 12.5rem;
    min-width: 11.25rem
}

.filters__date-group {
    gap: var(--spacing-md);
    align-items: flex-end;
    display: flex
}

.filters__group--month {
    width: 10rem
}

.filters__group--year {
    width: 6.5625rem
}

.filters__label {
    font-size: var(--spacing-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-xs)
}

.filters__input-wrapper {
    align-items: center;
    width: 100%;
    display: flex;
    position: relative
}

.filters__input {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    width: 100%;
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
    height: var(--control-height);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    padding: .625rem 2.5rem .625rem 1.125rem;
    font-family: inherit
}

.filters__input:hover {
    border-color: var(--color-gray-400)
}

.filters__input:focus {
    border-color: var(--medios-color-primary);
    outline: none;
    box-shadow: 0 0 0 3px #32323226
}

.filters__clear-search-btn {
    border-radius: var(--radius-full);
    background-color: var(--color-gray-300);
    width: 1.375rem;
    height: 1.375rem;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: absolute;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%)
}

.filters__clear-search-btn:hover {
    background-color: var(--color-gray-400);
    color: var(--color-gray-900)
}

.filters__search-header {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex
}

.filters__actions {
    flex-shrink: 0;
    align-items: flex-end;
    display: flex
}

.filters__reset-btn {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    height: var(--control-height);
    padding: 0 var(--spacing-md);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-700);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex
}

.filters__reset-btn svg {
    transition: transform var(--transition-normal);
    flex-shrink: 0
}

.filters__reset-btn:hover {
    background-color: var(--color-gray-50)
}

.filters__reset-btn:hover svg {
    transform: rotate(-45deg)
}

.filters__reset-btn--mobile {
    display: none
}

.filters__select-wrapper {
    align-items: center;
    width: 100%;
    display: flex;
    position: relative
}

.filters__select {
    width: 100%;
    height: var(--control-height);
    padding: var(--spacing-sm) 2.25rem var(--spacing-sm) 1.125rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-full);
    background-color: var(--color-gray-50);
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
    cursor: pointer;
    appearance: none;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal)
}

.filters__select:hover {
    border-color: var(--color-gray-400)
}

.filters__select:focus {
    border-color: var(--medios-color-primary);
    outline: none;
    box-shadow: 0 0 0 3px #32323226
}

.filters__select-arrow {
    pointer-events: none;
    color: var(--color-gray-600);
    position: absolute;
    right: .875rem
}

.filters__report-wrapper {
    flex-shrink: 0;
    align-items: flex-end;
    margin-left: auto;
    display: flex
}

.filters__report-btn {
    align-items: center;
    gap: var(--spacing-sm);
    height: var(--control-height);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--main-urosario);
    color: var(--main-urosario);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-normal);
    background-color: #da09210a;
    padding: 0 1.25rem;
    text-decoration: none;
    display: inline-flex
}

.filters__report-btn:hover {
    background-color: var(--main-urosario);
    color: var(--color-white);
    transform: translateY(-1px)
}

.filters__report-btn:hover .filters__report-icon {
    transform: translateY(1px)
}

.filters__report-icon {
    transition: transform var(--transition-normal);
    flex-shrink: 0
}

.filters__bottom-row {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    width: 100%;
    display: flex
}

.filters__chips-section {
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    flex-direction: column;
    display: flex
}

.filters__chips-list {
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    display: flex
}

.filters__chip {
    align-items: center;
    gap: var(--spacing-sm);
    padding: .4375rem var(--spacing-md);
    height: var(--control-height-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-700);
    transition: all var(--transition-normal);
    -webkit-user-select: none;
    user-select: none;
    font-family: inherit;
    display: inline-flex
}

.filters__chip svg {
    color: currentColor;
    width: .9375rem;
    height: .9375rem;
    transition: transform var(--transition-normal), color var(--transition-normal);
    flex-shrink: 0
}

.filters__chip:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-gray-900)
}

.filters__chip:hover svg {
    transform: scale(1.08)
}

.filters__chip--digital svg {
    color: var(--color-format-digital)
}

.filters__chip--television svg {
    color: var(--color-format-television)
}

.filters__chip--radio svg {
    color: var(--color-format-radio)
}

.filters__chip--impreso svg {
    color: var(--color-format-impreso)
}

.filters__chip--digital:hover:not(.filters__chip--active) {
    border-color: var(--color-format-digital);
    color: var(--color-format-digital);
    background-color: #006d7714
}

.filters__chip--television:hover:not(.filters__chip--active) {
    border-color: var(--color-format-television);
    color: var(--color-format-television);
    background-color: #66339914
}

.filters__chip--radio:hover:not(.filters__chip--active) {
    border-color: var(--color-format-radio);
    color: var(--color-format-radio);
    background-color: #1d4ed814
}

.filters__chip--impreso:hover:not(.filters__chip--active) {
    border-color: var(--color-format-impreso);
    color: var(--color-format-impreso);
    background-color: #b91c1c14
}

.filters__chip--active {
    font-weight: var(--font-weight-regular);
    color: var(--color-white) !important
}

.filters__chip--active svg {
    color: var(--color-white) !important
}

.filters__chip--all.filters__chip--active {
    background-color: var(--medios-color-primary);
    border-color: var(--medios-color-primary)
}

.filters__chip--all.filters__chip--active:hover {
    background-color: var(--medios-color-primary-dark);
    border-color: var(--medios-color-primary-dark)
}

.filters__chip--digital.filters__chip--active {
    background-color: var(--color-format-digital);
    border-color: var(--color-format-digital)
}

.filters__chip--television.filters__chip--active {
    background-color: var(--color-format-television);
    border-color: var(--color-format-television)
}

.filters__chip--radio.filters__chip--active {
    background-color: var(--color-format-radio);
    border-color: var(--color-format-radio)
}

.filters__chip--impreso.filters__chip--active {
    background-color: var(--color-format-impreso);
    border-color: var(--color-format-impreso)
}

@media (width<=768px) {
    .filters {
        gap: var(--spacing-md)
    }

    .filters__search-row {
        gap: var(--spacing-sm);
        flex-direction: column;
        width: 100%;
        display: flex
    }

    .filters__group--search {
        flex: none;
        width: 100%;
        min-width: 0
    }

    .filters__search-header {
        width: 100%;
        margin-bottom: var(--spacing-xs);
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    .filters__search-header .filters__label {
        margin-bottom: 0
    }

    .filters__label {
        font-size: var(--font-size-sm)
    }

    .filters__reset-btn--mobile {
        align-items: center;
        gap: var(--spacing-xs);
        height: var(--control-height-xs);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        padding: 0 .625rem;
        display: inline-flex !important
    }

    .filters__reset-btn--mobile:hover,
    .filters__reset-btn--mobile:active {
        background-color: var(--color-white);
        color: var(--color-gray-900);
        border-color: var(--color-gray-400)
    }

    .filters__actions--desktop {
        display: none !important
    }

    .filters__date-group {
        gap: var(--spacing-sm);
        flex: none;
        width: 100%;
        display: flex
    }

    .filters__group--month {
        flex: 1;
        width: auto;
        min-width: 0
    }

    .filters__group--year {
        flex: 0 0 6.25rem;
        width: 6.25rem;
        min-width: 5.3125rem
    }

    .filters__bottom-row {
        gap: var(--spacing-md);
        flex-direction: column;
        width: 100%;
        display: flex
    }

    .filters__chips-section {
        width: 100%;
        margin-top: 0
    }

    .filters__chips-list {
        gap: var(--spacing-xs);
        padding-bottom: var(--spacing-xs);
        flex-wrap: wrap
    }

    .filters__chips-list::-webkit-scrollbar {
        display: none
    }

    .filters__chip {
        font-size: var(--font-size-xs);
        flex-shrink: 0
    }

    .filters__report-wrapper {
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-2xs)
    }

    .filters__report-btn {
        width: 100%;
        font-size: var(--font-size-sm);
        justify-content: center
    }
}

@media (width<=520px) {
    .filters__group--year {
        flex: 0 0 5.75rem;
        width: 5.75rem
    }

    .filters__input {
        padding-left: var(--spacing-md);
        font-size: var(--font-size-xs);
        padding-right: 2.25rem
    }

    .filters__select {
        font-size: var(--font-size-xs);
        padding-left: .875rem;
        padding-right: 1.85rem
    }

    .filters__select-arrow {
        right: .625rem
    }

    .filters__report-btn {
        font-size: var(--font-size-xs);
        padding: 0 .875rem
    }
}

.pagination {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-xl);
    display: flex
}

.pagination__list {
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.pagination__item {
    display: flex
}

.pagination__item--dots {
    padding: var(--spacing-sm) var(--spacing-xs);
    color: var(--color-gray-400);
    font-weight: var(--font-weight-medium)
}

.pagination__button {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--medios-color-primary);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-fast);
    font-family: var(--font-family-base);
    border-radius: var(--radius-full);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.pagination__button:hover:not(:disabled) {
    border-color: var(--medios-color-primary);
    color: var(--medios-color-primary-dark);
    background: #6e6d6e1a
}

.pagination__button:focus {
    outline: none;
    box-shadow: 0 0 0 3px #003d8233
}

.pagination__button:disabled:not(.pagination__button--active) {
    opacity: .5;
    cursor: not-allowed
}

.pagination__button--active {
    background-color: var(--medios-color-primary);
    border-color: var(--medios-color-primary);
    color: #fff
}

.pagination__button--active:hover:not(:disabled) {
    background-color: var(--medios-color-primary-dark);
    border-color: var(--medios-color-primary-dark);
    color: #fff
}

.pagination__button--prev,
.pagination__button--next {
    gap: var(--spacing-sm);
    color: var(--color-gray-700)
}

@media (width<=640px) {
    .pagination {
        gap: var(--spacing-xs)
    }

    .pagination__button {
        min-width: 2rem;
        height: 2rem;
        padding: var(--spacing-sm)
    }
}

.espacios__filters {
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 7px 29px #64646f33
}

.container {
    padding: var(--spacing-xl)
}

.medios-cards-grid {
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    grid-template-columns: repeat(3, 1fr);
    display: grid
}

@media (width<=768px) {
    .container {
        padding: var(--spacing-md)
    }

    .espacios__filters {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg)
    }

    .medios-cards-grid {
        gap: var(--spacing-lg);
        grid-template-columns: 1fr
    }
}

@media (width>=769px) and (width<=1024px) {
    .medios-cards-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width>=1025px) and (width<=1280px) {
    .medios-cards-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}