/* Estilos personalizados para NextStories */

/* Variables CSS para modo claro por defecto */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #ffffff;
  --border-color: #dee2e6;
  --navbar-bg: #343a40;
  --footer-bg: #343a40;
  --footer-text: #ffffff;
  --input-bg: #ffffff;
  --input-text: #333333;
  --table-stripe: rgba(0, 0, 0, 0.05);
  --placeholder-color: #6c757d;
  --muted-color: #6c757d;
  --modal-bg: #ffffff;
  --modal-text: #333333;
}

/* Modo oscuro automático según preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --border-color: #444444;
    --navbar-bg: #1a1a1a;
    --footer-bg: #1a1a1a;
    --footer-text: #e0e0e0;
    --input-bg: #1e1e1e;
    --input-text: #e0e0e0;
    --table-stripe: rgba(255, 255, 255, 0.05);
    --placeholder-color: #a0a0a0;
    --muted-color: #a0a0a0;
    --modal-bg: #2d2d2d;
    --modal-text: #e0e0e0;
  }
}

/* Modo oscuro manual (cuando el usuario activa el toggle) */
.dark-mode {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --card-bg: #1e1e1e;
  --border-color: #444444;
  --navbar-bg: #1a1a1a;
  --footer-bg: #1a1a1a;
  --footer-text: #e0e0e0;
  --input-bg: #1e1e1e;
  --input-text: #e0e0e0;
  --table-stripe: rgba(255, 255, 255, 0.05);
  --placeholder-color: #a0a0a0;
  --muted-color: #a0a0a0;
  --modal-bg: #2d2d2d;
  --modal-text: #e0e0e0;
}

/* Modo claro manual (cuando el usuario desactiva el toggle) */
.light-mode {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #ffffff;
  --border-color: #dee2e6;
  --navbar-bg: #343a40;
  --footer-bg: #343a40;
  --footer-text: #ffffff;
  --input-bg: #ffffff;
  --input-text: #333333;
  --table-stripe: rgba(0, 0, 0, 0.05);
  --placeholder-color: #6c757d;
  --muted-color: #6c757d;
  --modal-bg: #ffffff;
  --modal-text: #333333;
}

/* Aplicar variables */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

main {
  flex-grow: 1;
}

/* Navbar personalizada */
.navbar-brand {
  font-weight: bold;
}

/* Cards - SIN HOVER */
.card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-color);
  transition: background-color 0.3s ease;
  /* Quitamos transform y hover */
}

.card:hover {
  transform: none !important;
}

.card-body {
  background-color: var(--card-bg);
  color: var(--text-color);
}

.card-header {
  background-color: var(--card-bg);
  border-bottom-color: var(--border-color);
  color: var(--text-color);
}

/* Footer sticky */
footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  margin-top: auto;
}

/* Enlaces en el footer */
footer a {
  color: var(--footer-text) !important;
  transition: opacity 0.3s ease;
}

footer a:hover {
  opacity: 0.8;
}

/* Carrusel */
.carousel-item img {
  height: 500px;
  object-fit: cover;
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 20px;
}

/* Formularios */
.form-control, .form-select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border-color);
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Labels de formularios */
.form-label {
  color: var(--text-color) !important;
  font-weight: 500;
}

.form-check-label {
  color: var(--text-color) !important;
}

/* Textos muted corregidos */
.text-muted {
  color: var(--muted-color) !important;
  opacity: 0.8;
}

/* Placeholders para formularios */
.form-control::placeholder {
  color: var(--placeholder-color) !important;
  opacity: 0.7 !important;
}

.form-select:invalid {
  color: var(--placeholder-color);
}

/* Estilos específicos para placeholders en modo oscuro */
.dark-mode .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
  color: #a0a0a0 !important;
}

.dark-mode .form-select:invalid,
[data-bs-theme="dark"] .form-select:invalid {
  color: #a0a0a0;
}

/* Tablas */
.table {
  color: var(--text-color);
  background-color: var(--card-bg);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--table-stripe);
}

.table-hover tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.1);
}

/* Botones */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Botones en modo oscuro */
@media (prefers-color-scheme: dark) {
  .btn-outline-primary {
    color: #8bb9fe;
    border-color: #8bb9fe;
  }
  
  .btn-outline-primary:hover {
    background-color: #8bb9fe;
    color: #121212;
  }
}

.dark-mode .btn-outline-primary {
  color: #8bb9fe;
  border-color: #8bb9fe;
}

.dark-mode .btn-outline-primary:hover {
  background-color: #8bb9fe;
  color: #121212;
}

/* Alertas */
.alert {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.alert-info {
  background-color: rgba(13, 110, 253, 0.1);
  border-color: rgba(13, 110, 253, 0.3);
}

.alert-success {
  background-color: rgba(25, 135, 84, 0.1);
  border-color: rgba(25, 135, 84, 0.3);
}

.alert-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: rgba(255, 193, 7, 0.3);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3);
}

