/* OYMC — Sistema de diseño "Campo": naranja seguridad sobre acero.
   Estructura M3 heredada del dashboard original; identidad propia de
   operaciones de mantenimiento (obra, almacén, cuadrilla). */

/* --- Fuentes locales (la web admin también se usa en obra sin conexión estable) --- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/roboto-latin-e71a8ea2.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/roboto-mono-latin-8e08a3bc.woff2") format("woff2");
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/material-symbols-outlined-subset-7498be92.woff2") format("woff2");
}

:root {
  /* Marca: naranja seguridad (5.7:1 sobre blanco) */
  --p: #B4400A;
  --p-hover: #93340A;
  --pc: #FFDBC9;
  --onpc: #5C1F00;
  /* Acero: contenedores secundarios y neutros fríos */
  --sc: #D9E2EA;
  --onsc: #1C2B36;
  --err: #B3261E;
  --err-hover: #93221B;
  --ec: #F9DEDC;
  --onec: #8C1D18;
  --bg: #F9FAFB;
  --canvas: #F6F7F8;
  --card-border: #E2E5E8;
  --sv: #E4E7EA;
  --osv: #48505A;
  --os: #191D21;
  --out: #6C757D;
  --ov: #C4CBD1;
  --scl: #F0F2F4;
  --sch: #E7EAED;
  --ok-bg: #C9EBD2;
  --ok-fg: #0F5223;
  --warn-bg: #F6E3A9;
  --warn-fg: #6A5300;
  --green: #146C2E;
  --brand-deep: #22303B;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  font-family: Roboto, system-ui, sans-serif;
  color: var(--os);
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--p); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: 2px;
  border-radius: 4px;
}

h1 { font-size: 20px; font-weight: 700; margin: 0; }
h2 { font-size: 14px; font-weight: 700; margin: 0; }

/* --- Iconos Material Symbols --- */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.fs11 { font-size: 11px; }
.fs18 { font-size: 18px; }
.fs24 { font-size: 24px; }
.osv { color: var(--osv); }
.mono, .code { font-family: 'Roboto Mono', monospace; }
.muted { color: var(--osv); }
.tc { text-align: center; }

