/* ===== Inventario Bacon - Fluent 2 (offline, solo system fonts) ===== */
:root{
  /* Brand */
  --brand:#0F6CBD; --brand-hover:#115EA3; --brand-press:#0F548C; --on-brand:#FFFFFF;
  --brand-soft:#EBF3FC; --brand-ring:#0F6CBD;
  /* Neutrales */
  --bg:#F5F5F5; --surface:#FFFFFF; --surface2:#FAFAFA; --surface-hover:#F5F5F5; --surface-press:#E0E0E0;
  --stroke:#E0E0E0; --stroke-strong:#D1D1D1; --stroke-input:#616161;
  --tx:#242424; --tx2:#616161; --tx3:#707070; --tx-disabled:#BDBDBD;
  /* Semánticos */
  --danger:#C50F1F; --danger-soft:#FDF3F4; --success:#107C10;
  /* Estados: bg / texto / borde */
  --e-nuevo-bg:#EBF3FC;  --e-nuevo-tx:#0F548C;  --e-nuevo-bd:#B4D6FA;
  --e-uso-bg:#F1FAF1;    --e-uso-tx:#0E700E;    --e-uso-bd:#9FD89F;
  --e-stock-bg:#F0F0F0;  --e-stock-tx:#424242;  --e-stock-bd:#D1D1D1;
  --e-rep-bg:#FDF6F3;    --e-rep-tx:#BC4B09;    --e-rep-bd:#F9D3BA;
  --e-baja-bg:#FDF3F4;   --e-baja-tx:#B10E1C;   --e-baja-bd:#EEACB2;
  /* Forma y elevación */
  --r-ctl:4px; --r-card:8px; --r-dlg:8px;
  --sh2:0 0 2px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.14);
  --sh4:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.14);
  --sh8:0 0 2px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.14);
  --sh16:0 0 2px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.14);
  /* Movimiento */
  --ease:cubic-bezier(.33,0,.67,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.9,.1,1,.2);
  --t-fast:100ms; --t-norm:160ms; --t-slow:250ms;
  --nav-h:56px; --tap:48px; --bar-h:52px;
  --font:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans",sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#479EF5; --brand-hover:#62ABF5; --brand-press:#2886DE; --on-brand:#0A0A0A;
    --brand-soft:#0C3B5E; --brand-ring:#479EF5;
    --bg:#1F1F1F; --surface:#292929; --surface2:#242424; --surface-hover:#333333; --surface-press:#3D3D3D;
    --stroke:#3D3D3D; --stroke-strong:#525252; --stroke-input:#ADADAD;
    --tx:#FFFFFF; --tx2:#D6D6D6; --tx3:#ADADAD; --tx-disabled:#5C5C5C;
    --danger:#DC626D; --danger-soft:#3B2B2D; --success:#54B054;
    --e-nuevo-bg:#0C3B5E;  --e-nuevo-tx:#96C6FA;  --e-nuevo-bd:#0F548C;
    --e-uso-bg:#0E2F0E;    --e-uso-tx:#9FD89F;    --e-uso-bd:#107C10;
    --e-stock-bg:#333333;  --e-stock-tx:#D6D6D6;  --e-stock-bd:#525252;
    --e-rep-bg:#411200;    --e-rep-tx:#F7A872;    --e-rep-bd:#8E3200;
    --e-baja-bg:#3B1114;   --e-baja-tx:#EEACB2;   --e-baja-bd:#9E1A27;
    --sh2:0 0 2px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.28);
    --sh4:0 0 2px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.28);
    --sh8:0 0 2px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.28);
    --sh16:0 0 2px rgba(0,0,0,.24),0 8px 16px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --brand:#479EF5; --brand-hover:#62ABF5; --brand-press:#2886DE; --on-brand:#0A0A0A;
  --brand-soft:#0C3B5E; --brand-ring:#479EF5;
  --bg:#1F1F1F; --surface:#292929; --surface2:#242424; --surface-hover:#333333; --surface-press:#3D3D3D;
  --stroke:#3D3D3D; --stroke-strong:#525252; --stroke-input:#ADADAD;
  --tx:#FFFFFF; --tx2:#D6D6D6; --tx3:#ADADAD; --tx-disabled:#5C5C5C;
  --danger:#DC626D; --danger-soft:#3B2B2D; --success:#54B054;
  --e-nuevo-bg:#0C3B5E;  --e-nuevo-tx:#96C6FA;  --e-nuevo-bd:#0F548C;
  --e-uso-bg:#0E2F0E;    --e-uso-tx:#9FD89F;    --e-uso-bd:#107C10;
  --e-stock-bg:#333333;  --e-stock-tx:#D6D6D6;  --e-stock-bd:#525252;
  --e-rep-bg:#411200;    --e-rep-tx:#F7A872;    --e-rep-bd:#8E3200;
  --e-baja-bg:#3B1114;   --e-baja-tx:#EEACB2;   --e-baja-bd:#9E1A27;
  --sh2:0 0 2px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.28);
  --sh4:0 0 2px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.28);
  --sh8:0 0 2px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.28);
  --sh16:0 0 2px rgba(0,0,0,.24),0 8px 16px rgba(0,0,0,.28);
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 14px/20px var(--font);background:var(--bg);color:var(--tx);
  padding-bottom:calc(var(--nav-h) + 88px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
.oculto{display:none !important}
.mut,small{color:var(--tx2)}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Foco Fluent: doble anillo (interior blanco/negro, exterior marca) */
:focus-visible{outline:2px solid var(--tx);outline-offset:1px;box-shadow:0 0 0 4px var(--brand-ring)}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:none;outline:none}

