/* =====================================================================
   TECNI-MANGUERAS · identidad visual
   =====================================================================

   Escrito para el mostrador, no para el escritorio. Quien usa esto
   atiende a un cliente en dos minutos, con una pistola de codigo de
   barras en la mano, bajo luz de tienda y a veces mirando la pantalla
   desde un metro de distancia. Eso manda sobre lo bonito.

   REGLA DEL COLOR
   El azul es la accion: entrar, guardar, despachar. El rojo es solo la
   marca y las alertas: anular, saldo en cero, cartera vencida. Un rojo
   que aparece en botones corrientes deja de significar algo el dia que
   de verdad importe, asi que aqui no aparece en ninguno.

   CELULAR PRIMERO
   Lo de abajo esta escrito para 375px de ancho. Lo que ensancha en
   pantallas grandes va al final, en una sola media query.

   SIN DEPENDENCIAS
   Tipografia del sistema. Ni CDN, ni fuentes externas, ni framework.
   En el almacen el internet es malo: el sitio tiene que verse igual
   aunque no cargue nada de fuera.
   ===================================================================== */

:root {
  /* Accion. Contraste 5.9:1 con blanco: texto blanco encima cumple AA. */
  --azul:          #1b5fcc;
  --azul-oscuro:   #17509e;   /* al pasar el cursor */
  --azul-hundido:  #113e7a;   /* al presionar */
  --azul-halo:     rgba(27, 95, 204, 0.32);

  /* Marca y alertas. En ningun boton corriente. */
  --rojo:          #c0141b;   /* la marca. 6.3:1 con blanco */
  --rojo-texto:    #8e1014;   /* texto de alerta sobre fondo palido */
  --rojo-fondo:    #fdecec;

  /* Confirmaciones. */
  --verde-texto:   #10603a;
  --verde-fondo:   #e7f2ec;

  /* Tinta y papel. */
  --tinta:         #14161a;   /* casi negro. 16.5:1 con blanco */
  --tinta-suave:   #4b5563;   /* secundario. 7.6:1 con blanco */
  --linea:         #c9cfd8;
  --linea-suave:   #e3e7ec;
  --fondo:         #f1f3f6;
  --papel:         #ffffff;

  /* Alto minimo de todo lo que se toca. El requisito son 44px;
     aqui van 52 porque el dedo llega con prisa. */
  --toque: 52px;
}

* { box-sizing: border-box; }

html {
  /* Sin ajuste automatico de texto al girar el telefono. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

/* ===================== cabecera y marca ============================= */
/* Arriba y a la izquierda: es lo primero que hay que reconocer. */
.cabecera {
  padding: 1.5rem 1rem 1.25rem;
  border-bottom: 3px solid var(--rojo);
  background: var(--papel);
}

.marca {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tinta);
}
.marca-guion { color: var(--rojo); }

/* Cuando la marca sea imagen, cae en el mismo sitio y con la misma
   altura. Por eso basta con cambiar una linea del HTML. */
img.marca { display: block; height: 2.25rem; width: auto; }

.marca-pie {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;      /* 14px: el minimo legible del sitio */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ========================== estructura ============================= */
.lamina {
  padding: 1.25rem 1rem 2.5rem;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1.25rem 1rem 1.5rem;
}

/* Rojo solo cuando de verdad es una alerta. */
.tarjeta-alerta { border-left: 5px solid var(--rojo); }

.titulo {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.rotulo {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ========================== formulario ============================= */
label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;     /* 15px */
  font-weight: 700;
  color: var(--tinta);
}

input {
  display: block;
  width: 100%;
  min-height: var(--toque);
  padding: 0.75rem 0.875rem;
  margin-bottom: 1.25rem;
  /* 17px a proposito: por debajo de 16px, iOS hace zoom solo al tocar
     el campo y descoloca la pantalla en pleno mostrador. */
  font-family: inherit;
  font-size: 17px;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--linea);
  border-radius: 6px;
}
input::placeholder { color: #8a929e; }
input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px var(--azul-halo);
}

/* =========================== botones =============================== */
.boton {
  display: block;
  width: 100%;
  min-height: var(--toque);
  padding: 0.8125rem 1rem;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;   /* sin retardo de doble toque */
}
.boton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--azul-halo);
}
.boton[disabled] { opacity: 0.6; cursor: progress; }

/* La accion. Aqui y en todo lo que venga: entrar, guardar, despachar. */
.boton-accion {
  background: var(--azul);
  color: #fff;
}
.boton-accion:hover:not([disabled]) { background: var(--azul-oscuro); }
.boton-accion:active:not([disabled]) { background: var(--azul-hundido); }

/* Lo que no es la accion principal. Nunca rojo. */
.boton-neutro {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--linea);
}
.boton-neutro:hover { background: var(--fondo); border-color: var(--tinta-suave); }

/* ============================ ficha ================================ */
/* El nombre, grande y arriba: es lo que se mira de reojo. */
.dato-mayor {
  margin: 0.25rem 0 0.625rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.dato-rol { margin: 0 0 1.25rem; }

/* Neutra a proposito. El rol no se pulsa, asi que no lleva azul: el
   azul tiene que seguir queriendo decir "esto se toca". Es el mismo
   argumento del rojo, aplicado al otro color. */
.etiqueta-rol {
  display: inline-block;
  padding: 0.3125rem 0.75rem;
  background: var(--tinta);
  color: #fff;
  border-radius: 4px;
  font-size: 0.9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ficha {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--linea-suave);
}
.ficha dt {
  margin: 0;
  padding: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}
.ficha dd {
  margin: 0;
  padding: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  border-bottom: 1px solid var(--linea-suave);
  overflow-wrap: anywhere;
}

/* ============================ textos =============================== */
.parrafo { margin: 0 0 1rem; }
.parrafo-tenue { color: var(--tinta-suave); }

/* ============================ avisos =============================== */
/* Rojo, porque esto si es una alerta. */
.aviso {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-radius: 6px;
  border-left: 5px solid var(--rojo);
  background: var(--rojo-fondo);
  color: var(--rojo-texto);
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.aviso-ok {
  border-left-color: var(--verde-texto);
  background: var(--verde-fondo);
  color: var(--verde-texto);
}

.pie {
  margin: 1.75rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

/* ===================================================================
   DESDE AQUI SE ENSANCHA
   Todo lo de arriba es la pantalla de 375px. Esto solo acomoda el
   espacio que sobra en tablet y computador; no cambia tamanos de
   letra ni areas de toque.
   =================================================================== */
@media (min-width: 640px) {
  .cabecera { padding: 2rem 2rem 1.5rem; }
  .marca { font-size: 2.25rem; }
  img.marca { height: 2.75rem; }

  .lamina {
    max-width: 34rem;       /* mas ancho que esto, la vista salta de
                               linea en linea y cuesta leer */
    margin: 0;              /* pegado a la izquierda, no centrado */
    padding: 2rem 2rem 3rem;
  }

  .tarjeta { padding: 1.75rem 1.5rem 2rem; }

  /* Con sitio de sobra, la ficha se lee mejor en dos columnas. */
  .ficha {
    display: grid;
    grid-template-columns: 7rem 1fr;
    column-gap: 1.5rem;
    align-items: baseline;
  }
  .ficha dt { padding: 0.75rem 0; border-bottom: 1px solid var(--linea-suave); }
  .ficha dd { padding: 0.75rem 0; }

  /* Un boton de ancho completo en pantalla grande se ve raro. */
  .boton { width: auto; min-width: 12rem; padding-inline: 2rem; }
}

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}