/* ==========================================================================
   CONCRETO · concreto-shell.css
   Estilos del SHELL (navbar/footer/layout) que NO son de Bootstrap y que las
   bases viejas tenían en su bloque <style>. Migrados aquí con tokens del
   sistema (sin hex literales). Da soporte al markup de navbar/footer copiado en
   base_concreto.html. Doc: Concreto-Migracion-Diseno/06 (Paso 6, nota navbar).
   ========================================================================== */

/* ---- Estructura del shell ----
   Geometría que la base vieja daba vía `body.semaica-shell` (semaica-shell.css, que
   base_concreto NO carga). Sin ella, el contenido ancho (tablas con muchas columnas)
   desborda la pantalla y el sidebar fixed se descuadra. Re-creada aquí (sin color
   off-brand; solo layout). */
body { overflow-x: hidden; }   /* evita scroll horizontal de PÁGINA; las tablas anchas usan su propio scroll (DataTables scrollX) */
.app-shell-content { /* contenedor principal de contenido entre navbar y footer */
  flex: 1 0 auto;
  min-height: calc(100vh - 56px);   /* el contenido llena la pantalla; evita que el footer suba */
}
.app-shell-footer { flex-shrink: 0; }
/* Contenedor de contenido con padding lateral (utilidad legacy de styles.css,
   usada por varias apps: Licitaciones/crear-proyecto, Cumplimiento/calificar…).
   base_concreto no carga styles.css, así que la reproducimos aquí (solo layout). */
.custom-container { padding-left: 7%; padding-right: 7%; padding-top: 0; }

/* ---- Navbar ---- */
#header-navbar {
  z-index: 1000;                 /* debajo del sidebar (1050) */
  padding: 0.6rem 0.6rem;
  justify-content: center;
}

/* Botón-icono del topbar (notificaciones, etc.) */
.btn-icon {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--c-ink);           /* era #e4e4e4 */
}
.btn-icon:hover { color: var(--main-yellow); }   /* era #ffd700 */

/* Avatar de organización */
.avatar-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1.6px solid var(--c-white);
}
.avatar-logo {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Info de usuario/organización */
.user-info { max-width: 150px; }
.user-org {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--main-yellow);     /* era #ffd700 */
  margin-bottom: 0;
}
.user-name {
  font-size: 0.8rem;
  color: var(--c-ink);           /* era #e4e4e4 */
  word-break: break-word;
  margin-top: 0;
}

/* Etiqueta de organización (dropdown) */
.organization-label {
  background-color: transparent;
  border: none;
  text-decoration: none;
  color: inherit;
  font-size: 0.75rem;
}

/* ---- Navbar "legacy main" (partials/navbar_legacy_main.html) ----
   Clases no-Bootstrap que ese navbar usa y que vivían en custom.min.css /
   <style> de base.html; re-skineadas a tokens. */
#header-navbar .text-altprimary { color: var(--main-yellow); }   /* wordmark "Concreto" (era azul #0048FF) */
#header-navbar .organization-label {
  background-color: transparent;
  border: none;
  text-decoration: none;
  color: inherit;
  font-size: 0.75rem;
}

/* ---- Responsive del navbar ---- */
@media (max-width: 767.98px) {
  #header-navbar { padding: 0.5rem 0.5rem; }
  .navbar-brand img { height: 30px !important; }
  .avatar-container { width: 35px; height: 35px; }
  .user-info { max-width: 120px; }
  .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
}
@media (max-width: 575.98px) {
  .navbar-brand img { height: 25px !important; }
  .avatar-container { width: 30px; height: 30px; }
  .btn-sm { padding: 0.375rem 0.5rem; font-size: 0.875rem; min-width: 38px; }
}

/* ==========================================================================
   Sidebar (layouts/sidebar-*.html) — REFINAMIENTO SOLO EN PÁGINAS MIGRADAS.
   El partial es compartido (lo usan apps NO migradas) y su unificación está
   diferida (ver 02-PLAN §Tareas transversales), así que NO se edita. Aquí solo
   se re-skinea a tokens scopeando bajo [data-theme="dark"], que únicamente
   existe en base_concreto → cero impacto en apps no migradas. La mayor
   especificidad ([data-theme] + .sidebar-custom) gana al <style> del partial.
   Solo color/forma/legibilidad; NO se toca geometría (ancho/position/backdrop)
   de la que depende el JS de despliegue del sidebar.
   ========================================================================== */
