/* ERP ARKSYS — mismo diseño que arksys.mx: "tablero de circuito".
   Azul marino profundo, trazos de circuito animados y acentos en el azul cielo del logotipo.
   Se monta sobre Bootstrap 5.3: el modo oscuro es el de la marca; el claro queda para quien lo prefiera y para imprimir. */
:root {
  --ink: #040b1c; --navy: #0a1d48; --panel: #0c2352; --panel-2: #10306b; --campo: #071433;
  --line: rgba(120, 175, 235, .18); --line-strong: rgba(120, 175, 235, .38);
  --fg: #e9f1fc; --muted: #9db2d2; --sky: #3ba3dc; --glow: #6fd3ff; --ok: #3fd69b; --warn: #ffb547; --bad: #ff7a7a;
  --f-display: "Saira", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
body { font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--f-display); letter-spacing: -.01em; font-weight: 600; }
.num, .font-monospace, code { font-variant-numeric: tabular-nums; }

/* ---------- Fondo animado ---------- */
#erp_circuito { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.erp-main { position: relative; z-index: 1; }

/* ---------- Menú lateral (siempre oscuro, como el panel de arksys.mx) ---------- */
.erp-menu { background: rgba(3, 8, 22, .94) !important; border-right: 1px solid var(--line); z-index: 2; backdrop-filter: blur(6px); width: 240px !important; }
.erp-menu .marca { display: flex !important; align-items: center; gap: 10px; padding: .1rem .4rem 1.1rem !important; color: var(--fg) !important; }
.erp-menu .marca img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong), 0 0 18px rgba(59, 163, 220, .35); }
.erp-menu .marca b { font: 700 18px/1 var(--f-display); letter-spacing: .02em; }
.erp-menu .marca b span { color: var(--sky); }
.erp-menu .marca small { display: block; font: 400 10.5px/1.2 var(--f-mono); color: var(--muted); letter-spacing: .12em; margin-top: 3px; text-transform: uppercase; }
.erp-menu .nav-link { color: var(--muted) !important; font-weight: 500; font-size: 14.5px; border-radius: 10px !important; }
.erp-menu .nav-link:hover { color: var(--fg) !important; background: rgba(59, 163, 220, .08) !important; }
.erp-menu .nav-link.active { color: var(--fg) !important; background: rgba(59, 163, 220, .16) !important; box-shadow: inset 2px 0 0 var(--sky); }
.erp-menu .nav-link i { color: var(--sky); opacity: .85; }
.erp-menu details > summary { font-family: var(--f-mono) !important; color: rgba(157, 178, 210, .7) !important; letter-spacing: .14em !important; }
.erp-menu details > summary::before { content: ""; width: 14px; height: 1px; background: var(--sky); margin-right: 8px; opacity: .7; }
.erp-menu details > summary { justify-content: flex-start !important; }
.erp-menu details > summary::after { margin-left: auto; }
.erp-menu .sep { border-color: var(--line) !important; }
.erp-menu .usuario { font-family: var(--f-mono); font-size: 12px !important; color: var(--muted) !important; }
.erp-tema { background: none; border: 1px solid var(--line-strong); color: var(--muted); border-radius: 999px; padding: 4px 10px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; cursor: pointer; }
.erp-tema:hover { color: var(--glow); border-color: var(--glow); }

/* ---------- Modo oscuro de la marca ---------- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--ink); --bs-body-bg-rgb: 4, 11, 28; --bs-body-color: var(--fg); --bs-body-color-rgb: 233, 241, 252;
  --bs-emphasis-color: #fff; --bs-secondary-color: var(--muted); --bs-tertiary-color: rgba(157, 178, 210, .7);
  --bs-secondary-bg: var(--panel-2); --bs-tertiary-bg: var(--navy);
  --bs-border-color: var(--line); --bs-border-color-translucent: var(--line);
  --bs-primary: var(--sky); --bs-primary-rgb: 59, 163, 220; --bs-link-color: var(--sky); --bs-link-color-rgb: 59, 163, 220; --bs-link-hover-color: var(--glow); --bs-link-hover-color-rgb: 111, 211, 255;
  --bs-primary-text-emphasis: var(--glow); --bs-primary-bg-subtle: rgba(59, 163, 220, .14); --bs-primary-border-subtle: rgba(59, 163, 220, .4);
  --bs-success: var(--ok); --bs-success-rgb: 63, 214, 155; --bs-warning: var(--warn); --bs-warning-rgb: 255, 181, 71; --bs-danger: var(--bad); --bs-danger-rgb: 255, 122, 122;
  --bs-info: var(--glow); --bs-info-rgb: 111, 211, 255;
  --bs-heading-color: var(--fg);
}
html[data-bs-theme="dark"] { background-color: var(--ink); }
[data-bs-theme="dark"] body { background: radial-gradient(1100px 560px at 85% -10%, rgba(31, 92, 190, .35), transparent 65%), linear-gradient(180deg, #061331, var(--ink) 420px) fixed; }
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .list-group-item, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu {
  --bs-card-bg: rgba(12, 35, 82, .9); background-color: rgba(12, 35, 82, .9) !important; color: var(--fg); border-color: var(--line) !important; }
[data-bs-theme="dark"] .card { border: 1px solid var(--line) !important; border-radius: 14px; backdrop-filter: blur(4px); }
[data-bs-theme="dark"] .modal-content { background-color: rgb(12, 35, 82) !important; }   /* ventanitas sólidas (no se transparenta lo de atrás) */
[data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer { background: rgba(10, 29, 72, .6) !important; border-color: var(--line) !important; }
[data-bs-theme="dark"] .shadow-sm, [data-bs-theme="dark"] .shadow { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8) !important; }
[data-bs-theme="dark"] a.card:hover, [data-bs-theme="dark"] .card:has(> a.stretched-link):hover { border-color: var(--line-strong) !important; }
[data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-secondary, [data-bs-theme="dark"] .form-text { color: var(--muted) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--sky) !important; }
[data-bs-theme="dark"] .text-success { color: var(--ok) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--bad) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--warn) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--fg) !important; }

