:root{
  --bg:#FAF6EF; --surface:#FFFFFF; --surface-2:#F3EDE1; --surface-3:#EFE7D6;
  --border:#E3D9C6; --border-soft:#EDE5D5;
  --ink:#2B2A22; --ink-soft:#6B6656; --ink-faint:#9B937E;
  --accent:#B96A2C; --accent-ink:#FFFFFF; --accent-soft:#F3E1CD;
  --pine:#3E6B4F; --pine-soft:#DCEAE0;
  --lagoon:#1E4258;
  --good:#2F8556; --good-soft:#DFF0E6; --good-ink:#1C5C3B;
  --warn:#B37F1F; --warn-soft:#FBEED1; --warn-ink:#7A5613;
  --crit:#AB4636; --crit-soft:#F6E0DB; --crit-ink:#7C2F22;
  --shadow: 0 1px 2px rgba(43,38,20,.06), 0 6px 20px -8px rgba(43,38,20,.18);
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16140F; --surface:#1E1B14; --surface-2:#262218; --surface-3:#2E291C;
    --border:#3A331F; --border-soft:#332E1E;
    --ink:#F1EAD9; --ink-soft:#C4BBA5; --ink-faint:#8C8371;
    --accent:#E0955A; --accent-ink:#221507; --accent-soft:#3C2A17;
    --pine:#7FB593; --pine-soft:#213A2B;
    --lagoon:#6FA3BE;
    --good:#5FAE7B; --good-soft:#1E3527; --good-ink:#9CD6B2;
    --warn:#E0B44C; --warn-soft:#3B2E13; --warn-ink:#F0CE85;
    --crit:#E0806E; --crit-soft:#3C2119; --crit-ink:#F0AA9C;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16140F; --surface:#1E1B14; --surface-2:#262218; --surface-3:#2E291C;
  --border:#3A331F; --border-soft:#332E1E;
  --ink:#F1EAD9; --ink-soft:#C4BBA5; --ink-faint:#8C8371;
  --accent:#E0955A; --accent-ink:#221507; --accent-soft:#3C2A17;
  --pine:#7FB593; --pine-soft:#213A2B;
  --lagoon:#6FA3BE;
  --good:#5FAE7B; --good-soft:#1E3527; --good-ink:#9CD6B2;
  --warn:#E0B44C; --warn-soft:#3B2E13; --warn-ink:#F0CE85;
  --crit:#E0806E; --crit-soft:#3C2119; --crit-ink:#F0AA9C;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.55);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
}
h1,h2,h3,.display{
  font-family:"Fraunces", ui-serif, Georgia, serif;
  font-weight:600; letter-spacing:-0.01em; text-wrap:balance;
}
.mono, .num{
  font-family:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  font-variant-numeric: tabular-nums;
}
a{color:inherit}
button{font:inherit; color:inherit}
[hidden]{display:none !important;}

/* ---------- login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
}
.login-card{
  width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:16px;
}
.login-card .mark{margin:0 auto;}
.login-card h1{font-size:20px; margin:0; text-align:center;}
.login-card p.sub{margin:0; text-align:center; font-size:13px; color:var(--ink-faint);}
.login-field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:5px;}
.login-field input{
  width:100%; border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:9px; padding:10px 12px; font-size:14px; font-family:inherit;
}
.login-btn{
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:10px;
  padding:11px 18px; font-weight:700; cursor:pointer; font-size:14px; margin-top:4px;
}
.login-error{font-size:12.5px; color:var(--crit); min-height:16px;}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:14px 20px;
}
.topbar-row{display:flex; align-items:center; gap:14px; max-width:1180px; margin:0 auto;}
.mark{
  width:40px; height:40px; border-radius:50%; flex:none;
  background: conic-gradient(from 210deg, var(--accent), var(--pine) 55%, var(--lagoon) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
}
.mark svg{width:22px; height:22px}
.brand-text{display:flex; flex-direction:column; gap:1px; min-width:0;}
.brand-text .eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.brand-text h1{font-size:20px; margin:0; line-height:1.1;}
.topbar-meta{margin-left:auto; text-align:right; font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:12px;}
.topbar-meta .who{display:flex; flex-direction:column; gap:2px; text-align:right;}
.topbar-meta strong{color:var(--ink-soft); font-weight:600;}
.logout-btn{
  border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:6px 12px; font-size:12px; cursor:pointer; color:var(--ink-soft);
}
.topbar-btn{
  border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:6px 12px; font-size:12px; cursor:pointer; color:var(--ink-soft);
}
.topbar-btn:hover{background:var(--surface-2);}
.role-pill{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft);
  border:1px solid var(--border-soft);
}
.role-pill[data-role="admin"]{background:var(--pine-soft); color:var(--pine); border-color:transparent;}

/* ---------- stat tiles ---------- */
.stats{
  max-width:1180px; margin:16px auto 0; padding:0 20px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
}
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:4px;
}
.stat .k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint);}
.stat .v{font-size:22px; font-weight:700; font-family:"Fraunces",serif;}
.stat.good .v{color:var(--good)}
.stat.warn .v{color:var(--warn)}
.stat.crit .v{color:var(--crit)}
.stat .sub{font-size:11px; color:var(--ink-faint);}

