/* =========================================================
   CAMTECH ERP · Tokens de marca canónicos
   Identidad tipográfica y cromática institucional.

   Objetivo:
   - Una sola identidad visual para CAMTECH ERP.
   - Tipografía Manrope con fallback nativo robusto.
   - Azul institucional + teal tecnológico como marca.
   - Colores de alerta/éxito conservados como semántica.
   - Compatibilidad con aliases históricos sin reglas por cliente.

   Esta capa NO modifica layout, permisos, navegación ni lógica.
========================================================= */

:root{
    /* Tipografía institucional */
    --camtech-font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --camtech-font-display: var(--camtech-font-family);
    --camtech-font-body: var(--camtech-font-family);

    /* Escala de pesos realmente disponible en Manrope.
       No usar 850/900/950: el máximo publicado/cargado es 800. */
    --camtech-font-weight-regular: 400;
    --camtech-font-weight-medium: 500;
    --camtech-font-weight-semibold: 600;
    --camtech-font-weight-bold: 700;
    --camtech-font-weight-extrabold: 800;

    /* =====================================================
       Sistema tipográfico semántico canónico
       Una sola gramática para acceso, shell y superficies operativas.
       Los consumidores deben usar roles, no recrear escalas locales.
       ===================================================== */
    --camtech-type-display-size: clamp(32px, 2.65vw, 42px);
    --camtech-type-display-line: 1.12;
    --camtech-type-display-weight: var(--camtech-font-weight-extrabold);
    --camtech-type-display-tracking: -.032em;

    --camtech-type-page-title-size: 24px;
    --camtech-type-page-title-line: 1.15;
    --camtech-type-page-title-weight: var(--camtech-font-weight-bold);
    --camtech-type-page-title-tracking: 0;

    --camtech-type-section-title-size: 16px;
    --camtech-type-section-title-line: 1.10;
    --camtech-type-section-title-weight: var(--camtech-font-weight-bold);
    --camtech-type-section-title-tracking: 0;

    --camtech-type-kicker-size: 10px;
    --camtech-type-kicker-line: 1.05;
    --camtech-type-kicker-weight: var(--camtech-font-weight-extrabold);
    --camtech-type-kicker-tracking: .08em;

    --camtech-type-micro-kicker-size: 8.5px;
    --camtech-type-micro-kicker-line: 1;
    --camtech-type-micro-kicker-weight: var(--camtech-font-weight-extrabold);
    --camtech-type-micro-kicker-tracking: .08em;

    --camtech-type-label-size: 13px;
    --camtech-type-label-line: 1.20;
    --camtech-type-label-weight: var(--camtech-font-weight-bold);
    --camtech-type-label-tracking: 0;

    --camtech-type-control-size: 14px;
    --camtech-type-control-line: 1.20;
    --camtech-type-control-weight: var(--camtech-font-weight-medium);
    --camtech-type-control-tracking: 0;

    --camtech-type-body-size: 14px;
    --camtech-type-body-line: 1.50;
    --camtech-type-body-weight: var(--camtech-font-weight-medium);
    --camtech-type-body-tracking: 0;

    --camtech-type-body-compact-size: 13px;
    --camtech-type-body-compact-line: 1.45;
    --camtech-type-body-compact-weight: var(--camtech-font-weight-medium);
    --camtech-type-body-compact-tracking: 0;

    --camtech-type-helper-size: 12px;
    --camtech-type-helper-line: 1.35;
    --camtech-type-helper-weight: var(--camtech-font-weight-medium);
    --camtech-type-helper-tracking: 0;

    --camtech-type-helper-compact-size: 11px;
    --camtech-type-helper-compact-line: 1.35;
    --camtech-type-helper-compact-weight: var(--camtech-font-weight-medium);

    --camtech-type-cta-size: 15px;
    --camtech-type-cta-line: 1;
    --camtech-type-cta-weight: var(--camtech-font-weight-bold);
    --camtech-type-cta-tracking: 0;

    --camtech-type-nav-size: 14px;
    --camtech-type-nav-line: 1.20;
    --camtech-type-nav-weight: var(--camtech-font-weight-bold);
    --camtech-type-nav-sub-weight: var(--camtech-font-weight-medium);

    --camtech-type-context-label-size: 12px;
    --camtech-type-context-label-line: 1.15;
    --camtech-type-context-label-weight: var(--camtech-font-weight-extrabold);
    --camtech-type-context-primary-size: 13.5px;
    --camtech-type-context-primary-line: 1.08;
    --camtech-type-context-primary-weight: var(--camtech-font-weight-extrabold);
    --camtech-type-context-value-size: 10.5px;
    --camtech-type-context-value-line: 1.10;
    --camtech-type-context-value-weight: var(--camtech-font-weight-semibold);

    --camtech-type-metric-lg-size: 20px;
    --camtech-type-metric-lg-line: 1.02;
    --camtech-type-metric-lg-weight: var(--camtech-font-weight-extrabold);
    --camtech-type-metric-lg-tracking: -.025em;

    /* Marca CAMTECH ERP · contrato cromático canónico consolidado.
       REV-CORE-BRAND-ERP-SOURCE-HYGIENE-DEAD-CSS-OVERRIDE-DEDUPLICATION-FINAL-CANON-01.6
       Una sola fuente para shell, dashboard y módulos. */
    --camtech-brand-primary: #073157;
    --camtech-brand-primary-dark: #05243F;
    --camtech-brand-primary-hover: #0A426F;
    --camtech-brand-accent: #25869A;
    --camtech-brand-accent-dark: #1F788B;
    --camtech-brand-accent-bright: #3990A3;
    --camtech-brand-action: #1F788B;
    --camtech-brand-action-hover: #196879;
    --camtech-brand-petroleum: #1B5069;
    --camtech-brand-sidebar: #062B49;
    --camtech-brand-sidebar-hover: #103A56;
    --camtech-brand-sidebar-active: #1B5069;
    --camtech-brand-sidebar-active-accent: #3990A3;
    --camtech-brand-sidebar-divider: rgba(255,255,255,.065);
    --camtech-brand-sidebar-scroll-track: rgba(255,255,255,.018);
    --camtech-brand-sidebar-scroll-thumb: rgba(37,134,154,.32);
    --camtech-brand-sidebar-scroll-thumb-hover: rgba(37,134,154,.46);

    /* Superficies y texto */
    --camtech-brand-bg: #F3F6F8;
    --camtech-brand-surface: #FFFFFF;
    --camtech-brand-surface-soft: #F8FAFB;
    --camtech-brand-border: #D9E2E8;
    --camtech-brand-text: #17324D;
    --camtech-brand-heading: #073157;
    --camtech-brand-muted: #61758A;
    --camtech-brand-muted-2: #7C8B9C;

    /* Estados semánticos: no forman parte de la marca, conservan significado operativo. */
    --camtech-danger: #C23B4B !important;
    --camtech-danger-dark: #9F2F3D !important;
    --camtech-danger-soft: #FEF2F2 !important;
    --camtech-danger-border: #FECACA !important;
    --camtech-success: #16A34A !important;
    --camtech-success-dark: #118847 !important;
    --camtech-success-soft: #E8F8EF !important;
    --camtech-success-border: #CBEAD5 !important;
    --camtech-warning: #D97706 !important;
    --camtech-warning-soft: #FFF7ED !important;

    /* Tokens operativos canónicos: prevalecen sobre branding legado por instancia. */
    --camtech-primary: var(--camtech-brand-primary) !important;
    --camtech-primary-dark: var(--camtech-brand-primary-dark) !important;
    --camtech-primary-navy: var(--camtech-brand-primary) !important;
    --camtech-primary-hover: var(--camtech-brand-primary-hover) !important;
    --camtech-primary-soft: #EAF1F5 !important;
    --camtech-primary-soft-2: #F5F8FA !important;
    --camtech-secondary: var(--camtech-brand-accent) !important;
    --camtech-primary-rgb: 7, 49, 87 !important;
    --camtech-secondary-rgb: 40, 134, 154 !important;

    --camtech-teal: var(--camtech-brand-accent) !important;
    --camtech-teal-dark: var(--camtech-brand-accent-dark) !important;
    --camtech-teal-soft: #EDF7F8 !important;
    --camtech-teal-border: #CFE4E8 !important;

    --camtech-bg: var(--camtech-brand-bg) !important;
    --camtech-surface: var(--camtech-brand-surface) !important;
    --camtech-surface-soft: var(--camtech-brand-surface-soft) !important;
    --camtech-soft: var(--camtech-brand-surface-soft) !important;
    --camtech-soft-2: #EDF2F5 !important;
    --camtech-border: var(--camtech-brand-border) !important;
    --camtech-text: var(--camtech-brand-text) !important;
    --camtech-heading: var(--camtech-brand-heading) !important;
    --camtech-text-soft: var(--camtech-brand-muted) !important;
    --camtech-text-muted: var(--camtech-brand-muted-2) !important;
    --camtech-muted: var(--camtech-brand-muted) !important;

    --camtech-shadow-sm: 0 2px 8px rgba(7, 49, 87, .055) !important;
    --camtech-shadow-md: 0 8px 20px rgba(7, 49, 87, .075) !important;
    --camtech-shadow-lg: 0 14px 30px rgba(7, 49, 87, .10) !important;

    /* Acciones de marca sólidas. Los estados semánticos siguen reservados
       para verde/naranja/rojo y no se reutilizan como branding. */
    --camtech-action-brand-bg: var(--camtech-brand-action) !important;
    --camtech-action-brand-bg-hover: var(--camtech-brand-action-hover) !important;
    --camtech-action-brand-border: var(--camtech-brand-action) !important;
    --camtech-action-brand-shadow: 0 4px 12px rgba(31, 120, 139, .14) !important;

    --camtech-action-secondary-bg: #EEF5FC !important;
    --camtech-action-secondary-bg-hover: #E4EFFA !important;
    --camtech-action-secondary-border: #CEDFED !important;
    --camtech-action-secondary-text: var(--camtech-primary-dark) !important;

    --camtech-action-neutral-bg: #F4F7FA !important;
    --camtech-action-neutral-bg-hover: #EAF0F5 !important;
    --camtech-action-neutral-border: var(--camtech-border) !important;
    --camtech-action-neutral-text: var(--camtech-text) !important;

    --camtech-action-danger-bg: var(--camtech-danger) !important;
    --camtech-action-danger-bg-hover: var(--camtech-danger-dark) !important;
    --camtech-action-danger-shadow: 0 7px 16px rgba(194, 59, 75, .13) !important;

    /* Aliases históricos del panel */
    --primary: var(--camtech-primary) !important;
    --primary-dark: var(--camtech-primary-dark) !important;
    --accent: var(--camtech-teal) !important;
    --bg: var(--camtech-bg) !important;
    --white: var(--camtech-surface) !important;
    --text: var(--camtech-text) !important;
    --muted: var(--camtech-text-soft) !important;
    --border: var(--camtech-border) !important;
    --danger: var(--camtech-danger) !important;
    --shadow: var(--camtech-shadow-sm) !important;

    /* Bridge canónico del Login: misma marca, sin duplicar otra paleta/familia. */
    --lg-primary: var(--camtech-brand-primary) !important;
    --lg-primary-dark: var(--camtech-brand-primary-dark) !important;
    --lg-navy: var(--camtech-brand-primary) !important;
    --lg-navy-deep: #041C31 !important;
    --lg-teal: var(--camtech-brand-accent) !important;
    --lg-teal-soft: #78DDE2 !important;
    --lg-bg: #EEF3F6 !important;
    --lg-bg-soft: #F8FAFB !important;
    --lg-ink: var(--camtech-brand-text) !important;
    --lg-heading: var(--camtech-brand-heading) !important;
    --lg-muted: var(--camtech-brand-muted) !important;
    --lg-muted-2: var(--camtech-brand-muted-2) !important;
    --lg-line: var(--camtech-brand-border) !important;
    --lg-font-display: var(--camtech-font-display) !important;
    --lg-font-body: var(--camtech-font-body) !important;
    --lg-font-weight-regular: var(--camtech-font-weight-regular) !important;
    --lg-font-weight-medium: var(--camtech-font-weight-medium) !important;
    --lg-font-weight-semibold: var(--camtech-font-weight-semibold) !important;
    --lg-font-weight-bold: var(--camtech-font-weight-bold) !important;
    --lg-font-weight-extrabold: var(--camtech-font-weight-extrabold) !important;
}

