/* La consola de Al Centavo: el mismo aire que el producto (Bootstrap, letra
   del sistema, filete de color en las etiquetas), con el verde de la marca. */
:root {
  --ac-verde: #0d766e;
  --ac-verde-oscuro: #095750;
  --ac-verde-rgb: 13, 118, 110;
  --ac-verde-tinte: #e7f3f2;
  --ac-tinta: #1b2430;
  --ac-fondo: #f4f7f8;
  --ac-linea: #dde3ea;

  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --bs-body-bg: var(--ac-fondo);
  --bs-link-color: var(--ac-verde);
  --bs-link-color-rgb: var(--ac-verde-rgb);
  --bs-link-hover-color: var(--ac-verde-oscuro);
  --bs-primary: var(--ac-verde);
  --bs-primary-rgb: var(--ac-verde-rgb);
}
body { font-size: .9rem; color: var(--ac-tinta); }
h1, h2, h3, h4, h5 { font-weight: 700; }
h1 { font-size: 1.3rem; }
h2 { font-size: 1.05rem; margin-top: 1.25rem; }

.btn-primary { --bs-btn-bg: var(--ac-verde); --bs-btn-border-color: var(--ac-verde); --bs-btn-hover-bg: var(--ac-verde-oscuro); --bs-btn-hover-border-color: var(--ac-verde-oscuro); --bs-btn-active-bg: var(--ac-verde-oscuro); }
.btn-outline-primary { --bs-btn-color: var(--ac-verde); --bs-btn-border-color: var(--ac-verde); --bs-btn-hover-bg: var(--ac-verde); --bs-btn-hover-border-color: var(--ac-verde); --bs-btn-active-bg: var(--ac-verde-oscuro); }
.text-primary { color: var(--ac-verde) !important; }
.bg-primary { background-color: var(--ac-verde) !important; }

.form-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #56657a; border-left: 3px solid var(--ac-verde); padding-left: .5rem; margin-bottom: .3rem; }
.card { border-color: var(--ac-linea); }
.card-header { background: var(--ac-verde-tinte); border-bottom: 1px solid var(--ac-linea); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table { --bs-table-bg: #fff; }
.table > :not(caption) > * > * { vertical-align: middle; }

.barra { background: #fff; border-bottom: 1px solid var(--ac-linea); }
.barra .navbar-brand { color: var(--ac-verde); font-weight: 800; }
.barra .nav-link { color: #3c4a5c; font-weight: 600; font-size: .85rem; }
.barra .nav-link.active, .barra .nav-link:hover { color: var(--ac-verde); }
.barra .persona { font-size: .8rem; color: #567; }
.barra .persona button { background: none; border: none; color: var(--ac-verde); padding: 0; text-decoration: underline; font-size: .8rem; }

main { max-width: 1280px; }

.punto { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.motivos { margin: 0; padding-left: 1rem; font-size: .8rem; color: #4a5568; }
.codigo { letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.qr svg { width: 220px; height: 220px; background: #fff; }
.secreto { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .05em; }
.clave-visible { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; background: #fff8e1; padding: .3rem .6rem; border-radius: .3rem; }
.log { background: #111a22; color: #d6e2ea; font-size: .78rem; max-height: 480px; overflow: auto; padding: .75rem; border-radius: .3rem; white-space: pre-wrap; }
.casillas .form-check-inline { margin-right: 1.2rem; }

/* La hoja de bienvenida se imprime sin la barra ni los botones. */
@media print {
  .no-imprimir { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .hoja { border: 0 !important; box-shadow: none !important; }
}

@media (max-width: 767.98px) {
  table.apilada thead { display: none; }
  table.apilada, table.apilada tbody, table.apilada tr, table.apilada td { display: block; width: 100%; }
  table.apilada tr { margin-bottom: .75rem; border: 1px solid var(--ac-linea); border-radius: .375rem; }
  table.apilada td { text-align: right; padding-left: 45%; position: relative; }
  table.apilada td::before { content: attr(data-etiqueta); position: absolute; left: .6rem; width: 40%; text-align: left; font-weight: 600; color: #56657a; }
}