/* styles.css */

body {
  transition: background 0.6s ease;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  /* background-color: #f4f6f8;
  color: #333; */
  background: #343a40; /* Gris plomo oscuro para todos los fondos */
  color: #f8f9fa; /* Texto claro para que sea legible en fondo oscuro */
}
.card-titulo {
  position: relative; /* Necesario para el borde interno */
  background-color: #e9ecef; /* Gris claro, igual que las otras tarjetas */
  color: var(--color-texto-principal);
  padding: 1.2rem 2rem 0.4rem 2rem; /* arriba, derecha, abajo, izquierda */
  margin: 1rem 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-align: center;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-titulo::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 12px;
  border: 3px solid #6f42c1; /* Borde interno violeta */
  pointer-events: none;
  z-index: 1;
}
.card-titulo h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  position: relative; /* Asegura que el texto esté sobre el borde */
  z-index: 2;
}

.btn-success {
  background-color: var(--color-boton-primario);
}
.btn-success:hover {
  background-color: var(--color-boton-primario-hover);
}

/* header, nav {
  background-color: #2c3e50;
  color: white;
  padding: 1rem; */
/* } */
header, nav {
  background-color: var(--color-header);
  color: white;
  padding: 1rem;
  /* border-bottom: 3px solid #6f42c1; Borde inferior violeta */
}
.navbar-brand {
  color: #fff8e1 !important; /* beige suave con toque cálido */
}

/* button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #2980b9;
} */
 button {
  background-color: var(--color-boton-secundario);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: var(--color-boton-secundario-hover);
}


.boton-ancho {
  width: 80vw;
  max-width: 80vw;
}

/* Estilos para el posicionamiento del botón flotante y centrado */
.boton-flotante-centro {
  transition: box-shadow 0.2s ease, color 0.2s ease-out;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.4rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  background-color: #6f42c1; /* Violeta */
  color: white;
  border: none;
  overflow: hidden; /* Necesario para la animación */
  z-index: 9999;
}

.boton-flotante-centro::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #9ACD32; /* Verde lima para el hover */
  transition: left 0.2s ease-out;
  z-index: -1;
}

.boton-flotante-centro:hover {
  transform: translateX(-50%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: #212529; /* Texto oscuro sobre el fondo verde */
  border-color: #82b42b; /* Borde verde oscuro para consistencia */
}

.boton-flotante-centro:hover::before {
  left: 0; /* Desliza el fondo para rellenar el botón */
}

/* Estilos para el botón de eliminar, incluyendo el hover animado */
.btn-eliminar {
  position: absolute;
  top: 1rem; /* Ajustado para simetría */
  right: 1rem; /* Ajustado para simetría */
  z-index: 10;
  padding: 0.4rem 0.6rem; /* Mantenemos el padding original */
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease-out; /* Animación más rápida */
  overflow: hidden; /* Necesario para la animación */  
  background-color: transparent; /* Aseguramos fondo transparente */
  border: 2px solid #dc3545; /* Borde rojo */
  color: #dc3545; /* Ícono rojo */
}

.btn-eliminar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #dc3545; /* Color de relleno rojo */
  transition: left 0.2s ease-out; /* Animación más rápida */
  z-index: -1; /* Detrás del ícono */
}

.btn-eliminar:hover {
  color: white; /* Cambiamos el color del ícono a blanco */
  border-color: #dc3545; /* Mantenemos el borde rojo */
}

.btn-eliminar:hover::before {
  left: 0; /* Deslizamos el fondo */
}

/* .btn-eliminar {
  opacity: 0;
  transition: opacity 0.3s ease;
} */
.card:hover .btn-eliminar {
  opacity: 1;
}

.card {
  /* will-change: transform, box-shadow; */
  /* background-color: white; */
  border-radius: 8px;
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.1); */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  /* padding: 1.2rem 2rem 0.4rem 2rem; arriba, derecha, abajo, izquierda */
  padding: 2rem;
  margin: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #e9ecef; /* Gris claro para todas las tarjetas */
  /* overflow: visible; */
}

