/* ─────────────────────────────────────────────────────────
   shared.css  —  Estilos comunes a todas las páginas
   Incluir DESPUÉS de Bootstrap y FontAwesome.
───────────────────────────────────────────────────────── */

/* Variables globales */
:root {
  --primary-color: #2196F3;
  --secondary-color: #6c757d;
  --background-color: #ffffff;
  --text-color: #212529;
  --dark-background-color: #343a40;
  --dark-text-color: #ffffff;
}

body {
  font-family: 'Roboto', sans-serif;
  background: var(--background-color);
  color: var(--text-color);
  transition: background-color .3s, color .3s;
  padding-top: 0 !important;
}

/* Modal por encima del navbar (z-index: 10000) */
.modal-backdrop { z-index: 10005 !important; }
.modal          { z-index: 10010 !important; }

/* Barra de progreso de scroll */
#progressBarContainer {
  position: fixed;
  top: var(--nav-height, 70px);
  left: 0; width: 100%; height: 4px;
  z-index: 9999; pointer-events: none;
}
@media (max-width: 600px) { #progressBarContainer { top: 60px; } }

#progressBar {
  height: 100%; width: 0;
  background: #ccff00;
  transition: width .2s linear;
  box-shadow: 0 0 10px #ccff00;
}

/* Cards */
.thumbnail { width: 100%; height: auto; cursor: pointer; transition: transform .3s ease; }
.thumbnail:hover { transform: scale(1.05); }
.card-wrap { position: relative; }

.fav-badge {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  background: rgba(0,0,0,.5); color: #fff;
  border: none; border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.fav-active { background: rgba(255,193,7,.95) !important; color: #000 !important; }

.error-message {
  width: 100%; text-align: center; padding: 20px;
  background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
}

/* Dark mode */
body.dark-mode { background: var(--dark-background-color); color: var(--dark-text-color); }
.dark-mode .error-message  { background: #721c24; color: #f8d7da; border: 1px solid #f5c6cb; }
.dark-mode .modal-content  { background: var(--dark-background-color); color: var(--dark-text-color); }
.dark-mode .modal-header   { border-bottom: 1px solid #495057; }
.dark-mode .modal-footer   { border-top: 1px solid #495057; }
.dark-mode .toast-msg      { background: rgba(0,0,0,.9); }

/* Botón scroll al inicio */
#scrollTopBtn {
  position: fixed; bottom: 40px; right: 40px; z-index: 99;
  border: none; outline: none;
  background: #ccff00; color: #121212;
  cursor: pointer; width: 50px; height: 50px;
  border-radius: 50%; font-size: 18px;
  display: none; padding: 0;
  justify-content: center; align-items: center;
  transition: background-color .3s, transform .3s;
}
#scrollTopBtn:hover { background: #b3e600; transform: scale(1.1); }

/* Loader */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--primary-color);
  border-radius: 50%; width: 60px; height: 60px;
  animation: spin 1s linear infinite;
  margin: 50px auto;
}
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* Modal pantalla completa */
.modal-dialog.modal-full { max-width: 100%; width: 100%; margin: 0; height: 100%; }
.modal-full .modal-content { height: 100vh; border: 0; border-radius: 0; }
.modal-full .modal-body {
  height: calc(100vh - 56px);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.modal-full .modal-content img { max-height: 100%; width: auto; }
.modal-content img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }

/* Flechas de navegación del modal */
.modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 1051;
  background: rgba(0,0,0,.5); color: #fff;
  border: none; border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 22px; line-height: 44px; text-align: center;
  cursor: pointer; outline: none;
}
.modal-nav:hover { background: rgba(0,0,0,.7); }
.modal-nav.prev  { left: 12px; }
.modal-nav.next  { right: 12px; }

/* Header del modal */
.modal-title-wrap { display: flex; align-items: center; gap: .5rem; }
.modal-pager { font-weight: 600; opacity: .8; }
.btn-size-toggle,
.btn-fav-toggle { border: none; background: transparent; font-size: 1.1rem; margin-right: .5rem; cursor: pointer; padding: 0; }
.btn-fav-toggle .fas { color: #ffc107; }
.btn-fav-toggle .far { color: #adb5bd; }

/* Toast */
#toast { position: fixed; right: 16px; bottom: 16px; z-index: 2000; pointer-events: none; }
.toast-msg {
  background: rgba(33,37,41,.95); color: #fff;
  padding: 10px 14px; border-radius: 8px; margin-top: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; font-size: .95rem;
}
.toast-msg.show { opacity: 1; transform: translateY(0); }