@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;
}

/* Onboarding paso 0 (RGPD): checkbox tamaño estándar (~16px), alineado con el texto */
.onboarding-rgpd-consent.form-check {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 0;
    min-height: 0;
}

.onboarding-rgpd-consent .form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
    margin-left: 0;
    flex-shrink: 0;
    float: none;
    cursor: pointer;
    border-radius: 0.2em;
}

.onboarding-rgpd-consent .form-check-label {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding-left: 0;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.4;
    font-size: 0.9375rem;
}

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 */
}

/* Mensajes de sistema: mismo ancho que container-xl (alineado con cards / charts) */
.app-page-flashes .alert {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Espacio bajo el menú y entre avisos y bloque de cards (el col-12 quedó pegado al nav al anidar flashes) */
.app-page-main-wrap > .row > .app-page-main-col {
    padding-top: var(--tblr-page-padding-y, 1.25rem);
}

.container-xl.app-page-flashes {
    padding-top: 0.25rem;
    padding-bottom: 0;
    margin-bottom: 1.25rem;
}

/* 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;
}

/* Login / forgot password: margen superior explícito (≥100px) respecto al borde del área de contenido */
.login-auth-stack {
    padding-top: 100px;
    box-sizing: border-box;
}

/* Onboarding embudo: sin cabecera; misma anchura mínima en todos los pasos */
.onboarding-funnel-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(76vh, calc(100vh - 5rem));
}

/* Columna común: flashes + card comparten el mismo ancho que el welcome (42rem) */
.onboarding-funnel-stack {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Avisos en la columna del embudo (incl. encima de la card): ancho completo del stack */
.onboarding-funnel-stack .alert {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Cerrar (X) centrado en la franja vertical del aviso — el padding pequeño desalineaba el btn-close de Bootstrap */
.onboarding-funnel-stack .onboarding-funnel-flash .alert-dismissible {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 2.5rem;
}

.onboarding-funnel-stack .onboarding-funnel-flash .alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0.25rem;
}

/* Flash de éxito en embudo: mismo ancho que la card; tipografía reducida ~50% */
.onboarding-funnel-stack .onboarding-funnel-flash .alert-success {
    --onboarding-success-base: 1.75rem;
    text-align: center;
    font-size: calc(var(--onboarding-success-base) * 0.5);
    line-height: 1.35;
    padding: 0.35rem 0.75rem;
    padding-right: 2.5rem;
}

/* Card interior: ocupa el 100% del stack (sin segundo max-width) */
.onboarding-funnel-stack > .card.onboarding-funnel-card {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* También login / recuperación que reutilizan el stack */
.card.onboarding-funnel-card {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.onboarding-funnel-card .login-logo {
    max-height: 3.75rem;
    width: auto;
}

/* Login: formulario a todo el ancho de la card (no el max-width estrecho de .login-form) */
.login-form-on-card {
    width: 100%;
}

/* 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%;
}

/* Días laborables: tercera línea, todos visibles en fila (con wrap en pantallas estrechas) */
.form-oficina .working-days-checkboxes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1.25rem;
    margin-top: 0.25rem;
}

/* Symfony tema por defecto: cada opción es un div > input + label (sin .form-check).
   Bootstrap/Tabler: div.form-check. Cubrimos ambos. */
.form-oficina .working-days-checkboxes > div,
.form-oficina .working-days-checkboxes .form-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-height: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-left: 0;
}

/* Mismo criterio visual que perfil (alertCritical, etc.): .form-check-input + regla global :checked */
.form-oficina .working-days-checkboxes input[type="checkbox"],
.form-oficina .working-days-checkboxes .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}

.form-oficina .working-days-checkboxes .form-check-label,
.form-oficina .working-days-checkboxes .form-check label,
.form-oficina .working-days-checkboxes > div > label {
    margin-bottom: 0;
    padding-left: 0;
    cursor: pointer;
    font-weight: 500;
}

/* Google Places: sugerencias sobre cards/modales (widget externo, mismo criterio en onboarding paso 1) */
.pac-container {
    z-index: 10000 !important;
}

/* 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;
}