/* Aplicamos el hover solo a las tarjetas dentro de la lista de plantas del dashboard */
#plant-list .card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Estilo para la tarjeta de bienvenida cuando no hay plantas */
.card-bienvenida {
  position: relative;
  color: var(--color-texto-principal); /* Asegura texto oscuro */
}

.card-bienvenida::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 12px;
  border: 3px solid #6f42c1; /* Borde interno violeta */
  pointer-events: none;
  z-index: 1;
}

/* Estilo para la tarjeta de "Agregar Planta" */
.card-add-plant {
  border: 3px dashed #6f42c1; /* Borde punteado violeta */
  background-color: transparent !important; /* Fondo transparente */
  color: #f8f9fa; /* Texto claro */
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  /* Hacemos la tarjeta más pequeña que su contenedor */
  width: 80%; 
  height: 12rem; /* Altura fija para que sea notablemente más chica */
  padding: 1rem; /* Un padding interno más pequeño */
}

.card-add-plant:hover {
  transform: scale(1.05);
  background-color: rgba(111, 66, 193, 0.15) !important; /* Relleno violeta translúcido */
  border-color: #9ACD32; /* Borde verde lima en hover */
}

.add-plant-icon {
  font-size: 2.5rem; /* Ícono grande */
  line-height: 1;
  color: #6f42c1;
  transition: color 0.3s ease;
}
.card-add-plant:hover .add-plant-icon {
  color: #9ACD32; /* Ícono verde lima en hover */
}

/* Anulamos la animación de hover para la tarjeta de login/bienvenida */
.card-login:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Mantenemos la sombra original */
}

.animar-entrada {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
  }
}

#animacion-riego {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.oculto {
  display: none;
}

.animacion-local {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none; 
}

.oculto {
  display: none;
}

.desvanecer {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#toast {
  min-width: 280px;
  font-size: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);
  opacity: 1 !important; /* fuerza visibilidad si fade no se aplica bien */
}
.toast-success {
  background-color: var(--toast-success-bg);
  color: white;
}
.toast-error {
  background-color: var(--toast-error-bg);
  color: white;
}
.toast-warning {
  background-color: var(--toast-warning-bg);
  color: black;
}


.card-body button {
  margin: 4px 0;
}

.btn-ngro {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-ngro:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.etiquetas-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  justify-content: center;
}

/* .etiqueta {
  background-color: #198754;
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.8rem;
} */
.etiqueta {
  background-color: var(--etiqueta-bg);
  color: var(--etiqueta-texto);
  padding: 0.3rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.8rem;
}

.modal-header,
.modal-footer {
  border-left: none;
  border-right: none;
  border-top: 1px solid rgba(0,0,0,0.1); /* si querés suavizar */
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-inline: 1rem; /* separa visualmente del borde */
}

.modal-content {
  background-color: #e9ecef; /* Gris claro para modales */
  color: var(--color-texto-principal); /* Asegura texto oscuro en modales */
}

.list-group-item {
  background-color: #e9ecef; /* Gris claro para items de lista */
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  color: var(--color-texto-principal); /* Texto oscuro para tarjetas claras */
}

#nombre, #tipo, #tamano, #maceta, #ultimo_riego {
  background-color: #e9ecef; /* Gris claro para inputs */
  color: var(--color-texto-principal); /* Texto oscuro para inputs */
}

input.form-control:-webkit-autofill {
  background-color: #e9ecef !important;
  -webkit-box-shadow: 0 0 0px 1000px #e9ecef inset;
  color: var(--color-texto-principal) !important;
}

.card.estado-verde::before,
.card.estado-amarillo::before,
.card.estado-naranja::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 12px;
  border: 3px solid;
  pointer-events: none;
  z-index: 1;
}

.card.estado-verde::before {
  border-color: #198754; /* verde institucional */
}

.card.estado-amarillo::before {
  border-color: #ffc107; /* amarillo Bootstrap */
}

.card.estado-naranja::before {
   border-color: #dc3545; /* rojo Bootstrap */
  /* border-color: #fd7e14; naranja suave */
}

