/* ==========================================================================
   Locksmith CRM — demo
   Estilo de producto (app), no de web de marketing: el cliente tiene que ver
   una herramienta, no una landing.
   ========================================================================== */

:root {
  --brand: #1f6feb;
  --brand-dark: #1858c4;
  --ink: #0f1720;
  --ink-soft: #35404e;
  --slate: #6b7684;
  --line: #e2e6ec;
  --bg: #f4f6f9;
  --card: #ffffff;
  --ok: #12855a;
  --ok-bg: #e6f6ef;
  --err: #c0392b;
  --err-bg: #fdecea;
  --urgent: #d94f2b;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 32, .06);
  --shadow: 0 4px 16px rgba(15, 23, 32, .08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 32, .12);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  /* Nada debe desplazar la página en horizontal en el móvil. Es el cinturón;
     los tirantes son los min-width:0 de más abajo, que atacan la causa. */
  max-width: 100%;
  overflow-x: hidden;
}

/* Todo un poco más grande (19px base → escala los rem) y con más peso. */
html { font-size: 19px; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;   /* quita el doble-tap zoom (mantiene el pinch) */
}

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }

/* ── Chrome de la app ────────────────────────────────────────────────────── */
.app-bar {
  background: linear-gradient(100deg, #0c2019 0%, #123a2b 55%, #0e2c20 100%);
  color: #fff;
  padding: .85rem 0;
  /* El verde sube hasta la barra de estado del iPhone (zona segura). */
  padding-top: calc(.85rem + env(safe-area-inset-top, 0px));
  box-shadow: var(--shadow-sm);
}
/* flex-wrap:nowrap + min-width:0 es lo que impide que esta barra ensanche la
   página. Por defecto un item flex no encoge por debajo de su min-content, así
   que "Locksmith CRM" + los dos enlaces sumaban más que un móvil estrecho y
   desbordaban el body (que es lo que dejaba scroll lateral). */
.app-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  min-width: 0;
}
/* Con campanita: la nav + campanita quedan a la derecha, el logo a la izquierda. */
.app-bar .wrap.has-bell nav { margin-left: auto; }

