:root {
    /* 🎨 Giallo */
  --yellow-light: #FFF8DC;
  --yellow-primary: #FFD700;
  --yellow-secondary: #FFC300;
  --yellow-dark: #B8860B;

  /* 🎨 Blu */
  --blue-light: #6fa1eb;      /* azzurro molto chiaro */
  --blue-primary: #007BFF;    /* blu vivo (bootstrap base) */
  --blue-secondary: #0056B3;  /* blu più scuro */
  --blue-dark: #003366;       /* blu notte */

  /* 🔲 Overlay (invariati) */
  --black-overlay-85: rgba(0, 0, 0, 0.85);
  --black-overlay-70: rgba(0, 0, 0, 0.70);
    
    /* Card Search */
   --search-card-bg: rgba(255, 215, 0, 0.08); /* giallo chiaro semitrasparente */
   --search-card-border: var(--yellow-primary);

  /* === Accordion Generali === */
  --accordion-general-bg: var(--neutral-white); /* azzurro pastello */
  --accordion-general-title-bg: rgba(0, 102, 204, 0.85); /* blu medio */
  --accordion-general-title-text: var(--yellow-primary);
  --accordion-general-body-text: var(--neutral-black);

  /* === Accordion Sidebar === */
  --accordion-sidebar-bg: rgba(0, 48, 80, 0.75); /* blu scuro */
  --accordion-sidebar-title-bg: rgba(0, 38, 77, 0.85); /* blu profondo */
  --accordion-sidebar-title-text: var(--yellow-primary);
  --accordion-sidebar-body-text: var(--yellow-primary);

  /* Sezioni e blocchi generici */
  --mb4-bg: rgba(247, 244, 226, 1);

  /* Card */
    --card-body-bg: rgba(255, 253, 129, 0.43); /* blu navy trasparente */
    --card-border-color: var(--yellow-primary);
    --card-border-radius: var(--border-radius);
    --card-text-color: var(--neutral-black);

  /* === Topbar Light === */
  --topbar-bg-light: rgba(0, 48, 80, 0.75); /* blu scuro */
  --topbar-text-light: var(--neutral-black);
  --topbar-border-light: var(--yellow-primary);
  --topbar-link-light: var(--yellow-primary);
  --topbar-link-hover-light: var(--yellow-dark);

  /* Alias generici usati nel template */
  --topbar-bg: var(--topbar-bg-light);
  --topbar-text: var(--topbar-text-light);
  --topbar-border: var(--topbar-border-light);
  --topbar-link: var(--topbar-link-light);
  --topbar-link-hover: var(--topbar-link-hover-light);
  --topbar-search-bg: var(--neutral-white);
  --topbar-search-text: var(--neutral-black);
  --topbar-btn-bg: var(--neutral-white);
  --topbar-btn-text: var(--neutral-black);
  --topbar-btn-border: var(--yellow-primary);

  /* Sidebar */
  --sidebar-bg: var(--mb4-bg); /* blu scuro */
  --sidebar-text: var(--blue-primary);
  --sidebar-text-active: var(--blue-secondary);

  /* 🔥 Rosso */
  --red-light: #FFB6B6;
  --red-primary: #FF4D4D;
  --red-dark: #B22222;

  /* ✅ Verde */
  --green-light: #B6FFB6;
  --green-primary: #32CD32;
  --green-dark: #006400;

  /* 🖤 Neutri (invariati) */
  --neutral-black: #000000;
  --neutral-white: #FFFFFF;

  /* 🎨 Tema base */
  --background-color: var(--neutral-white);
  --text-color: var(--neutral-black);

  /* Altro */
  --border-radius: 8px;
    --font-family: 'Averia Libre', cursive;
  
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 🎨 Giallo */
    --yellow-light: #FFF8DC;
    --yellow-primary: #FFD700;
    --yellow-secondary: #FFC300;
    --yellow-dark: #B8860B;

    /* 🔲 Overlay */
    --black-overlay-85: rgba(0, 0, 0, 0.85);
    --black-overlay-70: rgba(0, 0, 0, 0.70);

    /* === Accordion Generali (Dark) === */
    --accordion-general-bg: rgba(0, 0, 0, 0.65);
    --accordion-general-title-bg: rgba(0, 0, 0, 0.75);
    --accordion-general-title-text: var(--yellow-primary);
    --accordion-general-body-text: var(--yellow-primary);

    /* === Accordion Sidebar (Dark) === */
    --accordion-sidebar-bg: rgba(0, 0, 0, 0.65);
    --accordion-sidebar-title-bg: rgba(0, 0, 0, 0.75);
    --accordion-sidebar-title-text: var(--yellow-primary);
    --accordion-sidebar-body-text: var(--yellow-primary);

    /* Sezioni e blocchi generici */
    --mb4-bg: rgba(0, 0, 0, 0.65);

    /* Card */
    --card-body-bg: var(--neutral-black);
    --card-border-color: var(--yellow-primary);
    --card-border-radius: var(--border-radius);
    
    /* Card Search Dark */
    --search-card-bg: rgba(255, 215, 0, 0.15);
    --search-card-border: var(--yellow-secondary);

    /* === Topbar Dark === */
    --topbar-bg-dark: var(--neutral-black);
    --topbar-text-dark: var(--yellow-primary);
    --topbar-border-dark: var(--yellow-primary);
    --topbar-link-dark: var(--yellow-primary);
    --topbar-link-hover-dark: var(--yellow-secondary);

    /* Alias generici usati nel template */
    --topbar-bg: var(--topbar-bg-dark);
    --topbar-text: var(--topbar-text-dark);
    --topbar-border: var(--topbar-border-dark);
    --topbar-link: var(--topbar-link-dark);
    --topbar-link-hover: var(--topbar-link-hover-dark);
    --topbar-search-bg: var(--neutral-black);
    --topbar-search-text: var(--yellow-primary);
    --topbar-btn-bg: var(--yellow-primary);
    --topbar-btn-text: var(--neutral-black);
    --topbar-btn-border: var(--yellow-primary);

    /* Sidebar */
    --sidebar-bg: rgba(0, 0, 0, 0.65);
    --sidebar-text: var(--yellow-primary);
    --sidebar-text-active: var(--yellow-secondary);

    /* 🔥 Rosso */
    --red-light: #FFB6B6;
    --red-primary: #FF4D4D;
    --red-dark: #B22222;

    /* ✅ Verde */
    --green-light: #B6FFB6;
    --green-primary: #32CD32;
    --green-dark: #006400;

    /* 🖤 Neutri */
    --neutral-black: rgba(0, 0, 0, 0.65);
    --neutral-white: #FFFFFF;

    /* 🎨 Tema base */
    --background-color: var(--neutral-black);
    --text-color: var(--neutral-white);
  }
}


