/**
 * Atlante Ecografico - CSS Styles
 * Design System Implementation
 */

/* ==============================================
   CSS VARIABLES (Design System)
   ============================================== */
:root {
    /* Primary Colors */
    --primary: #4285f4;
    --primary-dark: #1a73e8;
    --primary-light: #5a95f5;
    
    /* Severity Colors */
    --normale: #28a745;
    --lieve: #ffc107;
    --moderato: #fd7e14;
    --grave: #FF0000;
    
    /* Neutrals */
    --gray-light: #f8f9fa;
    --gray-medium: #e9ecef;
    --gray-dark: #666;
    --text: #333;
    --white: #ffffff;
    
    /* Spacing (8px base unit) */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
    --space-xxl: 60px;
    
    /* Typography Scale */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --h1-size: 48px;
    --h2-size: 36px;
    --h3-size: 32px;
    --h4-size: 24px;
    --h5-size: 18px;
    --body-size: 16px;
    --small-size: 14px;
    
    /* Container */
    --container-max-width: 1460px;
}

/* ==============================================
   GLOBAL OVERRIDES
   ============================================== */
body {
    font-family: var(--font-family);
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.page{
    margin-bottom: 0px;
}

/* ==============================================
   HEADER ATLANTE
   ============================================== */
.atlante-header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-medium);
    padding: var(--space-sm) 0;
}

.atlante-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.atlante-header .site-title {
    margin: 0;
}

.atlante-header .site-title a {
    color: var(--primary);
    text-decoration: none;
    font-size: var(--h4-size);
    font-weight: 600;
}

.atlante-navigation .atlante-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-lg);
}

.atlante-navigation .atlante-menu-list a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.atlante-navigation .atlante-menu-list a:hover {
    color: var(--primary);
}

/* ==============================================
   HERO SECTION
   ============================================== */
.hero-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: var(--space-xxl) 0;
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: var(--h1-size);
    font-weight: 700;
    margin: 0 0 var(--space-lg);
    line-height: 1.2;
}

.hero-button {
    display: inline-block;
    background: var(--white);
    color: var(--primary);
    padding: var(--space-sm) var(--space-xl);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--h5-size);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: var(--primary-dark);
}

h1.hero-title a {
    color: white;
    text-decoration: none;
}

/* ==============================================
   ARTICOLAZIONI SECTION
   ============================================== */
.articolazioni-section {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-xxl);
}

.section-title {
    font-size: var(--h2-size);
    font-weight: 700;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.section-description {
    color: var(--gray-dark);
    font-size: var(--body-size);
}

.section-description p {
    margin: 0 0 var(--space-sm);
}

.section-description p:last-child {
    margin-bottom: 0;
}

.articolazioni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    max-width: 1040px;
    margin: 0 auto;
}

.articolazione-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
}

.articolazione-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.articolazione-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-image {
    height: 200px;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image {
    width: 80px;
    height: 80px;
    background: var(--gray-medium);
    border-radius: 50%;
}

.card-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0;
    padding: var(--space-md);
    color: var(--text);
}

/* ==============================================
   FOOTER ATLANTE
   ============================================== */
.atlante-footer {
    background: #2c3e50;
    color: var(--white);
    padding: var(--space-xxl) 0 var(--space-md);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.footer-column {
    
}

.footer-title {
    font-size: var(--h5-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--white);
}

.footer-description {
    color: #bdc3c7;
    line-height: 1.6;
    margin: 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--space-xs);
}

.footer-links a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding-top: var(--space-md);
    text-align: center;
}

.copyright {
    margin: 0;
    color: #95a5a6;
    font-size: var(--small-size);
}

/* ==============================================
   ATLANTE PAGE LAYOUT
   ============================================== */

/* Hero Atlante (più piccolo della homepage) */
.hero-atlante {
    padding: var(--space-xl) 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.hero-atlante .hero-title {
    font-size: var(--h2-size);
    margin: 0;
}

/* Layout principale con sidebar */
.atlante-content {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

.atlante-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* ==============================================
   SIDEBAR ATLANTE
   ============================================== */
.atlante-sidebar {
    background: var(--gray-light);
    border-radius: 12px;
    padding: var(--space-md);
    height: fit-content;
    position: sticky;
    top: var(--space-md);
}

.sidebar-header h2 {
    font-size: var(--h5-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
    text-align: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--gray-medium);
}

/* Menu Sidebar */
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    margin: 0;
}

.sidebar-menu a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--text);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 2px;
}

.sidebar-menu a:hover {
    background: var(--white);
    color: var(--primary);
}

/* Livello 1: Articolazioni */
.sidebar-menu > li > a {
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.sidebar-menu > li > a:hover {
    background: var(--primary-dark);
    color: var(--white);
}

/* Livello 2: Proiezioni */
.sidebar-menu .sub-menu {
    list-style: none;
    margin: 0 0 var(--space-sm) var(--space-sm);
    padding: 0;
}

.sidebar-menu .sub-menu a {
    background: var(--gray-medium);
    margin-left: var(--space-sm);
    font-size: 13px;
}

.sidebar-menu .sub-menu a:hover {
    background: var(--white);
    color: var(--primary);
}

/* Livello 3: Gravità con colori */
.sidebar-menu .sub-menu .sub-menu {
    list-style: none;
    margin: 0 0 var(--space-xs) var(--space-lg);
    padding: 0;
}

.sidebar-menu .sub-menu .sub-menu a {
    background: var(--gray-medium);
    margin-left: var(--space-md);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--white);
}

/* Colori specifici per gravità */
.sidebar-menu a[href*="gravita=normale"] {
    background: var(--normale) !important;
    color: var(--white) !important;
}

.sidebar-menu a[href*="gravita=lieve"] {
    background: var(--lieve) !important;
    color: var(--text) !important;
}

.sidebar-menu a[href*="gravita=moderato"] {
    background: var(--moderato) !important;
    color: var(--white) !important;
}

.sidebar-menu a[href*="gravita=grave"] {
    background: var(--grave) !important;
    color: var(--white) !important;
}

/* Current page highlighting */
.sidebar-menu .current-menu-item > a,
.sidebar-menu .current-menu-ancestor > a {
    background: var(--primary-dark) !important;
    color: var(--white) !important;
}

.sidebar-menu .sub-menu .current-menu-item > a {
    background: var(--primary) !important;
    color: var(--white) !important;
}

/* Stati attivi per gravità */
.sidebar-menu .current-gravita {
    position: relative;
}

.sidebar-menu .current-gravita::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: currentColor;
    border-radius: 0 2px 2px 0;
}

/* Evidenziazione specifica per gravità attiva */
.sidebar-menu a.gravita-active[href*="gravita=normale"] {
    background: var(--normale) !important;
    color: var(--white) !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.sidebar-menu a.gravita-active[href*="gravita=lieve"] {
    background: var(--lieve) !important;
    color: var(--white) !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

.sidebar-menu a.gravita-active[href*="gravita=moderato"] {
    background: var(--moderato) !important;
    color: var(--white) !important;
    box-shadow: 0 0 8px rgba(253, 126, 20, 0.3);
}

.sidebar-menu a.gravita-active[href*="gravita=grave"] {
    background: var(--grave) !important;
    color: var(--white) !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
}

/* Ricerca Avanzata */
.ricerca-avanzata {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-medium);
    text-align: center;
}

.ricerca-link {
    display: block;
    padding: var(--space-sm);
    background: var(--gray-medium);
    color: var(--text);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ricerca-link:hover {
    background: var(--primary);
    color: var(--white);
}

/* ==============================================
   MAIN CONTENT ATLANTE
   ============================================== */
.atlante-main-content {
    min-height: 500px;
}

.atlante-main-content .section-header {
    text-align: left;
    margin-bottom: var(--space-xl);
}

.atlante-main-content .section-title {
    font-size: var(--h3-size);
    margin-bottom: var(--space-md);
}

.atlante-main-content .articolazioni-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.atlante-main-content .articolazione-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-lg);
    transition: all 0.3s ease;
}

.atlante-main-content .articolazione-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.atlante-main-content .card-image {
    height: 300px;
    background: var(--gray-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atlante-main-content .card-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.atlante-main-content .card-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.atlante-main-content .card-description {
    color: var(--gray-dark);
    font-size: var(--body-size);
    line-height: 1.6;
    text-align: left;
}

/* ==============================================
   ARTICOLAZIONE PAGE STYLES
   ============================================== */

/* Diagrammi Anatomici */
.diagrammi-section {
    margin-bottom: var(--space-xxl);
}

.diagrammi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.diagramma-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Sezione Proiezioni */
.proiezioni-section {
    margin-top: var(--space-xxl);
}

.proiezioni-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.proiezioni-description {
    color: var(--gray-dark);
    margin-bottom: var(--space-xl);
    font-size: var(--body-size);
    line-height: 1.6;
}

.proiezioni-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.proiezione-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--space-md);
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-md);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.proiezione-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.proiezione-image {
    height: 120px;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

.proiezione-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proiezione-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.proiezione-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0 0 var(--space-sm);
    color: var(--text);
}

.proiezione-description {
    color: var(--gray-dark);
    font-size: var(--body-size);
    line-height: 1.6;
}

/* ==============================================
   PROIEZIONE PAGE STYLES
   ============================================== */

/* Page Header */
.page-header {
    margin-bottom: var(--space-xl);
}

.page-title {
    font-size: var(--h2-size);
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    color: var(--text);
}

.page-breadcrumb-nav {
    font-size: 14px;
    color: var(--gray-dark);
    margin-bottom: var(--space-xs);
}

.page-breadcrumb-nav a {
    color: var(--primary);
    text-decoration: none;
}

.page-breadcrumb-nav a:hover {
    text-decoration: underline;
}

.zone-breadcrumb {
    font-size: var(--body-size);
    color: var(--gray-dark);
    font-weight: 500;
}

/* Tecnica Section Layout */
.tecnica-section {
    margin-bottom: var(--space-xxl);
}

.tecnica-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-xl);
    align-items: start;
}

.tecnica-content .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.tecnica-text {
    color: var(--gray-dark);
    line-height: 1.6;
}

.video-section {
    position: sticky;
    top: var(--space-md);
}

.video-container {
    background: var(--gray-light);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.video-container iframe,
.video-container video {
    width: 100%;
    height: 100%;
}

/* Zone Anatomiche Grid */
.zona-anatomica {
    margin-bottom: var(--space-xxl);
}

.zona-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.zona-description {
    color: var(--gray-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.5;
}

.zona-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.zona-image-item {
    text-align: center;
}

.zona-image-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-xs);
}

.image-caption {
    font-size: 14px;
    color: var(--gray-dark);
    margin: 0;
    font-style: italic;
}

/* Casi Clinici Section */
.casi-clinici-section {
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--gray-medium);
}

.casi-clinici-section .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-xl);
    color: var(--text);
    text-align: center;
}

.gravita-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    max-width: 950px;
    margin: 0 auto;
}

.gravita-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    border-radius: 12px;
    text-decoration: none;
    color: var(--white);
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 120px;
    text-align: center;
}

.gravita-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--white);
}

.gravita-btn.normale {
    background: var(--normale);
}

.gravita-btn.lieve {
    background: var(--lieve);
    color: var(--text);
}

.gravita-btn.moderato {
    background: var(--moderato);
}

.gravita-btn.grave {
    background: var(--grave);
}

.gravita-label {
    font-size: var(--h4-size);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.gravita-count {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
}

/* ==============================================
   SEARCH PAGE STYLES
   ============================================== */

/* Search Breadcrumb */
.search-breadcrumb {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--gray-light);
    border-radius: 6px;
    font-size: 14px;
}

.filter-tag {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: var(--space-xs);
    font-size: 12px;
    font-weight: 500;
}

.filter-tag.gravita-normale {
    background: var(--normale);
}

.filter-tag.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
}

.filter-tag.gravita-moderato {
    background: var(--moderato);
}

.filter-tag.gravita-grave {
    background: var(--grave);
}

/* Search Form */
.search-form-section {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
}

.search-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text);
    font-size: 14px;
}

.filter-group select,
.filter-group input[type="text"] {
    padding: var(--space-sm);
    border: 1px solid var(--gray-medium);
    border-radius: 4px;
    font-size: 14px;
    background: var(--white);
}

.filter-group select:focus,
.filter-group input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1);
}

.filter-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: end;
}

