/* =========================================================
   Verificadores sanitarios
   Estilos específicos de la página verificadores.php
========================================================= */

.veri-card {
    position: relative;
    overflow: hidden;
    min-height: 164px;
    border: 1px solid rgba(81, 78, 74, 0.3);
    border-radius: var(--radius-md);
    background: var(--coepriso-blanco);
    box-shadow:
        0 8px 24px rgba(29, 53, 84, .10),
        0 2px 8px rgba(59, 6, 23, .06);
    transition:
        box-shadow .18s ease,
        transform .18s ease;
}

.veri-card:hover {
    box-shadow:
        0 16px 34px rgba(29, 53, 84, .15),
        0 4px 12px rgba(59, 6, 23, .08);
    transform: translateY(-2px);
}

.veri-card > .grid {
    min-height: inherit;
    gap: 0;
    align-items: stretch;
}

.veri-card > .grid > div:first-child {
    display: flex;
    align-items: stretch;
    padding: 0;
}

.veri-card > .grid > div:last-child {
    padding:1em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .25s ease;
}

.veri-card > .grid > div:last-child::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: -60px;
    z-index: -1;
    width: 230px;
    height: 230px;
    opacity: 0;
    background:
        linear-gradient(
            45deg,
            transparent 46%,
            var(--coepriso-azul) 47%,
            var(--coepriso-azul) 53%,
            transparent 54%
        ),
        linear-gradient(
            -45deg,
            transparent 46%,
            var(--coepriso-naranja) 47%,
            var(--coepriso-naranja) 53%,
            transparent 54%
        );
    background-size: 46px 46px;
    pointer-events: none;
    transition: opacity .25s ease;
}

.veri-card:hover > .grid > div:last-child {
    background-color: var(--coepriso-crema-3);
}

.veri-card:hover > .grid > div:last-child::after {
    opacity: .08;
}

.veri-card > .grid > div:last-child > * {
    position: relative;
    z-index: 1;
}

.veri-photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 164px;
    overflow: hidden;
    border: 0;
    padding: 1em;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--coepriso-azul-700);
    background:
        radial-gradient(
            circle at 50% 26%,
            rgba(255, 255, 255, .82),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--coepriso-azul-50),
            var(--coepriso-crema)
        );
    box-shadow:
        inset -1px 0 0 rgba(29, 53, 84, .10),
        inset 0 0 24px rgba(29, 53, 84, .06);
}

.veri-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 164px;
    object-fit: cover;
    object-position: center;
}

.veri-photo > i,
.veri-photo__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 164px;
    color: var(--coepriso-azul-700);
    font-size: 3.2rem;
    line-height: 1;
}

.veri-photo__fallback i {
    line-height: 1;
}

.veri-data {
    position: relative;
    width: 100%;
    margin: 0;
}

.veri-data dt {
    color: var(--coepriso-gray-900);
    font-size: .88rem;
    font-weight: 900;
    line-height: 1.25;
}

.veri-data dd {
    margin: .12rem 0 .52rem;
    color: var(--coepriso-gray-900);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
}

.veri-data dd:last-child {
    margin-bottom: 0;
}

.veri-data__name {
    min-height: 2.1rem;
    color: var(--coepriso-guinda);
    font-weight: 800;
}

.veri-info-title {
    color: var(--coepriso-guinda);
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 900;
}

@media (max-width: 576px) {
    .veri-card {
        min-height: 138px;
    }

    .veri-card > .grid > div:last-child {
        padding: .85rem .9rem;
    }

    .veri-photo,
    .veri-photo img,
    .veri-photo > i,
    .veri-photo__fallback {
        min-height: 138px;
    }

    .veri-photo > i,
    .veri-photo__fallback {
        font-size: 2.55rem;
    }

    .veri-data dt {
        font-size: .8rem;
    }

    .veri-data dd {
        margin-bottom: .4rem;
        font-size: .76rem;
    }

    .veri-data__name {
        min-height: auto;
    }
}