/* ── Campanita de notificaciones ── */
.notif-bell { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; cursor: pointer; }
.notif-bell:hover { background: rgba(255,255,255,.20); }
.notif-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #103227; }
.notif-badge[hidden] { display: none; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 12px; width: min(340px, calc(100vw - 24px)); background: #141a22; border: 1px solid #262d38; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.6); z-index: 60; overflow: hidden; }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .9rem; font-weight: 800; font-size: .9rem; color: var(--ink); border-bottom: 1px solid #262d38; }
.notif-clear { border: 0; background: transparent; color: #ff8b80; font-family: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; padding: .2rem .4rem; border-radius: 6px; }
.notif-clear[hidden] { display: none; }
.notif-clear:hover { background: rgba(229,72,77,.14); }
.notif-body { max-height: min(60vh, 440px); overflow-y: auto; }
.notif-empty { padding: 1.4rem .9rem; text-align: center; color: var(--slate); font-size: .86rem; margin: 0; }
.notif-item { display: flex; align-items: stretch; border-bottom: 1px solid #1e242d; }
.notif-item:last-child { border-bottom: 0; }
.notif-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: .55rem; padding: .7rem .3rem .7rem .9rem; text-decoration: none; color: var(--ink); }
.notif-link:hover { background: #1b2029; }
.notif-del { flex: none; width: 38px; border: 0; background: transparent; color: var(--slate); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.notif-del:hover { color: #ff8b80; background: rgba(229,72,77,.1); }
.notif-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2c333f; color: var(--slate); margin-top: 1px; }
.notif-item.notif-accept .notif-ico { background: rgba(52,211,153,.15); color: var(--brand); }
.notif-item.notif-decline .notif-ico { background: rgba(229,72,77,.15); color: #ff8b80; }
.notif-item.notif-take .notif-ico { background: rgba(154,103,0,.2); color: #e2b23c; }
.notif-txt { flex: 1; min-width: 0; font-size: .84rem; line-height: 1.35; color: var(--slate); }
.notif-txt strong { color: var(--ink); font-weight: 700; }
.notif-reason { color: #ff8b80; font-size: .8rem; margin-top: .15rem; }
.notif-time { flex: none; font-size: .72rem; color: var(--slate); font-weight: 600; white-space: nowrap; }
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.02rem;
  /* Si no cabe, que se recorte la marca antes que romper el layout. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.logo .mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: #3ee6a9;               /* llave esmeralda suelta, sin cuadro de fondo */
  flex: none;
}
.logo .mark svg { width: 26px; height: 26px; }
.logo .mark img { width: 28px; height: 28px; display: block; }
/* flex:none — la navegación no se comprime; lo que cede es la marca. */
.app-bar nav { display: flex; gap: .4rem; flex: none; }
.app-bar nav a {
  color: #ffffff;               /* texto blanco */
  text-decoration: none;
  /* El tamaño se ajusta solo (--nav-scale) si la barra queda apretada. */
  font-size: calc(.88rem * var(--nav-scale, 1));
  font-weight: 600;
  padding: calc(.4rem * var(--nav-scale, 1)) calc(.8rem * var(--nav-scale, 1));
  border-radius: 7px;
  white-space: nowrap;          /* nunca partir "Log a job" en dos líneas */
}
.app-bar nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Tab activo: pastilla translúcida clara, texto blanco (para que resalte sin
   perder el blanco sobre el verde). */
.app-bar nav a.active { background: rgba(255,255,255,.18); color: #fff; }

/* En móvil: candado (solo icono) fijado a la izquierda, el menú sale de él, y
   las pestañas Log a job · Jobs · Dashboard quedan CENTRADAS en el header.
   El logo va absolute (fuera del flujo) para que la nav se centre en todo el ancho. */
@media (max-width: 560px) {
  .app-bar .wrap { justify-content: flex-end; }   /* pestañas a la derecha */
  .logo-txt { display: none; }                 /* sin "Locksmith CRM" */
  .logo {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    padding: 0; gap: 3px;
  }
  .logo .mark { width: 30px; height: 30px; }
  .app-bar nav { gap: .1rem; max-width: calc(100% - 44px); overflow-x: auto; scrollbar-width: none; }
  .app-bar nav::-webkit-scrollbar { display: none; }
  .app-bar nav a { padding: calc(.38rem * var(--nav-scale, 1)) calc(.45rem * var(--nav-scale, 1)); font-size: calc(.78rem * var(--nav-scale, 1)); }
  .menu { left: 14px; }
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ── Cabecera de página ──────────────────────────────────────────────────── */
.page-head { padding: 2.4rem 0 1.4rem; }
.page-head h1 { font-size: 1.6rem; }
.page-head p { color: var(--slate); margin: 0; font-size: .96rem; }

/* ── Tarjeta / formulario ────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.8rem;
  margin-bottom: 2.5rem;
}

/* min-width:0 rompe el ancho intrínseco de <fieldset> (que por defecto es
   min-content y NO respeta el contenedor). Sin esto, un contenido ancho dentro
   —p. ej. una dirección larga en el aviso "phone already on file"— ensancha
   TODO el fieldset (phone, name, email, botón de driver license, el aviso). */
fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; min-width: 0; }
fieldset:last-of-type { margin-bottom: 1rem; }
legend {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0 0 .8rem;
  width: 100%;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}

/* minmax(0, 1fr) en vez de 1fr: por defecto una pista de grid no baja de su
   min-content, y el <select> de servicios mide lo que su opción más larga
   ("Car key replacement / programming"). Eso empujaba la página a lo ancho. */
.row { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
/* Dentro de una fila, el espacio lo pone el gap (no el margen del campo),
   así el apilado en móvil queda con la misma distancia que los campos sueltos. */
.row .field { margin-bottom: 0; }
@media (min-width: 621px) {
  .row.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* City / State / ZIP: siempre en la misma línea (también en móvil). La ciudad
   se lleva el ancho; State y ZIP van estrechos. */
.row.cols-3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, 1fr); gap: .6rem; }

.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}
.field .opt { color: var(--slate); font-weight: 400; }
.field .req { color: #12b981; font-weight: 700; margin-left: 1px; }
.field select { text-overflow: ellipsis; }

.field input, .field select, .field textarea {
  width: 100%;
  /* Sin esto, input y select imponen su ancho intrínseco (el select, el de su
     opción más larga) y desbordan el contenedor en pantallas estrechas. */
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: .6rem .8rem;
  border: 1px solid #ccd3dd;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 92px; resize: vertical; }
/* iOS no respeta el ancho en date/time y usa su tamaño nativo (se salen del
   contenedor). Con appearance:none respetan el width:100% como los demás. */
.field input[type="datetime-local"],
.field input[type="date"],
.field input[type="time"] { -webkit-appearance: none; appearance: none; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .16);
}
.field.invalid input, .field.invalid select { border-color: var(--err); background: #fff8f7; }
.field .err { display: none; font-size: .8rem; color: var(--err); margin-top: .3rem; }
.field.invalid .err { display: block; }
.field .hint { font-size: .8rem; color: var(--slate); margin-top: .3rem; }

/* Selector de urgencia — botones de radio con pinta de segmented control */
/* position:relative es CLAVE: los radios van con position:absolute+opacity:0;
   sin un ancestro posicionado "flotan" arriba del contenedor y, al enfocarlos
   (dentro de un modal con scroll), el navegador salta al inicio. Anclándolos
   aquí se quedan en su sitio y no hay salto. */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; position: relative; }
.seg.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2 opciones a ancho completo */
.log-mode { margin: 0 0 1rem; }   /* toggle Log a job / Log a quote */

/* "Assign to" resaltado en el formulario (caja verde para que no se pase por alto). */
.field-assign { background: rgba(52, 211, 153, .10); border: 1px solid rgba(52, 211, 153, .45); border-radius: 12px; padding: .85rem .9rem; margin-top: .4rem; }
.field-assign > label { color: #17b877; font-weight: 800; }
.field-assign select { border-color: rgba(52, 211, 153, .5); }
.assign-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.assign-chip { display: inline-flex; align-items: center; gap: .15rem; background: rgba(52, 211, 153, .15); border: 1px solid rgba(52, 211, 153, .5); color: #17b877; font-weight: 700; font-size: .85rem; padding: .28rem .3rem .28rem .7rem; border-radius: 999px; }
.assign-chip-x { border: 0; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 .3rem; border-radius: 999px; }
.assign-chip-x:hover { color: #ef4444; }
/* Chips de solo lectura (worker en el editor): no puede quitar la asignación. */
.chips-readonly .assign-chip-x { display: none; }
/* "Assign to": panel propio que se queda abierto para elegir varios. */
.assign-select { position: relative; }
.assign-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 46px; padding: .6rem .8rem; border-radius: 10px; background: #232a34; border: 1px solid transparent; color: var(--ink); font-family: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
.assign-trigger:focus-visible { outline: none; border-color: var(--ok); box-shadow: 0 0 0 3px rgba(47,209,150,.25); }
.assign-trigger .assign-ph { color: #8a95a5; }
.assign-caret { color: var(--slate); flex: none; }
.assign-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: #1a1f27; border: 1px solid #2a313c; border-radius: 12px; padding: 4px; max-height: 280px; overflow: auto; box-shadow: 0 16px 36px -14px rgba(0,0,0,.7); }
.assign-panel[hidden] { display: none; }
.assign-opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .7rem; border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: .95rem; font-weight: 600; text-align: left; border-radius: 8px; cursor: pointer; }
.assign-opt:hover { background: #2c333f; }
.assign-opt.selected { color: var(--ok); }
.assign-check { flex: none; opacity: 0; color: var(--ok); }
.assign-opt.selected .assign-check { opacity: 1; }
/* Selector por id para ganarle a .hint / .log-page .hint (que si no, pisa el rojo). */
#phone-incomplete { display: block; color: #ef4444; font-size: .8rem; margin-top: .25rem; }
/* OJO: sin esto, el display:block de arriba pisa el atributo hidden y el aviso
   saldría siempre. Con hidden presente, se oculta de verdad. */
#phone-incomplete[hidden] { display: none; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 46px;
  margin: 0;
  padding: .5rem .4rem;
  border: 1px solid #ccd3dd;
  border-radius: var(--radius);
  background: var(--card);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
}
.seg label:hover { border-color: var(--brand); }
.seg input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg input:checked + label.is-urgent { background: var(--urgent); border-color: var(--urgent); }
.seg input:focus-visible + label { box-shadow: 0 0 0 3px rgba(31, 111, 235, .3); }

/* Importe cobrado — el $ va dentro del campo, no en el label, para que se lea
   como una cifra de dinero y no como un texto cualquiera. */
.money-input { position: relative; }
.money-sign {
  position: absolute;
  left: .85rem; top: 50%;
  transform: translateY(-50%);
  color: var(--slate);
  font-size: 1.05rem;
  font-weight: 600;
  pointer-events: none;
}
.money-input input {
  padding-left: 1.9rem;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Sugerencias de dirección (Google Places) */
.addr-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
}
.addr-suggest[hidden] { display: none; }
.addr-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .6rem .6rem;
  border-radius: 7px;
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
}
.addr-item svg { flex: none; margin-top: .15rem; color: var(--slate); }
.addr-item.active, .addr-item:hover { background: var(--bg); }
.addr-item.active svg, .addr-item:hover svg { color: var(--brand); }

/* Listado del equipo (Team) */
.team-tip { color: var(--slate); font-size: .85rem; margin: -.4rem 0 1rem; }
/* minmax(0,1fr): la columna NO crece hasta el contenido (min-content) — se
   queda al ancho del contenedor y deja que las filas encojan. Sin esto, una
   dirección larga ensancha toda la lista y se sale de la pantalla. */
.team-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.team-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-width: 0; text-align: left; font-family: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .8rem 1rem; box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.team-item:hover { border-color: var(--brand); }
/* Filas con checkbox del modal Assign (multi-select). */
.ap-check { gap: .7rem; }
.ap-check input[type="checkbox"] { flex: none; width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.ap-check .team-who { flex: 1; }
.ap-check.on { border-color: var(--brand); background: rgba(52,211,153,.09); }
.team-who { display: flex; flex-direction: column; min-width: 0; }
/* Dirección de empresa en varias líneas (no se corta): address arriba, city/zip abajo. */
.team-who .comp-addr { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
/* Pill un poco más grande en las filas del equipo/empresas. */
.team-item .tag { flex: none; font-size: .78rem; padding: .24rem .65rem; }
.team-who strong { font-size: .96rem; }
.team-who small { color: var(--slate); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#role-hint { display: block; }

/* Panel de usuario */
.user-info { margin: 0; }
.user-info > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.user-info dt { color: var(--slate); font-size: .86rem; }
.user-info dd { margin: 0; font-weight: 600; font-size: .92rem; text-align: right; word-break: break-word; }
.um-msg { min-height: 1.1em; margin: .7rem 0 0; font-size: .86rem; }
.um-msg.ok { color: var(--ok); }
.um-msg.err { color: var(--err); }
.um-sep { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0 1.2rem; }
.um-danger-label { font-size: .86rem; color: var(--slate); margin: 0 0 .7rem; }

.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { background: #a3271b; }
.btn-danger.armed { background: #a3271b; }

/* Sugerencias de cliente existente (por teléfono) */
.cust-suggest {
  margin: -.3rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt, #f6f7f9);
  padding: .7rem;
  max-width: 100%;
  overflow: hidden;            /* nada de su contenido puede salirse / ensanchar */
}
.cust-suggest-head, .cust-suggest-foot { overflow-wrap: anywhere; }
.cust-suggest[hidden], .cust-using[hidden] { display: none; }
.cust-suggest-head { margin: 0 0 .5rem; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.cust-suggest-foot { margin: .5rem 0 0; font-size: .78rem; color: var(--slate); }
.cust-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; max-width: 100%; min-width: 0; text-align: left;
  padding: .6rem .7rem; margin-bottom: .35rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); cursor: pointer;
  font-family: inherit;
}
.cust-row:last-of-type { margin-bottom: 0; }
.cust-row:hover { border-color: var(--brand); }
.cust-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.cust-info strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-info small { color: var(--slate); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-use { flex: none; font-size: .82rem; font-weight: 700; color: var(--brand); }

.cust-using { margin: -.3rem 0 1rem; }
.cust-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .5rem .4rem .7rem;
  background: var(--ok-bg); color: var(--ok);
  border: 1px solid #b9e5d1; border-radius: 999px;
  font-size: .85rem; font-weight: 600;
}
.cust-chip button {
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-left: .1rem;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.06); color: inherit;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.cust-chip button:hover { background: rgba(0,0,0,.12); }

/* ── Manage — diseño de tarjetas (mg-*) + Services (svc-*) ─────────────── */
.mg-page, .mg-modal{
  --card:#1a1f27; --sub:#141920; --field:#232a34; --field-hover:#28303b;
  --text:#e7ecf2; --soft:#c3ccd8; --muted:#8a95a5; --dim:#6f7a8a; --line:rgba(255,255,255,.07);
  --accent:#12b981; --accent-2:#16c98c; --accent-3:#10b47e; --danger:#ff6b6b; --danger-soft:#ff8f8f;
  --role-admin:#12b981; --role-worker:#6aa8ff; --role-dispatcher:#e0a94d;
}
.mg-page{width:100%;max-width:480px;margin:0 auto;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;color:var(--text)}
.mg-page input::placeholder{color:#5c6675}

.mg-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 14px 16px;box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
.mg-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mg-eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.mg-eyebrow h2{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mg-tip{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.mg-tip strong{color:var(--soft);font-weight:650}
h1.mg-h1{margin:0 0 5px;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--text)}

.mg-field{display:flex;flex-direction:column;gap:6px}
.mg-label{font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--soft)}
.mg-hint{font-size:11.5px;line-height:1.45;color:var(--dim)}
.mg-input{width:100%;height:42px;padding:0 12px;background:var(--field);border:1px solid rgba(255,255,255,.09);border-radius:11px;color:var(--text);font-family:inherit;font-size:14.5px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.mg-input.sm{height:40px}
.mg-input:hover,.mg-select:hover{background:var(--field-hover);border-color:rgba(255,255,255,.2)}
.mg-input:focus{border-color:var(--accent);background:#262e39;box-shadow:0 0 0 3px rgba(18,185,129,.24)}
.mg-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;height:42px;padding:0 32px 0 12px;background:var(--field);color:var(--text);border:1px solid rgba(255,255,255,.09);border-radius:11px;font-family:inherit;font-size:14.5px;font-weight:600;line-height:1;cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.mg-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,185,129,.28)}
.mg-selwrap{position:relative;width:100%}
.mg-caret{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:10px;line-height:1}
.mg-suffix{position:relative;width:110px;height:42px;flex:0 0 auto}
.mg-suffix input{width:100%;height:100%;padding:0 30px 0 12px;font-weight:600}
.mg-suffix span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;font-weight:600;pointer-events:none}
.mg-suffix.sm{width:104px;height:38px}
.mg-suffix.sm input{height:38px;padding:0 28px 0 11px;border-radius:10px;font-size:14px}
.mg-suffix.sm span{right:11px;font-size:12.5px}

.mg-primary{flex:0 0 auto;height:42px;padding:0 20px;border:none;border-radius:11px;background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent) 55%,var(--accent-3) 100%);color:#052018;font-family:inherit;font-size:14.5px;font-weight:750;letter-spacing:-.01em;cursor:pointer;outline:none;box-shadow:0 6px 18px -8px rgba(18,185,129,.7);transition:filter .15s,transform .08s}
.mg-primary:hover{filter:brightness(1.07)}
.mg-primary:active{transform:translateY(1px)}
.mg-primary:disabled{opacity:.6;cursor:default}
.mg-primary:focus-visible{box-shadow:0 0 0 3px rgba(18,185,129,.35)}
.mg-primary.is-saved{background:rgba(18,185,129,.16);color:#3fdca4;box-shadow:inset 0 0 0 1px rgba(18,185,129,.4)}
.mg-ghost{height:40px;padding:0 15px;background:rgba(18,185,129,.11);border:1px solid rgba(18,185,129,.38);border-radius:11px;color:#3fdca4;font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:6px;outline:none;transition:background .15s,border-color .15s}
.mg-ghost.sm{height:38px;padding:0 16px;border-radius:10px;font-size:13.5px}
.mg-ghost:hover{background:rgba(18,185,129,.2);border-color:rgba(18,185,129,.6)}
.mg-ghost:disabled{opacity:.6;cursor:default}
.mg-ghost:focus-visible{box-shadow:0 0 0 3px rgba(18,185,129,.28)}
.mg-ghost i{font-style:normal;font-size:16px;line-height:1;margin-top:-1px}
.mg-msg{font-size:12.5px;font-weight:600;line-height:1.4;color:#3fdca4;min-height:1em}
.mg-msg.err{color:var(--danger-soft)}

.mg-seg{display:flex;gap:4px;padding:4px;background:var(--field);border:1px solid rgba(255,255,255,.09);border-radius:12px}
.mg-seg button{flex:1 1 0;height:34px;padding:0 6px;border:none;border-radius:9px;background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;outline:none;transition:background .15s,color .15s}
.mg-seg button[aria-checked="true"]{background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent) 55%,var(--accent-3) 100%);color:#052018;font-weight:750;box-shadow:0 4px 12px -6px rgba(18,185,129,.8)}
.mg-seg button:focus-visible{box-shadow:0 0 0 3px rgba(18,185,129,.3)}
.mg-roles{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.mg-roles li{display:flex;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.5;color:var(--dim)}
.mg-roles b{flex:0 0 74px;font-weight:750}
.mg-roles .r-admin{color:var(--role-admin)} .mg-roles .r-worker{color:var(--role-worker)} .mg-roles .r-dispatcher{color:var(--role-dispatcher)}

.mg-rows{display:flex;flex-direction:column;gap:7px}
.mg-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px;background:var(--field);border:1px solid var(--line);border-radius:12px;cursor:pointer;font-family:inherit;outline:none;transition:background .15s,border-color .15s,transform .08s}
.mg-row:hover{background:var(--field-hover);border-color:rgba(255,255,255,.18)}
.mg-row:active{transform:translateY(1px)}
.mg-row:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,185,129,.25)}
.mg-row .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mg-row .t1{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.mg-row .t2{font-size:12px;color:var(--muted)}
.mg-row .t1,.mg-row .t2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-row .chev{flex:0 0 auto;color:#5c6675;font-size:15px;line-height:1}
.mg-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:13.7px;font-weight:800;letter-spacing:.02em;overflow:hidden}
.mg-avatar.lg{width:44px;height:44px;font-size:15.8px;border-radius:11px}
.mg-badge{flex:0 0 auto;padding:4px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.r-Admin{--rc:var(--role-admin)} .r-Worker{--rc:var(--role-worker)} .r-Dispatcher{--rc:var(--role-dispatcher)} .r-Owner{--rc:#9aa4b2}
.mg-avatar[class*="r-"]{background:color-mix(in srgb,var(--rc) 16%,var(--field));border:1px solid color-mix(in srgb,var(--rc) 40%,transparent);color:var(--rc)}
.mg-badge[class*="r-"]{background:color-mix(in srgb,var(--rc) 14%,transparent);border:1px solid color-mix(in srgb,var(--rc) 38%,transparent);color:var(--rc)}
.mg-logo{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#243040,#1c2531);border:1px solid rgba(255,255,255,.1);color:var(--soft);font-size:13.7px;font-weight:800;letter-spacing:.04em;overflow:hidden}
.mg-logo.lg{width:44px;height:44px;font-size:15.8px;border-radius:12px}
.mg-logo.xl{width:60px;height:60px;font-size:21.6px;border-radius:14px}

/* Services rows */
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:14px;row-gap:9px;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.055)}
.svc-name-wrap{flex:1 0 100%;min-width:0;display:flex;align-items:baseline;gap:7px}
.svc-name{min-width:0;font-size:16.5px;font-weight:700;letter-spacing:-.012em;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.svc-row.is-ref .svc-name{color:var(--accent)}
.svc-ref{flex:0 0 auto;font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap;display:none}
.svc-row.is-ref .svc-ref{display:inline}
.svc-controls{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.svc-selwrap{position:relative;flex:0 0 auto}
.svc-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:72px;height:34px;padding:0 20px 0 9px;background:var(--field);color:var(--text);border:1px solid rgba(255,255,255,.09);border-radius:9px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.svc-select:hover{background:var(--field-hover);border-color:rgba(255,255,255,.2)}
.svc-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,185,129,.28)}
.svc-caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:10px;line-height:1}
.svc-money{position:relative;width:64px;height:34px;flex:0 0 auto}
.svc-money>span{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11.5px;font-weight:600;pointer-events:none}
.svc-money input{width:100%;height:100%;padding:0 6px 0 21px;background:var(--field);border:1px solid rgba(255,255,255,.09);border-radius:9px;color:var(--text);font-family:inherit;font-size:13.5px;font-weight:600;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.svc-money input:hover{background:var(--field-hover);border-color:rgba(255,255,255,.2)}
.svc-money input:focus{border-color:var(--accent);background:#262e39;box-shadow:0 0 0 3px rgba(18,185,129,.24)}
.svc-range{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.svc-row[data-type="Fixed"] .svc-range{visibility:hidden}
.svc-to{width:20px;text-align:center;color:var(--muted);font-size:12.5px;flex:0 0 auto}
.svc-del{flex:0 0 auto;width:32px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:10px;color:var(--dim);cursor:pointer;padding:0;outline:none;transition:color .15s,background .15s,border-color .15s}
.svc-del:hover{color:var(--danger);border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.12)}
.svc-del:focus-visible{color:var(--danger);border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,107,107,.25)}
.svc-row.is-ref .svc-del{visibility:hidden;pointer-events:none}
.svc-foot{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;gap:12px;margin-top:14px;padding-top:15px;border-top:1px solid var(--line)}
.svc-count{font-size:12.5px;color:var(--muted)}
.svc-msg.ok{color:#3fdca4}

/* Modal / bottom sheet */
.mg-modal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;background:rgba(4,12,9,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mg-modal.open{display:flex;animation:mgFadeIn .16s ease}
.mg-backdrop{position:absolute;inset:0}
.mg-sheet{position:relative;width:100%;max-width:480px;max-height:92vh;overflow:auto;background:var(--card);border:1px solid rgba(255,255,255,.09);border-radius:18px 18px 0 0;padding:16px 14px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 60px -20px rgba(0,0,0,.95);animation:mgSheetUp .22s cubic-bezier(.2,.8,.3,1)}
.mg-grab{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);margin:0 auto 14px}
.mg-sheet-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px}
.mg-sheet-head h3{margin:0 0 3px;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.mg-sheet-head p{margin:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-x{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:var(--field);border:1px solid rgba(255,255,255,.09);border-radius:10px;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;outline:none;font-family:inherit;transition:color .15s,background .15s}
.mg-x:hover{background:var(--field-hover);color:var(--text)}
.mg-x:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,185,129,.25)}
.mg-block{background:var(--sub);border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:13px 12px;display:flex;flex-direction:column;gap:9px}
.mg-block .cap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.mg-danger{margin-top:4px;padding-top:15px;border-top:1px dashed rgba(255,107,107,.3);display:flex;align-items:flex-start;gap:11px}
.mg-danger .ico{flex:0 0 auto;width:30px;height:30px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.3);color:var(--danger-soft)}
.mg-danger .body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.mg-danger .t{font-size:13.5px;font-weight:750;letter-spacing:-.01em;color:var(--text)}
.mg-danger p{margin:0;font-size:12px;line-height:1.5;color:#7a8494}
.mg-del-btn{align-self:flex-start;height:36px;padding:0 15px;background:transparent;border:1px solid rgba(255,107,107,.4);border-radius:10px;color:var(--danger-soft);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;outline:none;transition:background .15s,border-color .15s,color .15s}
.mg-del-btn:hover{background:rgba(255,107,107,.16);border-color:var(--danger);color:#ffb3b3}
.mg-del-btn:focus-visible{box-shadow:0 0 0 3px rgba(255,107,107,.28)}

.mg-invoice{background:#f4f6f8;border-radius:10px;padding:12px 13px;display:flex;align-items:center;gap:10px}
.mg-invoice .lg{flex:0 0 auto;width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#0f1720;color:var(--text);font-size:12px;font-weight:800;letter-spacing:.04em;overflow:hidden}
.mg-invoice .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mg-invoice .n{font-size:13.5px;font-weight:800;color:#0f1720;letter-spacing:-.01em}
.mg-invoice .a{font-size:11px;color:#5b6675}
.mg-invoice .n,.mg-invoice .a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-invoice .tag{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mg-upload{align-self:flex-start;height:36px;padding:0 14px;background:var(--field);border:1px dashed rgba(255,255,255,.22);border-radius:10px;color:var(--soft);font-family:inherit;font-size:13px;font-weight:650;cursor:pointer;outline:none;transition:background .15s,border-color .15s}
.mg-upload:hover{background:var(--field-hover);border-color:var(--accent);color:var(--text)}
.mg-upload:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,185,129,.25)}
.mg-upload[hidden]{display:none}

.mg-page .row{display:flex;flex-wrap:wrap;gap:11px}
.mg-sheet .row{display:flex;flex-wrap:wrap;gap:11px}
.mg-page .col,.mg-sheet .col{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:6px}
.mg-sheet .col.wide{flex:2 1 170px} .mg-sheet .col.narrow{flex:1 1 100px}
@keyframes mgFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mgSheetUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.mg-modal.open,.mg-sheet{animation:none}}

/* Precio recomendado bajo el importe (formulario). */
.price-rec { margin: .45rem 0 0; font-size: .84rem; color: var(--slate); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.price-rec[hidden] { display: none; }
.price-rec .pr-badge { font-weight: 700; color: var(--brand); background: rgba(52,211,153,.12); border-radius: 7px; padding: .15rem .5rem; }
.price-rec .pr-fee { color: var(--slate); }

/* Historial de trabajos pasados del cliente elegido. */
.cust-history { margin: -.3rem 0 1rem; }
.cust-history[hidden] { display: none; }
.cust-history .ch-head { font-size: .8rem; font-weight: 700; color: var(--slate); margin: 0 0 .4rem 2px; }
.cust-history .ch-list { display: flex; flex-direction: column; gap: .4rem; }
.cust-history .ch-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: inherit; text-decoration: none; cursor: pointer;
}
.cust-history .ch-row:hover { border-color: var(--brand); }
.cust-history .ch-date { font-size: .74rem; font-weight: 700; color: var(--slate); flex: none; min-width: 62px; }
.cust-history .ch-svc { font-size: .84rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-history .ch-amt { font-size: .82rem; font-weight: 700; color: var(--ok); flex: none; }
.cust-history .ch-badge { font-size: .68rem; font-weight: 700; padding: .12rem .4rem; border-radius: 6px; flex: none; background: #2c333f; color: var(--ink-soft); }
.cust-history .ch-badge.done { background: var(--ok-bg); color: var(--ok); }
.cust-history .ch-badge.quote { background: rgba(52,211,153,.14); color: var(--brand); }

/* Botón de escanear el carnet */
.scan-btn { margin-bottom: 1.2rem; }
.scan-btn svg { color: var(--brand); }

/* Modal de la cámara (pantalla completa) */
.scan-modal {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
  display: flex; flex-direction: column;
}
.scan-modal[hidden] { display: none; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.scan-frame {
  width: min(86vw, 460px);
  aspect-ratio: 5 / 3;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}
.scan-top {
  position: relative; z-index: 1;
  padding: calc(env(safe-area-inset-top, 0) + 1.2rem) 1.2rem 0;
  text-align: center;
}
.scan-hint {
  display: inline-block;
  margin: 0;
  padding: .6rem 1rem;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border-radius: 10px;
  font-size: .92rem;
}
.scan-bottom {
  position: relative; z-index: 1;
  margin-top: auto;
  padding: 1.2rem 1.2rem calc(env(safe-area-inset-bottom, 0) + 1.4rem);
  text-align: center;
}
.scan-status { color: #fff; font-size: .9rem; margin: 0 0 .9rem; min-height: 1.2em; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.scan-bottom .btn { background: var(--card); }

/* Honeypot */
/* Honeypot. Nada de left:-9999px: en algunos navegadores móviles eso mismo
   provoca el desplazamiento lateral que estamos intentando quitar. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
/* Dos formas de enviar el formulario: como job o como quote. */
.actions-log { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.actions-log .btn { width: 100%; min-width: 0; }
.btn.btn-quote { background: transparent; border: 1px solid var(--brand); color: var(--brand); }
.btn.btn-quote:hover { background: rgba(52, 211, 153, .12); }
.reset-log { margin-top: .6rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .65rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .96rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled { background: #9db8e6; cursor: not-allowed; }
.btn-quiet { background: var(--card); border-color: #ccd3dd; color: var(--ink-soft); }
.btn-quiet:hover { background: #f7f9fb; }
/* Botón a ancho completo (como los campos del formulario). */
.btn-block { display: flex; width: 100%; }

:focus-visible { outline: 3px solid rgba(31, 111, 235, .5); outline-offset: 2px; }

/* ── Mensajes ────────────────────────────────────────────────────────────── */
.msg {
  display: none;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 1.2rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  font-size: .93rem;
}
.msg.show { display: flex; }
.msg svg { flex: none; margin-top: .15rem; }
.msg-err { background: var(--err-bg); color: var(--err); border: 1px solid #f3c2bd; }
.msg strong { display: block; }

/* ── Login del formulario ─────────────────────────────────────────────────── */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
.gate[hidden] { display: none; }
.gate-card {
  width: 100%;
  max-width: 340px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.6rem;
  text-align: center;
}
.gate-logo {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto 1rem;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
}
.gate-card h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.gate-sub { color: var(--slate); font-size: .9rem; margin-bottom: 1.3rem; }
.gate-card input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  margin-bottom: .8rem;
  border: 1px solid #ccd3dd;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
}
.gate-card input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,111,235,.16); }
.gate-err { min-height: 1.1em; margin: .7rem 0 0; font-size: .85rem; color: var(--err); }
.gate-forgot {
  margin: .9rem auto 0;
  display: block;
  border: 0; background: transparent;
  color: var(--brand); font-family: inherit;
  font-size: .86rem; font-weight: 600; cursor: pointer;
}
.gate-forgot:hover { text-decoration: underline; }
.gate-forgot:disabled { opacity: .6; cursor: default; }
.gate-note { min-height: 1.1em; margin: .7rem 0 0; font-size: .84rem; color: var(--slate); }
.gate-note.ok { color: var(--ok); }
.gate-note.err { color: var(--err); }
.gate-card input[type="password"] { margin-bottom: .8rem; }
.gate.busy .gate-card { opacity: .6; pointer-events: none; }

/* Botón de salir, en el nav. Se apaga hasta que hay sesión. */
.nav-logout {
  border: 1px solid rgba(255,255,255,.24);
  background: transparent;
  color: rgba(255,255,255,.72);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .7rem;
  border-radius: 7px;
  cursor: pointer;
}
.nav-logout:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-logout[hidden] { display: none; }

/* ── Pestaña Jobs ─────────────────────────────────────────────────────────── */
/* Solo la cabecera de Jobs es flex (título + botón Refresh). No tocar el
   .page-head global, que en el formulario lleva h1 y p directos. */
.jobs-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; }
/* Título + icono de recargar en la misma línea. */
.title-row { display: flex; align-items: center; gap: .55rem; }
.title-row h1 { margin: 0; }
/* Botón alineado a la derecha de la fila del título (p. ej. Google Sheet en Dashboard). */
.dash-sheet { margin-left: auto; }
/* Botón de recargar: solo el icono (círculo con flecha), sin caja. */
.refresh-btn {
  border: 0; background: none; padding: .2rem; margin: 0; cursor: pointer;
  color: var(--slate); display: inline-grid; place-items: center;
  border-radius: 8px; flex: none; -webkit-tap-highlight-color: transparent;
}
.refresh-btn .reload-ico { display: block; transition: transform .15s ease; }
.refresh-btn:hover { color: var(--brand); }
.refresh-btn:hover .reload-ico { transform: rotate(-25deg); }
.refresh-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.refresh-btn.spinning { color: var(--brand); }
.refresh-btn.spinning .reload-ico { animation: spin .7s linear infinite; }
.refresh-btn.spinning:hover .reload-ico { transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.dash-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
#sheet-btn svg { color: #188038; }
.jobs-loading, .jobs-empty { color: var(--slate); font-size: .95rem; padding: .6rem 0; }

/* Barra de búsqueda por teléfono */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.4rem;
}
.search-bar .search-ico {
  position: absolute;
  left: .85rem;
  color: var(--slate);
  pointer-events: none;
}
.search-bar input {
  width: 100%;
  min-height: 48px;
  padding: .7rem 2.6rem;
  border: 1px solid #ccd3dd;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
}
.search-bar input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .16);
}
.search-clear {
  position: absolute;
  right: .5rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
}
.search-clear:hover { background: var(--bg); color: var(--ink); }
.search-clear[hidden] { display: none; }
.jobs-empty-card { text-align: center; padding: 3rem 1.4rem; }
.jobs-empty-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem; }
/* Botón "Log new job" dentro de cada tarjeta (solo al buscar). Mismo diseño
   que "Mark done" (verde relleno). */
.job-lognew-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .5rem; padding: .42rem .6rem; min-height: 0; font-size: .82rem; background: #1f8a4c; border: 1px solid #1f8a4c; color: #fff; }
.job-lognew-btn:hover { background: #1a7a43; border-color: #1a7a43; }
.job-lognew-btn svg { flex: none; }

/* Filtro por fecha (Jobs / Pay): un día suelto o un rango. Al elegir "From" se
   iguala "To" (día específico); cambia "To" para hacer un rango. */
.date-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: 0 0 1.2rem; }
.df-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; min-width: 0; }
.df-field .day-picker { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.df-lab { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.date-filter .daybtn { flex: 0 0 auto; }
.date-filter .daybtn[hidden] { display: none; }
/* En móvil: rejilla de 2 columnas EXACTAS (From | To) que nunca supera el ancho
   del contenedor (= el de la barra de búsqueda). min-width:0 + overflow:hidden
   fuerzan a que el input de fecha de iOS no se salga. "All dates" abajo. */
@media (max-width: 560px) {
  .date-filter { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: end; }
  .date-filter .df-field { min-width: 0; }
  .date-filter .df-field .day-picker { display: block; width: 100%; min-width: 0; }
  .date-filter .daybtn { grid-column: 1 / -1; }
}

.jobs-group {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 2rem 0 1rem;
}
.jobs-group:first-child { margin-top: .5rem; }
.jobs-group span {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: .8rem;
}

.jobs-list { display: grid; gap: .7rem; }
@media (min-width: 1100px) { .jobs-list { grid-template-columns: repeat(2, 1fr); } }
/* No dibujar las tarjetas fuera de pantalla → listas largas mucho más fluidas.
   'auto' recuerda el alto real tras el primer render, evitando saltos. */
.jobs-list > * { content-visibility: auto; contain-intrinsic-size: auto 130px; }

.job {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: .85rem .95rem;
  background: var(--card);
}
.job-urgent { border-left-color: var(--err); background: var(--err-bg); }
.job-done { border-left-color: var(--ok); opacity: .82; }
/* Completadas: caja más compacta (sin address, menos aire). */
.job-done { gap: .4rem; padding: .65rem .8rem; }
.job-done .job-who strong { font-size: .92rem; }
.job-done .job-service { font-size: .86rem; }
.job-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.job-who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.job-name-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.job-when { color: var(--slate); font-size: .78rem; font-weight: 600; flex: none; }
/* Fecha editable: se ve como el texto pero indica que se puede tocar. */
.job-when-btn { border: 0; background: transparent; padding: 0; font-family: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.job-when-btn:hover { color: var(--brand); }
.job-who strong { font-size: .98rem; line-height: 1.25; word-break: break-word; }
.job-tel {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--ok); text-decoration: none;
  font-size: .86rem; font-weight: 600; padding: .15rem 0; min-height: 24px;
}
.job-tel:hover { text-decoration: underline; }
.job-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.job-service { font-size: .9rem; font-weight: 600; color: var(--ink-soft); word-break: break-word; }
.job-line {
  display: flex; align-items: flex-start; gap: .35rem;
  font-size: .83rem; color: var(--slate); word-break: break-word;
}
.job-line svg { flex: none; margin-top: .2rem; }
.job-sched { color: var(--brand); font-weight: 600; }
/* Notas resaltadas: caja ámbar tipo nota adhesiva para que no pasen desapercibidas. */
.job-notes {
  background: rgba(226, 178, 60, .13);
  border: 1px solid rgba(226, 178, 60, .30);
  border-left: 3px solid #e2b23c;
  border-radius: 8px;
  padding: .45rem .55rem;
  margin-top: .2rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.job-notes svg { color: #e2b23c; margin-top: .15rem; }
/* Nota "vacía" (placeholder) para igualar la altura de las tarjetas en desktop.
   En móvil no se muestra. */
.job-notes-empty { display: none; background: transparent; border: 1px dashed var(--line); color: var(--slate); font-weight: 500; opacity: .55; }
.job-notes-empty svg { color: var(--slate); }
@media (min-width: 1000px) { .job-notes-empty { display: flex; } }

/* Bloques con etiqueta pequeña arriba (Note / Quote result). */
.job-mini { margin-top: .4rem; }
.job-mini-label { display: block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); margin: 0 0 .18rem .1rem; }
.job-mini .job-notes, .job-mini .job-quote-result { margin-top: 0; }
.job-mini .job-quote-reason { margin-top: .35rem; }
/* Nota vacía (placeholder): oculta en móvil, visible en desktop para igualar alturas. */
.job-note-empty-wrap { display: none; }
@media (min-width: 1000px) { .job-note-empty-wrap { display: block; } }

/* Resultado del quote: como la nota (caja con borde a la izquierda) pero con
   color por estado y más notorio. GO (verde) / Call back (ámbar) / Denied (rojo). */
.job-quote-result { display: flex; align-items: center; gap: .45rem; border-radius: 8px; padding: .5rem .6rem; margin-top: .3rem; font-weight: 800; font-size: .9rem; }
.job-quote-result svg { flex: none; }
.qr-go       { background: #26b061; border: 1px solid #22a259; border-left: 3px solid #178048; color: #fff; }
/* Call back / Denied clicables: la caja es un botón que archiva al tocarlo. */
.job-qr-btn { width: 100%; font-family: inherit; cursor: pointer; text-align: left; }
.job-qr-btn:hover { filter: brightness(1.08); }
.job-qr-arch { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .78; }
.job-qr-arch svg { flex: none; }
.qr-callback { background: rgba(226, 178, 60, .14); border: 1px solid rgba(226, 178, 60, .32); border-left: 3px solid #e2b23c; color: #d99a1a; }
.qr-denied   { background: rgba(239, 68, 68, .14);  border: 1px solid rgba(239, 68, 68, .34); border-left: 3px solid #ef4444; color: #ef4444; }
/* Quote → "Set price": caja azul clicable que abre el recuadro de precio. */
.job-setprice-btn { width: 100%; font-family: inherit; cursor: pointer; text-align: left; }
.qr-dollar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: rgba(90,162,255,.22); font-weight: 900; font-size: .82rem; line-height: 1; }
.job-setprice-btn:hover { filter: brightness(1.08); }
.qr-setprice { background: rgba(90,162,255,.14); border: 1px solid rgba(90,162,255,.34); border-left: 3px solid #5aa2ff; color: #5aa2ff; }
.sp-money { display: flex; align-items: center; gap: .35rem; background: #232a34; border: 1px solid #2a313c; border-radius: 10px; padding: .1rem .8rem; margin: 0 0 1.2rem; }
.sp-money span { color: var(--slate); font-weight: 700; font-size: 1.1rem; }
.sp-money input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); font-family: inherit; font-size: 1.15rem; font-weight: 700; padding: .6rem 0; outline: none; }
/* Pop-up "Complete job": nota opcional + error de precio. */
.cp-note { width: 100%; box-sizing: border-box; min-height: 60px; resize: vertical; padding: .6rem .8rem; margin: 0 0 .3rem; border-radius: 10px; background: #232a34; border: 1px solid #2a313c; color: var(--ink); font-family: inherit; font-size: .95rem; line-height: 1.4; outline: none; }
.cp-note:focus { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(47,209,150,.2); }
.cp-err { min-height: 1em; margin: 0 0 1rem; color: var(--err); font-size: .82rem; font-weight: 600; }
/* Etiqueta doble: la sección arriba y el asignado abajo, ambos a la derecha. */
.jstag { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 100%; }
.jstag-sec, .jstag-who { max-width: 100%; border-radius: 999px; padding: .12rem .55rem; font-size: .7rem; font-weight: 800; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jstag-sec { background: #2c333f; color: #b8c1cd; }
.jstag-blue  { background: #172a44; color: #7db4ff; }
.jstag-amber { background: #3a2e12; color: #f0c96a; }
.jstag-grey  { background: #262d38; color: #8b95a2; }
/* Menú del botón de fecha: el botón queda en medio, una opción arriba y otra abajo. */
.today-slot { position: absolute; left: 0; right: 0; z-index: 60; background: #1a1f27; border: 1px solid #2a313c; border-radius: 10px; padding: 4px; box-shadow: 0 10px 26px -12px rgba(0,0,0,.75); }
.today-slot-up { bottom: calc(100% + 4px); }
.today-slot-down { top: calc(100% + 4px); }
.today-slot[hidden] { display: none; }
.today-item { display: block; width: 100%; text-align: center; border: 0; background: transparent; color: var(--ink); font-family: inherit; font-weight: 700; font-size: .82rem; padding: .55rem .7rem; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.today-item:hover { background: #2c333f; }
/* Dirección clickeable: enlace directo al mapa por defecto del dispositivo
   (Apple Maps en iPhone/Mac, Google Maps en Android). Se ve como una línea. */
.job-addr {
  text-decoration: none; cursor: pointer;
  padding: .1rem 0; width: 100%; color: var(--ok);
  position: relative; z-index: 1;
}
.job-addr .job-addr-txt { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0,0,0,.18); }
.job-addr .job-addr-nav { margin-top: .18rem; opacity: .7; }
.job-addr:hover .job-addr-txt { text-decoration-color: currentColor; }
.job-meta {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--line);
}
.jm { font-size: .78rem; font-weight: 600; color: var(--ink-soft); background: var(--bg); padding: .12rem .5rem; border-radius: 999px; }
/* Fila de acciones de la tarjeta: Assign · Invoice · Share. */
.job-actions-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.job-act {
  flex: 1 1 90px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem .4rem; border: 1px solid var(--line); border-radius: 9px;
  background: #232a34; color: var(--ink-soft);
  font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.job-act svg { flex: none; }
.job-act:hover { border-color: var(--brand); color: var(--ink); }
.job-share2:hover { border-color: #25d366; color: #25d366; }
.job-urgent .jm { background: rgba(255,255,255,.7); }
.jm-money { color: var(--ok); }
.jm.jm-open { background: #fff4d6; color: #9a6700; }
.jm.jm-callback { background: #fff4d6; color: #9a6700; }
.jm.jm-denied { background: #fde2e0; color: #b42318; }
.job-accept-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .2rem; }
.job-accept-row .btn { min-width: 0; width: 100%; }
/* Botón "Mark done": verde, ancho completo, bajo la fila de acciones. Más chico. */
.job-done-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .5rem; padding: .42rem .6rem; min-height: 0; font-size: .82rem; background: #1f8a4c; border: 1px solid #1f8a4c; color: #fff; }
.job-done-btn:hover { background: #1a7a43; border-color: #1a7a43; }
.job-done-btn svg { flex: none; }
/* "Job accepted" (en Archived): verde accepted, devuelve el trabajo a Jobs. */
.job-accept-back { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .5rem; padding: .42rem .6rem; min-height: 0; font-size: .82rem; background: #26b061; border: 1px solid #22a259; color: #fff; }
.job-accept-back:hover { background: #22a259; border-color: #1e9151; }
.job-accept-back svg { flex: none; }
/* Líneas "Assigned to / by" en la tarjeta. */
.job-assigned { color: var(--slate); }
.job-assigned strong { color: var(--ink-soft); font-weight: 700; }
/* Tarjetas de trabajo completas dentro del detalle del trabajador (Pay). */
.pay-detail .job { margin-top: .5rem; cursor: pointer; box-shadow: none; }
.pay-detail .job:hover { border-color: var(--brand); }
.job-decline-why { color: #ff8b80; }
.job-decline-reason { padding-left: 21px; opacity: .9; }
.job-take { margin-top: .7rem; }
/* Botón Share del editor: a la izquierda; Cancel/Save quedan a la derecha. */
.modal-foot .edit-share { margin-right: auto; min-width: 0; }

.tag { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.tag-blue { background: #e8f0fe; color: var(--brand); }
.tag-green { background: var(--ok-bg); color: var(--ok); }
.tag-red { background: var(--err-bg); color: var(--err); }
.tag-amber { background: #fff4d6; color: #9a6700; }
.tag-grey { background: #eceff3; color: var(--slate); }

/* ── Pay (comisiones y liquidaciones) ── */
.pay-balance { text-align: center; padding: 1.4rem 1rem; margin-bottom: 1.2rem; }
.pay-balance-label { font-size: .92rem; color: var(--slate); }
.pay-balance-amt { font-size: 2.1rem; font-weight: 800; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.pay-owe .pay-balance-amt { color: var(--err); }
.pay-owed .pay-balance-amt { color: var(--ok); }
.pay-credit .pay-balance-amt { color: var(--ok); }
.pay-settled .pay-balance-amt { color: var(--slate); }
.pay-stats { display: flex; gap: .7rem; margin-bottom: 1.2rem; }
.pay-stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .85rem .95rem; min-width: 0; }
.pay-stat span { display: block; font-size: .76rem; color: var(--slate); margin-bottom: .15rem; }
.pay-stat strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pay-owe-txt { color: var(--err); }
.pay-owed-txt { color: var(--ok); }
.pay-break { padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .32rem 0; font-size: .9rem; }
/* Worker's cut en amarillo. */
.pay-row-amber, .pay-row-amber strong { color: #e2b23c; }
.pay-row.sub { color: var(--slate); font-size: .82rem; padding: .1rem 0 .5rem .9rem; }
.pay-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-record { margin-top: 1.1rem; margin-bottom: 1.2rem; }
.pay-muted { color: var(--slate); font-size: .8rem; font-weight: 600; }
.pay-role-tag { align-self: flex-start; font-size: .64rem; padding: .12rem .5rem; text-transform: uppercase; letter-spacing: .03em; }
.pay-sec { margin: .9rem 0 .2rem; text-transform: uppercase; letter-spacing: .05em; }
.pay-worker { cursor: pointer; }
.pay-net { font-size: .82rem; font-weight: 800; white-space: nowrap; }
.pay-net.pay-owe { color: var(--err); }
.pay-net.pay-owed { color: var(--ok); }
.pay-net.pay-credit { color: var(--ok); }
.pay-net.pay-settled { color: var(--slate); }
.pay-detail { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.pay-detail .pay-rec-one { margin: .6rem 0; }
.pay-pay-amt { display: inline-flex; align-items: center; gap: .55rem; }
.pay-del {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--err-bg); color: var(--err); cursor: pointer;
  -webkit-appearance: none; appearance: none; flex: none;
}
.pay-del:hover { background: var(--err); color: #fff; }
.jm.pay-pill-pending { background: #fff4d6; color: #9a6700; }
.pay-approve-row { display: flex; gap: .6rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); }
.pay-approve-row .btn { flex: 1; min-height: 40px; padding: .4rem 1rem; }

/* Opciones de dirección al reutilizar un cliente. */
.addr-options { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.addr-options[hidden] { display: none; }
.addr-opt-label { font-size: .8rem; color: var(--slate); }
.addr-opt-chip {
  text-align: left; font-family: inherit; font-size: .88rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .8rem; cursor: pointer;
}
.addr-opt-chip.active { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.addr-opt-add {
  align-self: flex-start; font-family: inherit; font-size: .86rem; font-weight: 600;
  color: var(--ok); background: none; border: 0; cursor: pointer; padding: .3rem 0;
}

/* ── Fotos de trabajos ── */
.photo-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-grid:not(:empty) { margin-bottom: .6rem; }
.photo-grid.uploading::after { content: "Uploading…"; align-self: center; color: var(--slate); font-size: .85rem; }
.photo-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.photo-del {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.photo-del svg { display: block; }
.photo-del:hover { background: rgba(0,0,0,.82); }
/* El botón "Add photos" es un <label for> (abre el selector a la primera, sin
   doble-tap en la PWA). Dentro de .field, la regla .field label le impondría
   display:block/.85rem; lo devolvemos a aspecto de botón con más especificidad.
   El resto lo dan .btn/.btn-block; el icono en verde. */
.field .photo-btn { display: flex; font-size: .96rem; }
.photo-btn svg { color: #12b981; }

/* Visor de foto a pantalla completa (dentro de la app). */
.photo-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .92);
  opacity: 0; transition: opacity .15s ease;
}
.photo-lightbox.show { opacity: 1; }
.photo-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.photo-lightbox-close {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 401;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.photo-lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* Escáner: botones inferiores (linterna + cancelar) en fila. */
.scan-actions { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.scan-torch.on { background: #ffd54a; border-color: #ffd54a; color: #5a4200; }

/* ── Dashboard (KPIs y barras) ───────────────────────────────────────────── */
.card-title {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 1.1rem;
}
/* Cabecera del bloque de día con selector de fecha */
.dash-dayhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: .5rem 0 1rem;
}
.dash-daypick { display: flex; align-items: center; gap: .5rem; }
.day-picker {
  min-height: 40px;
  padding: .4rem .7rem;
  border: 1px solid #ccd3dd;
  border-radius: 9px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  max-width: 100%;              /* nunca más ancho que su contenedor */
  box-sizing: border-box;
}
.day-picker:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,111,235,.16); }
.daybtn {
  min-height: 40px;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--brand);
  font-weight: 600;
  font-size: .88rem;
  font-family: inherit;
  cursor: pointer;
}
.daybtn:hover { background: var(--bg); }
/* Botón "Today's activity / All time" en Pay. */
.pay-today-row { margin: 0 0 .6rem; }
.pay-today-btn { width: 100%; text-align: center; }
.sort-row { position: relative; display: flex; justify-content: flex-end; margin: 0 0 .6rem; }
.sort-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 0; padding: .3rem .6rem; font-size: .78rem; }
/* Menú de filtros de búsqueda (se abre desde el botón Sort/Filter). */
.jf-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: #141a22; border: 1px solid #262d38; border-radius: 12px; padding: 6px; z-index: 30; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.jf-menu[hidden] { display: none; }
.jf-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; text-align: left; background: transparent; border: 0; color: var(--ink); font-family: inherit; font-weight: 600; font-size: .88rem; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; }
.jf-item:hover { background: #1d242e; }
.jf-item.on { color: var(--brand); }
.jf-item span { color: var(--slate); font-weight: 700; font-size: .78rem; }
.jf-item.on span { color: var(--brand); }
.dash-range { flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: .5rem; }
/* Cada fecha lleva su etiqueta encima (From / To) para que se entienda.
   Base fija que puede encoger: así el input acaba antes del guion, sin solaparse. */
.range-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 135px; min-width: 0; }
.range-field .day-picker { width: 100%; min-width: 0; }
.range-lab { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--slate); }
.range-dash { color: var(--slate); align-self: flex-end; padding: 0 .1rem .6rem; flex: none; }
/* En móvil el rango ocupa su propia línea y las fechas se ven completas. */
@media (max-width: 560px) {
  .dash-section-head { flex-wrap: wrap; }
  .dash-section-actions { width: 100%; margin-left: 0; }
  /* Los controles de fecha ocupan la línea completa bajo el título, alineados
     a la izquierda, y pueden envolver para llevar el botón a una línea aparte. */
  .dash-daypick { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; }
  .dash-range { justify-content: flex-start; align-items: flex-end; }

  /* Today: fecha a ancho completo; el botón "Today" abajo, a la izquierda. */
  .dash-daypick > .day-picker { flex: 1 1 100%; order: 0; }
  .dash-daypick > .daybtn { order: 1; flex: 0 0 auto; }

  /* All time: From y To en la MISMA línea (2 columnas). */
  .dash-range .range-field { flex: 1 1 44%; min-width: 0; }
  .dash-range .range-dash { display: none; }   /* sin el guion, se ve más limpio */
  /* En móvil quitamos el estilo NATIVO del input de fecha (que en iOS tiene un
     ancho mínimo raro y esquinas planas). Así se comporta como un input normal:
     respeta el ancho, el borde redondo y no se sale. Al tocarlo igual abre el
     calendario del sistema (sigue siendo type="date"). */
  .day-picker {
    -webkit-appearance: none; appearance: none;
    font-size: .8rem; padding: .5rem .6rem; text-align: left;
  }
  .day-picker::-webkit-date-and-time-value { text-align: left; margin: 0; }

  /* iOS deja el input de fecha vacío en blanco; pintamos el formato dentro. */
  .day-picker.is-empty::before {
    content: attr(data-ph);
    color: var(--slate);
  }
}

/* Secciones del Dashboard: título con barra esmeralda + su bloque. */
.dash-section { margin-bottom: 2rem; }
.dash-section:last-child { margin-bottom: 0; }
.dash-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.dash-section-title {
  display: flex; align-items: center; gap: .5rem;
  margin: 0;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink);
}
.dash-section-title::before {
  content: ""; width: 4px; height: 1.05em; border-radius: 3px;
  background: #12b981; flex: none;
}
.dash-section-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
@media (min-width: 760px) { .kpis-4 { grid-template-columns: repeat(4, 1fr); } }
.kpis-2 { grid-template-columns: repeat(2, 1fr); }
.card.kpi { display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem; margin: 0; }
.kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpis-2 .kpi-value { font-size: 2.1rem; }
.kpi-label { font-size: .78rem; color: var(--slate); font-weight: 600; }
.kpi.blue .kpi-value { color: var(--brand); }
.kpi.red .kpi-value { color: var(--err); }
.kpi.green .kpi-value { color: var(--ok); }

.split { display: grid; gap: 1.2rem; }
@media (min-width: 1100px) { .split { grid-template-columns: 1fr 1fr; } }

/* Las 3 tarjetas de gráficas con la MISMA separación entre todas.
   Money by payment method ocupa toda la fila; service y technician debajo. */
.dash-charts { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.dash-charts .card { margin: 0; }
@media (min-width: 1100px) {
  .dash-charts { grid-template-columns: 1fr 1fr; }
  .dash-charts .chart-wide { grid-column: 1 / -1; }
}

.bar-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; gap: .7rem; align-items: center; margin-bottom: .6rem; }
.bar-label { font-size: .88rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: block; height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: #2f80ed; border-radius: 99px; }  /* barras de conteo: azul */
.bar-money { background: var(--ok); }                                                  /* barras de dinero: verde */
.bar-value { font-size: .88rem; font-weight: 700; text-align: right; white-space: nowrap; }
.bar-value small { color: var(--slate); font-weight: 500; margin-left: .35rem; }
@media (max-width: 560px) {
  .bar-row { grid-template-columns: 1fr auto; gap: .2rem .6rem; margin-bottom: .9rem; }
  .bar-label { grid-column: 1; white-space: normal; }
  .bar-value { grid-column: 2; grid-row: 1; }
  .bar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Tarjeta editable + modal ────────────────────────────────────────────── */
.job { cursor: pointer; transition: box-shadow .15s ease, transform .1s ease; }
.job:hover { box-shadow: var(--shadow); }
.job:active { transform: scale(.998); }
/* El teléfono es un enlace: al tocarlo NO se abre el editor (lo para el JS),
   pero visualmente conviene que se note que es su propia acción. */
.job-tel { position: relative; z-index: 1; }

/* Swipe-to-delete (owner/admin): la tarjeta se desliza y revela "Delete". */
.job-swipe { position: relative; overflow: hidden; border-radius: 10px; }
.job-swipe .job { position: relative; z-index: 1; transition: transform .22s ease; touch-action: pan-y; }
.job-swipe.dragging .job { transition: none; }
/* Los dos botones en un contenedor flex pegado a la derecha, estirados a toda
   la altura de la tarjeta → siempre alineados en la misma línea. */
.job-actions {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  display: flex; align-items: stretch;
}
.job-del, .job-arch {
  width: 90px; border: 0; color: #fff;
  font-family: inherit; font-weight: 700; font-size: .92rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  /* Invisible hasta que se desliza (si no, se transparenta a través de las
     tarjetas completadas, que tienen opacidad). */
  opacity: 0; transition: opacity .12s ease;
}
.job-arch { background: #475569; }
.job-del  { background: #d92d20; }
.job-swipe.dragging .job-del,  .job-swipe.open .job-del,
.job-swipe.dragging .job-arch, .job-swipe.open .job-arch { opacity: 1; }
.job-del:hover  { background: #c0261a; }
.job-arch:hover { background: #3b485a; }
/* Al exponer el delete: el lado derecho del job y el izquierdo del delete se
   vuelven rectos, para que se vean unidos (las esquinas exteriores, redondas). */
.job-swipe.dragging .job,
.job-swipe.open .job { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Popup de confirmación (borrar). */
.confirm-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 32, .5);
}
.confirm-card {
  background: var(--card); width: 100%; max-width: 380px;
  border-radius: 16px; padding: 1.5rem 1.4rem 1.4rem;
  box-shadow: var(--shadow-lg);
}
.confirm-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.confirm-card p { margin: 0 0 1.3rem; color: var(--slate); font-size: .93rem; line-height: 1.5; white-space: pre-line; }
.confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.confirm-actions .btn { min-width: 96px; }

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 32, .5); }
.modal-panel {
  position: relative;
  width: 100%; max-width: 540px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-close {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--slate);
  cursor: pointer;
}
.modal-close:hover { background: var(--bg); color: var(--ink); }
.modal-body { padding: 1.3rem; overflow-y: auto; flex: 1; }
.modal-body fieldset:last-of-type { margin-bottom: .5rem; }
.modal-foot {
  display: flex; gap: .7rem; justify-content: flex-end;
  padding: 1rem 1.3rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  flex: none;
}
.modal-foot .btn { min-width: 96px; }

/* En móvil, el modal ocupa casi toda la pantalla y va pegado abajo. */
@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  /* Tope de altura que deja libre la barra de estado / notch: así el borde
     superior del panel (y su título + X) nunca queda debajo del reloj. */
  .modal-panel {
    max-width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 12px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
    border-radius: 16px 16px 0 0;
  }
}

/* ── Pantalla de "Job saved" ─────────────────────────────────────────────── */
.success-view { padding: 2.5rem 0 3rem; }
.success-view[hidden] { display: none; }

.success-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.4rem 1.6rem 2rem;
  text-align: center;
}

.success-check { color: var(--ok); margin-bottom: 1rem; }
.success-check svg { margin: 0 auto; display: block; }

/* El trazo se dibuja solo. Da la sensación de "hecho" sin necesidad de texto. */
.sc-ring { stroke-dasharray: 145; stroke-dashoffset: 145; animation: sc-draw .45s ease-out forwards; }
.sc-tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sc-draw .3s .35s ease-out forwards; }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }

.success-card h1 { font-size: 1.6rem; margin-bottom: .2rem; }
.success-sub { color: var(--slate); font-size: .96rem; margin-bottom: 1.6rem; }

/* El importe es el protagonista: es el dato por el que existe el registro. */
.success-amount {
  background: var(--ok-bg);
  border: 1px solid #b9e5d1;
  border-radius: var(--radius);
  padding: 1.1rem;
  margin-bottom: 1.4rem;
}
.success-amount span {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ok);
}
.success-amount small {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ok);
  opacity: .8;
}

.success-summary { margin: 0 0 1.6rem; text-align: left; }
.success-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
}
.success-summary > div:last-child { border-bottom: 0; }
/* Sin esto, el display:flex de arriba tapa el [hidden] y las filas vacías
   (vehículo / negocio / fecha) se verían con un "—". */
.success-summary > div[hidden] { display: none; }
.success-summary dt { color: var(--slate); font-size: .86rem; flex: none; }
.success-summary dd {
  margin: 0;
  font-weight: 600;
  font-size: .92rem;
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

.success-actions { display: grid; gap: .6rem; }

footer.foot {
  margin-top: 2.6rem;               /* aire entre el contenido y la línea del footer */
  border-top: 1px solid var(--line);
  padding: 1.6rem 0 2.4rem;
  color: var(--slate);
  font-size: .84rem;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN — "Trade craft" en esmeralda. Pantalla completa (sin caja), contenido
   a la izquierda, separador antes de "Forgot". Solo el gate; resto de la app igual.
   ══════════════════════════════════════════════════════════════════════════ */
.gate {
  background:
    radial-gradient(75% 48% at 50% -6%, rgba(18,185,129,.16), transparent 62%),
    radial-gradient(55% 42% at 14% 14%, rgba(52,230,169,.10), transparent 60%),
    linear-gradient(180deg, #0f1714 0%, #0a0f0c 100%);
}
/* La "tarjeta" deja de ser tarjeta: transparente, sin borde, a la izquierda */
.gate-card {
  max-width: 420px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 2rem 1.9rem;
  text-align: left;
}
.gate-logo {
  margin: 0 0 1.3rem;
  width: 56px; height: 56px; border-radius: 15px;
  background: linear-gradient(160deg, #3ee6a9, #12b981);
  color: #05231a;
  box-shadow: 0 8px 24px -6px rgba(18,185,129,.5);
}
.gate-logo img { width: 36px; height: 36px; display: block; }
.gate-card h1 {
  color: #f0f6f2;
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .15rem;
}
.gate-sub { color: #8ba79b; margin-bottom: 1.6rem; }
.gate-card input {
  min-height: 54px;
  background: #17231d;
  border: 1px solid #2c3b34;
  color: #e9f3ee;
  border-radius: 13px;
  margin-bottom: 1rem;
}
.gate-card input::placeholder { color: #7c948a; }
.gate-card input:focus {
  outline: none; border-color: #12b981;
  box-shadow: 0 0 0 3px rgba(18,185,129,.26);
}
.gate .btn-primary {
  min-height: 54px;
  background: linear-gradient(180deg, #16c98c, #10b47e);
  color: #05231a; font-weight: 700; border-radius: 13px;
  box-shadow: 0 10px 22px -10px rgba(18,185,129,.5);
}
.gate .btn-primary:hover { background: linear-gradient(180deg, #1ad698, #13c085); }
/* Separador de línea completa + "Forgot" centrado debajo */
.gate-forgot {
  display: block; width: 100%;
  margin: 1.5rem 0 0; padding: 1.2rem 0 0;
  border: 0; border-top: 1px solid #26362f;
  background: transparent; text-align: center;
  color: #47e0a6; font-family: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.gate-forgot:hover { text-decoration: underline; }
.gate-err { color: #f0776a; text-align: left; }
.gate-err:empty, .gate-note:empty { display: none; }
.gate-note { color: #8ba79b; text-align: center; }
.gate-note.ok  { color: #47e0a6; }
.gate-note.err { color: #f0776a; }

/* Botón Enter del login a ancho completo, como los inputs */
.gate .btn-primary { width: 100%; box-sizing: border-box; }
/* En desktop, el logo (la llave) centrado */
@media (min-width: 700px) {
  .gate-logo { margin-left: auto; margin-right: auto; }
}

/* ── Menú del candado (logo → dropdown) ──────────────────────────────────── */
.app-bar .wrap { position: relative; }
.logo { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.logo-caret { flex: none; opacity: .7; transition: transform .15s ease; }
.logo[aria-expanded="true"] .logo-caret { transform: rotate(180deg); }

.menu {
  position: absolute; top: calc(100% + 8px); left: 20px; z-index: 80;
  min-width: 196px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.menu[hidden] { display: none; }
.menu a, .menu button {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left;
  padding: .62rem .7rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-family: inherit; font-size: .93rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.menu a svg, .menu button svg { flex: none; color: var(--slate); }
.menu a:hover, .menu button:hover { background: var(--bg); }
.menu a[hidden], .menu button[hidden] { display: none; }
.menu #menu-team svg { color: #12855a; }
.menu #menu-sheet svg { color: #188038; }
.menu #menu-install svg { color: #12855a; }
.menu #menu-notify svg { color: #12855a; }
.menu #menu-password svg { color: #12855a; }
.menu #menu-account svg { color: #12855a; }

/* Toast de avisos (notificaciones, etc.). */
.notify-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  z-index: 400; max-width: 88%;
  background: #0f2a20; color: #eafff6;
  padding: .8rem 1.1rem; border-radius: 12px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.5);
  font-size: .9rem; font-weight: 500; text-align: center;
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.notify-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Modal de cuenta (onboarding de contraseña / cambiar contraseña). z-index por
   debajo del boot-cover (500) para no asomar durante la carga. */
.acct-modal {
  position: fixed; inset: 0; z-index: 490;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 32, .5);
}
.acct-card {
  background: var(--card); width: 100%; max-width: 400px;
  border-radius: 16px; padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: var(--shadow-lg);
}
.acct-card h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.acct-card.acct-center { text-align: center; }
.acct-card p { margin: 0 0 1.2rem; color: var(--slate); font-size: .92rem; line-height: 1.5; }
.acct-field input {
  width: 100%; min-height: 46px; padding: .6rem .8rem;
  border: 1px solid #ccd3dd; border-radius: 10px;
  font-size: 1rem; font-family: inherit; margin-bottom: .6rem;
}
.log-page .acct-field input { background: #eef2f0; border-color: transparent; }
.log-page .acct-field input:focus {
  background: var(--card); border-color: #12b981;
  box-shadow: 0 0 0 3px rgba(18,185,129,.2); outline: none;
}
.acct-err { color: var(--err); font-size: .85rem; margin: .1rem 0 0; }
.acct-err[hidden] { display: none; }
.acct-actions { display: grid; gap: .6rem; margin-top: 1.1rem; }

/* Apartado Account: email + lista de acciones. */
.acct-card.acct-account .acct-email {
  margin: 0 0 1rem; color: var(--ink); font-weight: 600; font-size: .95rem; word-break: break-all;
}
.acct-list { display: grid; gap: .45rem; }
.acct-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; font-family: inherit; font-size: .95rem; font-weight: 600;
  color: var(--ink); background: #eef2f0; border: 0; border-radius: 10px;
  padding: .8rem .9rem; cursor: pointer;
}
.acct-row:hover { background: #e4eae7; }
.acct-row:disabled { opacity: .6; cursor: default; }
.acct-row-val { color: var(--slate); font-weight: 500; font-size: .9rem; flex: none; }
.menu #logout { color: var(--err); }
.menu #logout svg { color: var(--err); }

/* Guía de instalación en iPhone (overlay que sale desde abajo). */
.ios-install {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 23, 32, .5);
}
.ios-install-card {
  background: var(--card); width: 100%; max-width: 480px;
  border-radius: 18px 18px 0 0;
  padding: 1.6rem 1.4rem 2rem;
  box-shadow: var(--shadow-lg);
}
.ios-install-card h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.ios-install-card ol {
  margin: 0 0 1.4rem; padding-left: 1.2rem;
  display: grid; gap: .7rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.5;
}
.ios-install-card .share-ico { vertical-align: -3px; color: #2f80ed; }
.ios-install-card .ios-warn {
  color: #a83a22; background: #fdece8; border-radius: 10px;
  padding: .65rem .8rem; font-size: .9rem; line-height: 1.45; margin: 0 0 1rem;
}
.ios-link { display: flex; gap: .5rem; margin: 0 0 1.1rem; }
.ios-link input {
  flex: 1; min-width: 0; min-height: 42px; padding: .5rem .7rem;
  border: 1px solid #ccd3dd; border-radius: 9px;
  font-size: .85rem; font-family: inherit; background: #f4f6f8; color: var(--ink);
}
.ios-link .btn { flex: none; min-height: 42px; padding: .5rem .9rem; }
@media (min-width: 560px) {
  .ios-install { align-items: center; }
  .ios-install-card { border-radius: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   "LOG A JOB" — estilo "Aireado" (claro): campos rellenos sin borde, tarjetas
   suaves, botón oscuro, acentos esmeralda. Scopeado a .log-page.
   ══════════════════════════════════════════════════════════════════════════ */
body.log-page {
  background: #f6f8f7;
  /* Columna a pantalla completa: el footer queda pegado abajo aunque haya poco
     contenido (antes "subía" cuando había 1 solo trabajo). */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}
body.log-page > main, body.log-page > .success-view { flex: 1 0 auto; }

/* Cover de arranque: mismo fondo que el login (transición sin parpadeo). Se
   quita cuando sabemos el rol; si el worker se redirige, se queda hasta navegar. */
.boot-cover {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #0f1714 0%, #0a0f0c 100%);
}
.boot-cover[hidden] { display: none; }
.boot-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.16); border-top-color: #3ee6a9;
  animation: spin .7s linear infinite;
}
.log-page .card {
  border-color: transparent;
  border-radius: 16px;
  box-shadow: 0 12px 34px -22px rgba(20,26,23,.5);
}
.log-page legend { color: #12855a; border-color: #e7efe9; }

/* Campos: rellenos, sin borde; al enfocar, blanco + anillo esmeralda */
.log-page .field input,
.log-page .field select,
.log-page .field textarea {
  background: #eef2f0; border-color: transparent;
}
.log-page .field input:focus,
.log-page .field select:focus,
.log-page .field textarea:focus {
  background: var(--card); border-color: #12b981;
  box-shadow: 0 0 0 3px rgba(18,185,129,.20);
}
.log-page .field.invalid input,
.log-page .field.invalid select { background: #fdeeee; border-color: var(--err); }

/* Segmented — seleccionado en verde OSCURO, distinto de los botones esmeralda. */
.log-page .seg label { background: #eef2f0; border-color: transparent; }
.log-page .seg input:checked + label { background: #143a2b; border-color: #143a2b; color: #eafff6; }
/* "Emergency" se queda rojo (es su significado). */
.log-page .seg input:checked + label.is-urgent { background: var(--urgent); border-color: var(--urgent); color: #fff; }

/* Botón principal esmeralda (igual que el "Enter" del login); secundario relleno */
.log-page .btn-primary {
  background: linear-gradient(180deg, #16c98c, #10b47e); color: #05231a;
  box-shadow: 0 10px 22px -12px rgba(18,185,129,.5);
}
.log-page .btn-primary:hover { background: linear-gradient(180deg, #1ad698, #13c085); }
.log-page .btn-quiet { background: #eef2f0; border-color: transparent; color: var(--ink); }
.log-page .btn-quiet:hover { background: #e4eae7; }
.log-page .scan-btn svg { color: #12b981; }

/* ── Calendario compacto propio (datepicker.js) ─────────────────────────── */
/* Botón que abre el calendario: se ve como un input más. */
.dtp-trigger {
  width: 100%; display: flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: .6rem .8rem; border-radius: 10px;
  background: #232a34; border: 1px solid transparent; color: var(--ink);
  font-family: inherit; font-size: 1rem; text-align: left; cursor: pointer;
}
.dtp-trigger svg { color: #12b981; flex: none; }
.dtp-trigger:focus-visible { outline: none; border-color: var(--ok, #2fd196); box-shadow: 0 0 0 3px rgba(47,209,150,.25); }
.dtp-ph { color: #8a95a5; }
.field.invalid .dtp-trigger { border-color: #ef5f6b; }

/* Overlay centrado. */
.dtp-back { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(6,12,10,.6); }
.dtp-back[hidden] { display: none; }
.dtp-pop { width: 100%; max-width: 340px; background: #1b212b; border: 1px solid #2b333f; border-radius: 16px; padding: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); color: var(--ink, #e7ecf2); }
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dtp-title { font-weight: 700; font-size: 1rem; }
.dtp-nav { width: 38px; height: 38px; border: 0; border-radius: 9px; background: #2a323d; color: #e7ecf2; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dtp-nav:hover { background: #333c48; }
.dtp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dtp-dow span { text-align: center; font-size: .72rem; font-weight: 700; color: #8a95a5; padding: 4px 0; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp-cell { aspect-ratio: 1 / 1; border: 0; border-radius: 9px; background: transparent; color: #e7ecf2; font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.dtp-cell:hover:not(:disabled) { background: #2a323d; }
.dtp-empty { background: none; cursor: default; }
.dtp-today { box-shadow: inset 0 0 0 1.5px #3a94ff; }
.dtp-sel { background: #12b981 !important; color: #05231a; }
.dtp-past { color: #4a5361; cursor: default; }
.dtp-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.dtp-time label { font-size: .85rem; color: #b8c1cd; font-weight: 600; }
.dtp-time-input { flex: 0 0 auto; min-height: 42px; padding: .4rem .7rem; border-radius: 9px; background: #232a34; border: 1px solid transparent; color: #e7ecf2; font-family: inherit; font-size: 1rem; }
.dtp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.dtp-clear, .dtp-done { min-height: 46px; border: 0; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; }
.dtp-clear { background: #2a323d; color: #e7ecf2; }
.dtp-done { background: linear-gradient(180deg,#16c98c,#10b47e); color: #05231a; }
body.dtp-open { overflow: hidden; }

/* Sugerencias de cliente y dirección — claras y suaves */
.log-page .cust-suggest { background: #eef5f1; border-color: transparent; }
.log-page .cust-row { background: var(--card); border-color: #e3ebe6; }
.log-page .cust-row:hover { border-color: #12b981; }

/* Barra de búsqueda (Jobs) — relleno suave y foco esmeralda, como los campos. */
.log-page .search-bar input { background: #eef2f0; border-color: transparent; }
.log-page .search-bar input:focus {
  background: var(--card); border-color: #12b981;
  box-shadow: 0 0 0 3px rgba(18,185,129,.20);
}
.log-page .search-clear:hover { background: #e4eae7; color: var(--ink); }

/* Lista de personas (Team): hover en esmeralda, no azul. */
.log-page .team-item:hover { border-color: #12b981; }

/* Modal de editar (Jobs) — botón dársena/guardar oscuro, seg esmeralda ya
   heredan de .log-page. Título con acento esmeralda para atarlo al tema. */
.log-page .modal-foot { background: #f6f8f7; border-top-color: #e7efe9; }

/* Dashboard: selector de fecha y botones al tema (relleno + foco esmeralda). */
.log-page .day-picker { background: #eef2f0; border-color: transparent; }
.log-page .day-picker:focus {
  background: var(--card); border-color: #12b981;
  box-shadow: 0 0 0 3px rgba(18,185,129,.20);
}
.log-page .daybtn { background: #eef2f0; border-color: transparent; color: #12855a; }
.log-page .daybtn:hover { background: #e4eae7; }

/* El botón "Enter" del login se queda ESMERALDA, aunque la página sea log-page
   (si no, el .log-page .btn-primary oscuro se lo comería). */
.log-page .gate .btn-primary {
  background: linear-gradient(180deg, #16c98c, #10b47e);
  color: #05231a;
  box-shadow: 0 10px 22px -10px rgba(18,185,129,.5);
}
.log-page .gate .btn-primary:hover { background: linear-gradient(180deg, #1ad698, #13c085); }

/* ══════════════════════════════════════════════════════════════════════════
   TEMA OSCURO — fondo negro. Redefine las variables de color y oscurece los
   rellenos claros del tema .log-page. Se aplica a toda la app (al final = gana).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #eef2f7;
  --ink-soft: #c2cbd6;
  --slate: #8b95a2;
  --line: #2a313c;
  --bg: #12161c;
  --card: #1a1f27;
  --brand: #5aa2ff;
  --brand-dark: #4a90ee;
  --ok: #2fd196;
  --ok-bg: #123024;
  --err: #ff6f62;
  --err-bg: #3a1713;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow: 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.6);
}

body, body.log-page { background: #000; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--slate); opacity: 1; }

/* Rellenos del tema log-page → oscuros. */
.log-page .card { background: var(--card); border-color: #262d38; box-shadow: 0 14px 34px -22px rgba(0,0,0,.8); }
.log-page legend { color: var(--ok); border-color: #262d38; }
.log-page .field input,
.log-page .field select,
.log-page .field textarea,
.log-page .seg label,
.log-page .btn-quiet,
.log-page .search-bar input,
.log-page .day-picker,
.log-page .daybtn { background: #232a34; border-color: transparent; color: var(--ink); }
.log-page .field input:focus,
.log-page .field select:focus,
.log-page .field textarea:focus,
.log-page .search-bar input:focus,
.log-page .day-picker:focus { background: #12161c; border-color: var(--ok); box-shadow: 0 0 0 3px rgba(47,209,150,.25); }
.log-page .btn-quiet:hover,
.log-page .daybtn:hover,
.log-page .search-clear:hover { background: #2c333f; }
.log-page .daybtn { color: var(--ok); }
.log-page .cust-suggest { background: #1a2029; }
.log-page .cust-row { background: #2b333f; border-color: #3a434f; }
.log-page .cust-row:hover { border-color: var(--ok); }
.log-page .cust-info strong { color: var(--ink); }        /* nombre en blanco */
.log-page .cust-use { color: var(--ok); }                  /* "Use" en verde */
.log-page .modal-foot { background: #12161c; border-top-color: #262d38; }
.field.invalid input, .field.invalid select,
.log-page .field.invalid input, .log-page .field.invalid select { background: #2c1512; }

/* Chips/pills claros → oscuros. */
.job-urgent .jm { background: rgba(255,255,255,.12); }
.tag-blue { background: #172a44; color: #7db4ff; }
.tag-amber, .jm.jm-open, .jm.jm-callback, .jm.pay-pill-pending { background: #3a2e12; color: #f0c96a; }
.jm.jm-denied { background: #3a1713; color: #ff8b80; }
.tag-grey { background: #262d38; color: var(--slate); }

/* Pestañas Jobs / Archived / Completed (botones tipo pastilla). */
.jobs-tabs { display: flex; gap: 4px; margin: 0 0 .9rem; background: #1a1f27; border: 1px solid #262d38; border-radius: 10px; padding: 3px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jobs-tabs::-webkit-scrollbar { display: none; }
.jtab { flex: 1 1 auto; border: 0; background: transparent; color: var(--slate); font-family: inherit; font-weight: 700; font-size: .9rem; padding: .45rem 1.05rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.jtab.active { background: #2c333f; color: var(--ink); }
@media (max-width: 560px) {
  .jtab { padding: .45rem .72rem; font-size: .82rem; }
  /* En móvil el cuadro se envuelve: Jobs/Archived/Completed arriba (en tercios) y
     las pestañas dinámicas (Schedule / Quotes) debajo, en el mismo recuadro.
     Con flex-grow, si hay UNA ocupa todo el ancho; si hay DOS, mitad y mitad. */
  .jobs-tabs { flex-wrap: wrap; overflow: visible; }
  .jobs-tabs .jtab { flex: 1 1 28%; }
  .jobs-tabs .jtab-dyn { flex: 1 1 44%; }
}

/* Logo de empresa (Team → Companies): subida + preview de factura. */
.logo-row { display: flex; align-items: center; gap: .8rem; }
.logo-thumb {
  width: 64px; height: 64px; border-radius: 10px; flex: none;
  background: #232a34; border: 1px solid #2a313c; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-thumb span { color: var(--slate); font-size: .68rem; }
.logo-btns { display: flex; flex-direction: column; gap: .4rem; }
.logo-btns .btn { text-align: center; }

.inv-preview { margin: .4rem 0 1.1rem; }
.inv-preview-label { display: block; color: var(--slate); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; }
.inv-preview-head {
  background: #fff; color: #374151; border-radius: 8px; border-left: 4px solid #12b981;
  padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  overflow: hidden;                 /* nada se sale del recuadro */
}
.inv-preview-title { font-size: 1.35rem; font-weight: 400; color: #9ca3af; line-height: 1; flex: none; }
.inv-preview-title span { color: #12b981; font-weight: 700; }
.inv-preview-brand { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; min-width: 0; flex: 1 1 auto; }
/* El logo se ajusta al espacio disponible (no un ancho fijo) → no desborda. */
.inv-preview-brand img { max-width: 100%; max-height: 66px; object-fit: contain; }
.inv-preview-brand strong { color: #12855a; font-size: .9rem; text-align: right; word-break: break-word; }

/* Logo en la vista de la factura. */
.company-logo { max-width: 150px; max-height: 52px; object-fit: contain; display: block; margin-left: auto; margin-bottom: 4px; }

/* Modal de Account → oscuro (rows e inputs tenían fondo claro fijo). */
.acct-row { background: #232a34; color: var(--ink); }
.acct-row:hover { background: #2c333f; }
.acct-field input { border-color: #2a313c; color: var(--ink); }
.log-page .acct-field input { background: #232a34; color: var(--ink); }
.log-page .acct-field input:focus { background: #12161c; }

/* ── Desktop: aprovechar el ancho (móvil no cambia) ───────────────────────── */
@media (min-width: 1000px) {
  /* Contenedor y barra superior: ocupan la mayoría del ancho. */
  .wrap { max-width: min(1560px, 94vw); }

  /* Listas de trabajos y pagos: tantas columnas como quepan (campos igual, no más
     grandes). En pantallas anchas salen 3, 4 o más tarjetas por fila. */
  .jobs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .8rem;
    align-items: start;
  }
  .jobs-group { grid-column: 1 / -1; }

  /* Pay: "Today's activity" a la derecha de la búsqueda, mismo ancho y alto.
     El calendario queda debajo, sin cambios. */
  .pay-searchrow { display: flex; align-items: stretch; gap: 1rem; margin: 0 0 1.2rem; }
  .pay-searchrow #person-search-bar { flex: 1 1 0; max-width: none; margin: 0; }
  .pay-searchrow .pay-today-row { flex: 1 1 0; margin: 0; }
  .pay-searchrow .pay-today-btn { height: 100%; display: flex; align-items: center; justify-content: center; }

  /* Pay: al abrir una persona en desktop, su tarjeta ocupa toda la fila y los
     trabajos internos se muestran en grid como en Jobs (cubriendo la pantalla).
     El resumen (totales, botón y pagos) se mantiene en columna estrecha. */
  .pay-worker.is-open { grid-column: 1 / -1; }
  .pay-worker.is-open .pay-break,
  .pay-worker.is-open .pay-rec-one,
  .pay-worker.is-open .pay-detail > .pay-row { max-width: 560px; }
  .pay-detail-jobs { grid-column: 1 / -1; }

  /* Jobs: 2 columnas — izquierda tabs + búsqueda; derecha Today's activity +
     calendario (From/To). Sort queda arriba a la derecha. */
  .jobs-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: stretch; margin: 0 0 1.4rem; }
  .jc-left, .jc-right { min-width: 0; display: flex; flex-direction: column; }
  .jobs-controls .jobs-tabs,
  .jobs-controls .pay-today-row { max-width: none; margin: 0 0 .85rem; }
  .jobs-controls .date-filter { max-width: none; margin: 0; }
  /* Search pegado al fondo de su columna → su base coincide con el calendario. */
  .jobs-controls .search-bar { max-width: none; margin: auto 0 0; }
  /* Las 3 pestañas en tercios exactos; el bloque total = ancho de Search. */
  .jobs-controls .jtab { flex: 1 1 0; }

  /* ── Formulario "Log a job": 2 columnas explícitas. Izquierda: cliente + el
     trabajo hasta la dirección. Derecha: desde Job type + precio. ── */
  #form-view > .page-head,
  #form-view > .card { max-width: 1160px; margin: 0 auto; }
  .form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.2rem; align-items: start; }
  #job-form fieldset { margin: 0 0 1.4rem; }
  /* El vehículo, dentro de su bloque, en 2 columnas. OJO: solo cuando NO está
     oculto (:not([hidden])), si no el grid pisaría el hidden y saldría siempre. */
  #vehicle-fields:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  #vehicle-fields > .field { grid-column: auto; }
  #vehicle-fields > .field.col-full { grid-column: 1 / -1; }
}