/* Comics: componenti propri, sopra studio.css (copiato da pinokio-configs/_shared/css).
   Stessi token; l'accento di questa app e' il magenta. */

body[data-vert="comics"] {
    --accent: #ff5ad1;
    --accent-ink: #1f0418;
    --accent-soft: rgb(255 90 209 / 0.13);
    --accent-line: rgb(255 90 209 / 0.5);
}

.app-mark.cm-mark {
    display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
}
.app-mark.cm-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round; }

.cm-view { display: grid; gap: 16px; }
.cm-view[hidden] { display: none !important; }
.cm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.cm-head h1, .cm-head h2 { margin: 0; }
.cm-sub { color: var(--text-dim); font-size: .9rem; }

/* ---- Barra filtri ---- */
.cm-filtri { display: grid; gap: 10px; grid-template-columns: 1fr; }
.cm-filtri .cm-riga { display: flex; gap: 10px; flex-wrap: wrap; }
.cm-filtri .cm-riga > * { flex: 1 1 140px; }
@media (min-width: 900px) {
    .cm-filtri { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: center; }
    .cm-filtri .cm-riga { display: contents; }
}

/* ---- Griglia copertine ---- */
.cm-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    list-style: none; margin: 0; padding: 0;
}
@media (min-width: 900px) { .cm-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; } }

.cm-item { display: grid; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.cm-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.cm-cover {
    position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--line);
    display: grid; place-items: center; transition: transform .15s ease, border-color .15s ease;
}
.cm-item:hover .cm-cover { transform: translateY(-2px); border-color: var(--accent-line); }
.cm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cover .cm-nocover {
    padding: 12px; text-align: center; color: var(--text-faint); font-size: .8rem; line-height: 1.3;
    display: grid; gap: 6px; place-items: center;
}
.cm-cover .cm-nocover svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cm-badge {
    position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 800; background: rgb(9 9 12 / .78); color: var(--text);
    border: 1px solid var(--line-strong); backdrop-filter: blur(4px);
}
.cm-badge.num { left: auto; right: 8px; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.cm-item .cm-t { font-weight: 700; font-size: .92rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-item .cm-m { color: var(--text-dim); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cm-more { display: flex; justify-content: center; padding-top: 8px; }

/* ---- Scanner ---- */
.cm-scan { display: grid; gap: 16px; }
@media (min-width: 1000px) { .cm-scan { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }

.cm-cam {
    position: relative; border-radius: var(--radius-l); overflow: hidden; background: #000;
    aspect-ratio: 4 / 3; border: 1px solid var(--line);
}
@media (max-width: 699px) { .cm-cam { aspect-ratio: 3 / 4; max-height: 62dvh; } }
.cm-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cam .cm-mirino {
    position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center;
}
.cm-cam .cm-mirino::before {
    content: ""; width: 78%; height: 32%; max-height: 180px; border-radius: 16px;
    border: 2px solid rgb(255 255 255 / .85);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .38);
}
.cm-cam .cm-laser {
    position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: var(--accent);
    box-shadow: 0 0 12px var(--accent); animation: cm-laser 1.8s ease-in-out infinite;
}
@keyframes cm-laser { 0%, 100% { transform: translateY(-40px); } 50% { transform: translateY(40px); } }
.cm-cam.flash .cm-mirino::before { border-color: var(--ok); }
.cm-cam .cm-cam-off {
    position: absolute; inset: 0; display: grid; place-items: center; gap: 12px; text-align: center;
    padding: 24px; color: var(--text-dim); background: var(--surface);
}
.cm-cam-tools {
    position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px;
}
.cm-cam-tools button {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3);
    background: rgb(9 9 12 / .6); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.cm-cam-tools button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.cm-cam-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Toggle a interruttore */
.cm-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: var(--tap); user-select: none; }
.cm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cm-switch .track {
    width: 50px; height: 30px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-strong);
    position: relative; flex: 0 0 auto; transition: background .15s ease;
}
.cm-switch .track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--text); transition: transform .15s ease;
}
.cm-switch input:checked + .track { background: var(--accent); border-color: transparent; }
.cm-switch input:checked + .track::after { transform: translateX(20px); background: var(--accent-ink); }
.cm-switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-switch .lbl strong { display: block; }
.cm-switch .lbl small { color: var(--text-dim); }

.cm-manuale { display: flex; gap: 10px; }
.cm-manuale .ed-input { flex: 1; font-family: var(--mono); letter-spacing: .04em; }