/* 🎨 Palette sezione Esecuzione Scheda - Pastello */
:root {
  /* Sfondo generale scheda */
  --execplan-bg: #dce7f3; /* azzurro chiaro pastello */

  /* Header esercizio (accordion button) */
  --execplan-header-bg: #ffecb3; /* giallo pastello */
  --execplan-header-text: #5a4e2f; /* marrone tenue per contrasto */

  /* Corpo esercizio */
  --execplan-body-bg: var(--neutral-white); /* azzurro pastello più saturo */
  --execplan-body-text: #3a3a3a; /* grigio scuro leggibile */

  /* Bordo card esercizio */
  --execplan-border-color: #ffe082; /* giallo più scuro pastello */

  /* Colori stato esercizio */
  --execplan-finished-text: #66bb6a; /* verde pastello */
  --execplan-inprogress-text: #fbc02d; /* giallo caldo */
  --execplan-pending-text: #607d8b; /* grigio-blu tenue */

  /* Pulsanti */
  --execplan-btn-primary-bg: #ffecb3;
  --execplan-btn-primary-text: #5a4e2f;
  --execplan-btn-secondary-bg: transparent;
  --execplan-btn-secondary-border: #ffe082;
  --execplan-btn-secondary-text: #5a4e2f;

  /* Hover */
  --execplan-hover-bg: #ffe082;
  --execplan-hover-text: #3a3a3a;
}


/* === Font locale Averia Libre === */
@font-face{
  font-family:'Averia Libre';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/AveriaLibre-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Averia Libre';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/AveriaLibre-Bold.ttf') format('truetype');
}
/* variabile già usata nel body */
:root{ --font-family:'Averia Libre', cursive; }

body {
  font-family: var(--font-family);
}

/* Video responsive con adattamento desktop/mobile */
.video-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* video standard */
.video-responsive {
  width: 100%;
  height: auto;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* mobile: sempre piena larghezza */
@media (max-width: 768px) {
  .video-responsive {
    max-width: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}
/* Contenitore coerente con i video */
.media-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-radius: 0.5rem;
  overflow: hidden;
}

.media-responsive {
  width: 100%;
  height: auto;
  max-width: 720px;
  object-fit: contain;
}

/* mobile: sempre piena larghezza, no bande nere */
@media (max-width: 768px) {
  .media-responsive {
    max-width: 100%;
    object-fit: cover;
    background-color: transparent;
  }
}