/* ===============================================================
   CPT Blocks Plugin – cptb-frontend.css
   Estilos del frontend independientes del tema.
   =============================================================== */

/* ─── 1. VARIABLES CSS GLOBALES ──────────────────────────────── */
:root {
    --gp-color-primario:    #1a73e8;
    --gp-color-secundario:  #f4a100;
    --gp-color-texto:       #1a1a1a;
    --gp-color-fondo:       #ffffff;
    --gp-color-borde:       #e0e0e0;
    --gp-radius:            6px;
    --gp-sombra:            0 2px 8px rgba(0,0,0,.08);
    --gp-transicion:        .2s ease;
    --gp-fuente-base:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --gp-fuente-heading:    var(--gp-fuente-base);
    --gp-max-ancho:         1200px;
}

/* ─── 2. BOTONES ─────────────────────────────────────────────── */
.gp-btn {
    display: inline-block;
    padding: .6em 1.4em;
    border-radius: var(--gp-radius);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: opacity var(--gp-transicion), transform var(--gp-transicion);
    cursor: pointer;
    border: none;
}
.gp-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}
.gp-btn--primary   { background: var(--gp-color-primario);   color: #fff; }
.gp-btn--secondary { background: var(--gp-color-secundario); color: #fff; }
.gp-btn--danger    { background: #d93025;                    color: #fff; }

/* ─── 3. GRID DE TARJETAS (shortcode) ────────────────────────── */
.gp-grid {
    display: grid;
    gap: 1.5rem;
}
.gp-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.gp-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.gp-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .gp-grid--cols-2,
    .gp-grid--cols-3,
    .gp-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .gp-grid--cols-3,
    .gp-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── 4. TARJETA (shortcode) ─────────────────────────────────── */
.gp-card {
    background: var(--gp-color-fondo);
    border: 1px solid var(--gp-color-borde);
    border-radius: var(--gp-radius);
    overflow: hidden;
    box-shadow: var(--gp-sombra);
    transition: box-shadow var(--gp-transicion), transform var(--gp-transicion);
    display: flex;
    flex-direction: column;
}
.gp-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    transform: translateY(-3px);
}
.gp-card__imagen img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.gp-card__contenido {
    padding: 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.gp-card__titulo {
    font-size: 1.1rem;
    margin: 0;
}
.gp-card__titulo a {
    text-decoration: none;
    color: inherit;
}
.gp-card__titulo a:hover {
    color: var(--gp-color-primario);
}
.gp-card__extracto {
    flex: 1;
    font-size: .95rem;
    color: #555;
}

/* ─── 5. AVISOS (shortcode) ──────────────────────────────────── */
.gp-aviso {
    padding: 1rem 1.25rem;
    border-radius: var(--gp-radius);
    border-left: 4px solid currentColor;
    margin-block: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.gp-aviso--info    { background: #e8f0fe; color: #1557b0; }
.gp-aviso--success { background: #e6f4ea; color: #1e6e3e; }
.gp-aviso--warning { background: #fef7e0; color: #8a6004; }
.gp-aviso--error   { background: #fce8e6; color: #a50e0e; }

/* ─── 6. IFRAME RESPONSIVO ───────────────────────────────────── */
.gp-iframe-wrapper {
    max-width: 100%;
    margin-block: 1.25rem;
}