/**
 * TEMAS OSCURO Y CLARO PARA XZONAS VALENCIA
 * CSS para aplicar temas consistentes en toda la página
 */

/* ============================================
   TEMA OSCURO (DEFAULT)
   ============================================ */
body.dark-theme,
html.dark-theme {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* Navbar */
.dark-theme .navbar {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

.dark-theme .navbar .navbar-brand {
  color: #fff !important;
}

.dark-theme .navbar-nav li a {
  color: #e0e0e0 !important;
}

.dark-theme .navbar-nav li a:hover {
  color: #fff !important;
  background-color: #444 !important;
}

/* Contenedores */
.dark-theme .container,
.dark-theme .container-fluid {
  background-color: #1a1a1a !important;
}

/* Paneles y cards */
.dark-theme .panel,
.dark-theme .card {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

.dark-theme .panel-heading {
  background-color: #333 !important;
  border-color: #444 !important;
  color: #fff !important;
}

.dark-theme .panel-body {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

/* Formularios */
.dark-theme .form-control {
  background-color: #333 !important;
  border-color: #555 !important;
  color: #e0e0e0 !important;
}

.dark-theme .form-control:focus {
  background-color: #444 !important;
  border-color: #777 !important;
  color: #fff !important;
}

/* Botones */
.dark-theme .btn {
  background-color: #444 !important;
  border-color: #555 !important;
  color: #e0e0e0 !important;
}

.dark-theme .btn:hover {
  background-color: #555 !important;
  border-color: #666 !important;
  color: #fff !important;
}

/* Dropdown menus */
.dark-theme .dropdown-menu {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

.dark-theme .dropdown-menu li a {
  color: #e0e0e0 !important;
}

.dark-theme .dropdown-menu li a:hover {
  background-color: #444 !important;
  color: #fff !important;
}

/* Tablas */
.dark-theme .table {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

.dark-theme .table th {
  background-color: #333 !important;
  border-color: #444 !important;
  color: #fff !important;
}

.dark-theme .table td {
  border-color: #444 !important;
}

.dark-theme .table-striped tbody tr:nth-of-type(odd) {
  background-color: #333 !important;
}

/* Carousel */
.dark-theme #myCarouselTop {
  background-color: #2d2d2d !important;
}

.dark-theme .carousel-inner {
  background-color: #2d2d2d !important;
}

.dark-theme .carousel-caption {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Footer */
.dark-theme footer {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
}

/* Modales */
.dark-theme .modal-content {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

.dark-theme .modal-header {
  background-color: #333 !important;
  border-color: #444 !important;
}

.dark-theme .modal-title {
  color: #fff !important;
}

.dark-theme .modal-body {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

.dark-theme .modal-footer {
  background-color: #333 !important;
  border-color: #444 !important;
}

/* ============================================
   TEMA CLARO
   ============================================ */
body.light-theme,
html.light-theme,
body:not(.dark-theme),
html:not(.dark-theme) {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* Navbar */
.light-theme .navbar,
body:not(.dark-theme) .navbar {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

.light-theme .navbar .navbar-brand,
body:not(.dark-theme) .navbar .navbar-brand {
  color: #333 !important;
}

.light-theme .navbar-nav li a,
body:not(.dark-theme) .navbar-nav li a {
  color: #333 !important;
}

.light-theme .navbar-nav li a:hover,
body:not(.dark-theme) .navbar-nav li a:hover {
  color: #000 !important;
  background-color: #e9ecef !important;
}

/* Contenedores */
.light-theme .container,
.light-theme .container-fluid,
body:not(.dark-theme) .container,
body:not(.dark-theme) .container-fluid {
  background-color: #ffffff !important;
}

/* Paneles y cards */
.light-theme .panel,
.light-theme .card,
body:not(.dark-theme) .panel,
body:not(.dark-theme) .card {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
}

.light-theme .panel-heading,
body:not(.dark-theme) .panel-heading {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #333 !important;
}

.light-theme .panel-body,
body:not(.dark-theme) .panel-body {
  background-color: #ffffff !important;
  color: #333 !important;
}

/* ============================================
   APLICAR TEMA POR DEFECTO AL CARGAR
   ============================================ */
body {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* ============================================
   TRANSICIONES SUAVES
   ============================================ */
body,
.navbar,
.container,
.panel,
.card,
.form-control,
.btn,
.dropdown-menu,
.table,
.modal-content {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ============================================
   ESPECÍFICOS PARA ELEMENTOS XZONAS
   ============================================ */

/* Destacadas del día */
.dark-theme #cnt_destacadas_diaB {
  background: linear-gradient(135deg, #2d2d2d, #1a1a1a) !important;
}

.dark-theme .titdestacada {
  background: linear-gradient(to right, #f8007c, #e91e63) !important;
  color: #fff !important;
}

/* Botones de categoría */
.dark-theme .btn-categoria-small {
  border-color: #555 !important;
}

/* Grid de fotos */
.dark-theme .thumbnail {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

/* Búsqueda avanzada */
.dark-theme #busqueda-avanzada {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

/* Mapa */
.dark-theme #bloque-mapa-anunciantes {
  background-color: #2d2d2d !important;
}

/* Override para elementos específicos que podrían tener !important */
.dark-theme * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}