/* Tablas */
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--fg); --bs-table-border-color: var(--line); --bs-table-striped-bg: rgba(59, 163, 220, .04); --bs-table-hover-bg: rgba(59, 163, 220, .07); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--line); }
.table thead th, .table-light th { font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table-light > * > * { --bs-table-bg: rgba(10, 29, 72, .85); --bs-table-color: var(--muted); --bs-table-border-color: var(--line-strong); color: var(--muted) !important; background-color: rgba(10, 29, 72, .85) !important; }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(255, 181, 71, .12); --bs-table-color: var(--fg); }
[data-bs-theme="dark"] .table-danger { --bs-table-bg: rgba(255, 122, 122, .12); --bs-table-color: var(--fg); }
[data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(63, 214, 155, .12); --bs-table-color: var(--fg); }
[data-bs-theme="dark"] .table-primary, [data-bs-theme="dark"] .table-info { --bs-table-bg: rgba(59, 163, 220, .14); --bs-table-color: var(--fg); }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: rgba(157, 178, 210, .1); --bs-table-color: var(--fg); }

/* Formularios */
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text {
  background-color: var(--campo); border-color: var(--line-strong); color: var(--fg); }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: var(--sky); box-shadow: 0 0 0 .2rem rgba(59, 163, 220, .25); background-color: #08183d; }
[data-bs-theme="dark"] .form-control::placeholder { color: rgba(157, 178, 210, .55); }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: rgba(7, 20, 51, .5); color: var(--muted); }
[data-bs-theme="dark"] .form-check-input { background-color: var(--campo); border-color: var(--line-strong); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--sky); border-color: var(--sky); }
.form-label { font-weight: 500; }

