/* ─── Identidad Guardián ───
   Colores tomados del logo. Cambiar acá cambia toda la app. */
:root {
  --guardian-carbon: #1f2326;
  --guardian-carbon-hover: #3a4045;
  --guardian-dorado: #c9a24b;
  --guardian-dorado-texto: #8a6d2a;   /* dorado oscurecido: legible como texto sobre fondo claro */
  --guardian-crema: #f2ede3;
  --guardian-fondo: #f4f3ef;
  --guardian-dorado-grafico: #a8832e; /* barras de gráficos: dorado con contraste >= 3:1 sobre blanco */
  --guardian-grilla: #ebe8e0;

  /* Variables de Bootstrap 5.3 */
  --bs-body-bg: var(--guardian-fondo);
  --bs-body-color: #2b2f33;
  --bs-primary: var(--guardian-carbon);
  --bs-primary-rgb: 31, 35, 38;
  --bs-link-color-rgb: 31, 35, 38;
  --bs-link-hover-color-rgb: 138, 109, 42;
  --bs-border-radius: .5rem;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
}

/* ─── Botones ───
   Bootstrap compila los colores de los botones, por eso se redefinen sus variables */
.btn-primary {
  --bs-btn-bg: var(--guardian-carbon);
  --bs-btn-border-color: var(--guardian-carbon);
  --bs-btn-hover-bg: var(--guardian-carbon-hover);
  --bs-btn-hover-border-color: var(--guardian-carbon-hover);
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-disabled-bg: var(--guardian-carbon);
  --bs-btn-disabled-border-color: var(--guardian-carbon);
}

.btn-outline-primary {
  --bs-btn-color: var(--guardian-carbon);
  --bs-btn-border-color: var(--guardian-carbon);
  --bs-btn-hover-bg: var(--guardian-carbon);
  --bs-btn-hover-border-color: var(--guardian-carbon);
  --bs-btn-active-bg: var(--guardian-carbon);
  --bs-btn-active-border-color: var(--guardian-carbon);
}

/* ─── Foco (accesibilidad): anillo dorado al navegar con teclado ─── */
.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--guardian-dorado);
  box-shadow: 0 0 0 .2rem rgba(201, 162, 75, .35);
}

.form-check-input:checked {
  background-color: var(--guardian-carbon);
  border-color: var(--guardian-carbon);
}

/* ─── Contenedores ─── */
.card {
  border-color: #e4e1d8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.table {
  --bs-table-bg: #fff;
}

.pagination {
  --bs-pagination-color: var(--guardian-carbon);
  --bs-pagination-active-bg: var(--guardian-carbon);
  --bs-pagination-active-border-color: var(--guardian-carbon);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(201, 162, 75, .35);
}

/* ─── Formularios flotantes (heredado) ─── */
.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;
}

/* Patente de vehículo, con aspecto de chapa */
.patente {
  display: inline-block;
  padding: .1rem .45rem;
  border: 1px solid #c9c6bd;
  border-radius: .3rem;
  background: #fff;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 600;
  letter-spacing: .06em;
}

/* ─── Resumen (inicio del Admin) ─── */
.indicador {
  color: inherit;
  text-decoration: none;
  transition: border-color .15s;
}

a.indicador:hover {
  border-color: var(--guardian-dorado);
}

.indicador-titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: #6c757d;
}

.indicador-titulo .bi {
  color: var(--guardian-dorado-texto);
  font-size: 1.1rem;
}

.indicador-valor {
  margin: .25rem 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--guardian-carbon);
}

.indicador-detalle {
  font-size: .85rem;
  color: #6c757d;
}

/* Gráfico de columnas (_GraficoColumnas) */
.grafico-cuerpo {
  display: flex;
  gap: .5rem;
  height: 200px;
  margin-top: 1rem;
}

.grafico-eje {
  position: relative;
  width: 2rem;
  flex-shrink: 0;
  font-size: .75rem;
  color: #6c757d;
  text-align: right;
}

.grafico-eje span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
}

.grafico-area {
  position: relative;
  flex-grow: 1;
}

.grafico-grilla {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--guardian-grilla);
}

.grafico-base {
  border-top-color: #cfcbc0;
}

.grafico-columnas {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 2px;
}

/* Toda la columna es la zona de hover (más grande que la barra) */
.grafico-columna {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  outline: none;
}

.grafico-barra {
  position: relative;
  width: 100%;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  background: var(--guardian-dorado-grafico);
  transition: filter .15s;
}

