/* Overhaul general: paleta y estilo cartoon (va después de todo para poder mandar)
   (archivo: css/overrides/overhaul.css) */
/* ── Paleta base: pizarra azulada en vez de gris plano ── */
:root {
  --bg-outer:      #0f121a;
  --bg-panel:      #1a1f2b;
  --bg-card:       #1b212c;
  --bg-card-inner: #242b39;
  --border-bold:   #08090c;
  --border-card:   #08090c;
  --text-muted:    #7d8598;

  --ink:        #08090c;   /* contorno negro cartoon */
  --slate-1:    #262c3a;
  --slate-2:    #141821;
  --slate-3:    #10141c;
  --slate-line: #1e2431;
  --dim:        #4b5364;
}

body:not([class*="theme-"]) {
  background-color: #0f121a;
  background-image:
    radial-gradient(ellipse at 50% -8%, rgba(255,215,0,.09), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.016) 0 2px, transparent 2px 10px);
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0a0d12; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #46506a, #2a3242);
  border: 3px solid var(--ink);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark)); }

/* ════════════════════════════════════════════════
   ARREGLO 1 · El título salía en negro
   El contorno iba en text-shadow, y con el degradado
   recortado sobre el texto la sombra tapaba el relleno.
   Ahora el contorno es una capa aparte por detrás.
   ════════════════════════════════════════════════ */
.app-title-wrap {
  transform: rotate(-1.2deg);
  display: inline-block;
  line-height: 1;
}
#app-header h1 {
  position: relative;
  display: inline-block;
  transform: none;          /* la rotación vive ahora en el wrapper */
  text-shadow: none;        /* ← esto era lo que lo pintaba de negro */
  animation: shimmer 3s linear infinite;
}
#app-header h1::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  z-index: -1;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  -webkit-text-stroke: 9px var(--ink);
  paint-order: stroke fill;
  animation: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.6));
}

/* ════════════════════════════════════════════════
   ARREGLO 2 · La píldora "Tracker de progreso"
   se colocaba a la derecha del título porque los dos
   eran inline-block. Cabecera en columna y arreglado.
   ════════════════════════════════════════════════ */
#app-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
#app-header p { margin-top: 18px; }
#app-header::before, #app-header::after { z-index: 1; }

/* ════════════════════════════════════════════════
   TARJETAS DE MAESTRÍA
   ════════════════════════════════════════════════ */
.mastery-card {
  background: linear-gradient(180deg, #232a37 0%, #141922 100%);
  border: 5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 9px 0 var(--ink), 0 16px 30px rgba(0,0,0,.55);
}
.mastery-card:hover {
  border-color: var(--ink);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 0 var(--ink), 0 24px 44px rgba(0,0,0,.6), 0 0 30px rgba(255,215,0,.28);
}
.mastery-card.completed {
  border-color: var(--ink) !important;
  box-shadow: 0 9px 0 var(--ink), 0 0 28px rgba(57,255,20,.3), 0 16px 30px rgba(0,0,0,.55);
}
.mastery-card.hidden { border-color: var(--ink) !important; opacity: .72; }
.card-top { border-bottom: 4px solid var(--ink); }
.progress-bar-bg {
  height: 13px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #0a0d12;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8);
}
.progress-bar-fill { box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.card-mission-count { color: var(--text-muted); }

/* ════════════════════════════════════════════════
   BOTONES GENÉRICOS
   ════════════════════════════════════════════════ */
.btn-primary, .btn-done, .btn-hide {
  border: 4px solid var(--ink) !important;
  border-radius: 11px;
  box-shadow: 0 5px 0 var(--ink);
}
.btn-primary:active, .btn-done:active, .btn-hide:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}
.btn-done { background: linear-gradient(180deg, #2b3241, #171c26); }
.btn-done.active { background: linear-gradient(180deg, #14401a, #07200b); }

/* Inputs en general */
input[type="text"], input[type="number"], textarea, select {
  background: #0c0f16;
  border-color: var(--ink);
}
.mission-counter-input {
  background: #0a0d12;
  border: 3px solid var(--ink);
  border-radius: 8px;
}

/* ════════════════════════════════════════════════
   VISTA DE DETALLE DE MAESTRÍA
   ════════════════════════════════════════════════ */
#detail-view { background: rgba(9,11,16,.985); }
#detail-header {
  padding: 14px 20px;
  background: linear-gradient(180deg, #1a1f2b 0%, #10141c 100%);
  border-bottom: 5px solid var(--ink);
  box-shadow: 0 6px 0 rgba(0,0,0,.5);
}
#detail-title {
  font-size: 1.8rem;
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 0 0 26px rgba(255,215,0,.45);
}
#btn-close-detail {
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--ink);
}
#btn-close-detail:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#detail-left  { background: #12161f; border-right: 5px solid var(--ink); }
#detail-right { background: #0f131b; }
.detail-section-label {
  display: inline-block;
  padding: 4px 12px;
  background: #171c27;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--ink);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
#detail-banner-wrap, #detail-glove-img-wrap {
  border: 4px solid var(--ink) !important;
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--ink);
  overflow: hidden;
}
.detail-hide-btn {
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--ink);
}
.detail-hide-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* Filas de misión */
.mission-row {
  background: linear-gradient(180deg, #1d232f, #12161f);
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s;
}
.mission-row:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.mission-row.done { box-shadow: 0 5px 0 var(--ink), 0 0 20px rgba(57,255,20,.22); }
.mission-check {
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--ink);
}
.mission-check:hover { border-color: var(--ink); transform: translateY(-2px) scale(1.06); }
.mission-bar-bg {
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: #0a0d12;
}

