/* Piccole classi riusabili sopra Tailwind (via @apply non disponibile con il CDN, quindi CSS puro). */
.btn-primary { display:inline-flex; align-items:center; gap:.375rem; background:#0e2ac9; color:#fff; font-weight:500; font-size:.875rem; padding:.5rem .875rem; border-radius:.5rem; }
.btn-primary:hover { background:#0a1f96; }
.btn-secondary { display:inline-flex; align-items:center; gap:.375rem; background:#fff; color:#0f172a; font-weight:500; font-size:.875rem; padding:.5rem .875rem; border-radius:.5rem; border:1px solid #cbd5e1; }
.btn-secondary:hover { background:#f8fafc; }
.btn-danger { display:inline-flex; align-items:center; gap:.375rem; background:#fff; color:#b91c1c; font-weight:500; font-size:.875rem; padding:.5rem .875rem; border-radius:.5rem; border:1px solid #fecaca; }
.btn-danger:hover { background:#fef2f2; }
.btn-success { display:inline-flex; align-items:center; gap:.375rem; background:#15803d; color:#fff; font-weight:500; font-size:.875rem; padding:.5rem .875rem; border-radius:.5rem; }
.btn-success:hover { background:#166534; }

.badge { display:inline-flex; align-items:center; font-size:.75rem; font-weight:500; padding:.125rem .5rem; border-radius:9999px; white-space:nowrap; }
.badge-gray  { background:#f1f5f9; color:#475569; }
.badge-blue  { background:#dbeafe; color:#1d4ed8; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-orange { background:#ffedd5; color:#c2410c; }
.badge-violet { background:#ede9fe; color:#6d28d9; }
.badge-red   { background:#fee2e2; color:#b91c1c; }
.badge-green { background:#dcfce7; color:#15803d; }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:.75rem; }

/* form */
form input[type=text], form input[type=url], form input[type=date], form input[type=number], form input[type=password], form input[type=email], form input[type=time], form select, form textarea {
  width:100%; border:1px solid #cbd5e1; border-radius:.5rem; padding:.5rem .75rem; font-size:.875rem; background:#fff;
}
form input:focus, form select:focus, form textarea:focus { outline:2px solid #0e2ac9; outline-offset:0; border-color:#0e2ac9; }
form label { display:block; font-size:.8125rem; font-weight:500; color:#334155; margin-bottom:.25rem; }
.errorlist { color:#b91c1c; font-size:.8125rem; margin:.25rem 0 0; padding-left:1rem; }
.helptext { display:block; font-size:.75rem; color:#64748b; margin-top:.25rem; }

/* anteprime social */
.phone { width:100%; max-width:380px; margin:0 auto; background:#fff; border:1px solid #e2e8f0; border-radius:1.25rem; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.phone-dark { background:#000; color:#fff; border-color:#000; }
.media-box { background:#f1f5f9; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.media-box img { width:100%; height:100%; object-fit:cover; display:block; }
.ratio-1 { aspect-ratio:1/1; }
.ratio-4-5 { aspect-ratio:4/5; }
.ratio-9-16 { aspect-ratio:9/16; }
.copy-text { white-space:pre-wrap; word-break:break-word; }
.avatar { width:32px; height:32px; border-radius:9999px; background:#e2e8f0; object-fit:cover; flex:none; }

/* fallback visual (cartella o immagine non caricabile) */
.media-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; width:100%; height:100%; text-align:center; font-size:.8125rem; color:#475569; padding:1rem; text-decoration:none; }
.phone-dark .media-fallback { color:#a3a3a3; }

/* calendario */
.cal-head { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.cal-head > div { padding:.5rem; font-size:.75rem; font-weight:500; color:#64748b; text-align:center; }
.cal-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid #e2e8f0; }
.cal-week:last-child { border-bottom:0; }
.cal-day { min-height:520px; padding:.5rem; border-right:1px solid #f1f5f9; }
.cal-week-month .cal-day { min-height:150px; }
.cal-day:last-child { border-right:0; }
.cal-day-out { background:#fafafa; }
.cal-day-out .cal-daynum span { color:#cbd5e1; }
.cal-daynum { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:#64748b; margin-bottom:.5rem; }
.cal-day-today .cal-daynum span { background:#0e2ac9; color:#fff; border-radius:9999px; padding:.125rem .5rem; font-weight:500; }
.cal-add { color:#94a3b8; font-size:1rem; line-height:1; padding:0 .25rem; border-radius:.25rem; opacity:0; }
.cal-day:hover .cal-add { opacity:1; }
.cal-add:hover { background:#e7eafb; color:#0e2ac9; }
.cal-card { display:block; background:#fff; border:1px solid #e2e8f0; border-radius:.625rem; padding:.5rem; text-decoration:none; color:inherit; }
.cal-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); border-color:#cbd5e1; }
.platform { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:4px; font-size:9px; font-weight:700; color:#fff; }
.platform-instagram { background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.platform-facebook { background:#1877f2; }
.platform-tiktok { background:#000; }

/* visual letti da Drive */
.visual-video { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.visual-strip { display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; }
.visual-slide { position:relative; flex:0 0 100%; height:100%; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; }
.visual-slide img { width:100%; height:100%; object-fit:cover; }
.visual-count { position:absolute; top:.5rem; right:.5rem; background:rgba(0,0,0,.6); color:#fff; font-size:.75rem; border-radius:9999px; padding:.125rem .5rem; }
.pointer-pass { pointer-events:none; }
.media-box { position:relative; }
.visual-error { position:absolute; left:.5rem; right:.5rem; bottom:.5rem; background:rgba(255,251,235,.95); color:#92400e; border:1px solid #fde68a; border-radius:.5rem; font-size:.6875rem; line-height:1.3; padding:.25rem .5rem; }
.visual-missing { position:absolute; left:.375rem; right:.375rem; bottom:.375rem; background:#fffbeb; color:#92400e; border:1px solid #fcd34d; border-radius:.375rem; font-size:.6875rem; line-height:1.25; padding:.125rem .375rem; text-align:center; }
/* carosello: niente barra di scorrimento, frecce a metà altezza */
.visual-carousel { position:relative; width:100%; height:100%; }
.visual-strip { scrollbar-width:none; -ms-overflow-style:none; }
.visual-strip::-webkit-scrollbar { display:none; }
.visual-arrow { position:absolute; top:50%; transform:translateY(-50%); width:2rem; height:2rem; border-radius:9999px; background:rgba(255,255,255,.9); color:#0f172a; font-size:1.375rem; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25); border:0; cursor:pointer; }
.visual-arrow[hidden] { display:none; }
.visual-prev { left:.5rem; }
.visual-next { right:.5rem; }
/* accesso */
form input.auth-input { width:100%; border:1.5px solid #94a3b8; border-radius:.625rem; padding:.75rem .875rem; font-size:.9375rem; background:#fff; transition:border-color .15s, box-shadow .15s; }
form input.auth-input:focus { outline:none; border-color:#0e2ac9; box-shadow:0 0 0 3px rgba(14,42,201,.15); }
.auth-btn { width:100%; justify-content:center; padding:.75rem 1rem; font-size:.9375rem; border-radius:.625rem; }
.platform-lg { width:22px; height:22px; border-radius:6px; font-size:11px; }
/* pulsanti operativi grandi */
.btn-big { display:flex; align-items:center; justify-content:center; gap:.375rem; width:100%; font-weight:600; font-size:.875rem; padding:.625rem .875rem; border-radius:.625rem; border:2px solid transparent; transition:transform .05s, filter .15s; }
.btn-big:hover { filter:brightness(.95); }
.btn-big:active { transform:translateY(1px); }
.btn-big-ok { background:#15803d; color:#fff; }
.btn-big-go { background:#0e2ac9; color:#fff; }
.btn-big-no { background:#fff; color:#b91c1c; border-color:#ef4444; }
.btn-big-neutral { background:#fff; color:#334155; border-color:#cbd5e1; }
.btn-comment { display:flex; align-items:center; justify-content:center; gap:.375rem; font-weight:600; font-size:.875rem; padding:.625rem .875rem; border-radius:.625rem; border:2px solid transparent; }
.btn-comment-internal { background:#334155; color:#fff; }
.btn-comment-internal:hover { background:#1e293b; }
.btn-comment-client { background:#0e2ac9; color:#fff; }
.btn-comment-client:hover { background:#0a1f96; }
.btn-comment-changes { background:#fff; color:#b91c1c; border-color:#ef4444; }
.btn-comment-changes:hover { background:#fef2f2; }
/* commenti stile chat: nessuno sfondo colorato, conta il colore del testo */
.msg { max-width:80%; border:1px solid #e2e8f0; border-radius:.75rem; padding:.375rem .625rem; background:#fff; }
.msg-meta { font-size:.6875rem; line-height:1.2; margin-bottom:.125rem; opacity:.8; }
.msg-body { font-size:.875rem; line-height:1.35; }
.msg-client { color:#0f172a; border-bottom-left-radius:.25rem; }
.msg-pquod { color:#0e2ac9; text-align:right; border-bottom-right-radius:.25rem; }
.msg-internal { color:#334155; text-align:right; border-style:dashed; border-color:#94a3b8; border-bottom-right-radius:.25rem; }
.msg-pquod .msg-body, .msg-internal .msg-body { text-align:left; }
/* barra azioni sui commenti */
.msg-tools { opacity:0; transition:opacity .15s; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity:1; }
@media (hover:none) { .msg-tools { opacity:1; } }
.msg-tool { font-size:.875rem; line-height:1; padding:.1875rem .25rem; border-radius:.375rem; color:#64748b; transition:transform .12s; display:inline-flex; align-items:center; }
.msg-tool:hover { transform:scale(1.18); }
.msg-tool-icon svg { width:1.05rem; height:1.05rem; }
.msg-tool:hover { background:#f1f5f9; }
.reaction { font-size:.75rem; line-height:1; padding:.1875rem .4375rem; border:1px solid #e2e8f0; border-radius:9999px; background:#fff; color:#334155; }
.reaction-mine { border-color:#0e2ac9; color:#0e2ac9; }
.msg-resolved { opacity:.55; }
.msg { min-width:14rem; }
/* risposte: collegate al commento sopra con una linea */
.thread { margin-top:-.25rem; padding-top:.375rem; }
.thread-left { margin-left:1rem; padding-left:.75rem; border-left:2px solid #cbd5e1; }
.thread-right { margin-right:1rem; padding-right:.75rem; border-right:2px solid #cbd5e1; }
.thread .msg { max-width:90%; }
.reply-box { margin-top:.5rem; padding-top:.5rem; border-top:1px dashed #cbd5e1; text-align:left; }
.reply-box textarea { color:#0f172a; }
/* commenti ancora più compatti */
#comments { row-gap:0; }
#comments > * + * { margin-top:.375rem !important; }
.msg { padding:.25rem .5rem; border-radius:.625rem; min-width:12rem; }
.msg-meta { font-size:.625rem; margin-bottom:0; }
.msg-body { font-size:.8125rem; line-height:1.3; }
.msg-tool { font-size:.8125rem; padding:.125rem .1875rem; }
.msg-tool-icon svg { width:.95rem; height:.95rem; }
.reaction { font-size:.6875rem; padding:.125rem .375rem; }
.thread { margin-top:-.125rem; padding-top:.25rem; }
.thread > * + * { margin-top:.25rem !important; }
#comments form textarea { min-height:0; }
/* card post (calendario / elenco) */
.cal-card { border-radius:.875rem; padding:.625rem; border:1.5px solid #e2e8f0; }
.platform-md { width:22px; height:22px; border-radius:6px; font-size:10px; }
.badge-icon { gap:.25rem; padding:.1875rem .5rem .1875rem .375rem; border:1px solid currentColor; border-color:color-mix(in srgb, currentColor 25%, transparent); }
.badge-icon svg { width:.875rem; height:.875rem; flex:none; }