/* ---------- Animaciones de vista ---------- */
@keyframes f-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes f-fade{from{opacity:0}to{opacity:1}}
@keyframes f-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes f-shimmer{to{background-position:-200% 0}}
#v-lista:not(.oculto),#v-form:not(.oculto),#v-informe:not(.oculto){animation:f-in var(--t-slow) var(--ease-out) both}
#lista.anim .item,#lista.anim .vacio{animation:f-in 220ms var(--ease-out) both}
#lista.anim .item:nth-child(2){animation-delay:30ms}#lista.anim .item:nth-child(3){animation-delay:60ms}
#lista.anim .item:nth-child(4){animation-delay:90ms}#lista.anim .item:nth-child(5){animation-delay:120ms}
#lista.anim .item:nth-child(6){animation-delay:150ms}#lista.anim .item:nth-child(n+7){animation-delay:180ms}

/* ---------- Barra superior (CommandBar, Mica sutil) ---------- */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;
  min-height:calc(var(--bar-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 16px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--stroke);color:var(--tx)}
header h1{flex:1;margin:0;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.005em}
#b-atras{display:none;width:40px;height:40px;margin-left:-8px;margin-right:4px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--tx);align-items:center;justify-content:center;padding:0;transition:background var(--t-fast) var(--ease)}
body:has(#v-form:not(.oculto)) #b-atras{display:inline-flex;animation:f-fade var(--t-norm) var(--ease-out)}
#b-atras:hover{background:var(--surface-hover)}#b-atras:active{background:var(--surface-press)}
main{max-width:720px;margin:0 auto;padding:16px}

/* ---------- Inputs ---------- */
input,select,textarea{width:100%;min-height:40px;padding:8px 12px;background:var(--surface);color:var(--tx);
  border:1px solid var(--stroke-strong);border-bottom-color:var(--stroke-input);border-radius:var(--r-ctl);
  appearance:none;-webkit-appearance:none;position:relative;
  transition:border-color var(--t-norm) var(--ease),background var(--t-norm) var(--ease),box-shadow var(--t-norm) var(--ease-out)}
input:hover,select:hover,textarea:hover{border-color:var(--stroke-input)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--stroke-strong);border-bottom-color:var(--brand);box-shadow:inset 0 -1px 0 var(--brand)}
input::placeholder,textarea::placeholder{color:var(--tx3)}
textarea{min-height:88px;padding-top:10px;resize:vertical}
select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23888'%3E%3Cpath d='M4.22 7.72a.75.75 0 011.06 0L10 12.44l4.72-4.72a.75.75 0 111.06 1.06l-5.25 5.25a.75.75 0 01-1.06 0L4.22 8.78a.75.75 0 010-1.06z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
select option{background:var(--surface);color:var(--tx)}
label{display:block;font-size:14px;font-weight:600;color:var(--tx);margin:16px 0 4px}
label:first-child{margin-top:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:0}
.row2 label{margin-top:16px}
.buscador{position:relative}
.buscador svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tx2);pointer-events:none}
#buscar{padding-left:38px;min-height:44px}
#v-lista .row2{margin-top:8px;gap:8px}
#v-lista .row2 select{min-height:40px;font-size:14px;text-overflow:ellipsis}
#contador{margin:16px 2px 8px;font-size:12px;line-height:16px;font-weight:600;color:var(--tx2)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 20px;border:1px solid transparent;border-radius:var(--r-ctl);
  background:var(--brand);color:var(--on-brand);font-weight:600;font-size:14px;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-norm) var(--ease)}
