/* ═══════════════════════════════════════════════════════════════
   SETOURS IT — GLPI SCANNER · "Terminal de Operaciones"
   Blanco/negro · mono · acentos naranja/crema/marrón
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --field: #faf8f2;
  --fg: #0a0a0a;
  --muted: #7a6f5d;
  --border: #0a0a0a;
  --border-soft: #e8e3d8;
  --accent: #e69d33;
  --accent-fg: #14100a;
  --cream: #f3ead8;
  --brown: #8a5a2b;
  --danger: #b03a2e;
  --ok: #4a7c2f;
  --mono: 'JetBrains Mono', 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 6px;
  --r-lg: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --hdr-h: 52px;
  --nav-h: 56px;
  --sb: env(safe-area-inset-bottom, 0px);
  --st: env(safe-area-inset-top, 0px);
}
html.dark {
  --bg: #050505;
  --card: #101010;
  --field: #181818;
  --fg: #f2f2f2;
  --muted: #a3937b;
  --border: #f2f2f2;
  --border-soft: #262626;
  --accent: #e69d33;
  --accent-fg: #14100a;
  --cream: #1c1712;
  --brown: #cf9d5f;
  --danger: #e5534b;
  --ok: #8acd43;
}

/* ── Reset ─────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; letter-spacing: .01em; }
a { color: var(--brown); }
code, pre { font-family: inherit; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-fg); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }

/* ── Shell: header + contenido + nav ───────────────────────── */
.app { min-height: 100vh; }
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--hdr-h) + var(--st));
  padding: var(--st) 14px 0;
  display: flex; align-items: center; gap: 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.hdr-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-brand {
  display: none;
}
.hdr-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.hdr-title .p { color: var(--accent); }
.hdr-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .12em;
  padding: 1px 5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--field);
  line-height: 1.2;
}
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr .ghost-btn {
  background: none; border: 1px solid var(--border-soft); border-radius: var(--r);
  min-width: 34px; min-height: 30px; padding: 0 8px; cursor: pointer; font-size: 13px;
}
.hdr .ghost-btn:active { background: var(--cream); }
.hdr .back { display: none; }

.content {
  padding: calc(var(--hdr-h) + var(--st) + 14px) 14px calc(var(--nav-h) + var(--sb) + 24px);
  max-width: 980px;
  margin: 0 auto;
}

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--nav-h) + var(--sb));
  padding-bottom: var(--sb);
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
}
.nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  border-right: 1px solid var(--border-soft);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.nav a:last-child { border-right: none; }
.nav a .ic { font-size: 17px; line-height: 1; }
.nav a.on { color: var(--fg); background: var(--cream); }
.nav a.on .ic { color: var(--accent); }

/* Escritorio: nav lateral */
@media (min-width: 900px) {
  .content { padding-left: 190px; padding-right: 24px; max-width: none; }
  .hdr { padding-left: 190px; }
  .hdr-brand { display: none; }
  .nav {
    top: 0; bottom: 0; left: 0; right: auto;
    width: 176px; height: 100vh;
    flex-direction: column; justify-content: flex-start;
    padding-top: 0;
    border-top: none; border-right: 1px solid var(--border-soft);
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--hdr-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
  }
  .nav-brand .nav-logo {
    height: 22px;
    width: auto;
    max-width: 105px;
  }
  .nav a { flex: 0 0 auto; flex-direction: row; gap: 10px; padding: 12px 16px; font-size: 12px; border-right: none; border-bottom: 1px solid var(--border-soft); }
  .nav a.on { border-left: 3px solid var(--accent); padding-left: 13px; }
}

