/* ============================================
   BINAS CUSTOM STYLES
   Estilos personalizados específicos del proyecto BINAS
   
   ⚠️ IMPORTANTE: Variables movidas a design-tokens.css
   Este archivo ahora SOLO contiene estilos custom del proyecto.
   Las variables CSS se cargan desde design-tokens.css.
   
   NO definir variables :root en este archivo.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* ============================================
   LAYOUT CONTAINER OVERRIDES
   ============================================ */

/* Ocultar visualmente el elemento .card-container */
.card-container, .card-container .card-header, .card-container .card-body {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Asegurar que los elementos hijos no hereden estilos de card */
.card-container > * {
background-color: transparent !important;
}

/* Ocultar sombras y bordes de todos los elementos card dentro de card-container */
.card-container.card {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ============================================
   SCROLL CONFIGURATION
   Configuración para scroll único en la página - DESHABILITADO
   ⚠️ ESTAS REGLAS CAUSABAN CONFLICTOS CON EL NUEVO SISTEMA DE LAYOUT
   ============================================ */
/* html {
    height: 100%;
} */

/* ⚠️ COMENTADO: Causaba que el header zone desapareciera */
/* body {
    height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 4em;
    color: var(--outlook-text-primary);
    font-family: var(--font-primary);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-light);
    font-style: normal;
    background-color: var(--bg-base);
} */

/* ✅ Versión corregida sin padding-top y sin flex */
body {
    overflow-x: hidden;
    color: var(--outlook-text-primary);
    font-family: var(--font-primary);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-normal);
    font-style: normal;
    background-color: var(--bg-base);
}

/* Header fijo en la parte superior */
body > nav,
body > .header-style,
.topMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
}

/* ⚠️ COMENTADO: Conflictos con binas-main-wrapper */
/* .body-container {
    flex: 1;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 8em);
} */

/* Remover scroll del card-body */
.card-container .card-body {
    max-height: none !important;
    height: auto !important;
}

/* Footer fijo en la parte inferior */
.app-footer {
    height: 8em;
    z-index: var(--z-fixed);
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    border-top: 3px solid var(--binas-yellow);
    width: 100vw !important;
    left: 0;
    position: absolute;
}

/* ============================================
   CUSTOM FONT FACES
   ============================================ */
@font-face {
    font-family: 'ProximaNova';
    src: url("../../fonts/ProximaNova/ProximaNova-Regular.otf") format("opentype");
}

@font-face {
    font-family: 'ProximaNova';
    font-weight: bold;
    src: url("../../fonts/ProximaNova/ProximaNova-Bold.otf") format("opentype");
}

@font-face {
  font-family: 'ProximaNova';
    font-weight: 600;
    src: url("../../fonts/ProximaNova/ProximaNova-Semibold.otf") format("opentype");
}

/* ============================================
   HEADER & NAVIGATION STYLES
   ============================================ */
.home-card .custom-shadow {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00)
}

.topMenu {
    border-bottom: 3px solid var(--binas-yellow);
}

body .header-style {
    top: -5px;
    height: 3em;
    z-index: 1021;
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */
.bg-grey {
    background-color: var(--outlook-bg-secondary) !important;
}

.bg-grey-2 {
    background-color: var(--outlook-bg-tertiary) !important;
}

.bg-grey-3 {
    background-color: var(--outlook-bg-pressed) !important;
}

.bg-grey-4 {
    background-color: var(--outlook-bg-hover) !important;
}

.bg-grey-5 {
    background-color: var(--outlook-border-hover, #B5B0AB) !important;
}

/* ============================================
   SPEECH BUBBLES
   ============================================ */
.speech-bubble {
 background-color: rgba(0, 90, 241, 0.2) !important;
}

.speech-bubble-own {
    background-color: var(--outlook-bg-pressed) !important;
}

/* ============================================
   SURVEY TABS
   ============================================ */
#survey-tabs .nav-link.rounded-pill {
    background-color: var(--bs-white);
    color: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
}

#survey-tabs .nav-link.rounded-pill.active {
    background-color: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-bg-subtle) !important;
}

