:root{
      /* UNIFORME: preto/cinza/branco */
      --bg:#f2f2f2;
      --card:rgba(255,255,255,0.94);
      --stroke:rgba(0,0,0,0.08);
      --text:#141414;
      --muted:rgba(0,0,0,0.55);
      --shadow:0 18px 45px rgba(0,0,0,0.14);

      --r-xl:34px;
      --r-lg:26px;
      --r-md:18px;
      --r-sm:12px;

      --black:#111111;
      --dark:#242424;
      --mid:#e9e9e9;
      --white:#ffffff;

      --tap:52px;

      --safeTop: env(safe-area-inset-top);
      --safeBottom: env(safe-area-inset-bottom);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 30% -10%, rgba(0,0,0,0.10), transparent 60%),
        radial-gradient(900px 700px at 120% 20%, rgba(0,0,0,0.08), transparent 60%),
        var(--bg);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      overscroll-behavior-y:none;
      touch-action:manipulation;
    }

    .app{ max-width:420px; margin:18px auto 28px; padding:0 14px; }
    .shell{
      border-radius:var(--r-xl);
      background:rgba(255,255,255,0.55);
      border:1px solid rgba(0,0,0,0.06);
      box-shadow:var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(10px);
      /* hide driver dashboard by default – will be toggled via JS */
      display:none;
    }

    /* Login screen styles */
    .login-screen{
      max-width:420px;
      margin:40px auto;
      padding:20px;
      background:var(--card);
      border:1px solid var(--stroke);
      border-radius:var(--r-lg);
      box-shadow:var(--shadow);
      display:none;
    }
    .login-screen .logo-container{
      text-align:center;
      margin-bottom:20px;
    }
    .login-screen .logo-container img{
      width:80px;
      height:auto;
    }
    .login-screen form{
      display:grid;
      gap:12px;
    }
    .login-screen input{
      padding:12px;
      border-radius:12px;
      border:1px solid var(--stroke);
      font-size:16px;
    }
    .login-screen button{
      height:var(--tap);
      border-radius:18px;
      border:0;
      background:#111;
      color:#fff;
      font-weight:900;
      cursor:pointer;
    }

    /* Admin dashboard styles */
    .admin-dashboard{
      max-width:420px;
      margin:20px auto;
      padding:0 14px;
      display:none;
    }
    .admin-dashboard h2{
      margin-top:0;
    }
    .admin-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:14px;
    }
    .admin-header button{
      height:var(--tap);
      border-radius:18px;
      border:1px solid var(--stroke);
      background:#fff;
      color:#111;
      font-weight:700;
      padding:0 12px;
      cursor:pointer;
    }
    .admin-section{
      background:var(--card);
      border:1px solid var(--stroke);
      border-radius:var(--r-lg);
      padding:16px;
      margin-bottom:14px;
    }
    .admin-section h3{
      margin-top:0;
    }
    .admin-section form{
      display:grid;
      gap:10px;
      margin-bottom:12px;
    }
    .admin-section input{
      padding:10px;
      border:1px solid var(--stroke);
      border-radius:12px;
      font-size:14px;
    }
    .admin-section select{
      padding:10px;
      border:1px solid var(--stroke);
      border-radius:12px;
      font-size:14px;
      background:#fff;
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
    }
    .admin-section button{
      height:var(--tap);
      border-radius:18px;
      border:0;
      background:#111;
      color:#fff;
      font-weight:900;
      cursor:pointer;
    }

    /* HEADER */
    .header{
      background:linear-gradient(180deg, #0b0b0b, #262626);
      padding:calc(14px + var(--safeTop)) 16px 14px;
      color:#fff;
    }
    .header-grid{
      display:grid;
      grid-template-columns:44px 1fr auto;
      gap:10px;
      align-items:center;
      min-height:56px;
    }

    .logo{
      width:44px;height:44px;border-radius:12px;
      overflow:hidden;
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.14);
      display:grid;place-items:center;
    }

    /* Logo SVG inline -> nunca falha */
    .et-pin{
      width:30px;
      height:30px;
      display:block;
    }

    .title{ line-height:1.05; min-width:0; }
    .title .h1{
      font-weight:900;
      font-size:16px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .title .h2{
      margin-top:6px;
      font-size:12px;
      opacity:.72;
      letter-spacing:2px;
      text-transform:uppercase;
    }

    .actions{ display:inline-flex; gap:8px; align-items:center; }
    .lang{
      display:inline-flex; gap:8px;
      padding:6px;
      border-radius:14px;
      background:rgba(255,255,255,0.10);
      border:1px solid rgba(255,255,255,0.12);
    }
    .lang button{
      height:28px; min-width:34px; padding:0 10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.18);
      background:rgba(0,0,0,0.22);
      color:#fff;
      font-weight:900;
      font-size:12px;
      cursor:pointer;
    }
    .lang button.active{
      background:rgba(255,255,255,0.92);
      color:#111;
      border-color:transparent;
    }

    .icon-btn{
      width:36px;height:36px;border-radius:12px;
      border:1px solid rgba(255,255,255,0.16);
      background:rgba(0,0,0,0.22);
      display:grid;place-items:center;
      cursor:pointer;
      padding:0;
    }
    .icon-btn svg{ width:18px;height:18px; fill:none; stroke:#fff; stroke-width:2; }

    .content{ padding:16px; }

    .card{
      background:var(--card);
      border:1px solid var(--stroke);
      border-radius:var(--r-lg);
      padding:16px;
      margin:12px 0;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
    }
    .card h3{ margin:0 0 10px; font-size:16px; letter-spacing:0.2px; }

    .meta{ display:grid; gap:6px; color:var(--muted); font-size:14px; }

    .row{ display:flex; gap:12px; align-items:center; }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--stroke);
      background:rgba(255,255,255,0.60);
    }

    .badge{
      width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;
      font-weight:900;color:#fff; flex:0 0 auto;
      background:#1b1b1b;
    }
    .badge.b{ background:#2b2b2b; }

    .place{ min-width:0; flex:1; }
    .place .label{ font-weight:900; color:#222; font-size:14px; }
    .place .value{
      margin-top:4px;
      color:var(--muted);
      font-size:14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .nav-btn{
      width:40px;height:40px;border-radius:14px;
      border:1px solid rgba(0,0,0,0.10);
      background:rgba(255,255,255,0.90);
      cursor:pointer;
      display:grid;place-items:center;
      flex:0 0 auto;
    }
    .nav-btn svg{ width:18px;height:18px; stroke:#111; stroke-width:2; fill:none; }

    .btn-row{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:12px;
      margin-top:14px;
    }
    .btn-row.two{ grid-template-columns:1fr 1fr; margin-top:12px; }

    button.action{
      height:var(--tap);
      border-radius:18px;
      border:0;
      font-weight:900;
      letter-spacing:0.4px;
      cursor:pointer;
      box-shadow:0 10px 22px rgba(0,0,0,0.10);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      user-select:none;
    }
    .action.start{ background:#151515; color:#fff; }
    .action.arrive{ background:#d9d9d9; color:#111; }
    .action.finish{ background:#111; color:#fff; }
    .action.pob{ background:#f0f0f0; color:#111; box-shadow:none; border:1px solid rgba(0,0,0,0.10); }
    .action.noshow{ background:#2a2a2a; color:#fff; }

    /* Decline button styling matches previous no-show style */
    .action.decline{ background:#2a2a2a; color:#fff; }

    /* Dedicated no-show button class to avoid interfering with decline */
    .action.noshow-btn{ background:#2a2a2a; color:#fff; }

    .action svg{ width:18px;height:18px; fill:none; stroke:currentColor; stroke-width:2; }

    .footer{
      padding:10px 16px calc(18px + var(--safeBottom));
      display:flex;
      justify-content:center;
    }
    .logoff{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:18px;
      border:1px solid rgba(0,0,0,0.10);
      background:rgba(255,255,255,0.70);
      color:rgba(0,0,0,0.55);
      cursor:pointer;
    }
    .logoff svg{ width:16px;height:16px; fill:none; stroke:rgba(0,0,0,0.55); stroke-width:2; }

    /* Bottom Sheet (Waze/Google/Cancelar) */
    .sheet-backdrop{
      position:fixed; inset:0;
      background:rgba(0,0,0,0.45);
      display:none;
      align-items:flex-end;
      justify-content:center;
      padding:16px;
      z-index:9999;
    }
    .sheet-backdrop.open{ display:flex; }
    .sheet{
      width:100%; max-width:420px;
      border-radius:22px;
      background:rgba(255,255,255,0.98);
      border:1px solid rgba(0,0,0,0.10);
      box-shadow:0 18px 50px rgba(0,0,0,0.25);
      overflow:hidden;
    }
    .sheet .sheet-head{
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid rgba(0,0,0,0.08);
      font-weight:900;
    }
    .sheet .sheet-body{
      padding:12px 16px 16px;
      display:grid;
      gap:10px;
    }
    .sheet .choice{
      height:52px;
      border-radius:18px;
      border:1px solid rgba(0,0,0,0.10);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      font-weight:900;
      cursor:pointer;
    }
    .sheet .choice small{ font-weight:700; color:rgba(0,0,0,0.55); }
    .sheet .choice.cancel{ background:#f4f4f4; }

    /* Extras modal (antes de FINISH / NO SHOW) */
    .modal-backdrop{
      position:fixed; inset:0;
      background:rgba(0,0,0,0.45);
      display:none;
      align-items:center;
      justify-content:center;
      padding:16px;
      z-index:10001;
    }
    .modal-backdrop.open{ display:flex; }
    .modal{
      width:100%; max-width:420px;
      border-radius:22px;
      background:rgba(255,255,255,0.98);
      border:1px solid rgba(0,0,0,0.10);
      box-shadow:0 18px 50px rgba(0,0,0,0.25);
      overflow:hidden;
    }
    .modal .head{
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid rgba(0,0,0,0.08);
      font-weight:900;
    }
    .modal .body{
      padding:12px 16px 16px;
      display:grid;
      gap:10px;
    }
    textarea{
      width:100%;
      min-height:90px;
      resize:vertical;
      border-radius:16px;
      border:1px solid rgba(0,0,0,0.12);
      padding:12px 12px;
      font:inherit;
      outline:none;
      background:#fff;
    }
    .modal .btns{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .btn{
      height:48px;
      border-radius:16px;
      border:1px solid rgba(0,0,0,0.12);
      background:#fff;
      font-weight:900;
      cursor:pointer;
    }
    .btn.primary{
      background:#111;
      color:#fff;
      border-color:transparent;
    }

    .toast{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      bottom:calc(20px + var(--safeBottom));
      background:rgba(20,20,20,0.95);
      color:#fff;
      padding:10px 14px;
      border-radius:14px;
      font-weight:700;
      font-size:13px;
      display:none;
      z-index:10002;
      max-width:min(420px, calc(100% - 28px));
      text-align:center;
    }
    .toast.show{ display:block; }

    /* debug block escondido por default */
    .debug{ display:none; }
    .debug.show{ display:block; }

    /* Override logo: hide old pin and show real logo */
    .logo .et-pin{ display:none; }
    .logo img.real-logo{
      width:30px;
      height:30px;
      display:block;
    }

    @media (max-width:360px){
      .btn-row{ grid-template-columns:1fr; }
      .btn-row.two{ grid-template-columns:1fr; }
      .actions{ gap:6px; }
      .lang{ gap:6px; }
    }