con flex deja de comportarse como celda) */
.tabla-botones {
display: flex;
justify-content: flex-end;
gap: 0.333rem;
}
/* Mensaje "Aún no hay registros" */
.tabla td.tabla-vacio {
padding: 1.778rem 0.889rem;
color: var(--color-gris);
text-align: center;
}
/* ---------- Tabla agrupada (un
por grupo) ----------
Fila de título de cada grupo, ej. "NORTE NOR ....... 2 tiendas".
La crea crearFilaGrupo() de js/componentes.js.
La usan Tiendas (por región) y Pilotos (por tienda). */
.tabla .tabla-grupo th {
padding-top: 0.556rem;
padding-bottom: 0.556rem;
background-color: var(--color-fondo);
border-top: 1px solid var(--color-borde);
}
/* El primer grupo no necesita línea arriba (ya está el encabezado) */
.tabla tbody:first-of-type .tabla-grupo th {
border-top: none;
}
/* Código al lado del título (ej. "NOR") */
.tabla-grupo-codigo {
margin-left: 0.333rem;
font-family: var(--fuente-codigo);
color: var(--color-gris);
}
/* Cantidad a la derecha (ej. "2 tiendas") */
.tabla-grupo-cuenta {
float: right;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--color-gris);
}
/* ==================================================
TEXTOS ESPECIALES
================================================== */
/* Segunda línea pequeña dentro de una celda (ej. "Solicitado por ... el ...") */
.celda-detalle {
display: block;
margin-top: 2px;
font-size: 0.75rem;
color: var(--color-gris);
}
/* Letra de ancho fijo para usuarios y códigos (ej. cen-001-jperez) */
.texto-codigo {
font-family: var(--fuente-codigo);
white-space: nowrap;
}
/* Etiqueta en forma de píldora (ej. el rol en la tabla de usuarios) */
.etiqueta {
display: inline-block;
padding: 0.167rem 0.556rem;
border-radius: 999px;
white-space: nowrap;
font-size: 0.8rem;
font-weight: 600;
}
.etiqueta-naranja {
background-color: var(--color-naranja-claro);
color: #B34A07;
}
.etiqueta-azul {
background-color: var(--color-azul-claro);
color: var(--color-azul-marino);
}
.etiqueta-verde {
background-color: var(--color-verde-claro);
color: var(--color-verde);
}
.etiqueta-morada {
background-color: #EFE7FA;
color: #5B2A86;
}
.etiqueta-turquesa {
background-color: #DDF3F1;
color: #0E6B63;
}
.etiqueta-rosada {
background-color: #FCE7F3;
color: #9D174D;
}
.etiqueta-gris {
background-color: var(--color-borde-suave);
color: var(--color-gris);
}
/* ==================================================
AVATAR (foto redonda o iniciales)
La imagen o las iniciales las pone js/avatar.js.
Tamaños: .avatar-chico (tabla) | .avatar-mediano (formulario) | .avatar-grande (perfil)
================================================== */
.avatar {
flex-shrink: 0;
border-radius: 50%;
background-color: var(--color-azul-marino);
background-size: cover; /* la foto llena el círculo sin deformarse */
background-position: center;
display: flex; /* centra las iniciales */
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--color-blanco);
}
.avatar-chico {
width: 1.889rem;
height: 1.889rem;
font-size: 0.75rem;
}
.avatar-mediano {
width: 4rem;
height: 4rem;
font-size: 1.3rem;
}
.avatar-grande {
width: 8.889rem;
height: 8.889rem;
border: 0.222rem solid var(--color-blanco);
box-shadow: 0 0 0 2px var(--color-borde), 0 0.333rem 0.889rem rgba(0, 28, 59, 0.15);
font-size: 3rem;
letter-spacing: 2px;
}
/* ==================================================
FORMULARIOS
(2 columnas)
(etiqueta + campo + ayuda)
...
.campo-ancho = ocupa las 2 columnas
================================================== */
.campos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.889rem;
}
.campo-ancho {
grid-column: 1 / -1;
}
.campo {
display: flex;
flex-direction: column;
gap: 0.333rem;
}
.campo-etiqueta {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-azul-marino);
}
.campo-input {
height: 2.333rem;
padding: 0 0.667rem;
background-color: var(--color-fondo);
border: 1px solid var(--color-borde);
border-radius: var(--radio);
outline: none;
font-family: inherit;
font-size: 0.95rem;
color: var(--color-texto);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.campo-input::placeholder {
color: var(--color-placeholder);
}
.campo-input:focus {
background-color: var(--color-blanco);
border-color: var(--color-azul);
box-shadow: var(--sombra-foco);
}
/* Campo desactivado (ej. tienda cuando el rol es Administrador) */
.campo-input:disabled {
background-color: var(--color-borde-suave);
cursor: not-allowed;
}
/* Texto de ayuda debajo del campo */
.campo-ayuda {
font-size: 0.75rem;
color: var(--color-gris);
}
/* Error del formulario. min-height reserva el espacio
para que los botones no "salten" al aparecer el mensaje */
.form-error {
min-height: 1.2em;
margin: 0.889rem 0 0;
font-size: 0.85rem;
color: var(--color-rojo);
}
/* ==================================================
FILTROS (selectores para filtrar una lista)
.filtro también se puede usar suelto (ej. en .pagina-acciones)
================================================== */
.filtros {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.667rem;
}
/* Misma altura que el buscador y fondo blanco */
.filtro {
height: 2.222rem;
min-width: 10rem;
background-color: var(--color-blanco);
}
/* ==================================================
PESTAÑAS (ej. una por actividad: Entregas de tienda | Encomiendas)
-> los botones los crea crearPestanas()
de js/componentes.js:
.activo = la pestaña elegida. Lo usan Pedidos y Reportes.
================================================== */
.pestanas {
display: flex;
flex-wrap: wrap;
gap: 0.222rem;
border-bottom: 2px solid var(--color-borde);
}
.pestanas[hidden] {
display: none;
}
.pestana {
display: inline-flex;
align-items: center;
gap: 0.444rem;
margin-bottom: -2px; /* la línea de la pestaña elegida tapa la línea de abajo */
padding: 0.556rem 0.889rem;
background: none;
border: none;
border-bottom: 0.167rem solid transparent;
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
color: var(--color-gris);
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}
.pestana:hover {
color: var(--color-azul-marino);
}
.pestana.activo {
color: var(--color-azul-marino);
border-bottom-color: var(--color-naranja);
}
/* Número a la derecha del texto (ej. cuántos pedidos hay) */
.pestana-cuenta {
min-width: 1.222rem;
padding: 1px 0.444rem;
border-radius: 999px;
background-color: var(--color-borde-suave);
font-size: 0.75rem;
text-align: center;
color: var(--color-gris);
}
.pestana-cuenta[hidden] {
display: none;
}
.pestana.activo .pestana-cuenta {
background-color: var(--color-naranja-claro);
color: #B34A07;
}
/* Pestañas que son enlaces a otra sección (Tiendas | Clientes | Empresas) */
a.pestana {
text-decoration: none;
}
a.pestana[hidden] {
display: none;
}
/* Solo para el Desarrollador (ej. pestaña Empresas). El rol lo pone js/permisos.js */
html:not([data-rol="desarrollador"]) [data-solo-desarrollador] {
display: none !important;
}
.pestanas + .pagina-cabecera {
margin-top: 0.889rem;
}
/* ==================================================
MAPA "PUNTO A -> PUNTO B" (lo arma crearMapaRuta() de js/mapa.js)
Lo usan Pedidos y Cotizador. Barra (Ubicar A / Ubicar B / clic pone),
resultados de búsqueda, mapa y la distancia abajo.
================================================== */
.mapa-ruta {
display: flex;
flex-direction: column;
gap: 0.444rem;
}
.mapa-ruta-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.444rem;
}
.mapa-ruta-clic {
display: flex;
align-items: center;
gap: 0.333rem;
margin-left: auto;
font-size: 0.8rem;
color: var(--color-gris);
}
.mapa-ruta-lado {
display: inline-flex;
align-items: center;
gap: 0.222rem;
cursor: pointer;
}
.mapa-ruta-lado b {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.222rem;
height: 1.222rem;
border-radius: 50%;
font-size: 0.75rem;
color: var(--color-blanco);
}
.mapa-ruta-lado-a b { background-color: var(--color-verde); }
.mapa-ruta-lado-b b { background-color: var(--color-naranja); }
.mapa-ruta-opciones {
height: 2rem;
font-size: 0.82rem;
}
.mapa-ruta-opciones[hidden] {
display: none;
}
/* position + z-index + isolation: las capas del mapa no tapan menús ni ventanas */
.mapa-ruta-mapa {
position: relative;
z-index: 0;
isolation: isolate;
height: 15.556rem;
border: 1px solid var(--color-borde);
border-radius: var(--radio);
overflow: hidden;
background-color: var(--color-azul-claro);
}
/* Marcadores A (verde) y B (naranja) en forma de gota */
.mapa-ruta-marca span {
display: flex;
align-items: center;
justify-content: center;
width: 1.556rem;
height: 1.556rem;
border: 2px solid var(--color-blanco);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 2px 0.333rem rgba(0, 0, 0, 0.35);
font-weight: 700;
font-size: 0.8rem;
color: var(--color-blanco);
}
.mapa-ruta-marca-a span { background-color: var(--color-verde); }
.mapa-ruta-marca-b span { background-color: var(--color-naranja); }
.mapa-ruta-estado {
margin: 0;
font-size: 0.85rem;
color: var(--color-gris);
}
.mapa-ruta-estado strong {
color: var(--color-texto);
}
.mapa-ruta-estado a {
color: var(--color-azul);
font-weight: 600;
}
.mapa-ruta-estado.error {
color: var(--color-rojo);
}
/* "Ampliar mapa": más alto (para poner los puntos con el dedo) */
.mapa-ruta-grande .mapa-ruta-mapa {
height: min(70vh, 31.111rem);
}
.mapa-ruta-mapa {
transition: height 0.2s ease;
}
/* ---------- Sugerencias de direcciones (sugerirDirecciones, js/mapa.js) ----------
Lista bajo el campo mientras se escribe. El contenedor del campo recibe
.mapa-sugerir-caja (position: relative) para ubicar la lista. */
.mapa-sugerir-caja {
position: relative;
}
.mapa-sugerencias {
position: absolute;
left: 0;
right: 0;
z-index: 30;
max-height: 14.444rem;
margin: 0;
padding: 0.222rem 0;
overflow-y: auto;
list-style: none;
background-color: var(--color-blanco);
border: 1px solid var(--color-borde);
border-radius: var(--radio);
box-shadow: 0 0.556rem 1.333rem rgba(0, 28, 59, 0.18);
}
.mapa-sugerencias[hidden] {
display: none;
}
.mapa-sugerencias li {
display: flex;
flex-direction: column;
gap: 1px;
padding: 0.444rem 0.667rem;
cursor: pointer;
}
.mapa-sugerencias li:hover,
.mapa-sugerencias li.activo {
background-color: var(--color-azul-claro);
}
.mapa-sugerencias strong {
font-size: 0.88rem;
color: var(--color-texto);
}
.mapa-sugerencias small {
overflow: hidden;
font-size: 0.74rem;
color: var(--color-gris);
text-overflow: ellipsis;
white-space: nowrap;
}
/* "Buscando..." / "Sin resultados" */
.mapa-sugerencias li.mapa-sugerencias-aviso {
cursor: default;
font-size: 0.82rem;
color: var(--color-gris);
}
.mapa-sugerencias li.mapa-sugerencias-aviso:hover {
background: none;
}
/* ---------- Tablet: la barra se ordena en 2 filas ---------- */
@media (max-width: 900px) {
.mapa-ruta-clic {
order: 3;
margin-left: 0;
}
.mapa-ruta-ampliar {
margin-left: auto;
}
}
/* ---------- Celular: botones grandes y a lo ancho, mapa más bajo ---------- */
@media (max-width: 600px) {
.mapa-ruta-barra {
display: grid;
grid-template-columns: 1fr 1fr;
}
.mapa-ruta-barra .boton {
width: 100%;
min-height: 2.5rem;
white-space: normal;
line-height: 1.15;
}
.mapa-ruta-clic {
grid-column: 1 / -1;
justify-content: center;
padding: 0.375rem 0;
font-size: 0.85rem;
}
.mapa-ruta-ampliar {
grid-column: 1 / -1;
margin-left: 0;
}
/* Botones A / B más fáciles de tocar */
.mapa-ruta-lado b {
width: 1.875rem;
height: 1.875rem;
font-size: 0.85rem;
}
.mapa-ruta-mapa {
height: 15rem;
}
.mapa-ruta-grande .mapa-ruta-mapa {
height: 65vh;
}
.mapa-ruta-estado {
font-size: 0.82rem;
line-height: 1.5;
}
.mapa-sugerencias {
max-height: 50vh;
}
.mapa-sugerencias li {
padding: 0.625rem 0.75rem; /* más espacio para el dedo */
}
}
/* ==================================================
RESUMEN POR ESTADO (cuadros con un número; al presionar uno se filtra)