/* ---------- tab bar (Lotes / Dashboard / Plano) ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:460px; margin:0 auto;
  display:flex; background:var(--surface); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 16px -6px rgba(43,38,20,.18);
}
.tab-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:10px 4px 9px; background:transparent; border:0; cursor:pointer;
  color:var(--ink-faint); font-size:11px; font-weight:600; min-height:52px;
}
.tab-btn svg{opacity:.7; transition:opacity .15s ease;}
.tab-btn[data-active="true"]{color:var(--accent);}
.tab-btn[data-active="true"] svg{opacity:1;}
.panel-title{
  font-family:"Fraunces",serif; font-weight:600; font-size:19px;
  max-width:1180px; margin:4px auto 12px; padding:0 20px;
}

/* ---------- controls ---------- */
.controls{
  position:sticky; top:69px; z-index:30;
  background:var(--bg); padding:12px 20px; margin-top:14px;
  border-bottom:1px solid var(--border);
}
.controls-inner{max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.search{
  flex:1 1 220px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:8px 14px;
}
.search input{
  border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; width:100%;
}
.search svg{flex:none; opacity:.55}
.chipset{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  border:1px solid var(--border); background:var(--surface); border-radius:999px;
  padding:7px 13px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--ink-faint);}
.chip[data-active="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.chip[data-active="true"] .dot{background:currentColor}
.chip.st-disponible[data-active="true"]{background:var(--good); border-color:var(--good); color:#fff}
.chip.st-reservado[data-active="true"]{background:var(--warn); border-color:var(--warn); color:#231a02}
.chip.st-vendido[data-active="true"]{background:var(--crit); border-color:var(--crit); color:#fff}
select.groupsel{
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:8px 30px 8px 14px; font-size:13px; cursor:pointer;
}

/* ---------- sections & grid ---------- */
main{max-width:1180px; margin:0 auto; padding:18px 20px calc(76px + env(safe-area-inset-bottom));}
.section{margin-top:26px;}
.section-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.section-head h2{font-size:17px; margin:0;}
.section-head .count{font-size:12px; color:var(--ink-faint);}
.lotgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:8px;
}
.lot{
  border-radius:10px; border:1px solid var(--border-soft); background:var(--surface);
  padding:8px 6px 7px; cursor:pointer; text-align:left; position:relative;
  display:flex; flex-direction:column; gap:3px; min-height:64px;
  transition: transform .1s ease;
}
.lot:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.lot:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.lot .num{font-size:15px; font-weight:700;}
.lot .area{font-size:10.5px; color:var(--ink-faint);}
.lot .bar{position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:10px 0 0 10px;}
.lot[data-estado="disponible"] .bar{background:var(--good);}
.lot[data-estado="reservado"] .bar{background:var(--warn);}
.lot[data-estado="vendido"] .bar{background:var(--crit);}
.lot[data-estado="vendido"]{background:var(--crit-soft);}
.lot[data-estado="reservado"]{background:var(--warn-soft);}
.lot[data-priced="false"] .num{color:var(--ink-faint);}

/* ---------- plan reference ---------- */
.plan-wrap{border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; background:var(--surface-2);}
.plan-map{position:relative; line-height:0;}
.plan-map img{display:block; width:100%; height:auto;}
.plan-dot{
  /* El círculo visible es chico a propósito (los lotes están muy juntos en
     el plano), pero el área táctil real es más grande que lo que se ve —
     así es más fácil acertar el lote correcto con el dedo sin agrandar
     tanto el punto como para tapar a los vecinos. */
  position:absolute; transform:translate(-50%,-50%);
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; padding:0;
}
.plan-dot::after{
  content:""; display:block; width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.35);
}
@media (min-width:700px){
  .plan-dot{width:16px; height:16px;}
  .plan-dot::after{width:11px; height:11px;}
}
.plan-dot[data-estado="disponible"]::after{background:var(--good);}
.plan-dot[data-estado="reservado"]::after{background:var(--warn);}
.plan-dot[data-estado="vendido"]::after{background:var(--crit);}
.plan-dot:hover::after, .plan-dot:focus-visible::after{outline:2px solid var(--ink); outline-offset:1px;}
.plan-legend{display:flex; flex-wrap:wrap; gap:14px; padding:12px 14px 0;}
.plan-legend .item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);}
.plan-legend .sw{width:10px; height:10px; border-radius:50%;}
.plan-legend .sw.disponible{background:var(--good);}
.plan-legend .sw.reservado{background:var(--warn);}
.plan-legend .sw.vendido{background:var(--crit);}
.plan-cap{padding:10px 14px; font-size:12px; color:var(--ink-faint);}