/* ════════════════════════════════════════════════
   TARJETAS DE GUANTE + DETALLE
   ════════════════════════════════════════════════ */
.glove-card {
  background: linear-gradient(180deg, #232a37 0%, #141922 100%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--ink);
  border-radius: 18px;
  box-shadow: 0 9px 0 var(--ink), 0 16px 30px rgba(0,0,0,.5);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s, border-color .2s;
}
.glove-card:hover { transform: translateY(-6px) scale(1.02); }
.glove-card-top { border-bottom: 4px solid var(--ink); }
.glove-card-name { text-shadow: 2px 2px 0 var(--ink); }
.glove-status-pill, .glove-card-price {
  border: 3px solid var(--ink) !important;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.glove-type-ribbon, .glove-subtype-ribbon {
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(0,0,0,.55);
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
#glove-detail-view { background: rgba(9,11,16,.985); }
#glove-detail-header {
  background: linear-gradient(180deg, #1a1f2b 0%, #10141c 100%);
  border-bottom: 5px solid var(--ink);
}
#glove-detail-left  { background: #12161f; }
#glove-detail-right { background: #0f131b; }
.glove-stats-box, .glove-detail-quote, #glove-detail-banner-wrap, #glove-detail-img-wrap {
  border: 4px solid var(--ink) !important;
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink);
}

/* Modal de filtros de guantes */
.gfm-header {
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
  border-bottom: 4px solid var(--ink);
  color: #1a1200;
}
.gfm-chip {
  border: 3px solid var(--ink) !important;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.gfm-chip:hover  { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.gfm-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.gfm-close-btn, .gfm-reset {
  border: 3px solid var(--ink) !important;
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--ink);
}

/* ════════════════════════════════════════════════
   CALENDARIO
   ════════════════════════════════════════════════ */
#cal-container, #cal-detail {
  background: #12161f;
  border: 5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 var(--ink), 0 20px 40px rgba(0,0,0,.55);
}
#cal-header {
  background: linear-gradient(180deg, #1e2430 0%, #131821 100%);
  border-bottom: 4px solid var(--ink);
  padding: 15px 16px 13px;
}
#cal-title {
  font-size: 1.35rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 0 0 20px rgba(255,215,0,.4);
}
#cal-prev, #cal-next, #cal-today {
  background: linear-gradient(180deg, #2b3241, #171c26);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--ink);
  width: 36px; height: 36px;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s, background .18s;
}
#cal-prev:hover, #cal-next:hover, #cal-today:hover {
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
  color: #1a1200;
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--ink);
}
#cal-prev:active, #cal-next:active, #cal-today:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#cal-grid { background: #0d1017; padding: 10px 12px 14px; gap: 6px; }
.cal-day {
  background: linear-gradient(180deg, #262d3b, #171c26);
  border: 3px solid var(--ink);
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .13s, background .15s;
}
.cal-day:hover {
  border-color: var(--ink);
  background: linear-gradient(180deg, #333c4e, #1e2531);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 0 var(--ink);
}
.cal-day.today {
  border-color: var(--ink);
  background: linear-gradient(180deg, #4a3d00, #241d00);
  box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(255,215,0,.35);
}
.cal-day.has-activity {
  border-color: var(--ink);
  background: linear-gradient(180deg, #14401a, #0a2410);
  box-shadow: 0 4px 0 var(--ink), 0 0 14px rgba(57,255,20,.22);
}
.cal-day.selected {
  border-color: var(--ink) !important;
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark)) !important;
  box-shadow: 0 4px 0 var(--ink), 0 0 22px rgba(255,215,0,.5) !important;
}
.cal-day.selected .cal-day-num { color: #1a1200; text-shadow: none; }
.cal-day-num { color: #d5dae6; text-shadow: 1px 1px 0 var(--ink); }
.cal-dot { border: 1.5px solid var(--ink); width: 7px; height: 7px; }
#cal-detail-header {
  background: linear-gradient(180deg, #1e2430, #131821);
  border-bottom: 4px solid var(--ink);
}
#cal-detail-close {
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--ink);
}
#cal-detail-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.cal-mastery-group {
  border: 4px solid var(--ink) !important;
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink);
  overflow: hidden;
}
.cal-entry { border-bottom: 2px solid var(--slate-line); }
.cal-legend-item {
  padding: 5px 12px;
  background: #12161f;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.cal-legend-dot { border: 2px solid var(--ink); }

/* ════════════════════════════════════════════════
   SOUNDTRACK
   ════════════════════════════════════════════════ */
#soundtrack-albums-header {
  background: linear-gradient(180deg, #1e2430 0%, #12161f 100%);
  border: 5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 8px 0 var(--ink), 0 16px 30px rgba(0,0,0,.5);
}
#soundtrack-header-title {
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink);
}
.soundtrack-album-row {
  background: linear-gradient(180deg, #232a37, #141922);
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s, background .18s;
}
.soundtrack-album-row:hover {
  border-color: var(--ink);
  background: linear-gradient(180deg, #2d3546, #1b212c);
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--ink);
}
.soundtrack-album-row:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.soundtrack-album-cover {
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}

/* ════════════════════════════════════════════════
   SALA DE TROFEOS
   ════════════════════════════════════════════════ */
.trophy-card {
  background: linear-gradient(180deg, #232a37 0%, #141922 100%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--ink);
  border-radius: 18px;
  box-shadow: 0 8px 0 var(--ink), 0 16px 30px rgba(0,0,0,.5);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s;
}
.trophy-card:hover { transform: translateY(-6px) scale(1.01); }
.trophy-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.trophy-card-name { text-shadow: 2px 2px 0 var(--ink); }
.trophy-hero-card {
  background: linear-gradient(180deg, #1e2430, #12161f);
  border-width: 5px;
  border-style: solid;
  border-color: var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 var(--ink), 0 20px 40px rgba(0,0,0,.55);
}
.trophy-room-title {
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 0 0 28px rgba(255,215,0,.35);
}
.trophy-overall-bar-wrap, .rc-bar-wrap {
  border: 3px solid var(--ink) !important;
  border-radius: 9px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}

/* ════════════════════════════════════════════════
   PANEL DE TAREAS (TO-DO) + FAB
   ════════════════════════════════════════════════ */
#todo-panel {
  background: #0f131b;
  border-left: 5px solid var(--ink);
}
#todo-panel-header {
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
  border-bottom: 5px solid var(--ink);
}
#todo-panel-title { color: #1a1200; text-shadow: 0 1px 0 rgba(255,255,255,.3); letter-spacing: 2px; }
.todo-item {
  background: linear-gradient(180deg, #232a37, #141922);
  border: 4px solid var(--ink) !important;
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink);
}
.todo-btn-open, .todo-btn-complete, #btn-close-todo {
  border: 3px solid var(--ink) !important;
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--ink);
}
.todo-btn-open:active, .todo-btn-complete:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#slaps-fab-btn {
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 0 22px rgba(255,215,0,.45);
}
#slaps-fab-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }

/* ════════════════════════════════════════════════
   MODAL DE RESET
   ════════════════════════════════════════════════ */
#reset-nuke-modal {
  background: #12161f;
  border: 5px solid var(--ink) !important;
  border-radius: 20px;
  box-shadow: 0 12px 0 rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.85);
}
#reset-nuke-header {
  background: linear-gradient(180deg, #3a0d0d, #1c0606);
  border-bottom: 5px solid var(--ink);
}
.reset-nuke-list-item {
  background: #171c27;
  border: 3px solid var(--ink) !important;
  border-radius: 11px;
  box-shadow: 0 3px 0 var(--ink);
}
#btn-nuke-confirm, #btn-nuke-cancel, #btn-close-reset-nuke {
  border: 4px solid var(--ink) !important;
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--ink);
}
#btn-nuke-cancel:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* ════════════════════════════════════════════════
   RETOQUES FINALES
   ════════════════════════════════════════════════ */
#site-footer { background: linear-gradient(180deg, #12161f 0%, #080a0e 100%); }
#cookie-banner { background: linear-gradient(180deg, #1a1f2b, #0d1017); }
.footer-modal { background: linear-gradient(180deg, #1a1f2b, #0f131b); }
#search-input { background: #0c0f16; }
.stat-chip { background: linear-gradient(180deg, #1e2430, #12161f); }
.page-nav-btn { background: linear-gradient(180deg, #2b3241 0%, #171c26 100%); }
.page-nav-btn:hover { background: linear-gradient(180deg, #3a4356 0%, #1f2634 100%); }
.page-nav-btn-sec { background: linear-gradient(180deg, #1a1f2b, #10141c); }
.page-nav-btn-sec:hover { background: linear-gradient(180deg, #262d3b, #171c26); }
#footer-roadmap-btn { background: linear-gradient(180deg, #262c3a 0%, #141821 100%); }
.section-label { border-bottom-color: var(--ink); }