@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

:root {
    --color-primary: #7C3030;
    /* Rojo Sensoria */
    --color-secondary: #4a5568;
    /* Gris Oscuro */
    --color-success: #2d5a3d;
    /* Verde Oscuro */
    --color-notrust: #bdbdbd;
    /* Gris No Confiable */
    --color-alert-blue: #4e5f7a;
    /* Azul/Gris Alerta */
}

a {
    color: var(--color-primary);
}

a:hover {
    color: #5a2424;
    text-decoration: none;
}

.nav-bordered .nav-link.active {
    border-color: #7C3030 !important;
    color: #666666;
}

.nav-font {
    font-family: 'Ubuntu', 'Open Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 0.8rem;
}

/* ai-dash */

/* Fuente Ubuntu para todos los titulares */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Ubuntu', 'Open Sans', sans-serif;
}

/* Cards con más redondez */
.card {
    border-radius: 0.6rem;
}

/* Leyendas de gráficos con bordes redondeados */
canvas+ul li span,
.chartjs-legend span {
    border-radius: 3px;
}

/* Alineación vertical de cards header */
.card-sensor-info,
.card-reporte {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-reporte .form-label {
    margin-bottom: 0;
    font-weight: bold;
}

.card-reporte select {
    padding-left: 0;
}

.row-deck .card-body h2,
.row-deck .card-body h3 {
    font-size: 22px;
    text-align: center;
}

/* Alinear título patrones semanales */
.col-8 .card-body h2 {
    text-align: left;
    margin-left: -0.75rem;
}

/* Datos numéricos de tendencias (CO2, Temp, Humedad) */
.col-2 .card-body h1 {
    font-size: 2.6rem;
    color: #767676;
}

.col-2 .card-body h4 {
    text-align: center;
}

.col-2 .card-body h1 .icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0.625rem;
}

/* Texto de variabilidad/impacto en cards de tendencia */
.col-2 .card-body small {
    font-size: 0.875rem;
    /* 14px */
}

.h1_beneficios {
    font-size: 3rem;
    margin-top: 2rem;
    text-align: center;
    color: #767676;
}

.row_title {
    margin: 2rem;
    margin-left: 0 !important;
}

.row_title h2 {
    font-size: 1.5rem;
}

/* Flash messages / Alertas del sistema */
.alert-danger {
    background-color: var(--color-primary) !important;
    border-left-color: #4a1c1c !important;
    color: #fff !important;
}

.alert-danger h4,
.alert-danger p {
    color: #fff;
}

.alert-warning {
    background-color: var(--color-alert-blue) !important;
    border-left-color: #2f3a4a !important;
    color: #fff !important;
}

.alert-warning h4,
.alert-warning p {
    color: #fff;
}

.alert-success {
    background-color: var(--color-success) !important;
    border-left-color: #1a3624 !important;
    color: #fff !important;
}

.alert-success h4,
.alert-success p {
    color: #fff;
}

/* Índice de bienestar */
.indice-bienestar {
    font-size: 2.5rem;
}

/* Separación predicciones 30 días */
.predicciones-30 {
    margin-top: 1.5625rem;
}

