/* ============================================================
   DESIGN SYSTEM — relevamientos.com.ar
   Precision Dark — v1.0
   
   ESTE ES EL ARCHIVO MAESTRO. Todos los demás CSS lo heredan.
   No definir :root ni font-family en ningún otro archivo.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Design Tokens — Tema Precision (Dark Default) ─────────── */
:root {
    /* Tipografía */
    --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

    /* Escala tipográfica */
    --text-xs:   0.65rem;   /* labels superiores */
    --text-sm:   0.75rem;   /* badges, meta */
    --text-base: 0.875rem;  /* UI general */
    --text-md:   1rem;      /* body */
    --text-lg:   1.125rem;  /* subtítulos */
    --text-xl:   1.35rem;   /* títulos de módulo */
    --text-2xl:  1.75rem;   /* valores KPI */

    /* Pesos */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* ── Colores base (Precision Dark) ────────────────────── */
    --color-bg:          #0d1117;  /* Fondo principal */
    --color-surface:     #161b22;  /* Cards, paneles, modales */
    --color-surface-2:   #1c2128;  /* Nivel 2 — tablas alternas */
    --color-border:      #21262d;  /* Bordes sutiles */
    --color-border-muted:#30363d;  /* Bordes activos / énfasis */
    --color-sidebar:     #010409;  /* Sidebar — casi negro */

    /* ── Texto ─────────────────────────────────────────────── */
    --color-text:         #e6edf3;  /* Texto principal */
    --color-text-muted:   #8b949e;  /* Labels, metadata */
    --color-text-subtle:  #6e7681;  /* Menos énfasis */
    --color-text-disabled:#484f58;  /* Deshabilitado */
    --color-text-inverse: #0d1117;  /* Texto sobre fondo claro */

    /* ── Acento técnico (Cyan-Azul) ────────────────────────── */
    --color-accent:       #2ea8e0;
    --color-accent-hover: #58c2f5;
    --color-accent-muted: rgba(46, 168, 224, 0.12);
    --color-accent-ring:  rgba(46, 168, 224, 0.25);

    /* ── Estados ───────────────────────────────────────────── */
    --color-success:      #3fb950;
    --color-success-muted:rgba(63, 185, 80, 0.12);
    --color-warning:      #d29922;
    --color-warning-muted:rgba(210, 153, 34, 0.12);
    --color-danger:       #f85149;
    --color-danger-muted: rgba(248, 81, 73, 0.12);
    --color-info:         #58a6ff;
    --color-info-muted:   rgba(88, 166, 255, 0.12);

    /* ── Alias backward-compat (para código existente) ─────── */
    --primary-color:      var(--color-accent);
    --secondary-color:    var(--color-text-muted);
    --accent-color:       var(--color-accent);
    --accent-hover:       var(--color-accent-hover);
    --text-color:         var(--color-text);
    --text-light:         var(--color-text);
    --bg-color:           var(--color-bg);
    --white:              var(--color-surface);
    --success:            var(--color-success);
    --warning:            var(--color-warning);
    --danger:             var(--color-danger);
    --border-color:       var(--color-border);

    /* ── Componentes: Tablas (modern_tables.css) ───────────── */
    --table-action-bg:           #ffffff;
    --table-action-color:        #90a4ae;
    --table-action-border:       #cfd8dc;
    --table-action-hover-bg:     #ffab91;
    --table-action-hover-color:  #ffffff;
    --table-action-hover-border: #ffab91;
    --table-action-delete-bg:    #ef5350;
    --table-action-delete-border:#ef5350;

    /* Tech sheet */
    --tech-header-bg-start:   #1e293b;
    --tech-header-bg-end:     #334155;
    --tech-header-border:     #475569;
    --tech-grid-bg:           var(--color-surface);
    --tech-grid-pattern:      var(--color-surface-2);
    --tech-section-bg:        var(--color-surface-2);
    --tech-section-color:     var(--color-text-muted);
    --tech-section-hover-bg:  var(--color-border);
    --tech-row-bg:            var(--color-surface-2);
    --tech-row-color:         var(--color-text-muted);
    --tech-row-border:        var(--color-border);
    --tech-actions-bg:        var(--color-surface-2);
    --tech-actions-border:    var(--color-border);
    --table-toolbar-bg:       var(--color-surface);
    --table-toolbar-border:   var(--color-border);

    /* ── Componentes: Form Inputs / Readonly ───────────────── */
    --input-ro-bg:            var(--color-surface-2);
    --input-ro-color:         var(--color-text-muted);
    --input-ro-border:        var(--color-border);
    --input-hover-border:     var(--color-text-muted);
    --input-focus-bg:         #ffffff;
    --input-focus-border:     #3b82f6;
    --input-focus-ring:       rgba(59,130,246,0.15);
    --input-placeholder:      #94a3b8;
    --input-disabled-bg:      #f1f5f9;
    --input-disabled-color:   #64748b;
    --input-disabled-border:  #e2e8f0;
    --input-light-bg:         #ffffff;
    --input-light-color:      #1e293b;
    --input-light-border:     #cbd5e1;
    --input-light-label:      #334155;
    --input-group-bg:         #f1f5f9;
    --input-group-color:      #475569;
    --input-group-border:     #cbd5e1;
    --input-hint-color:       #64748b;

    /* ── Componentes: Topbar & Ribbon ───────────────────────── */
    /* Ribbon group accent colors */
    --color-modules:          #3b82f6;
    --color-nav:              #6366f1;
    --color-edit:             #f59e0b;
    --color-vinc:             #a78bfa;
    --color-file:             #f43f5e;
    --color-layers:           #10b981;

    --topbar-bg:              #363C44;
    --topbar-border:          rgba(255,255,255,0.08);
    --topbar-text:            #94a3b8;
    --topbar-accent:          #3b82f6;
    --topbar-hover-bg:        rgba(255,255,255,0.05);
    --topbar-hover-color:     #ffffff;
    --topbar-active-bg:       rgba(59,130,246,0.15);
    --topbar-active-border:   rgba(59,130,246,0.3);
    --topbar-brand-color:     #ffffff;
    --ribbon-bg:              rgba(45,50,58,0.8);
    --ribbon-bg-light:        rgba(255,255,255,0.15);
    --ribbon-hover-bg:        rgba(255,255,255,0.22);
    --ribbon-border:          rgba(255,255,255,0.08);
    --tool-btn-color:         #94a3b8;
    --tool-btn-hover-bg:      rgba(255,255,255,0.08);
    --tool-btn-hover-color:   #ffffff;
    --tool-btn-hover-border:  rgba(255,255,255,0.1);
    --tool-btn-active-bg:     var(--topbar-accent);
    --tool-btn-active-color:  #ffffff;
    --ribbon-select-bg:       rgba(255,255,255,0.05);
    --ribbon-select-border:   rgba(255,255,255,0.15);
    --ribbon-input-bg:        rgba(30,41,59,0.6);
    --ribbon-input-border:    rgba(255,255,255,0.1);
    --ribbon-input-color:     #e2e8f0;
    --ribbon-dropdown-bg:     #2D323A;
    --ribbon-dropdown-border: rgba(255,255,255,0.1);
    --ribbon-dropdown-color:  #e2e8f0;
    --wms-pill-bg:            rgba(255,255,255,0.05);
    --wms-pill-color:         #94a3b8;
    --wms-pill-hover-bg:      rgba(255,255,255,0.1);
    --wms-pill-hover-color:   #f8fafc;
    --scrollbar-topbar-track: rgba(15,23,42,0.5);
    --scrollbar-topbar-thumb: rgba(255,255,255,0.2);

    /* Tech alias (premium_tech.css compat) */
    --tech-bg:         var(--color-bg);
    --tech-card:       var(--color-surface);
    --tech-border:     var(--color-border);
    --tech-accent:     var(--color-accent);
    --tech-accent-hover: var(--color-accent-hover);
    --tech-dark:       var(--color-sidebar);
    --tech-label:      var(--color-text-muted);
    --tech-text:       var(--color-text);
    --tech-input-bg:   var(--color-bg);
    --tech-ring:       var(--color-accent-ring);

    /* ── Layout ─────────────────────────────────────────────── */
    --sidebar-width:    60px;
    --header-height:    50px;
    --topbar-height:    140px;
    --border-radius:    8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    /* ── Sombras (oscuras, para fondos dark) ──────────────────*/
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:      0 4px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg:      0 12px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
    --shadow-premium: 0 24px 48px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4);

    /* ── Transiciones ───────────────────────────────────────── */
    --transition:     all 0.18s ease-in-out;
    --transition-slow:all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── Tema claro — toggle opcional ──────────────────────────── */