.search-submit {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.search-submit:hover {
    background: var(--primary-dark);
}

.search-reset {
    color: var(--gray-dark);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--gray-medium);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.search-reset:hover {
    background: var(--gray-light);
    text-decoration: none;
}

/* Search Results */
.search-results-section {
    margin-top: var(--space-xl);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--gray-medium);
}

.results-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.results-count {
    font-size: 14px;
    color: var(--gray-dark);
    font-weight: 500;
}

.no-results {
    text-align: center;
    padding: var(--space-xxl);
    background: var(--gray-light);
    border-radius: 8px;
}

.no-results h4 {
    font-size: var(--h4-size);
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.no-results ul {
    text-align: left;
    max-width: 400px;
    margin: var(--space-md) auto 0;
}

.search-welcome {
    text-align: center;
    padding: var(--space-xxl);
}

.search-welcome h3 {
    font-size: var(--h3-size);
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.search-welcome ul {
    text-align: left;
    max-width: 500px;
    margin: var(--space-lg) auto 0;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

/* STATO DEFAULT - GRIGIO (nessun colore) */
.sidebar-menu .sub-menu .sub-menu a {
    background: var(--gray-medium) !important;
    color: var(--text) !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* ==============================================
   HOVER - MOSTRA I COLORI
   ============================================== */

.sidebar-menu a[href*="gravita=normale"]:hover,
.sidebar-menu a[href*="severity=normal"]:hover {
    background: var(--normale) !important;
    color: var(--white) !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.sidebar-menu a[href*="gravita=lieve"]:hover,
.sidebar-menu a[href*="severity=mild"]:hover {
    background: var(--lieve) !important;
    color: var(--text) !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

.sidebar-menu a[href*="gravita=moderato"]:hover,
.sidebar-menu a[href*="severity=moderate"]:hover {
    background: var(--moderato) !important;
    color: var(--white) !important;
    box-shadow: 0 0 8px rgba(253, 126, 20, 0.3);
}

.sidebar-menu a[href*="gravita=grave"]:hover,
.sidebar-menu a[href*="severity=severe"]:hover {
    background: var(--grave) !important;
    color: var(--white) !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
}

/* ==============================================
   ATTIVO - COLORI PERMANENTI (classe aggiunta da JS)
   ============================================== */

.sidebar-menu a.gravita-active[href*="gravita=normale"],
.sidebar-menu a.gravita-active[href*="severity=normal"] {
    background: var(--normale) !important;
    color: var(--white) !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.4);
}

.sidebar-menu a.gravita-active[href*="gravita=lieve"],
.sidebar-menu a.gravita-active[href*="severity=mild"] {
    background: var(--lieve) !important;
    color: var(--text) !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}

.sidebar-menu a.gravita-active[href*="gravita=moderato"],
.sidebar-menu a.gravita-active[href*="severity=moderate"] {
    background: var(--moderato) !important;
    color: var(--white) !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(253, 126, 20, 0.4);
}

.sidebar-menu a.gravita-active[href*="gravita=grave"],
.sidebar-menu a.gravita-active[href*="severity=severe"] {
    background: var(--grave) !important;
    color: var(--white) !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
}



/* Tablet */
@media (max-width: 768px) {
    :root {
        --h1-size: 36px;
        --h2-size: 28px;
        --h3-size: 24px;
        --space-xxl: 40px;
    }
    
    .atlante-header .header-content {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .atlante-navigation .atlante-menu-list {
        gap: var(--space-md);
    }
    
    .articolazioni-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    /* Atlante Layout Responsive */
    .atlante-layout {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .atlante-sidebar {
        position: static;
        order: 2;
    }
    
    .atlante-main-content {
        order: 1;
    }
    
    /* Proiezione Page Responsive */
    .tecnica-layout {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .video-section {
        position: static;
        order: -1;
    }
    
    .zona-images-grid {
        grid-template-columns: 1fr;
    }
    
    /* Search Page Responsive */
    .search-filters {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --h1-size: 28px;
        --h2-size: 24px;
        --space-xxl: 32px;
    }
    
    .container {
        padding: 0 var(--space-sm);
    }
    
    .hero-section {
        padding: var(--space-xl) 0;
    }
    
    .atlante-navigation .atlante-menu-list {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }
}










/* ==============================================
   SINGLE CASO CLINICO STYLES
   ============================================== */

/* Header Caso Clinico */
.caso-header {
    margin-bottom: var(--space-xl);
}

.caso-title {
    font-size: var(--h2-size);
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    color: var(--text);
}

.page-breadcrumb-nav {
    font-size: 14px;
    color: var(--gray-dark);
    margin-bottom: var(--space-xs);
}

.page-breadcrumb-nav a {
    color: var(--primary);
    text-decoration: none;
}

.page-breadcrumb-nav a:hover {
    text-decoration: underline;
}

.zone-breadcrumb {
    font-size: var(--body-size);
    color: var(--gray-dark);
    font-weight: 500;
    font-style: italic;
}

/* Grid Info Caso (Classificazione + Paziente) */
.caso-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.caso-box {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-lg);
}

.caso-box h3 {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--gray-light);
}

.classificazione-box {
    border-left: 4px solid var(--primary);
}

.paziente-box {
    border-left: 4px solid var(--normale);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--gray-light);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .label {
    font-weight: 600;
    color: var(--gray-dark);
    font-size: var(--small-size);
}

.info-row .value {
    font-weight: 500;
    color: var(--text);
    text-align: right;
}

/* Colori gravità nei valori */
.value.gravita-normale {
    background: var(--normale);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.value.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.value.gravita-moderato {
    background: var(--moderato);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.value.gravita-grave {
    background: var(--grave);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Sezioni Cliniche */
.sezioni-cliniche {
    margin-bottom: var(--space-xxl);
}

.sezione-clinica {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    margin-top: 20px;
}

.sezione-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--primary);
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: var(--space-sm);
}

.sezione-content {
    color: var(--text);
    line-height: 1.6;
}

.sezione-content p {
    margin: 0 0 var(--space-sm);
}

.sezione-content p:last-child {
    margin-bottom: 0;
}

/* Zone Anatomiche Section */
.zone-anatomiche-section {
    margin-top: var(--space-xxl);
}

.zone-anatomiche-section .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-xl);
    color: var(--text);
    text-align: center;
    border-bottom: 2px solid var(--gray-medium);
    padding-bottom: var(--space-md);
}

.zona-anatomica {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.zona-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--primary);
    border-left: 4px solid var(--primary);
    padding-left: var(--space-sm);
}

.zona-description {
    color: var(--gray-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.5;
     
}

/* Caratteristiche Zona */
.zona-caratteristiche {
    margin-bottom: var(--space-lg);
    padding: var(--space-sm);
    background: var(--gray-light);
    border-radius: 6px;
}

.caratteristica-item {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.caratteristica-label {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    min-width: 120px;
}

.caratteristica-value {
    background: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--gray-medium);
}

/* Findings Zona */
.zona-findings {
    background: #f8f9ff;
    border: 1px solid var(--primary-light);
    border-radius: 6px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.zona-findings strong {
    color: var(--primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grid Immagini Zone */
.zona-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.zona-image-item {
    text-align: center;
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-sm);
    transition: all 0.3s ease;
}

.zona-image-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.zona-image-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: var(--space-sm);
}

.image-caption {
    font-size: 13px;
    color: var(--gray-dark);
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}
 



/* ==============================================
   CONFRONTO DIRETTO SECTION
   ============================================== */

.confronto-diretto-section {
    margin: var(--space-xxl) 0;
    padding: var(--space-xl);
    background: #f8f9ff;
    border-radius: 12px;
    border: 1px solid var(--primary-light);
}

.confronto-diretto-section .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--primary);
    text-align: center;
}

.confronto-description {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--gray-dark);
}

.confronto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    max-width: 800px;
    margin: 0 auto;
}

.confronto-card {
    display: block;
    background: var(--white);
    border: 2px solid var(--gray-medium);
    border-radius: 12px;
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s ease;
}

.confronto-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: var(--text);
}

.confronto-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    flex-direction: column;
}

.caso-preview {
    text-align: center;
    flex: 1;
}

.caso-badge {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.caso-badge.gravita-normale {
    background: var(--normale);
    color: var(--white);
}

.caso-badge.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
}

.caso-badge.gravita-moderato {
    background: var(--moderato);
    color: var(--white);
}

.caso-badge.gravita-grave {
    background: var(--grave);
    color: var(--white);
}

.caso-code {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.vs-divider {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 var(--space-md);
}

.confronto-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    background: var(--gray-light);
    border-radius: 6px;
    font-weight: 600;
    color: var(--primary);
}

/* Responsive Confronto Grid */
@media (max-width: 768px) {
    .confronto-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .confronto-card {
        padding: var(--space-md);
    }
}

@media (max-width: 480px) {
    .confronto-preview {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .vs-divider {
        margin: 0;
        transform: rotate(90deg);
    }
}








/* ==============================================
   CASI CORRELATI / CONFRONTO SECTION
   ============================================== */

.casi-correlati-section {
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--gray-medium);
}

.casi-correlati-section .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
    text-align: center;
}

.confronto-description {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--gray-dark);
}

.confronto-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    max-width: 1000px;
    margin: 0 auto;
}

.confronto-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border: 2px solid var(--gray-medium);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s ease;
}

.confronto-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: var(--text);
}

.confronto-icon {
    font-size: 24px;
    min-width: 40px;
    text-align: center;
}

.confronto-content h4 {
    margin: 0 0 4px;
    font-size: var(--h5-size);
    font-weight: 600;
}

.confronto-content p {
    margin: 0;
    font-size: 14px;
    color: var(--gray-dark);
}

/* Stili specifici per tipo di confronto */
.confronto-generale {
    border-color: var(--primary);
}

.confronto-generale:hover {
    border-color: var(--primary-dark);
    background: #f8f9ff;
}

.confronto-gravita.normale {
    border-color: var(--normale);
}

.confronto-gravita.normale:hover {
    border-color: var(--normale);
    background: #f0f8f0;
}

.confronto-gravita.lieve {
    border-color: var(--lieve);
}

.confronto-gravita.lieve:hover {
    border-color: var(--lieve);
    background: #fffdf0;
}

.confronto-gravita.moderato {
    border-color: var(--moderato);
}

.confronto-gravita.moderato:hover {
    border-color: var(--moderato);
    background: #fff8f0;
}

.confronto-gravita.grave {
    border-color: var(--grave);
}

.confronto-gravita.grave:hover {
    border-color: var(--grave);
    background: #fff0f0;
}

.confronto-gravita-globale {
    border-color: var(--primary);
    background: var(--gray-light);
}

.confronto-gravita-globale:hover {
    background: #f0f4ff;
    border-color: var(--primary-dark);
}

/* ==============================================
   RESPONSIVE CASO CLINICO
   ============================================== */

/* Tablet */
@media (max-width: 768px) {
    .caso-info-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .zona-images-grid {
        grid-template-columns: 1fr;
    }
    
    .caratteristica-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .caratteristica-label {
        min-width: auto;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .caso-box {
        padding: var(--space-md);
    }
    
    .zona-anatomica {
        padding: var(--space-md);
    }
    
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .info-row .value {
        text-align: left;
    }
}


















/* ==============================================
   PAGINA CONFRONTO STYLES
   ============================================== */

.confronto-page {
    
}

/* Header Confronto */
.confronto-header {
    margin-bottom: var(--space-xxl);
    text-align: center;
}

.confronto-title-section {
    margin-bottom: var(--space-md);
}

.confronto-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.confronto-summary .caso-badge {
    padding: var(--space-xs) var(--space-md);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.confronto-summary .vs-divider {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

/* Main Grid Confronto */
.confronto-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xxl);
}

.confronto-column {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-lg);
}
/*
.caso-column-1 {
    border-left: 4px solid var(--primary);
}

.caso-column-2 {
    border-left: 4px solid var(--normale);
}*/

.caso-header-card {
    text-align: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--gray-light);
}

.caso-header-card .caso-title {
    margin: 0 0 var(--space-md);
    font-size: var(--h4-size);
    font-weight: 600;
}

.caso-header-card .caso-title a {
    color: var(--text);
    text-decoration: none;
}

.caso-header-card .caso-title a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.caso-badge-large {
    padding: var(--space-sm) var(--space-lg);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.caso-badge-large.gravita-normale {
    background: var(--normale);
    color: var(--white);
}

.caso-badge-large.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
}

.caso-badge-large.gravita-moderato {
    background: var(--moderato);
    color: var(--white);
}

