:root{ --brand:#0D2B45; --brand-600:#3A7CA5; --accent:#FFC72C; --text:#242629; --muted:#4A4A4A; --bg:#F5F1E9; --surface:#fff; --surface-2:#f2f2f0; --ok:#2E8B57; --warn:#FFC72C; --err:#C82333; --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.08); --border:#e5e1d8; }
*,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--text);background:var(--bg)} a{color:var(--brand)}
.container{width:min(1200px,92vw);margin:0 auto;padding:24px 0}
.header{position:sticky;top:0;z-index:50;background:rgba(245,241,233,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brand)} .brand img{height:28px}
.nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
.nav a:hover{background:var(--surface-2)} .nav a.active{background:var(--brand);color:#fff}
.sidebar-layout{display:grid;grid-template-columns:260px 1fr;gap:24px} @media(max-width:960px){.sidebar-layout{grid-template-columns:1fr}}
.sidebar{align-self:start;position:sticky;top:72px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi .v{font-size:28px;font-weight:700} .kpi .l{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-weight:600}
.btn-primary{background:var(--accent);color:#000} .btn-ghost{background:transparent;border-color:var(--border)}
.field{display:grid;gap:6px} label{font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2)}
input:focus,select:focus,textarea:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(58,124,165,.15);outline:none}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border)}
.table thead th{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-size:12px}
.table tbody tr:hover{background:#faf9f5}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
.badge.ok{background:rgba(46,139,87,.15);color:var(--ok)} .badge.err{background:rgba(200,35,51,.15);color:var(--err)}
.alert{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fffbe6}
.grid{display:grid;gap:16px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} @media(max-width:1200px){.gallery{grid-template-columns:repeat(4,1fr)}} @media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.gallery{grid-template-columns:repeat(2,1fr)}}
.card-img{overflow:hidden;border-radius:12px} .card-img img{width:100%;height:180px;object-fit:cover;display:block}

/* Card size variants from settings */
.card-size-small .card-img img{ height:140px; }
.card-size-medium .card-img img{ height:180px; }
.card-size-large .card-img img{ height:240px; }

/* Carousel (dashboard) taller images */
#carousel .card-img img{ height:300px; }
@media(max-width: 600px){
  #carousel .card-img img{ height:220px; }
}

/* Chart.js sizing */
.chart-wrap{ position:relative; width:100%; height:200px; }
.chart-wrap canvas{ display:block; width:100% !important; height:100% !important; }
@media(max-width: 600px){
  .chart-wrap{ height:160px; }
}

/* Lightbox / zoom d'image */
.lb-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; z-index:1000; }
.lb-overlay.open{ display:flex; }
.lb-img-wrap{ position:relative; max-width:96vw; max-height:90vh; }
.lb-img-wrap img{ display:block; max-width:96vw; max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.5); }
.lb-close, .lb-prev, .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:10px 12px; border-radius:12px; cursor:pointer; user-select:none;
}
.lb-close{ top:12px; right:12px; transform:none; }
.lb-prev{ left:-56px; } .lb-next{ right:-56px; }
@media(max-width: 680px){
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
}