body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #f8f9fa;
  color: #222;
}

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #0971CE;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 16px;
}

.actions button {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  margin-left: 12px;
}

/* Drawer Menu */
.drawer-menu {
  left: auto;
  right: -250px;
  top: 0;
  width: 250px;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transition: 0.3s;
  z-index: 101;
  padding-top: 60px;
  position: fixed;
}

.drawer-menu .close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
  color: #333;
}

.drawer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-menu li {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.drawer-menu li:hover {
  background: #f0f0f0;
}

.overlay {
  position: fixed;
  display: none;
  top: 0; left: 0; right:0; bottom:0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
}

.drawer-footer {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: #fff;
  bottom: 65px; /* valor por defecto en móviles */
}

.drawer-footer img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.drawer-footer .info {
  display: flex;
  flex-direction: column;
}

.drawer-footer .info .name {
  font-weight: bold;
  font-size: 15px;
  color: #333;
}

.drawer-footer .info .email {
  font-size: 13px;
  color: #666;
}

/* Vista desktop */
@media (min-width: 1024px) {
  .drawer-footer {
    bottom: 30px;
  }
}

/* Drawer footer */
body.dark-mode .drawer-footer {
  background: #042738;
  color: #FFFFFF;
}

body.dark-mode .drawer-footer .info .name,
body.dark-mode .drawer-footer .info .email {
  color: #FFFFFF;
}

/* Search bar */
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  gap: 10px;
  background: #fff;
}

.search-bar input {
  width: 100%;
  max-width: 400px;
  padding: 10px 15px;
  border-radius: 12px;
  border: 1px solid #ccc;
  outline: none;
}

.search-bar button {
  padding: 10px 15px;
  border-radius: 12px;
  border: none;
  background: #0971CE;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.search-bar button:hover {
  background: #085aaa;
}

/* Services Grid */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centra todos los cards */
  gap: 12px; /* espacio reducido */
  padding: 20px;
  padding-bottom: 100px; /* espacio para barra inferior */
}