.caso-badge-large.gravita-grave {
    background: var(--grave);
    color: var(--white);
}

/* Info Sections */
.caso-info-section {
    margin-bottom: var(--space-lg);
}

.caso-info-section h4 {
    font-size: var(--h5-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--primary);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--primary-light);
}

.info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: 200px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--gray-light);
}

.info-item:last-child {
    border-bottom: none;
}

.info-item .label {
    font-weight: 600;
    color: var(--gray-dark);
    font-size: 14px;
}

.info-item .value {
    font-weight: 500;
    color: var(--text);
    text-align: right;
}

.info-item .value.gravita-normale {
    background: var(--normale);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.info-item .value.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.info-item .value.gravita-moderato {
    background: var(--moderato);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.info-item .value.gravita-grave {
    background: var(--grave);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Sezioni Confronto Content */
.confronto-section {
    margin-bottom: var(--space-xxl);
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    padding: var(--space-lg);
}

.confronto-section .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-lg);
    color: var(--primary);
    text-align: center;
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: var(--space-md);
}

.confronto-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.content-column {
    
}

.column-header {
    font-size: var(--h5-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
    padding: var(--space-sm);
    background: var(--gray-light);
    border-radius: 6px;
    text-align: center;
}

.content-text {
    color: var(--text);
    line-height: 1.6;
}

.content-text em {
    color: var(--gray-dark);
    font-style: italic;
}

.content-text p {
    margin: 0 0 var(--space-sm);
}

.content-text p:last-child {
    margin-bottom: 0;
}

/* Zone Anatomiche Confronto */
.zona-confronto {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--gray-light);
    border-radius: 6px;
}

.zona-confronto:last-child {
    margin-bottom: 0;
}

.zona-confronto h5 {
    font-size: var(--body-size);
    font-weight: 600;
    margin: 0 0 var(--space-xs);
    color: var(--primary);
}

.zona-confronto p {
    margin: 0 0 var(--space-xs);
    font-size: 14px;
    color: var(--gray-dark);
}

.zona-findings-small {
    font-size: 13px;
    background: #f8f9ff;
    border: 1px solid var(--primary-light);
    border-radius: 4px;
    padding: var(--space-xs);
    margin-top: var(--space-xs);
}

.zona-findings-small strong {
    color: var(--primary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Azioni Confronto */
.confronto-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl) 0;
    border-top: 2px solid var(--gray-medium);
    margin-top: var(--space-xxl);
}

.btn-caso,
.btn-ricerca {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-caso {
    background: var(--primary);
    color: var(--white);
}

.btn-caso:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--white);
}

.btn-ricerca {
    background: var(--gray-medium);
    color: var(--text);
}

.btn-ricerca:hover {
    background: var(--gray-dark);
    color: var(--white);
    text-decoration: none;
}

/* ==============================================
   RESPONSIVE CONFRONTO PAGE
   ============================================== */

/* Tablet */
@media (max-width: 768px) {
    .confronto-main-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .confronto-content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .confronto-summary {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .confronto-summary .vs-divider {
        transform: rotate(90deg);
    }
    
    .confronto-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .confronto-column,
    .confronto-section {
        padding: var(--space-md);
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .info-item .value {
        text-align: left;
    }
    
    .zona-confronto {
        padding: var(--space-sm);
    }
}




/* ==============================================
   SEARCH RESULTS CARDS - LAYOUT MIGLIORATO
   ============================================== */

/* Grid risultati */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

/* Card singolo caso */
.caso-result-card {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.caso-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--primary);
}

.caso-result-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.caso-result-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Header della card */
.caso-result-header {
    padding: var(--space-lg);
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--gray-light);
}

.caso-result-title {
    font-size: var(--h5-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
    line-height: 1.3;
}

.caso-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.caso-badge.gravita-normale {
    background: var(--normale);
    color: var(--white);
}

.caso-badge.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
}

.caso-badge.gravita-moderato {
    background: var(--moderato);
    color: var(--white);
}

.caso-badge.gravita-grave {
    background: var(--grave);
    color: var(--white);
}

/* Info della card */
.caso-result-info {
    padding: var(--space-lg);
}

.caso-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--gray-light);
}

.caso-info-row:last-child {
    border-bottom: none;
}

.caso-info-row .label {
    font-weight: 600;
    color: var(--gray-dark);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.caso-info-row .label::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.caso-info-row .value {
    font-weight: 500;
    color: var(--text);
    text-align: right;
    font-size: 14px;
}

/* Action footer */
.caso-result-action {
    padding: var(--space-md) var(--space-lg);
    background: var(--gray-light);
    text-align: center;
    border-top: 1px solid var(--gray-medium);
}

.view-details {
    font-weight: 600;
    color: var(--primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.caso-result-card:hover .view-details {
    color: var(--primary-dark);
}

/* Paginazione migliorata */
.search-pagination {
    margin-top: var(--space-xxl);
    text-align: center;
    padding: var(--space-xl) 0;
    border-top: 2px solid var(--gray-light);
}

.search-pagination .page-numbers {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    margin: 0 var(--space-xs);
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.search-pagination .page-numbers:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    text-decoration: none;
}

.search-pagination .page-numbers.current {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.search-pagination .page-numbers.prev,
.search-pagination .page-numbers.next {
    padding: var(--space-sm) var(--space-lg);
    font-weight: 600;
}

/* ==============================================
   RESPONSIVE SEARCH RESULTS
   ============================================== */

/* Tablet */
@media (max-width: 768px) {
    .results-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .caso-result-header,
    .caso-result-info,
    .caso-result-action {
        padding: var(--space-md);
    }
    
    .caso-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .caso-info-row .value {
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .results-grid {
        gap: var(--space-sm);
    }
    
    .caso-result-title {
        font-size: var(--body-size);
    }
    
    .search-pagination .page-numbers {
        padding: var(--space-xs) var(--space-sm);
        margin: 0 2px;
        font-size: 14px;
    }
}




/* ==============================================
   VIEW TOGGLE - TABELLA/GRIGLIA
   ============================================== */

/* Header risultati aggiornato */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--gray-medium);
}

.results-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.results-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.results-count {
    font-size: 14px;
    color: var(--gray-dark);
    font-weight: 500;
}

/* Toggle Vista */
.view-toggle {
    display: flex;
    background: var(--gray-light);
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
}

.view-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--gray-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-btn:hover {
    background: var(--white);
    color: var(--text);
}

.view-btn.active {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-icon {
    font-size: 16px;
}

.view-label {
    font-weight: 600;
}

/* ==============================================
   VISTA TABELLA
   ============================================== */

.results-table-wrapper {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    overflow: hidden;
    margin-top: var(--space-xl);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.results-table th {
    background: var(--gray-light);
    color: var(--text);
    font-weight: 600;
    padding: var(--space-md);
    text-align: left;
    border-bottom: 2px solid var(--gray-medium);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--gray-light);
    vertical-align: middle;
}

.table-row:hover {
    background: #f8f9ff;
}

.table-row:last-child td {
    border-bottom: none;
}

/* Celle speciali */
.caso-code-cell {
    font-weight: 600;
}

.caso-badge-small {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.caso-badge-small.gravita-normale {
    background: var(--normale);
    color: var(--white);
}

.caso-badge-small.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
}

.caso-badge-small.gravita-moderato {
    background: var(--moderato);
    color: var(--white);
}

.caso-badge-small.gravita-grave {
    background: var(--grave);
    color: var(--white);
}

.gravita-indicator {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.gravita-indicator.gravita-normale {
   /* background: rgba(40, 167, 69, 0.1);*/
    color: var(--normale);
}

.gravita-indicator.gravita-lieve {
   /* background: rgba(255, 193, 7, 0.1);*/
    color: #d39e00;
}

.gravita-indicator.gravita-moderato {
    /*background: rgba(253, 126, 20, 0.1);*/
    color: var(--moderato);
}

.gravita-indicator.gravita-grave {
   /* background: rgba(220, 53, 69, 0.1);*/
    color: var(--grave);
}

.actions-cell {
    text-align: center;
}

.btn-view-small {
    display: inline-block;
    padding: 6px 12px;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-view-small:hover {
    background: var(--primary-dark);
    text-decoration: none;
    color: var(--white);
}

/* ==============================================
   RESPONSIVE VIEW TOGGLE
   ============================================== */

/* Tablet */
@media (max-width: 768px) {
    .results-header {
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }
    
    .view-toggle {
        align-self: stretch;
    }
    
    .view-btn {
        flex: 1;
        justify-content: center;
    }
    
    .results-table-wrapper {
        overflow-x: auto;
    }
    
    .results-table {
        min-width: 800px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .view-btn .view-label {
        display: none;
    }
    
    .view-btn {
        padding: var(--space-sm);
    }
    
    .results-table th,
    .results-table td {
        padding: var(--space-sm);
        font-size: 13px;
    }
    
    .results-table {
        min-width: 900px;
    }
}







/* ==============================================
   PAGINA RISORSE STYLES  
   ============================================== */

.risorse-content {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

.risorse-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-xxl);
    color: var(--gray-dark);
    font-size: var(--body-size);
    line-height: 1.6;
}

.risorse-section {
    margin-bottom: var(--space-xxl);
}

.risorse-section .section-title {
    font-size: var(--h2-size);
    font-weight: 700;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.risorse-section .section-description {
    color: var(--gray-dark);
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

/* Tabelle Risorse */
.risorse-table-wrapper {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.risorse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--body-size);
}

.risorse-table th {
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-size: var(--body-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risorse-table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--gray-light);
    vertical-align: middle;
}

.risorse-table tr:last-child td {
    border-bottom: none;
}

.risorse-table tr:hover {
    background: #f8f9ff;
}

/* Link di download */
.download-link {
    display: inline-block;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.download-link:hover {
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .risorse-table-wrapper {
        overflow-x: auto;
    }
    
    .risorse-table {
        min-width: 600px;
    }
    
    .risorse-table th,
    .risorse-table td {
        padding: var(--space-sm) var(--space-md);
        font-size: 14px;
    }
    
    .risorse-section .section-title {
        font-size: var(--h3-size);
    }
}

@media (max-width: 480px) {
    .risorse-table {
        min-width: 500px;
    }
    
    .risorse-table th,
    .risorse-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 13px;
    }
}

/* Link Articolazioni nella sidebar */
.sidebar-header h2 a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-header h2 a:hover {
    color: var(--primary);
    text-decoration: none;
}



/* Form Supporto - Stile Coerente con il Sito */
.form-section {
    background: var(--white);
    padding: var(--space-xl);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: var(--space-xl);
}

.supporto-form {
    max-width: 980px;
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text);
    font-size: var(--body-size);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--gray-medium);
    border-radius: 6px;
    font-size: var(--body-size);
    font-family: var(--font-family);
    transition: all 0.3s ease;
    background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Checkbox Privacy */
.checkbox-group {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--gray-light);
    border-radius: 6px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--body-size);
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin-right: var(--space-sm);
    transform: scale(1.1);
    accent-color: var(--primary);
}

/* Submit Button */
.form-submit {
    text-align: center;
    margin-top: var(--space-xl);
}

.submit-btn {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: var(--space-md) var(--space-xxl);
    border-radius: 6px;
    font-size: var(--body-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Messaggi Form */
.form-success {
    background: #e8f5e8;
    border: 1px solid var(--normale);
    color: #2d5a2d;
    padding: var(--space-md);
    border-radius: 6px;
    margin-bottom: var(--space-lg);
    text-align: center;
    font-weight: 500;
}

.form-error {
    background: #fdeaea;
    border: 1px solid var(--grave);
    color: #721c24;
    padding: var(--space-md);
    border-radius: 6px;
    margin-bottom: var(--space-lg);
    text-align: center;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .form-section {
        padding: var(--space-lg);
    }
    
    .submit-btn {
        padding: var(--space-sm) var(--space-xl);
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .form-section {
        padding: var(--space-md);
        margin-left: var(--space-sm);
        margin-right: var(--space-sm);
    }
    
    .form-group input,
    .form-group textarea {
        padding: var(--space-sm);
    }
}




.articolazione-card.horizontal-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 50px;
}

.articolazione-card.horizontal-layout .card-image {
  flex-shrink: 0;
}

.articolazione-card.horizontal-layout .card-image img {
  max-width: 400px; /* ingrandisci l'immagine */
  width: 100%;
  height: auto;
  border-radius: 0;         /* niente angoli arrotondati */
  box-shadow: none;         /* niente ombre */
  background: none;         /* nessuno sfondo */
}

.articolazione-card.horizontal-layout .card-text {
  flex: 1;
  text-align: left;         /* testo allineato a sinistra */
}

.articolazione-card .card-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;         /* anche il titolo a sinistra */
  padding:0px;
}

.card-description {
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
}


.articolazione-card {
  text-decoration: none;
  color: inherit;
}





 
 
.proiezioni-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* spazio tra le card */
  justify-content: flex-start;
}


.proiezione-card {
  flex: 1 1 calc(50% - 1rem); /* 2 per riga, con spazio tra */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  transition: box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  padding-bottom:50px;
}

.proiezione-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


.proiezione-image   {
  background-color: #ffffff;
  height: 350px;
  border-radius: 6px;
}

.proiezione-content {
  flex: 1;
}

.proiezione-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.proiezione-description {
  font-size: 0.9rem;
  color: #555;
}



.proiezione-card,
.proiezione-card * {
  text-decoration: none !important;
}


.proiezione-card h4{
  padding-top: 20px;
}


.atlante-main-content .card-image {
    height: 400px;
    background: #ffffff;

}


.card-image {
    height: auto;

}




/* MENU COLLASSABILE */
.sidebar-menu .sub-menu {
  display: none;
  margin-left: 1rem;
}

.sidebar-menu .menu-item.menu-open > .sub-menu {
  display: block;
}

.sidebar-menu .menu-toggle {
  cursor: pointer;
  margin-right: 5px;
  font-weight: bold;
  user-select: none;
}





/* ==============================================
   PRIVACY POLICY PAGE STYLES  
   ============================================== */

.privacy-content {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

.privacy-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Demo Notice */
.demo-notice {
    margin-bottom: var(--space-xxl);
}

.demo-alert {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid var(--primary);
    color: var(--primary-dark);
    padding: var(--space-lg);
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.1);
}

.demo-alert strong {
    color: var(--primary-dark);
}

/* Privacy Sections */
.privacy-section {
    margin-bottom: var(--space-xxl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--gray-light);
}

.privacy-section:last-of-type {
    border-bottom: none;
}

.privacy-section h2 {
    color: var(--text);
    font-size: var(--h3-size);
    font-weight: 700;
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}

.privacy-content-text {
    color: var(--gray-dark);
    font-size: var(--body-size);
}

.privacy-content-text p {
    margin-bottom: var(--space-md);
}

.privacy-content-text ul,
.privacy-content-text ol {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.privacy-content-text li {
    margin-bottom: var(--space-xs);
}

.privacy-content-text strong {
    color: var(--text);
    font-weight: 600;
}

/* Privacy Footer */
.privacy-footer {
    margin-top: var(--space-xxl);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--gray-light);
    text-align: center;
}

.privacy-footer small {
    color: var(--gray-dark);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .privacy-content {
        padding: var(--space-xl) 0;
    }
    
    .privacy-wrapper {
        padding: 0 var(--space-lg);
    }
    
    .privacy-section {
        margin-bottom: var(--space-xl);
    }
    
    .privacy-section h2 {
        font-size: var(--h4-size);
    }
    
    .demo-alert {
        padding: var(--space-md);
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .privacy-wrapper {
        padding: 0 var(--space-md);
    }
    
    .demo-alert {
        padding: var(--space-sm);
    }
}




/* Icona Cerca nell'header */
.atlante-navigation .atlante-menu-list a i.fas {
    font-size: var(--h4-size);
    color: var(--text);
    transition: color 0.3s ease;
}

.atlante-navigation .atlante-menu-list a:hover i.fas {
    color: var(--primary);
}

.atlante-navigation .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Assicurati che l'HTML nel menu funzioni */
.atlante-navigation .atlante-menu-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}




/* Icona SVG Cerca nell'header */
.atlante-navigation .atlante-menu-list a svg {
    color: var(--text);
    transition: color 0.3s ease;
    vertical-align: middle;
}

.atlante-navigation .atlante-menu-list a:hover svg {
    color: var(--primary);
}

.atlante-navigation .atlante-menu-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}



 

 .confronto-actions A {
    COLOR: WHITE ! IMPORTANT;
}


a.btn-ricerca{
    color:#333 !important;
}

.diagramma-item img {
    width: 50% !important;
}

.section-header {
    
    max-width: 100%;

}


/* ==============================================
   IMMAGINI NEI RISULTATI RICERCA - VERSIONE MIGLIORATA
   ============================================== */

/* VISTA GRIGLIA - Immagine Principale Full Width */
.caso-result-image {
    width: 100%;
    height: 315px; /* Altezza fissa per uniformità */
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: var(--gray-light);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caso-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene proporzioni senza distorsioni */
    object-position: center;
    transition: transform 0.3s ease;
    background: var(--gray-light);
}

.caso-result-card:hover .caso-main-image {
    transform: scale(1.03); /* Zoom più leggero */
}

/* Placeholder Medico Professionale */
.caso-result-image.no-image {
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border: 2px dashed #cbd5e0;
}

.no-image-placeholder {
    text-align: center;
    color: var(--gray-dark);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.placeholder-icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--space-sm);
    opacity: 0.4;
    color: var(--primary);
}

/* Icona ecografo stilizzata usando Unicode */
.placeholder-icon::before {
    content: "📷";  
}

.placeholder-text {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.7;
    color: var(--gray-dark);
    line-height: 1.4;
}

.placeholder-subtext {
    font-size: 12px;
    opacity: 0.5;
    margin-top: 4px;
    font-style: italic;
}

/* Aggiustamenti layout card per full-width image */
.caso-result-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: var(--white);
    border: 1px solid var(--gray-light);
}

.caso-result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-light);
}

