body {
  background-color: #f4f6f9; /* gris claro */
  color: #333;
  font-family: "Segoe UI", Roboto, sans-serif;
}

h2 {
  color: #004080; /* azul institucional */
  font-weight: 600;
}
h1 {
  color: #58a1eb; /* azul institucional */
  font-weight: 600;
}
.nav-tabs .nav-link {
  color: #004080;
  border: none;
  font-weight: 500;
}

.nav-tabs .nav-link.active {
  background-color: #004080;
  color: #fff;
  border-radius: 5px 5px 0 0;
}

.table {
  border-radius: 8px;
  overflow: hidden;
}

.table-dark {
  background-color: #004080; /* azul oscuro */
}

.table-dark th {
  background-color: #003366;
  color: #fff;
}

.table-dark td {
  background-color: #e6f0ff; /* celeste claro */
  color: #333;
}

.table-secondary th {
  background-color: #004080; /* verde azulado */
  color: #fff;
}

.table-secondary td {
  background-color: #f0fafa;
  color: #333;
}

.btn-outline-primary:hover {
  background-color: #004080; /* color de fondo al hacer hover */
  border-color: #004080;     /* color del borde */
  color: #fff;               /* color del texto */
}
/* Active (cuando se hace click y queda seleccionado) */
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.show {
  background-color: #004080; /* mismo color que hover */
  border-color: #004080;
  color: #fff;
}



.form-label {
  font-weight: 500;
  color: #004080;
}

.form-select, .form-control {
  border: 1px solid #004080;
  border-radius: 6px;
}

.text-shadow {
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

@media (max-width: 768px) {
  #welcomeModal .btn {
    font-size: 1.5rem;   /* más grande en mobile */
    padding: 1rem 2rem;  /* más espacio táctil */
  }
}

@media (max-width: 768px) {
  #tablaFrecuentes { display: none; }
  #cardsFrecuentes { display: block; }
  #tablaMotivos { display: none; }
  #cardsMotivos { display: block; }
  #tablaProc { display: none; }
  #cardsProc { display: block; }
  #tablaProb { display: none; }
  #cardsProb { display: block; }
}

/*
td:nth-child(1) {
  background-color: lightblue;
}

td:nth-child(2) {
  background-color: lightgreen;
}*/

td:nth-child(3) {
  background-color: rgb(240, 236, 128);
}