/* =====================================================================
   SistemaLab - Tema visual compartido (minimalista, acento azul marino)
   =====================================================================
   Usado por primera vez en Preparacion Mecanica (Bandeja de Secado) y
   Dosificacion (Batch/Carritos). Antes cada vista repetia su propio
   bloque de variables ":root" y sus propios overrides de Bootstrap;
   ahora viven una sola vez aqui.

   COMO USARLO EN UNA VISTA NUEVA
   -------------------------------
   1) Agrega la clase "sistemalab-theme" al contenedor raiz de la vista,
      ademas del id propio que ya uses para tus estilos especificos de
      esa pantalla:
          <div class="card ..." id="miVista_wrapper" >
      se convierte en
          <div class="card ... sistemalab-theme" id="miVista_wrapper">
   2) Con eso ya heredas automaticamente: botones (btn-primary /
      btn-outline-primary / btn-outline-secondary / btn-success /
      btn-warning / btn-danger / btn-info / btn-light), badges
      (badge.bg-primary / bg-warning / bg-success / bg-light /
      bg-secondary), tarjetas (.card / .card-header) y barras de
      progreso (.progress / .progress-bar) en la paleta del sistema.
   3) Los tokens de color (--accent, --danger, --text, etc.) quedan
      disponibles como variables CSS dentro de ".sistemalab-theme", asi
      que en el <style> propio de tu vista puedes usar var(--accent),
      var(--text-muted), etc. para lo que sea especifico de esa pantalla
      (por ejemplo los estados de las posiciones en Bandeja.cshtml).
   4) Tipografia unica: --sl-font (la misma del modulo Dashboard, fuente
      del sistema: Segoe UI en Windows). No cargar fuentes externas ni
      usar IBM Plex. La clase ".mono" ya no cambia de fuente: solo
      alinea los digitos (tabular-nums) para texto como
      (codigos, folios, pesos).

   CUANDO UNA VISTA NECESITA UN COLOR DISTINTO PARA ALGO GENERICO
   -----------------------------------------------------------------
   Por diseño, ".badge.bg-dark" y ".badge.bg-success" NO se centralizan
   aqui: en Bandeja de Secado "bg-success" es un contador neutro y en
   Dosificacion es un indicador positivo (verde) - el mismo nombre de
   clase de Bootstrap significa cosas distintas segun la pantalla. Cada
   vista debe seguir definiendo esos dos casos puntuales en su propio
   <style>, con su propio selector con id (ej. "#miVista .badge.bg-dark
   {...}"), que por especificidad siempre gana sobre esta hoja compartida.
   ===================================================================== */

/* Tipografia unica del sistema (igual al modulo Dashboard) - 2026-10-03 */
:root {
    --sl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --bs-body-font-family: var(--sl-font);
}

body {
    font-family: var(--sl-font);
}

.sistemalab-theme table,
.mono,
.mono-codigo {
    font-variant-numeric: tabular-nums;
}

.sistemalab-theme {
    --bg: #F7F6F2;
    --surface: #FFFFFF;
    --surface-muted: #EFEDE7;
    --border: #E3E0D8;
    --border-strong: #C9C4B8;
    --text: #1C1B19;
    --text-muted: #6E6A61;
    --text-faint: #A29D91;
    --accent: #1E3A8A;
    --accent-dark: #172554;
    --accent-soft: #E4E8F5;
    --danger: #9B3B32;
    --danger-dark: #7E2E27;
    --danger-soft: #F3E2DE;
    --info: #4F6579;
    --info-soft: #E4EAEE;
    --done: #78756C;
    --done-soft: #ECEAE4;
    --ready: #4B6B4E;
    --ready-soft: #E3EAE3;
    font-family: var(--sl-font);
    color: var(--text);
}

.sistemalab-theme .mono,
.mono {
    font-family: var(--sl-font);
}

.sistemalab-theme code.mono-codigo,
.sistemalab-theme .mono-codigo {
    font-family: var(--sl-font);
    font-weight: 700;
    color: inherit;
}