.caso-result-header {
    padding: var(--space-lg) var(--space-lg) var(--space-sm) var(--space-lg);
    background: var(--white);
}

.caso-result-info {
    padding: 0 var(--space-lg) var(--space-md) var(--space-lg);
}

.caso-result-action {
    padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg);
    background: var(--gray-light);
}

/* VISTA TABELLA - Thumbnail migliorata */
.image-cell {
    width: 90px;
    padding: var(--space-sm);
    text-align: center;
}

.caso-thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    border: 2px solid var(--gray-light);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-row:hover .caso-thumbnail {
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Placeholder nella tabella */
.image-cell .no-image-placeholder {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--gray-medium);
    margin: 0 auto;
}

.image-cell .no-image-placeholder .placeholder-icon {
    font-size: 24px;
    margin: 0;
}

.image-cell .no-image-placeholder .placeholder-icon::before {
    content: "📷";
}

.image-cell .placeholder-text,
.image-cell .placeholder-subtext {
    display: none; /* Nascondi testo nella vista tabella */
}

/* Loading state migliorato */
.caso-main-image {
     
    transition: opacity 0.4s ease;
}

.caso-main-image.loaded,
.caso-main-image[complete] {
    opacity: 1;
}

/* Overlay sottile per migliorare leggibilità */
.caso-result-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0) 70%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.caso-result-card:hover .caso-result-image::after {
    opacity: 1;
}

/* Responsive ottimizzato */
@media (max-width: 768px) {
    .caso-result-image {
        height: 180px;
    }
    
    .placeholder-icon {
        font-size: 40px;
    }
    
    .placeholder-text {
        font-size: 13px;
    }
    
    .image-cell {
        width: 70px;
        padding: var(--space-xs);
    }
    
    .caso-thumbnail,
    .image-cell .no-image-placeholder {
        width: 55px;
        height: 55px;
    }
    
    .image-cell .no-image-placeholder .placeholder-icon {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .caso-result-image {
        height: 160px;
    }
    
    /* Nascondi colonna immagini nella tabella su mobile molto piccolo */
    .results-table .image-cell,
    .results-table th:first-child {
        display: none;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .caso-result-card {
        margin-bottom: var(--space-sm);
    }
}

/* Animazioni avanzate */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.caso-result-card {
    animation: fadeInUp 0.5s ease forwards;
}

/* Staggered animation per le card */
.caso-result-card:nth-child(1) { animation-delay: 0.1s; }
.caso-result-card:nth-child(2) { animation-delay: 0.2s; }
.caso-result-card:nth-child(3) { animation-delay: 0.3s; }
.caso-result-card:nth-child(4) { animation-delay: 0.4s; }
.caso-result-card:nth-child(5) { animation-delay: 0.5s; }
.caso-result-card:nth-child(6) { animation-delay: 0.6s; }



.casi-description {
    margin-bottom: var(--space-xl);
    text-align: justify;
     
    margin-left: auto;
    margin-right: auto;
}

.casi-description p {
    color: var(--gray-dark);
    font-size: var(--body-size);
    line-height: 1.6;
    margin: 0;
}


.gravita-btn {
    color: var(--white) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Ombra per leggibilità */
}



/* ==============================================
   IMMAGINI PAGINA CONFRONTO - CSS COMPLETO
   ============================================== */

/* SELETTORE CASO 2 - LAYOUT COMPATTO ORIZZONTALE */
.caso-selector-section {
    background: #f8f9ff;
    border: 1px solid var(--primary-light);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-xl);
}

.caso-selector-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.selector-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.selector-label {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    white-space: nowrap;
}

.caso-selector {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--primary);
    border-radius: 6px;
    background: var(--white);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    min-width: 200px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.caso-selector:hover {
    /*background: var(--primary-light);*/
    border-color: var(--primary-dark);
}

.caso-selector:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

/* Separatore OR compatto */
.selector-divider {
    color: var(--gray-dark);
    font-weight: 500;
    font-size: 14px;
    padding: 0 var(--space-sm);
    opacity: 0.7;
}

/* Campo ricerca per codice compatto */
.code-search-wrapper {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.code-search-input {
    padding: var(--space-sm);
    border: 2px solid var(--gray-medium);
    border-radius: 6px;
    background: var(--white);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    width: 160px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.code-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

.code-search-input::placeholder {
    text-transform: none;
    color: var(--gray-dark);
    opacity: 0.7;
    font-size: 13px;
}

.search-code-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    white-space: nowrap;
}

.search-code-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.search-code-btn:active {
    transform: translateY(0);
}

/* Risultati ricerca - sotto il wrapper principale */
.search-result {
    margin-top: var(--space-md);
    text-align: center;
    min-height: 0;
}

.search-result:empty {
    margin-top: 0;
}

.search-result.search-success {
    color: var(--normale);
}

.search-result.search-error {
    color: var(--grave);
}

.search-message {
    font-weight: 500;
    font-size: 14px;
}

.search-loading {
    color: var(--primary);
    font-weight: 500;
    font-size: 14px;
}

.compare-found-btn {
    display: inline-block;
    margin-left: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--normale);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.compare-found-btn:hover {
    background: #218838;
    transform: translateY(-1px);
}

/* SEZIONE IMMAGINE PRINCIPALE */
.confronto-image-section {
    margin: var(--space-lg) 0;
    text-align: center;
}

.confronto-main-image {
    width: 100%;
    max-width: 300px;
    height: 200px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gray-light);
    transition: all 0.3s ease;
}

.confronto-main-image:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.confronto-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.confronto-image:hover {
    transform: scale(1.02);
}

/* Placeholder per immagine principale - PULITO */
.confronto-main-image.no-image {
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border: 2px dashed var(--gray-medium);
}

.confronto-placeholder {
    text-align: center;
    color: var(--gray-dark);
    padding: var(--space-md);
}

.confronto-placeholder .placeholder-text {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.7;
    color: var(--gray-dark);
}

/* ZONE ANATOMICHE CONFRONTO */
.zona-confronto {
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 8px;
}

.zona-confronto h5 {
    color: var(--primary);
    margin: 0 0 var(--space-sm);
    font-size: var(--h5-size);
    font-weight: 600;
    border-bottom: 1px solid var(--primary-light);
    padding-bottom: var(--space-xs);
}

.zona-confronto p {
    color: var(--gray-dark);
    font-size: 14px;
    margin: var(--space-xs) 0;
    line-height: 1.5;
}

/* Findings zona */
.zona-findings-small {
    background: #f8f9ff;
    border: 1px solid var(--primary-light);
    border-radius: 4px;
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    font-size: 13px;
}

.zona-findings-small strong {
    color: var(--primary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* GRID IMMAGINI ZONE ANATOMICHE CON ZOOM */
.zona-images-confronto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.zona-image-item {
    text-align: center;
}

.zona-confronto-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--gray-light);
    transition: all 0.3s ease;
    cursor: zoom-in;
}

.zona-confronto-image:hover {
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.zona-confronto-image:active {
    transform: scale(0.98);
}

/* Placeholder zone anatomiche - PULITO */
.zona-no-images {
    margin: var(--space-md) 0;
    text-align: center;
}

.zona-placeholder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border: 1px dashed var(--gray-medium);
    border-radius: 6px;
    min-width: 80px;
    min-height: 80px;
    justify-content: center;
}

.zona-placeholder-text {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.7;
    color: var(--gray-dark);
    line-height: 1.2;
}

/* LIGHTBOX PER ZOOM IMMAGINI */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    min-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
    position: absolute;
    top: -60px;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 6px;
    width: 50px;
    height: 50px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--text);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.lightbox-close:hover {
    background: var(--white);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.lightbox-info {
    margin-top: var(--space-md);
    text-align: center;
}

.lightbox-caption {
    color: var(--white);
    font-size: var(--body-size);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.7);
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
}

