/*
 * macOS / Chrome / 2K display fixes for Cuadrangular
 * Patches invalid CSS and layout issues from material-dashboard.min.css
 * Load this file AFTER material-dashboard.min.css and bootstrap.min.css
 */

/* ------------------------------------------------------------------
 * 1. Fix invalid Bootstrap variables coming from material-dashboard
 * ------------------------------------------------------------------ */
:root {
    --bs-secondary-rgb: 123, 128, 154;
    --bs-body-color-rgb: 123, 128, 154;
}

/* ------------------------------------------------------------------
 * 2. Global box-sizing to avoid sub-pixel differences on Chrome/Mac
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * 3. Fix .btn-close corrupt SVG in material-dashboard.min.css
 * ------------------------------------------------------------------ */
.btn-close {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat !important;
}

/* ------------------------------------------------------------------
 * 4. Sidenav robust layout on macOS / 2K screens
 * ------------------------------------------------------------------ */
/* Use flexbox so the footer sits naturally at the bottom and the
   menu area fills the remaining space without hardcoded offsets. */
.sidenav {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2rem); /* fallback - matches Bootstrap my-3 margin */
    height: calc(100dvh - 2rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden; /* prevent outer scrollbar; only .navbar-collapse scrolls */
}

.sidenav .navbar-collapse {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: darkgray transparent;
}

.sidenav .navbar-collapse::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sidenav .navbar-collapse::-webkit-scrollbar-track {
    background: transparent;
}

.sidenav .navbar-collapse::-webkit-scrollbar-thumb {
    background-color: darkgray;
    border-radius: 4px;
}

/* ------------------------------------------------------------------
 * 5. main-content width calculation must account for the sidebar
 * ------------------------------------------------------------------ */
/* Only apply sidebar offset inside base_menu.html (pages with sidenav) */
body.has-sidenav .main-content {
    width: calc(100% - 15.625rem);
    margin-left: 15.625rem;
}

/* Collapsed sidebar state */
body.has-sidenav.g-sidenav-hidden .main-content {
    width: calc(100% - 6rem);
    margin-left: 6rem;
}

/* Ensure body state classes are not contradictory */
body.g-sidenav-pinned {
    overflow-x: hidden;
}

body.g-sidenav-hidden {
    overflow-x: hidden;
}

/* ------------------------------------------------------------------
 * 6. Fix invalid color values used by Bootstrap/Material components
 * ------------------------------------------------------------------ */
.alert-primary {
    color: #700e2f !important;
}

.text-bg-secondary {
    background-color: RGBA(123, 128, 154, var(--bs-bg-opacity, 1)) !important;
}

.btn-secondary,
.btn.bg-gradient-secondary {
    box-shadow: 0 3px 3px 0 rgba(123, 128, 154, 0.15),
                0 3px 1px -2px rgba(123, 128, 154, 0.2),
                0 1px 5px 0 rgba(123, 128, 154, 0.15) !important;
}

.btn-secondary:hover,
.btn.bg-gradient-secondary:hover {
    box-shadow: 0 14px 26px -12px rgba(123, 128, 154, 0.4),
                0 4px 23px 0 rgba(123, 128, 154, 0.15),
                0 8px 10px -5px rgba(123, 128, 154, 0.2) !important;
}

.bg-gradient-faded-secondary {
    background-image: radial-gradient(370px circle at 80% 50%, rgba(123, 128, 154, 0.6) 0, #626780 100%);
}

.bg-gradient-faded-secondary-vertical {
    background-image: radial-gradient(200px circle at 50% 70%, rgba(123, 128, 154, 0.3) 0, #7b809a 100%);
}

/* ------------------------------------------------------------------
 * 7. Cards / tables / responsive helpers for 2K screens
 * ------------------------------------------------------------------ */
.content-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Avoid vw-based fixed columns that break on 2K displays */
.max-width-col-60 {
    min-width: auto !important;
    max-width: 100% !important;
}

/* Better table scrolling on WebKit */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------
 * 8. Sentiment dashboard cards grid (used in interacciones_results)
 * ------------------------------------------------------------------ */
.sentimientos-dashboard-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.sentimiento-dashboard-card {
    width: 100%;
    min-width: 0;
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sentimiento-dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.sentimiento-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
}

.sentimiento-dashboard-stat-value {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
 * 9. Responsive tweaks for large screens
 * ------------------------------------------------------------------ */
@media (min-width: 1600px) {
    .content-wrapper {
        max-width: 1400px;
    }
}

@media (min-width: 1920px) {
    .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .content-wrapper {
        max-width: 1600px;
    }
}

/* Mobile / tablet: let main-content take full width when sidenav is hidden */
@media (max-width: 1199.98px) {
    body.has-sidenav .main-content,
    body.has-sidenav.g-sidenav-hidden .main-content {
        width: 100%;
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------
 * 10. Filas de botones de acción reutilizables (varias apps)
 * ------------------------------------------------------------------ */
/* Permite que las columnas "row > col-md-N" de una fila de botones se
   encojan y pasen a una segunda fila cuando el sidebar fijo reduce el
   ancho real disponible (ej. ~1024-1400px), en vez de quedar atrapadas
   en su % original (flex-shrink:0 de Bootstrap) con el texto partido en
   varias líneas. flex-basis sigue derivándose del "width" original de
   cada .col-md-N, así que las proporciones no cambian en pantallas anchas. */
.acciones-flex {
    flex-wrap: wrap !important;
}

.acciones-flex > [class*="col"] {
    flex-shrink: 1 !important;
    min-width: 150px;
}

/* Toolbar de botones "preset" (mismo patrón que .tia-actionbar/.tia-presets
   ya usado en templates/interacciones/*.html, generalizado para otras apps) */
.action-toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}