/* Placeholder para imágenes */
img[src*="placeholder"] {
  background: linear-gradient(45deg, var(--border-color) 25%, transparent 25%), 
              linear-gradient(-45deg, var(--border-color) 25%, transparent 25%), 
              linear-gradient(45deg, transparent 75%, var(--border-color) 75%), 
              linear-gradient(-45deg, transparent 75%, var(--border-color) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  font-size: 14px;
  position: relative;
}

img[src*="placeholder"]::after {
  content: "Imagen de placeholder";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
}

/* Badges */
.badge {
  transition: opacity 0.3s ease;
}

/* Toggle del modo oscuro */
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-check-label {
  cursor: pointer;
}

/* MODALES - Corregidos para modo oscuro */
.modal-content {
  background-color: var(--modal-bg) !important;
  color: var(--modal-text) !important;
  border-color: var(--border-color);
}

.modal-header {
  background-color: var(--modal-bg);
  color: var(--modal-text);
  border-bottom-color: var(--border-color);
}

.modal-footer {
  background-color: var(--modal-bg);
  color: var(--modal-text);
  border-top-color: var(--border-color);
}

.modal-title {
  color: var(--modal-text) !important;
}

.modal-body {
  background-color: var(--modal-bg);
  color: var(--modal-text);
}

/* Fondo del modal backdrop */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Botón cerrar del modal */
.btn-close {
  filter: invert(var(--modal-close-filter, 0));
}

.dark-mode .btn-close {
  filter: invert(1);
}

/* Fondo bg-light en modales y cards */
.bg-light {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.dark-mode .bg-light {
  background-color: #2d2d2d !important;
}

/* Textos en elementos bg-light */
.bg-light .text-muted {
  color: var(--muted-color) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .carousel-item img {
    height: 300px;
  }
  
  .display-4 {
    font-size: 2rem;
  }
  
  footer .row > div {
    margin-bottom: 1.5rem;
  }
  
  footer .text-md-end {
    text-align: left !important;
  }
}

/* Animaciones suaves */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Transiciones suaves para todos los elementos */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Iconos */
.fas, .fab {
  margin-right: 5px;
}

/* Enlaces generales */
a {
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* Mejoras para el toggle del modo oscuro */
.form-switch .form-check-input {
  width: 3em;
  height: 1.5em;
  cursor: pointer;
}

.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Estilos para el modo automático */
.auto-mode-indicator {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

/* Estilos específicos para la whitelist */
.whitelist-section {
  border-left: 4px solid #0d6efd;
  padding-left: 15px;
  margin-bottom: 2rem;
}

.whitelist-section h4 {
  color: var(--text-color);
  margin-bottom: 1rem;
}

/* Estilos para los placeholders en textareas */
textarea.form-control::placeholder {
  color: var(--placeholder-color) !important;
  opacity: 0.7 !important;
}

/* Estilos para inputs deshabilitados */
.form-control:disabled {
  background-color: var(--table-stripe);
  color: var(--placeholder-color);
  opacity: 0.8;
}

/* Estilos para selects deshabilitados */
.form-select:disabled {
  background-color: var(--table-stripe);
  color: var(--placeholder-color);
  opacity: 0.8;
}

/* Override de Bootstrap para placeholders en modo oscuro */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #a0a0a0 !important;
}

/* Asegurar que los textos en cards se vean bien */
.card-text {
  color: var(--text-color);
}

.card-title {
  color: var(--text-color);
}

/* Estilos para el texto de ayuda en formularios */
.form-text {
  color: var(--muted-color) !important;
}

/* Estilos para bordes en modo oscuro */
.dark-mode .border,
.dark-mode .border-bottom {
  border-color: #444444 !important;
}

/* Enlaces en navbar para whitelist */
.navbar-text a {
  color: var(--footer-text) !important;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.navbar-text a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Tooltips personalizados */
.navbar-text a[data-bs-toggle="tooltip"] {
  position: relative;
}

/* Asegurar que los tooltips de Bootstrap se vean bien */
.tooltip .tooltip-inner {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.tooltip .tooltip-arrow::before {
  border-top-color: var(--border-color);
}

/* Estilos para listas en modales */
.modal-body ul {
  color: var(--modal-text);
}

.modal-body li {
  color: var(--modal-text);
}

/* Estilos para textos pequeños */
small {
  color: var(--muted-color) !important;
}

/* Headers en modales */
.modal-body h6 {
  color: var(--modal-text) !important;
  font-weight: 600;
}
.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}
.btn-purple:hover {
    background-color: #5a2d91;
    border-color: #5a2d91;
    color: white;
}