/* ---------------------------------------------------------------
   Indicador de carga

   El div #loading no tenia ningun estilo, asi que el gif (236x300 px)
   se pintaba a tamano natural en la esquina superior izquierda y
   descolocaba la pagina. Ahora es una capa centrada sobre el contenido.
   --------------------------------------------------------------- */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.65);
    z-index: 2000;
}

.loading img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: auto;
    margin-top: -46px;      /* la mitad del alto resultante (72 x 92) */
    margin-left: -36px;
}

/* ---------------------------------------------------------------
   Barra de navegacion
   --------------------------------------------------------------- */
.navbar-nav .nav-item {
    padding: 3px 5px 3px 10px;
    white-space: nowrap;    /* con icono delante, "Google ADS" partia en dos lineas */
}

/* Icono delante de cada pestana; un poco mas tenue que el texto */
.navbar-dark .navbar-nav .icono-menu {
    margin-right: 4px;
    opacity: .75;
    font-size: .9em;
}

/* La pestana actual se distingue del resto */
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    font-weight: 600;
    border-bottom: 2px solid #fff;
}

.logo-menu {
    max-height: 34px;
    width: auto;
}

/* ---------------------------------------------------------------
   Tablas y formularios
   --------------------------------------------------------------- */
.table td,
.table th {
    vertical-align: middle;
}

/* Texto de ayuda bajo los campos, tambien en los generados por JavaScript
   (Bootstrap 4 lo llama form-text, pero los campos dinamicos lo crean suelto) */
.form-text {
    font-size: 0.8125rem;
    color: #6c757d;
}

.aviso-guardado {
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------
   Tablas largas: altura fija con scroll y cabecera fija

   El listado de pedidos puede traer cientos de filas; sin esto la
   pagina crece sin fin y la cabecera se pierde al desplazarse.
   --------------------------------------------------------------- */
.tabla-scroll {
    max-height: 1000px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}

.tabla-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e9ecef;
    /* sticky no conserva los bordes de la tabla al desplazarse */
    box-shadow: inset 0 -1px 0 #dee2e6;
}

/* Cabeceras por las que se puede ordenar */
th.ordenable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.ordenable:hover {
    background: #dde2e6;
}

th.ordenable::after {
    content: "\f0dc";               /* sort */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75em;
    opacity: .25;
    margin-left: .4em;
}

th.ordenable.asc::after  { content: "\f0de"; opacity: .8; }   /* sort-up */
th.ordenable.desc::after { content: "\f0dd"; opacity: .8; }   /* sort-down */


/* ---------------------------------------------------------------
   Altura minima de la pagina

   Sin esto, en una pagina con poco contenido el pie sube y queda
   pegado a la cabecera.
   --------------------------------------------------------------- */
.contenido {
    display: block;
    min-height: 1000px;
}

/* ---------------------------------------------------------------
   Pie con los accesos rapidos a las tiendas

   Mismo fondo oscuro que la barra de navegacion, para que cabecera y
   pie enmarquen el contenido.
   --------------------------------------------------------------- */
.pie-tiendas {
    background: #343a40;
    color: #ced4da;
    border-top: 3px solid #23272b;
    margin-top: 3rem;
    padding: 2rem 0 2.5rem;
}

/* Cada tienda ocupa su columna; se pasa a la fila siguiente solo cuando
   la primera se ha llenado. */
.pie-columnas {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 3.5rem;
}

.pie-tienda {
    min-width: 190px;
}

.pie-tienda-nombre {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .06em;
    color: #fff;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid #495057;
}

/* Nombre de la conexion, solo si la tienda tiene mas de una */
.pie-conexion {
    font-size: .78rem;
    color: #868e96;
    margin: .75rem 0 .25rem;
}

.pie-enlaces {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pie-enlaces li {
    margin-bottom: .4rem;
}

.pie-enlaces a {
    font-size: .88rem;
    color: #ced4da;
    text-decoration: none;
}

.pie-enlaces a:hover {
    color: #fff;
    text-decoration: underline;
}

.pie-enlaces i {
    width: 1.2em;
    opacity: .55;
}

.pie-vacio {
    font-size: .85rem;
    color: #868e96;
}

/* ---------------------------------------------------------------
   Referencias: casillas pendientes
   --------------------------------------------------------------- */
/* marcada pero todavia no creada en esa tienda */
#tablaRefs .chk-tienda.pendiente {
    outline: 2px dashed #17a2b8;
    outline-offset: 1px;
}

/* Tarifas: titulo del producto truncado; el completo, al pasar el raton */
#tablaTarifas .celda-titulo {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pedidos: fechas apiladas con un prefijo corto ("de" / "a") de ancho fijo */
#filtrosPedidos .filtro-fecha {
    width: 2rem;
    justify-content: center;
}

/* Productos: la misma ficha sirve para editar y para dar de alta */
#fichaProducto.modo-nuevo .solo-edicion,
#fichaProducto:not(.modo-nuevo) .solo-nuevo {
    display: none !important;
}

/* Marcos: estado de cada articulo en cada facturador (pastilla con menu) */
.pill-estado { border: 0; border-radius: 999px; padding: 2px 9px; font-size: 12px; white-space: nowrap; cursor: pointer; line-height: 1.6; }
.pill-estado .pill-flecha { font-size: 10px; opacity: .6; margin-left: 2px; }
.pill-no  { background: #F1EFE8; color: #5F5E5A; }
.pill-on  { background: #EAF3DE; color: #27500A; }
.pill-off { background: #FCEBEB; color: #791F1F; }
.pill-estado:hover { filter: brightness(.95); }
.pill-cabecera { border: 1px dashed #b4b2a9; background: transparent; color: #888780; border-radius: 999px; padding: 1px 8px; font-size: 11px; margin-top: 3px; cursor: pointer; }
.pill-cabecera.activa { border-style: solid; border-color: #378ADD; color: #185FA5; background: #E6F1FB; }
.menu-estado { position: absolute; z-index: 2000; background: #fff; border: 1px solid #d3d1c7; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); min-width: 230px; padding: 4px 0; font-size: 13px; }
.menu-estado .menu-titulo { padding: 4px 12px 6px; font-size: 11px; color: #888780; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.menu-estado .op-estado { padding: 6px 12px; cursor: pointer; background: transparent; }
.menu-estado .op-estado:hover { background: #f4f3ef; }
.menu-estado .op-estado.disabled { opacity: .45; cursor: not-allowed; }
.menu-estado .op-estado.disabled:hover { background: transparent; }
.menu-estado .op-estado.pill-on i { color: #3B6D11; }
.menu-estado .op-estado.pill-off i { color: #A32D2D; }
.menu-estado .op-estado.pill-no i { color: #888780; }

/* Marcos: stock y precio editables en la fila seleccionada */
#tablaRefs .edit-rapido { width: 90px; display: inline-block; text-align: right; padding: 0 6px; height: 26px; }

/* Marcos: selector de tarifa y campos "a marcados" en la cabecera */
#tablaRefs thead .sel-tarifa { display: block; width: 150px; margin-left: auto; height: 26px; padding: 0 4px; font-size: 12px; font-weight: normal; }
#tablaRefs thead .cab-masivo input { width: 110px; margin: 3px 0 0 auto; height: 26px; font-size: 12px; text-align: right; font-weight: normal; }

/* Marcos: valor del campo "a marcados" que aun no se ha aplicado */
#tablaRefs .edit-rapido.previo { border-color: #EF9F27; background: #FAEEDA; color: #633806; }