/* ── Bloques ───────────────────────────────────────────────── */
.sect { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.sect::before { content: '## '; color: var(--accent); }
.card { border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 14px; margin-bottom: 14px; background: var(--card); box-shadow: var(--shadow); }
.card.soft { box-shadow: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 599px) { .grid2 { grid-template-columns: 1fr; } }

.kpi { display: flex; gap: 0; border: 1px solid var(--border-soft); border-radius: var(--r-lg); margin-bottom: 14px; overflow: hidden; background: var(--card); }
.kpi > div { flex: 1; padding: 10px 8px; text-align: center; border-right: 1px solid var(--border-soft); }
.kpi > div:last-child { border-right: none; }
.kpi .n { font-size: 20px; font-weight: 700; }
.kpi .l { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* ── Pestañas (oficinas) ───────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tab {
  border: 1px solid var(--border-soft); border-radius: var(--r);
  background: var(--card); padding: 6px 10px; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
  -webkit-user-select: none;
}
.tab:hover { border-color: var(--brown); }
.tab .cnt { color: var(--muted); font-weight: 400; margin-left: 4px; }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tab.on .cnt { color: var(--accent-fg); opacity: .75; }

/* ── Búsqueda ──────────────────────────────────────────────── */
.search { display: flex; gap: 8px; margin-bottom: 12px; }
.search input { flex: 1; }

/* ── Listas ────────────────────────────────────────────────── */
.list { border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px; background: var(--card); }
.li {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; min-height: 44px;
  background: none; border: none; border-bottom: 1px solid var(--border-soft);
  text-align: left; cursor: pointer; font-size: 13px;
}
.li:last-child { border-bottom: none; }
.li { transition: background .15s; }
.li:hover, .li:active { background: var(--cream); }
.li.sel { background: var(--cream); box-shadow: inset 3px 0 0 var(--accent); }
button.li::after { content: '›'; color: var(--muted); font-size: 16px; margin-left: auto; flex-shrink: 0; }
.li input[type="checkbox"], .li input[type="radio"] { width: 17px; min-height: 0; flex-shrink: 0; accent-color: var(--accent); }
.li .nm { font-weight: 700; }
.li .meta { color: var(--muted); font-size: 11px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .grow { flex: 1; min-width: 0; }
.li .end { text-align: right; flex-shrink: 0; }
.empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 12px; }
.empty::before { content: '[ ] '; color: var(--accent); }

/* ── Badges de estado ──────────────────────────────────────── */
.badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r);
  border: 1px solid var(--border-soft); font-size: 10px; font-weight: 700; letter-spacing: .05em; white-space: nowrap;
}
.b-prod { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.b-stock { background: var(--cream); border-color: var(--brown); color: var(--brown); }
.b-baja { background: var(--danger); border-color: var(--danger); color: #fff; }
.b-reparacion { background: none; border-style: dashed; color: var(--brown); }
.b-reservado { background: none; border-style: dotted; color: var(--fg); }
.b-otro { background: none; color: var(--muted); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border-soft); }
.dot.on { background: var(--ok); }
.dot.off { background: var(--danger); }

/* ── Formularios ───────────────────────────────────────────── */
.fld { margin-bottom: 12px; }
.fld label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; min-height: 42px;
  background: var(--field); color: var(--fg);
  border: 1px solid var(--border-soft); border-radius: var(--r);
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--brown); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
input::placeholder { color: var(--muted); opacity: .7; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto; appearance: auto;
  width: 17px; height: 17px; min-height: 0; flex-shrink: 0;
  padding: 0; accent-color: var(--accent);
  border: 1px solid var(--border-soft); border-radius: 4px; background: var(--field);
}
input[type="radio"] { border-radius: 50%; }
.check { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }
.check input { width: 16px; height: 16px; }

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--border-soft); border-radius: var(--r);
  background: var(--card); color: var(--fg);
  font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--brown); background: var(--cream); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.bp { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.bp:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.05); }
.btn.bg { background: var(--cream); }
.btn.bd { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.bl { border-color: transparent; background: none; font-weight: 400; color: var(--brown); }
.btn.bl:hover { background: var(--cream); border-color: transparent; }
.btn.wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.actions-list .btn { width: 100%; margin-bottom: 8px; justify-content: flex-start; text-align: left; }
.actions-list .btn::before { content: '> '; color: var(--accent); }
.actions-list .btn.bd::before { color: #fff; }

/* ── Scanner ───────────────────────────────────────────────── */
#vcont { position: relative; border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; background: #000; margin-bottom: 12px; }
#vid { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.scan-fx { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: sweep 2.2s ease-in-out infinite; opacity: .85; }
@keyframes sweep { 0%, 100% { top: 22%; } 50% { top: 78%; } }
.scan-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.scan-tools button { border: 1px solid var(--border); border-radius: var(--r); background: rgba(0,0,0,.6); color: #fff; padding: 8px 10px; cursor: pointer; }
#scan-zoom { position: absolute; bottom: 8px; left: 8px; right: 8px; display: none; }
#scan-zoom input { width: 100%; min-height: 0; accent-color: var(--accent); }
.sres { display: none; border: 1px solid var(--accent); border-radius: var(--r-lg); padding: 12px; margin-bottom: 12px; background: var(--cream); }
.sres.on { display: block; }
.sres .sres-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--brown); }
.sres .sres-val { font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.scan-status { font-size: 11px; color: var(--muted); margin-bottom: 10px; }

/* ── Firma ─────────────────────────────────────────────────── */
.sig-wrap { border: 1px dashed var(--border); border-radius: var(--r-lg); background: #fff; padding: 4px; margin-bottom: 8px; }
html.dark .sig-wrap { background: #fff; }
.sig-wrap canvas { display: block; width: 100%; height: 150px; cursor: crosshair; touch-action: none; }

/* ── Modales / action sheet ────────────────────────────────── */
.overlay { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); }
.overlay.on { display: block; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  max-height: 86vh; overflow-y: auto;
  background: var(--bg); border-top: 1px solid var(--border-soft);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 16px 14px calc(16px + var(--sb));
  max-width: 720px; margin: 0 auto;
}
.sheet-grab { width: 42px; height: 3px; background: var(--border-soft); margin: 0 auto 12px; }
.modal {
  position: fixed; z-index: 95; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 24px)); max-height: 86vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow);
}

