/* ─── Variables ────────────────────────────────── */
:root {
    --entidad-rojo:        #D32F2F;
    --entidad-rojo-hover:  #B71C1C;
    --entidad-rojo-light:  #FFF3F3;
    --entidad-rojo-border: #F5C0C0;
    --entidad-rojo-text:   #991B1B;

    --entidad-azul:         #0B1F3B; /* Navy principal */
    --entidad-azul-hover:   #08172C; /* Más oscuro para hover */
    --entidad-azul-light:   #F1F6FF; /* Fondo suave (cards, badges) */
    --entidad-azul-border:  #C7D7F2; /* Borde suave */
    --entidad-azul-text:    #0A1B33; /* Texto fuerte (títulos) */

    --entidad-radio:       12px;
    --entidad-sombra-rojo-hover: 0 4px 16px rgba(211, 47, 47, 0.14);
    --entidad-sombra-azul-hover: 0 4px 16px #1e457d;
}

/* ─── Buscador de entidades ──────────────────────── */
.entidad-search {
    display: flex;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto 1.25rem;
}

.entidad-search__box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--entidad-azul-border);
    border-radius: var(--entidad-radio);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.entidad-search__box:focus-within {
    border-color: var(--entidad-azul);
    box-shadow: 0 0 0 3px rgba(11, 31, 59, 0.08);
}

.entidad-search__icon {
    flex-shrink: 0;
    color: #9CA3AF;
}

.entidad-search__box:focus-within .entidad-search__icon {
    color: var(--entidad-azul);
}

.entidad-search__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    padding: 10px 0;
    color: #1a1a1a;
    background: transparent;
    min-width: 0;
}

.entidad-search__input::placeholder {
    color: #9CA3AF;
}

.entidad-search__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    border: none;
    border-radius: var(--entidad-radio);
    background: var(--astro-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.entidad-search__btn:hover {
    background: var(--entidad-azul-hover);
}

@media (max-width: 639px) {
    .entidad-search {
        flex-direction: column;
    }

    .entidad-search__btn {
        justify-content: center;
        padding: 10px 18px;
    }
}

.entidad-search__count {
    font-size: 12px;
    color: #1a1a1a;
    white-space: nowrap;
    flex-shrink: 0;
}

.entidad-empty {
    text-align: center;
    color: #9CA3AF;
    font-size: 14px;
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ─── Grid de entidades ─────────────────────────
    Desktop  : 4 columnas
    Tablet   : 3 columnas  (< 1024px)
    Mobile L : 2 columnas  (< 640px)
    Mobile S : 1 columna   (< 380px)  ← fácil de cambiar
────────────────────────────────────────────────── */
.entidad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1023px) {
    .entidad-grid {
    grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 639px) {
    .entidad-grid {
    grid-template-columns: repeat(2, 1fr);
    }
}

/* Para forzar 1 columna en móvil pequeño, cambia 380px al breakpoint que necesites */
@media (max-width: 480px) {
    .entidad-grid {
    grid-template-columns: 1fr;
    }
}

/* ─── Card ──────────────────────────────────────── */
.entidad-card {
    background: #FFFFFF;
    border: 0.5px solid #B5D4F4;
    border-radius: var(--entidad-radio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.entidad-card:hover,
.entidad-card:focus-visible {
    border-color: #185FA5;
    box-shadow: 0 4px 8px #1e457d;
    transform: translateY(-2px);
    outline: none;
}

/* ─── Franja superior ───────────────────────────── */
.entidad-card__franja {
    height: 3px;
    background: var(--entidad-azul);
    flex-shrink: 0;
}

/* ─── Cuerpo ────────────────────────────────────── */
.entidad-card__cuerpo {
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

/* ─── Contenedor del ícono/imagen ───────────────── */
.entidad-card__icono {
    width: auto;
    height: 120px;
    background: var(--entidad-azul-light);
    border: 0.5px solid var(--entidad-azul-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.entidad-card__icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

/* ─── Nombre de la entidad ──────────────────────── */
.entidad-card__nombre {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #1A1A1A;
    /* Clamp para alinear cards de distinta longitud de texto */
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Pill de plazas ────────────────────────────── */
.entidad-card__plazas {
    /* background: var(--entidad-azul-light);
    color: var(--entidad-azul-text); */
    background: #0C447C;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 99px;
    border: 0.5px solid var(--entidad-azul-border);
    white-space: nowrap;
}

/* ─── CTA footer ────────────────────────────────── */
.entidad-card__cta {
    border-top: 0.5px solid #B5D4F4;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    gap: 6px;
    background: #F4F8FD;
    flex-shrink: 0;
}

.entidad-card__cta span {
    font-size: 12px;
    color: #185FA5;
    font-weight: 500;
}

.entidad-card__cta svg {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.entidad-card:hover .entidad-card__cta svg {
    transform: translateX(3px);
}