#survey-tabs .nav-link.rounded-pill .badge {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    background-color: var(--bs-gray-500) !important;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

#survey-tabs .nav-link.rounded-pill.active .badge {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

/* ============================================
   PAGE NAVIGATION
   ============================================ */
#nav-pages .nav-link.rounded-pill, #nav-pages .nav-link.rounded-pill {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    background-color: var(--bs-white);
  color: var(--bs-success) !important;
    border: 1px solid var(--bs-success) !important;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.95rem;
}

#nav-pages .nav-link.rounded-pill.active {
    background-color: var(--bs-success-bg-subtle);
}

#nav-pages .nav-link.rounded-pill .badge {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    background-color: var(--bs-gray-500) !important;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

#nav-pages .nav-link.rounded-pill.active .badge {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

/* ============================================
   GROUP NAVIGATION
   ============================================ */
#nav-groups .nav-link.rounded-pill {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    background-color: var(--bs-white);
    color: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.95rem;
}

#nav-groups .nav-link.rounded-pill.active {
    background-color: var(--bs-primary-bg-subtle);
}

#nav-groups .nav-link.rounded-pill .badge {
    --bs-bg-opacity: 1;
  --bs-text-opacity: 1;
    background-color: var(--bs-gray-500) !important;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

#nav-groups .nav-link.rounded-pill.active .badge {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

#nav-groups .dropdown-menu .dropdown-item {
    color: var(--bs-primary);
}

#nav-groups .dropdown-menu .dropdown-item.active, 
#nav-groups .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-primary-bg-subtle);
}

#nav-pages .dropdown-menu .dropdown-item {
    color: var(--bs-success);
}

#nav-pages .dropdown-menu .dropdown-item.active, 
#nav-pages .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-success-bg-subtle);
}

/* ============================================
   ACTIVITY CARDS
   ============================================ */
.activity-card .rounded-12 {
    background-color: var(--bs-tertiary-bg) !important;
    overflow: hidden;
}

/* ============================================
   TABLE STYLES
   ============================================ */
tr.sticky-top {
    top: 4em;
}

.table-custom-striped > tbody > tr:nth-child(odd) > td,
.table-custom-striped > tbody > tr:nth-child(odd) > th,
.table-custom-striped > tbody > tr:nth-child(odd) .bg-striped {
    background-color: var(--outlook-bg-secondary);
}   

.table-custom-striped > tbody > tr:nth-child(even) > td,
.table-custom-striped > tbody > tr:nth-child(even) > th,
.table-custom-striped > tbody > tr:nth-child(even) .bg-striped {
    background-color: #efefef;
}

.table-custom-striped > tbody > tr:nth-child(even) .bg-inverted-striped {
    background-color: var(--outlook-bg-secondary);
}

.table-custom-striped > tbody > tr:nth-child(odd) .bg-inverted-striped {
    background-color: #efefef;
}

.invalid-border {
    width: 4px;
    height: 4em;
}

.table-custom-striped > tbody > tr:nth-child(odd) > .invalid-border {
    background-color: var(--outlook-bg-secondary);
}

.table-custom-striped > tbody > tr:nth-child(even) > .invalid-border, 
.table-custom-striped > thead > tr:nth-child(even) > .invalid-border {
    background-color: var(--outlook-bg-tertiary);
}

.table-custom-striped > tbody > tr > .invalid-border + .bg-white {
    background-color: var(--outlook-bg-primary);
}

.table-custom-striped > tbody > tr > .invalid-border + .bg-grey-2 {
    background-color: var(--outlook-bg-tertiary);
}

/* ============================================
HOME WIDGETS & LINKS
   ============================================ */
.widget-home-link, .btn-home-link {
    background-color: var(--bs-white);
    border: 1px solid var(--border-color-button);
}

