/* ========= Base (Front2) ========= */
*{box-sizing:border-box}
html,body{height:100%}
:root{ --dragzone-h:160px;
    --gap:16px; --radius:16px; --panel-w:340px;
    --deck-card-min:110px; --deck-card-ideal:22vw; --deck-card-max:70mm;
}
@media (min-width:1200px){ :root{ --gap:18px; --panel-w:360px; } }
@media (min-width:1600px){ :root{ --gap:20px; --panel-w:420px; } }
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#e2e8f0;background:#0b1020}
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(180deg,#0b1020,#0f1935);border-bottom:1px solid #1f2a4a;gap:12px}
.topbar .brand{font-weight:700;color:#e2e8f0}
.topbar .controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topbar input{padding:8px 10px;border-radius:8px;border:1px solid #334155;background:#0b1226;color:#e2e8f0;min-width:220px}
.folderField{display:flex;align-items:center;gap:6px}
.primary{background:#2563eb;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:700;box-shadow:0 4px 10px rgba(37,99,235,.25);cursor:pointer}
.secondary{background:#475569;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.ghost{background:transparent;border:1px solid #334155;color:#cbd5e1;border-radius:10px;padding:8px 12px;cursor:pointer}
.primary:disabled,.secondary:disabled{opacity:.5;cursor:not-allowed}
.linklike{border:0;background:transparent;color:#60a5fa;cursor:pointer;text-decoration:underline}
.on-mobile{display:none}
@media (max-width:992px){ .on-mobile{display:inline-flex} }
.container{display:grid;grid-template-columns:1fr;gap:var(--gap);padding:var(--gap);max-width:1500px;}

/* ========= Deck + Dropzone combinados ========= */
.deckSection{width:100%}
.deckNav{display:grid;grid-template-columns:clamp(40px,3vw,56px) 1fr clamp(40px,3vw,56px);gap:12px;align-items:center;margin-top:4px;width:100%}
.deck{overflow:auto;white-space:nowrap;background:#0b1226;border:2px dashed #334155;border-radius:var(--radius);padding:10px;scroll-behavior:smooth;min-height:140px;position:relative;z-index:2;width:100%}
.deck.dragover{outline:2px solid #60a5fa}
.deckEmpty{display:grid;place-items:center;color:#9ca3af;padding:16px 8px}
.deckEmpty .hint{opacity:.8;font-size:.9rem}
.card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:6px;padding:6px;border-radius:12px;background:#0f172a;border:1px solid #23304f;width:clamp(var(--deck-card-min), var(--deck-card-ideal), var(--deck-card-max));aspect-ratio:70/90;height:auto;position:relative}
.card img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.card .actions{position:absolute;top:6px;right:6px;display:flex;gap:6px}


/* ========= Grid (Front2) ========= */
.gridSection{display:grid;grid-template-columns:var(--panel-w) 1fr;gap:var(--gap)}
@media (max-width:992px){ .gridSection{grid-template-columns:1fr} }
.legend{background:#0f172a;border:1px solid #23304f;border-radius:var(--radius);padding:0;color:#cbd5e1;max-height:calc(100vh - 180px);overflow:auto}
.legendTop{position:sticky;top:0;background:#0f172a;border-bottom:1px solid #23304f;padding:12px;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.legendTop h3{margin:0 0 6px 0;color:#93c5fd}
.legendHelp{font-size:.9rem;color:#94a3b8}
.checksPanel{padding:12px}
.legendHeader{display:none;align-items:center;justify-content:space-between;margin-bottom:8px}
@media (max-width:992px){
    .legend{position:fixed;inset:0 0 0 0;display:none;z-index:80;padding:0;max-height:none;border-radius:0;background:rgba(2,6,23,.98)}
    body.panel-open .legend{display:block}
    .legendHeader{display:flex;padding:12px;border-bottom:1px solid #23304f}
}
.grid{background:#0f172a;border:1px solid #23304f;border-radius:var(--radius);padding:12px;display:grid;gap:10px}
.grid .row{display:grid;gap:10px;grid-template-columns:repeat(7, minmax(140px, 1fr))}
@media (max-width:1200px){ .grid .row{grid-template-columns:repeat(4, minmax(140px, 1fr))} }
@media (max-width:800px){ .grid .row{grid-template-columns:repeat(2, minmax(140px, 1fr))} }
@media (max-width:520px){ .grid .row{grid-template-columns:1fr} }
.grid .rowHeader{color:#a5b4fc;font-weight:700;margin-top:12px}
.dropcell{min-height:140px;border:2px dashed #475569;border-radius:14px;padding:8px;background:#0b1226}
.dropcell.dragover{outline:2px solid #60a5fa}
.cellHeader{display:flex;justify-content:space-between;align-items:center;color:#cbd5e1;margin-bottom:6px}
.thumbList{display:flex;flex-wrap:wrap;gap:8px}
.thumb{position:relative;border:1px solid #334155;border-radius:8px;padding:0px;background:#0b1226}
.thumb img{width:clamp(90px, 30vw, 120px);height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.badge{font-size:12px;background:#2563eb;color: #ffffff;border:1px solid #ffffff;border-radius:999px;padding:2px 8px}

/* ========= Checks (Front2 formatos) ========= */
.checkBlock{border:1px solid #22304e;background:#0c1326;border-radius:12px;padding:10px;margin-bottom:10px}
.checkBlock h4{margin:0 0 8px 0;color:#bfdbfe;font-weight:700;display:flex;align-items:center;gap:8px}
.checkBlock h4 .catIcon{font-size:18px}
.checkRow{display:flex;align-items:center;justify-content:space-between;padding:6px 4px}
.checkRow + .checkRow{border-top:1px dashed #1f2a4a}
.checkRow label{display:flex;align-items:center;gap:10px;font-size:.98rem;color:#cbd5e1}
.checkRow.subOf label{padding-left:16px;position:relative}
.checkRow.subOf label::before{content:"|-->"; position:absolute;left:0;opacity:.7}
.checkRow input[type="checkbox"]{appearance:none;width:44px;height:24px;border-radius:999px;border:1px solid #334155;background:#0b1220;position:relative;outline:none;cursor:pointer;transition:all .18s ease}
.checkRow input[type="checkbox"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:999px;left:3px;top:50%;transform:translateY(-50%);background:#334155;transition:all .18s ease}
.checkRow input[type="checkbox"]:checked{background:#2563eb;border-color:#2563eb}
.checkRow input[type="checkbox"]:checked::after{left:23px;background:#fff}
.checkRow.danger label{color:#f87171; font-weight:700;}
.checkRow .note{font-size:.85rem;color:#94a3b8;margin-left:8px}
.subtypeStatus{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:8px;
    padding:10px;
    margin-top:8px;
    background:#0b1226;
    border:1px solid #334155;
    border-radius:12px;
}
.subPill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    padding:4px 10px;
    background:#0b1226;
    border:1px solid #334155;
    border-radius:999px;
    white-space:nowrap;
}
.subPill .icon{width:1.2em;display:inline-block;text-align:center}
.subPill.ok{color:#22c55e;border-color:#274c36;background:#0c1a14;font-weight:600}
.subPill.bad{color:#ef4444;border-color:#5a1b1b;background:#170b0b;font-weight:600}

/* ========= Metadata + Footer (Front1) ========= */
.metadataSection{background:#0f172a;border:1px solid #23304f;border-radius:16px;padding:12px;margin:0 var(--gap) var(--gap);color:#cbd5e1;width:calc(100% - 2*var(--gap))}
.metadataSection h3{margin:6px 0 10px 0;color:#93c5fd}
#metaForm{display:grid;gap:10px;grid-template-columns:repeat(3, minmax(220px, 1fr))}
@media (max-width:900px){ #metaForm{grid-template-columns:repeat(2, minmax(160px, 1fr))} }
@media (max-width:560px){ #metaForm{grid-template-columns:1fr} }
#metaForm > div{display:flex;flex-direction:column;gap:6px}
#metaForm label{font-size:12px;color:#9ca3af}
#metaForm input, #metaForm select{padding:8px 10px;border-radius:8px;border:1px solid #334155;background:#0b1226;color:#e2e8f0}

.statusBar{position:sticky;bottom:0;background:#0b1226;border-top:1px solid #1f2a4a;padding:8px 12px;color:#9ca3af;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.statusLeft{display:flex;gap:8px;align-items:center}
.statusRight{display:flex;gap:10px;align-items:center;min-width:40%}
.connPill{display:inline-flex;align-items:center;gap:6px;border:1px solid #334155;border-radius:999px;padding:4px 10px;font-size:12px;background:#0b1226}
.connPill::before{content:"";width:8px;height:8px;border-radius:999px;background:#64748b;display:inline-block}
.connPill[data-state="ok"]{color:#22c55e;border-color:#274c36;background:#0c1a14}
.connPill[data-state="ok"]::before{background:#22c55e}
.connPill[data-state="bad"]{color:#ef4444;border-color:#5a1b1b;background:#170b0b}
.connPill[data-state="bad"]::before{background:#ef4444}
.progress.mini{flex:1;height:8px;background:#1f2937;border-radius:999px;overflow:hidden;min-width:120px}
.progress.mini>div{height:100%;background:#2563eb;width:0%}

/* ========= Auto-scroll overlays (Front1) ========= */
.dragZone{position:fixed;left:0;right:0;height:var(--dragzone-h);pointer-events:none;z-index:120;background:linear-gradient(to bottom, rgba(96,165,250,0.28), rgba(96,165,250,0.06));opacity:0;transition:opacity .18s ease}
.dragZone.top{top:0}
.dragZone.bottom{bottom:0;transform:rotate(180deg)}
.dragZone.show{opacity:.35}
.dragZone.active{opacity:.52}

/* ===== Selects dentro de thumbs (Front2) ===== */
.thumbMeta{margin-top:6px;padding:8px;background:#0b0f1a;border:1px solid #1f2937;border-radius:8px;display:grid;gap:6px}
.thumbMetaRow{display:flex;align-items:center;gap:8px}
.thumbMetaRow label{min-width:0;font-size:0;color:#9ca3af}
.thumbMetaSelect{flex:1;font-size:12px;padding:6px 10px;background:#0f1625;color:#e5e7eb;border:1px solid #263249;border-radius:8px;outline:none;transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;appearance:none}
.thumbMetaSelect.is-empty{color:#f87171;font-weight:700}
.thumbMetaSelect:hover{border-color:#334155}
.thumbMetaSelect:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.2);background:#0c1220}
.thumbMetaSelect:disabled{opacity:.6;cursor:not-allowed}

/* ========= Modal flotante (Front2) ========= */
.modal{position:fixed;inset:0;z-index:1000;display:none}
.modal:not(.hidden){display:block}
.modalBackdrop{position:absolute;inset:0;background:rgba(2,6,23,.65);backdrop-filter:saturate(120%) blur(2px)}
.modalContent{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(96vw,1100px);height:min(92vh,780px);display:flex;flex-direction:column;background:#0b1226;border:1px solid #23304f;border-radius:16px;box-shadow:0 30px 100px rgba(0,0,0,.45)}
.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #23304f;background:#0c152e;border-top-left-radius:16px;border-top-right-radius:16px;cursor:grab}
.modalHeader h3{margin:0;color:#c7d2fe}
.modalBody{flex:1;overflow:auto;padding:8px}
.modalFooter{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-top:1px solid #23304f;background:#0c152e;border-bottom-left-radius:16px;border-bottom-right-radius:16px}
.cropWrapper{position:relative;display:block;overflow:auto;border:1px solid #1f2a4a;border-radius:10px;background:#0a1224;min-height:400px}
#cropImage{max-width:none;display:block}
.cropSelection{position:absolute;border:2px dashed #60a5fa;background:rgba(96,165,250,.12);border-radius:6px;pointer-events:none}

/* === V5: Sub-checks destacados === */
/* Pronounced indentation + left guide */
.checkRow.subOf{ padding-left:4px; border-left:3px solid #0d2b1a; border-radius:10px; }
.checkRow.subOf label{ padding-left:28px; }
.checkRow.subOf label::before{ left:4px; opacity:.9; }

/* Different toggle color scheme for sub-checks */
.checkRow.subOf input[type="checkbox"]{
    background:#052e1a;
    border-color:#14532d;
}
.checkRow.subOf input[type="checkbox"]::after{ background:#1e3a2a; }
.checkRow.subOf input[type="checkbox"]:checked{
    background:#16a34a;  /* green */
    border-color:#16a34a;
}
.checkRow.subOf input[type="checkbox"]:checked::after{ background:#ffffff; }

/* Light-green labels for specific sub-checks */
.checkRow.subDamage label{ color:#86efac; font-weight:700; }

/* Ensure danger state still overrides (red, bold) */
.checkRow.danger label{ color:#f87171 !important; font-weight:800; }

/* === V5 FIX: legend sticky header above checks === */
.legend{ position: relative; } /* establish stacking context (desktop) */
.legendTop{ position: sticky; top: 0; z-index: 20; } /* header always above panel content */
.legendTop::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#23304f; } /* divider line */

/* Dentro de cada checkBlock, arriba a la derecha */
.checkBlock > .container .right-column .subtypeStatus{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* <-- 3 columnas */
    grid-auto-rows: minmax(24px, auto);
    gap:6px; padding:8px;
    background:#0a1224; border:1px solid #1f2a4a; border-radius:10px;
    word-break: break-word;
}

/* móvil */
@media (max-width:720px){
    .checkBlock > .container .right-column .subtypeStatus{ grid-template-columns:1fr; }
}



/* === Deck Right controls === */
.deckRight{ display:flex; flex-direction:column; gap:8px; align-items:stretch; justify-content:flex-start; }
@media (max-width:720px){ .deckRight{ gap:6px; } }

/* === Deck vertical layout === */
.deckSection.deck-vertical .deckNav{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    align-items:start;
    gap:10px;
}
.deckSection.deck-vertical #prevDeck{ grid-column:1; grid-row:2; justify-self:start; }
.deckSection.deck-vertical .deckRight{ grid-column:2; grid-row:1; justify-self:start; }
.deckSection.deck-vertical #deck{
    grid-column:1 / span 2; grid-row:2;
    white-space: normal;
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows:minmax(72px,auto);
    gap:8px;
    max-height: calc(105vh - 180px);
    overflow-y:auto;
}

/* === Dock uploader at right spanning along gridSection === */
.container.deck-right{
    display:grid;
    grid-template-columns: 1fr minmax(300px, 420px);
    gap: 16px;
    align-items:start;
}
.container.deck-right > .deckSection{
    grid-column: 2; grid-row: 1;
    position: sticky;
    top: 12px;
    align-self: start;
}
.container.deck-right > .legend,
.container.deck-right > .gridSection,
.container.deck-right > .metadataSection{ grid-column: 1; }

@media (max-width: 992px){
    .container.deck-right{ grid-template-columns: 1fr; }
    .container.deck-right > .deckSection{ grid-column: 1; position: static; top: auto; }
}

/* === Theme: Light (día) === */
body.theme-light{ color:#0b1226; background:#f4f6fb; }
body.theme-light .topbar{
    background:linear-gradient(180deg,#f8fafc,#e9f0ff);
    border-bottom:1px solid #cbd5e1;
}
body.theme-light .topbar .brand{ color:#0b1226; }
body.theme-light .primary{ background:#2563eb; color:#fff; }
body.theme-light .secondary{ background:#64748b; color:#fff; }
body.theme-light .ghost{ border-color:#94a3b8; color:#0b1226; }

/* Surfaces */
body.theme-light .deck,
body.theme-light .card,
body.theme-light .legend,
body.theme-light .grid,
body.theme-light .metadataSection,
body.theme-light .checkBlock,
body.theme-light .statusBar,
body.theme-light .modalContent{
    background:#ffffff !important;
    color:#0b1226;
    border-color:#cbd5e1 !important;
}

/* Inputs */
body.theme-light #metaForm input,
body.theme-light #metaForm select{
    background:#ffffff;
    color:#0b1226;
    border:1px solid #cbd5e1;
}

/* Pills */
body.theme-light .subtypeStatus{ background:#f8fafc; border-color:#cbd5e1; }
body.theme-light .subPill{ background:#ffffff; border-color:#cbd5e1; }
body.theme-light .subPill.ok{ background:#ecfdf5; border-color:#bbf7d0; color:#166534; }
body.theme-light .subPill.bad{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* Deck cards + borders */
body.theme-light .card{ border-color:#d1d5db; }
body.theme-light .dropcell{ background:#ffffff; border-color:#cbd5e1; }
body.theme-light .deck{ border-color:#cbd5e1; }

/* Panel header colors */
body.theme-light .legendTop{ background:#ffffff; border-color:#cbd5e1; }
body.theme-light .legendHelp{ color:#475569; }
body.theme-light .checkBlock h4{ color:#1e293b; }
body.theme-light .grid .rowHeader{ color:#1d4ed8; }

/* Footer */
body.theme-light .statusBar{ background:#ffffff; border-color:#cbd5e1; color:#334155; }
body.theme-light .connPill{ background:#ffffff; border-color:#cbd5e1; }
body.theme-light .progress.mini{ background:#e5e7eb; }


/* Thumb filename: 2 lines, font size 9px */
.thumbName{
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(2 * 1.2em);     /* ensure exactly two lines of height */
    margin-top: 6px;
}
/* Status colors */
#status.ok  { color:#22c55e; font-weight:600; }
#status.bad { color:#ef4444; font-weight:600; }
.thumb.edited::after{
    content: "✎";
    position: absolute; top: 4px; right: 6px;
    font-size: 12px; background: #fde68a; padding: 2px 4px; border-radius: 4px;
}

/* ===== Fondo animado Sentinel (compartido) ===== */
.with-sentinel-bg .sentinel-bg{
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(1200px 800px at 10% -10%, rgba(20,80,255,0.10), transparent 60%),
              radial-gradient(900px 700px at 110% 20%, rgba(0,200,160,0.10), transparent 60%),
              linear-gradient(180deg, #071024 0%, #0a1228 60%, #0b132b 100%);
  filter: saturate(1.1);
}

/* rejilla sutil */
.with-sentinel-bg .grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(59,130,246,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59,130,246,0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(closest-side, rgba(255,255,255,0.6), rgba(255,255,255,0));
  animation: drift-grid 18s linear infinite;
}

/* orbes */
.with-sentinel-bg .orb{position:absolute; border-radius:50%; filter:blur(40px); opacity:.35; mix-blend-mode:screen}
.with-sentinel-bg .orb-a{
  width:420px; height:420px; left:-80px; top:-60px;
  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.55), rgba(59,130,246,0) 60%);
  animation: float-a 16s ease-in-out infinite alternate;
}
.with-sentinel-bg .orb-b{
  width:360px; height:360px; right:-60px; top:20%;
  background: radial-gradient(circle at 70% 40%, rgba(34,197,94,.55), rgba(34,197,94,0) 60%);
  animation: float-b 20s ease-in-out infinite alternate;
}
.with-sentinel-bg .orb-c{
  width:300px; height:300px; left:30%; bottom:-80px;
  background: radial-gradient(circle at 40% 60%, rgba(99,102,241,.55), rgba(99,102,241,0) 60%);
  animation: float-c 22s ease-in-out infinite alternate;
}

/* animaciones */
@keyframes drift-grid{0%{transform:translateY(0)}100%{transform:translateY(-80px)}}
@keyframes float-a{from{transform:translate(0,0)} to{transform:translate(30px,40px)}}
@keyframes float-b{from{transform:translate(0,0)} to{transform:translate(-25px,30px)}}
@keyframes float-c{from{transform:translate(0,0)} to{transform:translate(20px,-30px)}}

/* asegura legibilidad de la UI sobre el fondo */
.with-sentinel-bg .topbar,
.with-sentinel-bg .container,
.with-sentinel-bg main,
.with-sentinel-bg header,
.with-sentinel-bg footer { position: relative; z-index: 1; }


/* ===== Sentinel Matrix brand + Atom (header) ===== */
.matrix-brand{display:flex; align-items:center; gap:10px; color:#e2e8f0; font-weight:700}
.matrix-brand .launcher-sub{opacity:.85}

/* Matrix text effect compact for header */
.matrix-text{
  color:#00ff66;
  font-size:22px;
  line-height:1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  position:relative;
  margin:0;
  letter-spacing:.5px;
  text-shadow:0 0 6px #00ff66, 0 0 14px #00ff66, 0 0 26px rgba(0,255,128,.35);
}
.matrix-text::before{
  content:attr(data-text);
  position:absolute; inset:0;
  animation:glitch 2.2s infinite;
  clip-path:polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform:translate(-1px, -1px);
  color:#00ff66;
  text-shadow:0 0 5px #00ff66, 0 0 12px #00ff66;
}
@keyframes glitch{
  0%,100%{ clip-path:polygon(0 0,100% 0,100% 45%,0 45%); transform:translate(0,0) }
  33%{    clip-path:polygon(0 0,100% 0,100% 15%,0 15%); transform:translate(-2px,-2px) }
  66%{    clip-path:polygon(0 85%,100% 85%,100% 100%,0 100%); transform:translate(2px,2px) }
}
/* Matrix text effect Blanco */
.matrix-text.matrix-white{
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.45), 0 0 26px rgba(255,255,255,.25);
}
.matrix-text.matrix-white::before{
  color:#fff;
  text-shadow:0 0 5px rgba(255,255,255,.85), 0 0 12px rgba(255,255,255,.45);
}
.launcher-sub.matrix-text{ font-size:18px; letter-spacing:.3px; }
@media (max-width:560px){ .launcher-sub.matrix-text{ font-size:16px; } }


/* Atom logo animations */
.atom-logo svg{ display:block; filter: drop-shadow(0 6px 22px rgba(59,130,246,.25)) drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.atom-logo .electron{ filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
.orbit.orbit-a { animation: orbit-rot-a 8s linear infinite; }
.orbit.orbit-b { animation: orbit-rot-b 11s linear infinite reverse; }
.orbit.orbit-c { animation: orbit-rot-c 14s linear infinite; }
.orbit.orbit-d { animation: orbit-rot-d 12s linear infinite reverse; }
@keyframes orbit-rot-a { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-rot-b { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-rot-c { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-rot-d { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width:560px){
  .matrix-brand{ gap:8px }
  .matrix-text{ font-size:18px }
  .atom-logo svg{ width:30px; height:30px }
}


/* ==== Sentinel header compact spacing ==== */
.topbar{ padding-top:4px; padding-bottom:4px; }
.matrix-brand{ gap:8px; align-items:center; }
.matrix-brand h1{ margin:0; line-height:1; }
.sentinel-icon{ display:inline-flex; width:100px; height:100px; align-items:center; justify-content:center; margin:0; padding:0; line-height:0; }
.sentinel-icon canvas{ display:block; width:100%; height:100%; }

    /* ===== Dinámica de tipeo ===== */
    .tw-line{white-space:pre-wrap; display:block; min-height:1.2em}
    .cursor{display:inline-block; width:1ch; animation:blink 1s steps(1) infinite}
    @keyframes blink{50%{opacity:0}}
    /* ===== Grid y tarjetas (coexiste con styles.css) ===== */
    .app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
    .app-card{background:#0f172a;border:1px solid #23304f;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:220px}
    .app-card h3{margin:0;color:#bfdbfe}
    .app-card p{margin:0;color:#94a3b8}
    .app-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
    .app-card a{display:inline-block;text-decoration:none}
    .topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0b1226;border-bottom:1px solid #1f2a44}
    .brand{color:#e2e8f0;font-weight:600}
    .ghost{border:1px solid #334155;border-radius:999px;padding:6px 12px;color:#e2e8f0;background:transparent;text-decoration:none}
    .primary{border:1px solid #3b82f6;background:#1d4ed8;color:white;border-radius:999px;padding:6px 12px;text-decoration:none}
    .secondary{border:1px solid #334155;background:#0b1226;color:#e2e8f0;border-radius:999px;padding:6px 12px;text-decoration:none}
    .container{max-width:1100px;margin:0 auto;padding:16px}

    /* ===== Fondo animado Sentinel ===== */
    .sentinel-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
      background: radial-gradient(1200px 800px at 10% -10%, rgba(20,80,255,0.10), transparent 60%),
                  radial-gradient(900px 700px at 110% 20%, rgba(0,200,160,0.10), transparent 60%),
                  linear-gradient(180deg, #071024 0%, #0a1228 60%, #0b132b 100%);
      filter:saturate(1.1);
    }
    .grid-lines{
      position:absolute;inset:0;
      background-image: linear-gradient(to right, rgba(59,130,246,0.10) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(59,130,246,0.08) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(closest-side, rgba(255,255,255,0.6), rgba(255,255,255,0));
      animation: drift-grid 18s linear infinite;
    }
    @keyframes drift-grid{
      0%{transform:translateY(0)}
      100%{transform:translateY(-80px)}
    }
    .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;mix-blend-mode:screen}
    .orb-a{width:420px;height:420px;left:-80px;top:-60px;
      background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.55), rgba(59,130,246,0) 60%);
      animation: float-a 16s ease-in-out infinite alternate;
    }
    .orb-b{width:360px;height:360px;right:-60px;top:20%;
      background: radial-gradient(circle at 70% 40%, rgba(34,197,94,.55), rgba(34,197,94,0) 60%);
      animation: float-b 20s ease-in-out infinite alternate;
    }
    .orb-c{width:300px;height:300px;left:30%;bottom:-80px;
      background: radial-gradient(circle at 40% 60%, rgba(99,102,241,.55), rgba(99,102,241,0) 60%);
      animation: float-c 22s ease-in-out infinite alternate;
    }
    @keyframes float-a{from{transform:translate(0,0)} to{transform:translate(30px,40px)}}
    @keyframes float-b{from{transform:translate(0,0)} to{transform:translate(-25px,30px)}}
    @keyframes float-c{from{transform:translate(0,0)} to{transform:translate(20px,-30px)}}

/* === Overrides: Footer always visible & left-aligned layout === */


/* Prevent content from being hidden behind the fixed footer */
html, body{ min-height: 100%; }
body{ padding-bottom: calc(var(--footer-h) + 12px); }

/* Align main content to the left (avoid centered container) */
.container{
  margin-left: var(--gap) !important;
  margin-right: 0 !important;
  max-width: none !important;
  padding-left: 0 !important; /* keep existing internal paddings from child sections */
}

/* Light theme footer stays fixed as well */
body.theme-light .statusBar{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  min-height: var(--footer-h);
}

/* Altura de la topbar carga de iconos Deck (puedes ajustarla si tu header crece) */
:root{
  --topbar-h: 60px;
}

/* Mantener el uploader siempre visible bajo la topbar */
.deckSection.uploader{
  position: sticky;
  top: var(--topbar-h);   /* se pega justo debajo del header */
  z-index: 200;           /* por encima de grid, panel y metadata */
  background: #0b1226;    /* fondo sólido para tapar el contenido debajo */
  border-bottom: 1px solid #23304f;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Si usas el layout "deck-right", mantenlo igualmente sticky */
.container.deck-right > .deckSection{
  position: sticky;
  top: var(--topbar-h);
  z-index: 200;
}


/* Danger button (red, white text) */
.btn-danger{
  background:#dc2626;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  box-shadow:0 4px 10px rgba(220,38,38,.25);
  cursor:pointer;
}
.btn-danger:hover{ filter:brightness(1.05); }
.btn-danger:active{ transform:translateY(1px); }







/* === Imagen: Vista previa por doble clic === */
.previewOverlay{
  position:fixed; inset:0; z-index:2000; display:none;
}
.previewOverlay.show{ display:block; }
.previewBackdrop{
  position:absolute; inset:0;
  background:rgba(2,6,23,.8); /* combina con tu tema */
  backdrop-filter: saturate(120%) blur(2px);
}
.previewStage{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  max-width:96vw; max-height:92vh; outline:none; cursor:zoom-out;
  border-radius:12px; box-shadow:0 30px 120px rgba(0,0,0,.6);
}
.previewStage img{
  display:block;
  max-width:96vw; max-height:92vh;
  width:auto; height:auto; object-fit:contain; border-radius:12px;
}
/* HTMX indicator visibility */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }




/* ---- Sticky↔Static toggle (deckSection.uploader) ---- */
.deckSection.uploader {
    /* La propiedad 'position' no es animable, pero damos feedback visual */
    transition: box-shadow 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

/* Cuando se desancla (modo estático) */
.deckSection.uploader.is-static {
    position: static !important;
}

/* Pequeño destello para confirmar el cambio */
.deckSection.uploader.flash {
    animation: deckFlash 320ms ease;
}

@keyframes deckFlash {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    50%  { box-shadow: 0 0 0 6px rgba(255,255,255,0.08); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Estado visual del botón cuando está en 'static' */
#btnToggleSticky.round[aria-pressed="true"] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    filter: brightness(1.15);
}


/* Thumb toolbar: vertical, top-right */
.thumb .thumbActions{
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;   /* uno debajo del otro */
    align-items: flex-end;    /* alineados a la derecha */
    gap: 6px;
    z-index: 5;               /* por encima de la imagen */
}

/* Botones compactos en la barra vertical */
.thumb .thumbActions .iconbtn{
    padding: 4px 6px;
    line-height: 1;
    min-width: auto;
}
.iconbtn{
    border:1px solid #1f561a;
    font-weight:700;
    border-radius:8px;
    background: rgba(19, 19, 28, 0.99);
    color:#cbd5e1;
    padding:4px 8px;
    cursor:pointer
}
/* === Comentarios en thumbs === */
.thumbActions .iconbtn.commentBtn.has-comment{
    color:#ef4444;                 /* rojo vivo (consistente con .subPill.bad) */
    border:1px solid #5a1b1b;
    background:#170b0b;
    font-weight:700;
}


/* === Botonera de .thumbActions: tamaño fijo + fondo negro semitransparente === */
:root{
    --tha-size: 32px; /* tamaño del botón (32–36px suele verse bien) */
    --tha-gap:  6px;  /* separación entre botones */
}

.thumb .thumbActions{
    gap: var(--tha-gap);
}

.thumb .thumbActions .iconbtn{
    width: var(--tha-size);
    height: var(--tha-size);
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* texto/emoji dentro del botón */
    font-size: 16px;   /* ajusta si tus emojis se ven muy grandes/pequeños */
    line-height: 1;

    /* estilo visual */
    border-radius: 8px;                 /* usa 9999px si los quieres circulares */
    background: rgba(0,0,0,.55);        /* negro semitransparente */
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
    backdrop-filter: blur(2px);         /* opcional; mejora legibilidad si hay soporte */
}

.thumb .thumbActions .iconbtn:hover{
    background: rgba(0,0,0,.72);
}

.thumb .thumbActions .iconbtn:focus-visible{
    outline: 2px solid rgba(255,255,255,.6);
    outline-offset: 2px;
}

.thumb .thumbActions .iconbtn:active{
    transform: translateY(1px);
}

/* Estado “tiene comentario”: rojo visible sobre la imagen */
.thumb .thumbActions .iconbtn.commentBtn.has-comment{
    background: rgba(239,68,68,.85);    /* rojo semitransparente */
    border-color: rgba(239,68,68,.9);
    color: #fff;
}















/* ===== Select moderno (glass/dark) con chevron ===== */
:root{
    --sel-h: 36px;
    --sel-bg: rgba(12,12,16,.65);
    --sel-bg-hover: rgba(20,20,28,.78);
    --sel-border: rgba(255,255,255,.18);
    --sel-text: #fff;
    --sel-ring: rgba(59,130,246,.65); /* azul foco accesible */
    --amber-border: #fbbf24;           /* amarillo intenso */
    --amber-bg: rgba(251,191,36,.14);
    --rose-border:  #fb7185;           /* rojo intenso */
    --rose-bg: rgba(251,113,133,.14);
}

/* contenedor meta de cada thumb */
.thumbMetaRow select{
    -webkit-appearance: none;
    appearance: none;
    height: var(--sel-h);
    width: 100%;
    max-width: 100%;
    padding: 6px 34px 6px 12px;            /* espacio para chevron */
    color: var(--sel-text);
    background:
            var(--sel-bg)
            url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
<path fill='%23ffffff' d='M5.5 7.5L10 12l4.5-4.5'/>\
</svg>") no-repeat right 10px center / 14px;
    border: 1px solid var(--sel-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
    backdrop-filter: blur(3px);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.thumbMetaRow select:hover{
    background-color: var(--sel-bg-hover);
}

.thumbMetaRow select:focus-visible{
    outline: 2px solid var(--sel-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--sel-ring);
}

/* Estados de presencia (del JS): amarillos/rojos bien contrastados */
.thumbMetaRow select.sel-has-image{
    border-color: var(--amber-border);
    box-shadow: 0 0 0 2px rgba(251,191,36,.35);
    background-image:
            linear-gradient(var(--amber-bg), var(--amber-bg)),
            url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
<path fill='%23ffffff' d='M5.5 7.5L10 12l4.5-4.5'/>\
</svg>");
    background-repeat: no-repeat;
    background-position: 0 0, right 10px center;
    background-size: auto, 14px;
}

.thumbMetaRow select.sel-no-image{
    border-color: var(--rose-border);
    box-shadow: 0 0 0 2px rgba(251,113,133,.35);
    background-image:
            linear-gradient(var(--rose-bg), var(--rose-bg)),
            url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
<path fill='%23ffffff' d='M5.5 7.5L10 12l4.5-4.5'/>\
</svg>");
    background-repeat: no-repeat;
    background-position: 0 0, right 10px center;
    background-size: auto, 14px;
}






/* === Busy overlay (upload) visible sin tapar el footer === */

/* Asegura posicionamiento y niveles de apilado */
#uploadBusy{
    position: fixed;    /* ocupa la ventana */
    inset: 0;           /* top/right/bottom/left = 0 */
    z-index: 1900;      /* por debajo del footer (que pondremos mayor) */
}

#uploadBusy .modalBackdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);  /* semitransparente */
    backdrop-filter: blur(6px);   /* blur del contenido bajo el overlay */
}

/* Caja centrada del spinner/texto */
#uploadBusy .modalContent{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1910;                /* sobre el backdrop, bajo el footer */
    border-radius: 14px;
    background: rgba(20,20,28,.85);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* Sube el footer por encima del overlay */
footer{
    position: relative;
    z-index: 2000;                /* mayor que #uploadBusy (1900/1910) */
}

/* (Por si no lo tenías) clase para ocultar el overlay */
.hidden{ display: none !important; }

/* Spinner + textos (si no los tenías ya) */
.busyBox{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 4px; }
.busySpinner{ width:54px; height:54px; border-radius:50%;
    border:4px solid rgba(255,255,255,.15); border-top-color:#60a5fa; animation: spin 1s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.busyText{ font-weight:800; font-size:1.1rem; color:#c7d2fe; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.6} 50%{opacity:1} }
.busyHint{ font-size:.85rem; color:#94a3b8; }



/* ===== Popover de comentarios (glass/dark) ===== */
.commentPopover{
    position: fixed;
    min-width: 280px;
    max-width: 360px;
    background: rgba(20,20,28,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    z-index: 2600;
    transform-origin: top right;
    animation: commentIn .14s ease-out;
}
@keyframes commentIn{
    from{ opacity: 0; transform: scale(.96); }
    to  { opacity: 1; transform: scale(1); }
}

.commentPopover h4{
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: #e5e7eb;
    font-weight: 700;
}

.commentPopover textarea{
    width: 100%;
    min-height: 90px;
    max-height: 220px;
    resize: vertical;
    box-sizing: border-box;
    padding: 8px 10px;
    color: #e5e7eb;
    background: rgba(12,12,16,.6);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    outline: none;
}

.commentPopover .commentActions{
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.commentPopover .btn{
    appearance: none;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.45);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.commentPopover .btn.primary{
    background: #2563eb;
    border-color: #1d4ed8;
}
.commentPopover .btn:hover{ filter: brightness(1.08); }

/* Click-outside para cerrar (no oscurece todo) */
.commentScrim{
    position: fixed; inset: 0; z-index: 2550;
    background: transparent;
}











/* ===== Toolbar moderna para .deckRight ===== */
:root{
    --dr-bg: rgba(12,12,16,.55);
    --dr-bg-hover: rgba(18,18,26,.70);
    --dr-bd: rgba(255,255,255,.14);
    --dr-ring: rgba(59,130,246,.55);     /* foco accesible azul */
    --btn-size: 36px;                    /* tamaño de botón de la toolbar */
}

.deckRight{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--dr-bg);
    border: 1px solid var(--dr-bd);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    backdrop-filter: blur(6px);
}

.deckRight:hover{
    background: var(--dr-bg-hover);
}

/* Uniforma los botones dentro de la toolbar (iconbtn o no) */
.deckRight button,
.deckRight .iconbtn,
.deckRight .round{
    width: var(--btn-size);
    height: var(--btn-size);
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 16px;  /* ajusta si tus emojis son grandes/pequeños */
    color: #fff;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;               /* la toolbar usa esquinas suaves */
    transition: filter .15s ease, transform .08s ease, background-color .15s;
}

.deckRight button:hover,
.deckRight .iconbtn:hover,
.deckRight .round:hover{
    filter: brightness(1.08);
}

.deckRight button:active,
.deckRight .iconbtn:active,
.deckRight .round:active{
    transform: translateY(1px);
}

.deckRight button:focus-visible,
.deckRight .iconbtn:focus-visible,
.deckRight .round:focus-visible{
    outline: 2px solid var(--dr-ring);
    outline-offset: 2px;
}

/* Deshabilitado */
.deckRight button[disabled],
.deckRight .iconbtn[disabled],
.deckRight .round[disabled]{
    opacity: .55;
    cursor: not-allowed;
}

/* ===== Botón .round (circular/acento y estados) ===== */
.round{
    width: 38px;                /* tamaño base para .round fuera de la toolbar */
    height: 38px;
    min-width: 0;
    padding: 0;
    border-radius: 9999px;      /* circular */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: filter .15s ease, transform .08s ease, background-color .15s;
}

.round:hover{ filter: brightness(1.08); }
.round:active{ transform: translateY(1px); }
.round:focus-visible{
    outline: 2px solid var(--dr-ring);
    outline-offset: 2px;
}

/* Estado “activo” usando aria-pressed */
.round[aria-pressed="true"]{
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 8px 22px rgba(37,99,235,.35);
}

/* Variantes por data-variant: primary / warn / danger (opcionales) */
.round[data-variant="primary"]{
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 22px rgba(37,99,235,.35);
}
.round[data-variant="warn"]{
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 8px 22px rgba(245,158,11,.35);
}
.round[data-variant="danger"]{
    background: linear-gradient(180deg, #ef4444, #dc2626);
    box-shadow: 0 8px 22px rgba(239,68,68,.35);
}

/* Versión mini (por si la necesitas en espacios reducidos) */
.round.round-sm{ width: 30px; height: 30px; font-size: 14px; }

/* Badge opcional dentro del botón */
.round .badge{
    position: absolute;
    top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff; font-size: 11px; line-height: 16px;
    border: 1px solid rgba(255,255,255,.35);
}










































/* Contenedor con blur y wrapping */
.controls.frosted{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:10px 12px; padding:10px 12px;
    background: rgba(10,18,38,.45);
    border:1px solid rgba(99,102,241,.15);
    border-radius:14px;
    backdrop-filter:saturate(120%) blur(10px);
    -webkit-backdrop-filter:saturate(120%) blur(10px);
}

/* Que todo quepa lo más posible en la 1ª línea y luego baje */
.controls .btn{ flex:0 0 auto; }

/* La caja de carpeta se estira para “fabricar” espacio en la 1ª línea */
.folderField{
    display:flex; align-items:center; gap:8px;
    flex:1 1 320px; /* se encoge/crece para ayudar al wrap */
    min-width:280px;
}
.folderField input{
    flex:1 1 auto;
    padding:10px 12px; border-radius:10px; border:1px solid #334155;
    background:#0b1226; color:#e2e8f0;
}
.folderField input:focus{
    outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.22);
}

/* Botón base (coherente con tus variantes) */
.btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:12px; border:1px solid transparent;
    background:#0f1628; color:#e5e7eb; font-weight:650;
    text-decoration:none; cursor:pointer; line-height:1;
    transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.btn .ico{ display:inline-block; font-size:1.05em; line-height:1; }
.btn .label{ white-space:nowrap; }

.btn.primary{ background:#2563eb; color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.28); }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.35); }

.btn.secondary{ background:#1b243b; color:#e5e7eb; border-color:#263249; }
.btn.secondary:hover{ background:#222d49; border-color:#334155; }

.btn.ghost{ background:rgba(0,0,0,.15); color:#cbd5e1; border-color:#334155; }
.btn.ghost:hover{ background:rgba(99,102,241,.12); border-color:#475569; }

.btn.danger{ background:#9a1b1b; color:#fff; border-color:#5a1b1b; box-shadow:0 6px 14px rgba(220,38,38,.22); }
.btn.danger:hover{ background:#b91c1c; border-color:#7f1d1d; }

.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* Responsivo: en pantallas angostas ocultamos solo el texto, no el icono */
@media (max-width: 1100px){
    .controls .btn .label{ display:none; }
    .controls .btn{ padding:10px; }
    .folderField{ min-width:240px; }
}

/* Tema claro (si usas toggling de clase en <body>) */
body.theme-light .controls.frosted{
    background:rgba(255,255,255,.7);
    border-color:rgba(148,163,184,.35);
}
body.theme-light .btn.secondary{ background:#fff; color:#0b1226; border-color:#cbd5e1; }
body.theme-light .btn.ghost{ background:rgba(0,0,0,.04); color:#0b1226; border-color:#cbd5e1; }
body.theme-light .folderField input{ background:#fff; color:#0b1226; border-color:#cbd5e1; }






















/* === Sección BOLSA (dos celdas lado a lado) === */
.metadataSection.bolsaSection{
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(12,12,16,.35);
    backdrop-filter: blur(4px);
}
.metadataSection.bolsaSection h3{
    margin: 0 0 10px 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #e5e7eb;
}
.bolsaSection .bolsaRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bolsaSection .cell{
    padding: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(0,0,0,.20);
}
.bolsaSection .cell h4{
    margin: 0 0 8px 0;
    font-size: .95rem;
    font-weight: 700;
    color: #cbd5e1;
}
/* deja la lista con el look existente */
.bolsaSection .thumbList{
    min-height: 220px;      /* ajusta si quieres más alto */
    position: relative;
}
@media (max-width: 680px){
    .bolsaSection .bolsaRow{ grid-template-columns: 1fr; }
}

/* Feedback de arrastre en Bolsa */
.bolsaSection .dropcell{
    border: 1px dashed rgba(255,255,255,.25);
    border-radius: 10px;
    min-height: 200px;
}
.bolsaSection .dropcell.dragover{
    outline: 2px solid rgba(59,130,246,.65);
    outline-offset: 2px;
    background: rgba(59,130,246,.10);
}


/* Evitar arrastre nativo de <img> dentro del deck (Safari/WebKit/Chrome) */
#deck .card img {
    -webkit-user-drag: none;
    user-select: none;
}













/* Footer siempre por encima del overlay de "Guardando y aplicando…" y de la preview */
.statusBar{
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2100 !important; /* > previewOverlay (2000) y > uploadBusy (1900/1910), < commentPopover (2600) */
}

/* (Opcional, por claridad) Garantiza niveles del overlay */
#uploadBusy{ z-index: 1900 !important; }
#uploadBusy .modalContent{ z-index: 1910 !important; }

/* La vista previa de imagen queda por debajo del footer */
.previewOverlay{ z-index: 2000 !important; }