/* border-color: #dc3545; rojo Bootstrap */

.card::before {
  transition: border-color 0.4s ease;
}

.icono-beige {
  color: var(--color-beige-suave);
}

.btn-borde {
  border-color: var(--color-beige-suave);
}

i.bi {
  font-style: normal;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.dashboard-container {
  --bs-gutter-x: 0rem !important; /* elimina espacio horizontal entre columnas */
}

.sidebar-title {
  cursor: pointer;
  user-select: none; /* Evita que el texto se seleccione al hacer clic */
}

/* --- Nuevo Estilo de Botón Violeta con Hover --- */
.btn-violeta-outline {
  position: relative; /* Necesario para el pseudo-elemento */
  overflow: hidden;  /* Oculta el pseudo-elemento fuera del botón */
  border: 2px solid #6f42c1; /* Color violeta de Bootstrap */
  color: #6f42c1;
  background-color: transparent;
  transition: color 0.2s ease-out; /* Animación más rápida */
  z-index: 1; /* Asegura que el texto esté por encima */
}

.btn-violeta-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Empieza fuera, a la izquierda */
  width: 100%;
  height: 100%;
  background-color: #6f42c1; /* Color de relleno */
  transition: left 0.2s ease-out; /* Animación de deslizamiento más rápida */
  z-index: -1; /* Se posiciona detrás del texto */
}

.btn-violeta-outline:hover {
  color: white; /* Cambia el color del texto a blanco */
  border-color: #6f42c1; /* Mantenemos el borde violeta en el hover */
}

.btn-violeta-outline:hover::before {
  left: 0; /* Desliza el fondo para rellenar el botón */
}

/* Asegura que el botón outline deshabilitado mantenga su color */
.btn-violeta-outline:disabled,
.btn-violeta-outline.disabled {
  color: #6f42c1; /* Mantenemos el color violeta para consistencia */
  border-color: #6f42c1;
}

/* --- Estilos para páginas con contenido centrado verticalmente (como home.html) --- */
/*
  Para usar, agregar la clase 'page-centered' al body y 'main-container'
  al div que debe ocupar el espacio restante.
*/
html:has(body.page-centered),
body.page-centered {
  height: 100%;
  margin: 0;
}
body.page-centered {
  display: flex;
  flex-direction: column;
}
.page-centered .main-container {
  flex-grow: 1;
}

/* --- Nuevo Estilo de Botón Violeta Sólido con Hover Deslizante --- */
.btn-violeta-solid {
  position: relative; /* Necesario para el pseudo-elemento */
  overflow: hidden;  /* Oculta el pseudo-elemento fuera del botón */
  background-color: #6f42c1; /* Color violeta de Bootstrap */
  color: white;
  border-color: #6f42c1;
  transition: color 0.3s ease-out;
  z-index: 1; /* Asegura que el contenido esté por encima del ::before */
}

.btn-violeta-solid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Empieza fuera, a la izquierda */
  width: 100%;
  height: 100%;
  background-color: #59359a; /* Color de relleno (violeta más oscuro) */
  transition: left 0.3s ease-out; /* Animación de deslizamiento */
  z-index: -1; /* Se posiciona detrás del contenido del botón */
}

.btn-violeta-solid:hover {
  color: white;
  border-color: #59359a; /* Actualizamos el borde para que coincida */
}

.btn-violeta-solid:hover::before {
  left: 0; /* Desliza el fondo para rellenar el botón */
}

/* Asegura que el botón sólido deshabilitado mantenga su color */
.btn-violeta-solid:disabled,
.btn-violeta-solid.disabled {
  background-color: #6f42c1;
  border-color: #6f42c1;
  opacity: 0.75; /* Ligera opacidad para indicar estado inactivo */
}

/* --- Nuevo Estilo de Botón Lima con Hover Violeta --- */
.btn-lima-hover-violeta {
  position: relative;
  overflow: hidden;
  background-color: #9ACD32; /* Verde lima (YellowGreen) */
  color: #212529; /* Texto oscuro para mejor contraste */
  border: 2px solid #212529; /* Borde del mismo color que el texto */
  transition: color 0.3s ease-out;
  z-index: 1;
}