html,
body{
    font-family: var(--camtech-font-body);
    color: var(--camtech-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea{
    font-family: var(--camtech-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--camtech-font-display);
}

/* Componente físico único para encabezados de página.
   Login y Shell comparten el mismo markup, clases y tipografía. */
.camtech-page-heading{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
}

html body .camtech-page-heading > .camtech-page-heading__title{
    margin:0 !important;
    padding:0 !important;
    font-family:var(--camtech-font-display) !important;
    font-size:var(--camtech-type-page-title-size) !important;
    line-height:var(--camtech-type-page-title-line) !important;
    font-weight:var(--camtech-type-page-title-weight) !important;
    letter-spacing:var(--camtech-type-page-title-tracking) !important;
    color:var(--camtech-brand-heading) !important;
    text-align:left !important;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

html body .camtech-page-heading > .camtech-page-heading__subtitle{
    margin:0 !important;
    padding:0 !important;
    font-family:var(--camtech-font-body) !important;
    font-size:var(--camtech-type-body-compact-size) !important;
    line-height:var(--camtech-type-body-compact-line) !important;
    font-weight:var(--camtech-type-body-compact-weight) !important;
    letter-spacing:var(--camtech-type-body-compact-tracking) !important;
    color:var(--camtech-brand-muted) !important;
    text-align:left !important;
}

@media (max-width:620px){
    html body .camtech-page-heading > .camtech-page-heading__title{
        font-size:22px !important;
    }
}

/* Dashboard: puente de tokens para su namespace local consolidado. */
#camtechDashboardPI{
    --dpi-teal: var(--camtech-brand-accent) !important;
    --dpi-teal-dark: var(--camtech-brand-accent-dark) !important;
    --dpi-blue: var(--camtech-brand-petroleum) !important;
    --dpi-blue-dark: var(--camtech-brand-primary) !important;
    --dpi-ink: var(--camtech-brand-text) !important;
    --dpi-heading: var(--camtech-brand-heading) !important;
    --dpi-muted: var(--camtech-brand-muted) !important;
    --dpi-muted-2: var(--camtech-brand-muted-2) !important;
    --dpi-line: var(--camtech-brand-border) !important;
    --dpi-line-soft: #E8EFF4 !important;
    --dpi-soft: var(--camtech-brand-surface-soft) !important;
    --dpi-soft-blue: #F2F7FA !important;
    font-family: var(--camtech-font-body);
}