/*
Theme Name: SQM Nutrition Academy
Theme URI: https://github.com/somosforma/sqm-nutrition-academy
Author: SQM Nutrition Academy
Description: Walking-skeleton theme for SQM Nutrition Academy — WordPress template hierarchy + minimal styling on top of Bootstrap 5 (CDN). Zero business logic (see plugin-lms-sqm); this file's only job is presentation. NOT final design — see docs/architecture/mapeo_scf_paginas_publicas.md and docs/architecture/capturas-diseno/ for the real design reference this will eventually be replaced with.
Version: 0.1.0
Text Domain: sqm-course-theme
Requires PHP: 7.4
*/
.sqm-video-notice-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #F0F6FF;
    border: 1px solid #D0E2FF;
    border-left: 4px solid #0040A8;
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 12px;
    box-shadow: 0 1px 3px rgba(0, 64, 168, 0.05);
    transition: all 0.2s ease;
}

.sqm-video-notice-icon {
    color: #0040A8;
    flex-shrink: 0;
    margin-top: 2px;
}

.sqm-video-notice-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sqm-video-notice-title {
    color: #0B2545;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.25;
}

.sqm-video-notice-text {
    color: #475569;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

.sqm-video-notice-text .highlight-blue {
    color: #0040A8;
    font-weight: 600;
}

@media (max-width: 576px) {
    .sqm-video-notice-box {
        padding: 8px 10px;
        gap: 8px;
    }

    .sqm-video-notice-title {
        font-size: 0.8rem;
    }

    .sqm-video-notice-text {
        font-size: 0.75rem;
    }
}