/* CLASSE ZOOMABLE PER TUTTE LE IMMAGINI */
.zoomable-image {
    cursor: zoom-in !important;
    transition: all 0.3s ease;
}

.zoomable-image:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* BOTTONI DETTAGLI DOPO LE ZONE ANATOMICHE */
.confronto-cases-actions {
    margin: var(--space-xxl) 0 var(--space-lg) 0;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--gray-light);
}

.cases-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.case-action-column {
    text-align: center;
}

.btn-caso-details {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-caso-details:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--white);
}

/* AZIONI CONFRONTO CENTRATE */
.confronto-actions {
    display: flex;
    justify-content: center;
    padding: var(--space-xxl) 0 var(--space-xl);
    border-top: 2px solid var(--gray-medium);
    margin-top: var(--space-xxl);
}

.btn-ricerca {
    background: var(--gray-medium);
    color: var(--text);
    padding: var(--space-md) var(--space-xxl);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-ricerca:hover {
    background: var(--gray-dark);
    color: var(--white);
    text-decoration: none;
}

/* RESPONSIVE CONFRONTO IMMAGINI */
@media (max-width: 768px) {
    .caso-selector-wrapper {
        flex-direction: column;
        gap: var(--space-md);
        align-items: stretch;
    }
    
    .selector-group {
        flex-direction: column;
        gap: var(--space-xs);
        align-items: center;
    }
    
    .caso-selector {
        min-width: 250px;
        width: 100%;
        max-width: 300px;
    }
    
    .code-search-wrapper {
        flex-direction: column;
        gap: var(--space-xs);
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .code-search-input {
        width: 100%;
        min-width: auto;
    }
    
    .search-code-btn {
        width: 100%;
    }
    
    .confronto-main-image {
        max-width: 250px;
        height: 160px;
    }
    
    .zona-images-confronto {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: var(--space-xs);
    }
    
    .zona-confronto-image {
        width: 60px;
        height: 60px;
    }
    
    .zona-placeholder {
        min-width: 60px;
        min-height: 60px;
    }
    
    .zona-placeholder-text {
        font-size: 9px;
    }
    
    .cases-actions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .lightbox-content {
        max-width: 98vw;
        max-height: 98vh;
    }
    
    .lightbox-image {
        max-height: 75vh;
        min-height: 50vh;
    }
    
    .lightbox-close {
        top: -55px;
        width: 45px;
        height: 45px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .caso-selector-section {
        padding: var(--space-sm);
    }
    
    .selector-label {
        font-size: 13px;
    }
    
    .caso-selector,
    .code-search-input,
    .search-code-btn {
        font-size: 13px;
        padding: 10px;
    }
    
    .confronto-main-image {
        max-width: 200px;
        height: 140px;
    }
    
    .zona-images-confronto {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .zona-confronto {
        padding: var(--space-sm);
        margin-bottom: var(--space-lg);
    }
    
    .lightbox-content {
        max-width: 100vw;
        max-height: 100vh;
    }
    
    .lightbox-image {
        max-height: 70vh;
        min-height: 40vh;
    }
    
    .lightbox-close {
        top: -50px;
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    
    .lightbox-caption {
        font-size: 14px;
        padding: var(--space-xs) var(--space-sm);
    }
}

/* ANIMAZIONI HOVER MIGLIORATE */
.confronto-main-image:hover .confronto-image {
    transform: scale(1.02);
}

.zona-confronto-image:hover {
    cursor: zoom-in;
    filter: brightness(1.1);
}

/* FOCUS STATES PER ACCESSIBILITÀ */
.zoomable-image:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.lightbox-close:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}




/* ==============================================
   SINGLE CASO CLINICO - CSS COMPLETO
   ============================================== */

/* SEZIONE IMMAGINI PRINCIPALI */
.caso-images-section {
    margin: var(--space-xxl) 0;
    padding: var(--space-xl);
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.caso-images-section .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-xl);
    color: var(--text);
    text-align: center;
    border-bottom: 2px solid var(--primary);
    padding-bottom: var(--space-md);
}

/* Grid immagini principali */
.caso-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.caso-image-item {
    text-align: center;
    background: var(--gray-light);
    border-radius: 8px;
    padding: var(--space-md);
    transition: all 0.3s ease;
}

.caso-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.caso-image-item .image-title {
    font-size: var(--h5-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--text);
}

.caso-image-item.principale .image-title {
    color: var(--primary);
}

.caso-image-item.confronto .image-title {
    color: var(--moderato);
}

.image-wrapper {
    width: 100%;
    height: 315px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--white);
    border: 2px solid var(--gray-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.caso-main-image,
.caso-confronto-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: zoom-in;
    transition: all 0.3s ease;
}

.caso-main-image:hover,
.caso-confronto-image:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

/* Galleria immagini */
.galleria-images-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--gray-light);
}

.galleria-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0 0 var(--space-lg);
    color: var(--text);
    text-align: center;
}

.galleria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-md);
}

.galleria-image-item {
    text-align: center;
}

.galleria-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--gray-light);
    cursor: zoom-in;
    transition: all 0.3s ease;
}

.galleria-image:hover {
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ZONE ANATOMICHE MIGLIORATA */
.zona-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.zona-image-item {
    text-align: center;
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 8px;
    padding: var(--space-sm);
    transition: all 0.3s ease;
}

.zona-image-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.zona-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: var(--space-sm);
    cursor: zoom-in;
    transition: all 0.3s ease;
}

.zona-image:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

/* CONFRONTO DIRETTO MIGLIORATO */
.confronto-diretto-section {
    margin: var(--space-xxl) 0;
    padding: var(--space-xl);
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border-radius: 12px;
    border: 1px solid var(--primary-light);
}

.confronto-diretto-section .section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: var(--primary);
    text-align: center;
}

.confronto-description {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--gray-dark);
}

.confronto-description p {
    margin: 0 0 var(--space-sm);
}

.confronto-description strong {
    color: var(--text);
}

.confronto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    max-width: 1000px;
    margin: 0 auto;
}

.confronto-card {
    display: block;
    background: var(--white);
    border: 2px solid var(--gray-medium);
    border-radius: 12px;
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s ease;
}

.confronto-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: var(--text);
}

.confronto-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.caso-preview {
    text-align: center;
    flex: 1;
}

.caso-badge {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.caso-badge.gravita-normale {
    background: var(--normale);
    color: var(--white);
}

.caso-badge.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
}

.caso-badge.gravita-moderato {
    background: var(--moderato);
    color: var(--white);
}

.caso-badge.gravita-grave {
    background: var(--grave);
    color: var(--white);
}

.caso-code {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.reference-badge {
    display: block;
    font-size: 10px;
    color: var(--primary);
    font-weight: 500;
    font-style: italic;
}

.vs-divider {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 var(--space-md);
}

.confronto-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    background: var(--gray-light);
    border-radius: 6px;
    font-weight: 600;
    color: var(--primary);
}

/* NOTE AGGIUNTIVE */
.note-aggiuntive-section {
    margin: var(--space-xxl) 0;
    padding: var(--space-lg);
    background: #fffbf0;
    border: 1px solid #ffd60a;
    border-radius: 8px;
}

.note-aggiuntive-section .section-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    color: #b8860b;
    border-bottom: 1px solid #ffd60a;
    padding-bottom: var(--space-sm);
}

.note-content {
    color: var(--text);
    line-height: 1.6;
}

.note-content p {
    margin: 0 0 var(--space-sm);
}

.note-content p:last-child {
    margin-bottom: 0;
}

/* LIGHTBOX PER ZOOM IMMAGINI */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    min-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
    position: absolute;
    top: -60px;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 6px;
    width: 50px;
    height: 50px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--text);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.lightbox-close:hover {
    background: var(--white);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.lightbox-info {
    margin-top: var(--space-md);
    text-align: center;
}

.lightbox-caption {
    color: var(--white);
    font-size: var(--body-size);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.7);
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
}

/* CLASSE ZOOMABLE PER TUTTE LE IMMAGINI */
.zoomable-image {
    cursor: zoom-in !important;
    transition: all 0.3s ease;
}

.zoomable-image:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* FOCUS STATES PER ACCESSIBILITÀ */
.zoomable-image:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.lightbox-close:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* MIGLIORAMENTI PER I CAMPI INFO */
.caso-box .info-row .value {
    text-align: right;
    font-weight: 500;
}

/* Stili specifici per i nuovi campi */
.info-row .value[data-field="head-us"] {
    background: var(--primary);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.info-row .value[data-field="rom"] {
    font-family: monospace;
    font-size: 13px;
    background: var(--gray-light);
    padding: 2px 6px;
    border-radius: 4px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .caso-images-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .image-wrapper {
        height: 200px;
    }
    
    .galleria-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--space-sm);
    }
    
    .galleria-image {
        width: 100px;
        height: 100px;
    }
    
    .zona-images-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .zona-image {
        height: 120px;
    }
    
    .confronto-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .confronto-preview {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .vs-divider {
        margin: 0;
        transform: rotate(90deg);
    }
    
    .lightbox-close {
        top: -55px;
        width: 45px;
        height: 45px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .caso-images-section,
    .confronto-diretto-section,
    .note-aggiuntive-section {
        padding: var(--space-md);
        margin: var(--space-lg) 0;
    }
    
    .image-wrapper {
        height: 160px;
    }
    
    .galleria-image {
        width: 80px;
        height: 80px;
    }
    
    .zona-image {
        height: 100px;
    }
    
    .confronto-card {
        padding: var(--space-md);
    }
    
    .lightbox-close {
        top: -50px;
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    
    .lightbox-caption {
        font-size: 14px;
        padding: var(--space-xs) var(--space-sm);
    }
}




/* ==============================================
   PAGINA STATISTICHE ATLANTE - VERSIONE FINALE
   ============================================== */

/* Hero Section Statistiche */
.hero-section .hero-subtitle {
    font-size: var(--body-size);
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--space-sm);
    font-weight: 400;
}

/* Sezioni Statistiche */
.stats-section,
.stats-kpi-section {
    margin-bottom: var(--space-xxl);
    background: var(--white);
    border-radius: 12px;
    padding: var(--space-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-light);
}

.stats-section-title {
    font-size: var(--h3-size);
    font-weight: 600;
    margin: 0 0 var(--space-xl);
    color: var(--text);
    text-align: center;
    border-bottom: 1px solid #aebec8;
    padding-bottom: var(--space-md);
}

/* ==============================================
   KPI CARDS - SENZA ICONE
   ============================================== */

.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.stats-kpi-card {
    background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%);
    color: var(--white);
    padding: var(--space-xl) var(--space-lg);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

.stats-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.3);
}

.kpi-icon {
    display: none; /* Nasconde tutte le icone KPI */
}

.kpi-number {
    font-size: 3rem; /* Aumentato da 2.5rem senza icone */
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.kpi-label {
    font-size: var(--small-size);
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==============================================
   CHART BARS
   ============================================== */

.stats-chart-container {
    background: var(--gray-light);
    border-radius: 8px;
    padding: var(--space-lg);
}

.stats-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stats-bar-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.stats-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text);
}

.label-text {
    font-size: var(--body-size);
}

.label-count {
    background: var(--primary);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--small-size);
    font-weight: 700;
}

.stats-bar-container {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--gray-medium);
}

.stats-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, #3b82f6 100%);
    border-radius: 20px;
    transition: width 0.8s ease;
    position: relative;
}

