/* =========================================================================
   Consulta pública de envíos — el "shell" de la pantalla.
   053-trazabilidad-pedido-publica · 2026-09-23
   =========================================================================

   Qué es esto y qué NO es:

   - Acá vive el marco: logo, tarjeta, título, campo, botón, el contenedor del
     reCAPTCHA y la tarjeta que envuelve el resultado.
   - La barra de agrupadores y la línea de tiempo del resultado siguen en
     `trazabilidad.css`. Son dos cosas distintas y conviene que sigan separadas:
     el resultado lo arma `consulta_pedido_actions.php`, el marco lo arma la
     vista.

   Por qué un archivo propio y no tocar `paper-dashboard.css`: esa hoja la
   comparten 5 vistas (`login.php`, `login_legacy.php`, `message_html.php`,
   `paper_head.php` y ésta). Cualquier cambio ahí le pega al login. Este archivo
   lo carga SOLO `consulta_pedido.php`.

   Por qué clases `cons-*` propias y no `.card` / `.btn` de Bootstrap: para no
   pelear con la especificidad del tema ni depender de que siga cargado. Si
   mañana se saca Bootstrap de esta pantalla, esto sigue en pie.

   Sin `var()` a propósito: es un archivo chico y los colores son literales, así
   no depende del soporte de custom properties (que en `trazabilidad.css` sí se
   usan, con su `@supports` de respaldo).

   Paleta, la de marca que ya usaba la pantalla:
     navy    #214761   (ya estaba en el botón y las etiquetas)
     navy-2  #152f41   (hover)
     naranja #fd7e14   (ya estaba en el título)
   ========================================================================= */

.cons-body {
  margin: 0;
  background: #f4f3ef;
  color: #3c4a56;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  padding: 36px 16px 70px;
  -webkit-text-size-adjust: 100%;
}

.cons-wrap {
  max-width: 460px;
  margin: 0 auto;
}

/* --- Marca ---------------------------------------------------------------
   El logo es el que ya usa el sitio (`Views/img/logospp.png`, 951x368). Se
   sirve a 160px de ancho, que es el doble de lo que ocupa: entra nítido en
   pantallas retina sin pedir otro archivo. */
.cons-brand {
  text-align: center;
  margin-bottom: 20px;
}
.cons-brand img {
  width: 160px;
  max-width: 60%;
  height: auto;
  display: inline-block;
}

/* --- Tarjeta ------------------------------------------------------------- */
.cons-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(33, 71, 97, .10);
  padding: 26px 24px 22px;
  text-align: center;
}

.cons-titulo {
  color: #fd7e14;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px;
}

.cons-hr {
  border: none;
  border-top: 1px solid #eceff1;
  margin: 0 0 18px;
}

.cons-label {
  display: block;
  color: #214761;
  font-size: 13.5px;
  margin-bottom: 8px;
}

/* El código va en mayúsculas sí o sí: `text-transform` es sólo visual, pero el
   valor que viaja al servidor es el que el cliente tipeó. La búsqueda en
   `client_movements` es por igualdad, así que NO se fuerza nada acá — se deja
   como lo escribió, igual que hoy. */