body.theme-light {
    --color-bg:           #f6f8fa;
    --color-surface:      #ffffff;
    --color-surface-2:    #f6f8fa;
    --color-border:       #d0d7de;
    --color-border-muted: #b1bac4;
    --color-sidebar:      #24292f;

    --color-text:         #1f2328;
    --color-text-muted:   #656d76;
    --color-text-subtle:  #8c959f;
    --color-text-disabled:#8c959f;
    --color-text-inverse: #ffffff;

    --color-accent:       #0969da;
    --color-accent-hover: #0550ae;
    --color-accent-muted: rgba(9, 105, 218, 0.1);
    --color-accent-ring:  rgba(9, 105, 218, 0.2);

    --color-success:      #1a7f37;
    --color-success-muted:rgba(26, 127, 55, 0.1);
    --color-warning:      #9a6700;
    --color-warning-muted:rgba(154, 103, 0, 0.1);
    --color-danger:       #d1242f;
    --color-danger-muted: rgba(209, 36, 47, 0.1);

    --shadow-sm:      0 1px 2px rgba(0,0,0,0.07);
    --shadow-md:      0 3px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-lg:      0 8px 16px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.06);
    --shadow-premium: 0 16px 32px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.07);

    --tech-bg:         var(--color-bg);
    --tech-card:       var(--color-surface);
    --tech-border:     var(--color-border);
    --tech-accent:     var(--color-accent);
    --tech-accent-hover: var(--color-accent-hover);
    --tech-label:      var(--color-text-muted);
    --tech-text:       var(--color-text);
    --tech-input-bg:   var(--color-surface);
    --tech-ring:       var(--color-accent-ring);

    --white:           #ffffff;
    --bg-color:        var(--color-bg);
    --text-color:      var(--color-text);
    --accent-color:    var(--color-accent);
}

