/* route-extras.css
 * Minimal responsive overlay for the static route HTMLs.
 * The prototype's runtime CSS uses an explicit `.web` class for
 * desktop overrides. The route HTMLs use `.flapp.web` by default
 * and we collapse it back to mobile at ≤720px so a single file
 * serves both viewport states.
 */
@media (max-width:720px){
  .flapp .web .shell{ max-width:none; margin:0; padding:22px 20px 28px; }
  .flapp .web .h1{ font-size:24px; line-height:1.15; margin-bottom:8px; }
  .flapp .web .lede{ font-size:14.5px; max-width:none; }
  .flapp .web .sub-head h2{ font-size:20px; }
  .flapp .web .actions{ flex-direction:column; gap:10px; }
  .flapp .web .btn{ width:100%; min-width:0; }
  .flapp .web .footer{ display:none; }
  /* v1.2: keep .login visible on mobile for the public-state header.
     Only hide non-active, non-login links (e.g. the "Cómo funciona" text link). */
  .flapp .web .nav a:not(.active):not(.login){ display:none; }
}

/* coordinacion screens (new in v1.0 parity package) */
.flapp .coord{display:grid;gap:14px}
.flapp .coord .status-row{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:var(--mist-teal);
  border:1px solid #B8DCD4;border-radius:var(--r-md);
}
.flapp .coord .status-row .dot{width:10px;height:10px;border-radius:50%;background:var(--anchor-teal);flex-shrink:0}
.flapp .coord .status-row b{font-family:'Plus Jakarta Sans';font-weight:700;color:var(--teal-ink);font-size:14px}
.flapp .coord .status-row span{color:var(--teal-ink);font-size:13px}

.flapp .coord-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.flapp .coord-card h4{font-family:'Plus Jakarta Sans';font-size:14px;font-weight:700;margin:0 0 10px;color:var(--ink)}
.flapp .coord-card .who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.flapp .coord-card .who .av{width:40px;height:40px;border-radius:50%;background:var(--mist-teal);color:var(--teal-ink);display:grid;place-items:center;font-family:'Plus Jakarta Sans';font-weight:700}
.flapp .coord-card .who .name{font-family:'Plus Jakarta Sans';font-weight:600;font-size:14.5px;color:var(--ink);margin:0}
.flapp .coord-card .who .meta{font-size:12px;color:var(--ink-muted);margin:0}
.flapp .coord-card .row{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:13px;margin-top:8px}
.flapp .coord-card .row .k{color:var(--ink-muted);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding-top:1px}
.flapp .coord-card .row .v{color:var(--ink-soft)}
.flapp .coord-card .row .v b{color:var(--ink);font-weight:600}

.flapp .timeline{position:relative;padding-left:22px;margin:6px 0 4px}
.flapp .timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.flapp .timeline .tl{position:relative;padding:6px 0 14px}
.flapp .timeline .tl::before{content:"";position:absolute;left:-19px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.flapp .timeline .tl.done::before{background:var(--anchor-teal);border-color:var(--anchor-teal)}
.flapp .timeline .tl.now::before{background:var(--surface);border-color:var(--anchor-teal);box-shadow:0 0 0 3px var(--mist-teal)}
.flapp .timeline .tl h5{font-family:'Plus Jakarta Sans';font-size:13.5px;font-weight:600;margin:0 0 2px;color:var(--ink)}
.flapp .timeline .tl p{font-size:12.5px;color:var(--ink-muted);margin:0}
.flapp .timeline .tl.now h5{color:var(--teal-ink)}

.flapp .msg-stream{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.flapp .msg-stream h4{font-family:'Plus Jakarta Sans';font-size:14px;font-weight:700;margin:0 0 12px}
.flapp .msg{display:grid;grid-template-columns:32px 1fr;gap:10px;margin-bottom:12px}
.flapp .msg:last-child{margin-bottom:0}
.flapp .msg .av{width:32px;height:32px;border-radius:50%;background:var(--mist-teal);color:var(--teal-ink);display:grid;place-items:center;font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px}
.flapp .msg.self .av{background:var(--sand);color:var(--ink-soft)}
.flapp .msg .bub{background:var(--sand);border-radius:10px;padding:8px 12px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.flapp .msg.self .bub{background:var(--mist-teal);color:var(--teal-ink)}
.flapp .msg .when{font-size:11px;color:var(--ink-muted);margin-top:3px}
.flapp .msg-input{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}
.flapp .msg-input input{min-height:40px;padding:10px 12px;font-family:inherit;font-size:14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md)}
.flapp .msg-input button{min-height:40px;padding:0 16px;background:var(--anchor-teal);color:#fff;border:0;border-radius:var(--r-md);font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer}