html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Esquema de colores personalizado ICARUS */
:root {
  --icarus-primary: #2E86AB;
  --icarus-secondary: #A23B72;
  --icarus-accent: #F18F01;
  --icarus-light: #E8F4FD;
  --icarus-dark: #1A4B66;
  --icarus-success: #28A745;
  --icarus-info: #17A2B8;
  --icarus-warning: #FFC107;
  --icarus-danger: #DC3545;
}

/* Navbar personalizada */
.navbar-custom {
  background-color: var(--icarus-primary);
  border-bottom: 3px solid var(--icarus-accent);
  box-shadow: 0 2px 10px rgba(46, 134, 171, 0.3);
  padding: 0.75rem 1rem;
}

.navbar-custom .navbar-brand {
  color: white !important;
  font-weight: 600;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
}

.navbar-custom .navbar-brand:hover {
  color: var(--icarus-accent) !important;
}

.navbar-custom .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  padding: 0.75rem 1rem !important;
  border-radius: 6px;
  margin: 0 2px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.navbar-custom .nav-link:hover {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.navbar-custom .nav-link.active {
  color: var(--icarus-accent) !important;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Botón toggler personalizado para móviles */
.navbar-custom .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.375rem 0.5rem;
}

.navbar-custom .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Estilos responsivos para el navbar */
@media (max-width: 991.98px) {
  .navbar-custom .navbar-collapse {
    background-color: var(--icarus-primary);
    border-radius: 8px;
    margin-top: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .navbar-custom .navbar-nav {
    width: 100%;
  }

  .navbar-custom .nav-item {
    margin: 0.25rem 0;
  }

  .navbar-custom .nav-link {
    padding: 0.75rem 1rem !important;
    border-radius: 6px;
    margin: 0.1rem 0;
    display: block;
  }

  /* Asegurar que los elementos de usuario sean visibles en móviles */
  .navbar-nav.ms-auto {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Estilos específicos para el botón de cerrar sesión en móviles */
  .navbar-custom .btn-link {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.75rem 1rem !important;
    border: none;
    border-radius: 6px;
    margin: 0.1rem 0;
    text-align: left;
    width: 100%;
    display: block;
  }

  .navbar-custom .btn-link:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.15);
  }
}

/* Headers de tablas personalizados */
.table-header-custom {
  background-color: var(--icarus-primary);
  color: white;
  font-weight: 600;
  border: none;
}

.table-header-custom th {
  border-top: none;
  border-bottom: 2px solid var(--icarus-accent);
  padding: 1rem 0.75rem;
  vertical-align: middle;
}

.table-header-custom th a {
  color: white !important;
  text-decoration: none;
}

.table-header-custom th a:hover {
  color: var(--icarus-accent) !important;
}

/* Tarjetas personalizadas */
.card-custom {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(46, 134, 171, 0.1);
  overflow: hidden;
}

.card-header-custom {
  background-color: var(--icarus-primary);
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
}

.card-header-custom h5 {
  margin: 0;
  font-size: 1.1rem;
}

/* Headers de estado */
.card-header-active {
  background-color: var(--icarus-success);
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
}

.card-header-inactive {
  background-color: var(--icarus-secondary);
  color: white;
  border: none;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
}

/* Botones personalizados */
.btn-icarus {
  background-color: var(--icarus-primary);
  border: none;
  color: white;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-icarus:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(46, 134, 171, 0.4);
  color: white;
}

.btn-icarus-outline {
  border: 2px solid var(--icarus-primary);
  color: var(--icarus-primary);
  background: transparent;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-icarus-outline:hover {
  background: var(--icarus-primary);
  color: white;
  transform: translateY(-1px);
}

/* Botones de acción personalizados */
.btn-icarus-success {
  background-color: var(--icarus-success);
  border: none;
  color: white;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-icarus-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
  color: white;
}

.btn-icarus-warning {
  background-color: var(--icarus-warning);
  border: none;
  color: white;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-icarus-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
  color: white;
}

.btn-icarus-danger {
  background-color: var(--icarus-danger);
  border: none;
  color: white;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-icarus-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
  color: white;
}

/* Jumbotron personalizado */
.jumbotron-custom {
  background-color: var(--icarus-light);
  border: none;
  border-radius: 15px;
  color: var(--icarus-dark);
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(46, 134, 171, 0.1);
}

.jumbotron-custom h1 {
  color: var(--icarus-primary);
  font-weight: 700;
}

/* Alertas personalizadas */
.alert-icarus {
  background-color: var(--icarus-light);
  border: 1px solid var(--icarus-primary);
  border-radius: 10px;
  color: var(--icarus-dark);
}

.alert-icarus-success {
  background-color: rgba(40, 167, 69, 0.1);
  border: 1px solid var(--icarus-success);
  border-left: 4px solid var(--icarus-success);
  border-radius: 10px;
  color: var(--icarus-success);
  font-weight: 500;
}

.alert-icarus-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border: 1px solid var(--icarus-danger);
  border-left: 4px solid var(--icarus-danger);
  border-radius: 10px;
  color: var(--icarus-danger);
  font-weight: 500;
}

.alert-icarus-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border: 1px solid var(--icarus-warning);
  border-left: 4px solid var(--icarus-warning);
  border-radius: 10px;
  color: #856404;
  font-weight: 500;
}