/* Gráfico distribución de confianza */
.chart-confianza {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-confianza canvas {
    transform: scale(0.65);
    transform-origin: center top;
    margin-top: 1.5625rem;
}

/* Alertas */
.alert-red {
    color: #a81c1c;
    border-left-color: #a81c1c;
}

.alert-red strong {
    font-weight: 600;
}

/* Critical Alert - confiable */
.alert-critical {
    background-color: rgba(124, 48, 48, 0.1);
    border-left-color: #7c3030 !important;
    color: #7c3030;
}

.alert-critical strong {
    font-weight: 600;
}

/* Critical Alert - Prioridad 1 */
.alert-danger strong,
.alert-danger p {
    font-weight: 600;
}

/* Estilos del navbar activo */
:root {
    --tblr-navbar-active-border-color: #7C3030 !important;
}

.navbar-expand-md .nav-item.active:after {
    border-color: #7C3030 !important;
}

.navbar-nav .nav-link {
    font-weight: 500;
}

/* Profile page styles */
.profile-page-content {
    margin-top: 1.875rem;
    /* 30px */
}

.profile-card {
    padding: 1.5625rem;
    /* 25px */
}

.profile-card .form-control {
    width: 100%;
}

.profile-card .row {
    margin-top: 1rem;
}

.profile-card .row:first-child {
    margin-top: 0;
}

.profile-card .form-label-col {
    margin-top: 1rem;
}

.profile-alerts-section {
    margin-top: 0.6rem;
}

.btn-default {
    background-color: #7C3030 !important;
    border-color: #7C3030 !important;
    color: #fff !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default.active {
    background-color: #5a2424 !important;
    border-color: #5a2424 !important;
    color: #fff !important;
}

.btn-update-profile:hover {
    background-color: #5a2424;
    border-color: #5a2424;
    color: #fff;
}

.profile-card label {
    font-weight: 500;
}

.form-control.profile-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-check-input:checked {
    background-color: #8a97ab !important;
    border-color: #8a97ab !important;
}

label {
    font-weight: 500;
}

/* Viene de #76 */

/* Texto de variabilidad/impacto en cards de tendencia */
.col-2 .card-body small {
    font-size: 0.875rem;
    /* 14px */
}

/* Login page */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.login-form {
    width: 100%;
    max-width: 20rem;
    /* 20% más pequeño que antes */
}

.login-form .form-control {
    width: 100%;
    margin-bottom: 0.5rem;
}

.login-form .btn-default {
    width: 100%;
}

.login-form .checkbox {
    margin-top: 1rem;
}

/* Navbar alignment with body content */
header.navbar-expand-md .navbar .container-xl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

header.navbar-expand-md .navbar .navbar-nav {
    padding-left: 0;
}

/* Página de administración de oficinas */
.office-admin-title {
    margin-top: 0.5rem;
}

.office-admin-title--edit {
    margin-top: 1.5rem;
}

/* Formulario de oficina */
.btn-oficina-submit {
    margin-top: 0;
    width: 100%;
}

/* Card title más cerca de los campos */
.form-oficina .card-title {
    margin-bottom: 0;
}

/* Margin top para campos del formulario de oficina */
.form-oficina-fields {
    margin-top: 0.9375rem;
    /* 15px */
}

.form-oficina-fields:first-child {
    margin-top: 0;
}

/* Campos del formulario de oficina al 100% */
.form-oficina .form-control {
    width: 100%;
}

/* Botones de oficinas - cubren espacio restante */
.btn-office {
    flex: 1;
}

.office-buttons {
    display: flex;
    gap: 0.5rem;
}

/* AI Dashboard - sin margin top en page-body */
.ai-dash-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Nav tabs (Report | Sensor logs) */
.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-item {
    border-right: 1px solid #dee2e6;
}

.nav-tabs .nav-item:last-child {
    border-right: none;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    border: none;
    color: #7C3030 !important;
}

.nav-tabs .nav-link.active {
    border: none;
    background-color: transparent;
}

/* Streaming dashboard */
.streaming-title {
    font-size: 24px;
}

.streaming-chart-card {
    height: 20rem;
}

.streaming-batt-card {
    height: 10rem;
}

.streaming-row-spacer {
    height: 1.5rem;
}

/* Dify Chatbot */
#dify-chatbot-bubble-button {
    background-color: #7C3030 !important;
    width: 60px !important;
    height: 60px !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(124, 48, 48, 0.4) !important;
}

#dify-chatbot-bubble-button:hover {
    background-color: #466395 !important;
    box-shadow: 0 6px 16px rgba(70, 99, 149, 0.5) !important;
}

#dify-chatbot-bubble-button svg {
    width: 28px !important;
    height: 28px !important;
    fill: #fff !important;
}

#dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
    position: fixed !important;
    bottom: 50px !important;
    right: 20px !important;
}

/* --- CLASES UTILITARIAS DASHBOARD (Surgical Refactor) --- */
.dash-h-header {
    height: 4rem;
}

.dash-h-benefit {
    height: 8.75rem;
}

.dash-h-chart-lg {
    height: 22rem;
}

.dash-h-chart-md {
    height: 20rem;
}

.dash-mb-lg {
    margin-bottom: 4rem;
}

.dash-mb-md {
    margin-bottom: 2rem;
}

.dash-mt-ai {
    margin-top: 1.5rem;
}

.dash-ml-aligned {
    margin-left: 1rem;
}