.widget-home-link a, .btn-home-link a {
    color: var(--outlook-text-primary);
    font-weight: var(--font-weight-normal);
}

.widget-home-link a i, .btn-home-link a i {
    color: rgb(18 38 170);
}

.widget-home-link:hover, .btn-home-link:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(231 233 247 / var(--tw-bg-opacity));
}

.widget-home-link .text-primary {
    color: var(--outlook-text-primary) !important;
}

/* ============================================
   DEVEXTREME OVERRIDES
   ============================================ */
.dx-widget input, .dx-widget textarea {
    /* font-family: 'ProximaNova'; */
}

.dx-numberbox {
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm) !important;
}

.mc-table-editor {
    border: 0;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm) !important;
}

/* Bug: el checkbox de selección tapa las primeras letras de cada opción en el
   popup de listas con checkboxes (dxList/dxTagBox multi-selección — ej. los
   filtros "Región"/"Aglomerados"/"Decil" de EphSeguimiento y EphAnalisis).
   Causa raíz: se cargan dos temas DevExtreme a la vez — dx.light.css (usa
   layout de tabla: .dx-item.dx-list-item{display:table} con celdas
   .dx-list-item-before-bag/.dx-list-item-content en display:table-cell) y
   dx.fluent.binas.css, que importa el theme completo dx.fluent.blue.light.css
   (usado solo para variables de color) y de paso trae su propio layout para
   el contenedor del checkbox con selector de mayor especificidad
   (.dx-list-item-before-bag.dx-list-select-checkbox-container{display:flex}).
   Ese display:flex no participa del layout de tabla de dx.light.css, así que
   el checkbox queda posicionado en el mismo origen que el texto en vez de
   ocupar su propia columna. Restauramos table-cell (mismo ancho que ya
   definía el theme fluent) para que checkbox y texto vuelvan a quedar en
   columnas separadas — afecta a cualquier dxList/dxTagBox del sistema, no
   solo a Census, por eso el fix va acá y no en un bundle de área. */
.dx-list-item-before-bag.dx-list-select-checkbox-container,
.dx-list-item-before-bag.dx-list-select-radiobutton-container {
    display: table-cell;
    vertical-align: middle;
    width: 32px;
}

/* ============================================
   VARIABLE CODE & LANGUAGE
   ============================================ */
.mc-variablecode-answer {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--bs-gray-600);
    display: none;
}

.mc-language-dropdown {
    display: none;
}

/* ============================================
SCROLLBAR CUSTOMIZATION
   ============================================ */
.scrollbar::-webkit-scrollbar-track {
    border-radius: var(--scrollbar-thumb-radius);
    background-color: var(--scrollbar-track-bg);
    border: 0px solid rgba(221, 221, 221, .6);
}

.scrollbar::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-thumb-radius);
    background-clip: content-box;
    background-color: var(--scrollbar-thumb-bg) !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .calendar-year-wrapper {
        border: 1px solid #000;
 padding: 35px 40px 25px;
    }

    .calendar-year-title {
   font-size: 40px;
  margin-bottom: 25px;
    }

    .months-grid {
        gap: 28px 48px;
    }

    .month-block {
        break-inside: avoid;
    }

    .zone-schedule-wrapper {
     border: 1px solid #000;
        padding: 35px 45px 40px;
    }

    .schedule-item {
    padding: 3px 4px 3px 0;
    }
}

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */
@media (min-width: 767.98px) {
    body > .body-container {
        max-height: none !important;
        height: auto !important;
    }
}

/* ============================================
   PONCHO / MI ARGENTINA STYLES
   ============================================ */
.btn-mi-argentina {
    background-color: #0072bb; /* Azul Argentina.gob.ar */
    border-color: #0072bb;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.btn-mi-argentina:hover {
    background-color: #005c99;
    border-color: #005c99;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-mi-argentina i {
    color: #fff;
}