/* Carruseles. Só tokens do app.css/next.css. */
.cr { display: block; max-width: 1240px; }
.cr-comp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; max-width: 720px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cr-comp form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cr-comp > * { min-width: 0; }
.cr-comp .segmento { display: flex; max-width: 100%; margin: 0; }
.cr-comp .segmento button { flex: 1; padding-inline: 8px; }
.cr-comp .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
.cr-comp textarea { resize: vertical; }
.cr-acc { border: 0; padding: 0; margin: 6px 0 0; }
.cr-comp-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.cr-cupo, .cr-nota { color: var(--muted); font-size: 14px; }
.cr-lista { margin-top: 30px; max-width: 720px; }
.cr-lista h2 { font-size: 18px; margin: 0 0 10px; }
.cr-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cr-lista li { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.cr-lista a { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; min-height: 44px; }
.cr-mini { width: 44px; height: 55px; border-radius: 6px; overflow: hidden; flex: none; }
.cr-mini canvas { width: 100%; height: 100%; display: block; }
.cr-li-t { display: grid; min-width: 0; } .cr-li-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .cr-li-t small { color: var(--muted); }
.cr-ic { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r); color: var(--muted); cursor: pointer; }
.cr-ic:hover { background: var(--bg-2); color: var(--ink); }
.cr-vacio { color: var(--muted); }
.cr-esq { background: var(--bg-2); border-radius: var(--r-lg); animation: crp 1.4s ease-in-out infinite; }
@keyframes crp { 50% { opacity: .55; } }
.cr-esc { padding: 40px 0; } .cr-esc p { color: var(--ink-2); }
.cr-esc-fila { display: flex; gap: 12px; margin-bottom: 18px; overflow: hidden; }
.cr-esc-fila i { width: 160px; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--brand-soft); animation: crp 1.4s ease-in-out infinite; flex: none; }
.cr-esc-fila i:nth-child(2) { animation-delay: .15s; } .cr-esc-fila i:nth-child(3) { animation-delay: .3s; } .cr-esc-fila i:nth-child(4) { animation-delay: .45s; } .cr-esc-fila i:nth-child(5) { animation-delay: .6s; }

.cr-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cr-vol { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; background: none; border: 0; color: var(--ink-2); cursor: pointer; font: inherit; padding: 0 6px 0 0; }
.cr-tit { flex: 1 1 220px; min-width: 0; font: 600 20px var(--f-ui); border: 1px solid transparent; border-radius: var(--r-sm); padding: 8px 10px; background: transparent; color: var(--ink); min-height: 44px; }
.cr-tit:hover, .cr-tit:focus { border-color: var(--line-2); background: var(--surface); outline: 0; }
.cr-guardado { color: var(--muted); font-size: 13px; }
.cr-acc-top { display: flex; gap: 8px; }
.cr-ed { display: grid; grid-template-columns: 112px minmax(0, 1fr) 360px; gap: 22px; align-items: start; margin-top: 14px; }
.cr-tira { display: grid; gap: 10px; max-height: 76vh; overflow-y: auto; padding: 2px; }
.cr-th { position: relative; padding: 0; width: 96px; aspect-ratio: 4 / 5; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; overflow: hidden; }
.cr-th canvas { width: 100%; height: 100%; display: block; border-radius: 8px; }
.cr-th[aria-current="true"] { border-color: var(--brand); }
.cr-th span { position: absolute; left: 6px; top: 5px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink); border-radius: 6px; padding: 1px 6px; }
.cr-th em { position: absolute; right: 6px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); font: 700 13px/18px var(--f-ui); text-align: center; }
.cr-add { display: grid; place-items: center; background: var(--surface); border: 1px dashed var(--line-2); aspect-ratio: 1; color: var(--ink-2); }
.cr-esc2 { display: grid; justify-items: center; gap: 10px; }
.cr-lz { width: min(100%, 560px); height: auto; border-radius: 14px; box-shadow: var(--shadow-2); background: var(--bg-2); }
.cr-alta { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--ink-2); }
.cr-panel { display: grid; gap: 12px; }
.cr-p-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 8px; }
.cr-p-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cr-cont { font-size: 13px; color: var(--muted); } .cr-mal { color: var(--err); font-weight: 600; }
.cr-dica { font-size: 14px; color: var(--ink-2); margin: 0; }
.cr-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.cr-slide-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-det summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.cr-gs { display: grid; gap: 6px; margin-top: 6px; }
.cr-g { text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; min-height: 44px; cursor: pointer; font: inherit; color: var(--ink); }
.cr-g:hover { border-color: var(--brand); }
.cr-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-color { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); cursor: pointer; }
.cr-color[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.cr-2 { display: flex; gap: 14px; font-size: 14px; color: var(--ink-2); } .cr-2 label { display: inline-flex; align-items: center; gap: 8px; }
.cr-2 input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; }
.cr-hoja { border: 0; border-radius: var(--r-lg); padding: 22px; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.cr-hoja::backdrop { background: var(--veu); }
.cr-hoja h2 { margin: 0 0 12px; font-size: 20px; }
.cr-hoja-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cr-barra-movil { display: none; }
@media (max-width: 1100px) { .cr-ed { grid-template-columns: 112px minmax(0, 1fr); } .cr-panel { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .cr-ed { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cr-tira { display: flex; overflow-x: auto; max-height: none; grid-row: 2; }
  .cr-th { width: 72px; flex: none; }
  .cr-acc-top .btn-brand { display: none; }
  .cr-guardado { order: 3; }
  .cr-barra-movil { display: block; position: sticky; bottom: 76px; padding: 10px 0; z-index: 5; } .cr-barra-movil .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cr-esq, .cr-esc-fila i { animation: none; } }
.cr-th canvas { box-shadow: 0 0 0 1px var(--line); }
.cr-tit { text-overflow: ellipsis; }