/* Tipografía y fondo base */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #ffffff;
  color: #0d3b66; /* Azul marino */
}

/* Barra de navegación */
.navbar {
  background-color: #0d3b66;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.navbar-brand,
.nav-link {
  color: #ffffff !important;
  font-weight: 500;
}

/* Título responsivo */
.responsive-title {
  font-size: 1.5rem;
}

@media (max-width: 576px) {
  .responsive-title {
    font-size: 1.1rem;
  }
}



.login-container {
    min-height: 90vh; /* Para centrado vertical */
}

.login-card {
    max-width: 400px;
    width: 100%;
}

/* El tamaño del ícono se maneja con 'fs-1' de Bootstrap, pero si quieres un tamaño específico: */
.login-card .bi {
    font-size: 3rem;
}



/* Campo de búsqueda */
.form-control {
  border: 1px solid #b0c4de;
  border-radius: 0.375rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease;
}

.form-control:focus {
  border-color: #5dade2;
  box-shadow: 0 0 0 0.2rem rgba(93, 173, 226, 0.25);
}

/* Botón de búsqueda responsivo */
.btn-sm-responsive {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

@media (max-width: 576px) {
  .btn-sm-responsive {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* Botón de búsqueda estilo */
.btn-outline-light {
  color: #ffffff;
  border-color: #ffffff;
}

.btn-outline-light:hover {
  background-color: #5dade2;
  border-color: #5dade2;
  color: #ffffff;
}

/* Autocompletado */
.autocomplete-items {
  position: absolute;
  border: 1px solid #d6eaf8;
  border-top: none;
  z-index: 99;
  background-color: #ffffff;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  color: #0d3b66;
  border-bottom: 1px solid #f0f0f0;
}

.autocomplete-items div:hover {
  background-color: #eaf2f8;
}

/* Dropdown menú */
.dropdown-menu {
  background-color:#bde5ff;
}

/* Botones DataTables en outline con fondo blanco */
.dt-button.btn {
    background-color: #fff !important;   /* blanco */
    border-color: #0d6efd !important;    /* azul Bootstrap */
    color: #0d6efd !important;
}

/* Al pasar el mouse */
.dt-button.btn:hover {
    background-color: #b0c4de!important; /* transparente */
    color: #ffffff !important;                /* azul más oscuro */
}
/* Ajuste responsivo del título en la navbar */
.responsive-title {
  font-size: 1.25rem; /* tamaño base */
  font-weight: 600;
  white-space: nowrap; /* evita cortes raros */
}

/* Pantallas medianas (tablets) */
@media (max-width: 768px) {
  .responsive-title {
    font-size: 1.1rem;
  }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 576px) {
  .responsive-title {
    font-size: 1rem;
    text-align: center;
    display: block;
    margin: 0 auto;
  }
}
/* Ajuste general del buscador */
#searchForm .form-control {
  min-width: 220px; /* tamaño base en desktop */
}

/* Pantallas medianas (tablets) */
@media (max-width: 768px) {
  #searchForm {
    width: 100%;
    margin-top: 0.5rem;
  }
  #searchForm .form-control {
    min-width: 160px;
  }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 576px) {
  #searchForm {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 0.5rem;
  }
  #searchForm .input-group {
    width: 100%;
  }
  #searchForm .form-control {
    width: 100%;
    min-width: auto;
    margin-bottom: 0.5rem;
  }
  #searchForm .btn {
    width: 100%;
  }
}

/* Ajuste general del dropdown */
.navbar .dropdown-menu {
  font-size: 0.95rem;
  min-width: 180px;
}

/* Pantallas medianas (tablets) */
@media (max-width: 768px) {
  .navbar .dropdown-menu {
    font-size: 1rem;
    min-width: 100%;
    margin-top: 0.5rem;
  }
  .navbar .dropdown-item {
    padding: 0.75rem 1rem;
  }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 576px) {
  .navbar .dropdown-menu {
    width: 100%;
    text-align: left;
    border-radius: 0;
    margin-top: 0.5rem;
  }
  .navbar .dropdown-item {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
  }
  .navbar .dropdown-divider {
    margin: 0.5rem 0;
  }
}


/* Contenedor balanceado */
.header-pacientes {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Cada bloque ocupa 50% */
.header-pacientes > div {
  flex: 1 1 50%;
}

/* Ajustes en móviles */
@media (max-width: 576px) {
  .header-pacientes h5 {
    font-size: 1rem;
  }
  .header-pacientes .btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
  }
}




/* Botón principal como outline y texto alineado a la izquierda */
.btn-success {
  background-color: transparent;   /* fondo transparente */
  border: 2px solid #198754;       /* borde verde */
  color: #198754;                  /* texto verde */
  font-weight: 600;
  text-align: center;                /* texto alineado alcentro*/
  padding-left: 2rem;              /* espacio para la alineación */
}

.btn-success:hover {
  background-color: #198754;       /* al pasar el mouse, fondo verde */
  color: #fff;                     /* texto blanco */
  border-color: #146c43;           /* borde más oscuro */
}

/* En pantallas pequeñas, el botón ocupa todo el ancho */
@media (max-width: 576px) {
  .btn-success {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    text-align: left; /* mantiene alineación izquierda */
  }
}

/* Botones dentro de la tabla más compactos */
.table .btn {
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
}

/* Feedback visual al seleccionar fila */
.table-hover tbody tr:hover {
  background-color: #f1f5f9;
  cursor: pointer;
}
.table-active {
  background-color: #e2e6ea !important;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .table .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
  }
  .d-flex.justify-content-center.gap-2 {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Ajustes responsivos alta en nuevo_paciente */
/* --- Estilos para validación y UX en nuevo_paciente.pl --- */

.input-error {
  border: 2px solid red !important;
  background-color: #ffe6e6;
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 1rem;
  border-top: 1px solid #ddd;
}

.alert-dismissible .btn-close {
  position: absolute;
  right: 1rem;
  top: 0.75rem;
}