body {
background-color: #f5f5f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.navbar {
background: linear-gradient(135deg, #8B0000, #5a0000);
}
.navbar-brandIcon {
background-color: #DE2910;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
position: relative;
width: 40px;
height: 40px;
margin-right: 12px;
}
.navbar-brandIcon::after {
content: "";
position: absolute;
top: 8px;
left: 12px;
width: 16px;
height: 16px;
background-color: #FFDE00;
border-radius: 50%;
}
.navbar-brandIcon::before {
content: "";
position: absolute;
top: 10px;
left: 28px;
width: 3px;
height: 12px;
background-color: #FFDE00;
transform: rotate(30deg);
}
/* Estilos para los botones de filtro por dinastía */
.btn-xia { background-color: #28a745; color: white; }
.btn-shang { background-color: #fd7e14; color: white; }
.btn-zhou { background-color: #17a2b8; color: white; }
.btn-qin { background-color: #dc3545; color: white; }
.btn-han { background-color: #6c757d; color: white; }
.btn-jin { background-color: #20c997; color: white; }
.btn-sui { background-color: #6f42c1; color: white; }
.btn-tang { background-color: #ffc107; color: #212529; }
.btn-song { background-color: #0dcaf0; color: #212529; }
.btn-yuan { background-color: #d63384; color: white; }
.btn-ming { background-color: #198754; color: white; }
.btn-qing { background-color: #fd7e14; color: white; }
.btn-others { background-color: #6c757d; color: white; }

/* Badges */
.badge-xia { background-color: #28a745; color: white; }
.badge-shang { background-color: #fd7e14; color: white; }
.badge-zhou { background-color: #17a2b8; color: white; }
.badge-qin { background-color: #dc3545; color: white; }
.badge-han { background-color: #6c757d; color: white; }
.badge-jin { background-color: #20c997; color: white; }
.badge-sui { background-color: #6f42c1; color: white; }
.badge-tang { background-color: #ffc107; color: #212529; }
.badge-song { background-color: #0dcaf0; color: #212529; }
.badge-yuan { background-color: #d63384; color: white; }
.badge-ming { background-color: #198754; color: white; }
.badge-qing { background-color: #fd7e14; color: white; }
.badge-others { background-color: #6c757d; color: white; }

.monarch-card {
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.monarch-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Estilos para las miniaturas de avatar */
.monarch-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
alignItems: center;
justify-content: center;
font-size: 2.5rem;
font-weight: bold;
color: white;
flex-shrink: 0;
margin-right: 20px;
}
.avatar-xia { background: linear-gradient(135deg, #28a745, #1e7e34); }
.avatar-shang { background: linear-gradient(135deg, #fd7e14, #e06b0d); }
.avatar-zhou { background: linear-gradient(135deg, #17a2b8, #138496); }
.avatar-qin { background: linear-gradient(135deg, #dc3545, #bd2130); }
.avatar-han { background: linear-gradient(135deg, #6c757d, #495057); }
.avatar-jin { background: linear-gradient(135deg, #20c997, #17a589); }
.avatar-sui { background: linear-gradient(135deg, #6f42c1, #5936a0); }
.avatar-tang { background: linear-gradient(135deg, #ffc107, #e0a800); }
.avatar-song { background: linear-gradient(135deg, #0dcaf0, #0aa2c0); }
.avatar-yuan { background: linear-gradient(135deg, #d63384, #b52b6f); }
.avatar-ming { background: linear-gradient(135deg, #198754, #146c43); }
.avatar-qing { background: linear-gradient(135deg, #fd7e14, #e06b0d); }
.avatar-others { background: linear-gradient(135deg, #6c757d, #495057); }

.monarchInfo-header {
display: flex;
alignItems: center;
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}

.bio-section { margin-bottom: 20px; }
.bio-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 2px solid;
}
.title-xia { border-bottom-color: #28a745; }
.title-shang { border-bottom-color: #fd7e14; }
.title-zhou { border-bottom-color: #17a2b8; }
.title-qin { border-bottom-color: #dc3545; }
.title-han { border-bottom-color: #6c757d; }
.title-jin { border-bottom-color: #20c997; }
.title-sui { border-bottom-color: #6f42c1; }
.title-tang { border-bottom-color: #ffc107; }
.title-song { border-bottom-color: #0dcaf0; }
.title-yuan { border-bottom-color: #d63384; }
.title-ming { border-bottom-color: #198754; }
.title-qing { border-bottom-color: #fd7e14; }
.title-others { border-bottom-color: #6c757d; }

.bio-highlight {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.highlight-xia { border-left-color: #28a745; }
.highlight-shang { border-left-color: #fd7e14; }
.highlight-zhou { border-left-color: #17a2b8; }
.highlight-qin { border-left-color: #dc3545; }
.highlight-han { border-left-color: #6c757d; }
.highlight-jin { border-left-color: #20c997; }
.highlight-sui { border-left-color: #6f42c1; }
.highlight-tang { border-left-color: #ffc107; }
.highlight-song { border-left-color: #0dcaf0; }
.highlight-yuan { border-left-color: #d63384; }
.highlight-ming { border-left-color: #198754; }
.highlight-qing { border-left-color: #fd7e14; }
.highlight-others { border-left-color: #6c757d; }

.bio-stats {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: space-around;
}
.bio-stat {
flex: 1;
min-width: 100px;
text-align: center;
padding: 15px;
border-radius: 8px;
color: white;
}
.stat-xia { background: linear-gradient(135deg, #28a745, #1e7e34); }
.stat-shang { background: linear-gradient(135deg, #fd7e14, #e06b0d); }
.stat-zhou { background: linear-gradient(135deg, #17a2b8, #138496); }
.stat-qin { background: linear-gradient(135deg, #dc3545, #bd2130); }
.stat-han { background: linear-gradient(135deg, #6c757d, #495057); }
.stat-jin { background: linear-gradient(135deg, #20c997, #17a589); }
.stat-sui { background: linear-gradient(135deg, #6f42c1, #5936a0); }
.stat-tang { background: linear-gradient(135deg, #ffc107, #e0a800); }
.stat-song { background: linear-gradient(135deg, #0dcaf0, #0aa2c0); }
.stat-yuan { background: linear-gradient(135deg, #d63384, #b52b6f); }
.stat-ming { background: linear-gradient(135deg, #198754, #146c43); }
.stat-qing { background: linear-gradient(135deg, #fd7e14, #e06b0d); }
.stat-others { background: linear-gradient(135deg, #6c757d, #495057); }
.bio-stat-value {
font-size: 2rem;
font-weight: bold;
line-height: 1.2;
}
.bio-stat-label {
font-size: 0.9rem;
opacity: 0.9;
}

/* Botón volver arriba */
.btn-up {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #8B0000;
color: white;
border: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
display: none;
cursor: pointer;
transition: background-color 0.3s;
z-index: 1000;
}
.btn-up:hover {
background-color: #5a0000;
}
/* Ajustes para el modal */
.modal-header { color: white; }
.bg-xia { background-color: #28a745; }
.bg-shang { background-color: #fd7e14; }
.bg-zhou { background-color: #17a2b8; }
.bg-qin { background-color: #dc3545; }
.bg-han { background-color: #6c757d; }
.bg-jin { background-color: #20c997; }
.bg-sui { background-color: #6f42c1; }
.bg-tang { background-color: #ffc107; }
.bg-song { background-color: #0dcaf0; }
.bg-yuan { background-color: #d63384; }
.bg-ming { background-color: #198754; }
.bg-qing { background-color: #fd7e14; }
.bg-others { background-color: #6c757d; }

/* Responsive para el header del modal */
.monarchInfo-header {
flex-direction: column;
text-align: center;
}
.monarch-avatar {
margin-right: 0;
margin-bottom: 15px;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
@media (min-width: 768px) {
.monarchInfo-header {
flex-direction: row;
text-align: left;
}
.monarch-avatar {
margin-right: 20px;
margin-bottom: 0;
}
}