/* * Gestor Comercial — estructura de pantalla. * Lineamiento Gráfico §5 y §6. * * Acá está el armazón completo: barra superior con selector de local, * navegación lateral de 248 px colapsable a 64, navegación inferior móvil, * grilla de contenido y pantalla de ingreso. * * La lista de destinos NO se decide en esta hoja. La arma `App\Http\Navigation` * con los que existen de verdad y el usuario tiene permiso de ver: una barra * con cinco íconos que no llevan a ninguna parte es una promesa vacía. Cada * paso del plan suma el suyo. */ /* Enlace de salto: primer elemento tabulable de la página, invisible hasta que * recibe el foco. Sin él, quien navega con teclado atraviesa toda la * navegación en cada pantalla. */ .skip-link { position: absolute; left: -9999px; top: var(--sp-2); z-index: var(--z-toast); padding: var(--sp-2) var(--sp-4); background-color: var(--n-900); color: var(--n-000); border-radius: var(--r-md); text-decoration: none; } .skip-link:focus { left: var(--sp-4); } /* ── Barra superior (Lineamiento §6.1) ──────────────────────────────────── */ /* * El Lineamiento §6.1 fija tres zonas: logo a la izquierda, buscador global al * centro, y a la derecha el selector de local y el menú de usuario. * * El buscador global todavía no existe —no hay búsqueda transversal de * producto, presupuesto y cliente en esta versión—. Durante un tiempo eso se * resolvió agrupando los tres elementos a la izquierda, para que no quedara un * hueco en el medio. Fue un error de criterio: en un monitor ancho la barra * quedaba con todo apretado en el vértice superior izquierdo y mil píxeles de * blanco a la derecha, que es exactamente lo contrario de lo que se buscaba. * * El selector de local y el menú de usuario vuelven a su lugar, el de la * derecha. El hueco del centro es el del buscador y se nota que está vacío: es * preferible a mover dos veces de sitio un control que el vendedor usa en cada * venta. Cuando el buscador entre, ocupa ese lugar sin tocar nada más. */ .topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); min-height: var(--topbar-h); padding: 0 var(--sp-4); background-color: var(--n-000); border-bottom: 1px solid var(--n-200); box-shadow: var(--sh-1); } .topbar__start { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .topbar__brand { display: inline-flex; align-items: center; text-decoration: none; } .topbar__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; } /* * De acá al borde derecho van el selector de local y el menú de usuario, que es * donde el Lineamiento §6.1 los pone. El empujón se le da al bloque del logo y * no a cada control: así el grupo de la derecha queda armado igual haya o no * selector de local —un usuario con un solo local no lo ve— y el día que entre * el buscador global se mete en el hueco del medio sin mover nada. * * Solo con el menú lateral fijo: con el armazón compacto la barra mide 56 px y el orden es otro, * el que arma el bloque de más abajo. */ @media (min-width: 768px) { .topbar__start { margin-right: auto; } } /* El selector de local vive siempre a la vista: toda operación registra * Empresa→Local→Vendedor, y equivocarse de sucursal es un dato mal atribuido. */ .store-selector { display: flex; align-items: center; gap: var(--sp-2); } /* El desplegable con su propio marco: el `select` nativo dibuja una flecha del * sistema y un radio de 2 px que no son de este sistema de diseño y que * desentonaban con los campos del resto de las pantallas. Se apaga la * apariencia nativa y la flecha la pone el ícono `chevron-down` del sprite, el * mismo que usa el resto de la interfaz. El relleno derecho de 32 px es el * lugar que ocupa esa flecha: sin él, un nombre largo le pasa por encima. */ .store-selector__field { position: relative; display: inline-flex; align-items: center; } .store-selector__control { appearance: none; height: 36px; padding: 0 32px 0 var(--sp-3); border: 1px solid var(--n-300); border-radius: var(--r-md); background-color: var(--n-000); color: var(--n-900); font-family: inherit; font-size: var(--fs-label); font-weight: 600; } /* La flecha no recibe el clic: se lo lleva el `select` que tiene debajo. */ .store-selector__caret { position: absolute; right: var(--sp-2); color: var(--n-500); pointer-events: none; } /* * Chip de local para celular (Lineamiento §6.1): en la barra de 56 px no entra * un desplegable con su botón de confirmar, y bajarlo a un renglón propio le * comía a la pantalla el alto de una fila entera. El chip muestra dónde estás * parado y abre la hoja inferior donde se cambia de local. */ .store-chip { position: relative; display: none; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--n-300); border-radius: var(--r-pill); background-color: var(--n-000); color: var(--n-900); font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; line-height: 1; cursor: pointer; max-width: 100%; } .store-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El área táctil real es de 48 px de alto aunque el chip mida 32 (Lineamiento * §10): se agranda con un pseudoelemento para no engordar la barra. */ .store-chip::after { content: ""; position: absolute; inset: -8px; } /* Opciones de la hoja inferior de locales. */ .store-sheet__list { display: flex; flex-direction: column; gap: var(--sp-2); } .store-sheet__option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--n-300); border-radius: var(--r-md); background-color: var(--n-000); color: var(--n-900); font-family: var(--font-ui); font-size: var(--fs-body); text-align: left; cursor: pointer; } .store-sheet__option[aria-current="true"] { border-width: var(--bw-2); border-color: var(--n-900); } .store-sheet__code { font-weight: 600; } .store-sheet__current { margin-left: auto; color: var(--ok); } .topbar__toggle { flex: none; } /* ── Menú de usuario ────────────────────────────────────────────────────── */ /* * `details` en lugar de un desplegable a mano: abre con Enter, cierra con * Escape y no depende de que el script haya cargado. El triángulo nativo se * saca, porque el ícono ya dice qué es. */ .user-menu { position: relative; } .user-menu__trigger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); color: var(--n-700); cursor: pointer; list-style: none; } .user-menu__trigger::-webkit-details-marker { display: none; } .user-menu__trigger:hover { background-color: var(--n-100); } .user-menu__panel { position: absolute; top: calc(100% + var(--sp-1)); right: 0; z-index: var(--z-topbar); min-width: 220px; padding: var(--sp-3); background-color: var(--n-000); border: 1px solid var(--n-200); border-radius: var(--r-md); box-shadow: var(--sh-2); } .user-menu__name { margin: 0 0 var(--sp-2); font-size: var(--fs-label); font-weight: 600; color: var(--n-900); } .user-menu__item { padding-left: 0; padding-right: 0; } /* Debajo del punto de quiebre la navegación vive en la barra inferior, así que * el botón de contraer la lateral no tiene nada que contraer. Y la barra pasa a * dos renglones: arriba el monograma y el menú de usuario; abajo el selector de * local a ancho completo. Meter los tres en una línea obligaba a recortar el * nombre del local y el del usuario, y el local es justamente lo que hay que * poder leer entero antes de cargar un presupuesto. */ @media (max-width: 767.98px) { /* * La barra superior del celular mide 56 px y no crece: el selector de local * entra como chip, no como renglón propio. El chip dice el local en el que * estás —que es lo que hay que poder leer de un vistazo antes de cargar un * presupuesto— y el cambio se hace en la hoja inferior, donde cada local es * un objetivo táctil de 48 px con su nombre completo. */ .topbar { flex-wrap: nowrap; gap: var(--sp-2); padding: 0 var(--sp-3) 0 0; } .topbar__toggle { display: none; } /* Área de seguridad del logotipo (Lineamiento §2.2): el monograma nunca * queda pegado a lo que tiene al lado. */ .topbar__start { flex: none; padding: var(--sp-3) var(--sp-4); } .topbar__actions { flex: none; margin-left: auto; padding: 0; } /* El desplegable y su botón de confirmar son la versión de escritorio. */ .store-selector { display: none; } .store-chip { display: inline-flex; min-width: 0; flex: 0 1 auto; } } /* ── Armazón: lateral + contenido (Lineamiento §6.1) ────────────────────── */ .app-shell { display: flex; align-items: flex-start; } /* * Navegación lateral de 248 px, pegada bajo la barra superior y con scroll * propio: la lista de secciones no se pierde al bajar en una tabla larga. */ .sidenav { position: sticky; top: var(--topbar-h); flex: none; width: var(--sidenav-w); height: calc(100vh - var(--topbar-h)); overflow-y: auto; /* El relleno de abajo es más grande que el de arriba a propósito: con los * cinco grupos de administración la lista supera el alto de la ventana en * una notebook, y sin ese respiro el último destino queda pegado al filo * inferior y no se ve que la lista terminó. */ padding: var(--sp-2) 0 var(--sp-6); /* El encabezado de grupo se pega arriba al desplazar (abajo); esto evita * que el destino al que se salta con el teclado quede tapado por él. */ scroll-padding-top: var(--sp-6); background-color: var(--n-100); border-right: 1px solid var(--n-200); transition: width .12s ease; } .sidenav__list { list-style: none; margin: 0; padding: 0; } /* * Encabezado de un grupo de la navegación lateral (Comercial, Catálogo, * Precios, Equipo, Sistema). * * Es un Overline (Lineamiento §4) con una línea arriba: la línea es la que * hace el corte, el texto solo lo nombra. Va en --n-500 y no en tinta plena * porque no es un destino —no se puede apretar— y tiene que leerse como * rótulo, no como un ítem más de la lista. * * Desde la Etapa 3 queda pegado al borde de arriba mientras se desplaza la * lista. Con veintiún destinos el administrador baja hasta «Sistema» y, sin * esto, al llegar ya no sabe en qué grupo está parado: el encabezado se fue * para arriba cuatro renglones antes. El fondo opaco es obligatorio —si no, * los destinos se leen por debajo del rótulo— y por eso repite el de la barra. */ .sidenav__heading { position: sticky; top: 0; z-index: 1; margin: var(--sp-4) 0 var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-2); background-color: var(--n-100); border-top: 1px solid var(--n-200); color: var(--n-500); } /* El primer grupo con título no necesita el espacio de separación arriba * cuando es el primero de toda la barra (un usuario sin bloque principal). */ .sidenav > .sidenav__heading:first-child { margin-top: 0; border-top: 0; } /* Colapsada a 64 px no entra ninguna palabra: queda la línea, que es lo que * separaba de verdad. */ body.sidenav-collapsed .sidenav__heading { height: 0; margin: var(--sp-3) 0; padding: 0; overflow: hidden; text-indent: -9999px; } /* * 44 px y no 40: la barra lateral se usa con el dedo en la tablet del salón, y * 44 × 44 es el área táctil mínima del Lineamiento §10. Es `min-height` y no * `height` para que un rótulo que algún día se parta en dos renglones empuje la * fila en vez de desbordarla. */ .sidenav__link { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-4); /* La barra de 3 px del ítem activo se reserva desde el principio: si * apareciera recién al activarse, el texto se correría. */ border-left: var(--bw-3) solid transparent; color: var(--n-700); text-decoration: none; font-size: var(--fs-body); white-space: nowrap; transition: background-color .12s ease, color .12s ease; } /* El ícono acompaña al texto en el degradé de jerarquía: apagado cuando el * destino no es el actual, en tinta plena cuando lo es. */ .sidenav__link .icon { flex: none; color: var(--n-400); } /* «Estados de presupuesto» es el destino de nombre más largo y roza el ancho * de la barra: si algún día lo pasa, se corta con puntos suspensivos dentro de * su renglón en lugar de desbordarse sobre el contenido. El nombre entero sigue * en el `title`. */ .sidenav__label { overflow: hidden; text-overflow: ellipsis; } .sidenav__link:hover { background-color: var(--n-000); color: var(--n-900); } .sidenav__link:hover .icon { color: var(--n-700); } /* * Ítem activo: barra amarilla al borde izquierdo, fondo blanco y peso 600. El * amarillo acá es indicador y no fondo, que es la única forma en que puede * aparecer sobre claro sin problemas de contraste (Lineamiento §6.1). */ .sidenav__link[aria-current="page"] { background-color: var(--n-000); border-left-color: var(--brand-yellow); color: var(--n-900); font-weight: 600; } /* Tres señales a la vez —barra, fondo y peso— y ninguna es el color sola. La * cuarta es el ícono en tinta plena, que es lo que hace que la sección activa * se encuentre de un vistazo en una lista de veintiún renglones. */ .sidenav__link[aria-current="page"] .icon { color: var(--n-900); } /* Colapsada a 64 px: quedan los íconos. El nombre de cada destino sigue * disponible en el `title` y para el lector de pantalla, así que nadie pierde * información al colapsar. */ body.sidenav-collapsed .sidenav { width: var(--sidenav-w-collapsed); } body.sidenav-collapsed .sidenav__label { display: none; } body.sidenav-collapsed .sidenav__link { justify-content: center; padding: 0 var(--sp-2); } @media (max-width: 767.98px) { .sidenav { display: none; } } /* ── Contenido ──────────────────────────────────────────────────────────── */ .app-main { flex: 1; min-width: 0; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-7); } /* En móvil el contenido termina por encima de la barra inferior, incluida el * área segura del dispositivo. */ @media (max-width: 767.98px) { .app-main { padding-bottom: calc(var(--bottomnav-h) + var(--sp-7) + env(safe-area-inset-bottom, 0px)); } } /* * Encabezado de pantalla. * * Hasta la Etapa 2 era solo un margen: el `

` quedaba suelto encima de la * primera tarjeta y, como las tarjetas tienen su propio `

` en negrita, a * dos metros de distancia los dos se leían igual. La línea no es decoración: * separa «qué pantalla es esta» de «qué hay en esta pantalla», que es la * jerarquía que el cliente pidió mejorar en la Etapa 3. * * Es un filete de 1 px en --n-200, el mismo que separa superficies en todo el * sistema (Lineamiento §5: bordes antes que sombras). */ .page-header { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--n-200); } /* * La bajada que explica la pantalla se corta a 72 caracteres por renglón. * * En un monitor ancho el párrafo corría los 1440 px del contenido y pasaba los * 150 caracteres por línea: al llegar al final del renglón el ojo pierde de * vista dónde empieza el siguiente y hay que releer. La medida legible está * entre 45 y 75 caracteres y es la misma para todas las pantallas, así que la * regla vive acá, junto al contenedor, y no repetida en cada vista. */ .page-header > .caption, .page-header__lead > .caption { max-width: 72ch; } /* * Encabezado con la acción principal a la derecha del título. * * Es un modificador y no el comportamiento por omisión porque la mayoría de las * pantallas tienen encabezado sin acción, y ahí el título y su bajada tienen que * seguir apilados. * * En celular la acción baja debajo del título y ocupa el ancho completo: es la * que se toca todos los días y el pulgar la alcanza sin apuntar (Lineamiento * §10, 44 × 44 px de área táctil). */ .page-header--split { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); } .page-header__lead { flex: 1 1 320px; min-width: 0; } .page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } /* * La acción sujeta a permiso viene envuelta en `.permission-action`, que además * del botón lleva el motivo cuando está apagado. Se declara como caja para que * el motivo caiga debajo del botón y no al lado. */ .page-header__actions .permission-action { display: flex; flex-wrap: wrap; align-items: center; } @media (max-width: 767.98px) { .page-header__actions, .page-header__actions .permission-action, .page-header__actions .button { width: 100%; } } .stack > * + * { margin-top: var(--sp-4); } .grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 768px) { .grid { gap: var(--gutter); } .grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* * Tres columnas recién en escritorio, y no junto con las dos. * * Arrancaban las dos a la vez, en 768 px. A ese ancho el menú lateral fijo ya * ocupa 248 px, así que el área de contenido mide 520 px y cada una de las tres * columnas quedaba en 157 px: una tarjeta donde no entra un importe de siete * cifras al lado de su rótulo. A 1024 px el contenido mide 776 px y cada * columna 243 px, que es el ancho para el que están dibujadas las tarjetas. */ @media (min-width: 1024px) { .grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── Navegación inferior móvil (Lineamiento §6.2) ───────────────────────── */ /* * Los destinos son los mismos que los de la lateral, y salen del mismo lugar. * Cuando el catálogo, los presupuestos, los clientes y el asistente existan, * serán los cinco que fija la Especificación §5 sin tocar esta hoja. * * El alto declarado es 56 px, pero cada destino ocupa 48 px de alto táctil real * y al menos 48 de ancho, que es el mínimo del Lineamiento §10. */ .bottomnav { position: fixed; inset: auto 0 0 0; z-index: var(--z-bottomnav); display: flex; justify-content: space-around; min-height: var(--bottomnav-h); padding-bottom: env(safe-area-inset-bottom, 0px); background-color: var(--n-000); border-top: 1px solid var(--n-200); } .bottomnav__link { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 48px; min-height: 48px; padding: var(--sp-1) 0; color: var(--n-500); text-decoration: none; /* Única receta que usa el cuerpo de 11 px, y por eso tiene su propio token * (`--fs-nav-label`, tokens.css). En un teléfono de 390 px cada uno de los * cinco destinos dispone de 78 px: «Presupuestos» no entra en 12 px y la * alternativa —abreviar el rótulo— deja al vendedor adivinando a dónde va. */ font-size: var(--fs-nav-label); line-height: var(--lh-nav-label); font-weight: 600; } /* * «Más» es un `