/* ==========================================================================
   Lanbi Control · tema «LANBI» v4: barra lateral, páginas a ancho completo,
   plan de taller en verde, medidores, ficha con cabecera morada y pestañas.
   Se carga DESPUÉS de styles.css y lo reemplaza visualmente.
   ========================================================================== */
:root { --side-w: 252px; --ink-d: #1a1f3d; --pur1: #3b1a8c; --pur2: #6d3fe0; --pur3: #b44cf0; --tur1: #0aa7a0; --tur2: #22d3c5; --page: #eef1fa; --card: #fff;
  --grn: #9be58f; --grn-2: #b9f2ad; --grn-3: #7ad76d; --rowline: #1c2b1c; }
body { background: radial-gradient(900px 480px at 100% -5%, #dcd3ff 0, transparent 60%), radial-gradient(800px 460px at 20% 105%, #c9f1ec 0, transparent 60%), var(--page); background-attachment: fixed; color: var(--ink-d); }
.layout { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { max-width: none !important; width: 100%; margin: 0; padding: 18px 24px 100px; }

/* ----- Barra lateral ----- */
.side { width: var(--side-w); flex: none; position: sticky; top: 0; height: 100vh; background: #fff; border-right: 1px solid #e3e6f2; display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(60,40,140,.08); z-index: 40; transition: margin .2s; }
.side-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eef0f8; min-height: 68px; }
.burger { width: 42px; height: 42px; border-radius: 12px; border: 0; background: #f1effc; color: var(--pur1); font-size: 1.3rem; display: grid; place-items: center; }
.burger:hover { background: #e4dcff; }
.burger.m { display: none; }
.side .brand { color: var(--ink-d); font-size: 1.55rem; letter-spacing: .04em; font-weight: 900; gap: 10px; }
.side .brand .logo { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--pur1), var(--pur3)); color: #fff; box-shadow: 0 6px 16px rgba(109,63,224,.45); font-weight: 900; }
.side .brand .bt { background: linear-gradient(90deg, var(--pur1), var(--tur1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side .nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; flex: 1; overflow: auto; }
.side .nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 14px; color: #3b4166; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; font-size: .86rem; text-decoration: none; transition: background .15s, transform .15s; }
.side .nav a:hover { background: #f4f2ff; transform: translateX(2px); }
.side .nav a[aria-current="page"] { background: linear-gradient(90deg, #ece6ff, #f5f2ff); color: var(--pur1); box-shadow: inset 4px 0 0 var(--pur2); }
.side .nav .ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 1.05rem; flex: none; box-shadow: 0 4px 10px rgba(30,30,90,.22); background: var(--g-blue); }
.side .nav a:nth-child(5n+1) .ico { background: var(--g-red); } .side .nav a:nth-child(5n+2) .ico { background: var(--g-violet); } .side .nav a:nth-child(5n+3) .ico { background: var(--g-teal); }
.side .nav a:nth-child(5n+4) .ico { background: var(--g-green); } .side .nav a:nth-child(5n) .ico { background: var(--g-orange); }
.side .nav .lb { flex: 1; } .side .nav .chev { font-size: 1.4rem; color: #9aa0c4; font-weight: 400; }
.side .nav a[aria-current="page"] .chev { transform: rotate(90deg); color: var(--pur2); }
.side-foot { padding: 14px 18px 46px; border-top: 1px solid #eef0f8; color: #8087ad; }
body.side-off .side { margin-left: calc(-1 * var(--side-w)); }
.scrim-side { display: none; }

/* ----- Cabecera de contenido ----- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border-bottom: 1px solid #e3e6f2; min-height: 68px; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--pur1), var(--pur3), var(--tur2), #ffb04a); }
.top .crumb { font-size: 1.15rem; } .top .crumb b { letter-spacing: .02em; text-transform: uppercase; color: var(--pur1); }
.top .iconbtn { color: var(--ink-d); } .top .userchip { background: #f4f2ff; border-color: #ddd5ff; color: var(--ink-d); }
.top .userchip .avatar { background: linear-gradient(135deg, var(--pur1), var(--pur3)); color: #fff; }
.newbtn { background: linear-gradient(135deg, var(--tur1), var(--tur2)); color: #fff; border: 0; font-weight: 800; letter-spacing: .03em; box-shadow: 0 6px 16px rgba(10,167,160,.4); }
.newbtn:hover { filter: brightness(1.07); background: linear-gradient(135deg, var(--tur1), var(--tur2)); }
.btn.teal { background: linear-gradient(135deg, var(--tur1), var(--tur2)); color: #fff; border: 0; font-weight: 800; letter-spacing: .05em; box-shadow: 0 6px 16px rgba(10,167,160,.35); }
.btn.light { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.5); }
.btn.light:hover { background: rgba(255,255,255,.3); }

/* ----- Cabeceras de página genéricas ----- */
.pagehead { background: linear-gradient(110deg, var(--pur1), var(--pur2) 55%, #2ab8d8) !important; box-shadow: 0 10px 26px rgba(80,50,200,.3) !important; }
table.t thead th { background: linear-gradient(90deg, var(--pur1), #5b35c8) !important; }
.chip[aria-pressed="true"], .chip.on, .seg button[aria-pressed="true"], .btn.primary { background: linear-gradient(135deg, var(--pur1), var(--pur2)); border-color: transparent; color: #fff; }
.card, .sec, .kpi, .pedido { border-radius: 16px; }
.hb .r .bar { background: linear-gradient(90deg, var(--pur2), var(--pur3)); }
.hb .r .bar.tail { background: #c5b7f2; }

/* ----- Plan de taller (verde) ----- */
.filtros { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: end; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 6px 18px rgba(60,40,140,.1); margin-bottom: 14px; border-top: 4px solid var(--pur2); }
.fl > span { display: block; font-size: .72rem; font-weight: 800; color: #5b6190; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.fl select, .fl input { min-height: 40px; background: #f3f4fb; border: 1px solid #dfe2f3; min-width: 150px; width: auto; }
.ordhead { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding: 14px 20px; border-radius: 16px 16px 0 0; color: #fff; background: linear-gradient(110deg, #1b7a2c, #2faa3f 50%, #19b9a2); box-shadow: 0 8px 22px rgba(30,140,60,.3); }
.ordhead small { display: block; font-size: .66rem; letter-spacing: .1em; opacity: .85; } .ordhead b { font-size: 1.02rem; }
.ordhead .big b { font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.ordhead .risk { color: #fff !important; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; }
.plan { overflow-x: auto; background: #fff; box-shadow: 0 8px 22px rgba(30,100,60,.15); }
table.tp { border-collapse: collapse; width: 100%; font-size: .86rem; min-width: 1150px; }
table.tp th { padding: 7px 8px; text-align: center; font-weight: 800; letter-spacing: .04em; color: #fff; white-space: nowrap; }
table.tp tr.g1 th { background: #17331c; border-bottom: 1px solid #3a6a43; font-size: .72rem; }
table.tp tr.g2 th { background: #1f4a28; font-size: .72rem; }
table.tp .sep { border-left: 2px solid var(--rowline); }
table.tp td { padding: 6px 8px; border-bottom: 1px solid #1c2b1c; text-align: center; }
table.tp td.gname { text-align: left; font-weight: 800; letter-spacing: .02em; }
tr.rowp { background: linear-gradient(90deg, var(--grn), var(--grn-2)); cursor: pointer; transition: filter .12s; color: #0f2a12; }
tr.rowp:nth-child(even) { background: linear-gradient(90deg, #aef0a2, #c8f7be); }
tr.rowp:hover { filter: brightness(.95) saturate(1.2); }
tr.rowp.sel { outline: 3px solid var(--pur2); outline-offset: -3px; filter: saturate(1.3); }
tr.rowp.hecho { background: linear-gradient(90deg, #74d36a, #8fe085); }
td.n { font-variant-numeric: tabular-nums; } td.neg { color: #b4141b; font-weight: 800; } td.pos { color: #11691b; font-weight: 800; }
td.late { color: #c4121b; font-weight: 900; } td.real { font-weight: 800; color: #0b6e1a; }
.ncp { background: #e5383b; color: #fff; padding: 2px 9px; border-radius: 999px; font-weight: 800; font-size: .76rem; }
.mbar { position: relative; height: 22px; min-width: 110px; background: rgba(255,255,255,.65); border-radius: 11px; overflow: hidden; border: 1px solid rgba(0,0,0,.2); }
.mbar i { position: absolute; inset: 0 auto 0 0; display: block; } .mbar i.ok { background: linear-gradient(90deg, #1ea84b, #3fd16e); } .mbar i.mid { background: linear-gradient(90deg, #f0a81c, #ffd45a); } .mbar i.low { background: linear-gradient(90deg, #e5383b, #ff8a65); }
.mbar b { position: relative; font-size: .76rem; line-height: 22px; color: #0b1b0b; text-shadow: 0 0 3px #fff; }
table.tp tr.tot td { background: #17331c; color: #fff; font-weight: 800; border-bottom: 0; }
table.tp td.empty { background: #fff; color: #667; padding: 18px; }
.matpanel { margin-top: 18px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(60,40,140,.14); }
.mathead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; background: linear-gradient(110deg, var(--pur1), var(--pur2)); color: #fff; }
.mathead .hl { flex: 1; } .mathead .muted { color: #e0d6ff; }
.pills { display: flex; gap: 8px; } .pill { border: 0; padding: 7px 18px; border-radius: 999px; font-weight: 800; letter-spacing: .04em; background: rgba(255,255,255,.18); color: #fff; }
.pill[aria-pressed="true"] { background: #fff; color: var(--pur1); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.matpanel table.tp { min-width: 900px; } .matpanel table.tp tr.g2 th { background: #efeafd; color: var(--pur1); border-bottom: 2px solid var(--pur2); }
tr.rowm td { background: #fff; border-bottom: 1px solid #ece9fa; text-align: left; } tr.rowm:nth-child(even) td { background: #faf8ff; }
tr.rowm td.n { text-align: right; } td.ref { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--pur1); }

/* ----- Cuadro de control ----- */
.panel4 { border-radius: 20px; padding: 18px 20px 22px; margin-bottom: 18px; background: #fff; box-shadow: 0 10px 28px rgba(60,40,140,.14); position: relative; overflow: hidden; }
.panel4::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--pur1), var(--pur3), var(--tur2)); }
.panel4.sv::before { background: linear-gradient(90deg, #e0620e, #ffb04a, #ff7aa8); }
.panel4 h2 { font-size: 1.05rem; letter-spacing: .12em; color: #4a4f7c; margin: 4px 0 6px; font-weight: 900; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; margin: 6px 0 14px; }
.gauge { text-align: center; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, #faf9ff, #f1f3fb); }
.gauge svg { width: 100%; max-width: 230px; height: auto; } .gauge .gt { font-size: 10px; fill: #8a90b5; } .gauge-arc { filter: drop-shadow(0 3px 5px rgba(60,40,140,.3)); }
.gv { font-size: 2.05rem; font-weight: 900; letter-spacing: -.02em; margin-top: -10px; line-height: 1; } .gl { font-weight: 800; color: #2c3260; margin-top: 4px; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; } .gs { font-size: .76rem; color: #7a80a6; }
.tiles4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile4 { position: relative; display: block; text-decoration: none; color: #fff; border-radius: 16px; padding: 14px 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(30,30,100,.22); transition: transform .15s; }
.tile4:hover { transform: translateY(-3px); } .tile4::after { content: ''; position: absolute; right: -22px; bottom: -30px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.17); }
.tile4 .ti { position: absolute; right: 12px; top: 10px; font-size: 1.3rem; opacity: .55; } .tile4 .tv { white-space: nowrap; font-size: 1.7rem; padding-right: 34px; font-weight: 900; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0,0,0,.2); } .tile4 .tl { font-size: .78rem; font-weight: 750; letter-spacing: .03em; opacity: .95; text-transform: uppercase; }

/* ----- Ficha de incidencia a pantalla casi completa ----- */
.drawer.ficha { width: min(1180px, 100%); background: var(--page); }
.drawer.ficha .dh { background: linear-gradient(110deg, #3b1a8c, #6d3fe0 55%, #b44cf0) !important; color: #fff; padding: 16px 22px; gap: 14px; box-shadow: 0 8px 22px rgba(80,40,200,.35); }
.drawer.ficha .dh .tiny { letter-spacing: .12em; font-weight: 800; color: #e6dcff; } .drawer.ficha .dh .ico-t { font-size: 2rem; }
.drawer.ficha .dh input[type=text] { font-size: 1.25rem; font-weight: 800; background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35); }
.drawer.ficha .dh h2 { color: #fff; } .drawer.ficha .dh .tag.st { background: #fff; color: var(--pur1); font-weight: 800; } .drawer.ficha .dh .small { color: #d5ffe9; }
.back { border: 0; background: rgba(255,255,255,.18); color: #fff; font-weight: 800; border-radius: 12px; padding: 8px 14px; } .back:hover { background: rgba(255,255,255,.3); }
.fmeta { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 12px 22px; background: #fff; border-bottom: 1px solid #e3e6f2; }
.mi { display: flex; align-items: center; gap: 9px; } .mic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #efeafd; color: var(--pur1); font-size: .95rem; flex: none; }
.mi small { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #7d83aa; font-weight: 800; } .mi b { font-size: .92rem; }
.ftabs { display: flex; gap: 6px; padding: 10px 22px 0; background: #fff; border-bottom: 3px solid var(--pur2); position: sticky; top: 0; z-index: 5; overflow-x: auto; }
.ftabs button { border: 0; background: #f1effc; color: #55598a; font-weight: 900; letter-spacing: .08em; padding: 11px 26px; border-radius: 14px 14px 0 0; }
.ftabs button[aria-selected="true"] { background: linear-gradient(135deg, var(--pur1), var(--pur2)); color: #fff; box-shadow: 0 -4px 14px rgba(109,63,224,.35); }
.drawer.ficha .db { padding: 18px 22px 40px; } .drawer.ficha .sec { background: #fff; }
.drawer.ficha input[type=text], .drawer.ficha input[type=number], .drawer.ficha input[type=date], .drawer.ficha input[type=datetime-local], .drawer.ficha select, .drawer.ficha textarea { background: #eceef6; border: 1px solid #d9dcec; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e1e3f0; } .mrow .k { flex: 1; color: #6c7298; font-size: .85rem; }

/* ----- Listas y administración ----- */
.seg { border: 0; background: transparent; gap: 8px; } .seg button { border-radius: 999px; border: 1px solid #d8d3f5; margin: 0; background: #fff; }
.seg button[aria-pressed="true"] { background: linear-gradient(135deg, var(--pur1), var(--pur2)); color: #fff; border-color: transparent; }
.card.pad0 { border-radius: 16px; }
table.t tbody tr:hover { background: #f4f0ff; }

/* ----- Acceso (solo «cambiar de persona») ----- */
#app > .ident { background: radial-gradient(700px 400px at 12% 8%, rgba(180,76,240,.5), transparent 60%), radial-gradient(700px 420px at 92% 12%, rgba(34,211,197,.45), transparent 60%), linear-gradient(160deg, #1a0f4a, #3b1a8c 60%, #6d3fe0) !important; }

/* ----- Móvil ----- */
@media (max-width: 900px) {
  .side { position: fixed; left: 0; top: 0; margin-left: calc(-1 * var(--side-w)); } body.side-open .side { margin-left: 0; }
  body.side-open .scrim-side { display: block; position: fixed; inset: 0; background: rgba(10,10,40,.45); z-index: 35; }
  .burger.m { display: grid; } .side-top .burger { display: none; } main { padding: 14px 12px 100px; } .top { padding: 8px 12px; } .top .nm { display: none; }
  .newbtn { display: none; } .drawer.ficha .dh { flex-wrap: wrap; } .ftabs button { padding: 10px 16px; }
}
@media print { .side, .top, .fab { display: none !important; } }

/* La demostración se ve siempre en claro (mismos colores aunque el sistema esté en modo oscuro). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: light; --bg: #f4f4f1; --surface: #ffffff; --surface-2: #f0efec; --ink: #0b0b0b; --ink-2: #52514e; --muted: #75746f;
    --line: #e3e2dd; --line-2: #d3d2cc; --accent: #1c5cab; --accent-ink: #fff; --accent-soft: #e4eefb; --ok-ink: #006300; --warn-ink: #7a4f00; --bad-ink: #a52727;
    --ok-soft: #e3f4e3; --warn-soft: #fdf1d3; --bad-soft: #fbe4e4; --navy: #12305a; --navy-2: #1d4f91; }
  :root:not([data-theme="light"]) body { background: radial-gradient(900px 480px at 100% -5%, #dcd3ff 0, transparent 60%), radial-gradient(800px 460px at 20% 105%, #c9f1ec 0, transparent 60%), var(--page); }
  :root:not([data-theme="light"]) .pedido.rojo { background: linear-gradient(90deg, #ffe9e7, var(--surface) 38%); } :root:not([data-theme="light"]) .pedido.ambar { background: linear-gradient(90deg, #fff3d1, var(--surface) 38%); }
  :root:not([data-theme="light"]) .pedido.verde { background: linear-gradient(90deg, #e1f6da, var(--surface) 38%); } :root:not([data-theme="light"]) .grid.g2 > .card { background: linear-gradient(180deg, #fff, #f7faff); }
  :root:not([data-theme="light"]) .drawer, :root:not([data-theme="light"]) .drawer.ficha { background: var(--page); } :root:not([data-theme="light"]) .pnum { color: var(--navy-2); }
}
@media (max-width: 760px) {
  .side .nav { position: static; flex-direction: column; justify-content: flex-start; background: none; border-top: 0; padding: 14px 12px; }
  .side .nav a { flex-direction: row; flex: none; justify-content: flex-start; font-size: .86rem; padding: 8px 12px; min-height: 52px; gap: 12px; }
  main { padding-bottom: 100px; } .fab { bottom: 16px; }
}
@media (min-width: 901px) { .fab { display: none !important; } }