/* Botones (redondos como en arksys.mx) */
.btn { border-radius: 999px; font-weight: 600; }
.btn-sm { padding-inline: .8rem; }
.btn-group > .btn, .input-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child, .input-group > .btn:first-child { border-radius: 999px 0 0 999px; }
.btn-group > .btn:last-child, .input-group > .btn:last-child { border-radius: 0 999px 999px 0; }
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: var(--sky); --bs-btn-border-color: var(--sky); --bs-btn-color: #031027; --bs-btn-hover-bg: var(--glow); --bs-btn-hover-border-color: var(--glow); --bs-btn-hover-color: #031027; --bs-btn-active-bg: var(--glow); --bs-btn-active-color: #031027; --bs-btn-disabled-bg: var(--sky); --bs-btn-disabled-border-color: var(--sky); --bs-btn-disabled-color: #031027; }
[data-bs-theme="dark"] .btn-primary:hover { transform: translateY(-1px); }
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: var(--panel-2); --bs-btn-border-color: var(--line-strong); --bs-btn-color: var(--fg); --bs-btn-hover-bg: #15408c; --bs-btn-hover-border-color: var(--sky); --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-outline-dark, [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--fg); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: rgba(59, 163, 220, .12); --bs-btn-hover-border-color: var(--glow); --bs-btn-hover-color: var(--glow); --bs-btn-active-bg: rgba(59, 163, 220, .2); --bs-btn-active-color: var(--glow); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--sky); --bs-btn-border-color: rgba(59, 163, 220, .6); --bs-btn-hover-bg: var(--sky); --bs-btn-hover-border-color: var(--sky); --bs-btn-hover-color: #031027; }
[data-bs-theme="dark"] .btn-success { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-color: #03251a; --bs-btn-hover-bg: #6be6b7; --bs-btn-hover-border-color: #6be6b7; --bs-btn-hover-color: #03251a; }
[data-bs-theme="dark"] .btn-link { --bs-btn-color: var(--sky); --bs-btn-hover-color: var(--glow); }

/* Avisos y etiquetas */
[data-bs-theme="dark"] .alert { border-radius: 12px; border-color: var(--line); }
[data-bs-theme="dark"] .alert-light, [data-bs-theme="dark"] .alert-secondary { --bs-alert-bg: rgba(12, 35, 82, .85); --bs-alert-color: var(--fg); --bs-alert-border-color: var(--line); }
[data-bs-theme="dark"] .alert-info { --bs-alert-bg: rgba(59, 163, 220, .14); --bs-alert-color: #cfeeff; --bs-alert-border-color: rgba(59, 163, 220, .4); }
[data-bs-theme="dark"] .alert-warning { --bs-alert-bg: rgba(255, 181, 71, .12); --bs-alert-color: #ffe2b5; --bs-alert-border-color: rgba(255, 181, 71, .4); }
[data-bs-theme="dark"] .alert-danger { --bs-alert-bg: rgba(255, 122, 122, .12); --bs-alert-color: #ffd2d2; --bs-alert-border-color: rgba(255, 122, 122, .4); }
[data-bs-theme="dark"] .alert-success { --bs-alert-bg: rgba(63, 214, 155, .12); --bs-alert-color: #c9f7e4; --bs-alert-border-color: rgba(63, 214, 155, .4); }
[data-bs-theme="dark"] .alert-link, [data-bs-theme="dark"] .alert a { color: var(--glow); }
.badge { font-family: var(--f-mono); font-weight: 500; letter-spacing: .03em; border-radius: 999px; }
[data-bs-theme="dark"] .text-bg-light { background: rgba(157, 178, 210, .16) !important; color: var(--fg) !important; }
[data-bs-theme="dark"] .text-bg-primary { background: var(--sky) !important; color: #031027 !important; }
[data-bs-theme="dark"] .text-bg-info { background: var(--glow) !important; color: #031027 !important; }
[data-bs-theme="dark"] .text-bg-success { background: var(--ok) !important; color: #03251a !important; }
[data-bs-theme="dark"] .text-bg-warning { background: var(--warn) !important; color: #2a1a00 !important; }
[data-bs-theme="dark"] .text-bg-secondary { background: rgba(157, 178, 210, .3) !important; color: var(--fg) !important; }
[data-bs-theme="dark"] .nav-pills .nav-link { color: var(--muted); border-radius: 999px; }
[data-bs-theme="dark"] .nav-pills .nav-link.active { background: var(--sky); color: #031027; }
[data-bs-theme="dark"] .nav-tabs { --bs-nav-tabs-link-active-bg: rgba(12, 35, 82, .9); --bs-nav-tabs-link-active-color: var(--fg); --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) transparent; }
[data-bs-theme="dark"] hr { border-color: var(--line-strong); opacity: 1; }
[data-bs-theme="dark"] summary { color: var(--fg); }
[data-bs-theme="dark"] canvas#lienzo { background: #fff !important; }   /* las firmas se hacen en blanco */

/* Números grandes de las tarjetas, como los "tiles" del panel */
.erp-main .fs-3.fw-bold, .erp-main .fs-4.fw-bold, .erp-main .fs-5.fw-bold { font-family: var(--f-display); letter-spacing: -.01em; }
[data-bs-theme="dark"] .erp-main .card-body > .small.text-muted:first-child:not(:last-child) { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Pantalla de entrada ---------- */
.erp-login { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; }
.erp-login .card { width: min(400px, calc(100vw - 32px)); position: relative; z-index: 1; }
.erp-login .eyebrow { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); display: flex; justify-content: center; align-items: center; gap: 10px; }
.erp-login .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* ---------- Impresión: siempre en blanco ---------- */
@media print {
  #erp_circuito, .erp-tema { display: none !important; }
  body { background: #fff !important; }
}

/* Cámara (assets/camara.js) */
.btn-foto { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 10px; padding: 6px 14px; font-size: 1.05rem; }
.btn-foto.con-foto { border-color: #27ae60; background: rgba(39, 174, 96, .15); }
.erp-camara .thumbs { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.erp-camara .thumb { position: relative; display: inline-block; }
.erp-camara .thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bs-border-color); }
.erp-camara .thumb button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #e74c3c; color: #fff; font-size: 13px; line-height: 20px; padding: 0; }
.erp-webcam { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.erp-webcam-caja { background: #0b1626; border: 1px solid rgba(120, 175, 235, .38); border-radius: 12px; padding: 12px; width: min(720px, 100%); color: #e6eefb; }
.erp-webcam video { width: 100%; max-height: 70vh; border-radius: 8px; background: #000; transition: opacity .12s; }