/* ═══════════════════════════════════════════════════════════════ Constru Mango — Panel de escritorio Paleta tomada del logo: navy profundo + naranja mango, sobre blanco. Los colores de MARCA viven acá arriba; los funcionales (éxito/error/aviso) se dejan como estaban a propósito: significan lo mismo en cualquier marca. ═══════════════════════════════════════════════════════════════ */ :root { --bg-primary: #E9EEF6; --bg-secondary: #DCE4F0; --bg-sidebar: #1B2A3C; /* navy del logo */ --bg-sidebar-2: #24374E; --bg-card: #FFFFFF; --bg-card-hover: #F5F8FF; --bg-input: #F8FAFC; --bg-stripe: rgba(15,45,80,.035); --primary: #E8822B; /* NARANJA MANGO = acción principal */ --primary-light: #F59B45; --primary-dark: #C96A16; --primary-subtle:rgba(232,130,43,.12); --steel: #1D5B9E; /* azul acero = info/secundario */ --steel-light: #2C77C4; --steel-subtle: rgba(29,91,158,.1); --text-primary: #0F1E30; --text-secondary:#33465C; --text-muted: #6B7C90; --text-on-dark: #E7EEF7; --border: rgba(120,140,165,.24); --border-med: rgba(120,140,165,.42); --success: #0E8A5F; --success-bg: rgba(14,138,95,.1); --error: #D33A2C; --error-bg: rgba(211,58,44,.1); --warning: #C9781A; --warning-bg: rgba(201,120,26,.12); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --sidebar-width: 240px; --topbar-height: 58px; --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(15,30,48,.12), 0 2px 6px rgba(15,30,48,.08); --shadow-lg: 0 12px 40px rgba(15,30,48,.16); --transition: .16s cubic-bezier(.4,0,.2,1); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--steel); text-decoration: none; } button { font-family: inherit; } img, svg { display: block; max-width: 100%; } /* ── Topbar ── */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height); background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(15,30,48,.07); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 100; gap: 16px; } .topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; } .topbar__logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: #fff; font-weight: 900; } /* El logo va como imagen, no como letra: la marca es el mango, no una inicial. */ .topbar__logo-img { width: 30px; height: 30px; flex: none; object-fit: contain; } .topbar__mid { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: center; flex-wrap: wrap; } .topbar__right { display: flex; align-items: center; gap: 12px; } .topbar__user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .topbar__user b { font-size: 13px; } .topbar__user span { font-size: 11px; color: var(--text-muted); } /* selector de sucursal en la topbar */ .suc-select { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-med); border-radius: var(--radius-sm); padding: 6px 10px; } .suc-select select { border: none; background: transparent; font-weight: 600; font-size: 13px; color: var(--text-primary); cursor: pointer; } .tasas-chips { display: flex; gap: 6px; flex-wrap: wrap; } .tasa-chip { font-size: 11.5px; background: var(--steel-subtle); color: var(--steel); border-radius: 999px; padding: 3px 9px; font-weight: 600; } .tasa-chip b { color: var(--text-primary); } /* ── Sidebar ── */ .sidebar { position: fixed; top: var(--topbar-height); left: 0; bottom: 0; width: var(--sidebar-width); background: var(--bg-sidebar); padding: 12px 10px 24px; overflow-y: auto; z-index: 90; display: flex; flex-direction: column; gap: 2px; } .sidebar__label { font-size: 10px; font-weight: 700; color: rgba(180,196,216,.5); text-transform: uppercase; letter-spacing: .1em; padding: 14px 12px 5px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: rgba(210,222,238,.82); font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; transition: var(--transition); } .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; } .nav-item.is-active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(232,114,12,.35); } .nav-item__icon { font-size: 17px; width: 20px; text-align: center; } /* ── Main ── */ .main { margin-top: var(--topbar-height); margin-left: var(--sidebar-width); padding: 26px 30px; min-height: calc(100vh - var(--topbar-height)); overflow-x: hidden; } .section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .section-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .section-sub { color: var(--text-muted); font-size: 13px; margin-top: 3px; max-width: 720px; } .section-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Cards ── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px; } .card + .card { margin-top: 16px; } .card__title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* Sin esto una columna de grid no puede encogerse por debajo de su contenido: la tarjeta entera se desborda y (.main tiene overflow-x hidden) se CORTA. */ .grid > * { min-width: 0; } /* KPI */ .kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); } .kpi__label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .kpi__value { font-size: 26px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em; } .kpi__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* ── Tables ── */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; background: #fff; } th, td { text-align: left; padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--border); } th { background: #F3F6FB; font-weight: 700; color: var(--text-secondary); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } tbody tr:nth-child(even) { background: var(--bg-stripe); } tbody tr:hover { background: var(--bg-card-hover); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Comandas: resaltar las POR COBRAR (recién llegadas) y atenuar las ya procesadas */ tbody tr.com-pendiente { background: var(--warning-bg); } tbody tr.com-pendiente:hover { background: var(--warning-bg); } tbody tr.com-pendiente td:first-child { box-shadow: inset 3px 0 0 var(--warning); } tbody tr.com-lista { opacity: .55; } /* ── Buttons ── */ .btn { padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: #fff; box-shadow: 0 2px 8px rgba(232,114,12,.3); } .btn-primary:hover:not(:disabled) { filter: brightness(1.05); } .btn-steel { background: linear-gradient(135deg, var(--steel-light), var(--steel)); color: #fff; } .btn-ghost { background: #fff; border-color: var(--border-med); color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-card-hover); } .btn-danger { background: var(--error); color: #fff; } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn-block { width: 100%; justify-content: center; } .btn-lg { padding: 13px 20px; font-size: 15px; } /* ── Forms ── */ .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .field > label, .label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .input, select.input, textarea.input { width: 100%; padding: 9px 11px; border: 1px solid var(--border-med); border-radius: var(--radius-sm); background: var(--bg-input); font-size: 14px; font-family: inherit; color: var(--text-primary); transition: var(--transition); } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-subtle); background: #fff; } /* Campo que falta llenar y bloquea la acción. Se usa en el POS para el selector de cuenta del pago: arranca vacío a propósito para que el cajero diga a dónde entró la plata (antes venía en "Efectivo Bs" y un cobro por punto quedaba grabado como efectivo, descuadrando la gaveta). */ .input-error, select.input-error { border-color: var(--error); background: var(--error-bg); } .form-row { display: flex; gap: 12px; flex-wrap: wrap; } .form-row > * { flex: 1; min-width: 140px; } /* ── Badges / estados ── */ .badge { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; display: inline-block; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-error { background: var(--error-bg); color: var(--error); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-steel { background: var(--steel-subtle); color: var(--steel); } .text-muted { color: var(--text-muted); } .text-success { color: var(--success); } .text-error { color: var(--error); } .text-warning { color: var(--warning); } .text-right { text-align: right; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } /* ── Callout ── */ .callout { border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; border: 1px solid var(--border); background: var(--steel-subtle); color: var(--text-secondary); } .callout-warn { background: var(--warning-bg); border-color: rgba(201,120,26,.3); } /* ── Estados de carga/vacío ── */ .loading, .empty { padding: 30px; text-align: center; color: var(--text-muted); font-size: 14px; } .spinner { width: 26px; height: 26px; border: 3px solid var(--border-med); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 10px; } @keyframes spin { to { transform: rotate(360deg); } } /* ═══ POS de escritorio (dos paneles) ═══ */ .pos { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; } .pos__catalog { } .pos__search { margin-bottom: 14px; } /* Catálogo como BARRAS (una fila por producto) — ahorra espacio vs. cuadros */ .pos__list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 230px); overflow-y: auto; padding: 2px; } .prod-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; cursor: pointer; transition: var(--transition); text-align: left; } .prod-bar:not(.is-disabled):hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .prod-bar.is-disabled { opacity: .55; cursor: not-allowed; } .prod-bar.is-nostock { box-shadow: inset 0 0 0 2px rgba(230,162,0,.5); } .prod-bar__info { flex: 1; min-width: 0; } .prod-bar__name { font-weight: 600; font-size: 13.5px; line-height: 1.25; } .prod-bar__meta { font-size: 11.5px; color: var(--text-muted); } .prod-bar__price { flex-shrink: 0; text-align: right; font-weight: 800; font-size: 15px; color: var(--primary-dark); } .prod-bar__price small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-muted); } .cart { position: sticky; top: calc(var(--topbar-height) + 18px); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; max-height: calc(100vh - 96px); } .cart__head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; align-items: center; } .cart__items { overflow-y: auto; padding: 8px 12px; flex: 1; min-height: 80px; } .cart-line { border-bottom: 1px dashed var(--border); padding: 10px 0; } .cart-line__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .cart-line__name { font-weight: 600; font-size: 13.5px; } .cart-line__controls { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; } .cart-line__controls .input { padding: 5px 8px; font-size: 12.5px; } .qty-input { width: 66px; } .cart__foot { border-top: 1px solid var(--border); padding: 14px 16px; } .totline { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; } .totline--big { font-size: 19px; font-weight: 800; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; } /* ── POS 2×2 (estilo Plastic City): 4 cuadrantes en una sola vista ── Productos · Carrito / Cliente · Total. Cada celda tiene su propio scroll interno para que el cajero NO haga scroll de toda la pantalla al facturar. */ .pos2 { display: grid; grid-template-columns: 1.12fr 1fr; /* Altura FIJA y filas de PROPORCIÓN FIJA (una sola vista). Los 4 cuadrantes nunca cambian de tamaño: lo que se expande adentro (flete, por retirar, muchos productos) SCROLLEA DENTRO de su cuadrante, sin tocar los demás. La fila de abajo es un poco más alta para que Cobrar entre sin scroll normal. */ grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; height: calc(100vh - var(--topbar-height) - 132px); } .pos2__cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .pos2__head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; } .pos2__title { font-weight: 700; font-size: 13.5px; white-space: nowrap; } .pos2__head .pos__search { flex: 1; min-width: 150px; } .pos2__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; } .pos2__tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } /* Cuadrantes de abajo: contenido compacto (para que Cobrar entre sin scroll en el estado normal) y, si se expande (flete, por retirar), SCROLLEA DENTRO del propio cuadrante — nunca cambia el tamaño de los otros. */ .pos2__cell--datos .pos2__scroll, .pos2__cell--pago .pos2__scroll { padding: 9px 14px 12px; } .pos2__cell--datos .callout { margin: 4px 0 6px !important; padding: 8px 10px !important; } .pos2__cell--datos .callout .form-row { margin-bottom: 5px !important; } .pos2__cell--pago .totline { padding: 2px 0; font-size: 13px; } .pos2__cell--pago .totline--big { font-size: 17px; padding-top: 6px; margin-top: 4px; } .pos2__cell--pago .label { margin-top: 6px !important; } .pos2__cell--pago .pay-row { margin-bottom: 5px; } .pos2__cell--pago .btn-lg { font-size: 14px; padding: 9px 14px; margin-top: 8px !important; } /* En pantallas chicas o teléfono, se apilan y la página scrollea normal. ⚠ Lo que fallaba (reporte de César, 19-jul: "en el teléfono solo se ven los datos del cliente y los métodos de pago"): esta media query cambiaba las columnas pero NO soltaba el `height: calc(100vh …)` fijo de .pos2. Al pasar a 1 columna quedan 4 filas, pero solo 2 están declaradas y como `minmax(0,1fr)` pueden valer 0px: las filas 3 y 4 (cliente y pago) se dimensionan por contenido, se comen todo el alto, y a catálogo y carrito les queda CERO — con `overflow:hidden` en la celda, desaparecían enteros, cabecera y buscador incluidos. El arreglo es soltar la altura (height:auto) y dejar que la página scrollee, que es lo que ya hacía el POS viejo al apilar. */ @media (max-width: 980px) { .pos2 { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; height: auto; min-height: 0; } .pos2__cell { overflow: visible; } /* Los scrolls internos siguen acotados para que ninguna celda sea infinita, pero con min-height propio: nunca colapsan a 0. */ .pos2__cell--catalog .pos2__scroll, .pos2__cell--cart .pos2__scroll { max-height: 46vh; min-height: 140px; overflow-y: auto; } .pos2__cell--datos .pos2__scroll, .pos2__cell--pago .pos2__scroll { max-height: none; overflow: visible; } /* Orden que pidió César en el teléfono: buscar productos → carrito → total y pago → datos del cliente al final. El DOM los tiene como catálogo(1) carrito(2) cliente(3) pago(4), así que se invierten los dos últimos. `order` no cambia el orden de lectura del lector de pantalla en este caso porque el contenido de cada celda es autónomo. */ .pos2__cell--catalog { order: 1; } .pos2__cell--cart { order: 2; } .pos2__cell--pago { order: 3; } .pos2__cell--datos { order: 4; } } .pay-rows { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; } .pay-row { display: flex; gap: 6px; align-items: center; } /* la cuenta cede espacio; el monto SIEMPRE tiene ancho util para tipear */ .pay-row select.input { flex: 1 1 auto; min-width: 0; } .pay-row .pay-amount { flex: 0 0 118px; width: 118px; text-align: right; font-variant-numeric: tabular-nums; } /* Buscador con desplegable (agregar productos a una comanda) */ .search-drop { position: relative; } .search-drop__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--bg-card); border: 1px solid var(--border-med); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 340px; overflow: auto; } .search-drop__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); } .search-drop__item:last-child { border-bottom: none; } .search-drop__item:hover, .search-drop__item.is-active { background: var(--steel-subtle); } /* ── Login ── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #0B1F3A, #0E2647); padding: 20px; } .login-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px; width: 100%; max-width: 380px; } .login-card__logo { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 24px; margin: 0 auto 14px; } .login-card h1 { text-align: center; font-size: 20px; margin-bottom: 4px; } .login-card p { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 20px; } /* ── Responsive: si achican la ventana, no romper ── */ @media (max-width: 980px) { .sidebar { transform: translateX(-100%); transition: transform var(--transition); box-shadow: var(--shadow-lg); } .sidebar.is-open { transform: none; } .main { margin-left: 0; padding: 18px 16px; } .pos { grid-template-columns: 1fr; } .cart { position: static; max-height: none; } .topbar__mid { display: none; } .menu-toggle { display: inline-flex !important; } } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-secondary); line-height: 1; } .menu-toggle:hover { color: var(--text-primary); } /* Menú plegable en escritorio: el cajero puede ESCONDER todas las funciones y dejar la pantalla completa para facturar. Se recuerda por navegador (localStorage), así la caja arranca ya despejada. En teléfono no aplica (ahí el menú es un cajón que se abre con .is-open). */ .sidebar { transition: transform var(--transition); } .main { transition: margin-left var(--transition); } @media (min-width: 981px) { body.nav-collapsed .sidebar { transform: translateX(-100%); box-shadow: none; } body.nav-collapsed .main { margin-left: 0; } } /* ═══ Teléfono (≤700px): mismas pantallas, cuadros re-armados ═══ Solo aplica en pantalla angosta (media query): la computadora NO cambia. - Topbar en dos filas (marca+salir / sede+tasas deslizables). - Grids a una o dos columnas. - Tablas → tarjetas apiladas: cada fila es un cuadrito "etiqueta: valor" (panel.js pone data-label desde el encabezado de cada columna). */ @media (max-width: 700px) { :root { --topbar-height: 92px; } .topbar { flex-wrap: wrap; padding: 6px 12px; row-gap: 2px; align-content: center; } .topbar__brand { font-size: 14px; gap: 8px; } .topbar__logo, .topbar__logo-img { width: 26px; height: 26px; } .topbar__mid { display: flex; order: 3; width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topbar__mid::-webkit-scrollbar { display: none; } .tasas-chips { flex-wrap: nowrap; } .tasa-chip { white-space: nowrap; } .suc-select { flex-shrink: 0; padding: 4px 8px; } .topbar__user b { display: none; } .topbar__user span { font-size: 10px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main { padding: 14px 12px; } .section-title { font-size: 19px; } .card { padding: 14px; } .card + .card { margin-top: 12px; } .grid { gap: 10px; } .grid-2 { grid-template-columns: 1fr; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .kpi { padding: 12px 14px; } .kpi__value { font-size: 20px; } /* con <16px iOS hace zoom automático al tocar un campo */ .input, select.input, textarea.input { font-size: 16px; } /* Tablas → tarjetas apiladas */ .table-wrap { border: none; overflow: visible; } .table-wrap table { display: block; width: 100%; background: transparent; } .table-wrap thead { display: none; } .table-wrap tbody, .table-wrap tfoot, .table-wrap tr { display: block; width: 100%; } .table-wrap tbody tr, .table-wrap tfoot tr { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 10px; padding: 5px 12px; } .table-wrap tbody tr:nth-child(even) { background: var(--bg-card); } .table-wrap tbody tr.com-pendiente { background: var(--warning-bg); box-shadow: inset 3px 0 0 var(--warning); } .table-wrap tbody tr.com-lista { opacity: .55; } .table-wrap td, .table-wrap tfoot th { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border: none; padding: 6px 0; font-size: 13.5px; } .table-wrap td.num { text-align: right; } .table-wrap td[data-label]::before { content: attr(data-label); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); flex-shrink: 0; } .table-wrap td:empty { display: none; } } /* Toast */ .toast-host { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { padding: 11px 18px; border-radius: var(--radius-md); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toastin .2s; } .toast-success { background: var(--success); } .toast-error { background: var(--error); } .toast-info { background: var(--steel); } @keyframes toastin { from { opacity: 0; transform: translateY(8px); } } /* ── Sección Impresora (paridad con Plastic City, 16-jul) ── Dos columnas: configuración+negocio | guía. En teléfono se apila. El ancho del rollo se elige con botones (no