/* Paleta de la app: crema, tinta casi negra y rojo de sello. */
:root {
  --crema: #F2EFE6;
  --superficie: #FBF9F3;
  --linea: #D5CEBF;
  --tinta: #16130F;
  --apagado: #5E574C;
  --rojo: #B02220;
  --rojo-oscuro: #7E1715;
  --dorado: #B8862B;
  --bs-body-bg: var(--crema);
  --bs-body-color: var(--tinta);
  --bs-border-color: var(--linea);
  --bs-link-color-rgb: 176, 34, 32;
  --bs-link-hover-color-rgb: 126, 23, 21;
}

/* Letra grande a proposito: el panel lo usa el dueno, muchas veces desde el
   telefono y con el local funcionando. */
html { font-size: 17px; }
body { background: var(--crema); color: var(--tinta); }

.barra { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--tinta); }
.marca img { border-radius: 50%; }
.marca small { font-weight: 500; color: var(--apagado); margin-left: .25rem; }
.nav-link { font-weight: 600; color: var(--apagado); padding: .6rem .8rem !important; white-space: nowrap; }
.nav-link.active { color: var(--rojo) !important; }
.usuario { color: var(--apagado); font-size: .9rem; }

h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: .25rem; }
.bajada { color: var(--apagado); margin-bottom: 1.5rem; max-width: 46rem; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 1.25rem;
}
a.tarjeta { display: block; color: inherit; text-decoration: none; height: 100%; }
a.tarjeta:hover { border-color: var(--rojo); }
.tarjeta h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; }
.tarjeta .dato { font-size: 1.6rem; font-weight: 800; }
.tarjeta .detalle { color: var(--apagado); font-size: .95rem; }

.form-label { font-weight: 600; margin-bottom: .25rem; }
.form-text { color: var(--apagado); }
.form-control, .form-select { padding: .65rem .8rem; font-size: 1rem; background: #fff; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--rojo);
  box-shadow: 0 0 0 .2rem rgba(176, 34, 32, .15);
}
.form-check-input:checked { background-color: var(--rojo); border-color: var(--rojo); }

/* Areas tactiles de al menos 44px. */
.btn { padding: .6rem 1.1rem; font-weight: 600; border-radius: 10px; }
.btn-sm { padding: .4rem .8rem; }
.btn-primary { --bs-btn-bg: var(--rojo); --bs-btn-border-color: var(--rojo);
  --bs-btn-hover-bg: var(--rojo-oscuro); --bs-btn-hover-border-color: var(--rojo-oscuro);
  --bs-btn-active-bg: var(--rojo-oscuro); --bs-btn-active-border-color: var(--rojo-oscuro); }

.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .75rem .6rem; vertical-align: middle; }

.etiqueta { display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; border: 1px solid var(--linea); color: var(--apagado); }
.etiqueta.si { background: #E6F2E6; border-color: #9CC49C; color: #2B5B2B; }
.etiqueta.no { background: #F3E3E2; border-color: #D9A9A6; color: var(--rojo-oscuro); }

/* El numero que resume el programa de puntos, al lado del formulario. */
.retorno { font-size: 2.4rem; font-weight: 800; color: var(--rojo); line-height: 1; }

.dia { border-top: 1px solid var(--linea); padding: 1rem 0; }
.dia:first-child { border-top: 0; }
.dia h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }

.ingresar { max-width: 26rem; margin: 3rem auto; }