/* ---------------------------------------------------------------------
   Botones: azul marino como acento primario; el rojo se reserva SOLO
   para acciones destructivas (por eso btn-danger es outline, no relleno).
   --------------------------------------------------------------------- */
.sistemalab-theme .btn-primary,
.sistemalab-theme .btn-warning {
    background-color: var(--accent) !important;
    border-color: var(--accent-dark) !important;
    color: #fff !important;
}

    .sistemalab-theme .btn-primary:hover,
    .sistemalab-theme .btn-warning:hover {
        background-color: var(--accent-dark) !important;
        border-color: var(--accent-dark) !important;
    }

    .sistemalab-theme .btn-primary:disabled,
    .sistemalab-theme .btn-warning:disabled {
        background-color: var(--border-strong) !important;
        border-color: var(--border-strong) !important;
        color: var(--surface) !important;
        opacity: 1 !important;
    }

/* Accion de crear/confirmar (no destructiva, no la primaria del bloque):
   verde funcional. Si una vista puntual necesita que btn-success sea
   igual al azul primario (como "Guardar" en un modal), lo sobreescribe
   localmente con su propio selector con id. */
.sistemalab-theme .btn-success {
    background-color: var(--ready) !important;
    border-color: #3c5940 !important;
    color: #fff !important;
}

    .sistemalab-theme .btn-success:hover {
        background-color: #3c5940 !important;
    }

.sistemalab-theme .btn-danger {
    background-color: var(--surface) !important;
    border-color: var(--danger) !important;
    color: var(--danger-dark) !important;
}

    .sistemalab-theme .btn-danger:hover {
        background-color: var(--danger-soft) !important;
        border-color: var(--danger) !important;
        color: var(--danger-dark) !important;
    }

    .sistemalab-theme .btn-danger:disabled {
        background-color: var(--surface) !important;
        border-color: var(--border-strong) !important;
        color: var(--text-faint) !important;
        opacity: 1 !important;
    }

.sistemalab-theme .btn-info {
    background-color: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

    .sistemalab-theme .btn-info:hover {
        background-color: var(--surface-muted) !important;
    }

.sistemalab-theme .btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

    .sistemalab-theme .btn-outline-primary:hover {
        background-color: var(--accent) !important;
        color: #fff !important;
    }

    .sistemalab-theme .btn-outline-primary.btn-primary {
        background-color: var(--accent) !important;
        color: #fff !important;
    }

.sistemalab-theme .btn-outline-secondary {
    color: var(--text-muted) !important;
    border-color: var(--border-strong) !important;
}

    .sistemalab-theme .btn-outline-secondary:hover {
        background-color: var(--surface-muted) !important;
        color: var(--text) !important;
    }

.sistemalab-theme .btn-light {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

    .sistemalab-theme .btn-light:hover {
        background-color: var(--surface-muted) !important;
    }

.sistemalab-theme .btn {
    border-radius: 8px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Badges. bg-dark y bg-success quedan fuera a proposito (ver nota arriba).
   --------------------------------------------------------------------- */
.sistemalab-theme .badge.bg-primary {
    background-color: var(--accent-soft) !important;
    color: var(--accent-dark) !important;
    font-weight: 700;
}

.sistemalab-theme .badge.bg-warning {
    background-color: var(--info-soft) !important;
    color: var(--info) !important;
}

.sistemalab-theme .badge.bg-light {
    background-color: var(--surface-muted) !important;
    color: var(--text-muted) !important;
    font-weight: 700;
}

.sistemalab-theme .badge.bg-secondary {
    background-color: var(--done-soft) !important;
    color: var(--text-muted) !important;
}

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.sistemalab-theme .card {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: none !important;
}

.sistemalab-theme .card-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------------
   Barra de progreso (ej. ocupacion de un Batch/bloque)
   --------------------------------------------------------------------- */
.sistemalab-theme .progress {
    background-color: var(--surface-muted);
    border-radius: 999px;
    overflow: hidden;
}

.sistemalab-theme .progress-bar {
    background-color: var(--accent);
    font-family: var(--sl-font);
    font-weight: 600;
}