/* MultiIdeasWeb — CSS centralizado (site.css)
   Colocar en /assets/site.css y enlazar en todas las páginas.
   Debe ir DESPUÉS de Bootstrap y ANTES/ DESPUÉS de estilos locales según quieras que tenga prioridad.
*/

/* ===== Fondo global y tipografía ===== */
html, body {
  min-height: 100%;
}
body{
  background: linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%) !important;
  color: #e5e7eb; /* texto base claro */
}

/* ===== Nav y títulos principales ===== */
.navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link {
  color: #e5e7eb;
}
.navbar-dark .navbar-nav .nav-link:hover { color: #ffffff; }

/* ===== Tarjetas base ===== */
.card{
  border: none;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  background: #0f1a2b; /* dark */
  color: #e5e7eb;      /* texto claro por defecto en tarjetas */
}
.card .card-title,
.card .card-subtitle,
.card .card-text,
.card .list-group-item {
  color: #ffffff;
}

/* ===== Sección "proyectos" del index (tarjetas destacadas) =====
   Intentamos cubrir nombres de clases comunes: .project-card / .feature-card.
   Si tus tarjetas usan otra clase, igualmente heredarán color de .card.
*/
.project-card, .feature-card {
  color: #ffffff;
}
.project-card i, .feature-card i,
.project-card .bi, .feature-card .bi {
  color: #ffffff;
}

/* Si las tarjetas de proyectos NO usan .card, forzamos blanco en esos bloques */
.project-card *:not(.btn),
.feature-card *:not(.btn){
  color: #ffffff;
}

/* ===== Página Áreas: títulos blancos en tarjetas principales ===== */
.big-card h2{
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Mini-cards dentro del collapse */
.mini-card{
  background:#0b1526;
  border-radius:16px;
  text-decoration:none;
  color:#e5e7eb;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:1px solid rgba(255,255,255,.06);
}
.mini-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  background:#0d1a30;
}
.mini-card .mini-title{ color:#ffffff; font-weight:700; }
.mini-card .mini-desc{ color:#b6c2d1; }
.mini-card .mini-icon{ color:#9ec5fe; }

/* Distintivo para Lógica y Puzzles (opcional) */
.badge-icon.logic{
  background: rgba(255,193,7,.18);
  color: #ffd666;
}

/* ===== Área de impresión en fichas ===== */
.print-area{
  background:#ffffff; /* el área imprimible sí queda blanca */
  color:#000000;
  padding:24px;
  border-radius:12px;
}

/* ===== Formularios dentro de tarjetas de configuración ===== */
.card .form-label,
.card .form-check-label,
.card .form-text,
.card label,
.card .text-muted,
.card .text-secondary{
  color: #ffffff !important;
}
/* Placeholder de inputs un poco más claro */
.card input::placeholder,
.card textarea::placeholder{
  color: rgba(255,255,255,.65);
}
/* Inputs sobre fondo oscuro: */
.card .form-control, .card .form-select{
  background-color: #0c1424;
  color: #ffffff;
  border-color: #1c2b4a;
}
.card .form-control:focus, .card .form-select:focus{
  border-color: #3b82f6; /* azul */
  box-shadow: 0 0 0 .15rem rgba(59,130,246,.25);
}
.form-check-input:checked{
  background-color: #3b82f6;
  border-color: #3b82f6;
}

/* ===== Botones ===== */
.btn-outline-light{ color:#ffffff; border-color:#cfd8ea; }
.btn-outline-light:hover{ background:#ffffff; color:#0f172a; }

/* ===== Corrección visual inputs de práctica ===== */
.input-answer{ 
  color:#111; /* respuestas del alumno en caja blanca para contraste */
  background:#ffffff;
}
.answer-ok{ outline:3px solid #20c997; }
.answer-bad{ outline:3px solid #dc3545; }

/* ===== Parche por si alguna página trae fondo blanco forzado ===== */
body.bg-white, body.background-white{ background: linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%) !important; }
.container.bg-white, .container.background-white{ background: transparent !important; }

/* ===== Utilidades ===== */
.text-white-all *{ color:#ffffff !important; }

// Helpers globales para evitar duplicados

// Formatea tiempo en mm:ss
function fmtTime(seconds) {
  let m = String(Math.floor(seconds / 60)).padStart(2, '0');
  let s = String(seconds % 60).padStart(2, '0');
  return `${m}:${s}`;
}

// Atajos de selección DOM
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);