/* Móvil (clase .movil en <html>): texto y controles más grandes; el escritorio no cambia. */
/* ===== Móvil: texto y controles más grandes (solo pantallas estrechas; el escritorio no cambia) ===== */
.hdr-top {
  flex-wrap: nowrap;
}
.brand {
  min-width: 0;
}
.brand > div {
  min-width: 0;
}
.brand b,
.brand small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umenu {
  position: relative;
  flex: none;
}
.avatar {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 14px var(--f-body);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.avatar:hover,
.avatar[aria-expanded='true'] {
  border-color: var(--accent);
}
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 35;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10, 16, 24, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.menu-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  min-width: 0;
}
.menu-who .sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-it {
  appearance: none;
  border: 0;
  background: none;
  text-align: left;
  font: 500 14px var(--f-body);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.menu-it:hover,
.menu-it:focus-visible {
  background: var(--surface-2);
}
.rango {
  gap: 8px 14px;
  align-items: flex-end; /* fechas y atajos (Hoy, Esta semana…) alineados por abajo, en una sola fila */
}
.rango-f {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
html.movil .rango-f {
  flex: 1 1 100%;
  flex-wrap: wrap;
}
.rango-f .fld {
  flex: 0 1 180px;
}
/* ===== Móvil (clase .movil en <html>): texto y controles grandes; el escritorio no cambia ===== */
html.movil body {
  font-size: 16px;
  line-height: 1.5;
}
html.movil h1 {
  font-size: 25px;
}
html.movil h2 {
  font-size: 17px;
}
html.movil .sub,
html.movil .kv dt,
html.movil .fld,
html.movil .empty {
  font-size: 14.5px;
}
html.movil .ref {
  font-size: 13px;
}
html.movil .desc {
  font-size: 15.5px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
html.movil .big {
  font-size: 16.5px;
}
html.movil .pill {
  font-size: 13px;
  padding: 3px 10px;
}
html.movil input,
html.movil select,
html.movil textarea {
  font-size: 16px;
  padding: 11px 12px;
  min-height: 46px;
}
html.movil textarea {
  min-height: 120px;
}
html.movil input[type='checkbox'] {
  min-height: 0;
  width: 22px;
  height: 22px;
}
html.movil .chk {
  font-size: 15.5px;
}
html.movil .btn {
  font-size: 15.5px;
  padding: 11px 16px;
  min-height: 46px;
  justify-content: center;
}
html.movil .btn.sm {
  font-size: 14.5px;
  padding: 8px 13px;
  min-height: 40px;
}
html.movil .formbar .btn {
  flex: 1;
}
html.movil .chip {
  font-size: 14.5px;
  padding: 8px 14px;
}
html.movil .tab {
  font-size: 16px;
  padding: 13px 14px;
}
html.movil .back {
  font-size: 16px;
  padding: 6px 0;
}
html.movil .hdr-top {
  padding-block: 8px 2px;
}
html.movil .brand b {
  font-size: 18px;
}
html.movil .brand svg {
  width: 28px;
  height: 28px;
}
html.movil .item {
  padding: 14px 16px;
  gap: 6px;
}
html.movil .main b {
  font-size: 16.5px;
}
html.movil .when {
  font-size: 17px;
}
html.movil .kpi b {
  font-size: 30px;
}
html.movil .kv {
  grid-template-columns: minmax(0, 1fr);
}
html.movil .kv dd {
  margin-bottom: 8px;
  font-size: 16px;
}
html.movil .checks.col label {
  font-size: 16px;
}
html.movil .checks.col input {
  width: 24px;
  height: 24px;
}
html.movil .panel {
  width: 100%;
}
html.movil .ph h2 {
  font-size: 19px;
}
html.movil .x {
  width: 44px;
  height: 44px;
}
html.movil .toast {
  font-size: 15.5px;
}
html.movil .picker {
  max-height: none;
}
.otnum {
  display: block;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* Parte del técnico por pasos (solo en el móvil; en pantallas anchas se ve entero como siempre). */
.paso {
  display: contents;
}
.paso-cab,
.paso-atras,
.paso-sig,
.empezar-parte {
  display: none;
}
html.movil .empezar-parte {
  display: flex;
  min-height: 56px;
  font-size: 18px;
  font-weight: 700;
}
html.movil .parte-pasos .paso {
  display: none;
}
html.movil .parte-pasos[data-paso='1'] .paso[data-paso='1'],
html.movil .parte-pasos[data-paso='2'] .paso[data-paso='2'],
html.movil .parte-pasos[data-paso='3'] .paso[data-paso='3'],
html.movil .parte-pasos[data-paso='4'] .paso[data-paso='4'] {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
html.movil .paso-cab {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html.movil .paso-t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
html.movil .paso-t b {
  font-size: 20px;
}
html.movil .paso-t > span {
  font-size: 14px;
  font-weight: 600;
  color: var(--pri, #0f5c6b);
}
html.movil .paso-bar {
  display: flex;
  gap: 6px;
}
html.movil .paso-bar span {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line, #c9d6db);
}
html.movil .paso-bar span.on {
  background: var(--pri, #0f5c6b);
}
html.movil .parte-pasos .formbar {
  padding: 12px 0 14px;
  border-top: 1px solid var(--line, #dfe5ea);
}
/* Mientras el parte está a la vista, la barra va fija sobre la barra de pestañas (con JS: vigilarBarraParte). Fija y no
   «sticky»: el sticky parpadeaba al deslizar. */
html.movil .parte-pasos.barra-fija {
  padding-bottom: 86px;
}
html.movil .parte-pasos.barra-fija .formbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  padding: 10px 16px 12px;
  background: var(--bg, #f2f5f7);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
html.movil .parte-pasos .formbar .btn {
  min-height: 54px;
  font-size: 17px;
  font-weight: 700;
}
html.movil .parte-pasos .paso-atras {
  display: inline-flex;
  flex: 1;
}
html.movil .parte-pasos .paso-sig {
  display: inline-flex;
  flex: 2;
}
html.movil .parte-pasos .paso-fin {
  display: none;
  flex: 2;
}
html.movil .parte-pasos[data-paso='1'] .paso-atras {
  display: none;
}
html.movil .parte-pasos[data-paso='4'] .paso-sig {
  display: none;
}
html.movil .parte-pasos[data-paso='4'] .paso-fin {
  display: inline-flex;
}

/* Último paso: lo apuntado y el cobro. */
.paso-resumen {
  background: var(--surface, #fff);
  border-radius: 12px;
  padding: 2px 14px;
  border: 1px solid var(--line, #dfe5ea);
}
.paso-resumen:empty {
  display: none;
}
.paso-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #e6ecf0);
}
.paso-fila:last-child {
  border-bottom: 0;
}
.paso-fila-t {
  flex: 1;
  font-size: 15px;
}
.paso-fila .ot-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--ok, #1f7a4d);
}
.paso-fila.falta .ot-ico {
  background: var(--warn, #b45309);
}
html:not(.movil) .paso-resumen {
  display: none;
}
details.desglose > summary {
  cursor: pointer;
  padding: 6px 0;
}