/* The desktop shell: what a client user and management see, and the shell the
   login screen inherits rather than becoming a third one (#25, #30).

   Everything here is local to this shell on purpose — the ground, the greys,
   the elevation, every size. What must agree with the phone and with paper is
   consumed from tokens.css above it, and is never written again here. */

:root {
  --ink2: #3d4855; --dim: #78828f;
  --line: #e4e7ec; --bg: #f6f7f9; --card: #fff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .03);

  /* Consumed at the base strength of each hue: this screen is read indoors. */
  --ink: var(--serv-ink);
  --accent: var(--serv-select); --accent-bg: var(--serv-select-tint);
  --brand: var(--fjf-teal-ink);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 14px/1.5 var(--fjf-font); -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 21px; }
a { color: var(--serv-link); }

.top { height: 54px; background: var(--card); border-bottom: 1px solid var(--line);
       display: flex; align-items: center; gap: 20px; padding: 0 20px; }
.brand { font-size: 17px; font-weight: 750; letter-spacing: -.03em; color: var(--brand); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.top .who { font-size: 13px; color: var(--ink2); }

.pane { padding: 28px 28px 60px; max-width: 940px; }
.pane.narrow { max-width: 420px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
        box-shadow: var(--shadow); padding: 22px 24px 24px; }
.card h1 { margin-bottom: 18px; }
.muted { color: var(--dim); }

/* What a screen answers a refusal with — a wrong password, one too short. It
   is not a severity: nothing is wrong with a machine. */
.notice { background: var(--serv-high-tint); color: var(--serv-high); border-radius: 8px;
          padding: 10px 13px; margin: 0 0 16px; font-weight: 600; }

label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--ink2); }
input, select { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px;
        padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
        background: var(--card); color: var(--ink); outline: none; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

button { font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
         border: 1px solid var(--accent); border-radius: 8px; padding: 9px 16px;
         background: var(--accent); color: var(--card); }
button.quiet { background: var(--card); border-color: var(--line); color: var(--ink2); }

/* Administración's lists (#25): a table inside a card, ruled and not striped,
   because the rows are read across rather than counted. */
.lead { margin: 26px 0 10px; font-size: 12px; font-weight: 650; color: var(--dim);
        text-transform: uppercase; letter-spacing: .07em; }
.card.listing { padding: 0; overflow: hidden; }
.card.form { max-width: 420px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 650; color: var(--dim); }
th, td { padding: 11px 16px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }

/* The one thing on the screen that is read out loud. Nothing is wrong, so it
   wears the shell's own selection wash rather than a severity (#30). */
.minted { background: var(--accent-bg); color: var(--brand); border-radius: 8px;
          padding: 10px 13px; margin: 0 0 12px; font-weight: 600; }
.minted code { font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .06em; }

/* What a row lets management do to one account, at the end of the row it
   belongs to rather than behind a screen of its own. */
td.actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ==========================================================================
   The client's one screen, and the one here that replaces the body (#25, #55). */

.top .whose { font-style: normal; font-size: 13px; font-weight: 450; color: var(--dim);
              margin-left: 9px; padding-left: 11px; border-left: 1px solid var(--line); }
.top .right a { font-size: 13px; text-decoration: none; }
/* Management's way out of the client it is reading and into another, beside
   the razón social it is leaving: a client user never sees it (#56). */
.top .pick { margin-left: 9px; font-size: 12px; text-decoration: none; }

.split { display: flex; height: calc(100vh - 54px); }
.list { width: 296px; flex: none; background: var(--card);
        border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.list .count { padding: 12px 14px 8px; font-size: 11px; font-weight: 700;
               letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.list .scroll { flex: 1; overflow-y: auto; }
/* The row is the whole target, and the selected one is marked on its edge
   rather than by a colour the eye has to compare against its neighbours. */
.li { display: block; padding: 11px 14px 12px; border-bottom: 1px solid var(--line);
      border-left: 3px solid transparent; color: inherit; text-decoration: none; }
/* What says a row is a target before it is clicked: the picker has no marked
   row of its own to say it, and one rule serves both lists. */
.li:not(.on):hover { background: var(--bg); }
.li.on { background: var(--accent-bg); border-left-color: var(--accent); }
.li .name { display: flex; align-items: baseline; gap: 7px; }
.li .name b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.li .name span { color: var(--dim); font-size: 13px; }
/* The same row inside a card rather than a column: the card's own edge is the
   last rule, so the last row does not draw a second one under it. */
.card.listing .li:last-child { border-bottom: none; }
/* A row with nothing to ask for leaves this empty, and an empty flex box
   takes no room: the healthy row says nothing at all (#36). */
.li .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.li .tags:not(:empty) { margin-top: 7px; }

.detail { flex: 1; min-width: 0; overflow-y: auto; }
.dhead { position: sticky; top: 0; z-index: 10; padding: 20px 28px 0;
         background: var(--card); border-bottom: 1px solid var(--line); }
.dhead h1 span { color: var(--dim); font-weight: 450; }
.dhead .meta { margin-top: 3px; font-size: 13px; color: var(--dim); }
.dhead .meta i { font-style: normal; color: var(--line); }
/* A tab is a place and not a step, so it is underlined where it is rather
   than numbered in an order (#25). */
.tabs { display: flex; gap: 22px; margin-top: 16px; }
.tabs a { padding-bottom: 11px; margin-bottom: -1px; font-size: 13.5px; font-weight: 550;
          color: var(--dim); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); font-weight: 650; border-bottom-color: var(--accent); }

.sec { margin: 26px 0 9px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
       text-transform: uppercase; color: var(--dim); }
.sec:first-child { margin-top: 0; }
.tiny { margin: 10px 2px; font-size: 12.5px; color: var(--dim); }
.empty { padding: 26px 16px; text-align: center; font-size: 13.5px; color: var(--dim); }

/* What is said about a state, filled and never outlined — the phone's rule
   read indoors, at the base strength of each hue (#30, #36). */
.chip { display: inline-flex; align-items: center; padding: 2.5px 8px; border-radius: 6px;
        font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.chip.due, .chip.high { background: var(--serv-high-tint); color: var(--serv-high); }
.chip.soon, .chip.medium { background: var(--serv-medium-tint); color: var(--serv-medium); }
.chip.no-record, .chip.low { background: var(--bg); color: var(--serv-ok); }
.chip.live, .chip.tier { background: var(--accent-bg); color: var(--brand); }

/* Presence, on the screen the client reads a machine's state off: FJF is on
   the unit, and what was done is published at the close (#7, #34). */
.banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
          padding: 11px 14px; border-radius: 10px; background: var(--accent-bg); }
.banner .t { font-weight: 600; color: var(--brand); font-size: 13.5px; }
.banner .tiny { margin: 0 0 0 auto; }

/* The whole maintenance answer at a glance: one card per tier, the state in
   the figure and never only in a colour. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tier { padding: 13px 15px; border: 1px solid var(--line); border-top: 3px solid var(--line);
        border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
.tier.due { border-top-color: var(--serv-high); }
.tier.soon { border-top-color: var(--serv-medium); }
.tier .n { font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
           text-transform: uppercase; color: var(--dim); }
.tier .v { margin: 5px 0 2px; font-size: 17px; font-weight: 650; letter-spacing: -.02em;
           color: var(--serv-ok); }
.tier.due .v { color: var(--serv-high); }
.tier.soon .v { color: var(--serv-medium); }
.tier .s { font-size: 12.5px; color: var(--dim); }

/* One finding per row, its severity said in the chip that opens it. */
.rows > div { display: flex; align-items: flex-start; gap: 11px;
              padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rows > div:last-child { border-bottom: none; }
.rows .body { flex: 1; min-width: 0; }
.rows .body .t { font-size: 13.8px; }
.rows .body .s { margin-top: 2px; font-size: 12.5px; color: var(--dim); }

/* The ficha, read down rather than across: one fact per row, the asset's
   answer on the right. */
.dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.dl dt { padding: 11px 16px; font-size: 13px; color: var(--dim);
         border-bottom: 1px solid var(--line); }
.dl dd { padding: 11px 16px; margin: 0; font-weight: 550; text-align: right;
         border-bottom: 1px solid var(--line); }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: none; }

td.date { white-space: nowrap; color: var(--ink2); font-variant-numeric: tabular-nums; }
td .s { font-size: 12.5px; color: var(--dim); }
td .chip + .chip { margin-left: 4px; }

/* Documentos: the pair under the job that produced them, the job being the
   grouping and never the destination (#25). */
.card.job { margin-bottom: 12px; }
.jobhead { padding: 10px 16px; font-size: 12.5px; color: var(--dim);
           background: var(--bg); border-bottom: 1px solid var(--line); }
.jobhead b { color: var(--ink); font-variant-numeric: tabular-nums; }
.docrow { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
          border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.docrow:last-child { border-bottom: none; }
.docrow:hover { background: var(--bg); }
.docrow .ic { flex: none; width: 30px; height: 36px; display: grid; place-items: center;
              border: 1px solid var(--line); border-radius: 4px; background: var(--card);
              font-size: 9px; font-weight: 800; color: var(--dim); }
.docrow .body { flex: 1; min-width: 0; }
.docrow .body .t { display: block; font-size: 13.8px; font-weight: 600; }
.docrow .body .s { display: block; margin-top: 1px; font-size: 12.5px; color: var(--dim); }

/* The evidence at the size the page could not print it, and named, or a strip
   of pictures under two document rows reads as an orphan (ADR-0005, #31). */
.jobhead.shots-of { border-top: 1px solid var(--line); border-bottom: none; }
.shots { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 14px; }
.shot { height: 84px; width: auto; border-radius: 6px; border: 1px solid var(--line);
        display: block; }

/* ==========================================================================
   The same shell on a phone, where nothing may scroll sideways (#72). */

/* A client opens a link on one, and an operator meets login and the refusals
   on his; below the width two columns need, the fleet is a list above them. */
@media (max-width: 720px) {
  .top { height: auto; flex-wrap: wrap; gap: 8px 14px; padding: 9px 14px; }
  /* The address is who is signed in, which is not what a phone has room to
     say beside the two things the header is reached for. */
  .top .who { display: none; }
  .top .whose { margin-left: 0; padding-left: 0; border-left: none; }

  .split { display: block; height: auto; }
  .list { width: auto; border-right: none; border-bottom: 1px solid var(--line); }
  /* Enough rows to pick from and never the whole fleet: the asset the screen
     is about starts on the screen rather than under it. */
  .list .scroll { max-height: 45vh; }
  .detail { overflow-y: visible; }
  .dhead { position: static; padding: 16px 16px 0; }
  .tabs { gap: 16px; overflow-x: auto; }

  .pane { padding: 18px 16px 40px; }
  .tiers { grid-template-columns: 1fr; }
  /* Administración's rows are read across, and a phone gives them nowhere to
     go: the table scrolls inside its card rather than the page under it. */
  .card.listing { overflow-x: auto; }
}