/* ── Feedback ──────────────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--sb) + 14px); transform: translateX(-50%) translateY(20px);
  z-index: 120; max-width: 90vw;
  background: var(--fg); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r); font-size: 12px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: .25s;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { background: var(--accent); color: var(--accent-fg); }
#toast.er { background: var(--danger); color: #fff; }
#ld { display: none; position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.6); align-items: center; justify-content: center; }
#ld.on { display: flex; }
#ld .box { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 18px 26px; text-align: center; }
#ld .spin { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--border-soft); border-top-color: var(--accent); border-radius: 50%; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
#ld-msg { font-size: 12px; margin-top: 8px; }

.banner { border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 10px 12px; font-size: 12px; margin-bottom: 14px; }
.banner.warn { border-color: var(--brown); background: var(--cream); }
.banner.err { border-color: var(--danger); color: var(--danger); }
.banner.ok { border-color: var(--ok); }

/* ── Brand Logo ────────────────────────────────────────────── */
.brand-logo {
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.brand-logo.hdr-logo {
  height: 22px;
  width: auto;
  max-width: 130px;
}
.brand-logo.login-logo {
  height: 38px;
  width: auto;
  max-width: 220px;
  margin-bottom: 12px;
}
.brand-logo.sheet-logo {
  height: 24px;
  width: auto;
  max-width: 140px;
}
.brand-logo.nav-logo {
  height: 22px;
  width: auto;
  max-width: 105px;
}
html.dark .brand-logo {
  filter: brightness(0) invert(1);
}

/* ── Login ─────────────────────────────────────────────────── */
.login { max-width: 420px; margin: 12vh auto 0; padding: 0 16px; }
.login .mark { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px; }
.login .mark span { color: var(--accent); }
.login pre { border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 12px; font-size: 11px; color: var(--muted); overflow-x: auto; background: var(--card); }

/* ── Detalle / ficha ───────────────────────────────────────── */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding-top: 3px; }
.kv .v { font-weight: 700; text-align: right; word-break: break-word; }
.sublist { border-left: 2px solid var(--border-soft); padding-left: 12px; margin: 8px 0; }
.sublist div { padding: 4px 0; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }

/* ── Etiquetas QR (impresión) ──────────────────────────────── */
.labels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.label { border: 1px dashed var(--border); border-radius: var(--r-lg); padding: 10px; display: flex; gap: 10px; align-items: center; }
.label img { width: 104px; height: 104px; background: #fff; border: 1px solid var(--border-soft); }
.label .label-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.label .pc { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.label .sn { font-size: 11px; color: var(--muted); margin: 0 0 2px; word-break: break-all; }
.label .model { font-size: 11px; color: var(--muted); margin: 0 0 2px; }
.label .usr { font-size: 12px; margin: 0 0 4px; }
.label .logo { font-size: 11px; font-weight: 700; color: var(--brown); letter-spacing: .12em; margin: 0 0 3px; }

@media print {
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .no-print, .hdr, .nav, #mainnav, #s-app, #s-login, #sheet, #toast, #ld, .offline-bar, .overlay {
    display: none !important;
  }
  
  /* Impresión individual de etiqueta QR (desde ficha) */
  #print-area {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  /* Impresión masiva (desde labels.html) */
  #app, #app main.content, .printable-labels {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* Formato y dimensiones de etiqueta y cuadrícula */
  .labels-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 88mm) !important;
    gap: 4mm 6mm !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 6mm 0 !important;
  }
  .label {
    border: 1px dashed #777777 !important;
    border-radius: 3mm !important;
    padding: 2.5mm 3.5mm !important;
    height: 38mm !important;
    width: 88mm !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: flex !important;
    align-items: center !important;
    gap: 3mm !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }
  .label img {
    width: 32mm !important;
    height: 32mm !important;
    display: block !important;
    flex-shrink: 0 !important;
    border: none !important;
  }
  .label .label-info {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .label .logo {
    font-size: 9.5pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: #333333 !important;
    margin: 0 0 2mm 0 !important;
    text-transform: uppercase !important;
  }
  .label .pc {
    font-size: 14pt !important;
    font-weight: 800 !important;
    margin: 0 0 1.5mm 0 !important;
    color: #000000 !important;
    line-height: 1.1 !important;
  }
  .label .sn {
    font-size: 9.5pt !important;
    font-family: monospace !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #111111 !important;
    letter-spacing: 0.03em !important;
  }
  .label .model {
    font-size: 8pt !important;
    color: #444444 !important;
    margin: 0 0 1mm 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .label .usr {
    font-size: 8pt !important;
    color: #333333 !important;
    margin: 1mm 0 0 0 !important;
  }
}

/* ── Utilidades ────────────────────────────────────────────── */
.muted { color: var(--muted); }
.small { font-size: 11px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; }
.row-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.w100 { width: 100%; }
.mono-num { letter-spacing: .03em; }
.spin-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-soft); border-top-color: var(--accent); border-radius: 50%; animation: rot .8s linear infinite; vertical-align: -2px; }
.offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; text-align: center; padding: 4px; font-size: 11px; font-weight: 700; background: var(--danger); color: #fff; }

/* Filas de anomalías: el detalle puede ocupar dos líneas */
.anom-li .meta { white-space: normal; }
.anom-li .grow, .anom-li .nm, .anom-li .meta { display: block; }