/* CVPP Field Ops — public.css — v3.6
   Mismo estilo sobrio de la app para las páginas que ven clientes y empleados
   (onboarding, citas, firma de estimados, portal de empleados).
   Claro u oscuro según el teléfono. Se carga después del estilo propio de cada página. */
:root {
  color-scheme: light;
  --p-bg: #f6f6f4; --p-surface: #ffffff; --p-surface2: #f0efeb; --p-line: #e2e0da; --p-line2: #cfccc4;
  --p-fg: #1f2328; --p-fg2: #424a53; --p-fg3: #6e7781;
  --p-brand: #e8930c; --p-brand-fg: #9a5b00; --p-ink: #1f2328; --p-on-ink: #ffffff;
  --p-ok: #1a7f37; --p-bad: #cf222e;
  --p-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --p-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* portal de empleados (usa sus propias variables) */
  --bg: var(--p-bg); --s1: var(--p-surface); --s2: var(--p-surface2); --s3: var(--p-line);
  --acc: var(--p-brand-fg); --grn: var(--p-ok); --red: var(--p-bad); --amber: var(--p-brand-fg);
  --txt: var(--p-fg); --txt2: var(--p-fg2); --txt3: var(--p-fg3);
  --fn: var(--p-font); --mo: var(--p-mono); --r: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --p-bg: #161719; --p-surface: #1e1f22; --p-surface2: #26272b; --p-line: #2c2e32; --p-line2: #3b3e43;
    --p-fg: #e6e7e9; --p-fg2: #b9bdc4; --p-fg3: #8e939b;
    --p-brand-fg: #f0b04f; --p-ink: #e6e7e9; --p-on-ink: #161719;
    --p-ok: #4cc38a; --p-bad: #ff7b72;
  }
}

body { background: var(--p-bg) !important; color: var(--p-fg) !important; font-family: var(--p-font) !important; }

/* Marca: un solo color, cuadro naranja con la "F" */
.logo-icon, .login-icon, .licon { background: var(--p-brand) !important; color: #fff !important; border-radius: 9px !important; box-shadow: none !important; }
.logo-name, .login-brand { color: var(--p-fg) !important; letter-spacing: -.01em !important; }
.logo-name span, .login-brand span { color: inherit !important; }
.logo-sub, .login-sub, .sub, .login-desc { color: var(--p-fg3) !important; }

/* Tarjetas */
.card, .stub-card, .portal-section, .status-band, .loc-badge, .upload-box, .detail {
  background: var(--p-surface) !important; border: 1px solid var(--p-line) !important; box-shadow: none !important;
}
.card { border-radius: 12px !important; }
.card-title, .section-hdr h3 { color: var(--p-fg) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; font-weight: 600 !important; }
h1, h2, h3, .login-title { color: var(--p-fg) !important; letter-spacing: -.01em !important; }

/* Etiquetas en minúsculas normales (nada de MAYÚSCULAS espaciadas) */
label, .lbl, .field label, table.lines th, .detail-row .lbl, .clock-date-disp, .clock-day-disp {
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--p-fg2) !important; font-size: 13px !important;
}
.detail-row .val, table.lines td { color: var(--p-fg) !important; }
.req { color: var(--p-bad) !important; }

/* Campos */
input, select, textarea, .inp, .field input {
  background: var(--p-surface) !important; border: 1px solid var(--p-line2) !important; color: var(--p-fg) !important; border-radius: 8px !important; font-family: var(--p-font) !important; box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, .inp:focus, .field input:focus { outline: 2px solid var(--p-brand) !important; outline-offset: 0 !important; border-color: transparent !important; }
input::placeholder, textarea::placeholder { color: var(--p-fg3) !important; }
.code-input-wrap .inp { letter-spacing: .08em !important; }

/* Botones: principal oscuro/claro sobrio, secundarios con borde */
.btn, .login-btn, .btn-checkin-main, .btn-checkout-main { border-radius: 8px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; font-family: var(--p-font) !important; }
.btn-acc, .btn-blu, .btn-grn, .login-btn, .btn-checkin-main, .lang-active, .avail-date.selected, .sign-prompt .sign-cta {
  background: var(--p-ink) !important; color: var(--p-on-ink) !important; border-color: var(--p-ink) !important;
}
.btn-ghost, .btn-back, .lang-inactive, .logout-btn, .avail-date { background: transparent !important; color: var(--p-fg) !important; border: 1px solid var(--p-line2) !important; }
.btn-red, .btn-checkout-main, .decline-link { background: transparent !important; color: var(--p-bad) !important; border: 1px solid var(--p-bad) !important; }
.decline-link { border: 0 !important; }
.lang-btn { border-width: 1px !important; font-weight: 600 !important; }

/* Pasos del onboarding */
.step { background: var(--p-line) !important; }
.step.done { background: var(--p-fg) !important; }

/* Mensajes y etiquetas de estado */
.msg, .emp-toast { border-radius: 8px !important; box-shadow: none !important; }
.msg.ok, .emp-toast.ok { background: var(--p-surface) !important; color: var(--p-ok) !important; border: 1px solid var(--p-ok) !important; }
.msg.err, .err, .emp-toast.err, .login-err { color: var(--p-bad) !important; }
.msg.err, .emp-toast.err { background: var(--p-surface) !important; border: 1px solid var(--p-bad) !important; }
.msg.inf { background: var(--p-surface2) !important; color: var(--p-fg2) !important; border: 1px solid var(--p-line) !important; }
.badge, .ba, .bb, .bg, .br { background: var(--p-surface2) !important; color: var(--p-fg2) !important; border: 1px solid var(--p-line) !important; letter-spacing: 0 !important; text-transform: none !important; }
.file-done { color: var(--p-ok) !important; }

/* Portal de empleados: sin brillos ni neón */
.status-dot.on { box-shadow: none !important; animation: none !important; }
.clock-time-disp, .timer-live, .stub-amt-val { font-variant-numeric: tabular-nums; }
.portal-avatar { background: var(--p-surface2) !important; color: var(--p-fg) !important; border: 1px solid var(--p-line) !important; }
.stub-icon, .loc-icon { color: var(--p-brand-fg) !important; background: transparent !important; }
.spinner { border-color: var(--p-line) !important; border-top-color: var(--p-fg) !important; }
.success h2 { color: var(--p-fg) !important; }
.success svg { color: var(--p-ok); }

.step.active { background: var(--p-fg3) !important; opacity: 1 !important; }
/* sin brillos de fondo ni degradados */
#loginScreen, #portalScreen, .portal-header, .portal-clock-section { background: var(--p-bg) !important; }
#loginScreen::before, #loginScreen::after, #portalScreen::before, #portalScreen::after, .portal-header::before, .portal-header::after { background: none !important; }
.login-box { background: transparent !important; border: 0 !important; }