.alert-icarus-info {
  background-color: rgba(46, 134, 171, 0.1);
  border: 1px solid var(--icarus-primary);
  border-left: 4px solid var(--icarus-primary);
  border-radius: 10px;
  color: var(--icarus-primary);
  font-weight: 500;
}

/* Pestañas (Nav Tabs) personalizadas */
.nav-tabs {
  border-bottom: 2px solid var(--icarus-light);
  margin-bottom: 1rem;
}

.nav-tabs .nav-link {
  color: var(--icarus-dark) !important;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 8px 8px 0 0;
}

.nav-tabs .nav-link:hover {
  color: var(--icarus-primary);
  background-color: var(--icarus-light);
  border-color: var(--icarus-light);
  transform: translateY(-2px);
}

.nav-tabs .nav-link.active {
  color: white !important;
  background-color: var(--icarus-primary) !important;
  border-color: var(--icarus-primary) !important;
  border-bottom-color: var(--icarus-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(46, 134, 171, 0.3);
}

.nav-tabs .nav-link.active:hover {
  color: white !important;
  background-color: var(--icarus-primary) !important;
}

/* Pestañas en headers de cards */
.card-header-tabs {
  margin-bottom: 0;
  border-bottom: none;
}

.card-header-tabs .nav-link {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-right: 0.25rem;
}

.card-header-tabs .nav-link:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.card-header-tabs .nav-link.active {
  color: var(--icarus-primary) !important;
  background-color: white !important;
  border-color: white !important;
  font-weight: 600;
}

.card-header-tabs .nav-link.active:hover {
  color: var(--icarus-primary) !important;
  background-color: white !important;
}

/* Footer personalizado */
.footer-custom {
  background-color: var(--icarus-dark);
  color: white;
  padding: 3rem 0 2rem 0;
}

.footer-custom a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-custom a:hover {
  color: var(--icarus-accent);
}

/* Tablas con estilo mejorado */
.table-custom {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(46, 134, 171, 0.1);
}

.table-custom tbody tr:hover {
  background-color: rgba(46, 134, 171, 0.05);
}

.table-custom td {
  vertical-align: middle;
  border-color: rgba(46, 134, 171, 0.1);
}

/* Badges personalizados */
.badge-icarus {
  background: var(--icarus-primary);
  color: white;
  font-weight: 500;
}

.badge-icarus-outline {
  border: 1px solid var(--icarus-primary);
  color: var(--icarus-primary);
  background: transparent;
}

/* Background classes para badges */
.bg-icarus-primary {
  background-color: var(--icarus-primary) !important;
  color: white !important;
}

.bg-icarus-success {
  background-color: var(--icarus-success) !important;
  color: white !important;
}

.bg-icarus-muted {
  background-color: #6c757d !important;
  color: white !important;
}

.bg-icarus-secondary {
  background-color: var(--icarus-secondary) !important;
  color: white !important;
}

.bg-icarus-info {
  background-color: var(--icarus-info) !important;
  color: white !important;
}

.bg-icarus-warning {
  background-color: var(--icarus-warning) !important;
  color: white !important;
}

.bg-icarus-danger {
  background-color: var(--icarus-danger) !important;
  color: white !important;
}

/* Texto y fondos personalizados */
.text-icarus-muted {
  color: rgba(46, 134, 171, 0.7) !important;
  font-weight: 400;
}

.bg-icarus-light {
  background-color: var(--icarus-light) !important;
  color: var(--icarus-dark);
}

.text-icarus-primary {
  color: var(--icarus-primary) !important;
}

.text-icarus-secondary {
  color: var(--icarus-secondary) !important;
}

.border-icarus {
  border-color: var(--icarus-primary) !important;
}

/* Formularios personalizados */
.form-control:focus {
  border-color: var(--icarus-primary);
  box-shadow: 0 0 0 0.2rem rgba(46, 134, 171, 0.25);
}

.form-select:focus {
  border-color: var(--icarus-primary);
  box-shadow: 0 0 0 0.2rem rgba(46, 134, 171, 0.25);
}

/* Icono personalizado ICARUS */
.icarus-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  vertical-align: -0.125em;
  margin-right: 0.5rem;
}