/* Solo para tecnología asistiva */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Utilidades flex --- */
.fx { display: flex; }
.ac { align-items: center; }
.jb { justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.f1 { flex: 1; min-width: 0; }
.gap4 { gap: 4px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.wrap { flex-wrap: wrap; }

/* --- Shell del dashboard --- */
.dash { display: flex; min-height: 100vh; background: var(--canvas); }

.side {
  width: 230px;
  background: #EDF0F2;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  min-height: 100vh;
}

.side.sdark { background: #212930; }
.side.sdark .ni { color: #B9C6CF; }
.side.sdark .ni.nia { background: var(--sc); color: var(--onsc); }
.side.sdark .sbrand-name { color: #fff; }
.side.sdark .sbrand-sub { color: #8FA0AC; }

.sbrand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.sbrand-name { font-weight: 700; font-size: 15px; }
.sbrand-sub {
  font-size: 11px; color: var(--osv);
  max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.logo {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: var(--p);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; letter-spacing: 1px;
  flex-shrink: 0;
}
.logo.lsm { width: 40px; height: 40px; border-radius: 12px; font-size: 11px; }

.ni {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 14px;
  border-radius: 21px;
  font-size: 13.5px; font-weight: 500;
  color: var(--osv);
}
a.ni:hover { background: var(--sch); text-decoration: none; }
a.ni:focus-visible { outline-offset: -2px; border-radius: 21px; }
.ni.nia { background: var(--sc); color: var(--onsc); font-weight: 700; }

.nbdg {
  margin-left: auto;
  background: var(--err); color: #fff;
  font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.dmain { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topb {
  height: 60px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--sv);
  flex-shrink: 0;
  background: var(--canvas);
}

/* Botón hamburguesa: solo visible en pantallas angostas */
.navbtn {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--os);
  width: 44px; height: 44px;
  border-radius: 22px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.navbtn:hover { background: var(--sch); }

.scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgb(25 29 33 / .4);
  z-index: 39;
  border: none; padding: 0;
}

.esel {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--ov); border-radius: 10px;
  padding: 8px 12px;
  font-size: 13.5px; font-weight: 500;
  color: var(--os);
  min-width: 0;
}
.esel-name {
  max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.esel:hover { background: var(--scl); text-decoration: none; }

.dcont {
  flex: 1;
  padding: 20px 28px;
  display: flex; flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.dtitle { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* --- Tarjetas --- */
.dcard, .card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
}
.dcp, .card { padding: 16px 20px; }
.card { margin-bottom: 16px; }
.dh { font-size: 14px; font-weight: 700; }

.kpi {
  flex: 1;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px 20px;
  min-width: 160px;
}
.kl { font-size: 12.5px; color: var(--osv); font-weight: 500; }
.kv { font-size: 30px; font-weight: 700; margin-top: 6px; }
.kv.kerr { color: var(--err); }
.ks { font-size: 12px; color: var(--osv); margin-top: 4px; }

/* --- Tablas grid del design system ---
   El contenedor .tbl aporta scroll horizontal en pantallas angostas y
   semántica de tabla (role="table" en el markup). Cada tabla declara sus
   columnas con una clase cols-*; nada de estilos inline por fila. */
.tbl { overflow-x: auto; }

.thd {
  display: grid; gap: 12px;
  padding: 10px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--osv); text-transform: uppercase;
  border-bottom: 1px solid var(--sv);
}
.trw {
  display: grid; gap: 12px;
  padding: 11px 16px;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px solid var(--scl);
  position: relative;
}
.trw:last-child { border-bottom: none; }
.trw > * { min-width: 0; overflow-wrap: anywhere; }

/* Fila-enlace: el enlace de la primera celda se estira sobre toda la fila */
.rowlink { color: inherit; font-weight: inherit; }
.rowlink::after { content: ""; position: absolute; inset: 0; }
.rowlink:hover { text-decoration: none; }
.trw:has(.rowlink):hover { background: var(--scl); }
.rowlink:focus-visible { outline: none; }
.rowlink:focus-visible::after { outline: 2px solid var(--p); outline-offset: -2px; border-radius: 8px; }

/* Columnas por tabla (min-width habilita el scroll horizontal en móvil) */
.cols-wo { grid-template-columns: 120px minmax(240px, 1fr) 100px 150px 120px 90px 110px; min-width: 940px; }
.cols-recent { grid-template-columns: 120px minmax(220px, 1fr) 110px 120px 90px 110px; min-width: 860px; }
.cols-vale { grid-template-columns: 130px 110px minmax(200px, 1fr) 60px 105px 105px 150px; min-width: 880px; }
.cols-vale-manage { grid-template-columns: 130px 110px minmax(200px, 1fr) 60px 105px 105px 150px 90px; min-width: 960px; }
.cols-assets { grid-template-columns: 130px 110px minmax(200px, 1fr) 110px 60px 70px 130px 100px; min-width: 920px; }
.cols-assets-admin { grid-template-columns: 130px 110px minmax(200px, 1fr) 110px 60px 70px 130px 100px 150px; min-width: 1060px; }
.cols-sites { grid-template-columns: minmax(160px, 1fr) 200px 130px 110px 150px; min-width: 780px; }
.cols-jrh { grid-template-columns: minmax(180px, 1fr) 110px 160px 110px 190px; min-width: 760px; }
.cols-projects { grid-template-columns: minmax(180px, 1fr) 110px 140px minmax(160px, 1fr) 90px; min-width: 760px; }
.cols-crews { grid-template-columns: minmax(180px, 1fr) 130px minmax(160px, 1fr) 90px; min-width: 620px; }
.cols-crewm { grid-template-columns: minmax(200px, 1fr) 110px 140px 110px; min-width: 600px; }
.cols-myco { grid-template-columns: minmax(220px, 1fr) 140px 130px 100px; min-width: 620px; }
.cols-sa { grid-template-columns: minmax(180px, 1fr) 130px 90px 130px 110px 110px 90px; min-width: 880px; }
.cols-imp { grid-template-columns: 110px minmax(240px, 1fr); min-width: 400px; }
.cols-members { grid-template-columns: minmax(200px, 1fr) 100px 130px 140px minmax(140px, 1fr) 170px; min-width: 940px; }

/* --- Tablas HTML clásicas --- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--scl); font-size: 13px; }
th { color: var(--osv); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--sv); }
tr:last-child td { border-bottom: none; }

/* --- Tags de estado --- */
.tag, .badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px;
  border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
  background: var(--sv); color: var(--osv);
}
.tsec { background: var(--sc); color: var(--onsc); }
.terr { background: var(--ec); color: var(--onec); }
.tpc { background: var(--pc); color: var(--onpc); }
.tok { background: var(--ok-bg); color: var(--ok-fg); }
.twarn { background: var(--warn-bg); color: var(--warn-fg); }
.tn { background: var(--sv); color: var(--osv); }

/* Roles y estados con nombre (válido tanto en .tag como en .badge) */
.tag.admin, .badge.admin { background: var(--pc); color: var(--onpc); }
.tag.supervisor, .badge.supervisor { background: var(--warn-bg); color: var(--warn-fg); }
.tag.tecnico, .badge.tecnico { background: var(--ok-bg); color: var(--ok-fg); }
.tag.pending, .badge.pending { background: var(--warn-bg); color: var(--warn-fg); }
.tag.approved, .badge.approved { background: var(--ok-bg); color: var(--ok-fg); }
.tag.rejected, .badge.rejected { background: var(--ec); color: var(--onec); }
.tag.active, .badge.active { background: var(--ok-bg); color: var(--ok-fg); }
.tag.paused, .badge.paused { background: var(--warn-bg); color: var(--warn-fg); }
.tag.finished, .badge.finished { background: var(--sv); color: var(--osv); }

.code {
  font-size: 12px;
  background: var(--sv);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--osv);
  white-space: nowrap;
}

/* --- Avatares --- */
.ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pc); color: var(--onpc);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.avs { display: flex; padding-left: 8px; }
.avs .ava { width: 28px; height: 28px; font-size: 10px; margin-left: -8px; border: 2px solid #fff; }
.ava.alg { width: 48px; height: 48px; font-size: 16px; }

/* --- Base para controles sueltos (fuera de .tf/.fchip) --- */
input[type="text"], input[type="password"], input[type="date"], input[type="number"],
input[type="email"], input[type="tel"], select, textarea {
  font: inherit;
  font-size: 14px;
  color: var(--os);
  background: var(--bg);
  border: 1px solid var(--out);
  border-radius: 6px;
  padding: 10px 12px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: -1px;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--p); }

/* --- Campos de texto M3 --- */
.tf {
  position: relative;
  border: 1px solid var(--out);
  border-radius: 6px;
  min-height: 56px;
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  background: var(--bg);
}
.tfl {
  position: absolute; top: -8px; left: 12px;
  background: var(--bg);
  padding: 0 4px;
  font-size: 12px; color: var(--osv);
  line-height: 1.3;
}
.tf input, .tf select, .tf textarea {
  border: none; background: none; outline: none;
  font: inherit; font-size: 15px;
  width: 100%; color: var(--os);
  padding: 0;
}
.tf textarea { padding: 14px 0; resize: vertical; min-height: 60px; }
.tf:focus-within { border: 2px solid var(--p); padding: 0 15px; }
.tf:focus-within .tfl { color: var(--p); }
.tfi { font-size: 22px; color: var(--osv); }

.field { margin-bottom: 20px; }
.field .hint { color: var(--osv); font-size: 12px; margin-top: 4px; }
label { font-size: 13px; }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.fgrid .span2 { grid-column: 1 / 3; }

/* Subtítulo de sección dentro de un formulario largo */
.fsec {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--osv); text-transform: uppercase;
  margin: 24px 0 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sv);
}
.fsec:first-child { margin-top: 0; }

/* --- Botones --- */
.btn, .btnsm {
  height: 40px; padding: 0 20px;
  border-radius: 20px;
  background: var(--p); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: 13.5px;
  border: none; cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn:hover, .btnsm:hover { background: var(--p-hover); text-decoration: none; color: #fff; }
.btnsm { height: 38px; padding: 0 18px; border-radius: 19px; }

.btn.secondary, .btnso { background: none; border: 1px solid var(--out); color: var(--p); }
.btn.secondary:hover, .btnso:hover { background: var(--scl); color: var(--p); }
.btn.danger { background: var(--err); }
.btn.danger:hover { background: var(--err-hover); }
.btn:disabled, .btnsm:disabled { background: var(--sv); color: var(--osv); cursor: not-allowed; }
.btnst { background: none; color: var(--err); border: none; }
.btnst:hover { background: var(--ec); color: var(--err); }
.btn.small { height: 32px; padding: 0 14px; font-size: 12.5px; }
.btnt {
  color: var(--p); font-weight: 500; font-size: 13.5px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.btnt.bdanger { color: var(--err); }
.btn.wide { width: 100%; height: 48px; border-radius: 24px; font-size: 15px; }

.inline-form { display: inline-flex; }
.inline-controls { display: inline-flex; gap: 8px; align-items: center; }

/* --- Búsqueda y filtros --- */
.srch {
  display: flex; align-items: center; gap: 10px;
  height: 42px; border-radius: 21px;
  background: var(--sch);
  padding: 0 16px;
  font-size: 13.5px; color: var(--osv);
  flex: 1; max-width: 380px; min-width: 200px;
}
.srch input { border: none; background: none; outline: none; font: inherit; width: 100%; color: var(--os); }

.fchip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 38px; padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--ov);
  font-size: 13px; font-weight: 500; color: var(--osv);
  white-space: nowrap; background: none;
}
.fchip select { border: none; background: none; outline: none; font: inherit; color: var(--os); }
.fchip:focus-within { border-color: var(--p); outline: 1px solid var(--p); }

/* --- Notas y flashes --- */
.note {
  display: flex; align-items: center; gap: 10px;
  background: var(--sc); color: var(--onsc);
  border-radius: 12px; padding: 12px 16px;
  font-size: 13px;
}
.flash {
  border-radius: 12px; padding: 12px 16px; font-size: 13px; margin-bottom: 4px;
  background: var(--sch); color: var(--os);
}
.flash.notice { background: var(--ok-bg); color: var(--ok-fg); }
.flash.alert { background: var(--ec); color: var(--onec); }

/* --- Paginación --- */
.pgn { display: flex; align-items: center; gap: 6px; }
.pgn a, .pgn .pgn-current, .pgn .pgn-gap {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 15px; font-size: 12.5px; font-weight: 500;
}
.pgn a { color: var(--os); }
.pgn a:hover { background: var(--sch); text-decoration: none; }
.pgn .pgn-current { background: var(--p); color: #fff; font-weight: 700; }
.pgn .pgn-gap { color: var(--osv); }

/* --- Solicitudes (cards) --- */
.screq {
  background: #fff; border: 1px solid var(--card-border); border-radius: 16px;
  padding: 18px 20px;
  display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap;
}

/* --- Gráfico de barras --- */
.bars { display: flex; align-items: flex-end; gap: 20px; height: 140px; padding-top: 14px; }
.bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar { width: 28px; border-radius: 6px 6px 0 0; background: var(--pc); min-height: 3px; }
.bar.bhi { background: var(--p); }
.blb { font-size: 11px; color: var(--osv); }

/* --- Actividad --- */
.arow { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--scl); align-items: flex-start; }
.arow:last-child { border-bottom: none; }

/* --- Pasos --- */
.stepr { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--osv); }
.stepn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sv); color: var(--osv);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}
.stepr.stepa { color: var(--os); font-weight: 700; }
.stepr.stepa .stepn { background: var(--p); color: #fff; }
.stline { width: 36px; height: 1px; background: var(--ov); }
.hstep { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; }
.hstep .stepn { background: var(--p); color: #fff; }

/* --- Login --- */
.wsplit { display: flex; min-height: 100vh; background: var(--bg); }
.wbrand {
  width: 42%;
  background: var(--brand-deep); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 56px;
}
.wbrand-title { font-size: 34px; font-weight: 700; margin-top: 24px; line-height: 42px; }
.wbrand .logo { background: #fff; color: var(--p); }
.wfeat { display: flex; gap: 14px; align-items: center; font-size: 14px; color: #B9C6CF; margin-top: 18px; }
.wfeat .ms { color: #F0854A; }
.wform { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.wcard { width: 380px; max-width: 100%; display: flex; flex-direction: column; }
.line { flex: 1; height: 1px; background: var(--ov); }
.fs12 { font-size: 12px; } .fs13 { font-size: 13px; } .fs15 { font-size: 15px; }
.fw5 { font-weight: 500; } .fw7 { font-weight: 700; }

/* --- Registro de empresa --- */
.regwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.regcard { width: 680px; max-width: 100%; }

/* --- QR --- */
.qr-svg svg { width: 230px; height: 230px; }

/* --- Roles / permisos --- */
.rolec { flex: 1; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; padding: 20px; min-width: 230px; }
.perm { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; padding: 6px 0; line-height: 18px; }
.pyes { color: var(--green); }
.pno { color: #8B939B; }

/* --- Página simple --- */
.container { max-width: 960px; margin: 24px auto; padding: 0 20px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.empty-state { color: var(--osv); padding: 12px 0; font-size: 13px; }

.simple-top {
  height: 60px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--sv);
  background: var(--canvas);
}

/* --- Landing / auth --- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.auth-card {
  width: 100%; max-width: 400px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 16px;
  padding: 32px;
}

/* --- Zona de peligro --- */
.confirm-name input { max-width: 320px; }

/* --- Responsive: el supervisor abre esto desde el celular en obra --- */
@media (max-width: 900px) {
  .navbtn { display: inline-flex; }

  .side {
    position: fixed;
    inset: 0 auto 0 0;
    width: 264px;
    z-index: 40;
    transform: translateX(-103%);
    transition: transform .22s ease-out;
    box-shadow: 4px 0 24px rgb(25 29 33 / .18);
    overflow-y: auto;
  }
  body.nav-open .side { transform: none; }
  body.nav-open .scrim { display: block; }

  .topb { padding: 0 12px; gap: 10px; }
  .dcont { padding: 14px 12px; }
  .esel-name { max-width: 130px; }
  .topb .whoami { display: none; }

  .fgrid { grid-template-columns: 1fr; }
  .fgrid .span2 { grid-column: auto; }

  .simple-top { padding: 0 14px; }
  .container { margin: 16px auto; padding: 0 12px; }
}

@media (max-width: 900px) {
  .wbrand { display: none; }
}

@media (pointer: coarse) {
  .btnt { min-height: 44px; }
  .fchip { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

@media print {
  .side, .topb, .no-print { display: none !important; }
  .dcont { padding: 0; }
  .dcard, .card { border: none; }
}