.stats-percentage {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--small-size);
    font-weight: 600;
    color: var(--gray-dark);
    z-index: 2;
}

/* ==============================================
   GRAVITÀ CARDS
   ============================================== */

.stats-gravita-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.stats-gravita-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--gray-light);
}

.stats-gravita-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gravita-header {
    padding: var(--space-md);
    color: var(--white);
    text-align: center;
}

.gravita-header h3 {
    margin: 0;
    font-size: var(--h5-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gravita-body {
    padding: var(--space-lg);
    background: var(--white);
    text-align: center;
}

.gravita-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.gravita-percentage {
    font-size: var(--body-size);
    color: var(--gray-dark);
    font-weight: 500;
}

/* ==============================================
   TABELLE
   ============================================== */

.stats-table-container {
    overflow-x: auto;
    background: var(--gray-light);
    border-radius: 8px;
    padding: var(--space-md);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stats-table thead {
    background: var(--primary);
    color: var(--white);
}

.stats-table th,
.stats-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--gray-light);
}

.stats-table th {
    font-weight: 600;
    font-size: var(--small-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-table tbody tr:hover {
    background: var(--gray-light);
}

.stats-table td:last-child,
.stats-table th:last-child {
    text-align: right;
}

/* ==============================================
   DEMOGRAFIA - ICONE INTERNAZIONALI
   ============================================== */

.stats-demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.demo-card {
    background: var(--gray-light);
    border-radius: 12px;
    padding: var(--space-lg);
    border: 1px solid var(--gray-medium);
}

.demo-card h3 {
    margin: 0 0 var(--space-lg);
    font-size: var(--h5-size);
    font-weight: 600;
    color: var(--text);
    text-align: center;
    border-bottom: 1px solid var(--gray-medium);
    padding-bottom: var(--space-sm);
}

.demo-sesso {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.sesso-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--white);
    padding: var(--space-md);
    border-radius: 8px;
    border: 1px solid var(--gray-light);
}

/* ICONE MASCHIO/FEMMINA INTERNAZIONALI - QUADRATI */
.sesso-icon {
    font-size: 2.5rem;
    font-weight: bold;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Quadrato con angoli arrotondati */
    color: var(--white);
}

.sesso-icon.male-icon {
     
    color: var(--white);
}

.sesso-icon.female-icon {
  
    color: var(--white);
}

.sesso-data {
    flex: 1;
}

.sesso-label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.sesso-count {
    color: var(--gray-dark);
    font-size: var(--small-size);
}

/* ==============================================
   COPERTURA MULTIMEDIALE - COLORI SISTEMATI
   ============================================== */

.media-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.media-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    padding: var(--space-md);
    border-radius: 8px;
    border: 1px solid var(--gray-light);
}

.media-label {
    font-weight: 500;
    color: var(--text);
}

/* FIX COLORI PERCENTUALI COPERTURA MULTIMEDIALE */
.media-value {
    font-weight: 700;
    color: #ffffff !important; /* Bianco puro forzato */
    background: #2563eb !important; /* Blu scuro forzato */
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--body-size);
    min-width: 70px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Ombra per contrasto extra */
}

/* ==============================================
   RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .stats-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--space-md);
    }
    
    .kpi-number {
        font-size: 2.5rem;
    }
    
    .stats-section,
    .stats-kpi-section {
        padding: var(--space-md);
        margin-bottom: var(--space-lg);
    }
    
    .stats-gravita-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .stats-demo-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .sesso-icon {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .stats-kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-table-container {
        padding: var(--space-xs);
    }
    
    .stats-table th,
    .stats-table td {
        padding: var(--space-sm);
        font-size: var(--small-size);
    }
}

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
    .atlante-sidebar,
    .hero-section {
        display: none;
    }
    
    .atlante-main-content {
        width: 100%;
        max-width: none;
    }
    
    .stats-section,
    .stats-kpi-section {
        break-inside: avoid;
        margin-bottom: var(--space-lg);
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .stats-kpi-card {
        background: #f8f9fa !important;
        color: #333 !important;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .stats-bar {
        background: #666 !important;
    }
    
    .gravita-header {
        background: #f8f9fa !important;
        color: #333 !important;
        border-bottom: 1px solid #ddd;
    }
}


/* ==============================================
   DIAGRAMMI ANATOMICI - VERSIONE FORZATA
   ============================================== */

.atlante-main-content .diagrammi-section {
    margin-bottom: var(--space-xxl) !important;
}

.atlante-main-content .diagrammi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-md) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.atlante-main-content .diagramma-item {
    background: var(--white) !important;
    border: 1px solid var(--gray-medium) !important;
    border-radius: 8px !important;
    padding: var(--space-sm) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.atlante-main-content .diagramma-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--primary) !important;
}

.atlante-main-content .diagramma-item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    min-height: 300px !important;
    max-height: 400px !important;
    box-shadow: none !important;
}


/* ==============================================
   CSS AGGIUNTIVO PER PAGINA STATISTICHE ATLANTE
   Da aggiungere al file atlante.css
   ============================================== */