/* Service Card */
.service-card {
  text-decoration: none; /* quita subrayado */
  color: inherit;        /* hereda el color normal */
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card * {
  text-decoration: none !important; /* asegura que ningún texto herede subrayado */
  color: inherit !important;        /* asegura que hereden el color de la card */
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Imagen del servicio */
.service-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Información del servicio */
.service-info {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

/* Textos */
.service-name {
  font-weight: bold;
  font-size: 16px;
  margin: 0;
}

.service-store {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.service-desc {
  font-size: 14px;
  color: #333;
  margin: 4px 0;
}

.service-price {
  font-size: 14px;
  font-weight: normal;
  color: #000;
}

/* Contenedor de la imagen del servicio */
.service-image {
  position: relative;
}

/* Caja de rating en esquina superior derecha */
.rating-box {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 2px 6px;
  display: flex;
  gap: 2px;
  z-index: 10;
}

/* Estrellas */
.rating-box i {
  font-size: 14px;
  color: inherit !important; /* evitamos que herede color del card */
}

/* Estrellas llenas (amarillas) */
.rating-box i.bi-star-fill {
  color: #ffc107 !important;
}

/* Estrellas vacías (gris claro) */
.rating-box i.bi-star {
  color: #ccc !important;
}

/* Toast personalizado */
.custom-toast {
  display: none;
  background: #f3f4f5;
  position: fixed;
  z-index: 9999;
  top: 20px;
  right: 20px; /* agregado para móviles */
  left: auto;   /* agregado para móviles */
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  max-width: 90%;
  width: auto;
  animation: slideIn 0.4s ease;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

@media (min-width: 768px) {
  .custom-toast {
    /* ya no hace falta cambiar left/right aquí */
  }
}

/* Contenido del toast */
.custom-toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.custom-toast-content i {
  font-size: 24px;
}

/* Animación */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Desktop: esquina superior derecha */
@media (min-width: 768px) {
  .custom-toast {
    left: auto;
    right: 20px;
    top: 20px;
    transform: none;
  }
}

/* Colores por tipo */
.toast-error i {
  color: #FF4C4C;
}

.toast-warning i {
  color: #FFA500;
}

.toast-success i {
  color: #28A745;
}

/* Responsive */
@media (max-width: 768px) {
  .deposit-content {
    flex-direction: column;
  }
  .deposit-info {
    margin-top: 30px;
  }
}

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  z-index: 100;
}

.bottom-nav button {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  color: #555;
  transition: color 0.3s;
}

.bottom-nav button span {
  font-size: 12px;
  margin-top: 2px;
}

.bottom-nav button:hover {
  color: #0971CE;
}

/* Desktop adjustments */
@media (min-width: 900px) {
  .service-card {
    width: 260px; /* card un poco más ancho */
  }
  .service-card img {
    height: 220px; /* altura proporcional */
  }
}

/* Móvil */
@media (max-width: 600px) {
  .services-grid {
    justify-content: center;
    gap: 10px;
  }
  .service-card {
    width: 48%; /* 2 por fila */
  }
}

@media (min-width: 1024px) {
  /* Drawer fijo */
  .drawer-menu {
    right: 0 !important;
    position: fixed;
    top: 60px;                   /* debajo de la topbar */
    height: calc(100% - 120px);  /* resta topbar (60px) + bottom-nav (60px) */
    box-shadow: none;
    border-left: none;
    background: #fff;
    z-index: 99;
    padding-top: 15px;           /* pequeño espacio arriba */
  }

  /* Ocultar el botón burger */
  #menuToggle {
    display: none !important;
  }

  /* Ocultar el botón de cerrado */
  .drawer-menu .close-btn {
    display: none !important;
  }

  /* Subir opciones del menú (ul) */
  .drawer-menu ul {
    margin-top: 0;     /* quita espacio extra */
    padding-top: 10px; /* un poco de aire */
  }

  /* Overlay nunca en desktop */
  .overlay {
    display: none !important;
  }

  /* El contenido principal se corre para no quedar debajo del menú */
  .main-content {
    margin-right: 250px; /* ancho del drawer */
  }
}

/* ======================== */
/*        MODO OSCURO       */
/* ======================== */

body.dark-mode {
  background: #021923;
  color: #FFFFFF;
}

/* Topbar y Bottom-nav */
body.dark-mode .topbar,
body.dark-mode .bottom-nav {
  background: #042738;
}

body.dark-mode .bottom-nav button {
  color: #FFFFFF;
}

body.dark-mode .bottom-nav button:hover {
  color: #97c0ff;
}

body.dark-mode .bottom-nav button.active {
  color: #0971CE;
}

/* Drawer Menu */
body.dark-mode .drawer-menu {
  background: #042433;
}

body.dark-mode .drawer-menu .close-btn {
  color: #FFFFFF;
}

body.dark-mode .drawer-menu li {
  color: #FFFFFF;
}

body.dark-mode .drawer-menu li:hover {
  background: #021923;
}

/* Search bar */
body.dark-mode .search-bar {
  background: #021923;
}

body.dark-mode .search-bar input {
  background: #021923;
  color: #FFFFFF;
  border: 1px solid #555;
}

body.dark-mode .search-bar input::placeholder {
  color: #AAAAAA;
}

body.dark-mode .search-bar button {
  background: #0971CE;
  color: #fff;
}

body.dark-mode .search-bar button:hover {
  background: #085aaa;
}

/* Services Grid y Cards */
body.dark-mode .service-card {
  background: #042433;
  color: #FFFFFF;
}

body.dark-mode .service-info .service-name,
body.dark-mode .service-info .service-store,
body.dark-mode .service-info .service-desc,
body.dark-mode .service-info .service-price {
  color: #FFFFFF !important;
}

/* Rating */
body.dark-mode .rating-box {
  background: #021923;
}

/* Toast */
body.dark-mode .custom-toast {
  background: #042433;
  color: #FFFFFF;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.04);
}

body.dark-mode .custom-toast .custom-toast-content {
  color: #FFFFFF;
}

body.dark-mode .custom-toast .custom-toast-content i {
  color: inherit;
}

/* Mantener colores de tipo */
body.dark-mode .toast-error i {
  color: #FF4C4C !important;
}

body.dark-mode .toast-warning i {
  color: #FFA500 !important;
}

body.dark-mode .toast-success i {
  color: #28A745 !important;
}