.grafico-barra.destacada {
  background: var(--guardian-carbon);
}

.grafico-valor {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--guardian-carbon);
  white-space: nowrap;
}

.grafico-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: .35rem .6rem;
  border-radius: .4rem;
  background: var(--guardian-carbon);
  color: #fff;
  font-size: .8rem;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

/* Cerca de los bordes el tooltip se alinea hacia adentro para no salirse de la tarjeta */
.grafico-columna.inicio .grafico-tooltip { left: 0; transform: none; }
.grafico-columna.fin .grafico-tooltip { left: auto; right: 0; transform: none; }

.grafico-columna:hover .grafico-barra,
.grafico-columna:focus-visible .grafico-barra {
  filter: brightness(.85);
}

.grafico-columna:hover .grafico-tooltip,
.grafico-columna:focus-visible .grafico-tooltip {
  display: block;
}

.grafico-etiquetas {
  display: grid;
  gap: 2px;
  margin-top: .35rem;
  margin-left: 2.5rem;
  font-size: .75rem;
  color: #6c757d;
  text-align: center;
  white-space: nowrap;
}

/* Ranking de domicilios: barras horizontales con el valor al final */
.ranking-fila {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr 2.5rem;
  align-items: center;
  gap: .75rem;
}

.ranking-nombre {
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.ranking-pista {
  height: 12px;
}

.ranking-barra {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--guardian-dorado-grafico);
}

.ranking-valor {
  font-weight: 600;
  text-align: right;
}

/* Resumen de validación sin errores: no se muestra (evita una alerta vacía) */
.validation-summary-valid {
  display: none;
}

/* ─── Registrar ingreso ───
   Acá y no en Registrar.cshtml.css porque parte del contenido lo crea JavaScript */
.registro-card {
  border-radius: .75rem;
}

.registro-paso {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--guardian-dorado-texto);
}

.registro-paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--guardian-carbon);
  color: #fff;
  letter-spacing: 0;
}

.registro-dni {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.registro-patente {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}

.registro-visitante {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: .75rem;
  background: var(--guardian-fondo);
}

.registro-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--guardian-carbon);
  color: var(--guardian-crema);
  font-size: 1.75rem;
}

.registro-nuevo-aviso {
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: var(--guardian-crema);
  color: var(--guardian-carbon);
  font-weight: 500;
}

/* Cartel de estado: color e ícono según la situación del visitante */
.registro-estado {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: .75rem;
  border: 2px solid;
}

.registro-estado-icono {
  font-size: 3rem;
  line-height: 1;
}

.registro-estado-titulo {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.registro-estado-detalle {
  margin-top: .25rem;
}

.registro-estado-inicial { background: #fff; border-color: #e4e1d8; border-style: dashed; color: #6c757d; }
.registro-estado-ok      { background: #e9f6ee; border-color: #2e7d4f; color: #1d5636; }
.registro-estado-info    { background: #eaf1fb; border-color: #2f62b3; color: #1f4580; }
.registro-estado-aviso   { background: #fff4e0; border-color: #c77700; color: #7a4a00; }
.registro-estado-peligro { background: #fdecec; border-color: #c0392b; color: #8a2318; }
.registro-estado-salida  { background: var(--guardian-crema); border-color: var(--guardian-carbon); color: var(--guardian-carbon); }

/* Tarjetas de autorización para elegir domicilio */
.registro-opcion {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .9rem 1.1rem;
  border: 2px solid #e4e1d8;
  border-radius: .75rem;
  background: #fff;
  color: inherit;
  transition: border-color .15s, background-color .15s;
}

.registro-opcion:hover {
  border-color: var(--guardian-dorado);
}

.registro-opcion:focus-visible {
  outline: none;
  border-color: var(--guardian-dorado);
  box-shadow: 0 0 0 .2rem rgba(201, 162, 75, .35);
}

.registro-opcion.seleccionada {
  border-color: var(--guardian-carbon);
  background: var(--guardian-crema);
}

/* Destino elegido */
.registro-destino {
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  background: var(--guardian-fondo);
}

.registro-destino-fila {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.1rem;
}

.registro-destino-fila + .registro-destino-fila {
  margin-top: .35rem;
}

.registro-telefono {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--guardian-carbon);
  text-decoration: none;
}

.registro-telefono:hover {
  color: var(--guardian-dorado-texto);
}

.registro-boton {
  padding-top: .9rem;
  padding-bottom: .9rem;
  font-size: 1.25rem;
  font-weight: 600;
}