/* Modal de reseteo (nuke)
   (archivo: css/components/modal-nuke.css) */
/* ============================================================
   NUKE MODAL
   ============================================================ */
#reset-nuke-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  animation: fadeInDetail .2s ease;
}
#reset-nuke-overlay.open { display: flex; }
#reset-nuke-modal {
  position: relative;
  background: #0d0505;
  border: 2px solid #3d0a0a;
  border-top: 3px solid var(--red-close);
  border-radius: 16px;
  box-shadow: 0 0 50px rgba(255,51,51,0.18), 0 16px 50px rgba(0,0,0,0.9);
  max-width: 460px; width: 92%;
  overflow: hidden;
  animation: cardIn .28s ease both;
}
#nuke-sparks-canvas {
  position: absolute; inset: -60px;
  width: calc(100% + 120px); height: calc(100% + 120px);
  pointer-events: none; z-index: 20;
}
#reset-nuke-header {
  background: linear-gradient(90deg, #1a0404, #110202);
  border-bottom: 1px solid #3d0a0a;
  padding: 18px 56px 18px 20px;
  position: relative;
}
#reset-nuke-header h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  color: var(--red-close);
  text-shadow: 0 0 20px rgba(255,51,51,0.5);
  letter-spacing: 2px; margin: 0;
}
#btn-close-reset-nuke {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  background: #1a0404; color: var(--red-close); border: 2px solid #3d0a0a;
  border-radius: 10px; width: 34px; height: 34px;
  font-family: 'Fredoka One', cursive; font-size: 1.1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: filter .15s;
}
#btn-close-reset-nuke:hover { filter: brightness(1.3); }
#reset-nuke-body { padding: 22px 22px 10px; display: flex; flex-direction: column; gap: 10px; }
.reset-nuke-warning-icon { font-size: 2.8rem; text-align: center; line-height: 1; filter: drop-shadow(0 0 12px rgba(255,51,51,0.6)); }
.reset-nuke-text { font-family: 'Fredoka', sans-serif; font-size: 0.95rem; color: #ccc; text-align: center; line-height: 1.6; }
.reset-nuke-list { background: #110000; border: 1.5px solid #2a0505; border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.reset-nuke-list-item { display: flex; align-items: center; gap: 10px; font-family: 'Fredoka', sans-serif; font-size: 0.88rem; color: #bbb; }
.reset-nuke-list-item span.rni-icon { font-size: 1.1rem; flex-shrink: 0; }
#reset-nuke-footer { padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
#btn-nuke-confirm {
  position: relative; width: 100%; padding: 13px 16px;
  background: #1a0404; border: 2px solid var(--red-close); border-radius: 10px;
  color: var(--red-close); font-family: 'Fredoka One', cursive; font-size: 1rem;
  letter-spacing: 0.5px; cursor: pointer; overflow: hidden;
  user-select: none; -webkit-user-select: none; outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 0 0 rgba(255,51,51,0);
}
#btn-nuke-confirm:hover { box-shadow: 0 0 18px rgba(255,51,51,0.25); }
#btn-nuke-confirm-fill {
  position: absolute; inset: 0; background: rgba(255,51,51,0.18);
  width: 0%; transition: none; pointer-events: none; border-radius: 8px;
}
#btn-nuke-confirm-fill.filling { transition: width linear; }
#btn-nuke-confirm-label { position: relative; z-index: 1; pointer-events: none; }
#btn-nuke-confirm.done { background: #2a0505; border-color: #ff6666; color: #fff; box-shadow: 0 0 28px rgba(255,51,51,0.45); }
#btn-nuke-cancel {
  width: 100%; padding: 10px 16px; background: transparent;
  border: 1.5px solid #333; border-radius: 10px; color: #666;
  font-family: 'Fredoka One', cursive; font-size: 0.88rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
#btn-nuke-cancel:hover { border-color: #555; color: #aaa; }
#reset-nuke-countdown {
  font-family: 'Fredoka One', cursive; font-size: 0.78rem;
  color: #555; text-align: center; min-height: 1.2em; letter-spacing: 0.5px; transition: color .2s;
}
#reset-nuke-countdown.active { color: var(--red-close); }

/* Shake keyframes */
@keyframes nukeShake1 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-1px,1px)} 75%{transform:translate(1px,-1px)} }
@keyframes nukeShake2 { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3px,2px)} 50%{transform:translate(3px,-2px)} 80%{transform:translate(-2px,3px)} }
@keyframes nukeShake3 { 0%,100%{transform:translate(0,0) rotate(0deg)} 15%{transform:translate(-5px,3px) rotate(-0.5deg)} 40%{transform:translate(5px,-3px) rotate(0.5deg)} 65%{transform:translate(-4px,5px) rotate(-0.3deg)} 85%{transform:translate(4px,-2px) rotate(0.4deg)} }
@keyframes nukeShake4 { 0%,100%{transform:translate(0,0) rotate(0deg)} 10%{transform:translate(-8px,5px) rotate(-1deg)} 25%{transform:translate(8px,-5px) rotate(1deg)} 40%{transform:translate(-7px,7px) rotate(-0.9deg)} 55%{transform:translate(7px,-4px) rotate(0.8deg)} 70%{transform:translate(-8px,4px) rotate(-1deg)} 85%{transform:translate(8px,5px) rotate(0.9deg)} }
@keyframes nukeShake5 { 0%,100%{transform:translate(0,0) rotate(0deg)} 8%{transform:translate(-12px,7px) rotate(-1.5deg)} 16%{transform:translate(12px,-7px) rotate(1.5deg)} 24%{transform:translate(-10px,10px) rotate(-1.3deg)} 32%{transform:translate(10px,-6px) rotate(1.2deg)} 40%{transform:translate(-12px,6px) rotate(-1.5deg)} 48%{transform:translate(11px,8px) rotate(1.3deg)} 56%{transform:translate(-9px,-10px) rotate(-1.1deg)} 64%{transform:translate(10px,9px) rotate(1.2deg)} 72%{transform:translate(-11px,-6px) rotate(-1.4deg)} 80%{transform:translate(12px,10px) rotate(1.5deg)} 90%{transform:translate(-10px,-8px) rotate(-1.2deg)} }
#reset-nuke-modal.shake-1 { animation: nukeShake1 0.18s infinite; }
#reset-nuke-modal.shake-2 { animation: nukeShake2 0.14s infinite; }
#reset-nuke-modal.shake-3 { animation: nukeShake3 0.11s infinite; }
#reset-nuke-modal.shake-4 { animation: nukeShake4 0.08s infinite; }
#reset-nuke-modal.shake-5 { animation: nukeShake5 0.06s infinite; }

/* autosave-badge → see secondary nav CSS */

/* responsive */
@media (max-width: 860px) {
  #detail-body { grid-template-columns: 1fr; }
  #detail-left { border-right: none; border-bottom: 3px solid #2a2a2a; max-height: 48vh; }
}