/* === Colores institucionales === */
:root {
  --color-azul: #004057;
  --color-rojo: #B00822;
  --color-gris: #303030;
  --color-blanco: #FFFFFF;
  --color-gris-oscuro: #212121;
  --color-gris-claro: #E4E7EA;
}

body {
  background-color: var(--color-gris-claro);
  color: var(--color-blanco);
}

/* Navbar */
.navbar {
  background-color: var(--color-azul) !important;
}
.navbar .nav-link, .navbar .navbar-brand {
  color: var(--color-blanco) !important;
}
.navbar .nav-link:hover {
  color: var(--color-rojo) !important;
}
.navbar .dropdown-menu {
  background-color: var(--color-gris);
}
.navbar .dropdown-item {
  color: var(--color-blanco);
}
.navbar .dropdown-item:hover {
  background-color: var(--color-rojo);
  color: var(--color-blanco);
}

/* Botones */
.btn-success {
  background-color: var(--color-azul);
  border-color: var(--color-azul);
}
.btn-success:hover {
  background-color: var(--color-rojo);
  border-color: var(--color-rojo);
}
.btn-danger {
  background-color: var(--color-rojo);
  border-color: var(--color-rojo);
}
.btn-danger:hover {
  background-color: #7a0616;
}

/* Cards */
.card {
  border: none;
}
.card-header {
  background-color: var(--color-azul) !important;
  color: var(--color-blanco) !important;
}
.card-header.bg-secondary {
  background-color: var(--color-rojo) !important;
}

/* Tablas */
.table-dark {
  background-color: var(--color-azul) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-gris) !important;
  color: var(--color-blanco);
}
.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--color-gris-oscuro) !important;
  color: var(--color-blanco);
}

/* Paginación */
.pagination .page-link {
  color: var(--color-azul);
}
.pagination .page-item.active .page-link {
  background-color: var(--color-rojo);
  border-color: var(--color-rojo);
  color: var(--color-blanco);
}



/* Fondo institucional para las fichas */
.bg-especialidad {
    background: var(--color-azul);
    color: var(--color-blanco);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto al pasar el mouse */
.bg-especialidad:hover {
    transform: translateY(-5px);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
}

/* Íconos */
.bg-especialidad i {
    color: #ffcc00; /* Color dorado para contraste */
}

/* Títulos dentro de la ficha */
.bg-especialidad h5 {
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.titulo-institucional {
  color: var(--color-rojo); /* Azul institucional */
}

.subtitulo-institucional {
  color: var(--color-gris-oscuro); /* Azul institucional */
}
.footer {
  background-color: #003366; /* Azul institucional */
  color: #ffffff;
  font-size: 14px;
}

.footer strong {
  color: #ffcc00; /* Ejemplo: color institucional secundario */
}

.footer span {
  font-weight: bold;
}


/* Tarjeta del login */

/* Wrapper para centrar el login */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* altura completa de la pantalla */
    background: linear-gradient(135deg, #003366, #006699);
}

.login-card {
    width: 25rem;
    border-radius: 12px;
    background: #fff;
}

/* Logo */
.logo-container img {
    width: 100px;
    margin-bottom: 10px;
}

/* Título */
.login-title {
    color: #003366;
    font-weight: bold;
}

/* Botón */
.btn-primary {
    background-color: #003366;
    border: none;
}

.btn-primary:hover {
    background-color: #005580;
}