.note{
  margin-top:30px; padding:14px 16px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:12.5px; color:var(--ink-soft); line-height:1.55;
}
.note strong{color:var(--ink);}

/* ---------- drawer ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(20,16,8,.4); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.scrim[data-open="true"]{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; z-index:51; right:0; top:0; bottom:0; width:min(420px,100%);
  background:var(--surface); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .2s ease;
  display:flex; flex-direction:column;
}
.drawer[data-open="true"]{transform:translateX(0);}
@media (max-width:640px){
  .drawer{ right:0; left:0; top:auto; width:auto; max-height:88vh; border-left:0;
    border-top:1px solid var(--border); border-radius:18px 18px 0 0; transform:translateY(100%); }
  .drawer[data-open="true"]{transform:translateY(0);}
}
.drawer-head{
  display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border-soft);
}
.drawer-head .num{font-family:"Fraunces",serif; font-size:26px; font-weight:700;}
.drawer-head .zona-pill{
  font-size:11px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft);
  border:1px solid var(--border-soft);
}
.drawer-head .close{margin-left:auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.drawer-body{padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:18px; flex:1;}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:5px;}
.field input, .field textarea{
  width:100%; border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:9px; padding:8px 10px; font-size:14px; font-family:inherit;
}
.field textarea{resize:vertical; min-height:56px;}
.readout{background:var(--surface-2); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px;}
.readout .row{display:flex; justify-content:space-between; font-size:13px;}
.readout .row .k{color:var(--ink-faint);}
.readout .row .v{font-weight:600;}
.estado-group{display:flex; gap:7px;}
.estado-btn{
  flex:1; border:1px solid var(--border); background:var(--surface); border-radius:10px;
  padding:9px 6px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:center;
}
.estado-btn[data-sel="true"].e-disponible{background:var(--good); border-color:var(--good); color:#fff;}
.estado-btn[data-sel="true"].e-reservado{background:var(--warn); border-color:var(--warn); color:#231a02;}
.estado-btn[data-sel="true"].e-vendido{background:var(--crit); border-color:var(--crit); color:#fff;}
.save-row{display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--border-soft);}
.save-btn{
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:10px;
  padding:11px 18px; font-weight:700; cursor:pointer; font-size:14px;
}
.save-status{font-size:12px; color:var(--ink-faint);}
.updated-line{font-size:11.5px; color:var(--ink-faint);}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- modals (mi clave / usuarios) ---------- */
.modal-scrim{
  position:fixed; inset:0; background:rgba(20,16,8,.45); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.modal-scrim[data-open="true"]{opacity:1; pointer-events:auto;}
.modal{
  position:fixed; z-index:61; left:50%; top:50%;
  transform:translate(-50%,-46%) scale(.98); width:min(440px, calc(100vw - 32px));
  max-height:86vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
  display:flex; flex-direction:column;
}
.modal[data-open="true"]{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
.modal.modal-wide{width:min(720px, calc(100vw - 32px));}
.modal-head{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border-soft);}
.modal-head h2{font-size:18px; margin:0;}
.modal-head .close{margin-left:auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal-body{padding:16px 18px; display:flex; flex-direction:column; gap:16px;}
.modal-actions{display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--border-soft);}
.modal-msg{font-size:12.5px; min-height:16px;}
.modal-msg[data-kind="error"]{color:var(--crit);}
.modal-msg[data-kind="ok"]{color:var(--good);}

.users-table-wrap{overflow-x:auto; border:1px solid var(--border-soft); border-radius:12px;}
.users-table{width:100%; border-collapse:collapse; font-size:13px;}
.users-table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
  padding:9px 10px; background:var(--surface-2); border-bottom:1px solid var(--border-soft); white-space:nowrap;
}
.users-table td{padding:9px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
.users-table .sub{color:var(--ink-faint); font-size:11px;}
.users-table tr:last-child td{border-bottom:0;}
.badge{
  display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
}
.badge.role-admin{background:var(--pine-soft); color:var(--pine);}
.badge.role-comercial{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border-soft);}
.badge.st-active{background:var(--good-soft); color:var(--good-ink);}
.badge.st-inactive{background:var(--crit-soft); color:var(--crit-ink);}
.row-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.row-actions button{
  border:1px solid var(--border); background:var(--surface); border-radius:8px;
  padding:5px 9px; font-size:11.5px; cursor:pointer; color:var(--ink-soft); white-space:nowrap;
}
.row-actions button:hover{background:var(--surface-2);}
.row-actions button.danger{color:var(--crit); border-color:var(--crit-soft);}