[data-theme="dark"] .sidebar-custom {
  background: var(--c-navy-black);                 /* unifica el riel con el fondo (sin tinte glass off-brand) */
  border-right: 1px solid var(--c-line);
  left: 0;                                          /* pin a la izquierda del viewport (semaica-shell daba left:0;
                                                       sin esto el fixed queda desfasado por el padding del container) */
  height: 100vh;
}
/* Items: pill centrado con margen, tipografía del sistema */
[data-theme="dark"] .sidebar-custom .nav-link {
  color: var(--c-ink-soft);
  margin: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
/* Etiquetas largas: envolver en vez de recortarse (antes se cortaban: "Órdenes de Compr…") */
[data-theme="dark"] .sidebar-custom .nav-link span {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--lh-tight);
}
[data-theme="dark"] .sidebar-custom .nav-link:hover {
  color: var(--c-white);
  background: var(--c-surface-3);
}
[data-theme="dark"] .sidebar-custom .nav-link.active {
  color: var(--c-white);
  background: var(--c-navy);                        /* acento de marca; pill centrado por el margin de arriba */
}
[data-theme="dark"] .sidebar-custom .nav-link .bi { font-size: 1.1rem; }
/* Botón de colapsar y nombre del logo → tokens */
[data-theme="dark"] .sidebar-custom .toggle-btn { background: var(--c-navy); color: var(--c-white); }
[data-theme="dark"] .sidebar-custom .logo-section p { color: var(--main-yellow); }
/* Dropdown del sidebar (submenú) → superficie del sistema */
[data-theme="dark"] .sidebar-custom .dropdown-menu { background: var(--c-surface); border: 1px solid var(--c-line); }
[data-theme="dark"] .sidebar-custom .dropdown-item { color: var(--c-ink); }
[data-theme="dark"] .sidebar-custom .dropdown-item:hover { background: var(--c-surface-3); color: var(--c-white); }

/* ──────────────────────────────────────────────────────────────────────────
   Utilidades legacy del shell "base.html" (vivían en styles.css / custom.min.css,
   que base_concreto NO carga). Las usan 7+ apps (Clientes, Proveedores, OrdenCompra,
   Requisiciones, Informacion, Cotizaciones, Facturacion…) → se promueven aquí con
   tokens, como ya se hizo con .custom-container. (Surgió migrando Facturacion.) */

/* Banda superior de página (era rgb(20,42,155), azul off-brand → navy del sistema) */
.top-panel { background: var(--c-navy); padding: 0; padding-bottom: 5px; margin-bottom: -10px; }
/* Degradado bajo la banda (geometría replicada tal cual) */
.box-shadow {
  position: absolute; left: 0; right: 0;
  background: linear-gradient(to bottom, var(--c-navy), transparent);
  padding: 0; z-index: -1; min-height: 25vh;
}
/* Card legacy (era gradiente slate translúcido → superficie sólida del sistema) */
.custom-card { background: var(--c-surface); border-radius: var(--radius-md); margin: 15px 10px; }
.custom-card .card-header {
  background-color: var(--c-surface-3);
  padding: 7px; padding-left: 15px; margin-top: 0;
  color: var(--c-gray-celeste);                     /* era #579AFF, azul off-brand */
}

/* Utilidades de color legacy. custom.min.css las definía con !important (patrón
   .bg-*/.text-* de Bootstrap) → se espejan igual para conservar la precedencia. */
.bg-altdark { background-color: var(--c-navy-black) !important; }   /* era rgb(27,29,45) */
.bg-altprimary { background-color: var(--c-navy) !important; }      /* era rgb(0,72,255) */
.border-altprimary { border-color: var(--c-navy) !important; }
/* Naranja FUNCIONAL (p.ej. estado "sin pagar", distinto del ámbar "en revisión").
   No hay token naranja → se deriva de los semánticos para no introducir hex. */