.icarus-icon-small {
  width: 1em;
  height: 1em;
  margin-right: 0.3rem;
}

.icarus-icon-large {
  width: 2em;
  height: 2em;
  margin-right: 0.75rem;
}

/* Estilos responsive para DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length select {
  min-width: 70px;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--icarus-primary);
  border-radius: 4px;
  padding: 0.375rem 0.75rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--icarus-primary);
  box-shadow: 0 0 0 0.2rem rgba(46, 134, 171, 0.25);
  outline: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.375rem 0.75rem;
  margin-left: 2px;
  border: 1px solid var(--icarus-primary);
  border-radius: 4px;
  color: var(--icarus-primary) !important;
  background: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--icarus-primary) !important;
  color: white !important;
  border-color: var(--icarus-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--icarus-primary) !important;
  color: white !important;
  border-color: var(--icarus-primary);
}

/* Responsive DataTables */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.control:before {
  background-color: var(--icarus-primary);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 3px #444;
  color: white;
  content: '+';
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
  font-weight: bold;
  height: 1.5em;
  left: 50%;
  line-height: 1em;
  margin-left: -0.75em;
  margin-top: -0.75em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 1.5em;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.control:before {
  content: '-';
  background-color: var(--icarus-danger);
}

@media screen and (max-width: 767px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center;
    margin-bottom: 1rem;
  }

  .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
  }

  .table-responsive {
    border: none;
  }

  /* Ocultar columnas menos importantes en móviles */
  table.dataTable tbody td.child {
    padding-left: 1rem;
    border-top: 1px solid var(--icarus-primary);
    background-color: var(--icarus-light);
  }

  table.dataTable tbody td.child ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  table.dataTable tbody td.child ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(46, 134, 171, 0.1);
  }

  table.dataTable tbody td.child ul li:last-child {
    border-bottom: none;
  }
}

