/* ============================================================================
 * theme.css — tokens de marca ZBrain Sanidad (formacion-sanidad.es)
 *
 * Propósito: desacoplar colores de componentes. Los componentes (producto.css,
 * legacy.css, etc.) usan `var(--color-*)` y este archivo define los valores
 * reales según la marca. Cambiar la paleta visual de sanidad = editar solo
 * este archivo; los componentes quedan intactos.
 *
 * Cargado en el tile `standard` vía `/assets/css/custom/${linea}/theme.css`,
 * antes que cualquier CSS de componente.
 *
 * Paleta: azul médico primario + naranja accent para CTAs.
 * Contraste WCAG AA verificado para text/bg combinations.
 * ============================================================================ */

:root {
    /* === Colores primarios (azul médico ZBrain Sanidad) === */
    --color-primary: #009cb9;
    --color-primary-dark: #007a91;
    --color-primary-light: #e6f7fa;
    --color-primary-rgb: 0, 156, 185;

    /* === Color secundario (navy institucional) === */
    --color-secondary: #1a2b40;
    --color-secondary-dark: #0f1e30;
    --color-secondary-light: #2c3e5c;

    /* === Accent para CTAs y highlights === */
    --color-accent: #ff6b35;
    --color-accent-dark: #e55626;
    --color-accent-light: #ffebd5;

    /* === Texto === */
    --color-text: #1a2b40;
    --color-text-muted: #5a6b7c;
    --color-text-on-primary: #ffffff;
    --color-text-on-dark: #ffffff;

    /* === Fondos === */
    --color-bg: #ffffff;
    --color-bg-soft: #f6f9fb;
    --color-bg-dark: #1a2b40;

    /* === Bordes === */
    --color-border: #e0e6ed;
    --color-border-strong: #c6cfd8;

    /* === Estados semánticos === */
    --color-success: #28a745;
    --color-success-bg: #e8f5e9;
    --color-warning: #ffc107;
    --color-warning-bg: #fff9e6;
    --color-danger: #dc3545;
    --color-danger-bg: #ffebee;
    --color-info: #17a2b8;
    --color-info-bg: #e6f7fa;

    /* === Gradientes base === */
    --color-gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --color-gradient-hero: linear-gradient(135deg, #1a2b40 0%, #0f3460 50%, var(--color-primary) 100%);

    /* === Nombre de marca (para usar en content: var() si hace falta) === */
    --brand-name: "ZBrain Sanidad";
}


/* ============================================================
 * PATRÓN HERO COMPARTIDO — cualquier sección con clase .hero
 * o heros-específicos (via data-attr) usan los mismos dots
 * flotantes. Añadir <span class="hero-dot hero-dot--N"> en el
 * JSP para que la marca tenga identidad visual consistente.
 * ============================================================ */

.hero-dot {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.hero-dot--1 {
    width: 12px; height: 12px; top: 18%; left: 6%;
    background: rgba(var(--color-primary-rgb), 0.5);
    animation: heroDotFloat 5s ease-in-out infinite;
}
.hero-dot--2 {
    width: 18px; height: 18px; bottom: 22%; right: 10%;
    background: rgba(var(--color-primary-rgb), 0.35);
    animation: heroDotFloat 6s ease-in-out infinite 1s;
}
.hero-dot--3 {
    width: 8px; height: 8px; top: 72%; left: 14%;
    background: rgba(255, 255, 255, 0.28);
    animation: heroDotFloat 4s ease-in-out infinite 0.5s;
}
@keyframes heroDotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-dot { animation: none; }
}