/* ============================================================
   CSS propio del sistema.
   Objetivo: tipografía consistente en toda la app + que las
   pantallas se usen bien desde el celular. No pisa estilos
   puestos a mano en cada pantalla (esos siguen mandando) -
   solo pone una base pareja donde no hay nada definido.
   ============================================================ */

/* ------------------------------------------------------------
   Tipografía: la misma fuente en todos lados (la que ya usa
   AdminLTE, para no meter una fuente nueva).
   ------------------------------------------------------------ */
body,
.content-wrapper,
.box,
.modal-content,
.form-control,
.btn,
table,
.nav,
.navbar,
label {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------
   Que ninguna pantalla se pueda desbordar de costado.
   ------------------------------------------------------------ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.content-wrapper,
.box,
.modal-content {
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* Las tablas (DataTables u otras) no rompen el ancho de la
   pantalla: si no entran, se scrollean de costado en vez de
   aplastar el contenido o desbordar la página. */
.dataTables_wrapper,
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Celulares y tablets chicas
   ============================================================ */
@media (max-width: 767px) {

  /* Mínimo 16px en los campos para que iOS no haga zoom solo al
     tocar un input (es un problema clásico de Safari mobile). */
  .form-control,
  select,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="search"] {
    font-size: 16px;
  }

  /* Botones e inputs más altos para tocar cómodo con el dedo. */
  .btn,
  .form-control,
  select.form-control {
    min-height: 42px;
  }

  .btn-sm {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Menos aire a los costados para aprovechar el ancho real. */
  .content-wrapper > .content {
    padding-left: 8px;
    padding-right: 8px;
  }

  .box {
    margin-left: 0;
    margin-right: 0;
  }

  /* Las columnas angostas (col-xs-2, col-xs-3, etc.) quedan muy
     pegadas con el padding de Bootstrap por defecto (15px) -
     las achicamos un poco para que entre más contenido cómodo. */
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-6 {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
}

/* ============================================================
   Barra superior (cabezote.php): tiene más íconos de los que
   AdminLTE trae por defecto (sesión, AFIP, cotización, usuario),
   todos flotando en la misma fila. En pantallas angostas, si no
   entran todos en el ancho disponible, los que sobran pueden
   quedar superpuestos con lo que viene abajo (el menú lateral)
   en vez de acomodarse en una segunda línea.
   ============================================================ */
@media (max-width: 767px) {
  /* Que la fila crezca en altura si el contenido flotante no
     entra, en vez de superponerse con lo que sigue. */
  .main-header .navbar::after {
    content: "";
    display: table;
    clear: both;
  }

  .navbar-custom-menu > .navbar-nav > li > a {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* El texto "abonoMensual" del aviso de sesión no tiene por qué
     ocupar espacio en el celular - se deja solo el ícono y el
     contador, como ya se hace con el nombre de usuario. */
  #alertaTiempoSesionRestanteLi {
    max-width: 70px;
    overflow: hidden;
  }

  #alertaTiempoSesionRestanteLi .dropdown-toggle {
    font-size: 0;
  }

  #alertaTiempoSesionRestanteLi .fa,
  #alertaTiempoSesionRestanteLi .label {
    font-size: 12px;
  }

  /* Que los menús desplegables (AFIP, cotización, usuario) no se
     salgan de la pantalla de costado. */
  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    max-width: 90vw;
    min-width: 0;
  }
}

/* ============================================================
   Login: el logo ya se muestra chico y prolijo arriba del
   formulario (login.php, .login-logo), así que se saca el logo
   gigante de fondo (#back) - quedaba superpuesto con el cuadro de
   ingreso sin importar cómo se lo achicara/centrara. El fondo de
   toda la pantalla queda en el mismo rosa del círculo del logo
   (#B4143A, tomado de la propia imagen), para que se sienta una
   sola pieza prolija en vez de un logo compitiendo con otro logo.
   ============================================================ */
.login-page #back {
  background-image: none;
}

.login-page {
  background: linear-gradient(135deg, #B4143A, #6e0c23);
}

.login-logo img {
  display: block;
}

/* ============================================================
   Pantalla de venta en caja (crear-venta-caja): es la que más
   se usa desde el mostrador con celular/tablet, así que tiene
   un ajuste extra para que las filas del carrito (Cant. /
   Artículo / P.Unitario / Precio) se lean bien en pantallas
   angostas.
   ============================================================ */
@media (max-width: 480px) {
  /* Mantenemos 16px (no achicamos la letra) para que iOS no haga
     zoom al tocar estos campos - achicamos el padding interno en
     vez del texto, para ganar el mismo espacio sin ese problema. */
  body.ruta-crear-venta-caja .nuevaCantidadProductoCaja,
  body.ruta-crear-venta-caja .nuevaPrecioUnitario,
  body.ruta-crear-venta-caja .nuevoPrecioProductoCaja {
    padding-left: 4px;
    padding-right: 4px;
  }

  body.ruta-crear-venta-caja .nuevaDescripcionProductoCaja {
    padding-left: 6px;
    padding-right: 6px;
  }
}