/* ============================================================================
   ESTILOS NUEVOS — Soluciones KRG
   ----------------------------------------------------------------------------
   Archivo NUEVO. No reemplaza a style.css ni lo modifica: se carga DESPUÉS
   para agregar únicamente lo nuevo (el enlace de las demos).

   Si algún día quieres tener todo en un solo archivo, basta con pegar el
   contenido de aquí al final de style.css y borrar la línea <link> del HTML.
   ============================================================================ */

/* --- Fila de botones al pie de cada tarjeta de servicio --- */
.acciones-tarjeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* --- Enlace "Revisa una demo aquí" (estilo botón secundario) --- */
.demo-link {
    display: inline-block;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--primary-color);
    background-color: transparent;
    border: 2px solid var(--primary-color);
    padding: 6px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.demo-link:hover {
    background-color: var(--primary-color);
    color: var(--card-bg);
    transform: translateY(-2px);
}

/* --- Aviso de que la tarjeta viene administrada desde el panel --- */
.tarjeta-oculta {
    display: none !important;
}

/* --- Acciones de la barra de navegación (acceso al panel + modo oscuro) --- */
.nav-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Enlace pequeño y discreto de acceso al panel de administración --- */
.enlace-admin {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.5;
    text-decoration: none;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
    transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.enlace-admin:hover {
    opacity: 1;
    color: var(--primary-color);
    border-color: var(--primary-color);
}