.btn:hover{background:var(--brand-hover)}
.btn:active{background:var(--brand-press);transform:scale(.98)}
.btn.sec{background:var(--surface);color:var(--tx);border-color:var(--stroke-strong)}
.btn.sec:hover{background:var(--surface-hover);border-color:var(--stroke-input)}
.btn.sec:active{background:var(--surface-press)}
.btn.del{background:var(--surface);color:var(--danger);border-color:var(--danger)}
.btn.del:hover{background:var(--danger-soft)}.btn.del:active{background:var(--danger-soft);filter:brightness(.95)}
.btn.sm{min-height:32px;padding:4px 12px}
.btn:disabled{background:var(--surface-hover);color:var(--tx-disabled);border-color:var(--stroke);transform:none}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.acciones .btn{flex:1;min-width:140px;min-height:44px}

/* Botón extendido "+ Nuevo equipo" (flotante) */
.fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));z-index:15;height:48px;min-height:0;padding:0 20px 0 16px;border-radius:var(--r-card);
  box-shadow:var(--sh8);font-size:14px;gap:8px;animation:f-pop var(--t-slow) var(--ease-out) both}
.fab::after{content:"Nuevo equipo"}
.fab:hover{box-shadow:var(--sh16)}
.fab svg{width:20px;height:20px;stroke-width:2.25}

/* ---------- Tarjetas y lista ---------- */
.card{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-card);padding:12px;margin-bottom:8px;box-shadow:var(--sh2)}
.item{display:flex;gap:12px;align-items:center;min-height:80px;cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-norm) var(--ease)}
.item:hover{background:var(--surface-hover);box-shadow:var(--sh4)}
.item:active{background:var(--surface-press);transform:scale(.99)}
.item::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:2px;background:var(--brand);transform:translateY(-50%);transition:height var(--t-norm) var(--ease-out)}
.item:active::before{height:32px}
.thumb{width:64px;height:64px;border-radius:var(--r-ctl);object-fit:cover;flex:none;background:var(--surface-hover);display:flex;align-items:center;justify-content:center;color:var(--tx3);border:1px solid var(--stroke)}
.thumb svg{width:28px;height:28px}
.item .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item b{font-size:16px;line-height:22px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item small{font-size:12px;line-height:16px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.item .tag{align-self:flex-start;margin-top:4px}

/* ---------- Badges de estado ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px 0 6px;border-radius:var(--r-ctl);border:1px solid var(--e-stock-bd);
  font-size:12px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--e-stock-bg);color:var(--e-stock-tx)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.e-nuevo{background:var(--e-nuevo-bg);color:var(--e-nuevo-tx);border-color:var(--e-nuevo-bd)}
.tag.e-uso{background:var(--e-uso-bg);color:var(--e-uso-tx);border-color:var(--e-uso-bd)}
.tag.e-stock{background:var(--e-stock-bg);color:var(--e-stock-tx);border-color:var(--e-stock-bd)}
.tag.e-reparacion{background:var(--e-rep-bg);color:var(--e-rep-tx);border-color:var(--e-rep-bd)}
.tag.e-baja{background:var(--e-baja-bg);color:var(--e-baja-tx);border-color:var(--e-baja-bd)}

/* ---------- Navegación inferior (TabList con indicador) ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:18;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;justify-content:center;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--stroke)}
.nav button{flex:1;max-width:280px;position:relative;border:0;background:transparent;color:var(--tx2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:12px;line-height:16px;font-weight:400;min-height:var(--nav-h);transition:background var(--t-fast) var(--ease),color var(--t-norm) var(--ease)}
.nav button .pill{display:flex;transition:transform var(--t-norm) var(--ease-out)}
.nav button:hover{background:var(--surface-hover)}.nav button:active{background:var(--surface-press)}
.nav button:active .pill{transform:scale(.9)}
.nav button::before{content:"";position:absolute;top:0;left:50%;width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--brand);transform:translateX(-50%) scaleX(0);transition:transform var(--t-slow) var(--ease-out)}
body:has(#v-lista:not(.oculto)) #b-lista,body:has(#v-informe:not(.oculto)) #b-informe,body:has(#v-consulta:not(.oculto)) #b-consulta{color:var(--brand);font-weight:600}
body:has(#v-lista:not(.oculto)) #b-lista::before,body:has(#v-informe:not(.oculto)) #b-informe::before,body:has(#v-consulta:not(.oculto)) #b-consulta::before{transform:translateX(-50%) scaleX(1)}
body:has(#v-form:not(.oculto)) .nav,body:has(#v-form:not(.oculto)) .fab{display:none}
body:has(#v-form:not(.oculto)){padding-bottom:calc(24px + env(safe-area-inset-bottom))}

/* ---------- Formulario ---------- */
#form.card{padding:16px;box-shadow:var(--sh4)}
.foto-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:176px;margin:0;
  border:1px dashed var(--stroke-input);border-radius:var(--r-card);background:var(--surface2);color:var(--brand);font-weight:600;text-align:center;cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-norm) var(--ease)}