/* ── Reset mínimo ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--fw-normal);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

/* ── Headings ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

/* ── Clases utilitarias de tipografía ───────────────────────── */
.font-ui   { font-family: var(--font-ui) !important; }
.font-mono { font-family: var(--font-mono) !important; }

/* Texto técnico — datos de precisión (partidas, coords, medidas) */
.text-mono {
    font-family: var(--font-mono);
    font-weight: var(--fw-medium);
    letter-spacing: -0.01em;
    color: var(--color-accent-hover);
}

/* Labels de sección */
.text-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* Texto mutado */
.text-muted { color: var(--color-text-muted) !important; }
.text-subtle { color: var(--color-text-subtle) !important; }
.text-accent { color: var(--color-accent) !important; }

/* ── Scrollbar global ───────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
    background: var(--color-border-muted);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }

/* ── Selección de texto ─────────────────────────────────────── */
::selection {
    background: var(--color-accent-muted);
    color: var(--color-accent-hover);
}

/* ── Focus ring accesible ───────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Formularios base ───────────────────────────────────────── */
input, textarea, select, button {
    font-family: var(--font-ui);
}

code, pre, kbd, samp {
    font-family: var(--font-mono);
}

/* ── Form Controls (Checkboxes/Radios) ─────────────────────── */
.form-check-input {
    background-color: var(--color-surface-2) !important;
    border-color: var(--color-border-muted) !important;
}
.form-check-input:checked {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}