/* Sezioni con descrizione */
.section-description {
    margin-bottom: 2rem;
    text-align: justify;
    color: #666;
    font-size: var(--body-size);
    line-height: 1.6;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.section-description p {
    margin: 0;
}

/* Statistiche Età */
.eta-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.eta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.eta-item:hover {
    background: var(--gray-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.eta-item.eta-media {
     
    border-color: var(--primary);
    font-weight: 600;
}

.eta-label {
    font-weight: 500;
    color: var(--text);
    font-size: var(--body-size);
}

.eta-count {
    font-weight: 500;
    color: var(--gray-dark);
    font-size: var(--body-size);
}

.eta-item.eta-media .eta-label,
.eta-item.eta-media .eta-count {
    color: var(--primary-dark);
}

/* Icone genere migliorate */
.sesso-icon {
    font-size: 2.5rem;
    font-weight: bold;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sesso-icon.male-icon {
    /* background: linear-gradient(135deg, #3b82f6, #1e40af);*/
    background:white;
}

.sesso-icon.female-icon {
    /*background: linear-gradient(135deg, #ec4899, #be185d);*/
    background:white;
}

/* Responsive per statistiche età */
@media (max-width: 768px) {
    .eta-item {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }
    
    .eta-label,
    .eta-count {
        font-size: var(--small-size);
    }
    
    .section-description {
        font-size: var(--small-size);
        padding: 0 var(--space-md);
    }
}

@media (max-width: 480px) {
    .eta-stats {
        gap: var(--space-sm);
    }
    
    .eta-item {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .sesso-icon {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
}

/* Miglioramenti tabella statistiche - VERSIONE CORRETTA */
.stats-table-container {
    overflow-x: auto;
    background: var(--gray-light);
    border-radius: 8px;
    padding: var(--space-sm);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
    font-size: var(--body-size);
}

.stats-table thead {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
}

.stats-table th,
.stats-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    font-size: var(--small-size);
    vertical-align: middle;
}

.stats-table th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.stats-table tbody tr {
    transition: all 0.2s ease;
    background: var(--white);
}

.stats-table tbody tr:hover {
    background: #f8f9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stats-table tbody tr:last-child td {
    border-bottom: none;
}

/* Colonna percentuale a destra */
.stats-table td:last-child,
.stats-table th:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--primary);
}

/* Colonna ranking - NO background colorato */
.stats-table td:first-child {
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    width: 50px;
    /* Rimosso background e border-radius */
}

/* Rimuovi righe alternate colorate */
.stats-table tbody tr:nth-child(even) {
    background: var(--white); /* Stesso colore di tutte le altre */
}

/* Hover specifico per prime 3 posizioni */
.stats-table tbody tr:nth-child(1):hover {
    background: #fff8e1; /* Oro leggero */
}

.stats-table tbody tr:nth-child(2):hover {
    background: #f3f4f6; /* Argento leggero */
}

.stats-table tbody tr:nth-child(3):hover {
    background: #fef2f2; /* Bronzo leggero */
}

/* Responsive tabella */
@media (max-width: 768px) {
    .stats-table-container {
        padding: var(--space-xs);
    }
    
    .stats-table th,
    .stats-table td {
        padding: var(--space-sm);
        font-size: 12px;
    }
    
    .stats-table {
        min-width: 500px;
    }
}

@media (max-width: 480px) {
    .stats-table {
        min-width: 600px;
    }
    
    .stats-table th,
    .stats-table td {
        padding: var(--space-xs);
        font-size: 11px;
    }
}


/* ==============================================
   MIGLIORAMENTI ZONE ANATOMICHE - 2 PER RIGA + COLLASSABILI
   ============================================== */

/* Zona anatomica container con header */
.zona-anatomica {
    margin-bottom: var(--space-xl);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    background: var(--white);
    overflow: hidden;
    transition: all 0.3s ease;
}

.zona-anatomica.collapsed {
    margin-bottom: var(--space-md);
}

/* Header con titolo e pulsante toggle */
.zona-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    border-bottom: 1px solid var(--gray-light);
}

.zona-title {
    font-size: var(--h4-size);
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

/* Pulsante toggle */
.zona-toggle {
    background: var(--primary);
    color: var(--white);
    border: none;
     
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.zona-toggle:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.zona-toggle:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* Contenuto della zona */
.zona-content {
    padding: var(--space-lg);
    display: block; /* Default: aperta */
}

/* Grid immagini - 2 PER RIGA */
.zona-images-2-per-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

/* Contenitore info sotto l'immagine */
.image-info {
    margin-top: var(--space-sm);
    text-align: center;
    padding: var(--space-sm);
    background: rgba(66, 133, 244, 0.03);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

/* Caption dell'immagine - titolo principale */
.image-caption {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.4;
}

/* Descrizione dettagliata dell'immagine */
.image-description {
    font-size: 13px;
    color: var(--gray-dark);
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

/* Stili base per la zona-image-item */
.zona-image-item {
    text-align: center;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.zona-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Immagine della zona */
.zona-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 180px;
    aspect-ratio: 4/3;
}

/* Descrizione della zona */
.zona-description {
    color: var(--gray-dark);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

/* Miglioramenti lightbox per descrizioni più lunghe */
.lightbox-caption {
    color: var(--white);
    font-size: var(--body-size);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.85);
    padding: var(--space-md) var(--space-lg);
    border-radius: 8px;
    max-width: 700px;
    text-align: center;
    line-height: 1.6;
    margin: 0 auto;
    backdrop-filter: blur(4px);
}

/* Link gravità sezione riferimenti */
.casi-riferimento-section {
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--gray-medium);
}

.gravita-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}

.gravita-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    border-radius: 12px;
    text-decoration: none;
    color: var(--white);
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 100px;
    text-align: center;
}

.gravita-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--white);
}

.gravita-link.gravita-normale {
    background: var(--normale);
}

.gravita-link.gravita-lieve {
    background: var(--lieve);
    color: var(--text);
}

.gravita-link.gravita-lieve:hover {
    color: var(--text);
}

.gravita-link.gravita-moderato {
    background: var(--moderato);
}

.gravita-link.gravita-grave {
    background: var(--grave);
}

.gravita-label {
    font-size: var(--h4-size);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.gravita-count {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    /* Grid immagini - 1 PER RIGA su mobile */
    .zona-images-2-per-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .zona-header {
        padding: var(--space-sm) var(--space-md);
    }
    
    .zona-content {
        padding: var(--space-md);
    }
    
    .zona-title {
        font-size: 18px;
    }
    
    .zona-toggle {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .image-info {
        padding: var(--space-xs);
    }
    
    .image-caption {
        font-size: 13px;
    }
    
    .image-description {
        font-size: 12px;
    }
    
    .lightbox-caption {
        font-size: 14px;
        padding: var(--space-sm) var(--space-md);
        max-width: 90vw;
        line-height: 1.5;
    }
    
    .gravita-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--space-sm);
    }
    
    .gravita-link {
        padding: var(--space-md);
        min-height: 80px;
    }
}

@media (max-width: 480px) {
    .zona-header {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .zona-content {
        padding: var(--space-sm);
    }
    
    .zona-title {
        font-size: 16px;
    }
    
    .zona-toggle {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
    
    .lightbox-caption {
        font-size: 13px;
        padding: var(--space-xs) var(--space-sm);
        line-height: 1.4;
    }
    
    .gravita-links-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .gravita-label {
        font-size: 16px;
    }
    
    .gravita-count {
        font-size: 13px;
    }
}



/* ==============================================
   PULSANTE SCROLL TO TOP
   ============================================== */

.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* Stato visibile */
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover effect */
.scroll-top-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* Focus per accessibilità */
.scroll-top-btn:focus {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

/* Active state */
.scroll-top-btn:active {
    transform: scale(0.95);
}

/* Icona SVG */
.scroll-top-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.scroll-top-btn:hover svg {
    transform: translateY(-1px);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    .scroll-top-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* Assicura che il pulsante sia sopra altri elementi floating */
@media (max-width: 480px) {
    .scroll-top-btn {
        bottom: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
    }
    
    .scroll-top-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Animazione più smooth per dispositivi con ridotto motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-top-btn {
        transition: opacity 0.3s ease;
    }
    
    .scroll-top-btn:hover {
        transform: none;
    }
    
    .scroll-top-btn svg {
        transition: none;
    }
    
    .scroll-top-btn:hover svg {
        transform: none;
    }
}

/* Evita conflitti con il lightbox */
.image-lightbox.active ~ .scroll-top-btn {
    z-index: 999; /* Sotto il lightbox che ha z-index: 9999 */
}


/* ==============================================
   LOGO + TITLE - HEADER STYLES
   ============================================== */

.site-branding {
    display: flex;
    align-items: center;
}

.site-title {
    margin: 0;
    line-height: 1;
}

.site-brand-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.3s ease;
}

.site-brand-link:hover {
    text-decoration: none;
    opacity: 0.9;
}

/* Logo immagine */
.site-logo {
    max-height: 60px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* Testo titolo */
.site-title-text {
   
    font-weight: 600;
    font-size: var(--h4-size);
    white-space: nowrap;
}

.site-brand-link:hover .site-title-text {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .site-logo {
        max-height: 45px;
    }
    
    .site-title-text {
        font-size: var(--h5-size);
    }
    
    .site-brand-link {
        gap: var(--space-xs);
    }
}

@media (max-width: 480px) {
    .site-logo {
        max-height: 40px;
    }
    
    .site-title-text {
        font-size: 16px;
    }
    
    /* Su mobile molto piccolo, nascondi il testo e tieni solo logo */
    .site-brand-link:has(.site-logo) .site-title-text {
        display: none;
    }
}




/* ==============================================
   PAGINA SUPPORTO - TITOLI MIGLIORATI
   ============================================== */

/* Contenuto principale supporto */
.supporto-content {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

/* Sezioni supporto con titoli più proporzionati */
.supporto-section {
    margin-bottom: var(--space-xxl);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Titoli sezione - dimensioni ridotte e più equilibrate */
.supporto-section .section-title {
    font-size: var(--h3-size) !important; /* Ridotto da h2 */
    font-weight: 600;
    margin: 0 0 var(--space-lg);
    color: var(--text);
    border-bottom: 2px solid var(--primary);
    padding-bottom: var(--space-sm);
    display: inline-block;
    /* Rimosso text-align: center per allineamento a sinistra */
}

/* Descrizioni sezioni */
.supporto-section .section-description {
    color: var(--gray-dark);
    margin-bottom: var(--space-xl);
    line-height: 1.7;
    font-size: var(--body-size);
    text-align: justify;
}

.supporto-section .section-description p {
    margin-bottom: var(--space-md);
}

.supporto-section .section-description p:last-child {
    margin-bottom: 0;
}

/* Manuale download button */
.manuale-download {
    text-align: center;
    margin-top: var(--space-lg);
}

.download-btn {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    padding: var(--space-md) var(--space-xl);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--body-size);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.download-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--white);
}

/* Tutorial video */
.tutorial-video {
    margin-top: var(--space-lg);
    text-align: center;
}

.video-container {
    background: var(--gray-light);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.video-container iframe,
.video-container video {
    width: 100%;
    height: 100%;
    border: none;
}

/* Form section già sistemata - solo piccoli aggiustamenti */
.form-section {
    background: var(--white);
    padding: var(--space-xl);
    border: 1px solid var(--gray-medium);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: var(--space-xl);
}

.form-section .section-title {
    font-size: var(--h3-size) !important; /* Coerente con altri titoli */
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* Responsive migliorato */
@media (max-width: 768px) {
    .supporto-content {
        padding: var(--space-xl) 0;
    }
    
    .supporto-section {
        margin-bottom: var(--space-lg);
        padding: 0 var(--space-md);
    }
    
    .supporto-section .section-title {
        font-size: var(--h4-size) !important;
        margin-bottom: var(--space-md);
    }
    
    .supporto-section .section-description {
        font-size: var(--small-size);
        text-align: left; /* Meglio su mobile */
        line-height: 1.6;
    }
    
    .download-btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--small-size);
        width: 100%;
        max-width: 300px;
    }
    
    .form-section {
        padding: var(--space-lg);
        margin: var(--space-lg) var(--space-md) 0;
    }
    
    .form-section .section-title {
        font-size: var(--h4-size) !important;
        margin-bottom: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .supporto-section {
        padding: 0 var(--space-sm);
        margin-bottom: var(--space-md);
    }
    
    .supporto-section .section-title {
        font-size: var(--h5-size) !important;
    }
    
    .supporto-section .section-description {
        margin-bottom: var(--space-lg);
    }
    
    .form-section {
        padding: var(--space-md);
        margin: var(--space-md) var(--space-sm) 0;
    }
}




/* ==============================================
   PAGINA RISORSE - CONSISTENZA CON ALTRE PAGINE
   ============================================== */

/* Contenuto principale - same width come altre pagine */
.risorse-content {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

.risorse-content .container {
    width:1000px;
    max-width: var(--container-max-width); /* Stessa larghezza delle altre pagine */
    margin: 0 auto;
    padding: 0px;
}

/* Intro text - consistente con altre pagine */
.risorse-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-xxl);
    color: var(--gray-dark);
    font-size: var(--body-size);
    line-height: 1.6;
}

.risorse-intro p {
    margin: 0;
}

/* Sezioni - width completa come altre pagine */
.risorse-section {
    margin-bottom: var(--space-xxl);
    /* Rimosso max-width per usare tutta la larghezza */
}

.risorse-section:last-child {
    margin-bottom: 0;
}

/* Titoli - dimensioni consistenti con Supporto */
.risorse-section .section-title {
    font-size: var(--h3-size); /* Stesso di Supporto */
    font-weight: 600;
    margin: 0 0 var(--space-lg);
    color: var(--text);
    border-bottom: 2px solid var(--primary);
    padding-bottom: var(--space-sm);
    display: inline-block;
    /* Allineamento a sinistra come Supporto */
}

/* Descrizioni sezioni */
.risorse-section .section-description {
    color: var(--gray-dark);
    margin-bottom: var(--space-xl);
    line-height: 1.7;
    font-size: var(--body-size);
    text-align: justify; /* Come Supporto */
}

.risorse-section .section-description p {
    margin-bottom: var(--space-md);
}

.risorse-section .section-description p:last-child {
    margin-bottom: 0;
}

/* Tabelle - width completa senza restrizioni */
.risorse-table-wrapper {
    background: var(--white);
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Rimosso max-width per usare tutto lo spazio */
}

.risorse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--body-size);
}

/* Header tabella */
.risorse-table th {
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-size: var(--body-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risorse-table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--gray-light);
    vertical-align: middle;
}

.risorse-table tr:last-child td {
    border-bottom: none;
}

.risorse-table tr:hover {
    background: #f8f9ff;
}

/* Link di download */
.download-link {
    display: inline-block;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.download-link:hover {
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Responsive - consistente con altre pagine */
@media (max-width: 768px) {
    .risorse-content {
        padding: var(--space-xl) 0;
    }
    
    .risorse-section {
        margin-bottom: var(--space-lg);
    }
    
    .risorse-section .section-title {
        font-size: var(--h4-size); /* Stesso responsive di Supporto */
        margin-bottom: var(--space-md);
    }
    
    .risorse-section .section-description {
        font-size: var(--small-size);
        text-align: left; /* Meglio su mobile */
        line-height: 1.6;
    }
    
    .risorse-table-wrapper {
        overflow-x: auto;
    }
    
    .risorse-table {
        min-width: 600px;
    }
    
    .risorse-table th,
    .risorse-table td {
        padding: var(--space-sm) var(--space-md);
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .risorse-section .section-title {
        font-size: var(--h5-size);
    }
    
    .risorse-table {
        min-width: 500px;
    }
    
    .risorse-table th,
    .risorse-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 13px;
    }
}





/* ==============================================
   CASO CLINICO - DESCRIZIONI IMMAGINI E LAYOUT
   ============================================== */

/* Galleria immagini - 3 per riga */
.galleria-grid-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

/* Contenitore info sotto l'immagine */
.image-info {
    margin-top: var(--space-sm);
    text-align: center;
    padding: var(--space-sm);
    background: rgba(66, 133, 244, 0.03);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

/* Caption dell'immagine - titolo principale */
.image-caption {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--space-xs) 0;
    line-height: 1.4;
}

/* Descrizione dettagliata dell'immagine */
.image-description {
    font-size: 13px;
    color: var(--gray-dark);
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

/* Galleria image item con info */
.galleria-image-item {
    text-align: center;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.galleria-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Immagine della galleria */
.galleria-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 150px;
    aspect-ratio: 4/3;
}

/* Zone anatomiche - miglioramenti info immagini */
.zona-image-item {
    text-align: center;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.zona-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Immagine della zona */
.zona-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 180px;
    aspect-ratio: 4/3;
}

/* Miglioramenti lightbox per descrizioni più lunghe */
.lightbox-caption {
    color: var(--white);
    font-size: var(--body-size);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.85);
    padding: var(--space-md) var(--space-lg);
    border-radius: 8px;
    max-width: 700px;
    text-align: center;
    line-height: 1.6;
    margin: 0 auto;
    backdrop-filter: blur(4px);
}

/* Responsive per galleria 3 colonne */
@media (max-width: 768px) {
    .galleria-grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    .image-info {
        padding: var(--space-xs);
    }
    
    .image-caption {
        font-size: 13px;
    }
    
    .image-description {
        font-size: 12px;
    }
    
    .lightbox-caption {
        font-size: 14px;
        padding: var(--space-sm) var(--space-md);
        max-width: 90vw;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .galleria-grid-3-cols {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .galleria-image,
    .zona-image {
        min-height: 120px;
    }
    
    .lightbox-caption {
        font-size: 13px;
        padding: var(--space-xs) var(--space-sm);
        line-height: 1.4;
    }
}


/* Se c'è solo 1 immagine nella galleria */
.galleria-grid-3-cols:has(.galleria-image-item:only-child) {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
}

/* Se ci sono solo 2 immagini */
.galleria-grid-3-cols:has(.galleria-image-item:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
}


/* ==============================================
   GRID RESPONSIVE - GALLERIA E ZONE ANATOMICHE
   ============================================== */

/* Galleria immagini - 3 per riga di default */
.galleria-grid-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

/* Se c'è solo 1 immagine nella galleria - centrata e dimensione media */
.galleria-grid-3-cols:has(.galleria-image-item:only-child) {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Se ci sono solo 2 immagini nella galleria - affiancate e centrate */
.galleria-grid-3-cols:has(.galleria-image-item:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Zone anatomiche - 3 per riga di default */
.zona-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

/* Se c'è solo 1 immagine nella zona - centrata e dimensione media */
.zona-images-grid:has(.zona-image-item:only-child) {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Se ci sono solo 2 immagini nella zona - affiancate e centrate */
.zona-images-grid:has(.zona-image-item:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive per galleria */
@media (max-width: 768px) {
    .galleria-grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    /* Su tablet, anche con 1 immagine usa più spazio */
    .galleria-grid-3-cols:has(.galleria-image-item:only-child) {
        max-width: 100%;
    }
    
    /* Con 2 immagini usa tutta la larghezza disponibile */
    .galleria-grid-3-cols:has(.galleria-image-item:nth-child(2):last-child) {
        max-width: 100%;
    }
    
    .zona-images-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .zona-images-grid:has(.zona-image-item:only-child) {
        max-width: 100%;
    }
    
    .zona-images-grid:has(.zona-image-item:nth-child(2):last-child) {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .galleria-grid-3-cols,
    .zona-images-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    /* Su mobile tutte le grid diventano 1 colonna */
    .galleria-grid-3-cols:has(.galleria-image-item:only-child),
    .galleria-grid-3-cols:has(.galleria-image-item:nth-child(2):last-child),
    .zona-images-grid:has(.zona-image-item:only-child),
    .zona-images-grid:has(.zona-image-item:nth-child(2):last-child) {
        max-width: 100%;
    }
}


/* ==============================================
   CONFRONTO - IMMAGINI ZONE ANATOMICHE 1 PER RIGA
   ============================================== */

/* Grid zone anatomiche nel confronto - 1 per riga */
.zona-images-confronto {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}

/* Immagine zona nel confronto - stessa dimensione dell'immagine principale */
.zona-confronto-image {
    width: 100%;
    max-width: 300px; /* Stessa dimensione dell'immagine principale */
    height: 200px; /* Stessa altezza dell'immagine principale */
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gray-light);
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto; /* Centra se più piccola del contenitore */
}

.zona-confronto-image:hover {
    border-color: var(--primary);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Container immagine zona */
.zona-image-item {
    text-align: center;
    background: var(--white);
    border-radius: 8px;
    padding: var(--space-sm);
    border: 1px solid var(--gray-light);
}

/* Placeholder zone senza immagini */
.zona-no-images {
    margin: var(--space-md) 0;
    text-align: center;
}

.zona-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: var(--gray-light);
    border: 1px dashed var(--gray-medium);
    border-radius: 6px;
    min-width: 200px;
    min-height: 100px;
}

.zona-placeholder-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-dark);
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .zona-confronto-image {
        max-width: 100%;
        height: 160px;
    }
}

@media (max-width: 480px) {
    .zona-confronto-image {
        height: 140px;
    }
}



.caso-thumbnail {
    width: 100px;
    height: 50px;
}

.results-table td {
    padding: 5px !important;
    }


.sidebar-menu .current-gravita::before {
width:0px;

}


.btn-view-small {
     color: var(--white) !important;

}

/* ============================================
   EVIDENZIAZIONE GRAVITÀ NEL MENU SIDEBAR
   HEAD-US Color Coding - SOLO voce attiva
   ============================================ */

/* IMPORTANTE: Colora SOLO i link con classe .gravita-active */

/* Gravità NORMAL - Verde (SOLO quando attiva) */
.sidebar-menu a.gravita-active.severity-normal {
    background-color: #22c55e !important;
    color: white !important;
    font-weight: 600 !important;
    border-left: 4px solid #16a34a !important;
    padding-left: 12px !important;
}

/* Gravità MILD - Giallo (SOLO quando attiva) */
.sidebar-menu a.gravita-active.severity-mild {
    background-color: #eab308 !important;
    color: #1f2937 !important; /* Testo scuro per leggibilità */
    font-weight: 600 !important;
    border-left: 4px solid #ca8a04 !important;
    padding-left: 12px !important;
}

/* Gravità MODERATE - Arancione (SOLO quando attiva) */
.sidebar-menu a.gravita-active.severity-moderate {
    background-color: #f97316 !important;
    color: white !important;
    font-weight: 600 !important;
    border-left: 4px solid #ea580c !important;
    padding-left: 12px !important;
}

/* Gravità SEVERE - Rosso (SOLO quando attiva) */
.sidebar-menu a.gravita-active.severity-severe {
    background-color: #ef4444 !important;
    color: white !important;
    font-weight: 600 !important;
    border-left: 4px solid #dc2626 !important;
    padding-left: 12px !important;
}

/* Hover effect SOLO per le voci gravità attive */
.sidebar-menu a.gravita-active.severity-normal:hover { 
    background-color: #16a34a !important; 
    transform: translateX(2px);
}

.sidebar-menu a.gravita-active.severity-mild:hover { 
    background-color: #ca8a04 !important; 
    color: white !important;
    transform: translateX(2px);
}

.sidebar-menu a.gravita-active.severity-moderate:hover { 
    background-color: #ea580c !important; 
    transform: translateX(2px);
}

.sidebar-menu a.gravita-active.severity-severe:hover { 
    background-color: #dc2626 !important; 
    transform: translateX(2px);
}

/* Animazione transizione smooth */
.sidebar-menu a.gravita-active {
    transition: all 0.3s ease !important;
}

/* ============================================
   LIGHTBOX CONFRONTO SIDE-BY-SIDE
   ============================================ */

.compare-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    overflow: auto;
}

.compare-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-lightbox-content {
    position: relative;
    width: 95vw;
    max-width: 1800px;
    padding: 40px 20px 20px;
}

/* ============================================
   HEADER CON SELETTORI DROPDOWN
   ============================================ */

.compare-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
}

.image-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-selector label {
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

.image-selector select {
    padding: 10px 15px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    min-width: 200px;
    transition: all 0.3s ease;
}

.image-selector select:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.image-selector select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vs-divider {
    font-size: 24px;
    font-weight: bold;
    color: #4285f4;
    padding: 10px;
}

/* ============================================
   CONTAINER IMMAGINI AFFIANCATE
   ============================================ */

.compare-images-container {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 20px;
    align-items: start;
}

.compare-image-side {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.compare-image-side img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.compare-divider {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent, 
        rgba(255, 255, 255, 0.5) 20%, 
        rgba(255, 255, 255, 0.5) 80%, 
        transparent
    );
    min-height: 400px;
}

.image-caption {
    color: white;
    text-align: center;
    font-size: 14px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

/* ============================================
   PULSANTE CHIUDI - QUADRATO FISSO
   ============================================ */

.compare-lightbox .lightbox-close,
.image-lightbox .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    transform: none !important;
    padding: 0;
    z-index: 10;
}

.compare-lightbox .lightbox-close:hover,
.image-lightbox .lightbox-close:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: rgba(239, 68, 68, 1);
    transform: none !important;
}

.compare-lightbox .lightbox-close:active,
.image-lightbox .lightbox-close:active {
    background: rgba(220, 38, 38, 1);
    transform: scale(0.95) !important;
}

/* ============================================
   HINT AL PASSAGGIO DEL MOUSE
   ============================================ */

.compare-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.confronto-main-image:hover .compare-hint {
    opacity: 1;
}

.compare-zona-hint {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.zona-image-item:hover .compare-zona-hint {
    opacity: 1;
}

/* ============================================
   ZONE ANATOMICHE - HEADER
   ============================================ */

.compare-zona-header {
    text-align: center;
    margin-bottom: 20px;
}

.compare-zona-header h3 {
    color: white;
    font-size: 24px;
    margin: 0 0 20px 0;
}

/* ============================================
   LIGHTBOX SINGOLO (per zoom zone uniche)
   ============================================ */

.image-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    overflow: auto;
}

.image-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-lightbox .lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lightbox-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================
   FOOTER CON COUNTER TRA LE FRECCE
   ============================================ */

.lightbox-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 800px;
}

.lightbox-caption {
    color: white;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
}

.lightbox-nav-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.lightbox-counter {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
}

.lightbox-nav {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    transform: none !important;
    padding: 0;
    user-select: none;
    flex-shrink: 0;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: none !important;
}

.lightbox-nav:active {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0.95) !important;
}

/* ============================================
   ZONE ANATOMICHE - LAYOUT GRID
   ============================================ */

.zona-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
    align-items: start;
}

.zona-column {
    min-height: 100px;
}

.zona-placeholder-empty {
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.02);
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    color: #999;
}

.zona-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.zona-image-item {
    position: relative;
    aspect-ratio: 4/3; /* Forza proporzioni uniformi */
    overflow: hidden;
    border-radius: 4px;
     
}

.zona-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zona-comparabile {
    border-left: 3px solid #3b82f6;
    padding-left: 15px;
    margin-bottom: 20px;
}

.zona-singola {
    border-left: 3px solid #94a3b8;
    padding-left: 15px;
    margin-bottom: 20px;
}

/* ============================================
   CODICE CASO CLICCABILE
   ============================================ */

.caso-badge-large {
    transition: all 0.2s ease;
}

a.caso-badge-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

a.caso-badge-large:active {
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .compare-images-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .compare-divider {
        display: none;
    }
    
    .compare-lightbox-header {
        flex-direction: column;
        gap: 20px;
    }
    
    .image-selector select {
        min-width: 280px;
    }
    
    .zona-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .zona-images-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .compare-lightbox .lightbox-close,
    .image-lightbox .lightbox-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 24px;
    }
    
    .lightbox-nav-controls {
        gap: 10px;
    }
    
    .lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .lightbox-counter {
        font-size: 13px;
        padding: 6px 12px;
        min-width: 70px;
    }
    
    .lightbox-caption {
        font-size: 14px;
    }
}

.ricerca-avanzata a,
.case-action-column a {
    color: #333;
    text-decoration: none;
}

.case-action-column a {
    color: #ffffff;
    
}

.ricerca-avanzata a:hover,
.case-action-column a:hover {
    color: #fff;
}


.hero-content a {
    color: #297aec;

}

.image-info .image-caption {
    color:#333;

}

.caso-image-item.confronto .image-info{
    border:0px;
}

.classificazione-box, .paziente-box {
    border-left: 1px solid var(--gray-medium);
}



/* ==============================================
   TABELLA RICERCA - MIGLIORAMENTI LAYOUT
   ============================================== */

/* Centra testo colonne 3-4-5-6 (Joint, View, Severity, Patient) */
.results-table td:nth-child(3),
.results-table td:nth-child(4),
.results-table td:nth-child(5),
.results-table td:nth-child(6),
.results-table th:nth-child(3),
.results-table th:nth-child(4),
.results-table th:nth-child(5),
.results-table th:nth-child(6) {
    text-align: center !important;
}

/* Allarga colonna CODE per evitare wrap */
.results-table td:nth-child(2),
.results-table th:nth-child(2) {
    min-width: 140px;
    white-space: nowrap;
}

/* Badge codice caso - no wrap */
.caso-badge-small {
    white-space: nowrap;
    display: inline-block;
}

/* Colonna Actions sempre a destra */
.results-table td:last-child,
.results-table th:last-child {
    text-align: center !important;
}

/* Larghezze ottimali per leggibilità */
.results-table th:nth-child(1), 
.results-table td:nth-child(1) {
    width: 90px; /* Image */
}

.results-table th:nth-child(2), 
.results-table td:nth-child(2) {
    width: 140px; /* Code */
}

.results-table th:nth-child(3), 
.results-table td:nth-child(3) {
    width: 100px; /* Joint */
}

.results-table th:nth-child(4), 
.results-table td:nth-child(4) {
    width: 100px; /* View */
}

.results-table th:nth-child(5), 
.results-table td:nth-child(5) {
    width: 120px; /* Severity */
}

.results-table th:nth-child(6), 
.results-table td:nth-child(6) {
    width: 120px; /* Patient */
}

.results-table th:nth-child(7), 
.results-table td:nth-child(7) {
    width: auto; /* Condition - flexible */
}

.results-table th:nth-child(8), 
.results-table td:nth-child(8) {
    width: 100px; /* Actions */
}

/* Responsive - mantieni centrato su tablet */
@media (max-width: 768px) {
    .results-table td:nth-child(3),
    .results-table td:nth-child(4),
    .results-table td:nth-child(5),
    .results-table td:nth-child(6) {
        text-align: center !important;
        font-size: 13px;
    }
    
    .results-table td:nth-child(2) {
        min-width: 120px;
    }
}


/* Forza layout verticale SOLO per Condition */
.info-item:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.info-item:last-child .label {
    width: 100%;
}

.info-item:last-child .value {
    text-align: left;
    width: 100%;
}





/* ==========================================================================
   About Page Styles
   ========================================================================== */

.about-content {
    padding: 60px 0;
    background: #fff;
}


.about-section {
    margin-bottom: var(--space-xxl);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.about-section:last-child {
    margin-bottom: 0;
}

.about-section .section-title {
font-size: var(--h3-size) !important;
    font-weight: 600;
    margin: 0 0 var(--space-lg);
    color: var(--text);
    border-bottom: 2px solid var(--primary);
    padding-bottom: var(--space-sm);
    display: inline-block;
}

.about-section .section-description {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    max-width: 950px;
}

.about-section .section-description p {
    margin-bottom: 20px;
}

.about-section .section-description strong {
    color: #2c3e50;
    font-weight: 600;
}

.about-section .wp-block-video {
    margin: 30px 0;
}

.about-section .wp-block-video video {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .about-content {
        padding: 40px 0;
    }
    
    .about-section {
        margin-bottom: 40px;
    }
    
    .about-section .section-title {
        font-size: 24px;
    }
    
    .about-section .section-description {
        font-size: 15px;
    }
}