@tailwind base;
@tailwind components;
@tailwind utilities;



* {
    font-size: 98%; /* Reducir el tamaño de fuente en un 10% */
  }

  body {
    font-family: 'Inter', 'Roboto', 'Source Sans Pro', sans-serif;

  }
  
  


/* Estilo base para inputs, selects y textareas */
input,
textarea,
select {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

/* Al hacer foco: borde y sombra rojita */
input:focus,
textarea:focus,
select:focus {
    border-color: #6f3ce7; /* rojo */
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2); /* sombrita */
}

/* Si estás usando dark mode o tema oscuro */
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #6f3ce7; /* rojo */
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2); /* sombrita */
}


/* Aplica a todos los inputs que tengan .form-control */
.form-control:focus {
  border-color: #66605f !important; /* borde rojo */
  box-shadow: 0 0 0 0.15rem rgba(231, 76, 60, 0.25) !important; /* sombra roja */
  outline: none;
}

textarea.form-control:focus,
select.form-control:focus {
  border-color: #6f3ce7; /* rojo */
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2); /* sombrita */
    outline: none;
}


.form-control {
  border-radius: 5px; /* 🎯 redondeado suave */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #ced4da; /* gris Bootstrap */
}

/* Foco rojo con sombra suave */
.form-control:focus {
  border-color: #3361c4 !important;
  box-shadow: 0 0 0 0.15rem rgba(60, 71, 231, 0.63) !important;
  outline: none;
}

/* También aplica a textarea y select si usan .form-control */
textarea.form-control,
select.form-control {
  border-radius: 5px;
}



/*landing*/
/* public/css/landing.css */

h1, h2, h3 {
  font-weight: 700;
}

section {
  scroll-margin-top: 100px;
}

nav a {
  transition: color 0.3s ease;
}

.parallax-content {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 100px 20px;
  text-align: center;
  color: white;
}

.animate__animated {
  animation-duration: 1.2s;
}


body {
  transition: background-color 0.3s ease, color 0.3s ease;
}