.btn-lima-hover-violeta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #6f42c1; /* Violeta de los otros botones */
  transition: left 0.3s ease-out;
  z-index: -1;
}

.btn-lima-hover-violeta:hover {
  color: white; /* El texto cambia a blanco sobre el fondo violeta */
  border-color: #59359a; /* Borde violeta oscuro para consistencia */
}

.btn-lima-hover-violeta:hover::before {
  left: 0;
}

/* --- Nuevo Estilo de Botón Celeste Outline --- */
.btn-celeste-outline {
  position: relative;
  overflow: hidden;
  border: 2px solid #0dcaf0; /* Celeste de Bootstrap (info) */
  color: #0dcaf0;
  background-color: transparent;
  transition: color 0.2s ease-out; /* Animación más rápida */
  z-index: 1;
}

.btn-celeste-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #0dcaf0; /* Color de relleno */
  transition: left 0.2s ease-out; /* Animación más rápida */
  z-index: -1;
}

.btn-celeste-outline:hover {
  color: white; /* Texto blanco sobre el fondo celeste */
  border-color: #0dcaf0; /* Mantenemos el color del borde en hover */
}

.btn-celeste-outline:hover::before {
  left: 0;
}

/* --- Nuevo Estilo de Botón Rojo Outline --- */
.btn-rojo-outline {
  position: relative;
  overflow: hidden;
  border: 2px solid #dc3545; /* Rojo de Bootstrap (danger) */
  color: #dc3545;
  background-color: transparent;
  transition: color 0.3s ease-out;
  z-index: 1;
}

.btn-rojo-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #dc3545; /* Color de relleno */
  transition: left 0.3s ease-out;
  z-index: -1;
}

.btn-rojo-outline:hover {
  color: white; /* Texto blanco sobre el fondo rojo */
  border-color: #dc3545;
}

.btn-rojo-outline:hover::before {
  left: 0;
}

/* --- Nuevo Estilo para Toasts Violeta --- */
.bg-violeta {
  background-color: #6f42c1 !important; /* Violeta de Bootstrap con !important para sobreescribir */
}

/* --- Estilos para el Sidebar Violeta --- */
#sidebar {
  background-color: var(--color-header) !important; /* Fondo negro como el navbar */
  color: #f8f9fa; /* Texto claro para todo el contenido */
  width: 250px;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

/* Contenedor interno para resolver el problema del borde bajo el navbar */
.sidebar-content {
  height: 100%;
  padding-top: 4.5rem; /* Espacio ajustado para el navbar fijo */
  z-index: 2;
  padding-left: 1rem; /* Mantenemos un padding lateral para el scrollbar si aparece */
  padding-right: 1rem;
  padding-bottom: 1rem;
}

/* Estilos para el sidebar colapsado */
#sidebar.collapsed {
  transform: translateX(-100%);
}

/* Estilos para el contenido principal */
#main-content {
  margin-left: 250px; /* Mismo ancho que el sidebar */
  transition: margin-left 0.3s ease-in-out;
}
#main-content.expanded {
  margin-left: 0;
}

.sidebar-inner-wrapper {
  position: relative;
  height: 100%;
  padding: 1rem;
  overflow: visible; /* Permite que los elementos posicionados absolutamente se muestren */
  z-index: 2;
}

/* Borde interno violeta aplicado al contenedor de contenido */
.sidebar-inner-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 3px solid #6f42c1; /* Borde violeta */
  pointer-events: none;
  z-index: 1;
}

.sidebar-main-title {
  color: white; /* Títulos en blanco para que resalten */
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative; /* Necesario para el pseudo-elemento ::after */
  z-index: 3;
  padding-bottom: 0.5rem; /* Espacio para la línea */
}

/* Línea sutil debajo del título principal del sidebar */
.sidebar-main-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%; /* Hacemos la línea más corta que el texto */
  height: 2px;
  background-color: #6f42c1; /* Violeta */
}

