/*
 * Public fact sheet of an ANP (resources/views/public/buscador/anp_main_content.blade.php)
 * on the Sistema Nacional de Diseño: guinda palette and tokens from
 * resources/css/public.css (--gama*, --neutro*). Buttons are the SND ones
 * (boton__primario / boton__secundario); this sheet only lays them out.
 * Everything hangs from .sig-ficha. Mobile first.
 */

.sig-ficha {
    --sf-principal: var(--principal, #611232);
    --sf-acento: var(--gama600, #9B2247);
    --sf-suave: var(--gama100, #F3E4E9);
    --sf-borde-hover: var(--gama300, #CE92A6);
    --sf-texto: var(--neutro800, #161A1D);
    --sf-secundario: var(--neutro700, #434343);
    --sf-gris: var(--neutro600, #767676);
    --sf-linea: var(--neutro400, #DDDDDD);
    --sf-fondo: var(--neutro300, #F3F3F3);
    --sf-exito: var(--verde500, #086308);

    margin: 40px 0 8px;
    color: var(--sf-texto);
    text-align: left;
}

.sig-ficha time {
    color: inherit;
    font-size: inherit;
}

/* --- Header card: category, name, summary and actions --------------------- */

.sig-ficha__encabezado {
    padding: 20px 16px 8px;
    border: 1px solid var(--sf-linea);
    border-top: 4px solid var(--sf-acento);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--dropLV1, 0 2px 4px rgba(0, 0, 0, .15));
}

.sig-ficha__categoria {
    margin: 0 0 4px;
    color: var(--sf-acento);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    text-transform: uppercase;
}

.sig-ficha .sig-ficha__nombre {
    margin-bottom: 8px;
    color: var(--sf-texto);
    overflow-wrap: anywhere;
}

.sig-ficha__resumen {
    margin: 0 0 20px;
    color: var(--sf-secundario);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.sig-ficha__acciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sig-ficha__boton .bi {
    font-size: 18px;
    line-height: 1;
}

/* «Copiar enlace» live region: it keeps its height so nothing jumps. */
.sig-ficha__copiado {
    min-height: 24px;
    margin: 8px 0;
    color: var(--sf-exito);
    font-size: .9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sig-ficha__copiado--error {
    color: var(--sf-principal);
}

.sig-ficha__copiado-url {
    user-select: all;
    font-weight: 600;
}

/* --- Sections (title with the short guinda bar of the gob.mx graphics) ---- */

.sig-ficha__seccion {
    margin-top: 40px;
}

/* Inline (not flex): a long title wraps like text and the icon and count stay
   next to their words, also on phones. */
.sig-ficha .sig-ficha__seccion-titulo {
    position: relative;
    display: block;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sf-linea);
    color: var(--sf-texto);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}

.sig-ficha .sig-ficha__seccion-titulo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 48px;
    height: 5px;
    background: var(--sf-acento);
}

.sig-ficha__seccion-titulo .bi {
    margin-right: 6px;
    color: var(--sf-acento);
    font-size: 1.25rem;
    vertical-align: -2px;
}

.sig-ficha__conteo {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    vertical-align: 2px;
    border-radius: 999px;
    background: var(--sf-suave);
    color: var(--sf-principal);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
}

/* --- Resource cards -------------------------------------------------------- */

.sig-ficha__rejilla {
    display: grid;
    /* min(): on a narrow phone the column never overflows the screen. */
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sig-ficha__tarjeta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--sf-linea);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--dropLV1, 0 2px 4px rgba(0, 0, 0, .15));
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sig-ficha__tarjeta:hover,
.sig-ficha__tarjeta:focus-within {
    border-color: var(--sf-borde-hover);
    box-shadow: var(--dropLV2, 0 4px 8px rgba(0, 0, 0, .15));
}

.sig-ficha__cuerpo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.sig-ficha__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--sf-suave);
    color: var(--sf-acento);
    font-size: 22px;
}

.sig-ficha__textos {
    min-width: 0;
}

.sig-ficha .sig-ficha__recurso {
    margin: 0;
    color: var(--sf-texto);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sig-ficha__subtitulo {
    margin: 2px 0 0;
    color: var(--sf-secundario);
    font-size: .875rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.sig-ficha__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 8px 0 0;
    color: var(--sf-gris);
    font-size: .875rem;
    line-height: 1.4;
}

.sig-ficha__formato {
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--sf-fondo);
    color: var(--sf-secundario);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* SND secondary button, full width on phones and aligned to the bottom. */
.sig-ficha .sig-ficha__accion {
    width: 100%;
    min-height: 44px;
    margin-top: auto;
}

.sig-ficha__accion .bi {
    font-size: 18px;
    line-height: 1;
}

/* --- No resources (SND "mensaje informativo", info variant) --------------- */

.sig-ficha__vacio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 24px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--azul500, #224497);
    border-radius: 8px;
    background: var(--azul100, #EDF2FE);
}

.sig-ficha__vacio .bi {
    flex: 0 0 auto;
    color: var(--azul500, #224497);
    font-size: 20px;
    line-height: 1.3;
}

.sig-ficha__vacio p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- From 768px: buttons side by side, actions sized to their text --------- */

@media (min-width: 768px) {
    .sig-ficha__encabezado {
        padding: 24px 24px 12px;
    }

    .sig-ficha__acciones {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sig-ficha__rejilla {
        gap: 16px;
    }

    .sig-ficha .sig-ficha__accion {
        align-self: flex-start;
        width: auto;
    }

    .sig-ficha .sig-ficha__seccion-titulo {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sig-ficha__tarjeta {
        transition: none;
    }
}