.text-orange { color: color-mix(in srgb, var(--c-warning) 55%, var(--c-danger)) !important; }
.bg-orange { background-color: color-mix(in srgb, var(--c-warning) 55%, var(--c-danger)) !important; }
.border-orange { border-color: color-mix(in srgb, var(--c-warning) 55%, var(--c-danger)) !important; }

/* Badges de estado "low" (Borrador / Devuelta) — los construye el JS en strings
   en 4+ apps (Requisiciones, Licitaciones, Clientes, Logistica). Vivían en
   custom.min.css (--bs-low-blue-rgb / --bs-low-purple-rgb, que base_concreto no
   carga): sin esto, las páginas migradas los pintaban sin fondo (p.ej.
   licitaciones-general, ya migrada). ⚠️ PALETA FUNCIONAL de estados (azul acero
   = Borrador, morado = Devuelta), sin token equivalente → se conservan los hex
   originales (excepción documentada, criterio de las paletas funcionales).
   !important: espeja el patrón .bg-* original. (Surgió migrando Requisiciones.) */
.bg-low-blue { background-color: #295F98 !important; }     /* rgb(41,95,152) de custom.min.css */
.bg-low-purple { background-color: #402E7A !important; }   /* rgb(64,46,122) de custom.min.css */

/* ──────────────────────────────────────────────────────────────────────────
   Modal GLOBAL "Perfil del vendedor" (templates/Requisiciones/modal-perfil-
   vendedor.html, lo inyecta base_concreto en páginas autenticadas). Su <style>
   vivía en el partial y viajaba a TODAS las páginas migradas → movido aquí.
   ⚠️ Paleta NARANJA funcional de períodos (día/semana/mes actual/mes anterior),
   sin token del sistema → se definen como tokens NUEVOS comentados, scopeados
   al modal (regla 00 §10: añadir tokens nuevos, nunca mutar los existentes). */
#modalPerfilVendedor {
  --vend-dia: #FF8C42;
  --vend-semana: #FF6B35;
  --vend-mes-actual: #F7931E;
  --vend-mes-anterior: #FFA500;
}

    /* Modal más grande en pantallas grandes */
    @media (min-width: 992px) {
        .modal-perfil-vendedor-xl {
            max-width: 95%;
        }
    }
    @media (min-width: 1200px) {
        .modal-perfil-vendedor-xl {
            max-width: 90%;
        }
    }
    
    .perfil-vendedor-card {
        border-left: 4px solid;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        min-height: 100%;
    }
    .perfil-vendedor-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--c-navy-black) 30%, transparent) !important;
    }
    .text-dia { color: var(--vend-dia); }
    .text-semana { color: var(--vend-semana); }
    .text-mes-actual { color: var(--vend-mes-actual); }
    .text-mes-anterior { color: var(--vend-mes-anterior); }
    .bg-intro {
        background: linear-gradient(135deg, color-mix(in srgb, var(--vend-dia) 10%, transparent) 0%, color-mix(in srgb, var(--vend-semana) 10%, transparent) 100%);
        border-left: 3px solid var(--vend-dia);
    }
    .nav-tabs-custom .nav-link {
        color: var(--vend-mes-anterior);
        border-color: transparent;
    }
    .nav-tabs-custom .nav-link:hover {
        border-color: var(--vend-dia);
        color: var(--vend-dia);
    }
    .nav-tabs-custom .nav-link.active {
        background-color: color-mix(in srgb, var(--vend-dia) 20%, transparent);
        border-color: var(--vend-dia);
        color: var(--vend-dia);
        font-weight: bold;
    }
    .orden-item {
        border-left: 3px solid var(--vend-dia);
        background-color: color-mix(in srgb, var(--vend-dia) 5%, transparent);
        transition: all 0.2s ease;
    }
    .orden-item:hover {
        background-color: color-mix(in srgb, var(--vend-dia) 10%, transparent);
        transform: translateX(3px);
    }
    .mini-stat-card {
        transition: all 0.2s ease;
    }
    .mini-stat-card:hover {
        transform: scale(1.02);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--vend-dia) 30%, transparent) !important;
    }
    /* Estilo compacto para el card "Hoy" cuando está comprimido - Una sola fila horizontal */
    .col-hoy.col-12 .mini-stat-card {
        padding: 0.5rem 0.75rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
    }
    .col-hoy.col-12 .mini-stat-card > * {
        margin: 0 !important;
    }
    /* Icono y etiqueta "Hoy" */
    .col-hoy.col-12 .mini-stat-card > .d-flex.mb-1 {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    /* Contenedor para número y texto (requisiciones/órdenes) - en columna cuando comprimido */
    /* Agrupar número y label en una columna centrada */
    .col-hoy.col-12 .mini-stat-card .display-6 {
        font-size: 1.5rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: block !important;
        text-align: center !important;
    }
    .col-hoy.col-12 .mini-stat-card .display-6.d-block {
        display: block !important;
    }
    .col-hoy.col-12 .mini-stat-card .display-6 + small {
        font-size: 0.7rem !important;
        display: block !important;
        margin-left: 0 !important;
        margin-top: 0.1rem !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }
    .col-hoy.col-12 .mini-stat-card small.d-block {
        display: block !important;
    }
    /* Agrupar número y label visualmente usando un contenedor flex implícito */
    /* Hacer que el número y su label siguiente se comporten como un grupo en columna */
    .col-hoy.col-12 .mini-stat-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    /* El número y su label deben estar agrupados en el centro */
    .col-hoy.col-12 .mini-stat-card .display-6,
    .col-hoy.col-12 .mini-stat-card .display-6 + small {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    /* Crear un grupo visual centrado para número y label */
    .col-hoy.col-12 .mini-stat-card .display-6 {
        text-align: center !important;
    }
    .col-hoy.col-12 .mini-stat-card .display-6 + small {
        text-align: center !important;
        display: block !important;
    }
    /* Ocultar el border-top y reorganizar el monto */
    .col-hoy.col-12 .mini-stat-card .border-top {
        display: none !important;
    }
    .col-hoy.col-12 .mini-stat-card .mt-1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0 !important;
        flex-shrink: 0 !important;
    }
    .col-hoy.col-12 .mini-stat-card .mt-1 small {
        display: block !important;
        margin-bottom: 0.1rem !important;
        font-size: 0.65rem !important;
    }
    .col-hoy.col-12 .mini-stat-card .mt-1 small.d-block {
        display: block !important;
    }
    .col-hoy.col-12 .mini-stat-card .mt-1 span {
        font-size: 0.85rem !important;
    }
    /* Transiciones para los períodos adicionales */
    .estadisticas-extra {
        transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out, transform 0.4s ease-in-out !important;
        overflow: hidden !important;
        opacity: 0 !important;
        max-height: 0 !important;
        transform: translateY(-10px) !important;
    }
    .estadisticas-extra.visible {
        opacity: 1 !important;
        max-height: 500px !important;
        transform: translateY(0) !important;
    }
    /* Transición para el cambio de tamaño del card "Hoy" */
    .col-hoy {
        transition: all 0.4s ease-in-out !important;
    }

/* ── Tabla de "Acciones Rápidas" (sidebar-derecha) ────────────────────────────
   Simetría: la columna de texto toma el ancho libre; badge y botón se encogen al
   contenido y quedan alineados en su propia columna (centro / derecha), con las
   celdas centradas verticalmente aunque el texto envuelva en 2-3 líneas. */
.qa-table td, .qa-table th { vertical-align: middle; border-color: color-mix(in srgb, var(--c-white) 10%, transparent); }
.qa-table td:first-child { width: auto; line-height: 1.25; }
.qa-table td:nth-child(2) { width: 1%; white-space: nowrap; text-align: center; }
.qa-table td:nth-child(3) { width: 1%; white-space: nowrap; text-align: right; }
.qa-table .badge { min-width: 1.75rem; }

/* ── Scrollbar de marca (referencia Marketplace) ──────────────────────────────
   Global pero scopeado a [data-theme="dark"] (solo páginas migradas; las bases
   viejas conservan el scrollbar del SO). Fino, thumb redondeado translúcido sobre
   navy; el borde transparente + background-clip lo adelgaza visualmente. */
[data-theme="dark"] {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--c-white) 22%, transparent) transparent;
}
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--c-white) 18%, transparent);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--c-white) 32%, transparent);
}
[data-theme="dark"] ::-webkit-scrollbar-corner { background: transparent; }