.sidebar-subtitle {
  font-size: 1.1rem; /* Hacemos los subtítulos más pequeños que el principal */
  cursor: pointer;
  user-select: none;
  color: #f8f9fa;
  transition: color 0.3s ease;
  position: relative; /* Necesario para el hover */
  overflow: hidden;   /* Oculta el pseudo-elemento */
  z-index: 1;
  padding: 0.5rem; /* Añadimos padding para que el hover se vea mejor */
  margin: -0.5rem; /* Compensamos el padding para no afectar el layout */
}

.sidebar-subtitle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #6f42c1; /* Violeta */
  transition: left 0.3s ease-out;
  z-index: -1;
}

/* Estado de hover y estado activo (acordeón abierto) */
.sidebar-subtitle:hover,
.sidebar-subtitle:not(.collapsed) {
  color: white;
}

/* Animación de fondo para el hover y para el estado activo */
.sidebar-subtitle:hover::before,
.sidebar-subtitle:not(.collapsed)::before {
  left: 0;
}

#sidebar .form-control {
  background-color: rgba(255, 255, 255, 0.1); /* Fondo translúcido para inputs */
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

#sidebar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6); /* Placeholder más suave */
}

#sidebar .form-control:focus {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border-color: white;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* --- Nuevo Estilo de Botón Violeta con Hover Verde --- */
.btn-violeta-hover-verde {
  position: relative;
  overflow: hidden;
  background-color: #6f42c1; /* Violeta de base */
  color: white; /* Texto blanco */
  border: 2px solid #59359a; /* Borde violeta oscuro */
  transition: color 0.3s ease-out;
  z-index: 1;
}

.btn-violeta-hover-verde::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #9ACD32; /* Verde lima para el hover */
  transition: left 0.3s ease-out;
  z-index: -1;
}

.btn-violeta-hover-verde:hover {
  color: #212529; /* Texto oscuro sobre el fondo verde */
  border-color: #82b42b; /* Borde verde oscuro para consistencia */
}

.btn-violeta-hover-verde:hover::before {
  left: 0;
}

/* --- Nuevo Estilo de Botón Blanco Outline para Sidebar --- */
.btn-white-outline {
  position: relative;
  overflow: hidden;
  border: 2px solid white;
  color: white;
  background-color: transparent;
  transition: color 0.3s ease-out;
  z-index: 1;
}

.btn-white-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #6f42c1; /* Relleno violeta */
  transition: left 0.3s ease-out;
  z-index: -1;
}

.btn-white-outline:hover {
  color: white; /* Texto blanco sobre el fondo violeta */
  border-color: white;
}

.btn-white-outline:hover::before {
  left: 0;
}

/* --- Estilo de Hover animado para Dropdown Items (aplicado al LI) --- */
.li-animado {
  position: relative;
  overflow: hidden;
}

.li-animado::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #6f42c1;
  transition: left 0.3s ease-out;
  z-index: -1;
}

.li-animado:hover .dropdown-item {
  color: white !important;
  background-color: transparent !important;
}

.li-animado:hover::before {
  left: 0;
}

/* --- Estilos para el autocompletado personalizado de Google Places --- */
#suggestions-wrapper {
  /* La posición y el ancho ahora se establecen con JS */
  display: none; /* Oculto por defecto */
  z-index: 1051; /* Un valor más alto que el navbar (1050) para asegurar que esté por encima */
  max-height: 200px;
  overflow-y: auto;
}

.suggestion-item {
  background-color: #343a40; /* Fondo oscuro como el sidebar */
  color: #f8f9fa;
  border-color: rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
}

/* Forzamos el redondeo de bordes en el input de localidad, ya que el botón se oculta */
#inputLocalidad.form-control {
  border-radius: var(--bs-border-radius) !important;
}

/* --- Estilo de Hover para Enlaces Genéricos (como Política de Privacidad) --- */
.link-hover-violeta {
  position: relative;
  overflow: hidden;
  display: inline-block; /* Para que el fondo se ajuste al texto */
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem; /* Compensa el padding para no afectar el layout */
  text-decoration: none;
  transition: color 0.2s ease-out;
  z-index: 1;
}

