/* Misma identidad que CertiONE.Portal (ver wwwroot/app.css) — azul oficial de CoilONE +
   acento óxido, para que la vista pública se sienta parte del mismo producto. */
:root {
  --ink: #1a1d24;
  --ink-soft: #4a505c;
  --paper: #f3f1ec;
  --panel: #ffffff;
  --panel-edge: #dcd7cc;
  --steel-900: #093b59;
  --accent: #b5652d;
  --accent-strong: #8f4c1f;
  --accent-soft: #ecd9c7;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--paper);
  color: var(--ink);
}

h1, h2, h3 {
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight: 800;
}

a { color: var(--accent-strong); }

.brand-mark {
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--steel-900);
}

.btn-primary {
  color: #fff;
  background-color: var(--accent);
  border-color: var(--accent-strong);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--accent-soft);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.lang-switcher {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.lang-code {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft, #4a505c);
  text-decoration: none;
}

.lang-code:hover {
  background: rgba(0, 0, 0, 0.05);
}

.lang-code.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}