@import url("/static/css/footer.css");
@import url("/static/css/navbar.css");
@import url("/static/css/pup_up_toast.css");
@import url("/static/css/carrusel_img.css");
@import url("/static/css/carrusel_img_home.css");
@import url("/static/css/checkout.css");
@import url("/static/css/miPaleta.css");
@import url("/static/css/hide_number_arrows_field.css");

  @keyframes flash {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
  }

  .flash {
    animation: flash 0.5s ease-in-out 1;
  }

  
/* background imagen  */
.hero-admin-bg-img {
  background-image: url("/static/img/fondo_jardin_banner.jpg");
}
/* Texto por defecto en negro para inputs, selects, textareas */
input, select, textarea {
  color: #000;            /* texto negro */
}

/* Asegurar también placeholder gris para diferenciarlo del texto */
::placeholder {
  color: #6b7280; /* gris tailwind "text-gray-500" */
}

/* Fondo general para que no aparezca "footer blanco" */
body {
  color: #000000; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Asegura que el contenido principal ocupe espacio */
main {
  flex: 1;
}


/* Ajustes para tablas */
.table-container {
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th {
  color: white;
  padding: 0.5rem;
}

table td {
  background-color: white;
  color: #374151; /* gray-700 */
  padding: 0.5rem;
  border-bottom: 1px solid #dcdcdc; /* gray-300 */
}

/* Botones de acciones */
.btn {
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-edit {
  background-color: #f59e0b; /* amber-500 */
  color: white;
}

.btn-edit:hover {
  background-color: #d97706;
}

.btn-delete {
  background-color: #dc2626; /* red-600 */
  color: white;
}

.btn-delete:hover {
  background-color: #b91c1c;
}


/* Hero Section */
.hero-admin-bg-v {
    background: linear-gradient(to right, #a3d9a5, #74c69d); /* verde suave a verde esmeralda */
    color: white;
}

/* Tarjetas */
.admin-card-icon {
    font-size: 2.5rem;
    color: #4caf50; /* verde natural */
    margin-bottom: 1rem;
}

/* Botones */
.cta-button-primary {
    background-color: #7cbf80; /* verde claro elegante */
    color: white;
}
.cta-button-primary:hover {
    background-color: #5ca866; /* tono más intenso al pasar el mouse */
    transform: translateY(-1px);
}
.cta-button-outline {
    background-color: transparent;
    border: 1px solid #7cbf80;
    color: #5ca866;
}
.cta-button-outline:hover {
    background-color: #ecfdf5; /* verde muy claro de fondo */
    transform: translateY(-1px);
}

/* Ajusta el menú colapsado para pantallas pequeñas */
@media (max-width: 764px) {
  #adminNavbarContent {
    width: 280px !important;  /* más ancho que antes (ajusta si quieres) */
    background-color: #065f46; /* un verde más oscuro para mejor contraste */
    padding: 1rem;
    border-radius: 0.5rem;
  }

  /* Centrar texto y contenido de los links vertical y horizontalmente */
  #adminNavbarContent ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #adminNavbarContent ul li a,
  #adminNavbarContent ul li form button {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem;
  }

  /* Mostrar texto "Menú desplegable" cuando menú está oculto */
  #adminMenuToggler::after {
    content: ' Menú desplegable';
    font-weight: 600;
    font-size: 1rem;
    margin-left: 0.5rem;
  }
}
/* Para el navbar -- desde core/base.html       */
@media (max-width: 764px) {
  /* Quitar fondo y bordes al contenedor principal */
  #adminNavbarContent {
    width: 100% !important;
    background: none !important;
    padding: 0;
    border-radius: 0;
  }

  /* Ocultar ícono de hamburguesa */
  #adminMenuToggler svg {
    display: none;
  }

  /* Botón "Menú desplegable" */
  #adminMenuToggler::after {
    content: 'Menú desplegable';
    display: block;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
    width: 100%;
    cursor: pointer;
  }

  /* Lista en columna, ancho completo */
  #adminNavbarContent ul {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* estira al ancho completo */
    width: 100%;
    margin-top: 0.5rem;
  }

  /* Enlaces y botones: ancho total */
  #adminNavbarContent ul li a,
  #adminNavbarContent ul li form button {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.75rem 1rem;
    text-align: center;
    box-sizing: border-box;
  }

  /* Asegurar que el formulario no se encoja */
  #logout-form {
    width: 100%;
  }
}