.link-hover-violeta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #6f42c1; /* Violeta */
  transition: left 0.2s ease-out;
  z-index: -1;
}

.link-hover-violeta:hover {
  color: white !important; /* Forzamos el color blanco para sobreescribir .text-muted */
}

.link-hover-violeta:hover::before {
  left: 0;
}

/* --- Estilos para la página de detalles (Estadísticas y Gráfico) --- */
.card-stat {
    background-color: #e9ecef; /* Gris claro, igual que las tarjetas del dashboard */
    border: 1px solid #dee2e6; /* Borde sutil para el fondo claro */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 1.5rem rgba(111, 66, 193, 0.35); /* Sombra violeta más intensa */
}

/* Anulamos el efecto hover para las tarjetas dentro del carrusel móvil */
.carousel .card-stat:hover {
    transform: none;
    box-shadow: none;
}

.chart-container {
    position: relative;
    height: 300px; /* Altura fija para el gráfico */
    width: 100%;
}

/* Anula el efecto de zoom en la tarjeta del gráfico */
.card-custom:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Mantenemos la sombra original */
}

/* --- Estilos para las nuevas tarjetas de detalle --- */
.card-ficha-planta,
.card-galeria-fotos,
.card-estado-riego,
.card-suplementos {
  background-color: #e9ecef; /* Fondo gris claro */
  color: #212529; /* Texto oscuro */
  border: none; /* Sin borde por defecto */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-ficha-planta .card-title,
.card-galeria-fotos .card-title,
.card-estado-riego .card-title,
.card-suplementos .card-title {
  color: #6f42c1; /* Títulos violetas */
  font-weight: 600;
}

/* Estilos para la zona de carga de imágenes */
.upload-area {
  border: 2px dashed #6f42c1; /* Borde punteado violeta */
  background-color: rgba(111, 66, 193, 0.05); /* Fondo muy suave */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.upload-area:hover,
.upload-area.highlight {
  background-color: rgba(111, 66, 193, 0.15); /* Fondo más visible en hover/drag */
  border-color: #9ACD32; /* Borde verde lima */
}

/* Carrusel de imágenes */
#plant-carousel .carousel-item img {
  object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
  height: 250px; /* Altura fija para el carrusel */
  border-radius: 0.375rem; /* Bordes redondeados como las tarjetas */
}

/* --- Estilo para resaltar el nombre de la marca con color --- */
.brand-highlight {
  color: #6f42c1; /* Violeta */
  font-weight: 600; /* Un poco más de grosor para destacar */
}

/* --- Clases de utilidad para colores y texto --- */
.text-violeta {
  color: #6f42c1 !important;
}

.text-violeta-bold {
  color: #6f42c1 !important;
  font-weight: 600;
}

/* --- Estilos para el acordeón de funcionalidades en home --- */
.accordion-container a {
  cursor: pointer;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-container a[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

/* --- Estilos para el dropdown de acciones en móvil --- */
.mobile-actions-dropdown {
  width: 280px; /* Ancho fijo para el menú desplegable */
  background-color: #343a40; /* Mismo fondo que el sidebar */
  border: 2px solid #6f42c1; /* Borde violeta */
}

/* --- Estilos del Sidebar para Móvil (Overlay) --- */
@media (max-width: 991.98px) {

  #sidebar {
    /* Lo posicionamos de forma fija sobre todo lo demás */
    position: fixed;
    /* Un z-index alto para que se superponga al navbar y al contenido */
    z-index: 1055; 
  }

  #main-content {
    /* En móvil, el contenido principal NUNCA se desplaza */
    margin-left: 0 !important;
  }

  /* Por defecto, en móvil, el sidebar está colapsado (fuera de la pantalla) */
  #sidebar.collapsed {
    transform: translateX(-100%);
  }
  
  /* Cuando NO está colapsado, se muestra deslizándose desde la izquierda */
  #sidebar:not(.collapsed) {
    transform: translateX(0);
  }
}