.new-user-form{border-top:1px solid var(--border-soft); padding-top:14px;}
.new-user-form h3{font-size:14px; margin:0 0 10px;}

.audit-details summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft); padding:4px 0;}
.audit-log{max-height:220px; overflow-y:auto; font-size:12px; color:var(--ink-soft); display:flex; flex-direction:column; gap:6px; margin-top:8px;}
.audit-row{display:flex; justify-content:space-between; gap:10px; padding:6px 8px; background:var(--surface-2); border-radius:8px;}
.audit-row .t{color:var(--ink-faint); font-size:11px; white-space:nowrap;}

/* =====================================================================
   Celular y tablet (equipo comercial en campo)
   ===================================================================== */

/* Sensación más "app": sin flash gris al tocar, sin retraso de 300ms,
   y sin doble-tap-para-zoom accidental sobre los botones. */
body{ -webkit-tap-highlight-color:transparent; }
button, .chip, .lot, .plan-dot, .estado-btn{ touch-action:manipulation; }

@media (max-width:900px){
  /* Encabezado: pasa de una fila a dos, sin pisar nada ni desbordar. */
  .topbar{
    padding-top:max(14px, env(safe-area-inset-top));
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .topbar-row{ flex-wrap:wrap; row-gap:10px; }
  .topbar-meta{
    margin-left:0; width:100%; text-align:left;
    flex-wrap:wrap; row-gap:8px; justify-content:flex-start;
  }
  /* En la fila compacta no repetimos "Fase 1 · 121 lotes" (ya está en las
     tarjetas de abajo); dejamos solo el estado de sincronización. */
  .topbar-meta .who{ text-align:left; }
  .topbar-meta .who span:first-child{ display:none; }

  /* La barra de búsqueda/filtros deja de quedar fija arriba: con el
     encabezado a dos filas, un "top" fijo en píxeles se desalinea. Se
     desplaza con la página en vez de flotar. */
  .controls{ position:static; padding:12px 16px; }

  main{ padding-left:16px; padding-right:16px; }
  .stats{ padding-left:16px; padding-right:16px; }

  /* Objetivos táctiles más grandes (mínimo ~40-44px de alto). */
  .topbar-btn, .logout-btn{ padding:9px 14px; font-size:13px; }
  .chip{ padding:10px 15px; font-size:13.5px; }
  select.groupsel{ padding:10px 32px 10px 15px; }
  .estado-btn{ padding:13px 6px; font-size:13.5px; }
  .save-btn, .login-btn{ padding:14px 18px; font-size:15px; width:100%; }
  .search{ padding:10px 14px; }

  /* Los campos de texto a 16px evitan que Safari/Chrome hagan zoom
     automático al enfocarlos — clave para no perder el lugar al editar un
     lote parado en el terreno. */
  .login-field input,
  .field input,
  .field textarea,
  .search input,
  select.groupsel,
  #nu-role{ font-size:16px; }
}

@media (max-width:460px){
  .field-grid{ grid-template-columns:1fr; }
}

/* Los modales (Mi clave / Usuarios) se comportan como el panel del lote:
   una hoja que sube desde abajo, más natural con el pulgar en celular. */
@media (max-width:640px){
  .modal, .modal.modal-wide{
    left:0; right:0; top:auto; bottom:0; width:auto;
    max-height:90vh; border-radius:18px 18px 0 0; border:0;
    border-top:1px solid var(--border);
    transform:translateY(100%);
  }
  .modal[data-open="true"]{ transform:translateY(0); }
  .modal-actions{ padding-bottom:max(14px, env(safe-area-inset-bottom)); }
  .save-row{ padding-bottom:max(14px, env(safe-area-inset-bottom)); }
}