.cons-input {
  width: 100%;
  max-width: 240px;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  border: 1px solid #d8dde3;
  border-radius: 5px;
  font-size: 16px;            /* 16px o más: abajo de eso iOS hace zoom solo al enfocar */
  font-family: inherit;
  letter-spacing: .03em;
  color: #3c4a56;
  background: #fff;
}
.cons-input::-webkit-input-placeholder { color: #b9c2ca; letter-spacing: .06em; }
.cons-input::-moz-placeholder          { color: #b9c2ca; letter-spacing: .06em; }
.cons-input:-ms-input-placeholder      { color: #b9c2ca; letter-spacing: .06em; }
.cons-input::placeholder               { color: #b9c2ca; letter-spacing: .06em; }
.cons-input:focus {
  outline: none;
  border-color: #214761;
  box-shadow: 0 0 0 3px rgba(33, 71, 97, .10);
}

/* --- reCAPTCHA -----------------------------------------------------------
   El widget es un iframe de Google: por dentro NO se puede estilar, y tampoco
   corresponde. Lo único que se hace acá es centrarlo, darle aire, y que en
   pantallas angostas se escale en vez de desbordar la tarjeta (el widget mide
   304px fijos y la tarjeta puede quedar en menos). */
.cons-captcha {
  margin: 18px 0 4px;
  display: flex;
  justify-content: center;
}
.cons-captcha .g-recaptcha {
  display: inline-block;
}

@media (max-width: 360px) {
  .cons-captcha {
    /* 304px es el ancho fijo del widget. Se achica desde el borde izquierdo
       para que quede centrado igual. */
    transform: scale(.88);
    transform-origin: center top;
  }
}

/* --- Botones ------------------------------------------------------------- */
.cons-btn {
  display: inline-block;
  background: #214761;
  border: 1px solid #214761;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 26px;
  border-radius: 5px;
  margin-top: 18px;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cons-btn:hover,
.cons-btn:focus {
  background: #152f41;
  border-color: #152f41;
  outline: none;
}
.cons-btn:focus {
  box-shadow: 0 0 0 3px rgba(33, 71, 97, .22);
}
.cons-btn:active {
  transform: translateY(1px);
}
.cons-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* El secundario ("volver a consultar") va en contorno: no compite con el
   principal cuando los dos están en pantalla. */
.cons-btn-sec {
  background: transparent;
  color: #214761;
  border: 1px solid #214761;
  padding: 8px 20px;
}
.cons-btn-sec:hover,
.cons-btn-sec:focus {
  background: #214761;
  color: #fff;
}

.cons-volver {
  text-align: center;
  margin-top: 16px;
}

/* --- Aviso al cliente ----------------------------------------------------
   Reemplaza los `alert()` del navegador. Un alert bloquea la pantalla, no se
   puede leer con el teclado abierto en el celular y se ve como un error del
   sistema; esto se lee al lado del campo, que es donde está mirando. */
.cons-aviso {
  display: none;
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  background: #fff8ec;
  border: 1px solid #f3dfae;
  color: #8a6a1f;
}
.cons-aviso.visible {
  display: block;
}

/* --- La tarjeta del resultado -------------------------------------------
   Envuelve lo que devuelve `consulta_pedido_actions.php`. La cabecera la arma
   la VISTA con el código que el cliente tipeó, no el controller: así el
   resultado no cambia de forma y todo lo verificado el 2026-09-23 sigue
   valiendo igual. */
.cons-resultado {
  margin-top: 22px;
}
.cons-resultado:empty {
  margin-top: 0;
}

.cons-rcard {
  background: #fff;
  border: 1px solid #eef1f4;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(33, 71, 97, .10), 0 1px 3px rgba(33, 71, 97, .08);
  overflow: hidden;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
.cons-rcard.visible {
  opacity: 1;
  transform: translateY(0);
}

.cons-rhead {
  background: #214761;
  background: linear-gradient(120deg, #214761 0%, #152f41 100%);
  color: #fff;
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cons-rnum {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  word-break: break-all;
}
.cons-rchip {
  font-size: 10px;
  background: rgba(255, 255, 255, .16);
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.cons-rbody {
  padding: 18px 20px 16px;
}

/* Lo que ya venía dentro del resultado y no tiene por qué seguir centrado
   ahora que vive en una tarjeta con su propia cabecera. */
.cons-rbody label {
  font-weight: 400;
  margin: 0;
}

@media (max-width: 600px) {
  .cons-body {
    padding: 22px 12px 60px;
  }
  .cons-card {
    padding: 22px 16px 18px;
  }
  .cons-titulo {
    font-size: 20px;
  }
  .cons-rbody {
    padding: 16px 14px 14px;
  }
}