/* Tipografía general */

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Fondos y contenedores */
.bg-gray-800 {
  background-color: #2d3748 !important; /* gris medio */
}

.divide-dashed :not(:last-child) {
  border-style: dashed;
}

.bg-gray-900 {
  background-color: #1a202c !important; /* gris oscuro */
}


/* Tarjetas */
.my-card {
  background-color: #2d3748;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.my-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Botones */
.my-button {
  background-color: #3182ce;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background-color 0.2s, transform 0.2s;
}

.my-button:hover {
  background-color: #2b6cb0;
  transform: scale(1.05);
}

/* Botones de colores específicos */
.btn-red { background-color: #e53e3e; }
.btn-red:hover { background-color: #c53030; }
.btn-green { background-color: #38a169; }
.btn-green:hover { background-color: #2f855a; }
.btn-yellow { background-color: #d69e2e; }
.btn-yellow:hover { background-color: #b7791f; }

/* Inputs */
input[type="text"], input[type="url"], input[type="password"] {
  background-color: #1a202c;
  color: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #4a5568;
  width: 100%;
  transition: border 0.2s, background-color 0.2s;
}

input[type="text"]:focus, input[type="url"]:focus, input[type="password"]:focus {
  border-color: #3182ce;
  background-color: #2d3748;
  outline: none;
}

/* Formularios */
form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Textos y enlaces */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

 /* tooltip */
.tooltip {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .tooltip.show {
    opacity: 1;
}

/* Responsive: ajustar tarjetas y grids */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important; }
}
    
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.3s ease-out;
}