/* =====================================================================
   Me & You — Tech Solutions · Component primitives
   The building blocks. Carry them across apps; don't reinvent.
   Requires colors_and_type.css to be loaded first.
   ===================================================================== */

/* ---- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-transform) var(--ease),
    background var(--dur-color) var(--ease),
    box-shadow var(--dur-color) var(--ease),
    border-color var(--dur-color) var(--ease),
    color var(--dur-color) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-deep); box-shadow: var(--shadow); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

/* Buttons are often <a> links. The base `a:visited` rule (specificity 0,1,1)
   would otherwise beat `.btn--primary { color:#fff }` (0,1,0) and turn a visited
   primary button into dark-on-dark text. Pin the text colour across every link
   state so a button never inherits a link colour. */
.btn--primary:link,
.btn--primary:visited,
.btn--primary:hover,
.btn--primary:active { color: #fff; }
.btn--ghost:link,
.btn--ghost:visited { color: var(--ink); }
.btn--ghost:hover { color: var(--brand); }
.btn--danger:link,
.btn--danger:visited,
.btn--danger:hover,
.btn--danger:active { color: #fff; }

/* Pair a primary with a ghost — never two primaries side by side. */

/* ---- Card with brand accent bar ----------------------------------- */
.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-color) var(--ease),
    box-shadow var(--dur-color) var(--ease),
    border-color var(--dur-color) var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--theme-accent, var(--brand)));
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--card-accent, var(--theme-accent, var(--brand)));
}
/* Plain card (no accent bar) for about/feature blocks */
.card--plain::before { display: none; }

/* ---- Badge (featured) --------------------------------------------- */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: #fff;
}

/* ---- Eyebrow — tiny uppercase label above a section title --------- */
.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}

/* ---- Pill / chip --------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  background: var(--bg-tint);
  border: 1px solid var(--rule);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
}

/* ---- Warn callout (yellow) — the ONLY yellow in the system -------- */
.aviso {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-left-width: 4px;
  color: var(--warn-ink);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius);
}
.aviso__title {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--sp-2);
}

/* ---- Summary callout (brand, left accent) — used on prose pages --- */
.resumo {
  background: var(--bg-tint);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--sp-6);
}

/* ---- Field (input / textarea) ------------------------------------- */
.field {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--dur-color) var(--ease),
    box-shadow var(--dur-color) var(--ease);
}
.field::placeholder { color: var(--ink-mute); }
.field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

/* ---- Section — a page is a stack of sections ---------------------- */
.section { padding-block: var(--sp-24); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--bg-tint); }
@media (max-width: 720px) {
  .section { padding-block: var(--sp-12); }
}

/* ---- Container ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--sm { max-width: var(--container-sm); }

/* ---- Hero atmosphere ---------------------------------------------- */
.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--ink);
}
.hero__title-accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__glow {
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 60vh;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 20% 30%,
      color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 60%),
    radial-gradient(50% 50% at 80% 20%,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%);
  filter: blur(20px);
}

/* ---- Product icon tile — soft tinted square behind a glyph -------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card-accent, var(--theme-accent, var(--brand))) 12%, transparent);
  color: var(--card-accent, var(--theme-accent, var(--brand)));
}

/* =====================================================================
   APP PRIMITIVES — everything below is for product UIs (Agent,
   Contábil, internal tools), not just marketing pages.
   ===================================================================== */

/* ---- Button sizes + states ----------------------------------------- */
.btn--sm { padding: 0.45rem 0.85rem; font-size: var(--text-xs); }
.btn--lg { padding: 0.95rem 1.75rem; font-size: var(--text-base); }
.btn--danger { background: var(--danger); color: #fff; box-shadow: var(--shadow-sm); }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 80%, #000 20%); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

/* ---- Field states + kinds ------------------------------------------ */
.field:disabled { background: var(--bg-tint); color: var(--ink-mute); cursor: not-allowed; }
.field--error { border-color: var(--danger); }
.field--error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.field-hint { display: block; font-size: var(--text-xs); color: var(--ink-mute); margin-top: var(--sp-2); }
.field-msg--error { display: block; font-size: var(--text-xs); color: var(--danger); font-weight: var(--fw-medium); margin-top: var(--sp-2); }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}
textarea.field { min-height: 6rem; resize: vertical; line-height: var(--lh-snug); }

