:root{ --bg: #0f1013; --bg-panel: #16181c; --bg-panel-2: #1c1f24; --line: #2c2f36; --text: #ececec; --text-dim: #9a9fa8; --accent: #c98a3e; --accent-soft: #4a3a24; --ok: #5bab6f; --ok-soft: #22301f; --warn: #c9573e; --warn-soft: #331f1a; --danger: #e5484d; --info: #5b8fab; --info-soft: #1f2a30; --radius: 12px; /* Paleta automática para diferenciar servicios visualmente (franja de turno-compacto). Placeholder hasta que cada servicio tenga su color propio editable en Servicios. */ --serv-1: #c98a3e; --serv-2: #5b8fab; --serv-3: #5bab6f; --serv-4: #a35bc9; --serv-5: #c95b8f; --serv-6: #4fb3a8; --serv-7: #c9573e; --serv-8: #8f9ec9; /* Zona segura (notch / isla dinámica / barra de estado), para que el menú flotante (abrirMenuFlotante en app.js) NO se posicione encima de esa área cuando lo pega arriba/abajo de todo — igual que ya respeta el resto de la app con env(safe-area-inset-*) en CSS, pero ese menú calcula su posición en JS y necesita leer el valor ahí. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Ancho máximo del contenido (.wrap, header, tabs, páginas tipo Notas). En celular no hace nada (la pantalla ya es angosta), pero en compu es lo que evita que la app quede como una tira angosta perdida en el medio de la pantalla: se agranda en el media query de "pantallas grandes" de acá abajo, sin tener que repetir el número en cada regla que lo usa. */ --wrap-max: 720px; /* Ancho de la sidebar de navegación en compu (reemplaza la barra de tabs de abajo — ver el media query de "Nav en compu" junto a .tabs más abajo). En celular no se usa para nada. */ --sidebar-w: 220px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* Modo claro. Se activa poniendo data-theme="light" en (ver app.js, función aplicarTema). Los nombres de las variables son los mismos que en :root de arriba, así que el resto del CSS no necesita ningún cambio. */ html[data-theme="light"]{ --bg: #f2efe9; --bg-panel: #ffffff; --bg-panel-2: #f7f4ee; --line: #ddd7c9; --text: #201d17; --text-dim: #6f6a5f; --accent: #a8701f; --accent-soft: #f2e0bd; --ok: #2f8f4e; --ok-soft: #e0f1e4; --warn: #b34a34; --warn-soft: #fae2d9; --danger: #c93a3f; --info: #366f8c; --info-soft: #e0edf4; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html{ -webkit-text-size-adjust: 100%; } body{ margin:0; background: var(--bg); color: var(--text); min-height:100vh; padding: env(safe-area-inset-top) 12px calc(92px + env(safe-area-inset-bottom)); font-size: 16px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Los textos de la app no se pueden seleccionar/copiar, salvo los números y montos (precios, totales, cantidades) y lo que el usuario escribe. */ input, textarea, [contenteditable="true"]{ -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .num, .detalle, .monto, .precio, .cant, .info-chip.precio-chip, .income-entry-amount, .cliente-sug-meta, .sel-sug-meta{ -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .wrap{ max-width: var(--wrap-max); margin: 0 auto; } /* ---- Responsive para pantallas grandes (tablet apaisada / compu) ---- Todo lo de arriba (y el resto del archivo) está pensado para celular y se deja intacto: en una pantalla angosta este media query no hace nada. A partir de 860px de ancho, el contenido (.wrap, header, tabs, hoja de acciones rápidas, páginas tipo Notas/Clientes) pasa de 720px a un ancho más cómodo para compu, cambiando solo la variable --wrap-max (ver :root) en vez de repetir el número en cada regla. */ @media (min-width: 860px){ :root{ --wrap-max: 900px; } /* Este padding-left le hace lugar en el body a la sidebar fija (.tabs). Pero .tabs vive fuera de #appContenido, así que si no hay sesión (pantalla de login/carga) queda oculta con la clase .oculto a mano desde supabase-client.js — y en ese caso NO hay que reservarle espacio: sin este :has(), el padding quedaba puesto igual, el login se centraba dentro de esa caja corrida hacia la derecha, y en la pantalla real se veía descentrado hacia un costado. */ body:has(.tabs:not(.oculto)){ padding: 24px 24px 24px calc(var(--sidebar-w) + 24px); } } header{ display:flex; flex-direction: column; gap: 10px; padding: calc(16px + env(safe-area-inset-top)) 12px 14px; position: sticky; top: 0; z-index: 40; background: var(--bg); margin: 0 -12px; border-bottom: 1px solid var(--line); } .header-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .header-brand{ display:flex; align-items:center; gap:10px; min-width:0; } /* Botón invisible que envuelve el h1: clickear el título/logo del header lleva a Inicio (mismo comportamiento en cualquier pestaña). Sin fondo, sin borde, sin padding propio — visualmente sigue siendo el título de siempre, solo que ahora es clickeable. */ .header-titulo-btn{ border:none; background:transparent; padding:0; margin:0; min-height:auto; display:flex; align-items:center; min-width:0; text-align:left; color: var(--text); transition: opacity 0.15s ease; } .header-titulo-btn:active{ opacity:0.6; } header h1{ font-size: 1.15rem; margin:0; letter-spacing: 0.3px; font-weight: 700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } header h1 .accent-mark{ color: var(--accent); } header h1 .header-version{ font-size: 0.62rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0; margin-left: 6px; vertical-align: middle; } .header-saludo-row{ display:none; flex-direction:column; gap:2px; } /* La fila de saludo + fecha ahora es exclusiva de Inicio (2.2): en el resto de las pestañas el header global se mantiene fijo pero sin esta fila. */ .wrap:has(#tab-inicio.active) .header-saludo-row{ display:flex; } .header-saludo{ font-size: 1.02rem; font-weight: 700; color: var(--text); } header .today{ color: var(--text-dim); font-size: 0.8rem; text-transform: capitalize; } /* ---- Botón de menú (hamburguesa) y notas en el header ---- */ .hamburguesa-btn{ width:32px; height:32px; min-height:auto; padding:0; border:none; background:transparent; color: var(--text); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .hamburguesa-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; } .hamburguesa-btn:active{ color: var(--accent); } .header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; } .notas-btn{ position:relative; width:36px; height:36px; min-height:auto; padding:0; border-radius:50%; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .notas-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .notas-btn:active{ color: var(--accent); border-color: var(--accent); } .notas-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background: var(--accent); color:#16181c; font-size:0.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; } /* ---- Tabs (bottom nav bar) ---- */ .tabs{ display:flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-panel); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 30; max-width: var(--wrap-max); margin: 0 auto; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); } .tab-btn{ flex: 1 1 0; min-width: 58px; display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 3px; background: transparent; border: none; color: var(--text-dim); padding: 6px 2px; border-radius: 10px; font-size: 0.62rem; font-weight: 600; line-height: 1.1; min-height: 50px; } .tab-btn svg{ width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; } .tab-btn span{ white-space: nowrap; } .tab-btn.active{ color: var(--accent); } .tab-btn.active svg{ stroke-width: 2.1; } /* ---- Nav inferior: botón "+" central elevado (1.5) ---- */ .tab-fab-wrap{ flex: 1 1 0; min-width: 58px; display:flex; align-items:flex-start; justify-content:center; } .tab-fab{ width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: linear-gradient(155deg, #e0a55c, var(--accent) 65%); color: #16181c; display:flex; align-items:center; justify-content:center; border: 3px solid var(--bg-panel); box-shadow: 0 6px 16px rgba(201,138,62,0.45), 0 2px 4px rgba(0,0,0,0.3); flex-shrink:0; transition: transform 0.2s ease; } .tab-fab svg{ width: 24px; height: 24px; stroke: currentColor; fill:none; stroke-width: 2.4; stroke-linecap:round; transition: transform 0.2s ease; } .tab-fab:active{ transform: scale(0.94); } .tab-fab.abierto svg{ transform: rotate(45deg); } /* ---- Nav en compu (2.1.0): lista de "Más" desplegada + perfil anclado abajo — ocultos acá por default (celular), se muestran y se stylean recién adentro del @media 860px de acá abajo. ---- */ .sidebar-mas-lista{ display:none; } .sidebar-perfil-footer{ display:none; } /* ---- Nav en compu: la misma barra de abajo pasa a ser una sidebar fija a la izquierda ---- Ojo: no se toca nada de HTML ni de JS acá — son los mismos botones .tab-btn con los mismos data-tab de siempre, y el mismo #navFabAgregar de siempre. El clic, la pestaña activa y el sheet de acciones rápidas siguen funcionando exactamente igual; esto solo les cambia la pinta y la posición en pantallas grandes. En celular esta sección no se lee (vive en el media query de compu), así que la barra de abajo sigue exactamente igual que siempre. */ @media (min-width: 860px){ .tabs{ left: 0; right: auto; top: 0; bottom: 0; width: var(--sidebar-w); max-width: none; margin: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 24px 12px; border-top: none; border-right: 1px solid var(--line); box-shadow: none; } .tab-btn{ flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; font-size: 0.85rem; border-radius: 9px; } .tab-btn:hover{ background: var(--bg-panel-2); } .tab-btn.active{ background: var(--accent-soft); } .tab-btn svg{ width: 20px; height: 20px; } /* En compu no hace falta un botón "+" en la nav: no queda bien como ítem de sidebar y las pantallas ya tienen sus propios botones de agregar (turno, venta, servicio, etc.). Se oculta entero, la navegación queda con Inicio / Turnos / Ventas nomás arriba, y la lista de "Más" desplegada abajo (ver más abajo). */ .tab-fab-wrap{ display: none; } /* El menú hamburguesa (versión celular del "Más") ya no hace falta: en compu ya no hay nada escondido detrás de un botón "Más" — su contenido queda siempre desplegado en la sidebar (ver más abajo). */ .hamburguesa-btn{ display: none; } /* 2.1.0 — "Más" deja de existir como botón propio: se oculta (su contenido se despliega abajo, en #sidebarMasLista). */ .tab-btn[data-tab="config"]{ display: none; } /* Inicio / Turnos / Ventas son la navegación principal de la sidebar: resaltan un poco más que la lista secundaria de abajo (antes escondida detrás de "Más"). */ .tab-btn[data-tab="inicio"], .tab-btn[data-tab="historial"], .tab-btn[data-tab="ventas"]{ font-size: 0.9rem; font-weight: 800; min-height: 48px; } .tab-btn[data-tab="inicio"] svg, .tab-btn[data-tab="historial"] svg, .tab-btn[data-tab="ventas"] svg{ width: 21px; height: 21px; } /* Lista secundaria (antes "Más"): mismo #masLista de siempre, movido para acá por app.js según el ancho de pantalla (ver acomodarMasSegunAncho) — no se duplica nada, los ids/listeners de cada ítem siguen siendo los mismos que en celular. Separada de la nav principal con un filete arriba, y con menos aire que la tarjeta grande de celular para que entre cómoda en la sidebar angosta. */ .sidebar-mas-lista{ display:flex; flex-direction:column; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); gap: 2px; } .sidebar-mas-lista .mas-lista{ display:flex; flex-direction:column; gap:2px; } .sidebar-mas-lista .mas-lista-item{ min-height:auto; padding: 8px 10px; border-bottom:none; border-radius: 9px; gap: 10px; } .sidebar-mas-lista .mas-lista-item:hover{ background: var(--bg-panel-2); } .sidebar-mas-lista .mas-lista-icon{ width:28px; height:28px; background:transparent; color: var(--text-dim); } .sidebar-mas-lista .mas-lista-icon svg{ width:18px; height:18px; } .sidebar-mas-lista .mas-lista-titulo{ font-size: 0.82rem; } .sidebar-mas-lista .mas-lista-chevron{ display:none; } .sidebar-mas-lista .mas-lista-badge{ font-size: 0.58rem; padding: 2px 6px; } /* #perfilBtn sigue viviendo adentro de #masLista para que celular quede intacto — acá se oculta nomás, porque el perfil ya tiene su propio botón aparte (#sidebarPerfilBtn, justo abajo). */ .sidebar-mas-lista #perfilBtn{ display:none; } /* Perfil: anclado abajo a la izquierda de la sidebar con avatar + nombre del negocio, como la cuenta de cualquier app de escritorio. margin-top:auto lo empuja al piso dentro del flex-column de .tabs. */ .sidebar-perfil-footer{ display:flex; align-items:center; gap:10px; margin-top: auto; padding: 10px; border-top: 1px solid var(--line); border-radius: 9px; background: transparent; text-align:left; } .sidebar-perfil-footer:hover{ background: var(--bg-panel-2); } .sidebar-perfil-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.76rem; } .sidebar-perfil-nombre{ font-size:0.82rem; font-weight:700; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } } /* ---- Nav inferior: sheet de acciones rápidas del botón "+" (1.5) ---- */ .acciones-rapidas-overlay{ position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.55); opacity:0; pointer-events:none; transition: opacity 0.2s ease; display:flex; align-items:flex-end; justify-content:center; } .acciones-rapidas-overlay.show{ opacity:1; pointer-events:auto; } .acciones-rapidas-sheet{ width:100%; max-width: var(--wrap-max); background: var(--bg-panel); border-radius: 20px 20px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.25s ease; } .acciones-rapidas-overlay.show .acciones-rapidas-sheet{ transform: translateY(0); } .acciones-rapidas-handle{ width:36px; height:4px; border-radius:3px; background: var(--line); margin: 4px auto 14px; } .acciones-rapidas-titulo{ font-size:0.9rem; font-weight:700; color: var(--text); text-align:center; margin-bottom:14px; } .acciones-rapidas-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } /* ---- Turnos (Agenda): botón "+" del header, título y bordes ahora siguen el mismo patrón .panel/h2 que Ventas y Configuración (ver tab-historial en index.html) ---- */ .turnos-header-add{ width:36px; height:36px; min-height:auto; padding:0; border-radius:50%; flex-shrink:0; background: var(--accent); border:none; color:#16181c; display:flex; align-items:center; justify-content:center; } .turnos-header-add svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; } .turnos-header-add:active{ opacity:0.85; } .turnos-header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; } .turnos-dia-grilla{ margin-bottom:14px; } /* ---- Turnos: ícono de buscar/filtrar en el header + panel (2.5.B) ---- */ .turnos-header-buscar{ width:36px; height:36px; min-height:auto; padding:0; border-radius:50%; flex-shrink:0; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); display:flex; align-items:center; justify-content:center; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .turnos-header-buscar svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .turnos-header-buscar:active{ color: var(--accent); border-color: var(--accent); } .turnos-header-buscar.active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .turnos-buscar-panel{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding: 14px; display:flex; flex-direction:column; gap:12px; margin-bottom:12px; } .turnos-buscar-input-wrap input{ padding-left:42px; } .turnos-buscar-row2{ display:flex; align-items:center; justify-content:space-between; gap:8px; } /* Mismo ajuste que en .today-list (ver esa nota, más abajo, para el porqué del margin-inline negativo en el contenedor en vez de en la tarjeta). */ .turnos-buscar-resultados{ display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; overflow-x:hidden; padding-inline: 12px; margin-inline: -12px; scrollbar-width:none; -ms-overflow-style:none; } .turnos-buscar-resultados::-webkit-scrollbar{ display:none; } .tab-content{ display: none; flex-direction: column; gap: 16px; margin-top: 12px; } .tab-content.active{ display: flex; } .panel{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } /* ---- Inicio: tarjetas resumen (1.2) ---- */ .inicio-resumen-grid{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; } .resumen-card{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display:flex; flex-direction:column; gap: 4px; min-width: 0; } .resumen-card-grande{ grid-column: 1 / -1; position: relative; padding-bottom: 6px; overflow: hidden; } .resumen-card-label{ font-size: 0.72rem; color: var(--text-dim); font-weight: 600; } .resumen-card-valor{ font-size: 1.55rem; font-weight: 800; color: var(--text); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .resumen-card-grande .resumen-card-valor{ font-size: 1.7rem; } .resumen-card-delta{ display:flex; align-items:center; gap:2px; font-size: 0.74rem; font-weight:700; color: var(--ok); } .resumen-card-delta svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .resumen-card-delta.down{ color: var(--danger); } .resumen-card-sub{ font-size: 0.74rem; color: var(--text-dim); } /* "Ingresos de hoy" de Inicio ahora reusa el gráfico detallado de Estadísticas (.stat-chart), fijo en período "Hoy" — ver renderResumenInicio()/renderGraficoLineas() en app.js. Solo achica el margen superior para que quede prolijo dentro de esta tarjeta, que es más chica que el panel de Estadísticas. */ .resumen-card-grande .stat-chart{ margin-top:6px; } /* ---- Clientes: tarjeta resumen al pie de la lista (3.4), reusa .resumen-card ---- */ .clientes-resumen-card{ margin-top: 14px; } /* ---- Ventas: tarjeta resumen "Ventas de hoy" (4.1), reusa .resumen-card-grande. El botón de categorías (antes suelto en el h2) vive ahora como ícono chico dentro de la tarjeta, arriba a la derecha. */ .ventas-resumen-card{ margin-bottom: 14px; padding-right: 44px; } .resumen-card-accion{ position: absolute; top: 12px; right: 12px; } .resumen-card-accion-grande{ width:40px; height:40px; } .resumen-card-accion-grande svg{ width:20px; height:20px; } /* ---- Ventas: buscador de productos (4.2), reusa .ff-input-wrap ---- */ .ventas-buscar-wrap{ margin-bottom:12px; } /* ---- Ventas: tabs de categoría raíz (4.3), reusa .notas-filtros/.filtro-chip ---- */ .ventas-categoria-tabs{ margin-bottom: 10px; } /* ---- Ventas: sub-tabs de la categoría elegida (4.3) — fila más chica y liviana, sin el fondo en caja de .notas-filtros, para marcar que es un segundo nivel de filtro dentro del tab raíz activo. ---- */ .ventas-subcategoria-tabs{ display:flex; gap:6px; margin: 0 0 12px; overflow-x:auto; } .filtro-chip-sub{ flex:none; min-height:auto; padding:6px 13px; border-radius:20px; font-size:0.72rem; font-weight:700; white-space:nowrap; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .filtro-chip-sub.active{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ---- Inicio: acciones rápidas (1.4) ---- */ .inicio-acciones-rapidas{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; } .accion-rapida-btn{ display:flex; flex-direction:column; align-items:center; gap:7px; background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding: 13px 8px 11px; color: var(--text); text-transform:none; letter-spacing:normal; font-weight:400; } .accion-rapida-btn:active{ border-color: var(--accent); } .accion-rapida-icono{ position:relative; width:40px; height:40px; border-radius:50%; flex-shrink:0; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; } .accion-rapida-icono svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .accion-rapida-icono::after{ content:'+'; position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background: var(--accent); color:#16181c; font-size:0.72rem; font-weight:800; line-height:16px; text-align:center; border: 2px solid var(--bg-panel); } .accion-rapida-label{ font-size:0.76rem; font-weight:700; color: var(--text); } /* ---- Inicio: próximos turnos compactos (1.3) ---- */ .ver-agenda-btn{ width:auto; height:auto; min-height:auto; border-radius:8px; padding:6px 13px; font-size:0.66rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px; background: linear-gradient(155deg, #f0c179, var(--accent) 65%); color:#16181c; border:1px solid rgba(255,255,255,0.25); box-shadow: 0 2px 6px rgba(0,0,0,0.25); flex-shrink:0; } .ver-agenda-btn:active{ transform: scale(0.96); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .turno-compacto{ display:flex; align-items:stretch; gap:10px; background: var(--bg-panel-2); border-radius:10px; padding:10px 12px; min-width:0; cursor:pointer; position:relative; z-index:1; transition: transform 0.12s ease, box-shadow 0.12s ease; } /* Efecto "seleccionado" al tocar: se agranda levemente en vez de resaltarse en color. transform:scale() no cambia el layout, pero SÍ agranda el área de overflow pintada de la tarjeta — y sus contenedores (.today-list, .turnos-buscar-resultados) tienen overflow-y:auto con max-height, lo que por regla del spec de CSS fuerza a que overflow-x también clipee. Sin más, la tarjeta agrandada se cortaría en los bordes laterales. La solución NO puede ser darle padding-inline al contenedor y cancelarlo con margin-inline negativo de la misma magnitud en .turno-compacto (así estaba antes): eso deja a la tarjeta exactamente pegada al borde donde clipea overflow-x, con CERO aire de sobra — el "crecimiento" del scale() se corta igual, apenas la tarjeta crece. En cambio, acá el aire se saca del padding del .panel que envuelve la lista (16px, y siempre vacío): el contenedor de la lista se estira hacia afuera con margin-inline negativo (invadiendo parte de ese padding del panel) y compensa ese mismo ancho con su propio padding-inline, así el punto donde clipea overflow-x queda más afuera sin mover ni angostar nada visualmente en reposo. */ /* inset en vez de un box-shadow "hacia afuera": uno hacia afuera con blur grande se sale del aire reservado en el contenedor (ver nota de arriba) y su difuminado se corta de golpe en ese borde — se ve como una línea fija en reposo y, mientras el scale() está animando, como un tembleque (el punto de corte se mueve con el tamaño de la tarjeta cuadro a cuadro). Un inset nunca sale de la tarjeta, así que no puede clipearse pase lo que pase con el contenedor. */ .turno-compacto.turno-compacto-tocado{ transform: scale(1.025); z-index:2; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 12px rgba(0,0,0,0.25); } .turno-compacto-franja{ width:4px; border-radius:3px; overflow:hidden; display:flex; flex-direction:column; flex-shrink:0; } .turno-compacto-franja span{ flex:1 1 0; } .turno-compacto-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .turno-compacto-top{ display:flex; align-items:baseline; gap:8px; } .turno-compacto-hora{ font-size:0.78rem; font-weight:700; color: var(--accent); flex-shrink:0; } .turno-compacto-cliente{ font-weight:700; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .turno-compacto-servicios{ font-size:0.75rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .turno-compacto-precio{ font-size:0.75rem; font-weight:600; color: var(--text-dim); } .turno-compacto-right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; flex-shrink:0; } .turno-compacto-estado{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .turno-compacto-estado svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .turno-compacto-estado.completado{ background: var(--ok-soft); color: var(--ok); } .turno-compacto-estado.pendiente{ background: var(--warn-soft); color: #d9a441; } .turno-compacto-estado.cancelado{ background: var(--danger); color: #fff; opacity:0.85; } .panel h2{ font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 800; color: var(--text); margin: 0 0 12px; display:flex; align-items:center; justify-content:space-between; } .icon-btn-round{ width:28px; height:28px; min-height:auto; padding:0; border-radius:50%; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; text-transform:none; letter-spacing:normal; font-weight:400; } .icon-btn-round svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .icon-btn-round:active{ color: var(--accent); border-color: var(--accent); } .icon-btn-round.active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } /* ---- Reminder / today section ---- */ /* margin-inline negativo + padding-inline en el CONTENEDOR (no en la tarjeta): le dan aire horizontal al scale() de .turno-compacto-tocado (ver esa regla) sin mover nada visualmente ni angostar las tarjetas en reposo. */ /* scrollbar-width/-ms-overflow-style + ::-webkit-scrollbar: ocultan la barra de scroll vertical (el scroll con el dedo/mouse sigue andando igual). Sin esto, cuando la lista tiene varios turnos y sí llega a scrollear, el navegador reserva el ancho de esa scrollbar SOLO del lado derecho — eso le come el aire que padding-inline/margin-inline de acá abajo le dan a la tarjeta para crecer con el scale() de .turno-compacto-tocado, y por eso el lado derecho se cortaba mientras el izquierdo (que nunca pierde aire) se veía bien. */ .today-list{ display:flex; flex-direction:column; gap:8px; max-height: 420px; overflow-y:auto; overflow-x:hidden; padding-inline: 12px; margin-inline: -12px; scrollbar-width:none; -ms-overflow-style:none; } .today-list::-webkit-scrollbar{ display:none; } .today-list .turno-card{ border-left: 3px solid var(--accent); } .today-list .turno-card.pagado{ border-left-color: var(--ok); } .today-list .turno-card.done{ opacity:0.75; } .empty-msg{ color: var(--text-dim); font-size:0.85rem; padding: 8px 2px; } /* ---- Listas permanentes que pueden acumular muchas filas con el tiempo (ingresos manuales, gastos): scroll interno con altura tope en vez de empujar el resto del panel hacia abajo a medida que crecen. */ .lista-scroll{ max-height: 420px; overflow-y:auto; padding-right:2px; } /* ---- Listas plegables: mismo header/chevron que .categoria-grupo (Ventas), pero para plegar la lista completa, no un subgrupo dentro de ella. */ .lista-plegable .categoria-header{ padding: 6px 4px; } .lista-plegable .lista-scroll{ margin-top: 6px; } .lista-plegable.colapsado .categoria-chevron{ transform: rotate(-90deg); } .lista-plegable.colapsado .lista-scroll{ display:none; } /* ---- Report cards ---- */ .report-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; } .report-row.stats-row{ grid-template-columns: repeat(2,1fr); } .report-row > *{ min-width:0; } .report-card.static{ cursor: default; } .report-card.static .num{ font-size: 1.4rem; } .report-card{ background: var(--bg-panel-2); border-radius: 9px; padding: 12px 6px; text-align:center; cursor:pointer; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease; } .report-card.active{ background: var(--accent-soft); border-color: var(--accent); } .report-card .num{ font-size: 1.1rem; font-weight: 700; color: var(--accent); display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .report-card .lbl{ font-size: 0.63rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } /* ---- Resumen general: tarjetas con ícono ---- */ .stat-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 14px; } .stat-grid > *{ min-width:0; } @media (min-width: 860px){ .stat-grid{ grid-template-columns: repeat(4,1fr); } } .stat-tile{ position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; display:flex; flex-direction:column; gap: 10px; } .stat-tile::after{ content:""; position:absolute; top:-26px; right:-26px; width:68px; height:68px; border-radius:50%; background: var(--tile-color, var(--accent)); opacity: 0.12; } .stat-tile .stat-icon{ position:relative; z-index:1; width: 32px; height: 32px; border-radius: 9px; display:flex; align-items:center; justify-content:center; background: var(--accent-soft); background: color-mix(in srgb, var(--tile-color, var(--accent)) 18%, transparent); color: var(--tile-color, var(--accent)); } .stat-tile .stat-icon svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .stat-tile .num{ position:relative; z-index:1; font-size: 1.4rem; font-weight: 800; color: var(--text); line-height:1.1; display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .stat-tile .lbl{ position:relative; z-index:1; font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; } .stat-tile.tile-accent{ --tile-color: var(--accent); } .stat-tile.tile-info{ --tile-color: var(--info); } .stat-tile.tile-warn{ --tile-color: var(--warn); } .stat-tile.tile-ok{ --tile-color: var(--ok); } .income-detail{ display:none; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .income-detail.show{ display:flex; } .income-entry{ display:flex; justify-content:space-between; align-items:center; gap:10px; background: var(--bg-panel-2); border-radius:9px; padding:10px 12px; } .income-entry-main{ display:flex; flex-direction:column; gap:2px; min-width:0; } .income-entry-title{ font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:7px; } .income-entry-title .tipo-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; } .income-entry.turno .tipo-dot{ background: var(--accent); } .income-entry.producto .tipo-dot{ background: var(--info); } .income-entry.manual .tipo-dot{ background: var(--ok); } .income-entry-sub{ font-size:0.71rem; color:var(--text-dim); padding-left: 14px; } .income-entry-nota{ font-size:0.68rem; color:var(--ok); padding-left: 14px; margin-top:1px; } .income-entry-cliente{ display:inline-flex; align-items:center; gap:3px; color: var(--accent); font-weight:600; } .income-entry-cliente svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; } .income-entry-amount{ font-weight:700; color:var(--accent); font-size:0.85rem; white-space:nowrap; max-width:40%; overflow:hidden; text-overflow:ellipsis; min-width:0; flex-shrink:1; } /* Botón "Deshacer" de una fila de Ingresos que vino del carrito multi-producto (4.5) — mismo .icon-btn-round de siempre, un toque más chico para no competir con el monto al lado. */ .income-entry-deshacer{ width:24px; height:24px; } .income-entry-deshacer svg{ width:12px; height:12px; } /* ---- Fila "fundida" de un carrito con varios productos (ver el agrupado-por-grupoId en itemsDeIngresos) — clickeable, abre el modal de detalle en vez de mostrar el botón de deshacer acá mismo. ---- */ .income-entry.es-carrito{ cursor:pointer; } .income-entry.es-carrito:active{ background: var(--bg-panel); } .income-entry-chevron{ width:18px; height:18px; flex-shrink:0; stroke: var(--text-dim); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .income-detail-empty{ color: var(--text-dim); font-size:0.82rem; padding: 6px 2px; } .income-entry.gasto .tipo-dot{ background: var(--warn); } .balance-entry .income-entry-amount{ font-size:0.92rem; } .balance-desglose{ display:flex; gap:6px; margin-top:4px; padding-left:14px; flex-wrap:wrap; } .desglose-chip{ font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:20px; } .desglose-chip.desglose-plus{ background: var(--ok-soft); color: var(--ok); } .desglose-chip.desglose-minus{ background: var(--warn-soft); color: var(--warn); } /* ---- Gastos por categoría ---- */ .gpc-block{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .gpc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .gpc-title{ font-size:0.85rem; font-weight:700; color:var(--text); margin:0; } .gpc-periodo{ display:flex; gap:4px; background: var(--bg-panel-2); border-radius:8px; padding:3px; } .gpc-periodo-btn{ border:none; background:transparent; color:var(--text-dim); font-size:0.7rem; font-weight:700; padding:5px 9px; border-radius:6px; cursor:pointer; text-transform:uppercase; letter-spacing:0.3px; } .gpc-periodo-btn.active{ background: var(--accent-soft); color: var(--accent); } /* Selector con 5 opciones (Hoy/Semana/Mes/Año/Histórico): mismo look, letra y padding más chicos para que "Histórico" no desborde en pantallas angostas. */ .gastos-total-periodo.periodo-5 .gpc-periodo-btn{ font-size:0.6rem; padding:5px 2px; letter-spacing:0.1px; } /* ---- Gráfico de línea (Ingresos/Gastos/Balance): evolución del total según el período elegido, mismo estilo que el sparkline de Inicio (línea + relleno degradado), pero con un punto por cada hora/día/mes según corresponda y su etiqueta debajo. El último punto (a la derecha) es siempre "ahora" (la hora actual en Hoy, hoy en Semana/Mes, este mes en Año/Histórico) y se destaca con un punto más grande + una guía vertical punteada, para ubicar de un vistazo "dónde estás". Cuando hay más puntos de los que entran cómodos (Hoy, Mes), el gráfico se vuelve horizontalmente scrolleable y arranca scrolleado del todo a la derecha (ver renderGraficoLineas), así el punto de "ahora" siempre es lo primero que se ve. Sin librerías externas: un solo SVG por tarjeta. ---- */ .stat-chart{ margin-top:12px; } /* overflow-x:auto es necesario para que el gráfico siga siendo scrolleable (arrastrando con el dedo) cuando hay más puntos de los que entran en pantalla, pero por default eso hace que el navegador dibuje su propia barra de scroll horizontal encima — en varios navegadores mobile esa barra se ve como un boton/thumb suelto flotando sobre el gráfico. El scroll en sí sigue andando igual (touch/drag/rueda), esto solo oculta el dibujito de la barra nativa. */ .stat-chart-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; padding:0 2px; scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* Edge/IE viejos */ } .stat-chart-scroll::-webkit-scrollbar{ display:none; height:0; } /* Chrome/Safari/WebView */ .stat-chart-inner{ position:relative; min-width:100%; } .stat-chart-svg-el{ display:block; width:100%; height:84px; overflow:visible; } .stat-chart-labels{ position:relative; height:14px; margin-top:2px; } .stat-chart-labels span{ position:absolute; top:0; transform:translateX(-50%); font-size:0.58rem; color:var(--text-dim); white-space:nowrap; } .stat-chart-labels span.es-ahora{ color:var(--text); font-weight:800; } .stat-chart-labels span.es-ahora::before{ content:'●'; font-size:0.6em; margin-right:2px; color:currentColor; vertical-align:middle; } /* Halo del punto de "ahora" (ver puntoHoySvg en app.js): antes era un círculo quieto, ahora late suave para que se note que es "el punto en vivo" y no uno más de la serie. transform-box:fill-box hace que el scale() sea relativo al propio círculo (su centro), no a la esquina del SVG entero — sin eso el punto se "correría" de lugar al agrandarse. */ .stat-chart-ahora-halo{ transform-box: fill-box; transform-origin: center; animation: stat-chart-halo-pulso 2.2s ease-in-out infinite; } @keyframes stat-chart-halo-pulso{ 0%, 100%{ opacity: 0.16; transform: scale(1); } 50%{ opacity: 0.05; transform: scale(1.4); } } /* Interacción tipo "Coco Capital": mantener presionado (o pasar el mouse en desktop) y arrastrar sobre la curva muestra la hora/día y el monto acumulado de ese punto exacto, con una línea vertical + un punto resaltado que siguen el dedo/cursor. Reemplaza la fila fija de etiquetas de hora (que se sacó para no saturar) por esta exploración bajo demanda. */ .stat-chart{ position:relative; } .stat-chart-inner{ touch-action: pan-x; } .stat-chart-crosshair{ position:absolute; top:0; width:1px; height:84px; background:var(--line); pointer-events:none; opacity:0; } .stat-chart-crosshair.activo{ opacity:1; } /* OJO: el tooltip NO cuelga de .stat-chart-inner (el que se scrollea) — .stat-chart-scroll tiene overflow-x:auto y, por cómo funciona CSS, eso hace que el eje Y también quede recortado (overflow-y pasa a "auto" aunque no se lo haya pedido), así que un tooltip que sobresale hacia arriba del gráfico quedaría cortado. Por eso cuelga de .stat-chart (que sí tiene overflow visible) y su posición se calcula a mano restando el scroll horizontal actual, ver configurarInteraccionGrafico. */ .stat-chart-tooltip{ position:absolute; top:0; transform:translate(-50%,-100%); margin-top:-8px; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:8px; padding:5px 9px; white-space:nowrap; pointer-events:none; opacity:0; box-shadow:0 4px 12px rgba(0,0,0,0.35); z-index:2; } .stat-chart-tooltip.activo{ opacity:1; } .stat-chart-tooltip-hora{ font-size:0.58rem; color:var(--text-dim); } .stat-chart-tooltip-monto{ font-size:0.74rem; font-weight:800; color:var(--text); } .gpc-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; } @media (min-width: 860px){ .gpc-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } } .gpc-row{ display:flex; align-items:center; gap:10px; } .gpc-row-icon{ flex-shrink:0; width:30px; height:30px; border-radius:9px; background: var(--warn-soft); color: var(--warn); display:flex; align-items:center; justify-content:center; } .gpc-row-icon svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .gpc-row-body{ flex:1; min-width:0; } .gpc-row-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; } .gpc-row-nombre{ font-size:0.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gpc-row-monto{ font-size:0.8rem; font-weight:700; color:var(--warn); white-space:nowrap; flex-shrink:0; } .gpc-bar-track{ height:7px; border-radius:5px; background: var(--bg-panel-2); overflow:hidden; } .gpc-bar-fill{ height:100%; border-radius:5px; background: var(--warn); } .report-card.efectivo{ border: 1px solid rgba(91,171,111,0.3); } .report-card.efectivo .num{ color: var(--ok); } .report-card.transferencia{ border: 1px solid rgba(91,143,171,0.3); } .report-card.transferencia .num{ color: var(--info); } /* ---- Stats: servicio más pedido ---- */ .top-servicio-card{ display:flex; align-items:center; gap:12px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 14px; } .top-servicio-icon{ flex-shrink:0; width:40px; height:40px; border-radius:11px; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; } .top-servicio-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .top-servicio-info{ flex:1; min-width:0; } .top-servicio-card .nombre{ font-weight:700; font-size: 0.95rem; } .top-servicio-card .veces{ color: var(--text-dim); font-size: 0.74rem; margin-top:2px; } .top-servicio-card .num{ font-size: 1.3rem; font-weight:700; color: var(--accent); flex-shrink:1; min-width:0; max-width:35%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---- Stats: detalle histórico colapsable ---- */ .stats-details{ margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .stats-details summary{ cursor: pointer; list-style: none; font-size: 0.8rem; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; padding: 4px 2px; } .stats-details summary::-webkit-details-marker{ display:none; } .stats-details summary::before{ content: '▸'; font-size: 0.7rem; transition: transform 0.15s ease; } .stats-details[open] summary::before{ transform: rotate(90deg); } .stats-details-body{ margin-top: 10px; } /* ---- Form ---- */ form.turno-form{ display:flex; flex-direction:column; gap: 12px; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .form-row > *{ min-width:0; } /* ---- Cliente: buscador rápido + autocompletado ---- */ .cliente-field-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; } .cliente-field-head label{ margin-bottom:0; } .cliente-buscar-btn{ width:auto; min-height:auto; padding:5px 10px 5px 8px; border-radius:20px; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); font-size:0.72rem; font-weight:700; display:flex; align-items:center; gap:4px; flex-shrink:0; } .cliente-buscar-btn svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; } .cliente-buscar-btn:active{ color: var(--accent); border-color: var(--accent); } .cliente-autocomplete-wrap{ position:relative; } .cliente-sugerencias{ display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:35; background: var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; /* 230px es el máximo — ajustarAlturaSugerencias() en app.js lo recorta en JS (vía style.maxHeight inline) al espacio real disponible debajo del input cada vez que se muestra, para que nunca quede cortado por el borde de la pantalla. */ max-height:230px; overflow-y:auto; box-shadow: 0 10px 24px rgba(0,0,0,0.4); } .cliente-sugerencias.show{ display:block; } .cliente-sug-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); } .cliente-sug-item:last-child{ border-bottom:none; } .cliente-sug-item:active{ background: var(--bg-panel); } .cliente-sug-avatar{ width:30px; height:30px; border-radius:50%; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; flex-shrink:0; } .cliente-sug-info{ min-width:0; flex:1; } .cliente-sug-nombre{ font-size:0.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cliente-sug-meta{ font-size:0.68rem; color: var(--text-dim); margin-top:1px; } /* ---- Directorio de clientes (pantalla aparte) ---- */ .clientes-search-box{ margin-bottom:12px; } /* 3.3: tarjeta compacta (mockup) — antes era una tarjeta densa con teléfono/instagram en texto y 4 botones de acción. Ahora es una sola fila: avatar + nombre + meta, con el ícono de WhatsApp a la derecha. Instagram, "Ver historial" y "Nuevo turno" pasaron a la ficha de detalle (.cliente-detalle-acciones), que abre con tap en el resto de la fila (.cliente-top). */ .cliente-item{ display:flex; align-items:center; gap:10px; background: var(--bg-panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .cliente-top{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer; } .cliente-avatar{ width:42px; height:42px; border-radius:50%; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; font-size:0.92rem; font-weight:800; flex-shrink:0; } .cliente-body{ flex:1; min-width:0; } .cliente-nombre{ font-weight:700; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cliente-meta{ color: var(--text-dim); font-size:0.76rem; margin-top:2px; } .cliente-icon-btn{ width:36px; height:36px; min-height:auto; padding:0; border-radius:9px; flex-shrink:0; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text); display:flex; align-items:center; justify-content:center; } .cliente-icon-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; } .cliente-icon-btn.wsp{ color:#3fd16a; border-color: rgba(63,209,106,0.35); } .cliente-icon-btn.wsp svg{ fill:currentColor; stroke:none; } .cliente-icon-btn.wsp:active{ background: rgba(63,209,106,0.12); } .cliente-icon-btn.ig{ color:#e1306c; border-color: rgba(225,48,108,0.35); } .cliente-icon-btn.ig svg{ stroke:currentColor; stroke-width:1.8; fill:none; } .cliente-icon-btn.ig:active{ background: rgba(225,48,108,0.12); } .cliente-top:active{ opacity:0.75; } /* ---- Ficha de cliente (resumen + acciones) ---- */ .cliente-detalle-overlay{ position: fixed; inset: 0; background: rgba(10,11,13,0.72); display:flex; align-items:center; justify-content:center; z-index: 210; opacity:0; pointer-events:none; transition: opacity 0.2s ease; padding: 20px; } .cliente-detalle-overlay.show{ opacity:1; pointer-events:auto; } .cliente-detalle-box{ width:100%; max-width: 420px; max-height: 86vh; overflow-y:auto; background: var(--bg-panel); border:1px solid var(--line); border-radius: 18px; padding: 26px 20px 20px; position:relative; transform: scale(0.94); opacity:0; transition: transform 0.2s ease, opacity 0.2s ease; box-shadow: 0 12px 40px rgba(0,0,0,0.45); } .cliente-detalle-overlay.show .cliente-detalle-box{ transform: scale(1); opacity:1; } /* En compu (2.1.0) la nav es una sidebar fija, no algo que "se navega lejos" como el bottom nav de celular — así que, igual que .notas-page-overlay, este fondo oscurecido no debe taparla: si no, un click en cualquier pestaña de la sidebar mientras hay una ficha/modal de este tipo abierta (ej. Perfil, dentro de "Más") no llega a tocarla -el backdrop de acá lo intercepta primero, con pointer-events:auto- y no pasa nada hasta cerrar esta pantalla a mano. */ @media (min-width: 860px){ .cliente-detalle-overlay{ left: var(--sidebar-w); } } /* Un poco más ancha para los modales de edición (turno/producto), que tienen más campos por fila (form-row a dos columnas) que la ficha de cliente. */ .cliente-detalle-box-ancho{ max-width: 480px; } .cliente-detalle-cerrar{ position:absolute; top:14px; right:14px; width:32px; height:32px; min-height:auto; padding:0; border-radius:50%; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-dim); display:flex; align-items:center; justify-content:center; } .cliente-detalle-cerrar svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; } .cliente-detalle-header{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin-bottom:18px; } .cliente-detalle-avatar{ width:58px; height:58px; font-size:1.2rem; margin-bottom:4px; } .cliente-detalle-nombre{ font-size:1.1rem; font-weight:800; } .cliente-detalle-meta{ font-size:0.8rem; color: var(--text-dim); } /* ---- Modal de detalle de una venta con varios productos (carrito de "Nueva venta", ver mostrarDetalleVentaCarrito) — reusa el mismo .cliente-detalle-overlay/box de arriba (modal centrado), con su propia lista de items + total + botón de deshacer abajo de todo. ---- */ .detalle-venta-items{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; } .detalle-venta-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .detalle-venta-item-info{ min-width:0; } .detalle-venta-item-nombre{ font-weight:700; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .detalle-venta-item-cantidad{ font-size:0.74rem; color: var(--text-dim); margin-top:1px; } .detalle-venta-item-monto{ font-weight:800; font-size:0.88rem; flex-shrink:0; white-space:nowrap; } .detalle-venta-total{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:1.05rem; color: var(--text); border-top:1px solid var(--line); padding-top:12px; margin-bottom:16px; } .detalle-venta-deshacer{ width:100%; color: var(--warn); border-color: var(--warn); } .detalle-venta-deshacer:active{ background: var(--warn-soft); } .cliente-detalle-contacto{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:4px; } .cliente-detalle-contacto .cliente-icon-btn{ width:40px; height:40px; } .cliente-detalle-contacto .cliente-icon-btn svg{ width:17px; height:17px; } .cliente-detalle-stats{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:16px; } .cliente-detalle-stat{ background: var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center; min-width:0; } .cliente-detalle-stat .num{ font-size:1.05rem; font-weight:800; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cliente-detalle-stat .lbl{ font-size:0.68rem; color: var(--text-dim); margin-top:2px; } .cliente-detalle-seccion{ margin-bottom:16px; } .cliente-detalle-seccion h4{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.5px; color: var(--text-dim); margin:0 0 8px; } .cliente-detalle-productos{ display:flex; flex-direction:column; gap:6px; } .cliente-detalle-producto-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background: var(--bg-panel-2); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:0.82rem; } .cliente-detalle-producto-row .cant{ color: var(--text-dim); font-size:0.74rem; } /* ---- Modal "Ver servicios" de un turno ---- */ .ver-servicios-lista{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; max-height:50vh; overflow-y:auto; text-align:left; } .ver-servicio-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background: var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .ver-servicio-info{ min-width:0; } .ver-servicio-nombre{ font-size:0.88rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ver-servicio-precio{ font-size:0.78rem; color: var(--text-dim); margin-top:2px; } .ver-servicio-acciones{ display:flex; gap:6px; flex-shrink:0; } .ver-servicio-btn{ width:34px; height:34px; min-height:auto; padding:0; border-radius:9px; background: var(--bg-panel); border:1px solid var(--line); color: var(--text-dim); display:flex; align-items:center; justify-content:center; } .ver-servicio-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; } .ver-servicio-btn.editar:active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .ver-servicio-btn.borrar:active{ background: rgba(224,95,95,0.14); color:#e05f5f; border-color: rgba(224,95,95,0.4); } .cliente-detalle-acciones{ display:flex; flex-direction:column; gap:8px; } .cliente-detalle-accion{ display:flex; align-items:center; justify-content:center; gap:8px; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text); border-radius:10px; padding:12px 10px; font-size:0.86rem; font-weight:700; min-height:auto; width:100%; } .cliente-detalle-accion.primary{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .cliente-detalle-accion.warn{ background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .cliente-detalle-accion:active{ filter: brightness(0.95); } label{ font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; display:block; margin-bottom: 5px; } input, select{ width:100%; min-width:0; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 12px 12px; font-size: 1rem; min-height: 46px; } input:focus, select:focus{ outline: none; border-color: var(--accent); } button{ cursor:pointer; font-weight:600; border-radius: 8px; border: none; padding: 12px 14px; font-size: 0.92rem; min-height: 44px; transition: transform 0.08s ease, filter 0.15s ease, opacity 0.15s ease, background 0.15s ease; } button:active{ transform: scale(0.96); } .btn-primary{ background: var(--accent); color: #201400; margin-top: 4px; width: 100%; } .btn-primary:active{ filter: brightness(0.95); } .btn-primary:disabled{ opacity:0.5; } .btn-ghost{ background: transparent; border: 1px solid var(--line); color: var(--text-dim); } .btn-ghost:active{ color: var(--text); border-color: var(--text-dim); } .btn-small{ padding: 8px 10px; font-size: 0.76rem; min-height: 38px; } .btn-ok{ background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); } .btn-info{ background: var(--info-soft); color: var(--info); border: 1px solid var(--info); } /* ---- Config ---- */ .config-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap: 14px; } .config-toggle-label{ font-size: 0.92rem; font-weight: 600; } .config-toggle-sub{ font-size: 0.76rem; color: var(--text-dim); margin-top: 3px; } .switch{ position: relative; display:inline-block; width: 50px; height: 30px; flex-shrink:0; } .switch input{ opacity:0; width:0; height:0; } .switch .slider{ position:absolute; cursor:pointer; inset:0; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 30px; transition: background 0.15s ease, border-color 0.15s ease; } .switch .slider::before{ content:""; position:absolute; height: 22px; width: 22px; left: 3px; top: 3px; background: var(--text-dim); border-radius:50%; transition: transform 0.15s ease, background 0.15s ease; } .switch input:checked + .slider{ background: var(--accent-soft); border-color: var(--accent); } .switch input:checked + .slider::before{ transform: translateX(20px); background: var(--accent); } .config-limite-fields{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); transition: opacity 0.15s ease; } .config-limite-fields.disabled{ opacity: 0.4; pointer-events: none; } .config-hint{ font-size: 0.8rem; color: var(--text-dim); margin: 0 0 12px; line-height: 1.4; } /* ---- Menú lateral del header (1.6) ---- Panel angosto que entra deslizando desde la izquierda (mismo lado que el botón de 3 líneas), con el fondo oscurecido atrás — mismo patrón de fondo que ya usa el sheet de acciones rápidas del botón "+", pero acá el panel entra por el costado en vez de por abajo. El contenido (#masLista) se mueve para adentro de .menu-lateral-body por JS al abrir, así que este panel no tiene estilos propios de lista: solo el encabezado "Más" y el recuadro que lo contiene. */ .menu-lateral-overlay{ position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.55); opacity:0; pointer-events:none; transition: opacity 0.2s ease; } .menu-lateral-overlay.show{ opacity:1; pointer-events:auto; } .menu-lateral-panel{ position:absolute; top:0; left:0; bottom:0; width: 78%; max-width: 300px; background: var(--bg-panel); border-right: 1px solid var(--line); padding: calc(18px + env(safe-area-inset-top)) 18px 18px; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; display:flex; flex-direction:column; } .menu-lateral-overlay.show .menu-lateral-panel{ transform: translateX(0); } .menu-lateral-header{ display:flex; align-items:center; gap:10px; margin-bottom: 6px; } .menu-lateral-header h2{ flex:1; font-size:1.05rem; font-weight:800; margin:0; color: var(--text); } .menu-lateral-body{ flex:1; } /* ---- Lista principal de "Más" (mockup imagen 1, pantalla 7) ---- Reemplaza a la vieja grilla de tarjetas SOLO para el listado de arriba de todo (Servicios, Gastos, Estadísticas, Clientes, Configuración, Perfil): una lista de una columna, filas separadas por una línea fina, sin fondo ni borde propio por fila (a diferencia de .config-hub-card). Los íconos van todos del mismo tono (fondo neutro + trazo dorado), como en el mockup, en vez de un color por ítem. La pantalla de Configuración (Vista/Horarios/Notificaciones/Novedades) NO usa esta lista: sigue con el estilo de tarjetas .config-hub-card de siempre, más abajo. */ .mas-lista{ display:flex; flex-direction:column; } .mas-lista-item{ display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none; border-bottom: 1px solid var(--line); padding: 13px 2px; transition: opacity 0.15s ease; } .mas-lista-item:last-child{ border-bottom:none; } .mas-lista-item:active{ opacity: 0.7; } .mas-lista-icon{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background: var(--bg-panel-2); color: var(--accent); display:flex; align-items:center; justify-content:center; } .mas-lista-icon svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .mas-lista-titulo{ flex:1; font-size:0.92rem; font-weight:700; color: var(--text); } .mas-lista-chevron{ width:18px; height:18px; stroke: var(--text-dim); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* Ítems "Próximamente" (Empleados, Ayuda y soporte — 7.1): son