:root {
  --navy: #14313C;
  --navy-deep: #0D2830;
  --navy-darker: #0A1E24;
  --teal: #378676;
  --teal-light: #6FD6C0;
  --orange: #F77535;
  --orange-light: #FFA167;
  --ink: #EAF2F0;
  --ink-soft: #B9CBC6;
  --ink-faint: #8AA29C;
  --glass: rgba(234, 242, 240, 0.06);
  --glass-strong: rgba(234, 242, 240, 0.10);
  --glass-border: rgba(234, 242, 240, 0.14);
  --radius: 16px;
  --danger: #E5484D;
  --success: #4CAF7D;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--ink);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
}
h1, h2, h3, h4, button { font-family: 'Space Grotesk', Arial, sans-serif; }
a { color: inherit; }
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; }
img[hidden] { display: none; }
table { border-collapse: collapse; width: 100%; }
/* Author CSS always beats the UA [hidden] rule regardless of specificity —
   #login-screen/#app-shell below set `display: flex` unconditionally, which
   silently defeats `.hidden = true/false` unless we win [hidden] back
   explicitly here. Same bug already fixed once in campo.css. */
#login-screen[hidden], #app-shell[hidden] { display: none; }

/* ---------- Login gate ---------- */
#login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
}
.login-logo { width: 72px; }
.login-actions, .login-email-form, .login-divider { width: 100%; max-width: 320px; }
.login-actions { display: flex; flex-direction: column; gap: 12px; }
.login-email-form { display: flex; flex-direction: column; gap: 10px; }
.login-divider { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 0.8rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }
.login-error { color: var(--orange-light); font-size: 0.85rem; min-height: 1.2em; }
.login-error.login-success { color: var(--success); }
.login-forgot-link { background: none; border: none; align-self: flex-end; padding: 0; color: var(--ink-faint); font-size: 0.8rem; text-decoration: underline; }
.login-config-warning, .login-access-warning {
  background: rgba(247, 117, 53, 0.12);
  border: 1px solid rgba(247, 117, 53, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--orange-light);
  max-width: 380px;
}

/* ---------- Buttons / fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--ink);
}
.btn:active { transform: scale(0.98); }
.btn-google { background: #fff; color: var(--navy-darker); border: none; }
.btn-primary { background: var(--orange); color: #fff; border: none; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: transparent; border: 1px solid var(--glass-border); }
.btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.field-input {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--ink); width: 100%;
}
.field-input::placeholder { color: var(--ink-faint); }

/* ---------- App shell (desktop sidebar) ---------- */
#app-shell { display: flex; min-height: 100vh; }
.side-nav {
  width: 220px; flex-shrink: 0; background: var(--navy); border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column; padding: 18px 0;
}
.side-nav-brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; border-bottom: 1px solid var(--glass-border); margin-bottom: 10px; }
.side-nav-brand img { width: 32px; }
.side-nav-brand .title { font-weight: 700; font-size: 1rem; }
.side-nav-brand .subtitle { font-size: 0.7rem; color: var(--ink-faint); }
.side-nav button {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  padding: 11px 18px; background: none; border: none; color: var(--ink-soft); font-size: 0.9rem;
}
.side-nav button.active { color: var(--orange-light); background: var(--glass); border-right: 3px solid var(--orange); }
.side-nav button:hover { color: var(--ink); }
.side-nav-footer { margin-top: auto; padding: 14px 18px 0; border-top: 1px solid var(--glass-border); }
.side-nav-footer .who { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 8px; word-break: break-all; }

#view-root { flex: 1; min-width: 0; padding: 28px 32px; max-width: 1100px; }

.icon-btn {
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink);
  border-radius: 10px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}

.mobile-topbar, .nav-backdrop { display: none; }

/* Off-canvas nav on mobile: hidden behind a menu button instead of the
   old always-visible horizontal scroll bar, which ate a lot of vertical
   space and made items easy to miss once Jornada/Trabajadores/Tareas
   were added on top of the original five. */
@media (max-width: 760px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--navy); border-bottom: 1px solid var(--glass-border);
  }
  .mobile-topbar-title { font-weight: 700; }

  #app-shell { flex-direction: column; }

  .side-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 100;
    overflow-y: auto;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.45);
  }
  .side-nav.open { transform: translateX(0); }
  .side-nav-footer { display: block; }
  .side-nav button { width: 100%; white-space: normal; padding: 12px 18px; }
  .side-nav button.active { border-right: 3px solid var(--orange); }

  .nav-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 90;
  }

  #view-root { padding: 18px 16px; }
}

/* ---------- Content ---------- */
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 18px; }
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-tile { flex: 1; min-width: 130px; }
.stat-tile .num { font-size: 1.7rem; font-weight: 700; }
.stat-tile .label { font-size: 0.78rem; color: var(--ink-faint); }

.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em;
}
.badge-neutral { background: var(--glass-strong); color: var(--ink-soft); }
.badge-success { background: rgba(76, 175, 125, 0.18); color: var(--success); }
.badge-danger { background: rgba(229, 72, 77, 0.18); color: var(--danger); }
.badge-warn { background: rgba(247, 117, 53, 0.18); color: var(--orange-light); }

.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--glass-border); font-size: 0.86rem; }
.data-table th { color: var(--ink-faint); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tr:last-child td { border-bottom: none; }
.quote-row:hover { background: var(--glass); }

.empty-state { text-align: center; color: var(--ink-faint); padding: 40px 16px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--glass-border); border-top-color: var(--orange); animation: spin 0.8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; }
.tab-btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--ink-soft); font-size: 0.85rem; }
.tab-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.inline-form .field-input, .inline-form select { width: auto; min-width: 160px; }

/* Listas desplegables: el navegador pinta las opciones con fondo claro y heredaba el texto blanco
   (ilegible hasta pasar el mouse). Se fija un fondo oscuro y texto claro para las opciones. */
select { color-scheme: dark; }
select option, select optgroup { background-color: #14313C; color: #EAF2F0; }
select option:disabled { color: #7d9399; }