.foto-box:hover{background:var(--brand-soft);border-color:var(--brand)}
.foto-box:active{background:var(--brand-soft);transform:scale(.99)}
.foto-box svg{width:40px;height:40px;stroke-width:1.4}
#foto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#foto:focus-visible + .foto-box{outline:2px solid var(--tx);outline-offset:1px;box-shadow:0 0 0 4px var(--brand-ring)}
#foto-prev{display:none;width:100%;max-height:320px;object-fit:cover;border-radius:var(--r-card);background:var(--surface-hover);border:1px solid var(--stroke);margin-bottom:8px}
#foto-prev[src]:not([src=""]){animation:f-fade var(--t-slow) var(--ease-out)}
.foto-box.tiene{min-height:40px;flex-direction:row;border-style:solid;border-color:var(--stroke-strong);color:var(--tx);background:var(--surface);font-weight:600;margin-top:0;border-radius:var(--r-ctl)}
.foto-box.tiene:hover{background:var(--surface-hover);border-color:var(--stroke-input)}
.foto-box.tiene svg{width:20px;height:20px}
#quitar-foto{width:100%;margin-top:8px;color:var(--danger);border-color:var(--stroke-strong);background:var(--surface)}
#nombre:not(.oculto){animation:f-in var(--t-norm) var(--ease-out)}
#form .acciones{margin:24px 0 0 !important;flex-direction:column-reverse}
#form .acciones .btn{width:100%;min-height:48px}

/* ---------- Estado vacío ---------- */
.vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:56px 24px;color:var(--tx2)}
.vacio svg{width:64px;height:64px;stroke-width:1;color:var(--stroke-strong);margin-bottom:8px}
.vacio b{color:var(--tx);font-size:16px;line-height:22px;font-weight:600}
p.mut:not(#contador){text-align:center;padding:40px 16px}

/* ---------- Informe ---------- */
#v-informe .acciones{margin-bottom:8px}
#b-excel{background:var(--brand)}
#b-pdf,#b-resp,#b-rest{background:var(--surface);color:var(--tx);border-color:var(--stroke-strong)}
#b-pdf:hover,#b-resp:hover,#b-rest:hover{background:var(--surface-hover);border-color:var(--stroke-input)}
#b-pdf:active,#b-resp:active,#b-rest:active{background:var(--surface-press)}
#v-informe .acciones + .acciones{margin-bottom:16px}
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0}
.tabla h3{margin:0;padding:12px 16px;font-size:16px;line-height:22px;font-weight:600;border-bottom:1px solid var(--stroke);position:sticky;left:0}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px}
th,td{padding:8px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--stroke);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
th{background:#000;color:#fff;font-size:12px;font-weight:600;position:sticky;top:0}
tr:last-child td{border-bottom:0}
tbody tr:hover td,tr:hover td{background:var(--surface-hover)}
td:first-child,th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--stroke)}
th:first-child{background:#000;z-index:2}
td img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-ctl);display:block}

