/* ============================================================================
PORTAL — lo que solo usan las pantallas del cliente
Midpoint Solutions HUB
El portal del cliente y el panel interno comparten el esqueleto: el mismo
menú de hamburguesa, la misma estructura de dos columnas, las mismas reglas
de celular. Eso vive en panel.css, y panel.css ya trae base.css adentro.
Aquí va únicamente lo que es propio del portal: las dos cajas grandes de
arriba, las tarjetas de acción y las fichas de pedido. Nada de esto lo
necesita el panel interno, así que no tiene por qué cargarlo.
CÓMO SE USA
============================================================================ */
/* --------------------------------------------------------------------------
LA COLUMNA VA CENTRADA
El esqueleto lo pone panel.css: menú a la izquierda, contenido a la derecha
ocupando lo que sobra. En el panel interno eso está bien —son tablas anchas
que aprovechan cada píxel— pero en el portal, donde el contenido es angosto,
dejaba todo pegado al menú con media pantalla vacía a la derecha. Se veía
descuidado, como si faltara algo de ese lado.
Márgenes automáticos: la columna se centra en el espacio que le toca. En
celular no cambia nada, porque ahí ya ocupaba todo el ancho.
-------------------------------------------------------------------------- */
.contenido { margin-left: auto; margin-right: auto; }
/* AL REPLEGAR EL MENÚ, EL CONTENIDO SE DESCENTRABA
`panel.css` le mete 76px de relleno del lado IZQUIERDO cuando el menú se
repliega, para que el botón flotante que lo trae de vuelta no se encime con
el contenido. En el panel interno eso está bien —ahí el contenido ocupa todo
el ancho— pero aquí, con la columna centrada, ese relleno de un solo lado la
empuja 44px a la derecha. Se ve chueca, y es exactamente lo que se sentía
"desproporcional" al colapsar.
La corrección tiene dos casos, y los dos dejan el relleno SIMÉTRICO:
· Pantalla ancha (1140px o más): la columna centrada ni se acerca al botón
—queda a más de 100px— así que no hace falta hacerle lugar.
· Pantalla más angosta: la columna sí llega hasta allá, así que se le hace
lugar de los DOS lados. Se pierde un poco de ancho, pero sigue centrada.
1140 no es un número al azar: es el ancho de la columna (940) más 100px de
aire de cada lado, que es lo que el botón necesita para no estorbar. */
@media (min-width: 861px) {
.layout.sin-menu .contenido { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 861px) and (max-width: 1139px) {
.layout.sin-menu .contenido { padding-left: 76px; padding-right: 76px; }
}
h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
.subtitle { color: #6f6f6f; font-size: 0.95rem; margin-bottom: 28px; line-height: 1.5; }
.footer-note { margin-top: 34px; font-size: 0.78rem; color: #a3a3a3; line-height: 1.55; }
.banner-exito {
background: #eef8ee;
border: 1.5px solid #b8e0b8;
color: #2b6b2b;
border-radius: 8px;
padding: 12px 16px;
font-size: 0.85rem;
margin-bottom: 20px;
}
/* --------------------------------------------------------------------------
LAS CAJAS GRANDES — bandas horizontales, una debajo de otra
POR QUÉ NO SON TRES COLUMNAS
Lo eran, y se veían bien… mientras el ancho no cambiara. Al replegar el menú
el contenido gana 236px de golpe, y las tres cajas pasaban de 281px a 408px
cada una: las mismas palabras en cajas mucho más grandes, con huecos donde
antes no había. Se sentía como si la pantalla se hubiera desarmado.
El problema de fondo es que una rejilla de tres columnas reparte el ancho
sobrante entre las tres, así que CUALQUIER cambio de ancho las deforma a las
tres a la vez. Una banda horizontal, en cambio, siempre ocupa todo el ancho
que haya: lo único que cambia es cuánto respira el texto adentro. Se ve igual
de ordenada a 900 que a 1600, con el menú abierto o cerrado.
Y de paso se leen mejor: puestas una debajo de otra, el ojo baja en línea
recta en vez de barrer de izquierda a derecha buscando dónde sigue.
La estructura de cada banda:
[ etiqueta + número ] [ la línea y su nota ] [ flecha ]
-------------------------------------------------------------------------- */
.cajas {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 30px;
}
.caja {
position: relative;
display: flex;
align-items: center;
gap: 26px;
text-decoration: none;
color: inherit;
background: #ffffff;
border: 1.5px solid #e5e5e5;
border-radius: 12px;
padding: 20px 24px;
transition: border-color 0.15s ease, transform 0.12s ease;
}
.caja:hover { border-color: #111111; }
.caja:active { transform: scale(0.997); }
.caja:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
/* La columna de la izquierda no se estira ni se encoge: le da a las tres
bandas el mismo punto de arranque, y eso es lo que las hace ver alineadas
aunque cada una diga algo distinto. */
.caja-marca {
flex: 0 0 auto;
width: 230px;
min-width: 0;
}
.caja-titulo {
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: #8a8a8a;
margin-bottom: 5px;
}
.caja-numero { font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.caja-cuerpo { flex: 1 1 auto; min-width: 0; }
.caja-linea { font-size: 0.9rem; color: #333333; line-height: 1.5; }
.caja-pie { font-size: 0.76rem; color: #a3a3a3; margin-top: 4px; line-height: 1.45; }
.caja-flecha { flex: 0 0 auto; color: #c4c4c4; font-size: 1.1rem; }
.caja:hover .caja-flecha { color: #111111; }
/* La caja de comprar pesa más que las otras dos, y a propósito: es la única de
las tres que hace avanzar algo. Las otras dos son de consulta. */
.caja-fuerte { border-color: #111111; }
.caja-fuerte .caja-titulo,
.caja-fuerte .caja-flecha { color: #111111; }
.caja-fuerte:hover { background: #fafafa; }
/* En pantallas medianas la columna fija de 230px se come demasiado. */
@media (max-width: 1000px) {
.caja-marca { width: 190px; }
.caja { gap: 18px; }
}
/* CELULAR — la banda se apila, pero sigue siendo una sola pieza.
La flecha se va a la esquina de arriba: en el flujo se quedaba sola hasta
abajo, lejos del texto, y parecía otro elemento. Arriba, junto al rótulo,
se lee como lo que es — "esto se abre". */
@media (max-width: 700px) {
.caja {
flex-wrap: wrap;
gap: 4px;
padding: 18px 20px;
}
.caja-marca, .caja-cuerpo { flex: 1 1 100%; width: auto; }
.caja-cuerpo { margin-top: 8px; }
.caja-flecha { position: absolute; top: 17px; right: 20px; }
.caja-titulo { padding-right: 26px; }
.caja-numero { font-size: 1.35rem; }
}
/* --------------------------------------------------------------------------
TARJETAS DE ACCIÓN
-------------------------------------------------------------------------- */
.acciones {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 16px;
align-items: start;
}
.tarjeta {
background: #ffffff;
border: 1.5px solid #e5e5e5;
border-radius: 12px;
padding: 20px 22px;
}
.tarjeta-titulo { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.tarjeta-desc { font-size: 0.85rem; color: #8a8a8a; margin-bottom: 16px; line-height: 1.5; }
.chat-preview {
background: #f4f4f4;
border-radius: 8px;
padding: 12px 14px;
font-size: 0.82rem;
color: #555555;
line-height: 1.5;
margin-bottom: 16px;
}
.btn {
display: block;
text-decoration: none;
border-radius: 4px;
padding: 12px 16px;
text-align: center;
font-weight: 700;
font-size: 0.86rem;
border: 1.5px solid transparent;
font-family: inherit;
cursor: pointer;
}
.btn-primary { background: #111111; color: #ffffff; }
.btn-primary:hover { opacity: 0.85; }
.btn-secondary { background: #ffffff; color: #111111; border-color: #111111; }
.btn-secondary:hover { background: #f4f4f4; }
/* --------------------------------------------------------------------------
FICHAS DE PEDIDO Y DE COTIZACIÓN — las listas completas
-------------------------------------------------------------------------- */
.lista { display: flex; flex-direction: column; gap: 14px; }
.ficha {
display: block;
background: #ffffff;
border: 1.5px solid #e5e5e5;
border-radius: 12px;
padding: 20px 22px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease;
}
.ficha:hover { border-color: #111111; }
.ficha:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
.ficha-top {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.ficha-fecha { font-size: 0.95rem; font-weight: 700; }
.ficha-detalle { font-size: 0.85rem; color: #555555; margin-bottom: 4px; line-height: 1.5; }
.ficha-total { font-size: 0.85rem; color: #333333; font-weight: 600; margin-bottom: 4px; }
.ficha-nota { font-size: 0.72rem; color: #a3a3a3; margin-bottom: 12px; line-height: 1.5; }
/* El renglón de "ver desglose completo →" no es un enlace suelto: la ficha
entera lo es. Pero es lo que le dice a la persona que la ficha se abre, así
que se trata igual de fuerte que un enlace. */
.ficha-ver {
font-size: 0.82rem; font-weight: 700; color: #333333;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
text-decoration-color: #c8c8c8;
}
.ficha:hover .ficha-ver { color: #111111; text-decoration-color: #111111; }
/* El estado, siempre con su palabra escrita. El color acompaña, nunca informa
solo: quien no distingue tonos —o quien imprime esto— tiene que poder leer
en qué va su pedido igual que todos. */
.badge {
display: inline-block;
font-size: 0.72rem; font-weight: 700;
padding: 4px 10px; border-radius: 20px;
white-space: nowrap;
}
.badge-rojo { background: #fdeeee; color: #9b2c2c; border: 1.5px solid #f5c6c6; }
.badge-gris { background: #f4f4f4; color: #6f6f6f; border: 1.5px solid #e5e5e5; }
.badge-amarillo { background: #fff8e6; color: #6b5a20; border: 1.5px solid #f0dca0; }
.badge-azul { background: #eaf1fb; color: #1f4e8c; border: 1.5px solid #b8d4f0; }
.badge-negro { background: #111111; color: #ffffff; border: 1.5px solid #111111; }
.badge-verde { background: #eef8ee; color: #2b6b2b; border: 1.5px solid #b8e0b8; }
.mini-mapa {
position: relative;
background: #eef0f2;
border-radius: 8px;
height: 140px;
margin-bottom: 14px;
overflow: hidden;
}
.mini-mapa svg { width: 100%; height: 100%; }
.mapa-badge {
position: absolute; top: 10px; left: 10px;
background: #ffffff; border-radius: 20px;
padding: 4px 10px;
font-size: 0.7rem; font-weight: 700; color: #6f6f6f;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* --------------------------------------------------------------------------
CUANDO NO HAY NADA QUE ENSEÑAR
Una lista vacía no puede quedarse en blanco: se ve como si la pantalla se
hubiera roto. Dice qué falta y ofrece el siguiente paso.
-------------------------------------------------------------------------- */
.vacio {
border: 1.5px dashed #d8d8d8;
border-radius: 12px;
padding: 34px 24px;
text-align: center;
color: #6f6f6f;
}
.vacio-titulo { font-size: 1rem; font-weight: 700; color: #111111; margin-bottom: 6px; }
.vacio-texto { font-size: 0.88rem; line-height: 1.55; margin-bottom: 18px; }
.vacio .btn { display: inline-block; padding: 12px 24px; }
/* --------------------------------------------------------------------------
EL ENLACE DE VOLVER
Vive arriba a la izquierda, antes del título. Se marca con
data-volver="fijo" cuando nombra su destino ("Volver a mi portal"), para que
vaya AHÍ y no a "la pantalla anterior" — que casi nunca es la misma cosa.
-------------------------------------------------------------------------- */
.volver {
display: inline-block;
margin-bottom: 16px;
padding: 6px 2px;
/* El tamaño, el peso, el color y el subrayado los pone el bloque 4c de
base.css, que es el mismo para todos los enlaces de navegación del HUB. */
}