/* Coda della scansione continua */
.cm-coda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cm-coda li {
    display: grid; grid-template-columns: auto 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 10px 0; border-top: 1px solid var(--line);
}
.cm-coda li:first-child { border-top: 0; }
.cm-coda .mini { width: 44px; aspect-ratio: 2/3; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.cm-coda .mini img { width: 100%; height: 100%; object-fit: cover; }
.cm-coda .t { font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-coda .m { color: var(--text-dim); font-size: .8rem; font-family: var(--mono); }
.cm-coda input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
.cm-coda .x { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 1.2rem; }
.cm-coda .x:hover { color: var(--danger); }
.cm-coda li.nuovo { animation: cm-in .4s ease; }
@keyframes cm-in { from { background: var(--accent-soft); } to { background: transparent; } }

/* ---- Scheda volume ---- */
.cm-scheda { display: grid; gap: 20px; }
@media (min-width: 900px) { .cm-scheda { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.cm-scheda .cm-cover { max-width: 280px; width: 100%; margin-inline: auto; }
.cm-cover-azioni { display: grid; gap: 8px; margin-top: 12px; max-width: 280px; margin-inline: auto; }
.cm-form { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .cm-form { grid-template-columns: repeat(6, 1fr); }
    .cm-form .s6 { grid-column: span 6; } .cm-form .s4 { grid-column: span 4; }
    .cm-form .s3 { grid-column: span 3; } .cm-form .s2 { grid-column: span 2; }
}
.cm-form .control-group { margin: 0; }
.cm-form textarea.ed-input { min-height: 110px; resize: vertical; }
.cm-meta { color: var(--text-faint); font-size: .8rem; font-family: var(--mono); }

.cm-candidate { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.cm-candidate button {
    padding: 0; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2);
    aspect-ratio: 2/3; cursor: pointer;
}
.cm-candidate button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-candidate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Serie ---- */
.cm-serie-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .cm-serie-list { grid-template-columns: repeat(2, 1fr); } }
.cm-serie-list a {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
    color: inherit; text-decoration: none;
}
.cm-serie-list a:hover { border-color: var(--accent-line); background: var(--surface-2); }
.cm-serie-list .mini { width: 52px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.cm-serie-list .mini img { width: 100%; height: 100%; object-fit: cover; }
.cm-serie-list .t { font-weight: 750; }
.cm-serie-list .m { color: var(--text-dim); font-size: .85rem; }
.cm-buchi { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-buchi span {
    min-width: 36px; padding: 4px 8px; border-radius: 8px; text-align: center; font-size: .82rem; font-family: var(--mono);
    border: 1px dashed var(--line-strong); color: var(--text-dim);
}

/* ---- Statistiche ---- */
.cm-kpi { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .cm-kpi { grid-template-columns: repeat(4, 1fr); } }
.cm-kpi .card { padding: 16px; }
.cm-kpi .v { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.cm-kpi .l { color: var(--text-dim); font-size: .82rem; }
.cm-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.cm-bar:first-child { border-top: 0; }
.cm-bar .track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.cm-bar .track span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---- Ritaglio copertina ---- */
.cm-modal {
    position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / .82);
    display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.cm-crop-area { position: relative; display: grid; place-items: center; padding: 16px; overflow: hidden; touch-action: none; }
.cm-crop-stage { position: relative; max-width: 100%; max-height: 100%; }
.cm-crop-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 140px); user-select: none; -webkit-user-drag: none; }
.cm-crop-box {
    position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 100vmax rgb(0 0 0 / .5);
    cursor: move; touch-action: none;
}
.cm-crop-box i {
    position: absolute; width: 28px; height: 28px; background: var(--accent); border-radius: 50%;
    border: 3px solid #000; touch-action: none;
}
.cm-crop-box i[data-h="nw"] { left: -14px; top: -14px; cursor: nwse-resize; }
.cm-crop-box i[data-h="ne"] { right: -14px; top: -14px; cursor: nesw-resize; }
.cm-crop-box i[data-h="sw"] { left: -14px; bottom: -14px; cursor: nesw-resize; }
.cm-crop-box i[data-h="se"] { right: -14px; bottom: -14px; cursor: nwse-resize; }
.cm-modal .btn-row { justify-content: center; padding: 12px 16px 16px; background: var(--surface); border-top: 1px solid var(--line); }

/* ---- Login ---- */
.cm-hero em { font-style: normal; color: var(--accent); }
.cm-errore { color: var(--danger); }

.cm-conferma .cm-scheda { grid-template-columns: 1fr; }
@media (min-width: 700px) { .cm-conferma .cm-scheda { grid-template-columns: 180px minmax(0, 1fr); } }
.cm-conferma .cm-cover { max-width: 180px; }

/* Hero di accesso (in studio sta in portale.css) */
.cm-hero {
    max-width: 42rem; margin: 0 auto; min-height: calc(100dvh - 56px); padding: 32px var(--gutter);
    display: grid; align-content: center; gap: 16px;
}
.cm-hero h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin: 0; }
.cm-hero p { color: var(--text-dim); margin: 0; font-size: 1.05rem; }
.cm-hero .btn-row { margin-top: 8px; }

/* Icone inline nei bottoni e nei messaggi (la tabbar ha le sue misure in studio.css) */
svg.ico {
    width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px;
}
.btn svg.ico { margin-right: 2px; }
.cm-cam-off svg.ico { width: 40px; height: 40px; margin: 0 auto 8px; display: block; color: var(--text-faint); }