/* ---------- Toast ---------- */
.toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;max-width:min(420px,calc(100% - 32px));bottom:calc(var(--nav-h) + 80px + env(safe-area-inset-bottom));z-index:40;
  background:var(--surface);color:var(--tx);border:1px solid var(--stroke);border-left:3px solid var(--brand);padding:12px 16px;border-radius:var(--r-card);
  font-size:14px;line-height:20px;box-shadow:var(--sh16);animation:f-pop 220ms var(--ease-out) both;pointer-events:none}
body:has(#v-form:not(.oculto)) .toast{bottom:calc(24px + env(safe-area-inset-bottom))}

/* ---------- Dialog Fluent (opcional, si se reemplaza confirm()) ---------- */
.dlg-fondo{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px;animation:f-fade var(--t-norm) var(--ease)}
.dlg{width:100%;max-width:360px;background:var(--surface);border-radius:var(--r-dlg);box-shadow:var(--sh16);padding:24px;animation:f-pop var(--t-slow) var(--ease-out)}
.dlg h2{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:600}
.dlg p{margin:0 0 24px;color:var(--tx2)}
.dlg .acciones{justify-content:flex-end;margin:0;flex-wrap:nowrap}.dlg .acciones .btn{flex:0 1 auto;min-width:96px}

/* ---------- Skeleton opcional ---------- */
.skel{height:80px;border-radius:var(--r-card);margin-bottom:8px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hover) 37%,var(--surface) 63%);background-size:200% 100%;animation:f-shimmer 1.4s linear infinite}

/* ---------- Pantallas anchas ---------- */
@media (min-width:720px){.fab{right:calc(50% - 360px + 16px)}}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0ms !important;transition-duration:1ms !important}
}

/* ===== Chips de color ===== */
.colores{display:flex;flex-wrap:wrap;gap:8px}
.chip-color{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--stroke-strong);border-radius:var(--r-ctl);background:var(--surface);color:var(--tx);font:inherit;font-size:14px;cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.chip-color i{width:16px;height:16px;border-radius:50%;border:1px solid var(--stroke-strong);flex:none}
.chip-color:hover{background:var(--surface-hover)}
.chip-color:active{transform:scale(.97);background:var(--surface-press)}
.chip-color.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600;box-shadow:inset 0 0 0 1px var(--brand)}
.chip-color:focus-visible{outline:2px solid var(--brand-ring);outline-offset:2px}

/* ===== Logo IB ===== */
.logo{width:32px;height:32px;border-radius:8px;flex:none;box-shadow:0 0 0 1px var(--stroke)}
body:has(#v-form:not(.oculto)) .logo{display:none}

/* ===== Botón de tema ===== */
#b-tema{margin-left:auto;width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background var(--t-fast) var(--ease)}
#b-tema:hover{background:var(--surface-hover)}
#b-tema:active{background:var(--surface-press)}
#b-tema .luna{display:none}
:root[data-theme="dark"] #b-tema .sol{display:none}
:root[data-theme="dark"] #b-tema .luna{display:inline}

/* Equipos cargados en el celular, pendientes de enviar */
.item.pend{box-shadow:inset 3px 0 0 var(--e-rep-tx)}
.tag.pend{background:var(--e-rep-bg);color:var(--e-rep-tx);border-color:var(--e-rep-bd)}
.aviso{display:flex;flex-direction:column;gap:8px;margin:8px 0;background:var(--e-rep-bg);color:var(--e-rep-tx);border:1px solid var(--e-rep-bd);font-size:14px}
#pend-bar{flex-direction:row;align-items:center;justify-content:space-between}
#pend-bar.oculto{display:none}
.chk{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:14px}
.chk input{width:20px;height:20px}

.logo-informe{display:block;height:44px;width:auto;padding:4px 8px;background:#fff;border-radius:var(--r-ctl);border:1px solid var(--stroke)}
.tabla .cab{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--stroke);position:sticky;left:0}
.tabla .cab h3{padding:0;border:0;margin:0}

/* Varias fotos por equipo */
.fotos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.fotos:empty{display:none}
.foto-mini{position:relative;width:96px;height:96px}
.foto-mini img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-ctl);border:1px solid var(--stroke);background:var(--surface-hover)}
.foto-mini img[data-p]{cursor:pointer}
.foto-mini.principal img{border:2px solid var(--brand)}
.foto-mini em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--brand);color:#fff;pointer-events:none}
.foto-mini button{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:1px solid var(--stroke-strong);background:var(--surface);color:var(--danger);font-size:18px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh4)}