/* ---- Checkbox ------------------------------------------------------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  display: grid; place-content: center;
  transition: background var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease);
}
.checkbox input::before {
  content: "";
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform var(--dur-transform) var(--ease);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: #fff;
}
.checkbox input:checked {
  background: var(--theme-accent, var(--brand));
  border-color: var(--theme-accent, var(--brand));
}
.checkbox input:checked::before { transform: scale(1); }

/* ---- Switch --------------------------------------------------------- */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
}
.switch input {
  appearance: none;
  width: 38px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--rule);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-color) var(--ease);
}
.switch input::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-transform) var(--ease);
}
.switch input:checked { background: var(--theme-accent, var(--brand)); }
.switch input:checked::before { transform: translateX(16px); }

/* ---- Status chip — ok / warn / danger / neutral --------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--ok { color: var(--ok); background: var(--ok-bg); }
.status--warn { color: var(--warn-ink); background: var(--warn-bg); }
.status--danger { color: var(--danger); background: var(--danger-bg); }
.status--neutral { color: var(--ink-mute); background: var(--bg-tint); }

/* ---- Table ----------------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: auto;
  background: var(--bg);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  background: var(--bg-soft);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-soft); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Tabs ------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--rule);
}
.tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-mute);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  transition: color var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--theme-accent, var(--brand));
  border-bottom-color: var(--theme-accent, var(--brand));
  font-weight: var(--fw-semibold);
}

/* ---- App nav / header ------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 60px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.nav__brand-accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Product variant (Contábil, Cadastro Habitacional): the app icon, the product name in extrabold and a
   small muted studio line under it. Use on product sites and app shells instead of the "meandyou + accent"
   wordmark, which stays for the institutional site.
     <a class="nav__brand nav__brand--product" href="/">
       <img src="brand/icon_app.png" alt="" width="30" height="30">
       <span class="nav__brand-name">Contábil<small>Me &amp; You Tech Solutions</small></span>
     </a> */
.nav__brand--product { gap: var(--sp-3); }
.nav__brand--product img { height: 30px; width: auto; display: block; border-radius: var(--radius-sm); }
.nav__brand-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.nav__brand-name small {
  font-weight: var(--fw-medium);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: color var(--dur-color) var(--ease);
}
.nav__link:hover { color: var(--theme-accent, var(--brand)); }
.nav__link[aria-current="page"] { color: var(--theme-accent, var(--brand)); font-weight: var(--fw-semibold); }

/* ---- Footer ----------------------------------------------------------- */
.footer {
  background: var(--brand-atmosphere);
  color: #c8d1e0;
  padding-block: var(--sp-12);
  font-size: var(--text-sm);
}
.footer a { color: #e2e8f0; }
.footer a:visited { color: #e2e8f0; }
.footer__legal { color: #8e9ab5; font-size: var(--text-xs); margin-top: var(--sp-6); }

/* ---- Modal ------------------------------------------------------------ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(13, 18, 48, 0.55);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.modal {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 30rem;
  padding: var(--sp-8);
}
.modal__title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 var(--sp-3); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-8); }

/* ---- Toast ------------------------------------------------------------- */
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: fit-content;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.toast--ok::before { background: var(--ok); }
.toast--danger::before { background: var(--danger); }

/* ---- Empty state -------------------------------------------------------- */
.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-6);
  color: var(--ink-mute);
}
.empty__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink); margin: 0; }
.empty__body { font-size: var(--text-sm); max-width: 28rem; margin: 0; }

/* ---- ASP.NET MVC unobtrusive-validation aliases ---------------------
   jQuery validation injects these classes; alias them to the DS field
   states so Razor forms style correctly with zero JS changes. */
.field.input-validation-error { border-color: var(--danger); }
.field.input-validation-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.field-validation-error { display: block; font-size: var(--text-xs); color: var(--danger); font-weight: var(--fw-medium); margin-top: var(--sp-2); }
.field-validation-valid { display: none; }
.validation-summary-errors { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); }
.validation-summary-errors ul { margin: 0; padding-left: 1.2em; }
.validation-summary-valid { display: none; }

/* ---- Spinner -------------------------------------------------------------- */
.spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--rule);
  border-top-color: var(--theme-accent, var(--brand));
  animation: my-spin 0.7s linear infinite;
}
@keyframes my-spin { to { transform: rotate(360deg); } }