/* Mejorar la visualización de la información expandida */
table.dataTable.dtr-inline.collapsed > tbody > tr.child {
  background-color: var(--icarus-light);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.child td {
  padding-left: 2rem;
  border-top: 1px solid var(--icarus-primary);
}

/* Mejoras adicionales de responsividad para las cards del home */
@media (max-width: 767.98px) {
  /* Cards en móviles */
  .card {
    margin-bottom: 1.5rem;
  }

  .jumbotron-custom {
    padding: 2rem 1rem;
    text-align: center;
  }

  .jumbotron-custom h1 {
    font-size: 2rem;
  }

  .jumbotron-custom .icarus-icon-large {
    width: 60px;
    height: 60px;
  }

  /* Mejorar espaciado en móviles */
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Cards responsivas */
  .card-body {
    padding: 1rem;
  }

  .btn {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Estilos específicos para las vistas de ProgramaVacunacion */
.info-card {
  background: linear-gradient(135deg, var(--icarus-light) 0%, #f8f9fa 100%);
  border-left: 4px solid var(--icarus-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.info-card .card-header {
  background: var(--icarus-primary);
  color: white;
  font-weight: 600;
  border-radius: 0.375rem 0.375rem 0 0;
}

.stats-card {
  background: linear-gradient(135deg, var(--icarus-accent) 0%, #e3f2fd 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(25, 118, 210, 0.15);
}

.stats-card .card-header {
  background: var(--icarus-secondary);
  color: white;
  font-weight: 600;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--icarus-primary);
  margin-bottom: 0;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--bs-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.items-table {
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.items-table th {
  background: var(--icarus-light);
  color: var(--icarus-dark);
  font-weight: 600;
  border: none;
  padding: 1rem 0.75rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.items-table td {
  padding: 0.75rem;
  vertical-align: middle;
  border-color: var(--bs-gray-200);
}

.badge-programa {
  background: linear-gradient(45deg, var(--icarus-primary), var(--icarus-secondary));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-floating label {
  color: var(--icarus-primary);
}

.form-floating > .form-control:focus ~ label {
  color: var(--icarus-secondary);
}

.character-counter {
  font-size: 0.875rem;
  color: var(--bs-gray-600);
  text-align: right;
  margin-top: 0.25rem;
}

.character-counter.warning {
  color: var(--bs-warning);
}

.character-counter.danger {
  color: var(--bs-danger);
}

/* Estilos para cards de peligro */
.card-danger {
  border: 2px solid var(--bs-danger);
  box-shadow: 0 4px 20px rgba(220, 53, 69, 0.15);
}

.card-danger .card-header {
  background: var(--bs-danger);
  color: white;
  font-weight: 600;
}

.alert-danger-custom {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border-left: 4px solid var(--bs-danger);
  color: #721c24;
  padding: 1rem 1.5rem;
}

/* Estilos para pantallas medianas */
@media (min-width: 768px) and (max-width: 991.98px) {
  .jumbotron-custom h1 {
    font-size: 2.5rem;
  }

  .card-body {
    min-height: 200px;
  }
}

/* Estilos para tarjetas de estadísticas */
.stats-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(46, 134, 171, 0.1);
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(46, 134, 171, 0.2);
}

.stats-card .card-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0;
}

.stats-card .card-text {
  font-size: 0.9rem;
  opacity: 0.9;
}

.stats-card i {
  opacity: 0.8;
}

/* Estilos para filas de tabla desactivadas */
.table-secondary {
  opacity: 0.7;
}

/* Estilos para badges grandes */
.badge-lg {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

/* Estilos para header de card con herramientas */
.card-header-custom .badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
}

/* Estilos para grupos de botones de acción */
.btn-group .btn {
  margin-right: 2px;
}

.btn-group .btn:last-child {
  margin-right: 0;
}

/* Estilos para dropdown items con iconos */
.dropdown-menu .dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Estilos para tablas */
.table th {
  border-top: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.table td {
  vertical-align: middle;
  font-size: 0.875rem;
}

/* Estilos para avatares pequeños */
.avatar-sm {
  width: 40px;
  height: 40px;
  font-size: 14px;
}