/* Detalle de equipo */
.det-cod{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--tx2)}
.det-tit{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.det-tit h2{margin:0;font-size:20px;line-height:28px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.det-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;padding:8px}
.det-galeria:empty{display:none}
.det-foto{padding:0;border:1px solid var(--stroke);border-radius:var(--r-ctl);overflow:hidden;aspect-ratio:1;background:var(--surface-hover);cursor:pointer}
.det-foto img{width:100%;height:100%;object-fit:cover;display:block}
.det-datos{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.det-datos dt{color:var(--tx2);font-size:13px}
.det-datos dd{margin:0;overflow-wrap:anywhere}
.mov{padding:8px 0;border-bottom:1px solid var(--stroke);font-size:14px}
.mov:last-child{border-bottom:0}
.mov ul{margin:4px 0 0;padding-left:18px;color:var(--tx2)}
.visor{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.visor img{max-width:100%;max-height:100%;object-fit:contain}
.visor-n{position:absolute;top:16px;left:16px;color:#fff;font-size:14px}
.visor-b{position:absolute;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.visor-b.ant{left:8px;top:50%}.visor-b.sig{right:8px;top:50%}.visor-b.cer{right:12px;top:12px}

/* Inventarios */
.sec-t{margin:16px 0 8px;font-size:16px;font-weight:600}
.item.inv .info{gap:3px}
.dlg label{display:block;margin:12px 0 4px;font-size:14px}
.dlg form,form.dlg{margin:0}

/* Ingreso */
.auth{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.auth-card{width:100%;max-width:380px;margin:auto;background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-card);box-shadow:var(--sh16);padding:24px;display:flex;flex-direction:column;gap:8px}
.auth-card h2{margin:0;font-size:20px;line-height:28px;font-weight:600}
.auth-card label{margin-top:4px;font-size:14px}
.auth-logo{display:block;height:56px;width:auto;align-self:center;padding:4px 12px;background:#fff;border-radius:var(--r-ctl);border:1px solid var(--stroke);margin-bottom:8px}
.clave-box{position:relative;display:flex}.clave-box input{flex:1;padding-right:48px}
.clave-box .ojo{position:absolute;right:0;top:0;bottom:0;width:46px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--mut,#666);cursor:pointer;border-radius:0 6px 6px 0}
.clave-box .ojo:hover,.clave-box .ojo:focus-visible{color:inherit}
.auth-error{min-height:20px;margin:0;color:var(--danger);font-size:14px}
.auth-card .btn{min-height:44px}
body.sin-sesion main,body.sin-sesion header,body.sin-sesion .nav,body.sin-sesion .fab{visibility:hidden}

.l-srv{margin-top:6px}.l-srv summary{cursor:pointer;color:var(--mut,#666);padding:8px 0}.l-srv .btn{margin-top:8px;width:100%}

#b-perfil{width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;color:inherit}
#b-perfil span{width:32px;height:32px;border-radius:50%;background:#000;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;letter-spacing:.02em}
:root[data-theme="dark"] #b-perfil span{background:#fff;color:#000}
.perfil-datos{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 20px;font-size:14px}.perfil-datos dt{color:var(--tx2)}.perfil-datos dd{margin:0;word-break:break-word}
.dlg .perfil-btns{display:flex;flex-direction:column;gap:8px}.dlg .perfil-btns .btn{width:100%;min-width:0}

/* Marca, modelo y números siempre se ven (y se guardan) en mayúscula */
#marca,#modelo,#nro_inventario,#nro_serie{text-transform:uppercase}
#tipo-buscar{text-transform:none}

/* Versión de la app: discreta, al pie */
.ver-app{margin:16px 0 4px;text-align:center;font-size:12px;line-height:16px;color:var(--tx3);opacity:.8;user-select:none}

/* Aviso de conexión */
.toast.red{padding:8px 14px;font-size:13px;line-height:18px}
.toast.red.mal{border-left-color:var(--danger)}
.toast.red.ok{border-left-color:var(--success)}

/* Consultar sticker */
.cons-res{display:flex;align-items:center;gap:10px;margin-top:12px;padding:14px;border-radius:12px;border:1px solid var(--stroke-strong)}
.cons-res b{display:block}
.cons-res.ok{border-color:var(--brand)}
.cons-res.no{border-color:#c0392b}
.cons-res.no b{color:#c0392b}