/* Boket Motor — estilos de los módulos (OS · CDA · Almacén · Compras · aux)
   Cargado después de shared.css + flow.css. Reusa los mismos tokens. */

/* ============ TOOLBAR DE MÓDULO ============ */
.mod-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; flex-wrap: wrap;
}
.mt-search {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 0.5px solid var(--line-2);
  border-radius: 8px; padding: 7px 11px;
}
.mt-search .ic { font-family: var(--ff-mono); font-size: 13px; color: var(--ink-3); }
.mt-search input { flex: 1; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); }
.mt-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--card); border: 0.5px solid var(--line-2); border-radius: 8px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.04em;
}
.mt-seg button { padding: 5px 12px; border-radius: 5px; color: var(--ink-3); }
.mt-seg button.on { background: var(--ink); color: var(--citron); }
.mt-select {
  font-family: var(--ff-sans); font-size: 12.5px; color: var(--ink);
  background: var(--card); border: 0.5px solid var(--line-2);
  border-radius: 8px; padding: 7px 11px; outline: none; cursor: pointer;
}
.mt-select:focus { border-color: var(--motor); }

/* ============ STAT STRIP ============ */
.os-stats { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.os-stat {
  flex: 1; min-width: 96px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px;
  background: var(--card); border: 0.5px solid var(--line);
  border-radius: 9px; text-align: left;
  position: relative; transition: border-color .12s, background .12s;
}
.os-stat.wide { flex: 1; min-width: 150px; }
.os-stat:hover { border-color: var(--line-2); }
.os-stat.on { background: var(--ink); border-color: var(--ink); }
.os-stat.on .l, .os-stat.on .v { color: #f4f3ef; }
.os-stat .l { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.os-stat .v { font-family: var(--ff-serif); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.os-stat .dot { width: 7px; height: 7px; border-radius: 50%; position: absolute; top: 13px; right: 13px; background: var(--steel); }
.os-stat .dot.st-received { background: var(--st-received); }
.os-stat .dot.st-diag { background: var(--st-diag); }
.os-stat .dot.st-quote { background: var(--st-quote); }
.os-stat .dot.st-repair { background: var(--st-repair); }
.os-stat .dot.st-qa { background: var(--st-qa); }
.os-stat .dot.st-ready { background: var(--st-ready); }
.os-stat .dot.st-delivered { background: var(--st-delivered); }
.os-stat.wide.alert .v { color: var(--st-repair); }

/* ============ TABLAS DE MÓDULO (base compartida) ============ */
.os-full-table, .cda-table, .cda-hist-table, .alm-table, .alm-bajo-table,
.compras-table, .clientes-table, .lic-full-table, .equipo-table {
  width: 100%; font-size: 12.5px;
}
.os-full-table .row, .cda-table .row, .cda-hist-table .row, .alm-table .row,
.alm-bajo-table .row, .compras-table .row, .clientes-table .row,
.lic-full-table .row, .equipo-table .row {
  display: grid; gap: 12px; padding: 11px 18px;
  align-items: center; border-bottom: 0.5px solid var(--line);
  cursor: pointer; transition: background .1s;
}
.os-full-table .row:last-child, .cda-table .row:last-child, .cda-hist-table .row:last-child,
.alm-table .row:last-child, .alm-bajo-table .row:last-child, .compras-table .row:last-child,
.clientes-table .row:last-child, .lic-full-table .row:last-child, .equipo-table .row:last-child { border-bottom: 0; }
.os-full-table .row:not(.head):hover, .cda-table .row:not(.head):hover,
.cda-hist-table .row:not(.head):hover, .alm-table .row:not(.head):hover,
.alm-bajo-table .row:not(.head):hover, .compras-table .row:not(.head):hover,
.clientes-table .row:not(.head):hover, .lic-full-table .row:not(.head):hover,
.equipo-table .row:not(.head):hover { background: var(--bg-soft); }
.os-full-table .head, .cda-table .head, .cda-hist-table .head, .alm-table .head,
.alm-bajo-table .head, .compras-table .head, .clientes-table .head,
.lic-full-table .head, .equipo-table .head {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-3);
  letter-spacing: 0.08em; background: var(--bg-soft); cursor: default;
  padding: 9px 18px; border-bottom: 0.5px solid var(--line);
}
.empty-row { padding: 28px 18px; text-align: center; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }

/* shared cell helpers */
.cli b, .nm b, .prov b, .who b { font-weight: 500; }
.cli small, .nm small, .prov small { display: block; color: var(--ink-3); font-size: 11px; font-family: var(--ff-mono); letter-spacing: 0.03em; margin-top: 1px; }
.mony, .mt, .tot, .tk, .com, .val, .cost { font-family: var(--ff-mono); font-size: 12px; text-align: right; }
.sla { font-family: var(--ff-mono); font-size: 9.5px; padding: 1px 6px; border-radius: 999px; margin-right: 7px; }
.sla.ok { background: rgba(47,107,58,0.12); color: var(--st-ready); }
.sla.warn { background: rgba(212,160,23,0.15); color: #8a6a08; }
.sla.crit { background: rgba(199,90,61,0.12); color: var(--st-repair); }

/* result / estado pills (cda, compras, lic) */
.res {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.res.ok { background: rgba(47,107,58,0.12); color: var(--st-ready); }
.res.fail { background: rgba(199,90,61,0.12); color: var(--st-repair); }
.res.proc { background: rgba(212,160,23,0.15); color: #8a6a08; }
.res.todo { background: var(--card-2); color: var(--ink-3); }

/* ============ OS · LISTA ============ */
.os-full-table .head, .os-full-table .row { grid-template-columns: 58px 86px 1.5fr 1.5fr 130px 84px 122px 92px; }
.os-full-table .os-id { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.os-full-table .os-id .pri { width: 6px; height: 6px; border-radius: 50%; background: var(--st-repair); flex-shrink: 0; }
.os-full-table .svc { color: var(--ink-2); line-height: 1.3; }
.os-full-table .mec { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.os-full-table .ent { font-size: 11.5px; color: var(--ink-2); }

/* ============ CDA ============ */
.cda-lines-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.cda-line { background: var(--card); border: 0.5px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.cda-line .hd { display: flex; align-items: center; justify-content: space-between; }
.cda-line .hd .nm { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink); font-weight: 500; }
.cda-line .hd .badge { font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--card-2); color: var(--ink-3); }
.cda-line .hd .badge.on { background: rgba(47,107,58,0.14); color: var(--st-ready); }
.cda-line .ty { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.cda-line .cur { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cda-line .cur .insp { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.04em; }
.cda-line .cur .idle { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); }

.cda-table .head, .cda-table .row { grid-template-columns: 64px 56px 86px 1.4fr 1.3fr 116px 104px; }
.cda-table .hr { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.cda-table .li { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.03em; }
.cda-table .act { text-align: right; font-family: var(--ff-mono); font-size: 10.5px; color: var(--motor); letter-spacing: 0.04em; }
.cda-table .row:hover .act { color: var(--motor-2); }

/* líneas detalle */
.cda-lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cda-line-card .pb { padding: 16px 18px; }
.line-insp { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 0.5px solid var(--line); }
.line-insp .av { width: 30px; height: 30px; border-radius: 50%; background: var(--motor-soft); color: var(--motor-2); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.line-insp b { font-size: 13px; font-weight: 500; }
.line-insp small { display: block; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink-3); }
.line-now { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.line-now .now-cli { font-size: 11.5px; color: var(--ink-2); }
.line-idle { margin-top: 14px; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); padding: 14px 0; text-align: center; background: var(--bg-soft); border-radius: 8px; }
.etapas { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
.etapas .etapa { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-3); padding: 5px 0; }
.etapas .etapa .d { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-2); flex-shrink: 0; }
.etapas .etapa.done { color: var(--ink-2); }
.etapas .etapa.done .d { background: var(--st-ready); border-color: var(--st-ready); }
.etapas .etapa.cur { color: var(--ink); font-weight: 500; }
.etapas .etapa.cur .d { background: var(--st-diag); border-color: var(--st-diag); box-shadow: 0 0 0 3px rgba(212,160,23,0.18); }
.line-cola { margin-top: 14px; padding-top: 12px; border-top: 0.5px dashed var(--line); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.line-cola .cl-lb { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.07em; color: var(--ink-3); margin-right: 4px; }
.line-cola .idle { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); }
.plate.small { font-size: 10px; padding: 2px 6px; }

/* historial */
.cda-hist-table .head, .cda-hist-table .row { grid-template-columns: 92px 1.2fr 104px 104px 1.6fr 86px; }
.cda-hist-table .cert { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.cda-hist-table .det small { display: block; color: var(--ink-3); font-size: 10.5px; margin-top: 2px; }
.faltas { display: flex; flex-wrap: wrap; gap: 4px; }
.faltas .ft { font-family: var(--ff-mono); font-size: 9.5px; padding: 2px 7px; border-radius: 999px; background: rgba(199,90,61,0.1); color: var(--st-repair); }
.runt { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; }
.runt.ok { background: rgba(47,107,58,0.12); color: var(--st-ready); }
.runt.pend { background: rgba(45,95,184,0.12); color: var(--motor); }
.runt.na { color: var(--ink-3); }

/* ============ DRAWER FOOTER (genérico) ============ */
.dtl-ft { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 0.5px solid var(--line); background: var(--bg-soft); flex-shrink: 0; }

/* captura de revisión */
.cap-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cap-head .cap-meta b { font-size: 14px; font-weight: 600; }
.cap-head .cap-meta small { display: block; font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.03em; margin-top: 2px; }
.cap-note { font-size: 12px; color: var(--ink-2); line-height: 1.45; background: var(--bg-soft); border: 0.5px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.cap-etapas { display: flex; flex-direction: column; gap: 6px; }
.cap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 0.5px dashed var(--line); }
.cap-row:last-child { border-bottom: 0; }
.cap-row .lbl { font-size: 12.5px; }
.cap-seg { display: inline-flex; border: 0.5px solid var(--line-2); border-radius: 7px; overflow: hidden; }
.cap-seg button { padding: 5px 12px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); }
.cap-seg button.pass.on { background: var(--st-ready); color: #fff; }
.cap-seg button.fail.on { background: var(--st-repair); color: #fff; }
.result-banner { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 12px; margin-bottom: 18px; }
.result-banner.ok { background: rgba(47,107,58,0.1); border: 0.5px solid rgba(47,107,58,0.25); }
.result-banner.fail { background: rgba(199,90,61,0.1); border: 0.5px solid rgba(199,90,61,0.25); }
.result-banner .big { font-family: var(--ff-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.04em; }
.result-banner.ok .big { color: var(--st-ready); }
.result-banner.fail .big { color: var(--st-repair); }
.result-banner .sm { font-size: 12px; color: var(--ink-2); }

/* ============ ALMACÉN ============ */
.alm-table .head, .alm-table .row { grid-template-columns: 108px 1.7fr 116px 56px 96px 90px 92px 96px; }
.alm-table .sku { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.alm-table .nm { line-height: 1.3; }
.alm-table .cat { font-size: 11.5px; color: var(--ink-2); }
.alm-table .ubic { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); }
.stk { font-family: var(--ff-mono); font-size: 14px; font-weight: 600; }
.stk small { font-family: var(--ff-mono); font-size: 9.5px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.stk.bajo, .stk.agotado { color: var(--st-repair); }
.stk.justo { color: #8a6a08; }
.act .ord, .act .adj, .adv {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.05em;
  padding: 5px 10px; border-radius: 6px;
}
.act .ord, .adv { background: var(--motor); color: #fff; }
.act .ord:hover, .adv:hover { background: var(--motor-2); }
.act .adj { background: var(--bg-soft); color: var(--ink-2); border: 0.5px solid var(--line-2); }
.act .adj:hover { background: var(--card-2); }
.act { text-align: right; }

.alm-bajo-table .head, .alm-bajo-table .row { grid-template-columns: 1.6fr 70px 56px 90px 1.1fr 110px; }
.alm-bajo-table .min, .alm-bajo-table .sug { font-family: var(--ff-mono); font-size: 11.5px; color: var(--ink-2); }
.alm-bajo-table .prov { font-size: 11.5px; color: var(--ink-2); }

/* item drawer */
.alm-gauge { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--bg-soft); border: 0.5px solid var(--line); }
.alm-gauge.bajo, .alm-gauge.agotado { background: rgba(199,90,61,0.07); border-color: rgba(199,90,61,0.2); }
.alm-gauge .num { font-family: var(--ff-serif); font-size: 40px; font-weight: 500; line-height: 1; }
.alm-gauge .num small { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.alm-gauge .meta { display: flex; flex-direction: column; gap: 6px; }
.alm-gauge .mn { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.alm-adj { display: grid; grid-template-columns: auto 64px 1fr auto; gap: 8px; align-items: center; }
.alm-adj .seg { display: inline-flex; border: 0.5px solid var(--line-2); border-radius: 7px; overflow: hidden; }
.alm-adj .seg button { padding: 8px 10px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; }
.alm-adj .seg button.on { background: var(--ink); color: var(--citron); }
.alm-adj input { font-family: var(--ff-sans); font-size: 12.5px; color: var(--ink); background: var(--card); border: 0.5px solid var(--line-2); border-radius: 7px; padding: 8px 10px; outline: none; width: 100%; }
.alm-adj input:focus { border-color: var(--motor); }
.alm-movs { display: flex; flex-direction: column; gap: 0; }
.alm-movs .mv { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 0.5px dashed var(--line); font-size: 12px; }
.alm-movs .mv:last-child { border-bottom: 0; }
.alm-movs .mv .t { font-family: var(--ff-mono); font-size: 12px; font-weight: 600; }
.alm-movs .mv .t.in { color: var(--st-ready); }
.alm-movs .mv .t.out { color: var(--st-repair); }
.alm-movs .mv .d { color: var(--ink-2); }
.alm-movs .mv .w { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); }
.alm-movs .mv.empty { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); display: block; padding: 12px 0; border: 0; }
.oc-total { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--ink); color: #f4f3ef; border-radius: 10px; font-size: 12.5px; }
.oc-total b { font-family: var(--ff-mono); font-size: 16px; color: var(--citron); }

/* ============ COMPRAS ============ */
.compras-table .head, .compras-table .row { grid-template-columns: 92px 1.4fr 60px 110px 120px 96px 96px; }
.compras-table .oc { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.compras-table .it { font-family: var(--ff-mono); font-size: 12px; text-align: center; color: var(--ink-2); }
.compras-table .eta { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }

/* ============ CLIENTES ============ */
.clientes-table .head, .clientes-table .row { grid-template-columns: 1.6fr 150px 110px 80px 76px 70px 110px; }
.clientes-table .cli { display: flex; align-items: center; gap: 10px; }
.clientes-table .cli .av { width: 28px; height: 28px; border-radius: 50%; background: var(--motor-soft); color: var(--motor-2); font-family: var(--ff-mono); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.clientes-table .cli .av.flota { background: rgba(20,24,28,0.08); color: var(--ink); }
.clientes-table .tel { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.clientes-table .veh, .clientes-table .vis { font-family: var(--ff-mono); font-size: 12px; text-align: center; }
.clientes-table .ult { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.tag-pill { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; background: var(--card-2); color: var(--ink-2); }
.tag-pill.flota { background: rgba(45,95,184,0.12); color: var(--motor); }

/* ============ LICITACIONES ============ */
.lic-full-table .head, .lic-full-table .row { grid-template-columns: 1.6fr 90px 90px 130px 1.1fr 120px; }
.lic-full-table .vh, .lic-full-table .vc { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); text-align: center; }
.prob { display: flex; align-items: center; gap: 8px; }
.prob .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.prob .bar span { display: block; height: 100%; background: var(--motor); border-radius: 999px; }
.prob .pc { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; color: var(--ink-2); min-width: 34px; text-align: right; }
.prob .pc.win { color: var(--st-ready); }
.prob .pc.low { color: var(--ink-3); }
.prob .pc.lost { color: var(--st-repair); }

/* ============ EQUIPO ============ */
.equipo-table .head, .equipo-table .row { grid-template-columns: 1.5fr 1fr 1.3fr 150px; }
.equipo-table .who { display: flex; align-items: center; gap: 10px; }
.equipo-table .who .av { width: 28px; height: 28px; border-radius: 50%; background: var(--motor-soft); color: var(--motor-2); font-family: var(--ff-mono); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.equipo-table .who .av.mec { background: rgba(199,90,61,0.12); color: var(--st-repair); }
.equipo-table .who .av.adm { background: rgba(20,24,28,0.08); color: var(--ink); }
.equipo-table .who .av.cda { background: rgba(122,61,199,0.12); color: var(--st-qa); }
.equipo-table .rol { font-size: 12px; color: var(--ink-2); }
.equipo-table .carga { display: flex; align-items: center; gap: 8px; }
.equipo-table .carga .bar { flex: 1; max-width: 120px; height: 6px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.equipo-table .carga .bar span { display: block; height: 100%; background: var(--motor); border-radius: 999px; }
.equipo-table .carga .n { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); }
.equipo-table .carga .na { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); }

/* ============ ALERTAS ============ */
.alert-block .ph { align-items: flex-start; }
.alert-go { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--motor); padding: 4px 8px; border-radius: 6px; }
.alert-go:hover { background: var(--bg-soft); }
.alert-rows { display: flex; flex-direction: column; }
.alert-rows .ar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 0.5px solid var(--line); cursor: pointer; font-size: 12.5px; }
.alert-rows .ar:last-child { border-bottom: 0; }
.alert-rows .ar:hover { background: var(--bg-soft); }
.alert-rows .ar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); flex-shrink: 0; }
.alert-rows .ar .dot.crit { background: var(--st-repair); }
.alert-rows .ar .dot.warn { background: var(--st-diag); }
.alert-rows .ar .tx { flex: 1; min-width: 0; line-height: 1.25; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-rows .ar .tx b { color: var(--ink); font-weight: 500; }
.alert-rows .ar .tx small { display: block; font-family: var(--ff-mono); font-size: 10px; color: var(--ink-3); }
.alert-rows .ar .rt { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-2); flex-shrink: 0; }
.alert-rows .ar .rt.crit { color: var(--st-repair); }
.alert-rows .ar .rt.warn { color: #8a6a08; }
.alert-block .empty-row { padding: 18px; }