/*
 * cabina.css — Modo conductor (layout conductor y login de la cabina).
 *
 * Se activa con la clase .modo-cabina en <body>. Botones de 64 px o más, texto
 * grande, alto contraste (el texto secundario pasa a ser el principal y los bordes
 * se oscurecen) y zonas de toque amplias. Pensado para usarse con una mano, de pie
 * y a pleno sol. .btn-cabina (tamaño "cabina" del componente boton) funciona en
 * cualquier layout.
 */

/* Botón de tamaño cabina: a todo el ancho y 64 px de alto como mínimo */
.btn-cabina {
  width: 100%;
  min-height: var(--tactil-cabina);
  --bs-btn-font-size: var(--t-xl);
  --bs-btn-font-weight: var(--p-negrita);
  --bs-btn-border-radius: var(--r-lg);
}

/* ------------------------------------------------------------------------
 * Modo cabina: alto contraste y tamaños grandes
 * ---------------------------------------------------------------------- */
.modo-cabina {
  --c-texto-suave: var(--c-texto);
  --bs-border-color: var(--c-borde-control);
  font-size: var(--t-lg);
}

.modo-cabina .btn {
  min-height: var(--tactil-cabina);
  --bs-btn-font-size: var(--t-lg);
  --bs-btn-padding-x: var(--e-5);
}

.modo-cabina .form-label {
  font-size: var(--t-lg);
}

.modo-cabina .form-control,
.modo-cabina .form-select {
  min-height: var(--tactil-cabina);
  border-width: var(--b-grueso);
  font-size: var(--t-xl);
}

.modo-cabina .form-text,
.modo-cabina .invalid-feedback {
  font-size: var(--t-base);
}

.modo-cabina .campo--casilla {
  min-height: var(--tactil-cabina);
}

.modo-cabina .campo--casilla .form-check-input {
  width: var(--e-8);
  height: var(--e-8);
}

.modo-cabina .campo--casilla.form-switch .form-check-input {
  width: var(--e-12);
}

.modo-cabina .campo-pin__casilla.form-control {
  max-width: var(--casilla-pin-cabina);
  height: var(--tactil-cabina);
  font-size: var(--t-2xl);
}

.modo-cabina .badge-estado {
  font-size: var(--t-base);
}

/* La barra del conductor: botón "Salir" algo menor que los de la cabina */
.modo-cabina .barra-conductor .btn {
  min-height: var(--e-12);
}

/* ------------------------------------------------------------------------
 * Layout del conductor
 * ---------------------------------------------------------------------- */
.barra-conductor {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--alto-cabecera);
  padding: var(--e-2) var(--e-4);
  border-top: var(--b-acento) solid var(--c-marca);
  border-bottom: var(--b-fino) solid var(--c-borde-control);
  background-color: var(--c-superficie);
}

.barra-conductor__empresa {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  font-weight: var(--p-negrita);
}

.barra-conductor__logotipo {
  flex-shrink: 0;
  width: var(--icono-logo);
  height: var(--icono-logo);
}

.barra-conductor__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabina {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--e-5) var(--e-4) var(--e-8);
}

.cabina > * + * {
  margin-top: var(--e-5);
}

.cabina .tarjeta {
  height: auto;
}