/* Componente tarjeta (shell, #53). Solo tokens de style.css.
 * Elevada (por defecto): superficie con sombra suave, como los nodos del ERP.
 * Plana: solo borde. Enlazable: el título lleva el enlace y su ::after cubre
 * la tarjeta; al pasar sube 3px (sin movimiento reducido) y gana sombra y
 * borde fuerte; con foco, el anillo común rodea la tarjeta. */

.pf-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    color: var(--pf-color-text);
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-card);
    transition: box-shadow var(--pf-transition), border-color var(--pf-transition), transform var(--pf-transition);
}

.pf-tarjeta--elevada {
    box-shadow: var(--pf-shadow-md);
}

.pf-tarjeta__media {
    overflow: hidden;
    line-height: 0;
    border-radius: var(--pf-radius-card) var(--pf-radius-card) 0 0;
    background-color: var(--pf-color-bg-alt);
}

.pf-tarjeta__media img,
.pf-tarjeta__media svg {
    display: block;
    width: 100%;
    height: auto;
}

.pf-tarjeta__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--pf-space-xs);
    padding: var(--pf-space-md);
}

.pf-tarjeta__icono {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
    border-radius: var(--pf-radius-round);
}

.pf-tarjeta__antes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pf-space-2xs) var(--pf-space-xs);
}

.pf-tarjeta__etiqueta {
    margin: 0;
}

.pf-tarjeta__titulo {
    margin: 0;
    font-size: var(--pf-text-lg);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
}

.pf-tarjeta__texto {
    color: var(--pf-color-text-soft);
}

.pf-tarjeta__texto > :last-child,
.pf-tarjeta__pie > :last-child {
    margin-bottom: 0;
}

.pf-tarjeta__pie {
    margin-top: auto;
    padding-top: var(--pf-space-2xs);
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

/* Enlazable: el enlace del título cubre la tarjeta. */
.pf-tarjeta__enlace {
    color: var(--pf-color-heading);
    text-decoration: none;
}

.pf-tarjeta__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--pf-radius-card);
}

.pf-tarjeta--enlace:hover {
    border-color: var(--pf-color-border-strong);
    box-shadow: var(--pf-shadow-lg);
}

.pf-tarjeta--enlace:hover .pf-tarjeta__enlace {
    color: var(--pf-color-brand-strong);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: var(--pf-underline-offset);
}

/* Los enlaces del pie quedan por encima del de la tarjeta. */
.pf-tarjeta__pie a {
    position: relative;
    z-index: 1;
}

/* Foco: el anillo rodea la tarjeta entera (donde hay :has; si no, el enlace). */
@supports selector(:has(*)) {
    .pf-tarjeta__enlace:focus-visible {
        outline: none;
    }

    .pf-tarjeta:has(.pf-tarjeta__enlace:focus-visible) {
        outline: 2px solid var(--pf-color-focus);
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pf-tarjeta--enlace:hover {
        transform: translateY(-3px);
    }
}