:root{ /* ── Paleta "Escudo" ────────────────────────────────────── Sale del logo de JeFact: el azul marino del escudo, el azul de la flecha que sube y el dorado del sello. Los nombres viejos (--verde, --teal-*, --sol) se quedan para no tocar el resto. */ --tinta:#0B1B36; /* azul marino: el escudo */ --tinta-2:#112748; /* superficie oscura elevada */ --verde:#1A56A6; /* el azul principal (antes verde) */ --verde-vivo:#2A7BD4; /* azul vivo, para acentos claros */ --verde-tenue:#E7F0FB; --sol:#D4912F; /* dorado: el acento del sello */ --sol-hondo:#A86B17; --sol-tenue:#FBF0DD; /* Compatibilidad con el sistema interno ya construido */ --navy-950:#0B1B36; --navy-900:#112748; --navy-800:#18345E; --navy-700:#204274; --teal-600:#1A56A6; --teal-500:#2A7BD4; --teal-400:#6FB2F2; --teal-100:#E7F0FB; --amber-500:#B97614; --amber-100:#FBF0DD; --red-600:#B42318; --red-100:#FDECEA; /* Lo que salió bien (Activo, Aceptado, Pagada) sigue en verde */ --exito:#127235; /* un poco más oscuro: se lee sobre su fondo verde claro */ --exito-tenue:#E3F4E8; --paper:#F7F9FC; /* gris azulado muy claro */ --card:#FFFFFF; --line:#E1E7F0; --ink:#0F1B2D; --ink-soft:#4A5A70; /* El gris de las notas: con contraste de 4.5 a 1 sobre blanco (antes #8A97AB, 3 a 1: no se leía con el sol o en un celular viejo) */ --ink-faint:#617087; --mono: 'IBM Plex Mono','SF Mono',Consolas,monospace; --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --serif: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif; --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif; } html.modo-oscuro{ --paper:#0A1324; --card:#111D33; --line:#22324D; --ink:#E7EEF8; --ink-soft:#A3B2C8; --ink-faint:#8B9BB4; --teal-100:#15294A; --verde-tenue:#15294A; --exito:#4ADE80; --exito-tenue:#123322; --amber-100:#33260F; --sol-tenue:#33260F; --red-100:#33191A; } html.modo-oscuro body{ background:var(--paper); color:var(--ink); } /* En modo oscuro, los botones normales toman el color de la tarjeta (antes quedaban blancos con la letra clara: no se leían) */ html.modo-oscuro .btn:not(.btn-teal):not(.btn-primary){ background:var(--card); } html.modo-oscuro .btn-social{ background:var(--card); } /* Punto de venta */ :root{ --pos-acento:#1A56A6; --pos-sobre:#fff; --pos-rojo:#A83232; --pos-ambar:#8A5410; } html.modo-oscuro{ --pos-acento:#6FB2F2; --pos-sobre:#0B1B36; --pos-rojo:#F08A8A; --pos-ambar:#F2B865; } .pos-encabezado{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:10px; } .pos-atajos{ color:var(--ink-faint); font-size:12px; white-space:nowrap; } .pos-barra{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; padding:10px 14px; margin-bottom:12px; font-size:13.5px; } .pos-turno-info{ display:flex; gap:9px; align-items:flex-start; min-width:0; } .pos-turno-acciones{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pos-punto{ width:10px; height:10px; border-radius:50%; margin-top:5px; flex:0 0 auto; } .pos-punto.verde{ background:var(--teal-500); } .pos-punto.rojo{ background:var(--red-600); } .pos-punto.gris{ background:var(--ink-faint); } .pos-nota{ font-size:12.5px; color:var(--ink-soft); } .pos-ambar{ color:var(--pos-ambar); } .pos-rojo{ color:var(--pos-rojo); } .pos-suave{ color:var(--ink-soft); font-weight:400; } .pos-corto{ width:110px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); font-family:var(--mono); font-size:14px; } .pos-rejilla{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,390px); gap:14px; align-items:start; } .pos-buscador{ display:flex; gap:8px; } .pos-buscar{ flex:1 1 auto; min-width:0; font-size:18px; padding:12px 14px; border:2px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font-family:var(--sans); } .pos-buscar:focus{ outline:none; border-color:var(--pos-acento); box-shadow:0 0 0 3px var(--teal-100); } .pos-ayuda{ font-size:12px; color:var(--ink-soft); margin:6px 2px 0; } .pos-aviso{ margin-top:8px; padding:9px 12px; border-radius:8px; font-size:13px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pos-aviso-info{ background:var(--paper); border:1px solid var(--line); } .pos-aviso-ok{ background:var(--teal-100); color:var(--ink); } .pos-aviso-error{ background:var(--red-100); color:var(--pos-rojo); } .pos-asignando{ margin-top:8px; padding:9px 12px; border-radius:8px; background:var(--amber-100); font-size:13px; } .pos-subtitulo{ font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); margin:12px 2px 6px; min-height:14px; } .pos-productos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; } .pos-prod{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 11px; cursor:pointer; font-family:var(--sans); color:var(--ink); min-height:84px; display:flex; flex-direction:column; justify-content:space-between; gap:6px; } .pos-prod:hover{ border-color:var(--ink-faint); } .pos-prod.marcado, .pos-prod:focus-visible{ outline:none; border-color:var(--pos-acento); box-shadow:0 0 0 2px var(--pos-acento) inset; } .pos-prod .n{ font-size:13.5px; line-height:1.25; font-weight:600; overflow-wrap:anywhere; } .pos-prod .p{ font-family:var(--mono); font-size:14.5px; } .pos-prod .q{ font-size:11.5px; color:var(--ink-soft); } .pos-prod.agotado .p, .pos-prod.agotado .n{ opacity:.6; } .pos-vacio{ grid-column:1/-1; padding:26px 12px; text-align:center; color:var(--ink-soft); font-size:13.5px; } .pos-ticket{ position:sticky; top:12px; display:flex; flex-direction:column; max-height:calc(100vh - 110px); overflow:hidden; } .pos-ticket-cab{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); } .pos-lineas{ overflow:auto; flex:1 1 auto; min-height:120px; } .pos-linea{ display:grid; grid-template-columns:minmax(0,1fr) auto 76px 28px; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); } .pos-linea.reciente{ background:var(--teal-100); } .pos-l-nombre .n{ font-size:13.5px; font-weight:600; overflow-wrap:anywhere; } .pos-l-nombre .d{ font-size:11.5px; color:var(--ink-soft); } .pos-falta{ font-size:11.5px; color:var(--pos-rojo); font-weight:600; } .pos-cant{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .pos-cant button{ width:30px; height:32px; border:0; background:var(--paper); color:var(--ink); font-size:17px; cursor:pointer; } .pos-cant .pos-btn-monto{ width:auto; padding:0 7px; font-size:11.5px; font-weight:600; border-left:1px solid var(--line); color:var(--teal-600); } .pos-cant input{ width:52px; height:32px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font-family:var(--mono); font-size:14px; background:var(--card); color:var(--ink); } .pos-l-total{ font-family:var(--mono); text-align:right; font-size:14px; } .pos-x{ border:0; background:none; color:var(--ink-faint); font-size:20px; cursor:pointer; line-height:1; padding:4px; } .pos-x:hover{ color:var(--pos-rojo); } .pos-totales{ padding:10px 14px 6px; border-top:1px solid var(--line); } .pos-fila{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:13.5px; } .pos-fila-total{ align-items:baseline; border-top:1px solid var(--line); margin-top:6px; padding-top:8px; font-weight:700; } .pos-total{ font-family:var(--mono); font-size:28px; font-weight:700; } .pos-cobrar{ width:100%; font-size:18px; padding:13px; border-radius:10px; font-weight:600; } .pos-cobrar:disabled, .pos-c-ok:disabled, .pos-movil .btn:disabled{ opacity:.55; cursor:not-allowed; } .pos-tecla{ display:inline-block; font-size:11px; font-weight:600; border:1px solid currentColor; border-radius:4px; padding:0 4px; margin-left:6px; opacity:.85; } .pos-ultima{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; line-height:1.6; } .pos-pendientes{ font-size:12.5px; margin-top:8px; line-height:1.5; padding:8px 10px; border-radius:8px; background:var(--sol-tenue, #FEF3C7); color:var(--sol-hondo, #92400E); } .pos-enlace{ background:none; border:0; padding:0; color:var(--pos-acento); text-decoration:underline; cursor:pointer; font:inherit; } .pos-modal-titulo{ font-family:var(--serif); font-size:17px; margin-bottom:4px; padding-right:24px; } .pos-c-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 26px 12px 0; font-family:var(--serif); font-size:17px; } .pos-formas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:12px; } .pos-formas .btn{ padding:10px 6px; font-weight:600; } .pos-formas .btn[aria-pressed="true"]{ background:var(--pos-acento); color:var(--pos-sobre); border-color:var(--pos-acento); } .pos-c-recibido{ font-family:var(--mono) !important; font-size:20px !important; } .pos-rapidos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .pos-rapidos .btn{ font-family:var(--mono); } .pos-devuelta-caja{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:10px; min-height:40px; font-size:15px; } .pos-devuelta{ font-family:var(--mono); font-size:30px; font-weight:800; color:var(--pos-acento); } .pos-c-cliente{ margin-top:12px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; } .pos-c-cliente summary{ cursor:pointer; font-size:13.5px; } .pos-c-campos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; } .pos-c-tipo{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; min-height:16px; } .pos-c-tipo.pos-rojo{ color:var(--pos-rojo); } .pos-c-msg{ font-size:13px; margin-top:8px; } .pos-c-msg:empty{ display:none; } .pos-c-msg.error{ color:var(--pos-rojo); background:var(--red-100); padding:8px 10px; border-radius:6px; } .pos-c-imprimir{ display:flex; align-items:center; gap:8px; font-size:13px; margin-top:12px; cursor:pointer; } .pos-c-acciones{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px; } .pos-hecho{ text-align:center; padding:6px 0 0; } .pos-hecho-titulo{ font-size:20px; font-weight:700; color:var(--pos-acento); } .pos-hecho-aviso .pos-hecho-titulo{ color:var(--pos-ambar); } .pos-hecho-ncf{ font-size:13px; color:var(--ink-soft); margin-top:4px; } .pos-hecho-devuelta{ display:flex; flex-direction:column; align-items:center; margin:16px 0 6px; } .pos-hecho-devuelta span{ font-size:14px; color:var(--ink-soft); } .pos-hecho-devuelta b{ font-family:var(--mono); font-size:40px; line-height:1.15; } .pos-hecho-devuelta small{ font-size:12px; color:var(--ink-soft); } .pos-hecho-estado{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; text-align:left; background:var(--paper); border-radius:6px; padding:8px 10px; } /* El pedido de la cocina: la nota del plato, para llevar o delivery, y el número del pedido */ .pos-hecho-cocina{ font-size:13.5px; color:var(--ink); margin-top:8px; text-align:left; background:var(--teal-100); border-radius:6px; padding:8px 10px; line-height:1.5; } .pos-hecho-cocina .btn{ margin-left:6px; padding:3px 10px; font-size:12.5px; } .pos-nota{ display:inline-block; max-width:100%; margin-top:3px; padding:2px 8px; border:1px dashed var(--line); border-radius:6px; background:none; color:var(--teal-600); font-size:12px; text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pos-nota.llena{ border-style:solid; border-color:var(--amber-500); background:var(--amber-100); color:var(--ink); font-weight:600; } .nota-plato{ margin-top:4px; padding:3px 8px; border-radius:6px; background:var(--amber-100); color:var(--ink); font-size:14px; font-weight:600; } .entrega-plato{ margin-top:6px; padding:4px 8px; border-radius:6px; background:var(--teal-100); color:var(--ink); font-size:13px; line-height:1.45; } .pos-hecho .pos-c-acciones{ justify-content:center; } .pos-den-titulo{ font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); margin:10px 0 6px; } .pos-dens{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; } .pos-den{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px; padding:4px 4px 4px 10px; } .pos-den label{ font-family:var(--mono); font-size:13px; min-width:44px; } .pos-den input{ width:100%; min-width:0; border:0; background:transparent; color:var(--ink); font-family:var(--mono); font-size:15px; padding:6px; text-align:right; } .pos-den:focus-within{ border-color:var(--pos-acento); box-shadow:0 0 0 2px var(--teal-100); } .pos-cierre-resultado{ text-align:center; font-size:24px; font-weight:700; padding:12px; border-radius:8px; margin:10px 0 12px; } .pos-cierre-resultado.exacto{ background:var(--teal-100); color:var(--pos-acento); } .pos-cierre-resultado.falta{ background:var(--red-100); color:var(--pos-rojo); } .pos-cierre-resultado.sobra{ background:var(--amber-100); color:var(--pos-ambar); } .pos-ventas{ display:flex; flex-direction:column; } .pos-venta{ display:grid; grid-template-columns:1.4fr .9fr 1fr 1fr auto; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; align-items:center; } .pos-movil{ display:none; } .pos-cab-acciones{ display:flex; gap:8px; flex-wrap:wrap; } .pos-dev-recientes{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; } .pos-dev-recientes .btn{ font-size:12.5px; padding:6px 10px; } .pos-dev-venta-cab{ margin-top:14px; padding:10px 12px; background:var(--paper); border-radius:8px; font-size:13.5px; display:flex; justify-content:space-between; gap:4px 14px; flex-wrap:wrap; align-items:baseline; } .pos-dev-tabla{ margin-top:10px; border-top:1px solid var(--line); } .pos-dev-fila{ display:grid; grid-template-columns:minmax(0,1fr) auto 84px 96px; gap:10px; align-items:center; padding:8px 6px; border-bottom:1px solid var(--line); font-size:13.5px; } .pos-dev-fila.marcada{ background:var(--teal-100); } .pos-dev-fila b{ overflow-wrap:anywhere; } .pos-dev-fila small{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:2px; } .pos-dev-th{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); padding-top:6px; padding-bottom:6px; } .pos-der{ text-align:right; justify-self:end; } .pos-dev-check{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; } .pos-dev-campos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:14px; margin-top:12px; align-items:start; } .pos-dev-campos .pos-formas{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:6px; } .pos-formas .btn:disabled{ opacity:.45; cursor:not-allowed; } .pos-dev-etiqueta{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; letter-spacing:0.01em; } .pos-dev-totales{ margin-top:8px; border:1px solid var(--line); border-radius:8px; } .pos-dev-pendiente{ background:var(--amber-100); justify-content:space-between; } @media (max-width: 560px){ .pos-cab-acciones{ width:100%; } .pos-dev-th{ display:none; } .pos-dev-fila{ grid-template-columns:minmax(0,1fr) auto; row-gap:6px; } .pos-dev-fila .pos-der{ justify-self:start; text-align:left; } .pos-dev-fila > span:nth-child(4){ justify-self:end; } .pos-dev-campos{ grid-template-columns:1fr; } } .sr-solo{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (max-width: 980px){ .pos-rejilla{ grid-template-columns:1fr; } .pos-ticket{ position:static; max-height:none; } #view-pos{ padding-bottom:80px; } .pos-movil{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; gap:10px; align-items:center; justify-content:space-between; padding:10px 14px 10px 84px; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -4px 14px rgba(0,0,0,0.08); } .pos-movil b{ font-family:var(--mono); font-size:20px; } .pos-movil .btn{ font-size:16px; padding:11px 22px; } } @media (max-width: 560px){ .pos-productos{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pos-buscar{ font-size:16px; } .pos-linea{ grid-template-columns:minmax(0,1fr) auto 64px 24px; padding:8px 10px; } .pos-formas{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pos-c-campos{ grid-template-columns:1fr; } .pos-venta{ grid-template-columns:1fr 1fr; } .pos-atajos{ display:none; } } /* Gráficos de tendencia del panel: columnas en HTML, nítidas a cualquier ancho */ .tend-graf{ width:100%; } .tend-barras{ display:flex; align-items:flex-end; gap:3px; height:118px; border-bottom:1px solid var(--line); } .tend-col{ flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; } .tend-barra{ display:block; width:72%; max-width:26px; border-radius:4px 4px 0 0; } .tend-val{ font-size:10.5px; color:var(--ink-soft); margin-bottom:2px; white-space:nowrap; font-variant-numeric:tabular-nums; } .tend-meses{ display:flex; gap:3px; margin-top:4px; } .tend-meses span{ flex:1 1 0; min-width:0; text-align:center; font-size:10.5px; color:var(--ink-soft); } @media (max-width: 640px){ .ayuda-texto{ display:none; } } html.modo-oscuro img{ opacity:0.92; } *{box-sizing:border-box;} body{margin:0;font-family:var(--sans);font-optical-sizing:auto;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;} a{color:inherit;} /* ══════════════════════════════════════════════════════════ EL COMPROBANTE — elemento firma del landing Un e-CF que se arma solo: el NCF se teclea, las líneas entran una por una, los totales suben y el sello aterriza. ══════════════════════════════════════════════════════════ */ .cf{ position:relative; background:#fff; border-radius:4px; box-shadow:0 28px 70px rgba(11,31,26,0.26), 0 2px 0 rgba(11,31,26,0.06); overflow:hidden; max-width:400px; width:100%; } /* El borde dentado de arriba, como el papel térmico */ .cf-borde-sup{ height:9px; background: radial-gradient(circle at 5px 9px, transparent 5px, var(--verde) 5px) 0 0/10px 9px repeat-x; } .cf-cuerpo{ padding:22px 24px 68px; } .cf-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); } .cf-emisor{ font-size:13px; font-weight:700; letter-spacing:0.02em; color:var(--tinta); } .cf-rnc{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:3px; } .cf-tipo{ background:var(--verde); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:0.08em; padding:5px 9px; border-radius:3px; white-space:nowrap; } .cf-tipo span{ font-family:var(--mono); margin-left:5px; opacity:0.72; } .cf-ncf-bloque{ padding:16px 0 14px; } .cf-etiqueta{ font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; } .cf-ncf{ font-family:var(--mono); font-size:23px; font-weight:600; letter-spacing:0.04em; color:var(--tinta); min-height:30px; } .cf-ncf::after{ content:''; display:inline-block; width:2px; height:20px; background:var(--sol); margin-left:3px; vertical-align:-3px; animation:cf-cursor 0.9s step-end infinite; } .cf.listo .cf-ncf::after{ display:none; } @keyframes cf-cursor{ 50%{ opacity:0 } } .cf-lineas{ border-top:1px dashed var(--line); padding-top:12px; min-height:96px; } .cf-linea{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:5px 0; color:var(--ink-soft); opacity:0; transform:translateY(6px); animation:cf-entra 0.42s cubic-bezier(.22,.9,.3,1) forwards; } .cf-linea b{ font-family:var(--mono); font-weight:500; color:var(--tinta); white-space:nowrap; } .cf-linea i{ font-style:normal; color:var(--ink-faint); font-family:var(--mono); font-size:11px; margin-right:7px; } @keyframes cf-entra{ to{ opacity:1; transform:none } } .cf-totales{ border-top:1px solid var(--line); margin-top:12px; padding-top:12px; } .cf-fila{ display:flex; justify-content:space-between; font-size:12.5px; padding:3px 0; color:var(--ink-soft); } .cf-fila b{ font-family:var(--mono); font-weight:500; color:var(--tinta); } .cf-total{ margin-top:7px; padding-top:9px; border-top:2px solid var(--tinta); font-size:15px; color:var(--tinta); font-weight:600; } .cf-total b{ font-size:17px; font-weight:700; } /* El sello aterriza girado, como uno de goma */ .cf-sello{ position:absolute; left:24px; bottom:16px; border:2.5px solid var(--verde); color:var(--verde); padding:7px 13px 5px; border-radius:3px; text-align:center; transform:rotate(-11deg) scale(1.9); opacity:0; transition:opacity .3s ease, transform .42s cubic-bezier(.2,1.5,.4,1); } .cf-sello.puesto{ opacity:0.92; transform:rotate(-11deg) scale(1); } .cf-sello-txt{ font-size:14px; font-weight:900; letter-spacing:0.1em; line-height:1; } .cf-sello-sub{ font-family:var(--mono); font-size:9px; letter-spacing:0.22em; margin-top:2px; opacity:0.8; } .cf-pie{ display:flex; align-items:center; gap:9px; margin-top:16px; font-size:12.5px; color:var(--ink-soft); opacity:0; transition:opacity .5s ease .2s; } .cf-pie.visible{ opacity:1; } .cf-pie b{ font-family:var(--mono); color:var(--verde); font-weight:600; } .cf-punto{ width:7px; height:7px; border-radius:50%; background:var(--verde-vivo); flex-shrink:0; box-shadow:0 0 0 0 rgba(42,123,212,0.55); animation:cf-pulso 2s infinite; } @keyframes cf-pulso{ 70%{ box-shadow:0 0 0 9px rgba(42,123,212,0) } 100%{ box-shadow:0 0 0 0 rgba(42,123,212,0) } } @media (prefers-reduced-motion: reduce){ .cf-linea{ animation:none; opacity:1; transform:none; } .cf-sello{ transition:none; } .cf-ncf::after{ animation:none; } .cf-punto{ animation:none; } } @media (max-width:860px){ .cf{ max-width:100%; } .cf-ncf{ font-size:20px; } } /* ---------- Shell ---------- */ .shell{display:none;min-height:100vh;} .sidebar{ width:220px;flex-shrink:0;background:var(--navy-950);color:#DDE4EA; display:flex;flex-direction:column;padding:20px 0; } .brand{ display:flex;align-items:center;gap:10px;padding:0 20px 20px; border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:14px; } .brand-mark{ width:34px;height:34px;border-radius:8px;background:linear-gradient(160deg,var(--teal-500),var(--teal-600)); background-color:#fff;background-repeat:no-repeat;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:15px;color:#fff; } .brand-name{font-family:var(--serif);font-size:16px;letter-spacing:0.2px;} .brand-sub{font-size:10px;color:#7C8A97;letter-spacing:0.5px;text-transform:uppercase;margin-top:1px;} .nav-group{padding:0 12px;margin-bottom:18px;} .nav-label{font-size:10px;text-transform:uppercase;letter-spacing:0.8px;color:#5C6A78;padding:6px 10px 6px;} .nav-item{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px; font-size:13.5px;color:#C3CBD3;cursor:pointer;margin-bottom:1px;border-left:2px solid transparent; } .nav-item:hover{background:rgba(255,255,255,0.05);} .nav-item.active{background:rgba(29,158,117,0.14);color:#fff;border-left:2px solid var(--teal-500);} .nav-icon{width:16px;text-align:center;font-family:var(--mono);font-size:12px;color:#7C8A97;} .nav-item.active .nav-icon{color:var(--teal-500);} .sidebar-foot{margin-top:auto;padding:14px 20px 0;border-top:1px solid rgba(255,255,255,0.08);font-size:11px;color:#5C6A78;} .main{flex:1;display:flex;flex-direction:column;min-width:0;} .topbar{ height:56px;flex-shrink:0;background:var(--card);border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;padding:0 24px; } .topbar-title{font-family:var(--serif);font-size:18px;} .topbar-actions{display:flex;gap:10px;align-items:center;} .rnc-pill{ font-family:var(--mono);font-size:11px;background:var(--paper);border:1px solid var(--line); padding:4px 10px;border-radius:6px;color:var(--ink-soft); } .content{flex:1;padding:24px;overflow-y:auto;} .view{display:none;} .view.active{display:block;} /* ---------- Shared bits ---------- */ h1.page-title{font-family:var(--serif);font-size:22px;margin:0 0 4px;} .page-sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 22px;} .btn{ font-family:var(--sans);font-size:13.5px;padding:8px 14px;border-radius:6px;border:1px solid var(--line); background:#fff;cursor:pointer;color:var(--ink); } .btn:hover{border-color:var(--ink-faint);} .btn-primary{background:var(--navy-950);color:#fff;border-color:var(--navy-950);} .btn-primary:hover{background:var(--navy-800);} .btn-teal{background:var(--teal-600);color:#fff;border-color:var(--teal-600);} .btn-teal:hover{background:var(--teal-500);} .btn-social{ display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px; border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer; font-family:var(--sans);font-size:13.5px;color:var(--ink); } .btn-social:hover{border-color:var(--ink-faint);background:var(--paper);} .btn-social .social-icon{ width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;flex-shrink:0; } .card{background:var(--card);border:1px solid var(--line);border-radius:10px;transition:box-shadow 0.15s;} .card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.06);} .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;} .stat{padding:18px 20px;} .stat-label{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:10px;font-weight:500;} .stat-value{font-family:var(--serif);font-size:23px;letter-spacing:-0.3px;} .stat-delta{font-size:12px;margin-top:5px;color:var(--ink-soft);} .up{color:var(--teal-600);} .down{color:var(--red-600);} table{width:100%;border-collapse:collapse;font-size:13.5px;} th{ text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink-soft); padding:11px 16px;border-bottom:1.5px solid var(--line);font-weight:600;background:var(--paper); } td{padding:11px 16px;border-bottom:1px solid var(--line);} tr:last-child td{border-bottom:none;} tr:hover td{background:var(--paper);} .mono{font-family:var(--mono);font-size:12.5px;} .num{text-align:right;font-family:var(--mono);} .badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:6px;font-weight:500;letter-spacing:0.2px;} .badge-teal{background:var(--exito-tenue);color:var(--exito);} .badge-amber{background:var(--amber-100);color:var(--amber-500);} .badge-blue{background:#E6EFFB;color:#1A56A6;} html.modo-oscuro .badge-blue{background:rgba(95,168,255,.16);color:#9CC8FF;} .badge-red{background:var(--red-100);color:var(--red-600);} /* Tablas de estilo contable formal (Catálogo de cuentas, Libro Diario, Estados Financieros) — imitan el aire de un documento contable impreso: doble línea superior, encabezados en versalitas espaciadas, y montos siempre en fuente monoespaciada alineados a la derecha. */ .tabla-contable{border-top:2.5px solid var(--ink);border-bottom:1.5px solid var(--ink);} .tabla-contable th{ font-family:var(--serif);font-size:11.5px;text-transform:uppercase;letter-spacing:0.6px; color:var(--ink);background:var(--paper);border-bottom:1.5px solid var(--ink);padding:9px 14px; } .tabla-contable td{font-size:13px;padding:9px 14px;border-bottom:1px solid var(--line);} .tabla-contable tr:last-child td{border-bottom:none;} .tabla-contable td.mono, .tabla-contable td.num{font-family:var(--mono);} .tabla-contable tr.fila-total td{border-top:1.5px solid var(--ink);font-weight:600;} .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .toolbar{display:flex;gap:10px;margin-bottom:16px;} .grafico-modo-btn{color:var(--ink-soft);background:var(--card);} .real-tab-btn{color:var(--ink-soft);background:var(--card);} .real-tab-btn.real-tab-activo{background:var(--teal-500);color:#fff;} .grafico-modo-btn.grafico-modo-activo{background:var(--teal-500);color:#fff;} .toolbar input, .toolbar select{ padding:8px 12px;border:1px solid var(--line);border-radius:6px;font-size:13.5px;font-family:var(--sans); background:var(--card);color:var(--ink); } .toolbar input:focus, .toolbar select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(26,86,166,0.10);} .toolbar input[type="text"]{flex:1;} /* ---------- Form (facturación) ---------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px;} /* En modales anchos el formulario respira más */ .modal-ancho .form-grid{grid-template-columns:repeat(2,1fr);gap:20px;padding:24px;} @media (max-width: 720px){ .form-grid{grid-template-columns:1fr !important;gap:14px;padding:18px;} } .form-grid.span2{grid-column:1/-1;} /* La ventana del artículo cabe en la pantalla: lo de adentro baja con su barra y los botones quedan a la vista */ .art-ventana{ background:var(--card); width:100%; max-width:640px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,0.25); } .art-cuerpo{ padding:16px 20px; overflow-y:auto; flex:1 1 auto; min-height:0; overscroll-behavior:contain; } .art-fila{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; align-items:end; } .art-fila > .field{ margin:0; min-width:0; } .art-fila-codigo{ grid-template-columns:130px 1fr; } .art-mas{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; } /* Las líneas del conduce: casillas como las demás; en el celular, cada línea en dos renglones */ .con-tabla{ width:100%; border-collapse:collapse; } .con-tabla th{ text-align:left; } .con-tabla td{ padding:5px 4px; vertical-align:middle; } .con-tabla input{ width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:6px; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--card); } .con-tabla input:focus{ outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100); } .con-tabla .con-cant, .con-tabla .con-precio{ font-family:var(--mono); text-align:right; } .con-tabla .con-hay{ font-size:12.5px; color:var(--ink-soft); } .con-quitar{ cursor:pointer; color:var(--ink-faint); padding:4px 6px; } @media (max-width:600px){ .con-tabla thead{ display:none; } .con-tabla, .con-tabla tbody{ display:block; min-width:0; } .con-tabla tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; gap:6px 8px; align-items:end; padding:8px 0; border-bottom:1px solid var(--line); } .con-tabla td{ padding:0; border:none; min-width:0; } .con-tabla input{ min-width:0; } .con-tabla .con-hay{ padding-bottom:9px; } .con-tabla td:first-child{ grid-column:1 / -1; } .con-tabla td[data-titulo]::before{ content:attr(data-titulo); display:block; font-size:11px; font-weight:600; color:var(--ink-faint); margin-bottom:3px; font-family:var(--sans); } .con-tabla input{ font-size:16px; } .con-tabla.con-entrega tr{ grid-template-columns:repeat(4, minmax(0,1fr)); } } /* La firma con el dedo (o el ratón) de quien recibe un conduce */ .pad-firma{ width:100%; height:160px; border:1.5px dashed #9AA8BC; border-radius:10px; background:#fff; touch-action:none; display:block; cursor:crosshair; } .foto-entrega{ max-width:100%; max-height:220px; border-radius:8px; margin-top:8px; display:none; } .art-mas > summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--blue-700, #1A56A6); padding:2px 0; } @media (max-width:520px){ #nuevo-articulo-overlay{ padding:10px !important; } .art-ventana{ max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); } .art-cuerpo{ padding:14px 14px; } .art-fila-ancha{ grid-template-columns:1fr; } .art-fila-codigo{ grid-template-columns:96px 1fr; } } .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;letter-spacing:0.01em;} .field input, .field select{ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:6px;font-family:var(--sans); font-size:15px;color:var(--ink);background:var(--card);transition:border-color .15s ease; } .field input:focus, .field select:focus{ outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(26,86,166,0.10); } .field input:focus, .field select:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px var(--teal-100);} .field.mono-field input{font-family:var(--mono);} #cliente-suggestions{ position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--card); border:1px solid var(--line);border-radius:6px;margin-top:2px;box-shadow:0 4px 12px rgba(0,0,0,0.08); display:none;overflow:hidden; } #cliente-suggestions .sug{ padding:8px 12px;cursor:pointer;font-size:13.5px;display:flex;justify-content:space-between;gap:10px; } #cliente-suggestions .sug:hover{background:var(--paper);} #cliente-suggestions .sug .sug-rnc{font-family:var(--mono);font-size:12px;color:var(--ink-soft);} .item-suggestions{ position:absolute;top:100%;left:4px;right:4px;z-index:20;background:var(--card); border:1px solid var(--line);border-radius:6px;margin-top:2px;box-shadow:0 4px 12px rgba(0,0,0,0.08); display:none;overflow:hidden; } .item-suggestions .sug{ padding:7px 10px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:10px; } .item-suggestions .sug:hover{background:var(--paper);} .item-suggestions .sug .sug-price{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap;} .items-table{margin:0 20px 16px;border:1px solid var(--line);border-radius:8px;overflow:hidden;} .items-table table{font-size:13px;} .items-table input{border:none;background:transparent;font-family:var(--sans);font-size:13.5px;width:100%;padding:4px;} .items-table input.qty, .items-table input.price{font-family:var(--mono);text-align:right;} .inline-edit{ width:100%;border:1px solid transparent;background:transparent;border-radius:5px; padding:4px 6px;font-family:inherit;font-size:inherit;color:inherit; } .inline-edit:hover{border-color:var(--line);background:var(--paper);} .inline-edit:focus{outline:none;border-color:var(--teal-500);background:#fff;box-shadow:0 0 0 3px var(--teal-100);} .items-table input:focus{outline:1px solid var(--teal-500);border-radius:4px;} .totals{margin:0 20px 20px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;} .totals-box{width:260px;font-size:13.5px;} .totals-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--ink-soft);} .totals-row.final{color:var(--ink);font-weight:500;font-size:16px;border-top:1px solid var(--line);margin-top:6px;padding-top:10px;} .totals-row.final .mono{font-size:17px;} .form-actions{display:flex;justify-content:space-between;padding:16px 20px 20px;border-top:1px solid var(--line);} /* ---------- Empty / placeholder module ---------- */ .placeholder{ padding:60px 24px;text-align:center;color:var(--ink-soft); } .placeholder .glyph{font-family:var(--mono);font-size:26px;color:var(--teal-500);margin-bottom:10px;} .placeholder h3{font-family:var(--serif);color:var(--ink);font-size:17px;margin:0 0 6px;} .placeholder p{font-size:13.5px;max-width:420px;margin:0 auto;} .grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;} /* ---------- Pestañas de Configuración ---------- */ /* Van a la par de los campos de formulario (15px). Antes estaban en 13.5px con poco padding y quedaban chicas al lado del resto. */ .config-tab{ padding:13px 22px;font-size:15px;color:var(--ink-soft);cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-1px; line-height:1.3;white-space:nowrap;transition:color .15s, background .15s; border-radius:6px 6px 0 0; } .config-tab:hover{color:var(--ink);background:rgba(0,0,0,0.03);} .config-tab.active{color:var(--ink);border-bottom-color:var(--teal-500);font-weight:600;} /* En pantallas chicas se reduce un poco para que quepan más por fila */ @media (max-width:860px){ .config-tab{padding:11px 15px;font-size:14px;} } /* ---------- Mesas y venta rápida ---------- */ .mesa-card{ background:var(--card);border:1.5px solid var(--line);border-radius:10px; padding:14px;cursor:pointer;transition:all .15s; } .mesa-card:hover{border-color:var(--teal-500);transform:translateY(-1px);} .mesa-card.mesa-activa{border-color:var(--teal-600);background:var(--teal-100);} .producto-btn{ background:var(--card);border:1.5px solid var(--line);border-radius:8px; padding:10px 9px;cursor:pointer;text-align:left;transition:all .12s; display:flex;flex-direction:column;justify-content:space-between;min-height:64px; } .producto-btn:hover{border-color:var(--teal-500);background:var(--teal-100);} .producto-btn:active{transform:scale(0.97);} .producto-btn.producto-sin-stock{opacity:0.55;} .btn-cant{ width:24px;height:24px;border:1px solid var(--line);border-radius:5px; display:inline-flex;align-items:center;justify-content:center; cursor:pointer;font-size:15px;user-select:none;background:var(--card); } .btn-cant:hover{border-color:var(--teal-500);color:var(--teal-600);} /* ---------- Selector de tipo de negocio ---------- */ .tipo-negocio-btn{ padding:16px;border:1.5px solid var(--line);border-radius:10px; cursor:pointer;background:var(--card);transition:all .15s; } .tipo-negocio-btn:hover{border-color:var(--teal-500);transform:translateY(-1px);} .tipo-negocio-btn.tipo-negocio-activo{ border-color:var(--teal-600);background:var(--teal-100); } /* ---------- Selector Persona física / jurídica ---------- */ /* Se elige antes de escribir el documento: la DGII pide distinguirlos (Tipo Id = 1 para RNC, 2 para cédula) y así el sistema sabe cuántos dígitos exigir en vez de adivinarlo por el largo. */ .tipo-persona-btn{ flex:1;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px; cursor:pointer;font-size:14px;background:var(--card);transition:all .15s; } .tipo-persona-btn:hover{border-color:var(--teal-500);} .tipo-persona-btn.tipo-persona-activo{ border-color:var(--teal-500);background:rgba(26,86,166,0.06); } @media (max-width:560px){ .tipo-persona-btn{padding:10px 12px;font-size:13.5px;} } /* ---------- Landing page pública ---------- */ #landing-page{ background:var(--paper);display:block; } .land-nav{ display:flex;align-items:center;justify-content:space-between;padding:14px 48px; background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50; } .land-brand{display:flex;align-items:center;gap:10px;} .land-brand-mark{ width:38px;height:38px;display:flex;align-items:center;justify-content:center; } .land-brand-name{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;} .land-links{display:flex;gap:32px;font-size:13.5px;color:var(--ink-soft);} .land-links span{cursor:pointer;transition:color 0.15s;} .land-links span:hover{color:var(--teal-600);} .land-actions{display:flex;gap:10px;align-items:center;} .land-hero{ max-width:1180px;margin:0 auto;padding:88px 48px 72px;display:grid; grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center; } .land-badge{ display:inline-flex;align-items:center;gap:9px; background:var(--tinta); color:#fff; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; padding:7px 14px; border-radius:3px; margin-bottom:22px; } .land-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sol); flex-shrink:0; } .land-eyebrow{font-size:12px;color:var(--ink-soft);letter-spacing:0.8px;text-transform:uppercase;margin-bottom:12px;} .land-headline{ font-family:var(--display); font-size:clamp(38px, 5.2vw, 60px); font-weight:800; font-stretch:112%; line-height:1.03; letter-spacing:-0.022em; color:var(--ink); margin-bottom:22px; text-wrap:balance; } .land-headline .accent{ color:var(--verde); position:relative; display:inline-block; } /* Un subrayado ámbar dibujado a mano, como el de un rótulo */ .land-headline .accent::after{ content:''; position:absolute; left:-3px; right:-3px; bottom:0.04em; height:0.30em; background:var(--sol); opacity:0.30; border-radius:2px; transform:skewX(-7deg); pointer-events:none; } /* El texto va encima del trazo, no debajo */ .land-headline .accent{ isolation:isolate; } .land-headline .accent::after{ z-index:-1; } .land-headline .accent > span{ position:relative; z-index:1; } .land-headline .accent{color:var(--teal-600);} .land-sub{font-size:17px;color:var(--ink-soft);line-height:1.6;max-width:470px;margin-bottom:32px;font-weight:400;} .land-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;} .land-photo-card{ position:absolute;inset:0;border-radius:6px;overflow:hidden; box-shadow:0 24px 60px rgba(11,22,32,0.22),0 4px 16px rgba(11,22,32,0.08); background:linear-gradient(145deg,var(--navy-900),#0a1520); } .land-photo-caption{ position:absolute;bottom:20px;left:20px;color:#fff;font-size:13.5px;font-weight:500; background:rgba(11,22,32,0.6);backdrop-filter:blur(8px);padding:10px 14px;border-radius:8px; } .land-float-card{ position:absolute;background:var(--card);border:1px solid var(--line);border-radius:12px; padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:12.5px; box-shadow:0 8px 24px rgba(11,22,32,0.12);backdrop-filter:blur(8px); } .land-float-1{top:40px;right:-24px;width:230px;} .land-float-3{bottom:60px;left:-24px;} .land-float-3-icon{width:32px;height:32px;background:var(--teal-100);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--teal-600);font-size:16px;} .land-benefits{max-width:1180px;margin:0 auto;padding:20px 48px 80px;} .land-benefits-title{ font-family:var(--display); font-size:clamp(26px,3.4vw,38px); font-weight:800; font-stretch:110%; letter-spacing:-0.02em; line-height:1.08; text-align:center; color:var(--ink); margin-bottom:12px; text-wrap:balance; } /* Eyebrow tipo etiqueta fiscal sobre cada sección */ .land-eyebrow{ display:block; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--sol-hondo); margin-bottom:12px; } .land-benefits-sub{text-align:center;color:var(--ink-soft);font-size:14.5px;margin-bottom:44px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6;} .land-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .land-card{ background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px; transition:box-shadow 0.2s,transform 0.2s; } .land-card:hover{box-shadow:0 8px 24px rgba(11,22,32,0.08);transform:translateY(-2px);} /* Ticker animado */ .ticker-track{display:inline-block;animation:ticker 40s linear infinite;white-space:nowrap;} .ticker-item{display:inline-block;padding:0 32px;color:#fff;font-size:13px;font-weight:500;} @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* Nav adaptable */ .land-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px 48px;} .land-brand-mark{width:38px;height:38px;display:flex;align-items:center;justify-content:center;} .land-brand-name{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:600;} .land-links span{cursor:pointer;transition:color 0.15s;} .land-links span:hover{color:var(--teal-600);} /* Responsive nav */ @media(max-width:860px){ .land-nav{padding:12px 16px;} #land-nav-desktop{display:none !important;} .land-hamburger{display:block !important;} .land-hero{grid-template-columns:1fr !important;padding:40px 24px !important;} .land-stats{grid-template-columns:repeat(2,1fr) !important;gap:26px !important;padding:0 !important;} .land-visual{margin-top:8px;} .land-benefits{padding:40px 24px !important;} #testimonios-section{padding:40px 24px !important;} } .spinner-carga{ display:inline-block;width:12px;height:12px; border:2px solid rgba(255,255,255,0.3);border-top-color:#fff; border-radius:50%;animation:girar 0.7s linear infinite;flex-shrink:0; } @keyframes girar{to{transform:rotate(360deg)}} .modal-resizable{ position:fixed;background:var(--card);border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,0.25); display:flex;flex-direction:column; min-width:320px;min-height:120px; max-width:96vw;max-height:94vh; overflow:hidden;z-index:200; resize:both; } .modal-resizable.minimizado{ height:44px !important;min-height:44px !important; overflow:hidden;resize:none; } .modal-header-drag{ display:flex;align-items:center;justify-content:space-between; padding:10px 16px;border-bottom:1px solid var(--line); cursor:move;user-select:none;background:var(--card); border-radius:10px 10px 0 0;flex-shrink:0; } .modal-titulo{font-family:var(--serif);font-size:14px;} .modal-btns{display:flex;gap:6px;align-items:center;} .modal-btn{ width:22px;height:22px;border-radius:50%;border:none;cursor:pointer; font-size:11px;display:flex;align-items:center;justify-content:center; } .modal-btn-min{background:var(--amber-100);color:var(--amber-500);} .modal-btn-max{background:var(--teal-100);color:var(--teal-600);} .modal-btn-close{background:var(--red-100);color:var(--red-600);} .modal-body-scroll{flex:1;overflow-y:auto;padding:16px 20px;} .modal-footer-bar{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;} .land-card-glyph{ width:40px;height:40px;border-radius:10px;background:var(--teal-100);color:var(--teal-600); display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;margin-bottom:16px; } .land-card h4{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-0.01em;margin:0 0 8px;color:var(--ink);} .land-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0;} .faq-categoria{font-size:11.5px;font-weight:700;color:var(--teal-600);letter-spacing:0.7px;text-transform:uppercase;margin:28px 0 8px;} .faq-item{border-bottom:1px solid var(--line);} .faq-pregunta{ display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 4px;cursor:pointer;font-size:15px;color:var(--ink);font-weight:500; } .faq-chevron{transition:transform 0.2s ease;color:var(--ink-soft);flex-shrink:0;} .faq-item.open .faq-chevron{transform:rotate(180deg);} .faq-respuesta{max-height:0;overflow:hidden;transition:max-height 0.25s ease;} .faq-item.open .faq-respuesta{max-height:400px;} .faq-respuesta p{padding:0 4px 18px;font-size:14px;color:var(--ink-soft);line-height:1.65;margin:0;} .land-contacto-section{background:var(--navy-900);color:#fff;padding:64px 48px;text-align:center;} .land-contacto-section h2{font-family:var(--serif);font-size:30px;margin:0 0 12px;letter-spacing:-0.3px;} .land-contacto-section p{font-size:15px;color:rgba(255,255,255,0.65);margin:0 0 28px;} .land-footer{text-align:center;padding:24px 48px;font-size:12.5px;color:var(--ink-faint);border-top:1px solid var(--line);} .land-benefits{max-width:1180px;margin:0 auto;padding:20px 40px 80px;} .land-benefits-title{font-family:var(--serif);font-size:26px;text-align:center;color:var(--ink);margin-bottom:8px;} .land-benefits-sub{text-align:center;color:var(--ink-soft);font-size:14px;margin-bottom:40px;} .land-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .land-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;} .land-card-glyph{ width:36px;height:36px;border-radius:8px;background:var(--teal-100);color:var(--teal-600); display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;margin-bottom:14px; } .land-card h4{font-family:var(--serif);font-size:15.5px;margin:0 0 6px;color:var(--ink);} .land-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0;} .faq-categoria{font-size:12px;font-weight:700;color:var(--teal-600);letter-spacing:0.6px;text-transform:uppercase;margin:26px 0 6px;} .faq-item{border-bottom:1px solid var(--line);} .faq-pregunta{ display:flex;justify-content:space-between;align-items:center;gap:16px; padding:16px 4px;cursor:pointer;font-size:15px;color:var(--ink); } .faq-chevron{transition:transform 0.2s ease;color:var(--ink-soft);flex-shrink:0;} .faq-item.open .faq-chevron{transform:rotate(180deg);} .faq-respuesta{max-height:0;overflow:hidden;transition:max-height 0.25s ease;} .faq-item.open .faq-respuesta{max-height:400px;} .faq-respuesta p{padding:0 4px 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0;} /* ---------- Móvil: menú hamburguesa y sidebar deslizable ---------- */ .hamburger-btn{display:none;font-size:20px;cursor:pointer;color:var(--ink-soft);line-height:1;padding:4px;} /* ---------- Menú lateral que se puede esconder en la computadora ---------- */ @media (min-width: 861px){ .hamburger-btn{ display:block; border-radius:6px; } .hamburger-btn:hover{ background:var(--line); color:var(--ink); } .sidebar{ transition: margin-left .2s ease, visibility .2s; } .shell.menu-oculto .sidebar{ margin-left:-220px; visibility:hidden; } /* El menú se queda a la vista al bajar la página (si es más largo que la pantalla, baja con su barra) */ .sidebar{ position:sticky; top:0; align-self:flex-start; height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; } } .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(11,22,32,0.5);z-index:150;} .autocomplete-list{ position:absolute;top:100%;left:0;right:0;background:var(--card); border:1px solid var(--line);border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:200; max-height:200px;overflow-y:auto;margin-top:2px; } .autocomplete-item{ padding:9px 14px;font-size:13px;cursor:pointer;color:var(--ink); border-bottom:1px solid var(--line); } .autocomplete-item:last-child{border-bottom:none;} .autocomplete-item:hover{background:var(--paper);} .autocomplete-item span{font-size:11.5px;color:var(--ink-soft);margin-left:8px;} .autocomplete-wrap{position:relative;} .nomina-menu-item{ padding:9px 16px;font-size:13px;cursor:pointer;color:var(--ink); transition:background 0.1s;white-space:nowrap; } .nomina-menu-item:hover{background:var(--paper);} .nomina-menu-sep{height:1px;background:var(--line);margin:4px 0;} /* ── Adaptación a móvil ── */ @media (max-width: 860px){ .shell{position:relative;} .sidebar{ position:fixed;top:0;left:0;bottom:0;z-index:160; transform:translateX(-100%);transition:transform 0.2s ease;overflow-y:auto; } .sidebar.open{transform:translateX(0);} .sidebar-backdrop.open{display:block;} .hamburger-btn{display:block;} .main{width:100%;} .content{padding:14px;} .topbar{padding:0 14px;} .topbar-title{font-size:15px;} .rnc-pill{display:none;} .stat-row{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;} .form-grid{grid-template-columns:1fr !important;padding:14px !important;} .grid2{grid-template-columns:1fr !important;} .land-hero{grid-template-columns:1fr !important;padding:32px 20px !important;} .land-visual{margin-top:20px;} .land-grid{grid-template-columns:1fr !important;} .land-links{display:none;} .land-nav{padding:12px 16px;} #bancos-grid{grid-template-columns:1fr !important;} /* Tablas: scroll horizontal limpio, sin que la tarjeta se deforme */ .card{overflow-x:auto;} table{min-width:480px;} /* Toolbar: buscador ocupa toda la fila, botones arriba */ .toolbar{flex-wrap:wrap;gap:8px;} .toolbar input[type="text"]{flex:1 1 100%;order:2;} .toolbar .btn, .toolbar button{order:1;} .toolbar select{order:1;} /* Topbar: acciones más compactas */ .topbar-actions .btn{font-size:12px;padding:7px 10px;white-space:nowrap;} .land-actions{gap:6px;} .land-actions .btn{font-size:12.5px;padding:7px 10px;} .land-nav{flex-wrap:nowrap;} .land-brand-name{font-size:15px;} /* Tablas: filas con más padding vertical para que sean más fáciles de tocar */ td{padding:12px 12px;} th{padding:10px 12px;} /* Overlays y modales: full width en móvil */ .overlay-inner, [style*="max-width:560px"], [style*="max-width:580px"]{ max-width:100% !important; border-radius:10px !important; } /* Botones de acción dentro de tablas: más grandes */ td span[style*="cursor:pointer"]{ padding:4px 2px; display:inline-block; } } @media (max-width: 520px){ .content{padding:10px;} .topbar{padding:0 10px;} /* En pantallas muy pequeñas: 2 columnas de tarjetas */ .stat-row{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;} .stat{padding:12px 14px !important;} .stat-label{font-size:10px !important;} .stat-value{font-size:18px !important;} .stat-delta{font-size:11px !important;} /* Tablas: scroll horizontal */ table{min-width:420px;} div[style*="max-width:620px"], div[style*="max-width:640px"]{max-width:100% !important;} /* Panel de bienvenida: grid de 2 columnas en vez de 4 */ #panel-bienvenida [style*="grid-template-columns:repeat(auto-fit"]{ grid-template-columns:repeat(2,1fr) !important; } /* Topbar: título más corto */ .topbar-title{font-size:14px;} .hamburger-btn{font-size:18px;} /* Formularios: campos full width */ .field{margin-bottom:14px;} .field input, .field select, .field textarea{font-size:16px;} /* Botón de nueva factura en topbar: solo ícono en móvil */ #btn-topbar-nueva-factura::after{content:'+ Factura';} #btn-topbar-nueva-factura .texto-largo{display:none;} #btn-topbar-nueva-factura{font-size:12px;padding:6px 10px;} } /* Las ventanas de usuario caben en la pantalla: más compactas y, si hace falta, con su propia barra para bajar (antes se salían por abajo) */ #nuevo-usuario-overlay, #editar-usuario-overlay{padding:16px !important;} #nuevo-usuario-overlay > div, #editar-usuario-overlay > div{max-height:calc(100vh - 32px);overflow-y:auto;} #nuevo-usuario-overlay .field, #editar-usuario-overlay .field{margin-bottom:10px;} #nuevo-usuario-overlay .field input, #nuevo-usuario-overlay .field select, #editar-usuario-overlay .field input, #editar-usuario-overlay .field select{padding:8px 11px;font-size:14px;} /* ── Estados financieros ── */ .fin-estado{padding-bottom:6px;} .fin-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 18px 10px;} .fin-titulo{font-family:var(--serif);font-size:15.5px;font-weight:600;} .fin-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;} .fin-imprimir{padding:5px 9px;} .fin-tabla td{padding:6px 16px;font-size:13px;} .fin-tabla td.num{white-space:nowrap;font-variant-numeric:tabular-nums;} .fin-tabla tr.fin-grupo td{padding-top:12px;font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;border-bottom:none;} .fin-tabla tr.fin-cuenta td:first-child{padding-left:26px;color:var(--ink-soft);} .fin-tabla tr.fin-sub td{font-weight:600;border-top:1px solid var(--line);} .fin-tabla tr.fin-total td{font-weight:700;font-size:14px;border-top:2px solid var(--ink);} .fin-tabla tr.fin-vacio td{color:var(--ink-faint);font-style:italic;padding-left:26px;} .fin-tabla .fin-cod{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-right:6px;} .fin-tabla .fin-fuera{font-size:10.5px;color:var(--amber-500);margin-left:6px;} .fin-negativo{color:var(--red-600);} .fin-cuadre{margin:10px 16px 6px;padding:9px 13px;border-radius:7px;font-size:12.5px;} .fin-nota{padding:8px 18px 10px;font-size:11.5px;color:var(--ink-faint);} /* La compra en el celular: una columna */ @media (max-width:900px){ #nueva-compra-overlay > div:nth-child(2){grid-template-columns:1fr !important;padding:16px !important;} } #compra-items-body .itbis-compra{padding:6px 4px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font-size:13px;} /* Quien no emite comprobantes: sin ITBIS, sin 606 y sin comprobante de compras */ .compra-sin-comprobantes .solo-con-comprobantes{display:none !important;} .solo-sin-comprobantes{display:none;} .compra-sin-comprobantes .solo-sin-comprobantes{display:block;} /* ── Iconos de línea ────────────────────────────────────────────── Antes eran símbolos de texto y emojis, que cambian según el equipo y se veían caseros. Ahora son dibujos de línea con máscara: toman el color del texto (también en modo oscuro) y sirven igual dentro del HTML que dentro de las cadenas del código (). */ .nav-icon{width:18px;height:18px;flex-shrink:0;font-size:0 !important;background:currentColor;color:#8EA3C2; -webkit-mask:var(--icono) center/contain no-repeat;mask:var(--icono) center/contain no-repeat;} .nav-item.active .nav-icon{color:var(--teal-400);} .nav-item:hover .nav-icon{color:#D3DEEE;} [class^="ico-"]{display:inline-block;width:16px;height:16px;vertical-align:-3px;background:currentColor; -webkit-mask:var(--icono) center/contain no-repeat;mask:var(--icono) center/contain no-repeat;} .nav-item[data-view="plataforma"] .nav-icon,.ico-plataforma{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E");} .nav-item[data-view="cartera"] .nav-icon,.ico-cartera{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E");} .nav-item[data-view="panel"] .nav-icon,.ico-panel{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E");} .nav-item[data-view="facturacion"] .nav-icon,.ico-facturacion{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M12 11v6M9 14h6'/%3E%3C/svg%3E");} .nav-item[data-view="pos"] .nav-icon,.ico-pos{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");} .nav-item[data-view="mesas"] .nav-icon,.ico-mesas{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v7a2.5 2.5 0 0 0 5 0V3M7.5 3v18M17 21V3c-2 0-3.5 2.5-3.5 6s1.5 4 3.5 4'/%3E%3C/svg%3E");} .nav-item[data-view="cocina"] .nav-icon,.ico-cocina{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.8 3 5 5.2 5 10a5 5 0 0 1-10 0c0-2.2 1-3.7 2.2-4.8.1 1.9.9 3 2.1 3.1-.4-3 .1-5.6.7-8.3z'/%3E%3C/svg%3E");} .nav-item[data-view="colegio"] .nav-icon,.ico-colegio{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5M22 9v6'/%3E%3C/svg%3E");} .nav-item[data-view="caja"] .nav-icon,.ico-caja{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V6a2 2 0 0 1 2-2h11v3'/%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M16.5 13.5h1.5'/%3E%3C/svg%3E");} .nav-item[data-view="facturas"] .nav-icon,.ico-facturas{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-2.5-1.6L14 21l-2-1.6L10 21l-2.5-1.6L5 21z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");} .nav-item[data-view="clientes"] .nav-icon,.ico-clientes{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M16 4.6a3.5 3.5 0 0 1 0 6.8M21 20c0-2.7-1.5-4.9-3.8-5.7'/%3E%3C/svg%3E");} .nav-item[data-view="estados"] .nav-icon,.ico-estados{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");} .nav-item[data-view="ncf"] .nav-icon,.ico-ncf{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4 8 20M16 4l-2 16'/%3E%3C/svg%3E");} .nav-item[data-view="recibidos"] .nav-icon,.ico-recibidos{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5l1.5-3h5'/%3E%3Cpath d='M5.5 5h13L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5z'/%3E%3C/svg%3E");} .nav-item[data-view="certificacion"] .nav-icon,.ico-certificacion{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.1-8 9-4.6-.9-8-4.5-8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");} .nav-item[data-view="reportes"] .nav-icon,.ico-reportes{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M3 15h18M9 4v16'/%3E%3C/svg%3E");} .nav-item[data-view="financieros"] .nav-icon,.ico-financieros{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9v9z'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H15z'/%3E%3C/svg%3E");} .nav-item[data-view="reportesgen"] .nav-icon,.ico-reportesgen{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 16v-5M12 16V6M17 16v-8'/%3E%3C/svg%3E");} .nav-item[data-view="libro"] .nav-icon,.ico-libro{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h6a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H3zM21 5h-6a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E");} .nav-item[data-view="cxp"] .nav-icon,.ico-cxp{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");} .nav-item[data-view="bancos"] .nav-icon,.ico-bancos{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 4l9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18'/%3E%3C/svg%3E");} .nav-item[data-view="nomina"] .nav-icon,.ico-nomina{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E");} .nav-item[data-view="mi-nomina"] .nav-icon,.ico-mi-nomina{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");} .nav-item[data-view="compras"] .nav-icon,.ico-compras{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3C/svg%3E");} .nav-item[data-view="inventario"] .nav-icon,.ico-inventario{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5zM3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");} .nav-item[data-view="config"] .nav-icon,.ico-config{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");} .ico-ver{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");} .ico-imprimir{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E");} .ico-recibo{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4-2 1.4z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");} .ico-mensaje{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.8 7L4 20.5l1.5-4.8A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");} .ico-ayuda{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.2a2.6 2.6 0 0 1 5 .8c0 1.7-2.5 2.3-2.5 3.8M12 17h.01'/%3E%3C/svg%3E");} .ico-luna{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");} .ico-sol{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");} .ico-campana{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9zM10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E");} /* Las cifras de las tarjetas: grandes y parejas (antes las achicaba .mono) */ .stat .stat-value,.stat .stat-value.mono{font-family:var(--sans);font-size:24px;font-weight:650;letter-spacing:-0.5px; font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.15;} .stat .stat-label{letter-spacing:0.5px;} .stat{transition:box-shadow .15s, border-color .15s;} .stat:hover{box-shadow:0 4px 14px rgba(11,31,26,0.06);} /* Las pestañas, un poco más compactas: caben en una fila */ .config-tab{padding:10px 12px;font-size:14px;} /* Las tablas: encabezado sereno y filas que se marcan al pasar */ table tbody tr{transition:background .12s;} table tbody tr:hover{background:rgba(26,86,166,0.035);} td{font-variant-numeric:tabular-nums;} /* ══════════ Página de inicio (2026-10) ══════════ Clases lp-: el aspecto nuevo. Se queda siempre en claro (la página de inicio no sigue el modo oscuro). Con «reducir movimiento» en el teléfono o la computadora, todo aparece quieto. */ #landing-page{ background:#fff; color:var(--ink); overflow-x:hidden; } #landing-page *{ box-sizing:border-box; } .lp-wrap{ max-width:1180px; margin:0 auto; padding:0 32px; } .lp-banner{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; background:linear-gradient(90deg,var(--tinta),#16376B,var(--tinta)); background-size:200% 100%; animation:lp-brillo 9s ease-in-out infinite; color:#fff; font-size:13px; padding:9px 44px; text-align:center; } .lp-banner b{ color:#FFD58A; } .lp-banner .lp-cerrar{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:0; color:rgba(255,255,255,.7); cursor:pointer; font-size:15px; } .lp-chip-plazo{ display:inline-flex; align-items:center; gap:6px; background:rgba(212,145,47,.18); border:1px solid rgba(212,145,47,.45); color:#FFD58A; padding:2px 10px; border-radius:99px; font-weight:600; } @keyframes lp-brillo{ 0%,100%{ background-position:0 0; } 50%{ background-position:100% 0; } } /* El menú de arriba: transparente al principio, con sombra al bajar */ .lp-nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.78); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; } .lp-nav.lp-con-sombra{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(11,27,54,.07); } .lp-nav-in{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:68px; } .lp-nav .land-brand{ display:flex; align-items:center; gap:10px; cursor:pointer; } .lp-nav .land-brand-mark{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; } .lp-nav .land-brand-mark img, .lp-pie .land-brand-mark img{ width:100%; height:100%; object-fit:contain; } .lp-nav .land-brand-name{ font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--tinta); } .lp-links{ display:flex; gap:4px; } .lp-links button{ background:none; border:0; font:inherit; font-size:14px; color:var(--ink-soft); padding:8px 12px; border-radius:8px; cursor:pointer; transition:color .15s, background .15s; } .lp-links button:hover{ color:var(--tinta); background:var(--verde-tenue); } .lp-acciones{ display:flex; align-items:center; gap:8px; } .lp-hamburguesa{ display:none; background:none; border:1px solid var(--line); border-radius:8px; width:40px; height:38px; font-size:18px; cursor:pointer; color:var(--tinta); } #land-nav-movil{ display:none; border-top:1px solid var(--line); background:#fff; padding:8px 20px 16px; } #land-nav-movil button.lp-mov{ display:block; width:100%; text-align:left; background:none; border:0; font:inherit; font-size:15px; color:var(--ink); padding:12px 4px; border-bottom:1px solid var(--line); cursor:pointer; } #land-nav-movil .lp-acciones{ margin-top:14px; } /* Botones */ .lp-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:12px 22px; font:inherit; font-weight:600; font-size:15px; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s; overflow:hidden; white-space:nowrap; text-decoration:none; } .lp-btn:active{ transform:translateY(1px); } .lp-btn-1{ color:#fff; background:linear-gradient(135deg,var(--verde),var(--verde-vivo)); box-shadow:0 8px 22px rgba(26,86,166,.32); } .lp-btn-1:hover{ box-shadow:0 12px 30px rgba(26,86,166,.42); transform:translateY(-1px); } .lp-btn-1::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); animation:lp-destello 4.5s ease-in-out infinite; } @keyframes lp-destello{ 0%,70%{ left:-60%; } 100%{ left:130%; } } .lp-btn-2{ color:var(--tinta); background:#fff; border-color:var(--line); } .lp-btn-2:hover{ border-color:var(--verde); color:var(--verde); } .lp-btn-chico{ padding:9px 16px; font-size:14px; } .lp-btn-oro{ color:var(--tinta); background:linear-gradient(135deg,#F2B85A,var(--sol)); box-shadow:0 8px 22px rgba(212,145,47,.35); } /* La portada */ .lp-portada{ position:relative; padding:72px 0 0; isolation:isolate; overflow:hidden; } .lp-portada::before{ content:''; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(rgba(26,86,166,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(26,86,166,.07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%); } .lp-mancha{ position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.55; animation:lp-flotar-lento 16s ease-in-out infinite; } .lp-mancha-1{ width:420px; height:420px; background:#9CC8F5; top:-80px; right:-60px; } .lp-mancha-2{ width:340px; height:340px; background:#FBDDA6; bottom:-60px; left:-80px; animation-delay:-6s; } .lp-mancha-3{ width:260px; height:260px; background:#C9DEFA; top:40%; left:38%; animation-delay:-10s; opacity:.4; } @keyframes lp-flotar-lento{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(30px,-25px) scale(1.06); } 66%{ transform:translate(-20px,20px) scale(.96); } } .lp-portada-in{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; } .lp-sello-rd{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); box-shadow:0 4px 14px rgba(11,27,54,.06); color:var(--tinta); font-size:13px; font-weight:600; padding:7px 14px 7px 8px; border-radius:99px; margin-bottom:22px; } .lp-sello-rd .lp-punto-vivo{ width:22px; height:22px; border-radius:50%; background:var(--exito-tenue); display:inline-flex; align-items:center; justify-content:center; } .lp-sello-rd .lp-punto-vivo::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--exito); box-shadow:0 0 0 0 rgba(21,128,61,.6); animation:lp-latido 2s infinite; } @keyframes lp-latido{ 0%{ box-shadow:0 0 0 0 rgba(21,128,61,.55); } 70%{ box-shadow:0 0 0 9px rgba(21,128,61,0); } 100%{ box-shadow:0 0 0 0 rgba(21,128,61,0); } } .lp-titular{ font-family:var(--display); font-weight:800; font-stretch:110%; font-size:clamp(38px,5.4vw,64px); line-height:1.02; letter-spacing:-.03em; color:var(--tinta); margin:0 0 22px; text-wrap:balance; } .lp-titular .lp-degradado{ background:linear-gradient(90deg,var(--verde),var(--verde-vivo),var(--sol),var(--verde)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:lp-correr 8s linear infinite; } @keyframes lp-correr{ to{ background-position:300% 0; } } .lp-bajada{ font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:540px; margin:0 0 30px; } .lp-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; } .lp-nota-cta{ font-size:13px; color:var(--ink-faint); } .lp-garantias{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; font-size:13.5px; color:var(--ink-soft); } .lp-garantias span{ display:inline-flex; align-items:center; gap:7px; } .lp-garantias span::before{ content:'✓'; width:18px; height:18px; border-radius:50%; background:var(--verde-tenue); color:var(--verde); font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; } #land-cupon-banner{ display:none; margin-top:16px; background:var(--sol-tenue); border:1px solid #EFD3A0; color:#6B4510; padding:10px 14px; border-radius:10px; font-size:13.5px; } .lp-visual{ position:relative; display:flex; flex-direction:column; align-items:center; } .lp-visual .cf{ animation:lp-flotar 7s ease-in-out infinite; } .lp-flotante{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; padding:10px 14px; box-shadow:0 14px 34px rgba(11,27,54,.14); font-size:12.5px; color:var(--ink); animation:lp-flotar 6s ease-in-out infinite; } .lp-flotante b{ display:block; font-size:13.5px; color:var(--tinta); } .lp-flotante .lp-ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .lp-visual{ padding:34px 0 96px; } .lp-flotante-2{ top:0; right:-18px; animation-delay:-4s; } .lp-flotante-3{ bottom:8px; left:4%; animation-delay:-1s; } @keyframes lp-flotar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } /* Cifras */ .lp-cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; } .lp-cifra{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center; box-shadow:0 2px 10px rgba(11,27,54,.04); } .lp-cifra .lp-num{ font-family:var(--display); font-weight:800; font-size:36px; letter-spacing:-.02em; color:var(--tinta); line-height:1; } .lp-cifra .lp-num small{ font-size:20px; color:var(--verde); } .lp-cifra div:last-child{ margin-top:8px; font-size:13px; color:var(--ink-soft); } /* La cinta que corre */ .lp-cinta{ margin-top:54px; background:var(--tinta); overflow:hidden; padding:14px 0; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .lp-cinta .ticker-track{ display:inline-block; animation:ticker 45s linear infinite; } .lp-cinta:hover .ticker-track{ animation-play-state:paused; } .lp-cinta .ticker-item{ display:inline-block; padding:0 26px; color:#DCE7F7; font-size:14px; font-weight:500; } .lp-cinta .ticker-item::before{ content:'◆'; color:var(--sol); margin-right:12px; font-size:10px; vertical-align:2px; } /* Secciones */ .lp-seccion{ padding:96px 0; } .lp-seccion-gris{ background:linear-gradient(180deg,var(--paper),#fff); } .lp-cabeza{ text-align:center; max-width:720px; margin:0 auto 52px; } .lp-ceja{ display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--sol-hondo); background:var(--sol-tenue); padding:5px 12px; border-radius:99px; margin-bottom:14px; } .lp-h2{ font-family:var(--display); font-weight:800; font-stretch:108%; font-size:clamp(28px,3.6vw,44px); letter-spacing:-.025em; line-height:1.06; color:var(--tinta); margin:0 0 14px; text-wrap:balance; } .lp-cabeza p{ font-size:16.5px; color:var(--ink-soft); line-height:1.6; margin:0; } /* Módulos */ .lp-modulos{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .lp-modulo{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; transition:transform .25s, box-shadow .25s, border-color .25s; overflow:hidden; } .lp-modulo::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,var(--verde-vivo),transparent 40%,transparent 60%,var(--sol)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s; pointer-events:none; } .lp-modulo:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(11,27,54,.10); border-color:transparent; } .lp-modulo:hover::before{ opacity:1; } .lp-modulo .lp-ico{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:var(--verde-tenue); color:var(--verde); transition:transform .3s; } .lp-modulo:hover .lp-ico{ transform:rotate(-6deg) scale(1.08); } .lp-modulo .lp-ico svg{ width:24px; height:24px; } .lp-modulo h3{ font-family:var(--display); font-weight:700; font-size:17.5px; letter-spacing:-.01em; color:var(--tinta); margin:0 0 8px; } .lp-modulo p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; } .lp-modulo .lp-nuevo{ position:absolute; top:18px; right:18px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--exito); background:var(--exito-tenue); padding:3px 8px; border-radius:99px; } .lp-ico-oro{ background:var(--sol-tenue) !important; color:var(--sol-hondo) !important; } .lp-ico-verde{ background:var(--exito-tenue) !important; color:var(--exito) !important; } /* El plazo de la DGII */ .lp-plazo{ position:relative; overflow:hidden; background:radial-gradient(circle at 15% 20%,#20457E 0,transparent 45%),radial-gradient(circle at 85% 80%,#3A2A12 0,transparent 40%),var(--tinta); color:#fff; border-radius:26px; padding:48px; display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; } .lp-plazo h2{ color:#fff; } .lp-plazo p{ color:#C9D6EA; font-size:16px; line-height:1.65; margin:0 0 22px; } .lp-plazo .lp-ceja{ background:rgba(212,145,47,.18); color:#FFD58A; } .lp-reloj{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .lp-reloj div{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px 6px; text-align:center; } .lp-reloj b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; } .lp-reloj span{ font-size:12px; color:#AFC0DA; text-transform:uppercase; letter-spacing:.08em; } .lp-fuente{ font-size:12px !important; color:#8FA3C2 !important; margin:14px 0 0 !important; } /* Pasos */ .lp-pasos{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .lp-pasos::before{ content:''; position:absolute; top:31px; left:16%; right:16%; height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px); } .lp-paso{ position:relative; text-align:center; padding:0 10px; } .lp-paso .lp-n{ position:relative; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:24px; color:#fff; background:linear-gradient(135deg,var(--verde),var(--verde-vivo)); box-shadow:0 10px 24px rgba(26,86,166,.3); } .lp-paso .lp-n::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(42,123,212,.25); animation:lp-anillo 3s ease-out infinite; } .lp-paso:nth-child(2) .lp-n::after{ animation-delay:1s; } .lp-paso:nth-child(3) .lp-n::after{ animation-delay:2s; } @keyframes lp-anillo{ 0%{ transform:scale(.9); opacity:1; } 100%{ transform:scale(1.35); opacity:0; } } .lp-paso h3{ font-family:var(--display); font-size:18px; color:var(--tinta); margin:0 0 8px; } .lp-paso p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0; } /* Para quién */ .lp-quienes{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .lp-quien{ border-radius:18px; padding:24px; background:#fff; border:1px solid var(--line); transition:transform .25s, box-shadow .25s; } .lp-quien:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(11,27,54,.09); } .lp-quien .lp-emoji{ font-size:28px; margin-bottom:12px; display:inline-block; transition:transform .3s; } .lp-quien:hover .lp-emoji{ transform:scale(1.18) rotate(-6deg); } .lp-quien h3{ font-family:var(--display); font-size:16.5px; color:var(--tinta); margin:0 0 8px; } .lp-quien p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; } /* Precios */ .lp-planes{ display:grid; grid-template-columns:repeat(2,minmax(0,380px)); justify-content:center; gap:22px; } .lp-plan{ position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; } .lp-plan:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(11,27,54,.10); } .lp-plan-destacado{ border:2px solid var(--verde); box-shadow:0 18px 44px rgba(26,86,166,.16); } .lp-plan-cinta{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--verde),var(--verde-vivo)); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:99px; white-space:nowrap; } .lp-plan h3{ font-family:var(--display); font-size:20px; color:var(--tinta); margin:0 0 6px; } .lp-precio{ font-family:var(--display); font-weight:800; font-size:44px; letter-spacing:-.03em; color:var(--tinta); margin:8px 0 4px; } .lp-precio small{ font-size:15px; font-weight:500; color:var(--ink-soft); letter-spacing:0; } .lp-plan > p{ font-size:14px; color:var(--ink-soft); margin:0 0 18px; line-height:1.55; } .lp-plan ul{ list-style:none; padding:0; margin:0 0 24px; flex:1; } .lp-plan li{ display:flex; gap:10px; font-size:14px; color:var(--ink); padding:7px 0; line-height:1.45; } .lp-plan li::before{ content:'✓'; color:var(--exito); font-weight:800; flex-shrink:0; } .lp-li-nuevo{ display:inline-block; margin-left:4px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--exito); background:var(--exito-tenue); padding:1px 7px; border-radius:99px; vertical-align:1px; } .lp-letra-chica{ text-align:center; font-size:13px; color:var(--ink-faint); margin-top:20px; } .lp-contador{ margin-top:34px; border-radius:24px; padding:34px; background:linear-gradient(135deg,var(--tinta),#16376B); color:#fff; display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; } .lp-contador h3{ font-family:var(--display); font-size:24px; margin:6px 0 10px; color:#fff; } .lp-contador p{ color:#C9D6EA; font-size:14.5px; line-height:1.6; margin:0 0 18px; } .lp-contador .lp-ceja{ background:rgba(212,145,47,.18); color:#FFD58A; } .lp-contador-planes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .lp-contador-planes div{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:18px; } .lp-contador-planes b{ display:block; font-family:var(--display); font-size:26px; margin:4px 0; } .lp-contador-planes span{ font-size:13px; color:#AFC0DA; } /* Preguntas */ #land-faq .faq-lista{ max-width:820px; margin:0 auto; } #land-faq .faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:10px; transition:box-shadow .2s, border-color .2s; } #land-faq .faq-item.open{ border-color:#BFD6F2; box-shadow:0 10px 26px rgba(11,27,54,.07); } #land-faq .faq-pregunta{ padding:18px 20px; font-size:15.5px; font-weight:600; color:var(--tinta); } #land-faq .faq-pregunta::after{ content:'+'; font-size:22px; font-weight:400; color:var(--verde); transition:transform .25s; flex-shrink:0; } #land-faq .faq-item.open .faq-pregunta::after{ transform:rotate(45deg); } #land-faq .faq-respuesta p{ padding:0 20px 18px; font-size:14.5px; line-height:1.7; } /* Mapa y contacto */ .lp-mapa{ border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 14px 34px rgba(11,27,54,.08); } .lp-mapa iframe{ display:block; border:0; width:100%; height:360px; filter:saturate(.9); } .lp-ciudades{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:20px; } .lp-ciudades span{ background:#fff; border:1px solid var(--line); border-radius:99px; padding:7px 14px; font-size:13px; color:var(--ink-soft); } .lp-contactos{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .lp-contacto{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:transform .2s, box-shadow .2s, border-color .2s; } .lp-contacto:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,27,54,.09); border-color:#BFD6F2; } .lp-contacto .lp-ico{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--verde-tenue); color:var(--verde); flex-shrink:0; } .lp-contacto .lp-ico svg{ width:21px; height:21px; } .lp-contacto b{ display:block; font-size:14.5px; color:var(--tinta); } .lp-contacto span{ display:block; font-size:13.5px; color:var(--ink); margin-top:2px; } .lp-contacto small{ display:block; font-size:12px; color:var(--ink-faint); margin-top:3px; } .lp-final{ text-align:center; border-radius:26px; padding:56px 28px; background:radial-gradient(circle at 20% 0,#2A5DA6 0,transparent 50%),radial-gradient(circle at 90% 100%,#5A3E12 0,transparent 45%),var(--tinta); color:#fff; } .lp-final h2{ color:#fff; } .lp-final p{ color:#C9D6EA; font-size:16.5px; margin:0 0 26px; } /* Pie */ .lp-pie{ background:var(--tinta); color:#C9D6EA; padding:56px 0 26px; } .lp-pie-in{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; } .lp-pie .land-brand{ display:flex; align-items:center; gap:10px; } .lp-pie .land-brand-mark{ width:36px; height:36px; } .lp-pie .land-brand-name{ font-family:var(--display); font-weight:800; font-size:19px; color:#fff; } .lp-pie p{ font-size:13.5px; line-height:1.6; color:#9DB0CC; max-width:360px; margin:12px 0 0; } .lp-pie h4{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:6px 0 12px; } .lp-pie button, .lp-pie a{ display:block; background:none; border:0; padding:4px 0; font:inherit; font-size:13.5px; color:#9DB0CC; cursor:pointer; text-decoration:none; text-align:left; } .lp-pie button:hover, .lp-pie a:hover{ color:#fff; } .lp-pie-abajo{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:20px; font-size:12.5px; color:#7F93B2; } .lp-pie-abajo .lp-legales{ display:flex; flex-wrap:wrap; gap:6px 18px; } .lp-pie-abajo .lp-legales a, .lp-pie-abajo .lp-legales button{ display:inline; font-size:12.5px; color:#7F93B2; padding:0; } /* Lo que aparece al bajar */ .lp-revela{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d, 0) * 80ms); } .lp-revela.lp-visible{ opacity:1; transform:none; } @media (max-width:980px){ .lp-portada-in, .lp-plazo, .lp-contador{ grid-template-columns:1fr; } .lp-modulos{ grid-template-columns:repeat(2,1fr); } .lp-modulos > .lp-modulo:last-child:nth-child(odd){ grid-column:1 / -1; } /* la última, sola, a lo ancho */ .lp-quienes, .lp-contactos{ grid-template-columns:repeat(2,1fr); } .lp-cifras{ grid-template-columns:repeat(2,1fr); } .lp-visual{ margin-top:10px; } } @media (max-width:860px){ .lp-links, .lp-nav .lp-acciones{ display:none; } .lp-hamburguesa{ display:block; } } @media (max-width:640px){ .lp-wrap{ padding:0 16px; } .lp-portada{ padding:44px 0 50px; } .lp-seccion{ padding:64px 0; } .lp-modulos, .lp-quienes, .lp-contactos, .lp-pasos, .lp-planes{ grid-template-columns:1fr; } .lp-pasos::before{ display:none; } .lp-plazo, .lp-contador{ padding:28px 20px; border-radius:20px; } .lp-reloj{ gap:6px; } .lp-pie-in{ grid-template-columns:1fr; } .lp-flotante-2{ right:-4px; } .lp-flotante-3{ left:-4px; } .lp-banner{ padding:9px 36px; font-size:12.5px; } .lp-contador-planes{ grid-template-columns:1fr 1fr; } .lp-btn{ white-space:normal; text-align:center; } } @media (prefers-reduced-motion: reduce){ #landing-page *, #landing-page *::before, #landing-page *::after{ animation:none !important; transition:none !important; } .lp-revela{ opacity:1; transform:none; } } /* ══════════ Por dentro (2026-10): más moderno, con movimiento suave ══════════ Solo cambia cómo se ve: menú con degradado y el elegido resaltado, barra de arriba de vidrio, tarjetas y botones más redondeados que se levantan, y cada pantalla entra suave al abrirla. Con «reducir movimiento», quieto. */ .sidebar{ background:linear-gradient(180deg,#0B1B36 0%,#0F2850 55%,#0B1B36 100%); } .brand-name{ font-weight:700; } .nav-label{ color:#6E82A3; letter-spacing:.12em; } .nav-item{ position:relative; border-left:0; border-radius:10px; padding:9px 12px; transition:background .2s, color .2s, transform .2s; } .nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; transform:translateX(2px); } .nav-item.active{ background:#fff; color:var(--tinta); font-weight:600; border-left:0; box-shadow:0 8px 20px rgba(0,0,0,.25); } .nav-item.active:hover{ background:#fff; color:var(--tinta); } .nav-item:hover .nav-icon{ color:#BFD6F2; } .nav-item.active .nav-icon, .nav-item.active:hover .nav-icon{ color:var(--verde); } .nav-item.active::before{ content:''; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--sol); } .topbar{ background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(11,27,54,.04); border-bottom-color:transparent; position:relative; z-index:20; } html.modo-oscuro .topbar{ background:rgba(17,29,51,.82); } .topbar-title{ font-weight:700; letter-spacing:-.01em; } .content{ background:radial-gradient(900px 320px at 100% -40px, rgba(42,123,212,.07), transparent 70%); } h1.page-title{ font-weight:800; letter-spacing:-.02em; } .card{ border-radius:14px; box-shadow:0 1px 2px rgba(11,27,54,.04); transition:box-shadow .25s, transform .25s, border-color .25s; } .card:hover{ box-shadow:0 10px 28px rgba(11,27,54,.08); } .card.stat{ position:relative; overflow:hidden; } .card.stat::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--verde),var(--verde-vivo),var(--sol)); opacity:.9; transform-origin:left; animation:adentro-raya 0.9s cubic-bezier(.2,.7,.2,1) both; } .card.stat:hover{ transform:translateY(-3px); } @keyframes adentro-raya{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } #panel-stat-row > .card.stat{ padding:20px 20px 18px; } #panel-stat-row > .card.stat .stat-label{ padding-right:44px; min-height:28px; } #panel-stat-row > .card.stat::after{ content:''; position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:12px; background-color:var(--verde-tenue); background-repeat:no-repeat; background-position:center; background-size:20px; background-image:var(--ico-stat); } #panel-stat-row > .card.stat:nth-child(1){ background:linear-gradient(135deg,#0B1B36 0%,#16376B 60%,#1A56A6 100%); border-color:transparent; color:#fff; box-shadow:0 12px 30px rgba(11,27,54,.28); } #panel-stat-row > .card.stat:nth-child(1)::before{ background:linear-gradient(90deg,var(--sol),#FFD58A); } #panel-stat-row > .card.stat:nth-child(1) .stat-label, #panel-stat-row > .card.stat:nth-child(1) .stat-delta{ color:rgba(255,255,255,.72); } #panel-stat-row > .card.stat:nth-child(1) .stat-value{ color:#fff; } #panel-stat-row > .card.stat:nth-child(1)::after{ background-color:rgba(255,255,255,.14); --ico-stat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 5-6'/%3E%3C/svg%3E"); } #panel-stat-row > .card.stat:nth-child(2){ --ico-stat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); } #panel-stat-row > .card.stat:nth-child(3)::after{ background-color:var(--amber-100); } #panel-stat-row > .card.stat:nth-child(3){ --ico-stat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B97614' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } #panel-stat-row > .card.stat:nth-child(4)::after{ background-color:var(--exito-tenue); } #panel-stat-row > .card.stat:nth-child(4){ --ico-stat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E"); } #panel-stat-row > .card.stat:nth-child(5)::after{ background-color:var(--red-100); } #panel-stat-row > .card.stat:nth-child(5){ --ico-stat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); } .btn{ border-radius:9px; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s; } .btn:hover:not(:disabled){ transform:translateY(-1px); } .btn:active:not(:disabled){ transform:none; } .btn-teal{ background:linear-gradient(135deg,var(--verde),var(--verde-vivo)); border-color:transparent; box-shadow:0 4px 14px rgba(26,86,166,.22); } .btn-teal:hover{ background:linear-gradient(135deg,var(--verde),var(--verde-vivo)); box-shadow:0 8px 20px rgba(26,86,166,.32); } .btn-primary{ box-shadow:0 4px 14px rgba(11,27,54,.18); } .badge{ border-radius:99px; font-weight:600; } .rnc-pill{ border-radius:99px; } /* Campos. Con :where() no pesan nada: el que ya tiene su estilo lo conserva, y el que no tenía ninguno (el del navegador, que en modo oscuro quedaba blanco) toma el borde y los colores del sistema. */ :where(.shell) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]), select, textarea){ border:1px solid var(--line); border-radius:9px; background-color:var(--card); color:var(--ink); transition:border-color .15s, box-shadow .15s; } :where(.shell) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea):focus{ outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(26,86,166,.13); } .field input, .field select, .field textarea, .toolbar input, .toolbar select{ border-radius:9px; } html.modo-oscuro .shell{ color-scheme:dark; } tbody tr td{ transition:background .15s; } th{ letter-spacing:.06em; } /* Cada pantalla entra suave, y las tarjetas de cifras una tras otra */ .view.active > *{ animation:adentro-entra .38s cubic-bezier(.2,.7,.2,1) backwards; } .view.active > *:nth-child(2){ animation-delay:.04s; } .view.active > *:nth-child(3){ animation-delay:.08s; } .view.active > *:nth-child(4){ animation-delay:.12s; } .view.active > *:nth-child(n+5){ animation-delay:.16s; } .view.active .stat-row > *{ animation:adentro-entra .45s cubic-bezier(.2,.7,.2,1) backwards; } .view.active .stat-row > *:nth-child(2){ animation-delay:.06s; } .view.active .stat-row > *:nth-child(3){ animation-delay:.12s; } .view.active .stat-row > *:nth-child(4){ animation-delay:.18s; } .view.active .stat-row > *:nth-child(5){ animation-delay:.24s; } @keyframes adentro-entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .shell *, .shell *::before, .shell *::after{ animation:none !important; transition:none !important; } } /* ══════════ Lectura y celular (2026-10) ══════════ Que todo se lea y se toque bien: ninguna letra de menos de 12 px, las etiquetas y los grises con contraste de 4.5 a 1, y en el celular botones y casillas grandes para el dedo y las pestañas en una sola fila que se desliza (antes hacían 3 o 4 renglones). */ .badge{ font-size:12px; } th, .tabla-contable th, .pos-dev-th{ font-size:12px; } .stat-label, .stat-delta, .pos-subtitulo, .pos-tecla{ font-size:12px; } .pos-prod .q, .fin-nota{ font-size:12.5px; } .fin-tabla tr.fin-grupo td{ font-size:12px; } /* La letra pequeña escrita en cada elemento */ .shell [style*="font-size:10px"], .shell [style*="font-size:10.5px"], .shell [style*="font-size:11px"], .shell [style*="font-size:11.5px"], .shell [style*="font-size: 10px"], .shell [style*="font-size: 10.5px"], .shell [style*="font-size: 11px"], .shell [style*="font-size: 11.5px"], [id$="-overlay"] [style*="font-size:10px"], [id$="-overlay"] [style*="font-size:10.5px"], [id$="-overlay"] [style*="font-size:11px"], [id$="-overlay"] [style*="font-size:11.5px"]{ font-size:12px !important; } /* «Pendiente» y el botón elegido del gráfico, con contraste («Aceptado» ya lo tiene con el verde de --exito) */ .badge-amber{ color:#8F5B12; } html.modo-oscuro .badge-amber{ color:#F2B865; } /* En modo oscuro, los enlaces azules y lo rojo casi no se leían sobre el fondo oscuro: se aclaran; donde son el fondo de un botón o una burbuja con letra blanca, se queda el color fuerte de siempre */ html.modo-oscuro{ --teal-600:#6FB2F2; --red-600:#F08A8A; --navy-700:#BFD6F2; } html.modo-oscuro [style*="background:var(--teal-600)"]{ background:#1A56A6 !important; } html.modo-oscuro [style*="background:var(--red-600)"]{ background:#B42318 !important; } .grafico-modo-btn.grafico-modo-activo{ background:var(--verde); } @media (max-width: 860px){ /* Botones y casillas que se tocan bien con el dedo */ .btn{ min-height:40px; } .topbar-actions .btn{ min-height:38px; } :where(.shell) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea){ min-height:40px; } /* Las acciones de cada fila (ver, imprimir, editar, ✕): de 36 px por lo menos */ td span[onclick]:not(.badge), td a[onclick], td [role=button]{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; } /* Los enlaces de texto («Editar», «Transferir», «Compras →»): el área que se toca crece hacia arriba y hacia abajo sin mover nada de lugar */ .view span[onclick]:not(.badge):not(.config-tab):not(.grafico-modo-btn):not(.btn-cant), .view button[style*="background:none"], .pos-enlace{ padding-block:11px !important; margin-block:-11px !important; } .grafico-modo-btn{ display:inline-flex; align-items:center; min-height:36px; } /* Las pestañas: una sola fila que se desliza, con sombra a la derecha mientras quedan más */ .fila-pestanas{ flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; } .fila-pestanas::-webkit-scrollbar{ display:none; } .fila-pestanas > .config-tab{ flex:none; margin-bottom:0; } .fila-pestanas.hay-mas{ -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent); mask-image:linear-gradient(90deg,#000 78%,transparent); } } @media (max-width: 520px){ .stat-label, .stat-delta{ font-size:12px !important; } } /* La factura en la vista previa, en el celular: menos margen y columnas más juntas, y sin el ancho mínimo de las demás tablas del celular, para que quepan las cuatro (antes el precio y el importe se salían por la derecha). Si aun así no cabe, la tabla se desliza de lado. */ @media (max-width: 560px){ #preview-overlay{ padding:10px !important; } #preview-body{ padding:18px 14px !important; } #preview-body .tabla-lineas{ min-width:0 !important; } #preview-body .tabla-lineas th, #preview-body .tabla-lineas td{ padding:6px 4px !important; font-size:12px !important; letter-spacing:0 !important; } #preview-body .tabla-lineas td{ font-size:12.5px !important; } #preview-body .tabla-lineas td:not(:last-child){ word-break:break-word; } } .tabla-lineas-caja{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Imprimir con la vista previa abierta (desde el menú del celular o con Ctrl+P): sale solo la factura. Sin la barra de la ventana («Comprobante E32…», que ya está en la factura), sin los botones y sin lo de detrás. La clase la pone marcarVistaPreviaAbierta(); de día aunque esté en modo oscuro, porque el papel es blanco. */ @media print{ body.vista-previa-abierta{ --ink:#0F1B2D; --ink-soft:#4A5A70; --ink-faint:#617087; --card:#fff; --paper:#F7F9FC; --line:#E1E7F0; background:#fff !important; color:#0F1B2D; } body.vista-previa-abierta > *:not(#preview-overlay){ display:none !important; } body.vista-previa-abierta #preview-overlay{ position:static !important; display:block !important; padding:0 !important; background:none !important; } body.vista-previa-abierta #preview-overlay > div{ max-width:none !important; max-height:none !important; overflow:visible !important; box-shadow:none !important; border-radius:0 !important; background:#fff !important; } body.vista-previa-abierta #preview-overlay > div > div:not(#preview-body){ display:none !important; } body.vista-previa-abierta #preview-body{ padding:0 !important; } } /* ══════════ Listas como tarjetas en el celular (2026-10) ══════════ En el celular, cada fila de las listas principales (facturas, inventario, compras, clientes, empleados, bancos, cheques, gastos y estados de cuenta) se ve como un bloque: arriba el nombre y el monto, debajo el número y el estado, después cada dato con su nombre y al final los botones. Antes eran tablas que se cortaban por la derecha y escondían el monto y las acciones. Cada tabla dice qué columna es qué; el encabezado no se ve. */ @media (max-width: 640px){ table.tarjetas-movil{ display:block; min-width:0 !important; } table.tarjetas-movil > tbody{ display:block; } table.tarjetas-movil tr.tm-encabezado{ display:none; } table.tarjetas-movil > tbody > tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:4px; align-items:center; padding:13px 14px; border-bottom:1px solid var(--line); } table.tarjetas-movil > tbody:last-child > tr:last-child{ border-bottom:0; } table.tarjetas-movil > tbody > tr:hover td{ background:transparent; } table.tarjetas-movil > tbody > tr > td{ display:block; padding:0 !important; border:0; min-width:0; text-align:left; font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere; } /* Arriba: el nombre (a lo ancho si no hay monto) y el monto */ .tm-facturas > tbody > tr > td:nth-child(2), .tm-panel > tbody > tr > td:nth-child(2), .tm-inventario > tbody > tr > td:nth-child(2), .tm-compras > tbody > tr > td:nth-child(1), .tm-clientes > tbody > tr > td:nth-child(2), .tm-empleados > tbody > tr > td:nth-child(2), .tm-movimientos > tbody > tr > td:nth-child(4), .tm-cheques > tbody > tr > td:nth-child(3), .tm-gastos > tbody > tr > td:nth-child(2), .tm-estados > tbody > tr > td:nth-child(1){ grid-column:1; grid-row:1; font-size:15px; font-weight:600; color:var(--ink); } .tm-clientes > tbody > tr > td:nth-child(2), .tm-empleados > tbody > tr > td:nth-child(2), .tm-estados > tbody > tr > td:nth-child(1){ grid-column:1 / -1; } .tm-facturas > tbody > tr > td:nth-child(6), .tm-panel > tbody > tr > td:nth-child(5), .tm-inventario > tbody > tr > td:nth-child(4), .tm-compras > tbody > tr > td:nth-child(7), .tm-movimientos > tbody > tr > td:nth-child(6), .tm-cheques > tbody > tr > td:nth-child(5), .tm-gastos > tbody > tr > td:nth-child(5){ grid-column:2; grid-row:1; font-size:16px; font-weight:700; color:var(--ink); text-align:right; white-space:nowrap; } .tm-facturas > tbody > tr > td:nth-child(6)::before, .tm-panel > tbody > tr > td:nth-child(5)::before, .tm-inventario > tbody > tr > td:nth-child(4)::before, .tm-compras > tbody > tr > td:nth-child(7)::before, .tm-movimientos > tbody > tr > td:nth-child(6)::before, .tm-cheques > tbody > tr > td:nth-child(5)::before, .tm-gastos > tbody > tr > td:nth-child(5)::before{ content:'RD$ '; font-size:12px; font-weight:600; color:var(--ink-soft); } /* Debajo: el número o la fecha, y el estado */ .tm-facturas > tbody > tr > td:nth-child(1), .tm-panel > tbody > tr > td:nth-child(1), .tm-inventario > tbody > tr > td:nth-child(1), .tm-compras > tbody > tr > td:nth-child(3), .tm-clientes > tbody > tr > td:nth-child(3), .tm-empleados > tbody > tr > td:nth-child(4), .tm-movimientos > tbody > tr > td:nth-child(1), .tm-cheques > tbody > tr > td:nth-child(1), .tm-gastos > tbody > tr > td:nth-child(1), .tm-estados > tbody > tr > td:nth-child(2){ grid-column:1; grid-row:2; } .tm-facturas > tbody > tr > td:nth-child(5), .tm-panel > tbody > tr > td:nth-child(4), .tm-inventario > tbody > tr > td:nth-child(7), .tm-compras > tbody > tr > td:nth-child(4), .tm-clientes > tbody > tr > td:nth-child(4), .tm-empleados > tbody > tr > td:nth-last-child(2), .tm-movimientos > tbody > tr > td:nth-child(3), .tm-cheques > tbody > tr > td:nth-child(6){ grid-column:2; grid-row:2; text-align:right; } /* Cada dato con su nombre */ .tm-facturas > tbody > tr > td:nth-child(3), .tm-facturas > tbody > tr > td:nth-child(4), .tm-panel > tbody > tr > td:nth-child(3), .tm-inventario > tbody > tr > td:nth-child(3), .tm-inventario > tbody > tr > td:nth-child(5), .tm-inventario > tbody > tr > td:nth-child(6), .tm-compras > tbody > tr > td:nth-child(2), .tm-compras > tbody > tr > td:nth-child(5), .tm-compras > tbody > tr > td:nth-child(6), .tm-clientes > tbody > tr > td:nth-child(1), .tm-clientes > tbody > tr > td:nth-child(5), .tm-clientes > tbody > tr > td:nth-child(6), .tm-empleados > tbody > tr > td:nth-child(1), .tm-empleados > tbody > tr > td:nth-child(3), .tm-empleados > tbody > tr > td:nth-child(5), .tm-empleados > tbody > tr > td:nth-child(6), .tm-empleados > tbody > tr > td:nth-child(7), .tm-movimientos > tbody > tr > td:nth-child(2), .tm-movimientos > tbody > tr > td:nth-child(5), .tm-cheques > tbody > tr > td:nth-child(2), .tm-cheques > tbody > tr > td:nth-child(4), .tm-gastos > tbody > tr > td:nth-child(3), .tm-gastos > tbody > tr > td:nth-child(4), .tm-estados > tbody > tr > td:nth-child(3), .tm-estados > tbody > tr > td:nth-child(4), .tm-estados > tbody > tr > td:nth-child(5), .tm-empleados > tbody > tr > td[data-etiqueta]{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:right; } .tm-facturas > tbody > tr > td:nth-child(3)::before{ content:'Emisión'; } .tm-facturas > tbody > tr > td:nth-child(4)::before{ content:'Vence'; } .tm-panel > tbody > tr > td:nth-child(3)::before{ content:'Fecha'; } .tm-inventario > tbody > tr > td:nth-child(3)::before{ content:'Existencia'; } .tm-inventario > tbody > tr > td:nth-child(5)::before{ content:'ITBIS'; } .tm-inventario > tbody > tr > td:nth-child(6)::before{ content:'Valor al costo'; } .tm-compras > tbody > tr > td:nth-child(2)::before{ content:'RNC'; } .tm-compras > tbody > tr > td:nth-child(5)::before{ content:'Monto'; } .tm-compras > tbody > tr > td:nth-child(6)::before{ content:'ITBIS'; } .tm-clientes > tbody > tr > td:nth-child(1)::before{ content:'Código'; } .tm-clientes > tbody > tr > td:nth-child(5)::before{ content:'Facturado (año)'; } .tm-clientes > tbody > tr > td:nth-child(6)::before{ content:'Balance'; } .tm-empleados > tbody > tr > td:nth-child(1)::before{ content:'Código'; } .tm-empleados > tbody > tr > td:nth-child(3)::before{ content:'Cédula'; } .tm-empleados > tbody > tr > td:nth-child(5)::before{ content:'Salario bruto'; } .tm-empleados > tbody > tr > td:nth-child(6)::before{ content:'Bono'; } .tm-empleados > tbody > tr > td:nth-child(7)::before{ content:'Otras deduc.'; } .tm-movimientos > tbody > tr > td:nth-child(2)::before{ content:'Banco'; } .tm-movimientos > tbody > tr > td:nth-child(5)::before{ content:'Referencia'; } .tm-cheques > tbody > tr > td:nth-child(2)::before{ content:'Banco'; } .tm-cheques > tbody > tr > td:nth-child(4)::before{ content:'Fecha'; } .tm-gastos > tbody > tr > td:nth-child(3)::before{ content:'Categoría'; } .tm-gastos > tbody > tr > td:nth-child(4)::before{ content:'Banco'; } .tm-estados > tbody > tr > td:nth-child(3)::before{ content:'Facturas'; } .tm-estados > tbody > tr > td:nth-child(4)::before{ content:'Total facturado'; } .tm-estados > tbody > tr > td:nth-child(5)::before{ content:'Balance pendiente'; } .tm-empleados > tbody > tr > td[data-etiqueta]::before{ content:attr(data-etiqueta); } table.tarjetas-movil td::before{ color:var(--ink-faint); text-align:left; font-family:var(--sans); font-weight:400; flex:none; white-space:nowrap; } /* Una casilla dentro de un dato (el salario de un empleado): a la derecha, sin aplastar su nombre */ table.tarjetas-movil td input{ width:auto; flex:0 1 150px; min-width:0; text-align:right; } /* Al final, los botones */ .tm-facturas > tbody > tr > td:nth-child(7), .tm-inventario > tbody > tr > td:nth-child(8), .tm-compras > tbody > tr > td:nth-child(8), .tm-clientes > tbody > tr > td:nth-child(7), .tm-empleados > tbody > tr > td:nth-last-child(1), .tm-cheques > tbody > tr > td:nth-child(7), .tm-gastos > tbody > tr > td:nth-child(6), .tm-estados > tbody > tr > td:nth-child(6){ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin-top:4px; text-align:left !important; white-space:normal !important; } /* Una fila de aviso («No hay facturas…», «Cargando…»): a lo ancho */ /* Conduces: el cliente y el total arriba; el número, la fecha y el estado; lo que salió; y los botones */ table.tm-conduces > tbody > tr{ grid-template-columns:auto minmax(0,1fr) auto; } .tm-conduces > tbody > tr > td:nth-child(1){ grid-column:1; grid-row:1 / span 3; align-self:start; padding-top:3px !important; } .tm-conduces > tbody > tr > td:nth-child(4){ grid-column:2; grid-row:1; font-size:15px; font-weight:600; color:var(--ink); } .tm-conduces > tbody > tr > td:nth-child(6){ grid-column:3; grid-row:1; font-size:16px; font-weight:700; color:var(--ink); text-align:right; white-space:nowrap; } .tm-conduces > tbody > tr > td:nth-child(6)::before{ content:'RD$ '; font-size:12px; font-weight:500; color:var(--ink-faint); } .tm-conduces > tbody > tr > td:nth-child(2){ grid-column:2; grid-row:2; } .tm-conduces > tbody > tr > td:nth-child(3){ grid-column:2; grid-row:3; } .tm-conduces > tbody > tr > td:nth-child(7){ grid-column:3; grid-row:2 / span 2; text-align:right; } .tm-conduces > tbody > tr > td:nth-child(5){ grid-column:2 / -1; grid-row:4; color:var(--ink); } .tm-conduces > tbody > tr > td:nth-child(8){ grid-column:1 / -1; grid-row:5; display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; white-space:normal !important; padding-top:6px !important; } table.tarjetas-movil > tbody > tr > td[colspan]{ grid-column:1 / -1 !important; grid-row:auto !important; display:block; text-align:center; padding:8px 0 !important; font-size:13px; font-weight:400; } table.tarjetas-movil > tbody > tr > td[colspan]::before{ content:none; } } /* Listas largas: abajo, cuántas se ven y los botones «Ver 25 más» y «Ver todas» */ tr.fila-ver-mas > td, tr.fila-historial > td{ text-align:center; padding:12px 10px; color:var(--ink-soft); font-size:13px; } tr.fila-ver-mas .ver-mas-cuenta, tr.fila-historial .ver-mas-cuenta{ display:inline-block; margin:4px 12px 4px 0; } tr.fila-ver-mas .btn, tr.fila-historial .btn{ margin:4px; } tr.fila-ver-mas:hover > td, tr.fila-historial:hover > td{ background:transparent; } /* Los estados financieros mientras llegan del servidor */ #view-financieros.calculando .card{ opacity:.55; transition:opacity .2s; } /* ══════════ Digital (2026-11): más vivo, más claro y más profesional ══════════ Una capa encima de lo de antes: menú oscuro con rejilla y luces, el elegido de vidrio con su raya dorada encendida, barra de arriba con el buscador (Ctrl + K), el reloj y la luz de «en línea», cifras del panel que cuentan hasta su valor, tarjetas y tablas más finas, pestañas como píldoras, ventanas que aparecen suave, la gráfica que crece, y un modo oscuro de centro de control. Con «reducir movimiento», todo quieto. */ :root{ --grad-marca:linear-gradient(135deg,#1A56A6 0%,#2A7BD4 55%,#4FA3F7 100%); --grad-oro:linear-gradient(90deg,#D4912F,#F5C46B); --brillo:#4FA3F7; --sombra-1:0 1px 2px rgba(11,27,54,.05), 0 1px 1px rgba(11,27,54,.03); --sombra-2:0 1px 2px rgba(11,27,54,.05), 0 10px 30px -12px rgba(11,27,54,.18); --sombra-3:0 2px 4px rgba(11,27,54,.06), 0 22px 44px -18px rgba(11,27,54,.32); --borde-vivo:rgba(42,123,212,.35); } html.modo-oscuro{ --paper:#060E1C; --card:#0D182B; --line:#1C2B45; --sombra-1:0 1px 2px rgba(0,0,0,.4); --sombra-2:0 1px 2px rgba(0,0,0,.45), 0 12px 32px -14px rgba(0,0,0,.7); --sombra-3:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -18px rgba(0,0,0,.85); --borde-vivo:rgba(79,163,247,.45); } /* El fondo: una rejilla de puntos muy suave y una luz azul arriba */ .content{ background: radial-gradient(1100px 380px at 100% -80px, rgba(42,123,212,.10), transparent 70%), radial-gradient(700px 300px at -10% 0%, rgba(212,145,47,.05), transparent 70%), radial-gradient(rgba(26,86,166,.07) 1px, transparent 1.2px) 0 0/22px 22px; } html.modo-oscuro .content{ background: radial-gradient(1100px 420px at 100% -80px, rgba(79,163,247,.14), transparent 70%), radial-gradient(700px 320px at -10% 0%, rgba(212,145,47,.06), transparent 70%), radial-gradient(rgba(111,178,242,.07) 1px, transparent 1.2px) 0 0/22px 22px; } /* ── El menú: centro de control ── */ .sidebar{ background: radial-gradient(420px 260px at -20% -6%, rgba(42,123,212,.42), transparent 70%), radial-gradient(360px 300px at 120% 105%, rgba(212,145,47,.16), transparent 70%), linear-gradient(180deg,#081428 0%,#0B1B36 48%,#081428 100%); border-right:1px solid rgba(111,178,242,.10); } .sidebar::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%); } .sidebar > *{ position:relative; } .brand{ border-bottom-color:rgba(111,178,242,.12); } .brand-mark{ box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 0 5px rgba(79,163,247,.12), 0 8px 22px rgba(42,123,212,.45); animation:digital-latido 4.5s ease-in-out infinite; } @keyframes digital-latido{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 0 5px rgba(79,163,247,.10), 0 8px 22px rgba(42,123,212,.35); } 50%{ box-shadow:0 0 0 1px rgba(255,255,255,.24), 0 0 0 7px rgba(79,163,247,.16), 0 10px 28px rgba(42,123,212,.55); } } .brand-name{ letter-spacing:-.01em; } .brand-sub{ color:#7F95B8; } .nav-label{ display:flex; align-items:center; gap:8px; color:#5F7699; } .nav-label::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(111,178,242,.18),transparent); } .nav-item{ color:#B7C6DC; margin:1px 0; } .nav-item:hover{ background:linear-gradient(90deg,rgba(111,178,242,.12),rgba(111,178,242,.02)); color:#fff; } .nav-item.active, .nav-item.active:hover{ background:linear-gradient(90deg,rgba(42,123,212,.42),rgba(42,123,212,.10) 70%,rgba(42,123,212,0)); color:#fff; box-shadow:inset 0 0 0 1px rgba(111,178,242,.22), 0 10px 24px -12px rgba(42,123,212,.8); } .nav-item.active .nav-icon, .nav-item.active:hover .nav-icon{ color:#9CCBFF; filter:drop-shadow(0 0 6px rgba(79,163,247,.75)); } .nav-item.active::before{ background:var(--grad-oro); box-shadow:0 0 12px rgba(245,196,107,.85); width:3px; } /* El pie del menú: quién entró, con sus iniciales */ .sidebar-foot{ padding:14px 14px 14px; border-top-color:rgba(111,178,242,.10); color:#6D80A0; } .perfil-tarjeta{ display:flex; gap:11px; align-items:flex-start; padding:11px 12px; margin-bottom:10px; border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(111,178,242,.14); } .perfil-avatar{ flex:none; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--grad-marca); color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em; box-shadow:0 6px 16px rgba(42,123,212,.45); } /* Sin nadie (o sin nombre), el dibujo de una persona */ .perfil-avatar:empty::before{ content:''; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat; } .perfil-datos{ min-width:0; } .perfil-rotulo{ font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#6D80A0; margin-bottom:2px; } .perfil-nombre{ font-size:13px; font-weight:600; color:#E6EEF9; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .perfil-enlaces{ font-size:11.5px; } .perfil-enlace{ cursor:pointer; color:#7DB9F7; transition:color .15s; } .perfil-enlace:hover, .perfil-enlace:focus-visible{ color:#fff; text-decoration:underline; outline:none; } .perfil-sep{ color:#3D4F6E; } .perfil-instalar{ margin-top:5px; font-size:11.5px; } .perfil-empresa{ padding:0 4px; font-size:11px; line-height:1.6; } /* ── La barra de arriba ── */ .topbar{ gap:14px; } .topbar::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(42,123,212,.55),rgba(212,145,47,.55),rgba(42,123,212,.55),transparent); background-size:200% 100%; animation:digital-hilo 9s linear infinite; opacity:.7; } @keyframes digital-hilo{ from{ background-position:0% 0; } to{ background-position:-200% 0; } } .buscar-todo{ display:inline-flex; align-items:center; gap:9px; margin-left:10px; min-width:0; height:38px; padding:0 8px 0 12px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink-faint); font:inherit; font-size:13.5px; cursor:pointer; box-shadow:var(--sombra-1); transition:border-color .2s, box-shadow .2s, color .2s, transform .15s; } .buscar-todo:hover{ border-color:var(--borde-vivo); color:var(--ink-soft); box-shadow:0 0 0 4px rgba(42,123,212,.08), var(--sombra-1); } .buscar-todo:focus-visible{ outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(42,123,212,.18); } .buscar-todo .buscar-todo-texto{ min-width:130px; text-align:left; white-space:nowrap; } .buscar-todo kbd, .buscador-pie kbd{ font-family:var(--mono); font-size:10.5px; padding:2px 6px; border-radius:6px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); box-shadow:inset 0 -1px 0 var(--line); white-space:nowrap; } .ico-buscar{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");} .ico-calendario{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");} .ico-flecha{--icono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");} /* El reloj: fecha, hora con los dos puntos que laten, y la luz de «en línea» */ .reloj-digital{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:999px; white-space:nowrap; border:1px solid var(--line); background:linear-gradient(180deg,var(--card),var(--paper)); color:var(--ink-soft); font-size:12.5px; box-shadow:var(--sombra-1); } .reloj-estado{ font-weight:600; color:var(--exito); } .reloj-sep{ width:1px; height:16px; background:var(--line); } .reloj-hora{ font-weight:600; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums; } .reloj-hora .dos-puntos{ display:inline-block; margin:0 1px; animation:digital-parpadeo 1s ease-in-out infinite; } @keyframes digital-parpadeo{ 50%{ opacity:.2; } } .punto-vivo{ position:relative; width:8px; height:8px; border-radius:50%; background:#22C55E; flex:none; box-shadow:0 0 0 0 rgba(34,197,94,.55); animation:digital-pulso 2.2s ease-out infinite; } @keyframes digital-pulso{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } } .sin-internet .punto-vivo, .punto-vivo.apagado{ background:#F59E0B; animation:none; box-shadow:0 0 0 3px rgba(245,158,11,.18); } .reloj-digital.sin-internet .reloj-estado, .luz-chip.sin-internet{ color:#B45309; } html.modo-oscuro .reloj-digital.sin-internet .reloj-estado, html.modo-oscuro .luz-chip.sin-internet{ color:#FBBF24; } .rnc-pill{ background:linear-gradient(180deg,var(--card),var(--paper)); border:1px solid var(--line); box-shadow:var(--sombra-1); } .topbar-actions{ flex-shrink:0; } .topbar-actions > *{ flex-shrink:0; } .topbar-actions .btn, .topbar-actions .btn *{ white-space:nowrap; } .topbar > div:first-child{ min-width:0; } @media (max-width: 1640px){ .reloj-digital .reloj-fecha, .reloj-digital .reloj-sep{ display:none; } } @media (max-width: 1500px){ .buscar-todo .buscar-todo-texto{ min-width:0; } .buscar-todo kbd{ display:none; } } @media (max-width: 1400px){ .reloj-digital{ display:none; } } @media (max-width: 1280px){ .buscar-todo .buscar-todo-texto{ display:none; } .buscar-todo{ padding:0 10px; margin-left:4px; } } /* ── Los títulos ── */ h1.page-title{ font-size:28px; line-height:1.15; } h1.page-title::after{ content:''; display:block; width:44px; height:3px; margin-top:10px; border-radius:3px; background:var(--grad-marca); box-shadow:0 2px 10px rgba(42,123,212,.35); } .page-sub{ color:var(--ink-soft); } /* El saludo del panel: una franja oscura con luces, la rejilla y una línea de tendencia de fondo */ .panel-encabezado{ position:relative; overflow:hidden; isolation:isolate; display:flex; justify-content:space-between; align-items:flex-end; gap:14px 20px; flex-wrap:wrap; margin-bottom:20px; padding:26px 28px 24px; border-radius:20px; color:#fff; background: radial-gradient(520px 240px at 92% -20%, rgba(79,163,247,.55), transparent 70%), radial-gradient(420px 220px at 6% 140%, rgba(212,145,47,.32), transparent 70%), linear-gradient(120deg,#0A1830 0%,#11295A 55%,#1A56A6 100%); box-shadow:0 2px 4px rgba(11,27,54,.08), 0 24px 48px -24px rgba(11,27,54,.55); border:1px solid rgba(111,178,242,.18); } .panel-encabezado::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:28px 28px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%); mask-image:linear-gradient(90deg,transparent,#000 55%); } .panel-encabezado::after{ content:''; position:absolute; right:0; bottom:0; width:min(520px,60%); height:100%; z-index:-1; pointer-events:none; opacity:.55; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%234FA3F7' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%234FA3F7'/%3E%3Cstop offset='1' stop-color='%23F5C46B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 118 L60 104 L110 112 L160 86 L210 94 L260 66 L310 78 L360 46 L410 58 L460 28 L520 14' fill='none' stroke='url(%23a)' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cg fill='%23F5C46B'%3E%3Ccircle cx='460' cy='28' r='3.5'/%3E%3Ccircle cx='520' cy='14' r='4'/%3E%3C/g%3E%3C/svg%3E") right bottom/100% 100% no-repeat; animation:digital-tendencia 1.4s cubic-bezier(.2,.8,.2,1) backwards .15s; } @keyframes digital-tendencia{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } } .panel-encabezado h1.page-title{ color:#fff; background:none; -webkit-background-clip:border-box; background-clip:border-box; } .panel-encabezado h1.page-title::after{ background:var(--grad-oro); box-shadow:0 2px 12px rgba(245,196,107,.5); } .panel-encabezado .page-sub{ margin-bottom:0; color:rgba(226,236,250,.78); } .panel-encabezado .luz-chip{ color:#E8F1FD; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); box-shadow:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .panel-encabezado .luz-chip [class^="ico-"]{ color:#9CCBFF; } .panel-encabezado .luz-chip.luz-vivo{ color:#86EFAC; } .panel-encabezado .luz-chip.sin-internet{ color:#FCD34D; } .panel-encabezado .luz-chip.dgii-caida{ color:#FCA5A5; } .panel-luces{ display:flex; gap:8px; flex-wrap:wrap; } /* La tendencia de lo facturado en los últimos 6 meses, en su tarjeta */ .panel-tendencia{ position:absolute; right:14px; bottom:10px; width:96px; height:26px; overflow:visible; pointer-events:none; opacity:.95; } .panel-tendencia polyline{ stroke-dasharray:320; stroke-dashoffset:0; animation:digital-traza 1.2s ease-out backwards .35s; } @keyframes digital-traza{ from{ stroke-dashoffset:320; } } .luz-chip{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:999px; font-size:12.5px; font-weight:500; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); box-shadow:var(--sombra-1); white-space:nowrap; } .luz-chip [class^="ico-"]{ width:15px; height:15px; color:var(--verde); } .luz-chip.luz-vivo{ color:var(--exito); } /* ── Las tarjetas ── */ .card{ border-radius:16px; border-color:var(--line); box-shadow:var(--sombra-1); } .card:hover{ box-shadow:var(--sombra-2); } .card-title, .card > h3:first-child{ letter-spacing:-.01em; } html.modo-oscuro .card{ background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)) ,var(--card); } /* Las cifras del panel: con luz al pasar, y lo facturado con una aurora que se mueve */ .stat-value, .stat-value.mono{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .card.stat{ isolation:isolate; } .card.stat:hover{ box-shadow:var(--sombra-3); border-color:var(--borde-vivo); } #panel-stat-row > .card.stat:nth-child(1){ background: radial-gradient(260px 160px at 85% 120%, rgba(245,196,107,.28), transparent 70%), radial-gradient(300px 200px at 0% -20%, rgba(79,163,247,.45), transparent 70%), linear-gradient(125deg,#0B1B36 0%,#133266 45%,#1A56A6 80%,#2A7BD4 100%); background-size:100% 100%, 100% 100%, 220% 220%; animation:digital-aurora 14s ease-in-out infinite alternate; } @keyframes digital-aurora{ from{ background-position:0 0, 0 0, 0% 50%; } to{ background-position:0 0, 0 0, 100% 50%; } } #panel-stat-row > .card.stat:nth-child(1):hover{ box-shadow:0 22px 48px -16px rgba(26,86,166,.75); border-color:transparent; } /* El brillo que cruza la tarjeta al pasar el ratón */ .card.stat > .stat-value{ position:relative; } #panel-stat-row > .card.stat .stat-label{ letter-spacing:.08em; font-weight:600; } /* La cifra que cuenta hasta su valor: el texto de verdad no cambia (lo leen el código y el lector de pantalla); lo que se ve mientras cuenta es data-vista */ .stat-value.contando{ color:transparent !important; position:relative; } .stat-value.contando::before{ content:attr(data-vista); position:absolute; left:0; top:0; white-space:nowrap; color:var(--ink); } #panel-stat-row > .card.stat:nth-child(1) .stat-value.contando::before{ color:#fff; } .stat-delta{ font-weight:500; } /* ── Las tablas ── */ th{ font-weight:600; color:var(--ink-faint); } thead th{ background:linear-gradient(180deg,var(--paper),color-mix(in srgb, var(--paper) 60%, var(--card))); } tbody tr{ transition:background .15s, box-shadow .15s; } tbody tr:hover > td{ background:color-mix(in srgb, var(--verde-vivo) 5%, transparent); } tbody tr:hover > td:first-child{ box-shadow:inset 3px 0 0 var(--verde-vivo); } html.modo-oscuro tbody tr:hover > td{ background:rgba(79,163,247,.06); } td.mono, td .mono{ font-variant-numeric:tabular-nums; } /* Las etiquetas de estado, como píldoras con su puntico */ .badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; letter-spacing:.01em; border:1px solid transparent; } .badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; flex:none; } .badge-teal{ border-color:color-mix(in srgb, var(--exito) 22%, transparent); } /* ── Botones ── */ .btn{ font-weight:500; } .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--verde-vivo); } .btn:active:not(:disabled){ transform:scale(.97); } .btn-teal, .btn-teal:hover{ background:var(--grad-marca); background-size:160% 100%; background-position:0 0; transition:background-position .4s, box-shadow .2s, transform .15s; } .btn-teal:hover:not(:disabled){ background-position:100% 0; box-shadow:0 10px 24px -8px rgba(42,123,212,.7); } .btn-primary{ background:linear-gradient(135deg,#0B1B36,#1A3A6E); } .btn-primary:hover:not(:disabled){ box-shadow:0 10px 24px -10px rgba(11,27,54,.6); } html.modo-oscuro .btn-primary{ background:var(--grad-marca); } /* ── Pestañas: píldoras, la elegida con su luz ── */ .config-tab{ border-radius:10px 10px 0 0; transition:color .2s, background .2s; } .config-tab:hover{ background:color-mix(in srgb, var(--verde-vivo) 6%, transparent); } .config-tab.active{ position:relative; } .config-tab.active::after{ content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--grad-marca); box-shadow:0 -2px 12px rgba(42,123,212,.45); animation:digital-pestana .3s cubic-bezier(.2,.7,.2,1) backwards; } @keyframes digital-pestana{ from{ transform:scaleX(.3); opacity:0; } to{ transform:none; opacity:1; } } /* ── Campos ── */ :where(.shell) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea):hover{ border-color:color-mix(in srgb, var(--verde-vivo) 40%, var(--line)); } :where(.shell) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea):focus{ box-shadow:0 0 0 4px rgba(42,123,212,.14); } /* ── El aviso de «Cargando tus datos»: de vidrio, con su barra que corre ── */ #estado-carga-datos{ background:rgba(11,27,54,.88) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(111,178,242,.25); border-radius:14px !important; overflow:hidden; animation:digital-sube .35s cubic-bezier(.2,.7,.2,1) backwards; } #estado-carga-datos::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:40%; background:linear-gradient(90deg,transparent,#4FA3F7,#F5C46B,transparent); animation:digital-corre 1.3s ease-in-out infinite; } @keyframes digital-corre{ from{ transform:translateX(-100%); } to{ transform:translateX(260%); } } @keyframes digital-sube{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } /* ── Ventanas: el fondo se desenfoca y la ventana aparece suave ── */ .shell ~ [id$="-overlay"], body > [id$="-overlay"], .modal-fondo{ -webkit-backdrop-filter:blur(4px) saturate(1.1); backdrop-filter:blur(4px) saturate(1.1); } body > [id$="-overlay"] > div:first-child{ animation:digital-ventana .28s cubic-bezier(.2,.8,.2,1) backwards; } @keyframes digital-ventana{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } } /* ── La gráfica de ventas: las barras crecen una tras otra ── */ .barra-ventas{ transform-box:fill-box; transform-origin:50% 100%; animation:digital-crece .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i, 0) * 35ms); transition:filter .2s, opacity .2s; } .barra-ventas:hover{ filter:brightness(1.12) drop-shadow(0 4px 10px rgba(42,123,212,.45)); } @keyframes digital-crece{ from{ transform:scaleY(0); } to{ transform:none; } } /* ── Las cuentas de banco, como tarjetas ── */ .banco-tarjeta{ padding:0; overflow:hidden; position:relative; } .banco-tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--sombra-3); } .banco-frente{ position:relative; overflow:hidden; isolation:isolate; padding:18px 18px 16px; color:#fff; min-height:132px; background: radial-gradient(260px 160px at 100% 0%, rgba(79,163,247,.55), transparent 70%), radial-gradient(200px 140px at 0% 120%, rgba(212,145,47,.35), transparent 70%), linear-gradient(135deg,#0B1B36,#16376B 60%,#1A56A6); } .banco-tarjeta[style*="--n:1"] .banco-frente{ background:radial-gradient(260px 160px at 100% 0%, rgba(245,196,107,.45), transparent 70%), linear-gradient(135deg,#1B1530,#3A2A5E 60%,#5B3E8E); } .banco-tarjeta[style*="--n:2"] .banco-frente{ background:radial-gradient(260px 160px at 100% 0%, rgba(110,231,183,.40), transparent 70%), linear-gradient(135deg,#062A2A,#0C4A4A 60%,#127272); } .banco-tarjeta[style*="--n:3"] .banco-frente{ background:radial-gradient(260px 160px at 100% 0%, rgba(252,165,165,.35), transparent 70%), linear-gradient(135deg,#2A0F18,#5A1F33 60%,#8A2F4D); } .banco-frente::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:.5; background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px); } .banco-frente::after{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent); transform:skewX(-18deg); transition:left .8s cubic-bezier(.2,.7,.2,1); } .banco-tarjeta:hover .banco-frente::after{ left:130%; } .banco-editar{ position:absolute; top:14px; right:14px; cursor:pointer; font-size:12px; color:rgba(255,255,255,.8); padding:3px 10px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); } .banco-editar:hover, .banco-editar:focus-visible{ background:rgba(255,255,255,.22); color:#fff; outline:none; } .banco-nombre{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; padding-right:70px; } .banco-cuenta{ font-family:var(--mono); font-size:12px; color:rgba(226,236,250,.75); margin-top:3px; letter-spacing:.04em; } .banco-chip{ display:block; width:34px; height:25px; margin:14px 0 10px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); background:linear-gradient(135deg,#F7D68A,#D4912F 55%,#F5C46B); position:relative; overflow:hidden; } .banco-chip::before{ content:''; position:absolute; inset:5px 0; border-top:1px solid rgba(0,0,0,.22); border-bottom:1px solid rgba(0,0,0,.22); } .banco-chip::after{ content:''; position:absolute; top:0; bottom:0; left:50%; border-left:1px solid rgba(0,0,0,.22); } .banco-balance{ font-size:23px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25); } .banco-tarjeta.en-negativo .banco-balance{ color:#FCA5A5; } .banco-aviso{ font-family:var(--sans); font-size:12px; font-weight:500; color:#FECACA; margin-top:4px; text-shadow:none; } .banco-acciones{ padding:14px 16px 12px; } .banco-enlace{ background:none; border:none; color:var(--teal-600); cursor:pointer; font-size:12.5px; padding:0; margin:10px 14px 0 0; } .banco-enlace:hover{ text-decoration:underline; } html.modo-oscuro .banco-enlace{ color:var(--teal-400); } /* ── La lista de artículos al escribir en la factura y la cotización ── Flota sobre la página (va en el body): dentro de la tabla se cortaba. */ .lista-articulos{ position:fixed; z-index:9400; display:none; max-height:min(360px, 60vh); overflow-y:auto; padding:6px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:0 22px 48px -12px rgba(11,27,54,.35), 0 0 0 1px rgba(79,163,247,.08); animation:digital-ventana .16s cubic-bezier(.2,.8,.2,1); } .lista-articulos .la-item{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 11px; border-radius:10px; cursor:pointer; } .lista-articulos .la-item.elegido{ background:linear-gradient(90deg,color-mix(in srgb, var(--verde-vivo) 14%, transparent),color-mix(in srgb, var(--verde-vivo) 4%, transparent)); box-shadow:inset 0 0 0 1px var(--borde-vivo); } .lista-articulos .la-nombre{ min-width:0; display:flex; flex-direction:column; } .lista-articulos .la-nombre > span{ font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lista-articulos .la-nombre small{ font-size:12px; color:var(--ink-faint); } .lista-articulos .la-datos{ flex:none; display:flex; flex-direction:column; align-items:flex-end; text-align:right; } .lista-articulos .la-datos b{ font-size:13.5px; color:var(--ink); font-weight:600; } .lista-articulos .la-datos > span{ font-size:12px; color:var(--ink-faint); } .lista-articulos .la-ex{ color:var(--exito); } .lista-articulos .la-agotado{ color:var(--red-600); font-weight:600; } .lista-articulos mark{ background:transparent; color:var(--verde-vivo); font-weight:700; } .lista-articulos .la-pie{ display:flex; gap:6px; align-items:center; padding:7px 10px 3px; margin-top:4px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); } .lista-articulos kbd{ font-family:var(--mono); font-size:11px; padding:1px 5px; border-radius:5px; border:1px solid var(--line); background:var(--paper); } @media (max-width:640px){ .lista-articulos .la-pie{ display:none; } } /* ── El buscador (Ctrl + K) ── */ .buscador-fondo{ position:fixed; inset:0; z-index:9500; display:none; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; background:rgba(6,14,28,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .buscador-fondo.abierto{ display:flex; } .buscador-caja{ width:min(640px,100%); max-height:72vh; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:var(--card); border:1px solid var(--line); box-shadow:0 30px 80px -20px rgba(6,14,28,.6), 0 0 0 1px rgba(79,163,247,.08); animation:digital-ventana .22s cubic-bezier(.2,.8,.2,1) backwards; } .buscador-entrada{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); } .buscador-entrada [class^="ico-"]{ width:20px; height:20px; color:var(--verde-vivo); } .buscador-entrada input{ flex:1; border:0 !important; outline:none; box-shadow:none !important; background:transparent !important; font:inherit; font-size:17px; color:var(--ink); padding:2px 0; } .buscador-lista{ overflow-y:auto; padding:8px; } .buscador-grupo{ padding:10px 10px 4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint); } .buscador-item{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:11px; background:transparent; color:var(--ink); font:inherit; font-size:14px; text-align:left; cursor:pointer; } .buscador-item .buscador-icono{ flex:none; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--verde-tenue); color:var(--verde); } .buscador-item .buscador-icono > *{ width:16px; height:16px; } .buscador-item .buscador-texto{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .buscador-item .buscador-detalle{ color:var(--ink-faint); font-size:12.5px; white-space:nowrap; } .buscador-item.elegido{ background:linear-gradient(90deg,color-mix(in srgb, var(--verde-vivo) 14%, transparent),color-mix(in srgb, var(--verde-vivo) 4%, transparent)); box-shadow:inset 0 0 0 1px var(--borde-vivo); } .buscador-item.elegido .buscador-icono{ background:var(--grad-marca); color:#fff; box-shadow:0 6px 14px -4px rgba(42,123,212,.6); } .buscador-item mark{ background:transparent; color:var(--verde-vivo); font-weight:700; } .buscador-vacio{ padding:28px 16px; text-align:center; color:var(--ink-faint); font-size:14px; } .buscador-pie{ display:flex; gap:16px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); background:var(--paper); } /* ── Modo oscuro: centro de control ── */ html.modo-oscuro .sidebar{ background: radial-gradient(420px 260px at -20% -6%, rgba(42,123,212,.35), transparent 70%), radial-gradient(360px 300px at 120% 105%, rgba(212,145,47,.12), transparent 70%), linear-gradient(180deg,#050C19 0%,#081428 50%,#050C19 100%); } html.modo-oscuro .topbar{ box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(0,0,0,.35); } html.modo-oscuro .card.stat:hover{ box-shadow:0 0 0 1px var(--borde-vivo), 0 18px 40px -16px rgba(79,163,247,.35); } html.modo-oscuro .buscar-todo kbd, html.modo-oscuro .buscador-pie kbd{ background:#0A1426; } html.modo-oscuro thead th{ background:linear-gradient(180deg,#0A1426,#0B1629); } html.modo-oscuro h1.page-title{ background:linear-gradient(90deg,#fff,#BFD9FF); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ── En el celular ── */ @media (max-width: 860px){ .buscar-todo{ height:40px; margin-left:auto; } .panel-encabezado{ margin-bottom:16px; padding:20px 18px 18px; border-radius:18px; } .panel-encabezado::after{ width:100%; height:55%; opacity:.3; } .panel-encabezado .luz-chip{ height:30px; font-size:12px; } .panel-luces{ width:100%; } h1.page-title{ font-size:24px; } h1.page-title::after{ margin-top:8px; } .buscador-fondo{ padding:8px; align-items:stretch; } .buscador-caja{ max-height:none; height:100%; border-radius:16px; } } @media (prefers-reduced-motion: reduce){ .shell *, .shell *::before, .shell *::after, .buscador-fondo *, #estado-carga-datos, #estado-carga-datos::after{ animation:none !important; transition:none !important; } } /* ══════════ Por fuera digital (2026-11): la página de inicio y la entrada ══════════ Arriba, una portada oscura de centro de control (rejilla, luces azules y doradas, el titular encendido y el sistema en vivo detrás de la factura); el menú de vidrio oscuro; tarjetas con una luz que sigue al ratón; el plan escogido con un borde que gira y el Pro en oscuro; el reloj del plazo como pantalla digital; la barra de arriba que se llena al bajar; y la entrada partida en dos: la marca a la izquierda y el formulario a la derecha. Con «reducir movimiento», todo quieto. */ /* La barra que se llena al bajar */ .lp-progreso{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; pointer-events:none; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,#1A56A6,#4FA3F7,#F5C46B); box-shadow:0 0 12px rgba(79,163,247,.7); } /* El menú de arriba: vidrio oscuro */ .lp-nav{ background:rgba(5,14,28,.9); border-bottom:1px solid rgba(111,178,242,.12); } .lp-nav.lp-con-sombra{ border-bottom-color:rgba(111,178,242,.2); box-shadow:0 10px 30px rgba(0,0,0,.35); } .lp-nav .land-brand-name{ color:#fff; } .lp-links button{ color:rgba(220,232,248,.78); } .lp-links button:hover{ color:#fff; background:rgba(255,255,255,.08); } .lp-nav .lp-btn-2, .lp-portada .lp-btn-2{ color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .lp-nav .lp-btn-2:hover, .lp-portada .lp-btn-2:hover{ color:#fff; border-color:rgba(156,203,255,.7); background:rgba(255,255,255,.12); } .lp-hamburguesa{ color:#fff; border-color:rgba(255,255,255,.22); } #land-nav-movil{ background:#081428; border-top-color:rgba(111,178,242,.14); } #land-nav-movil button.lp-mov{ color:#E6EEF9; border-bottom-color:rgba(255,255,255,.08); } /* La portada */ .lp-portada{ color:#fff; background: radial-gradient(900px 520px at 88% -8%, rgba(42,123,212,.50), transparent 65%), radial-gradient(700px 460px at -8% 105%, rgba(212,145,47,.24), transparent 65%), linear-gradient(180deg,#050E1C 0%,#091830 55%,#0B1B36 100%); } .lp-portada::before{ background-image:linear-gradient(rgba(156,203,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(156,203,255,.07) 1px,transparent 1px); } /* Una línea de luz que baja por la rejilla */ .lp-portada::after{ content:''; position:absolute; left:0; right:0; top:-30%; height:30%; z-index:-1; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(79,163,247,.10),transparent); animation:lp-barrido 9s linear infinite; } @keyframes lp-barrido{ to{ transform:translateY(470%); } } .lp-mancha{ mix-blend-mode:screen; opacity:.35; } .lp-mancha-1{ background:#2A7BD4; } .lp-mancha-2{ background:#D4912F; opacity:.22; } .lp-mancha-3{ background:#4FA3F7; opacity:.18; } .lp-titular{ color:#fff; text-shadow:0 2px 30px rgba(42,123,212,.25); } .lp-titular .lp-degradado{ background:linear-gradient(90deg,#9CCBFF,#4FA3F7,#F5C46B,#9CCBFF); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; } .lp-bajada{ color:rgba(214,227,245,.84); } .lp-sello-rd{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#E6EEF9; box-shadow:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .lp-sello-rd .lp-punto-vivo{ background:rgba(74,222,128,.16); } .lp-sello-rd .lp-punto-vivo::before{ background:#4ADE80; } .lp-nota-cta{ color:rgba(190,206,230,.75); } .lp-garantias{ color:rgba(214,227,245,.82); } .lp-garantias span::before{ background:rgba(79,163,247,.18); color:#9CCBFF; } .lp-btn-1{ background:linear-gradient(135deg,#1A56A6,#2A7BD4 55%,#4FA3F7); box-shadow:0 10px 28px rgba(42,123,212,.45); } .lp-btn-1:hover{ box-shadow:0 14px 36px rgba(42,123,212,.6); } .cf-pie{ color:rgba(214,227,245,.82); } .cf-pie b{ color:#fff; } .lp-flotante{ background:rgba(13,28,54,.72); border-color:rgba(111,178,242,.24); color:rgba(214,227,245,.86); box-shadow:0 18px 40px rgba(0,0,0,.4); } .lp-flotante b{ color:#fff; } /* El sistema en vivo, detrás de la factura */ .lp-visual .cf{ position:relative; z-index:2; box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); } .lp-tablero{ position:absolute; z-index:1; top:-6px; right:-160px; width:470px; border-radius:16px; overflow:hidden; pointer-events:none; background:linear-gradient(180deg,rgba(14,28,52,.92),rgba(8,18,36,.92)); border:1px solid rgba(111,178,242,.22); box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 60px rgba(42,123,212,.18); transform:perspective(1300px) rotateY(-16deg) rotateX(6deg); transform-origin:right center; animation:lp-flotar 9s ease-in-out infinite; animation-delay:-3s; } .lp-tab-barra{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid rgba(111,178,242,.14); font-size:11px; color:rgba(190,206,230,.8); } .lp-tab-barra i{ width:8px; height:8px; border-radius:50%; background:#3B4A63; } .lp-tab-barra i:nth-child(1){ background:#F87171; } .lp-tab-barra i:nth-child(2){ background:#FBBF24; } .lp-tab-barra i:nth-child(3){ background:#4ADE80; } .lp-tab-barra span{ margin-left:8px; font-weight:600; letter-spacing:.02em; } .lp-tab-barra em{ margin-left:auto; font-style:normal; display:inline-flex; align-items:center; gap:6px; color:#86EFAC; } .lp-tab-punto{ width:7px; height:7px; border-radius:50%; background:#4ADE80; animation:lp-latido 2s infinite; } .lp-tab-cuerpo{ display:grid; grid-template-columns:44px 1fr; } .lp-tab-menu{ display:flex; flex-direction:column; gap:9px; padding:12px 10px; border-right:1px solid rgba(111,178,242,.1); background:rgba(5,12,25,.5); } .lp-tab-menu b{ width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,#1A56A6,#4FA3F7); margin-bottom:4px; } .lp-tab-menu span{ height:7px; border-radius:4px; background:rgba(156,203,255,.18); } .lp-tab-menu span.activo{ background:linear-gradient(90deg,#F5C46B,#4FA3F7); box-shadow:0 0 8px rgba(79,163,247,.6); } .lp-tab-main{ padding:12px; } .lp-tab-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .lp-tab-kpis div{ padding:9px 10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(111,178,242,.12); } .lp-tab-kpis div:first-child{ background:linear-gradient(135deg,#123266,#1A56A6); border-color:transparent; } .lp-tab-kpis small{ display:block; font-size:9.5px; color:rgba(190,206,230,.75); text-transform:uppercase; letter-spacing:.08em; } .lp-tab-kpis strong{ display:block; font-size:15px; color:#fff; margin:3px 0 2px; font-variant-numeric:tabular-nums; } .lp-tab-kpis em{ font-style:normal; font-size:10px; color:#86EFAC; } .lp-tab-kpis em.lp-tab-oro{ color:#F5C46B; } .lp-tab-grafica{ position:relative; display:flex; align-items:flex-end; gap:7px; height:110px; margin-top:12px; padding:8px 4px 0; border-radius:10px; background:linear-gradient(180deg,transparent 0 24%,rgba(156,203,255,.06) 24% 25%,transparent 25% 49%,rgba(156,203,255,.06) 49% 50%,transparent 50% 74%,rgba(156,203,255,.06) 74% 75%,transparent 75%); } .lp-tab-grafica > span{ flex:1; height:var(--h); border-radius:4px 4px 1px 1px; background:linear-gradient(180deg,#4FA3F7,#1A56A6); transform-origin:50% 100%; animation:lp-barra 3.6s cubic-bezier(.2,.8,.2,1) infinite; animation-delay:calc(var(--i) * 90ms); } .lp-tab-grafica > span:nth-last-of-type(1){ background:linear-gradient(180deg,#F7C26B,#D4912F); box-shadow:0 0 14px rgba(245,196,107,.5); } @keyframes lp-barra{ 0%{ transform:scaleY(.15); } 30%,85%{ transform:scaleY(1); } 100%{ transform:scaleY(.15); } } .lp-tab-linea{ position:absolute; inset:8px 4px 0; width:calc(100% - 8px); height:calc(100% - 8px); overflow:visible; } .lp-tab-linea polyline{ fill:none; stroke:#F5C46B; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(245,196,107,.6)); stroke-dasharray:420; stroke-dashoffset:0; animation:lp-traza 3.6s ease-in-out infinite; } @keyframes lp-traza{ 0%{ stroke-dashoffset:420; } 45%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; opacity:0; } } .lp-visual .cf{ margin-right:110px; margin-top:64px; } .lp-visual .lp-flotante-2{ top:6px; right:auto; left:-30px; } /* Las cifras, de vidrio */ .lp-cifra{ background:rgba(255,255,255,.045); border-color:rgba(156,203,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .25s, border-color .25s, background .25s; } .lp-cifra:hover{ transform:translateY(-4px); border-color:rgba(156,203,255,.4); background:rgba(255,255,255,.07); } .lp-cifra .lp-num{ color:#fff; text-shadow:0 0 24px rgba(79,163,247,.35); font-variant-numeric:tabular-nums; } .lp-cifra .lp-num small{ color:#F5C46B; } .lp-cifra div:last-child{ color:rgba(190,206,230,.8); } /* La cinta */ .lp-cinta{ background:linear-gradient(90deg,#071226,#0E2346,#071226); border-top:1px solid rgba(111,178,242,.18); border-bottom:1px solid rgba(111,178,242,.18); } .lp-cinta .ticker-item::before{ text-shadow:0 0 10px rgba(245,196,107,.9); } /* Las secciones claras, con la rejilla de puntos */ .lp-seccion{ background-image:radial-gradient(rgba(26,86,166,.07) 1px, transparent 1.2px); background-size:24px 24px; } .lp-seccion-gris{ background:radial-gradient(rgba(26,86,166,.07) 1px, transparent 1.2px) 0 0/24px 24px, linear-gradient(180deg,var(--paper),#fff); } .lp-ceja{ box-shadow:inset 0 0 0 1px rgba(212,145,47,.25); } .lp-h2{ text-wrap:balance; } /* La luz que sigue al ratón (--mx, --my los pone app.js) */ .lp-modulo::after, .lp-plan::after, .lp-quien::after, .lp-contacto::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(42,123,212,.12), transparent 60%); } .lp-modulo:hover::after, .lp-plan:hover::after, .lp-quien:hover::after, .lp-contacto:hover::after{ opacity:1; } .lp-quien, .lp-contacto{ position:relative; overflow:hidden; } .lp-modulo:hover .lp-ico{ background:linear-gradient(135deg,#1A56A6,#4FA3F7) !important; color:#fff !important; box-shadow:0 10px 22px -8px rgba(42,123,212,.7); } .lp-modulo .lp-ico{ transition:transform .3s, background .3s, color .3s, box-shadow .3s; } .lp-modulo .lp-nuevo{ z-index:1; } /* El plazo: el reloj como pantalla digital */ .lp-plazo{ background: radial-gradient(520px 300px at 12% 0%, rgba(42,123,212,.45), transparent 65%), radial-gradient(420px 280px at 95% 100%, rgba(212,145,47,.30), transparent 65%), linear-gradient(135deg,#061226,#0B1B36); border:1px solid rgba(111,178,242,.18); box-shadow:0 30px 60px -20px rgba(6,18,38,.6); } .lp-plazo::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(156,203,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(156,203,255,.05) 1px,transparent 1px); background-size:30px 30px; } .lp-plazo > *{ position:relative; } .lp-reloj div{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border-color:rgba(156,203,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .lp-reloj div::after{ content:''; position:absolute; left:10%; right:10%; top:50%; height:1px; background:rgba(0,0,0,.35); } .lp-reloj b{ font-family:var(--mono); font-weight:600; color:#fff; text-shadow:0 0 18px rgba(79,163,247,.65); } .lp-reloj div:last-child{ border-color:rgba(245,196,107,.45); animation:lp-segundo 1s ease-in-out infinite; } .lp-reloj div:last-child b{ color:#FFE1A6; text-shadow:0 0 18px rgba(245,196,107,.7); } @keyframes lp-segundo{ 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px rgba(245,196,107,.25); } } /* Los pasos: la línea entre ellos con una luz que corre */ .lp-pasos::after{ content:''; position:absolute; top:30px; left:16%; width:12%; height:4px; border-radius:4px; pointer-events:none; background:linear-gradient(90deg,transparent,#4FA3F7,#F5C46B,transparent); filter:blur(.5px); animation:lp-corre-paso 4.5s ease-in-out infinite; } @keyframes lp-corre-paso{ 0%{ left:16%; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:72%; opacity:0; } } .lp-paso .lp-n{ background:linear-gradient(135deg,#1A56A6,#2A7BD4 55%,#4FA3F7); } /* Para quién: iconos de línea (antes emojis) */ .lp-quien-ico{ width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; background:var(--verde-tenue); color:var(--verde); transition:transform .3s, background .3s, color .3s, box-shadow .3s; } .lp-quien-ico svg{ width:24px; height:24px; } .lp-quien:nth-child(2) .lp-quien-ico, .lp-quien:nth-child(4) .lp-quien-ico{ background:var(--sol-tenue); color:var(--sol-hondo); } .lp-quien:hover .lp-quien-ico{ transform:rotate(-6deg) scale(1.08); background:linear-gradient(135deg,#1A56A6,#4FA3F7); color:#fff; box-shadow:0 10px 22px -8px rgba(42,123,212,.7); } /* Precios: el escogido con un borde que gira; el Pro, en oscuro */ .lp-plan{ overflow:hidden; } .lp-plan-destacado{ overflow:visible; border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#1A56A6,#4FA3F7,#F5C46B,#4FA3F7,#1A56A6,#4FA3F7,#F5C46B) border-box; background-size:100% 100%, 300% 100%; animation:lp-borde-corre 6s linear infinite; box-shadow:0 24px 54px -18px rgba(26,86,166,.45); } @keyframes lp-borde-corre{ from{ background-position:0 0, 0% 0; } to{ background-position:0 0, 150% 0; } } .lp-plan-destacado::after{ border-radius:20px; } .lp-plan-cinta{ background:linear-gradient(135deg,#1A56A6,#4FA3F7); box-shadow:0 6px 16px rgba(42,123,212,.45); } .lp-planes > .lp-plan:not(.lp-plan-destacado){ color:#E6EEF9; border-color:rgba(111,178,242,.22); background:radial-gradient(360px 240px at 100% 0%, rgba(42,123,212,.35), transparent 65%), radial-gradient(300px 220px at 0% 100%, rgba(212,145,47,.18), transparent 65%), linear-gradient(160deg,#0B1B36,#081428); } .lp-planes > .lp-plan:not(.lp-plan-destacado) h3, .lp-planes > .lp-plan:not(.lp-plan-destacado) .lp-precio{ color:#fff; } .lp-planes > .lp-plan:not(.lp-plan-destacado) .lp-precio small, .lp-planes > .lp-plan:not(.lp-plan-destacado) > p{ color:rgba(190,206,230,.8); } .lp-planes > .lp-plan:not(.lp-plan-destacado) li{ color:#E6EEF9; } .lp-planes > .lp-plan:not(.lp-plan-destacado) li::before{ color:#F5C46B; } .lp-planes > .lp-plan:not(.lp-plan-destacado) .lp-li-nuevo{ background:rgba(74,222,128,.14); color:#86EFAC; } .lp-planes > .lp-plan:not(.lp-plan-destacado) .lp-btn-2{ color:var(--tinta); background:linear-gradient(135deg,#F7C26B,#D4912F); border-color:transparent; box-shadow:0 10px 26px -8px rgba(212,145,47,.7); } .lp-planes > .lp-plan:not(.lp-plan-destacado)::after{ background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(156,203,255,.14), transparent 60%); } .lp-contador{ border:1px solid rgba(111,178,242,.2); background:radial-gradient(420px 260px at 100% 0%, rgba(42,123,212,.4), transparent 65%), linear-gradient(135deg,#071226,#16376B); } /* Preguntas: la abierta con su raya de color */ #land-faq .faq-item{ position:relative; overflow:hidden; } #land-faq .faq-item.open::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#1A56A6,#4FA3F7,#F5C46B); } #land-faq .faq-item:hover{ border-color:#BFD6F2; } /* Contacto, ciudades y lo último */ .lp-ciudades span{ transition:border-color .2s, color .2s, transform .2s; } .lp-ciudades span:hover{ border-color:#BFD6F2; color:var(--tinta); transform:translateY(-2px); } .lp-contacto:hover .lp-ico{ background:linear-gradient(135deg,#1A56A6,#4FA3F7); color:#fff; } .lp-contacto .lp-ico{ transition:background .3s, color .3s; } .lp-final{ position:relative; overflow:hidden; isolation:isolate; border:1px solid rgba(111,178,242,.2); } .lp-final::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(156,203,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(156,203,255,.06) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 75%); } .lp-pie{ position:relative; background:linear-gradient(180deg,#0B1B36,#050E1C); } .lp-pie::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(79,163,247,.6),rgba(245,196,107,.6),transparent); } /* El titular: la palabra que cambia (negocio, colmado, restaurante…) */ .lp-rota{ display:inline-block; color:#fff; position:relative; transition:transform .26s cubic-bezier(.4,0,.2,1), opacity .26s, filter .26s; } .lp-rota::after{ content:''; position:absolute; left:2%; right:2%; bottom:.04em; height:.08em; border-radius:99px; background:linear-gradient(90deg,#4FA3F7,#F5C46B); opacity:.85; } .lp-rota.sale{ transform:translateY(-35%) rotateX(60deg); opacity:0; filter:blur(4px); } .lp-rota.entra{ animation:lp-rota-entra .42s cubic-bezier(.2,.8,.2,1); } @keyframes lp-rota-entra{ from{ transform:translateY(40%) rotateX(-60deg); opacity:0; filter:blur(4px); } to{ transform:none; opacity:1; filter:none; } } /* La factura de la portada se inclina un poco hacia el ratón (--inc-x, --inc-y de app.js) */ .lp-portada .lp-visual.lp-revela.lp-visible{ transform:perspective(1400px) rotateY(calc(var(--inc-x, 0) * 5deg)) rotateX(calc(var(--inc-y, 0) * -4deg)); transition:transform .4s cubic-bezier(.2,.7,.2,1); } /* ── Pruébalo aquí mismo: la factura de demostración ── */ .lp-demo-seccion{ padding-top:84px; } .lp-demo{ position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; padding:30px; border-radius:26px; color:#fff; background:radial-gradient(520px 320px at 0% 0%, rgba(42,123,212,.42), transparent 65%), radial-gradient(460px 320px at 100% 100%, rgba(212,145,47,.26), transparent 65%), linear-gradient(135deg,#061226,#0B1B36); border:1px solid rgba(111,178,242,.2); box-shadow:0 40px 80px -30px rgba(6,18,38,.7); } .lp-demo::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(156,203,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(156,203,255,.05) 1px,transparent 1px); background-size:30px 30px; } .lp-demo-panel{ display:flex; flex-direction:column; gap:12px; } .lp-demo-paso{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:15px; } .lp-demo-paso small{ margin-left:auto; color:rgba(190,206,230,.7); font-size:12.5px; } .lp-demo-n{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex:none; background:linear-gradient(135deg,#1A56A6,#4FA3F7); box-shadow:0 0 0 4px rgba(79,163,247,.15); } .lp-demo-opciones{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .lp-demo-op{ text-align:left; padding:12px 14px; border-radius:14px; cursor:pointer; font:inherit; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(156,203,255,.18); transition:border-color .2s, background .2s, transform .15s; } .lp-demo-op b{ display:block; font-size:14.5px; } .lp-demo-op small{ display:block; margin-top:2px; font-size:12.5px; color:rgba(190,206,230,.75); } .lp-demo-op:hover{ border-color:rgba(156,203,255,.45); } .lp-demo-op.activo{ background:linear-gradient(135deg,rgba(26,86,166,.55),rgba(42,123,212,.3)); border-color:#4FA3F7; box-shadow:0 0 0 3px rgba(79,163,247,.18); } .lp-demo-rnc label{ display:block; font-size:13px; color:rgba(214,227,245,.85); margin-bottom:5px; } .lp-demo-rnc input{ width:100%; padding:11px 13px; border-radius:11px; border:1px solid rgba(156,203,255,.3); background:rgba(255,255,255,.06); color:#fff; font:inherit; font-family:var(--mono); font-size:15px; outline:none; } .lp-demo-rnc input:focus{ border-color:#4FA3F7; box-shadow:0 0 0 3px rgba(79,163,247,.25); } .lp-demo-rnc input::placeholder{ color:rgba(190,206,230,.5); font-family:var(--sans); font-size:13.5px; } .lp-demo-productos{ display:flex; flex-wrap:wrap; gap:8px; } .lp-demo-prod{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 12px; border-radius:12px; cursor:pointer; font:inherit; font-size:13px; color:#E6EEF9; background:rgba(255,255,255,.05); border:1px dashed rgba(156,203,255,.3); transition:transform .15s, border-color .2s, background .2s; } .lp-demo-prod b{ font-family:var(--mono); font-size:12px; color:#F5C46B; font-weight:600; } .lp-demo-prod:hover{ border-style:solid; border-color:#4FA3F7; background:rgba(79,163,247,.12); transform:translateY(-2px); } .lp-demo-prod:active{ transform:scale(.96); } .lp-demo-carrito{ display:flex; flex-direction:column; gap:6px; } .lp-demo-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.04); font-size:13.5px; animation:digital-sube .25s cubic-bezier(.2,.7,.2,1); } .lp-demo-cant{ display:inline-flex; align-items:center; gap:8px; } .lp-demo-cant button{ width:26px; height:26px; border-radius:8px; border:1px solid rgba(156,203,255,.3); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-size:15px; line-height:1; } .lp-demo-cant button:hover{ border-color:#4FA3F7; background:rgba(79,163,247,.18); } .lp-demo-cant b{ min-width:22px; text-align:center; font-family:var(--mono); } .lp-demo-firmar{ width:100%; margin-top:2px; } .lp-demo-firmar:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; } .lp-demo-firmar:disabled::after{ display:none; } .lp-demo-aviso{ margin:0; min-height:18px; font-size:12.5px; color:#FCD34D; } .lp-demo-nota{ margin:0; font-size:12px; color:rgba(190,206,230,.65); } .lp-demo.firmando .lp-demo-panel, .lp-demo.aceptada .lp-demo-panel{ opacity:.55; pointer-events:none; transition:opacity .3s; } /* La factura que se arma */ .lp-demo-vista{ display:flex; flex-direction:column; gap:14px; } .lp-demo-ticket{ position:relative; overflow:hidden; background:#fff; color:var(--ink); border-radius:14px; padding:20px 20px 16px; box-shadow:0 24px 50px rgba(0,0,0,.45); font-size:13px; border-top:4px solid #1A56A6; } .lp-demo-t-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .lp-demo-t-cab b{ display:block; font-size:13px; letter-spacing:.02em; color:var(--tinta); } .lp-demo-t-cab small{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); } .lp-demo-t-tipo{ font-family:var(--mono); font-size:11px; font-weight:700; color:#fff; background:var(--tinta); padding:3px 8px; border-radius:6px; } .lp-demo-t-ncf{ margin:14px 0 6px; padding-bottom:10px; border-bottom:1px dashed var(--line); } .lp-demo-t-ncf small{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .lp-demo-t-ncf b{ font-family:var(--mono); font-size:19px; letter-spacing:.04em; color:var(--tinta); } .lp-demo-t-cliente{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; } .lp-demo-t-lineas{ min-height:74px; } .lp-demo-linea{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:12.5px; } .lp-demo-linea i{ font-style:normal; font-family:var(--mono); color:var(--ink-faint); font-size:11px; } .lp-demo-linea b{ font-family:var(--mono); font-weight:500; } .lp-demo-linea.recien{ animation:lp-demo-recien .6s ease-out; } @keyframes lp-demo-recien{ from{ background:rgba(79,163,247,.18); } to{ background:transparent; } } .lp-demo-vacio{ padding:18px 0; text-align:center; color:var(--ink-faint); font-size:12.5px; } .lp-demo-t-tot{ border-top:1px solid var(--line); margin-top:8px; padding-top:8px; } .lp-demo-t-tot > div{ display:flex; justify-content:space-between; padding:2px 0; font-size:12.5px; color:var(--ink-soft); } .lp-demo-t-tot b{ font-family:var(--mono); font-weight:500; color:var(--ink); } .lp-demo-t-tot .lp-demo-total{ border-top:2px solid var(--tinta); margin-top:6px; padding-top:6px; font-size:14px; color:var(--tinta); font-weight:700; } .lp-demo-t-tot .lp-demo-total b{ font-size:16px; font-weight:700; color:var(--tinta); } .lp-demo-codigo{ min-height:16px; margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--exito); } .lp-demo-sello{ position:absolute; right:20px; top:58px; padding:6px 12px; border:3px solid #127235; border-radius:10px; color:#127235; text-align:center; transform:rotate(-10deg) scale(1.6); opacity:0; pointer-events:none; font-family:var(--mono); letter-spacing:.14em; } .lp-demo-sello b{ display:block; font-size:17px; font-weight:800; } .lp-demo-sello small{ font-size:10px; letter-spacing:.3em; } .lp-demo.aceptada .lp-demo-sello{ opacity:.9; transform:rotate(-10deg) scale(1); transition:transform .45s cubic-bezier(.3,1.6,.5,1), opacity .2s; } .lp-demo.aceptada .lp-demo-ticket{ animation:lp-demo-golpe .45s ease-out .05s; } @keyframes lp-demo-golpe{ 30%{ transform:translateY(3px); } } /* Los pasos de la firma */ .lp-demo-pasos{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; } .lp-demo-pasos li{ position:relative; flex:1; min-width:150px; padding:9px 12px 9px 34px; border-radius:12px; font-size:12.5px; color:rgba(190,206,230,.6); background:rgba(255,255,255,.04); border:1px solid rgba(156,203,255,.14); transition:color .2s, border-color .2s, background .2s; } .lp-demo-pasos li::before{ content:''; position:absolute; left:12px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; border:2px solid rgba(156,203,255,.35); box-sizing:border-box; } .lp-demo-pasos li.en-curso{ color:#fff; border-color:rgba(79,163,247,.6); background:rgba(79,163,247,.12); } .lp-demo-pasos li.en-curso::before{ border-color:#4FA3F7; border-top-color:transparent; animation:lp-giro-pequeno .7s linear infinite; } .lp-demo-pasos li.hecho{ color:#86EFAC; border-color:rgba(134,239,172,.35); background:rgba(74,222,128,.08); } .lp-demo-pasos li.hecho::before{ content:'✓'; border:0; width:auto; height:auto; margin-top:-9px; font-size:13px; font-weight:800; color:#4ADE80; } @keyframes lp-giro-pequeno{ to{ transform:rotate(360deg); } } /* Lo que pasa solo en ese mismo momento */ .lp-demo-efectos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .lp-demo-efecto{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(156,203,255,.12); opacity:.4; transition:opacity .4s, border-color .4s, background .4s, transform .4s; transition-delay:calc(var(--i) * 160ms); } .lp-demo-efecto b{ display:block; font-size:13px; } .lp-demo-efecto small{ display:block; font-size:12px; color:rgba(190,206,230,.8); } .lp-demo-ef-ico{ flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(156,203,255,.1); color:#9CCBFF; } .lp-demo-ef-ico svg{ width:18px; height:18px; } .lp-demo.aceptada .lp-demo-efecto{ opacity:1; border-color:rgba(79,163,247,.45); background:rgba(79,163,247,.1); transform:translateY(-2px); } .lp-demo.aceptada .lp-demo-ef-ico{ background:linear-gradient(135deg,#1A56A6,#4FA3F7); color:#fff; box-shadow:0 8px 18px -6px rgba(42,123,212,.8); } .lp-demo-fin{ display:flex; gap:10px; flex-wrap:wrap; animation:digital-sube .4s cubic-bezier(.2,.7,.2,1) .5s backwards; } .lp-demo-fin .lp-btn-2{ color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); } @media (max-width:980px){ .lp-demo{ grid-template-columns:1fr; padding:22px; } } @media (max-width:640px){ .lp-demo{ padding:18px 14px; border-radius:20px; } .lp-demo-opciones, .lp-demo-efectos{ grid-template-columns:1fr; } .lp-demo-sello{ top:60px; right:14px; } } @media (max-width:1180px){ .lp-tablero{ right:-190px; } } @media (max-width:980px){ .lp-tablero{ right:auto; left:50%; top:30px; width:420px; transform:translateX(-10%) perspective(1300px) rotateY(-10deg) rotateX(6deg); opacity:.85; } .lp-visual .cf{ margin-right:0; margin-top:40px; } .lp-visual .lp-flotante-2{ left:-8px; } .lp-pasos::after{ display:none; } } @media (max-width:640px){ .lp-tablero{ display:none; } } /* ── La entrada: la marca a la izquierda y el formulario a la derecha ── */ #login-overlay.entrada-fondo{ background: radial-gradient(900px 520px at 85% -10%, rgba(42,123,212,.45), transparent 65%), radial-gradient(700px 460px at -10% 110%, rgba(212,145,47,.22), transparent 65%), linear-gradient(180deg,#050E1C,#0B1B36) !important; } #login-overlay.entrada-fondo::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(156,203,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(156,203,255,.06) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%); } .entrada-marco{ position:relative; display:grid; grid-template-columns:minmax(0,420px) minmax(0,400px); width:min(820px,100%); max-height:92vh; border-radius:22px; overflow:hidden; border:1px solid rgba(111,178,242,.22); box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 80px rgba(42,123,212,.15); animation:digital-ventana .35s cubic-bezier(.2,.8,.2,1) backwards; } .entrada-marca{ position:relative; overflow:hidden; isolation:isolate; padding:40px 36px; color:#fff; display:flex; flex-direction:column; background:radial-gradient(420px 280px at 0% 0%, rgba(42,123,212,.5), transparent 65%), radial-gradient(360px 260px at 100% 100%, rgba(212,145,47,.28), transparent 65%), linear-gradient(160deg,#0B1B36,#071226); } .entrada-marca::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(156,203,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(156,203,255,.06) 1px,transparent 1px); background-size:28px 28px; } .entrada-logo{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.02em; } .entrada-logo img{ width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(79,163,247,.45)); } .entrada-marca h2{ font-family:var(--display); font-weight:800; font-size:30px; line-height:1.08; letter-spacing:-.025em; margin:34px 0 12px; color:#fff; text-wrap:balance; } .entrada-marca p{ color:rgba(214,227,245,.82); font-size:14.5px; line-height:1.6; margin:0 0 22px; } .entrada-marca ul{ list-style:none; padding:0; margin:0 0 28px; } .entrada-marca li{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; color:#E6EEF9; } .entrada-marca li::before{ content:'✓'; flex:none; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:rgba(79,163,247,.2); color:#9CCBFF; } .entrada-ficha{ margin-top:auto; display:flex; align-items:center; gap:18px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(156,203,255,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .entrada-ficha b{ display:block; font-family:var(--mono); font-size:13px; color:#fff; letter-spacing:.04em; } .entrada-ficha small{ font-size:12px; color:rgba(190,206,230,.8); } .entrada-sello{ flex:none; font-size:11px; font-weight:800; letter-spacing:.12em; color:#86EFAC; border:2px solid rgba(134,239,172,.7); border-radius:8px; padding:4px 8px; transform:rotate(-6deg); animation:lp-sello-entrada 1.2s cubic-bezier(.2,.8,.2,1) .5s backwards; } @keyframes lp-sello-entrada{ from{ opacity:0; transform:rotate(-6deg) scale(1.8); } to{ opacity:1; transform:rotate(-6deg) scale(1); } } .entrada-caja{ background:var(--card); max-height:92vh; overflow-y:auto; } #login-header-title{ font-weight:700; letter-spacing:-.01em; } #login-overlay .real-tab-btn{ transition:background .2s, color .2s; } #login-overlay .real-tab-btn.real-tab-activo{ background:linear-gradient(135deg,#1A56A6,#2A7BD4); color:#fff; } #login-overlay .btn-teal{ min-height:44px; } @media (max-width:860px){ .entrada-marco{ grid-template-columns:1fr; width:min(400px,100%); } .entrada-marca{ display:none; } } @media (prefers-reduced-motion: reduce){ #landing-page *, #landing-page *::before, #landing-page *::after, #login-overlay *, #login-overlay *::before, #login-overlay *::after{ animation:none !important; transition:none !important; } .lp-tab-linea polyline{ stroke-dashoffset:0; } } /* ══════════ Más claro (2026-11): el menú y los botones del modo oscuro ══════════ El menú se leía apagado (los títulos de cada grupo casi no se veían y la pantalla abierta apenas se marcaba), y en modo oscuro los botones normales quedaban del color del fondo, con un borde que no se veía. */ .nav-item{ color:#E6EDF8; } .nav-item .nav-icon{ color:#AFC6E6; } .nav-item:hover .nav-icon{ color:#fff; } .nav-label{ color:#9DB2D2; font-weight:600; } .nav-label::after{ background:linear-gradient(90deg,rgba(157,178,210,.38),transparent); } .nav-item.active, .nav-item.active:hover{ color:#fff; font-weight:700; background:linear-gradient(90deg,#2167C2 0%,rgba(42,123,212,.62) 65%,rgba(42,123,212,.2) 100%); box-shadow:inset 0 0 0 1px rgba(156,203,255,.5), 0 10px 24px -10px rgba(42,123,212,.95); } .nav-item.active .nav-icon, .nav-item.active:hover .nav-icon{ color:#fff; filter:drop-shadow(0 0 6px rgba(156,203,255,.9)); } .brand-sub{ color:#B3C3DB; } .sidebar-foot, .perfil-rotulo{ color:#A3B6D2; } .perfil-empresa{ color:#A3B6D2; } /* Modo oscuro: los bordes se ven, los botones normales tienen su color y los oscuros pasan al azul de la marca */ html.modo-oscuro{ --line:#273B5E; } html.modo-oscuro .btn:not(.btn-teal):not(.btn-primary){ background:#18294A; border-color:#3A5683; color:#EEF4FC; } html.modo-oscuro .btn:not(.btn-teal):not(.btn-primary):hover:not(:disabled){ background:#1F3560; border-color:#6FB2F2; color:#fff; } html.modo-oscuro .btn-primary, html.modo-oscuro .btn-primary:hover{ background:linear-gradient(135deg,#2A7BD4,#4FA3F7); border-color:transparent; color:#fff; box-shadow:0 6px 18px -6px rgba(79,163,247,.7); } html.modo-oscuro .btn-teal{ box-shadow:0 6px 18px -6px rgba(79,163,247,.7); } html.modo-oscuro .btn:disabled{ opacity:.55; } html.modo-oscuro .buscar-todo, html.modo-oscuro .reloj-digital, html.modo-oscuro .rnc-pill, html.modo-oscuro .luz-chip{ border-color:#3A5683; } html.modo-oscuro .config-tab{ color:#C9D6EA; } html.modo-oscuro .config-tab.active{ color:#fff; } /* ══════════ Panel de JeFact (2026-11): el panel del dueño de la plataforma ══════════ La franja de arriba (como la del panel de las empresas), las pestañas (Resumen, Clientes, Dinero, Comunicación, Sistema): cada parte del panel dice en cuál va (data-plat-tab) y solo se ve la de la pestaña escogida; la meta del mes con su anillo, los números clave y la actividad. */ #view-plataforma[data-tab="resumen"] > [data-plat-tab]:not([data-plat-tab~="resumen"]), #view-plataforma[data-tab="clientes"] > [data-plat-tab]:not([data-plat-tab~="clientes"]), #view-plataforma[data-tab="dinero"] > [data-plat-tab]:not([data-plat-tab~="dinero"]), #view-plataforma[data-tab="comunicacion"] > [data-plat-tab]:not([data-plat-tab~="comunicacion"]), #view-plataforma[data-tab="sistema"] > [data-plat-tab]:not([data-plat-tab~="sistema"]){ display:none !important; } #view-plataforma > [data-plat-tab]{ margin:0 0 14px !important; animation:plat-entra .35s cubic-bezier(.2,.8,.2,1) backwards; } @keyframes plat-entra{ from{ opacity:0; transform:translateY(6px); } } .plat-encabezado{ margin-bottom:14px; } .plat-actualizar{ cursor:pointer; font:inherit; font-size:12.5px; font-weight:500; } .plat-actualizar:hover{ background:rgba(255,255,255,.16) !important; } .plat-actualizar svg{ color:#9CCBFF; transition:transform .9s cubic-bezier(.2,.8,.2,1); } .plat-actualizar.girando svg{ transform:rotate(360deg); } .plat-luz-punto{ width:8px; height:8px; border-radius:50%; background:#9CA3AF; flex:none; } .panel-encabezado .luz-chip.luz-vivo .plat-luz-punto{ background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.2); } .panel-encabezado .luz-chip.sin-internet .plat-luz-punto{ background:#F59E0B; box-shadow:0 0 0 3px rgba(245,158,11,.22); } .panel-encabezado .luz-chip.dgii-caida .plat-luz-punto{ background:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.25); } /* Las pestañas, como píldoras */ .plat-pestanas{ display:flex; gap:4px; padding:4px; margin:0 0 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); overflow-x:auto; scrollbar-width:none; box-shadow:0 1px 2px rgba(11,27,54,.04); } .plat-pestanas::-webkit-scrollbar{ display:none; } .plat-pestanas [role="tab"]{ flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 16px; border:0; border-radius:10px; background:none; color:var(--ink-soft); font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s, box-shadow .2s; } .plat-pestanas [role="tab"]:hover{ color:var(--ink); background:color-mix(in srgb, var(--verde-vivo) 7%, transparent); } .plat-pestanas [role="tab"].activa{ color:#fff; background:linear-gradient(120deg,#11295A,#1A56A6); box-shadow:0 6px 16px -8px rgba(17,41,90,.7); } .plat-pestanas [role="tab"]:focus-visible{ outline:2px solid #4FA3F7; outline-offset:2px; } .plat-pestana-n{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; font-size:11px; line-height:20px; font-family:var(--mono); background:color-mix(in srgb, var(--ink) 9%, transparent); color:inherit; } .plat-pestana-n:empty{ display:none; } .plat-pestana-n.alerta{ background:#DC2626; color:#fff; } .plat-pestanas [role="tab"].activa .plat-pestana-n:not(.alerta){ background:rgba(255,255,255,.2); } /* Las tarjetas */ .plat-fila-dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; } .plat-fila-dos > .card{ margin:0 !important; } .plat-tarjeta{ padding:16px 18px; } .plat-titulo{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:10px; } .plat-titulo-nota{ text-transform:none; letter-spacing:0; } .plat-titulo-fila{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px 12px; flex-wrap:wrap; } .plat-cargando{ color:var(--ink-soft); font-size:13px; list-style:none; } .plat-enlace{ border:0; background:none; padding:0; margin-top:8px; color:var(--verde); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } #neg-kpis .plat-kpi{ position:relative; overflow:hidden; } #neg-kpis .plat-kpi::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-marca); opacity:.85; } #neg-kpis .plat-kpi > div:nth-child(2){ font-variant-numeric:tabular-nums; letter-spacing:-.01em; } /* La meta del mes */ .plat-meta-cuerpo{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .plat-anillo{ position:relative; width:104px; height:104px; flex:none; } .plat-anillo svg{ width:100%; height:100%; transform:rotate(-90deg); } .plat-anillo circle{ fill:none; stroke-width:9; } .plat-anillo-fondo{ stroke:color-mix(in srgb, var(--ink) 9%, transparent); } .plat-anillo-lleno{ stroke:url(#plat-anillo-color); stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); animation:plat-anillo 1.2s cubic-bezier(.2,.8,.2,1) backwards .1s; } @keyframes plat-anillo{ from{ stroke-dashoffset:264; } } .plat-anillo b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:20px; color:var(--ink); } .plat-meta-texto{ flex:1; min-width:180px; } .plat-meta-cifra{ font-size:24px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); } .plat-meta-cifra span{ display:block; font-size:13px; font-weight:500; color:var(--ink-soft); letter-spacing:0; } .plat-meta-falta, .plat-meta-sin{ font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.5; } .plat-meta-falta b{ color:var(--ink); } .plat-meta-logro{ font-size:13.5px; font-weight:600; color:var(--exito); margin-top:6px; } .plat-meta-form{ margin-top:10px; } .plat-meta-form label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; } .plat-meta-fila{ display:flex; gap:8px; flex-wrap:wrap; } .plat-meta-fila input{ width:150px; } .plat-meta-msg{ font-size:12.5px; margin-top:6px; } .plat-meta-msg.error{ color:var(--red-600, #DC2626); } /* Los números clave */ .plat-numeros{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .plat-numero{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:color-mix(in srgb, var(--verde-vivo) 3%, transparent); } .plat-numero small{ display:block; font-size:11.5px; color:var(--ink-soft); } .plat-numero strong{ display:block; font-size:20px; font-weight:700; margin:2px 0; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--ink); } .plat-numero span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; } .plat-numero.bueno strong{ color:var(--exito); } .plat-numero.malo strong{ color:var(--red-600, #DC2626); } /* Lo que toca cobrar */ .plat-cobrar-total{ font-size:22px; font-weight:700; margin-bottom:6px; font-variant-numeric:tabular-nums; color:var(--ink); } .plat-cobrar-total span{ font-size:13px; font-weight:500; color:var(--ink-soft); } .plat-cobrar-fila{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:13px; } .plat-cobrar-monto{ font-family:var(--mono); white-space:nowrap; } /* La actividad: una línea de tiempo con un punto de color por cosa */ .plat-filtros{ display:flex; gap:6px; flex-wrap:wrap; } .plat-filtro{ border:1px solid var(--line); background:var(--card); color:var(--ink-soft); border-radius:999px; padding:3px 10px; font:inherit; font-size:12px; cursor:pointer; } .plat-filtro span{ font-family:var(--mono); opacity:.75; } .plat-filtro.activo{ color:#fff; background:#11295A; border-color:#11295A; } .plat-actividad{ list-style:none; margin:4px 0 0; padding:0; max-height:420px; overflow-y:auto; } .plat-evento{ position:relative; display:flex; gap:12px; padding:8px 0 8px 2px; font-size:13px; } .plat-evento:not(:last-child)::after{ content:''; position:absolute; left:7px; top:24px; bottom:-8px; width:2px; background:var(--line); } .plat-ev-punto{ width:12px; height:12px; margin-top:3px; border-radius:50%; flex:none; background:#2A7BD4; box-shadow:0 0 0 3px color-mix(in srgb, #2A7BD4 18%, transparent); } .plat-ev-pago .plat-ev-punto{ background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.18); } .plat-ev-primera-factura .plat-ev-punto{ background:#7C3AED; box-shadow:0 0 0 3px rgba(124,58,237,.18); } .plat-ev-soporte .plat-ev-punto{ background:#D97706; box-shadow:0 0 0 3px rgba(217,119,6,.2); } .plat-ev-se-fue .plat-ev-punto{ background:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.18); } .plat-ev-cuerpo{ flex:1; min-width:0; overflow-wrap:anywhere; } .plat-ev-cuando{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; } @media (max-width:640px){ .plat-pestanas [role="tab"]{ padding:0 12px; font-size:13.5px; } .plat-numeros{ grid-template-columns:1fr 1fr; gap:8px; } .plat-numero strong{ font-size:18px; } .plat-anillo{ width:88px; height:88px; } } /* Clientes que se pueden ir, la ganancia, los gastos y la seguridad */ .plat-nota{ font-size:12.5px; color:var(--ink-soft); margin:-4px 0 10px; line-height:1.5; } .plat-subtitulo{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:16px 0 6px; } .plat-bien{ font-size:13.5px; font-weight:600; color:var(--exito); line-height:1.5; } .plat-riesgo{ display:flex; justify-content:space-between; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:9px 12px; margin-bottom:6px; border:1px solid var(--line); border-left:3px solid #D97706; border-radius:10px; font-size:13px; } .plat-riesgo-alto{ border-left-color:#DC2626; } .plat-riesgo-cuerpo{ flex:1; min-width:220px; overflow-wrap:anywhere; } .plat-riesgo-motivo{ font-size:12px; color:var(--ink-soft); margin-top:2px; } .plat-riesgo-vence{ color:var(--ink-soft); } .plat-riesgo-contacto{ flex:none; font-size:12.5px; } .plat-ganancia{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:color-mix(in srgb, var(--exito) 7%, transparent); } .plat-ganancia.pierde{ background:color-mix(in srgb, #DC2626 7%, transparent); } .plat-ganancia small{ font-size:12px; color:var(--ink-soft); } .plat-ganancia strong{ font-size:28px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--exito); } .plat-ganancia.pierde strong{ color:var(--red-600, #DC2626); } .plat-ganancia span{ font-size:12.5px; color:var(--ink-soft); } .plat-ganancia-cuentas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:10px; } .plat-ganancia-cuentas > div{ padding:8px 12px; border-radius:10px; border:1px solid var(--line); } .plat-ganancia-cuentas small{ display:block; font-size:11.5px; color:var(--ink-soft); } .plat-ganancia-cuentas b{ display:block; font-size:17px; font-variant-numeric:tabular-nums; color:var(--ink); } .plat-ganancia-cuentas span{ display:block; font-size:11.5px; color:var(--ink-soft); } .plat-gasto{ display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--line); font-size:13px; } .plat-gasto > div:first-child{ min-width:0; overflow-wrap:anywhere; } .plat-gasto span{ display:block; font-size:12px; color:var(--ink-soft); } .plat-gasto-acciones{ display:flex; gap:6px; flex:none; } .plat-gasto-acciones .btn{ padding:4px 10px; font-size:12px; } .plat-gasto-form{ display:grid; grid-template-columns:2fr 1fr 0.8fr 1fr auto; gap:8px; align-items:end; margin-top:12px; } .plat-gasto-form .field{ margin:0; } .plat-gasto-botones{ display:flex; gap:6px; } @media (max-width:760px){ .plat-gasto-form{ grid-template-columns:1fr 1fr; } .plat-gasto-form .field:first-child, .plat-gasto-botones{ grid-column:1 / -1; } } /* El código del correo al entrar (la cuenta del dueño de la plataforma) */ .login-codigo-icono{ width:52px; height:52px; margin:4px auto 10px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#1A56A6,#2A7BD4); box-shadow:0 10px 24px -12px rgba(26,86,166,.8); } .login-codigo-titulo{ text-align:center; font-size:19px; font-weight:700; color:var(--ink); } .login-codigo-texto{ text-align:center; font-size:13px; color:var(--ink-soft); line-height:1.5; margin:4px 0 14px; } #login-codigo-input{ text-align:center; font-family:var(--mono); font-size:24px; letter-spacing:.35em; } /* La ficha de cada empresa, el Excel y de dónde vienen los clientes */ .ficha-enlace{ color:inherit; text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--verde) 60%, transparent); } .ficha-enlace:hover{ color:var(--verde); border-bottom-style:solid; } .ficha{ font-size:13.5px; } .ficha-cabeza h2{ margin:0 30px 4px 0; font-size:22px; line-height:1.25; color:var(--ink); } .ficha-sub{ font-size:13px; color:var(--ink-soft); line-height:1.6; } .ficha-estado{ display:inline-block; margin-right:8px; padding:1px 9px; border-radius:999px; font-size:11.5px; font-weight:700; } .ficha-estado.activa{ color:#15803D; background:rgba(22,163,74,.12); } .ficha-estado.prueba{ color:#1A56A6; background:rgba(42,123,212,.12); } .ficha-estado.vencida{ color:#B42318; background:rgba(220,38,38,.12); } .ficha-aviso{ margin:12px 0 0; padding:9px 12px; border-radius:10px; border-left:3px solid #D97706; background:rgba(217,119,6,.09); font-size:13px; } .ficha-acciones{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; } .ficha-acciones .btn{ text-decoration:none; } .ficha-numeros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } .ficha-numeros > div{ padding:10px 12px; border:1px solid var(--line); border-radius:12px; } .ficha-numeros small{ display:block; font-size:11.5px; color:var(--ink-soft); } .ficha-numeros strong{ display:block; font-size:17px; margin:2px 0; font-variant-numeric:tabular-nums; color:var(--ink); overflow-wrap:anywhere; } .ficha-numeros span{ display:block; font-size:11.5px; color:var(--ink-soft); } .ficha-meses{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; align-items:end; height:120px; padding-top:4px; } .ficha-mes{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; min-width:0; } .ficha-mes b{ font-size:10.5px; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums; } .ficha-mes span{ width:100%; max-width:28px; min-height:2px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#4FA3F7,#1A56A6); } .ficha-mes small{ font-size:10.5px; color:var(--ink-soft); } .ficha-columnas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:4px 22px; } .ficha-seccion{ min-width:0; } .ficha-linea{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:13px; } .ficha-linea > div:first-child{ min-width:0; overflow-wrap:anywhere; } .ficha-linea span{ display:block; font-size:11.5px; color:var(--ink-soft); } .ficha-linea-der{ flex:none; } .ficha-origen{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; } .ficha-origen select{ max-width:240px; } .plat-excel-botones{ display:flex; flex-wrap:wrap; gap:8px; } /* Soporte mirando el sistema de un cliente: el aviso de arriba */ #aviso-ver-como{ position:fixed; top:0; left:0; right:0; z-index:10040; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:8px 14px; font-size:13.5px; color:#fff; background:linear-gradient(90deg,#B45309,#D97706); box-shadow:0 4px 14px rgba(0,0,0,.18); } #aviso-ver-como button{ border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.15); color:#fff; border-radius:8px; padding:4px 12px; font:inherit; font-weight:600; cursor:pointer; } body.modo-solo-mirar{ padding-top:40px; } /* El permiso en Ayuda */ .ayuda-acceso:empty{ display:none; } .ayuda-acceso{ margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--verde-vivo) 4%, transparent); } .ayuda-acceso-titulo{ font-weight:700; font-size:13.5px; margin-bottom:4px; color:var(--ink); } .ayuda-acceso-texto{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:8px; } .ayuda-acceso-si{ font-size:12.5px; color:var(--exito); line-height:1.5; margin-bottom:8px; font-weight:600; } .ayuda-acceso-fila{ display:flex; gap:8px; flex-wrap:wrap; } /* La encuesta de satisfacción: una tarjeta en la esquina */ .encuesta-tarjeta{ position:fixed; right:18px; bottom:18px; z-index:9300; width:min(380px, calc(100vw - 32px)); padding:16px 16px 12px; border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:0 18px 48px -16px rgba(11,27,54,.45); animation:plat-entra .35s cubic-bezier(.2,.8,.2,1) backwards; } .encuesta-cerrar{ position:absolute; top:6px; right:10px; border:0; background:none; font-size:20px; color:var(--ink-soft); cursor:pointer; } .encuesta-pregunta{ font-size:14.5px; font-weight:700; color:var(--ink); margin:0 22px 10px 0; line-height:1.35; } .encuesta-numeros{ display:grid; grid-template-columns:repeat(10,1fr); gap:4px; } .encuesta-numeros button{ min-height:34px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; padding:0; } .encuesta-numeros button:hover{ border-color:var(--verde-vivo); } .encuesta-numeros button.activo{ color:#fff; background:linear-gradient(135deg,#1A56A6,#2A7BD4); border-color:transparent; } .encuesta-escala{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin:4px 0 8px; } #encuesta-mas label{ display:block; font-size:12.5px; margin-bottom:4px; color:var(--ink); } #encuesta-mas label span{ color:var(--ink-soft); } #encuesta-mas textarea{ width:100%; margin-bottom:8px; } .encuesta-luego{ display:block; margin:8px auto 0; border:0; background:none; color:var(--ink-soft); font:inherit; font-size:12.5px; cursor:pointer; text-decoration:underline; } .encuesta-gracias{ font-size:14px; font-weight:600; color:var(--exito); text-align:center; padding:10px 4px; } /* Los resultados en tu panel */ .encuesta-resumen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:10px; } .encuesta-resumen > div{ padding:10px 12px; border:1px solid var(--line); border-radius:12px; } .encuesta-resumen small{ display:block; font-size:11.5px; color:var(--ink-soft); } .encuesta-resumen strong{ display:block; font-size:24px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } .encuesta-resumen strong.bueno{ color:var(--exito); } .encuesta-resumen strong.malo{ color:var(--red-600, #DC2626); } .encuesta-resumen span{ display:block; font-size:11.5px; color:var(--ink-soft); } .encuesta-barra-caja{ grid-column:span 2; } .encuesta-barra{ display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--line); margin:6px 0; } .encuesta-barra .pro{ background:#16A34A; } .encuesta-barra .pas{ background:#F59E0B; } .encuesta-barra .det{ background:#DC2626; } .encuesta-leyenda{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; } .encuesta-leyenda .pro{ color:#15803D; } .encuesta-leyenda .pas{ color:#B45309; } .encuesta-leyenda .det{ color:#B42318; } .encuesta-puntos{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; border-radius:8px; color:#fff; font-size:14px; } .encuesta-puntos.pro{ background:#16A34A; } .encuesta-puntos.pas{ background:#F59E0B; } .encuesta-puntos.det{ background:#DC2626; } @media (max-width:640px){ .encuesta-tarjeta{ right:16px; left:16px; bottom:16px; width:auto; } .encuesta-barra-caja{ grid-column:auto; } } html.modo-oscuro .plat-pestanas [role="tab"]{ color:#C9D6EA; } html.modo-oscuro .plat-pestanas [role="tab"].activa{ color:#fff; background:linear-gradient(120deg,#1A56A6,#2A7BD4); } html.modo-oscuro .plat-filtro.activo{ background:#2A7BD4; border-color:#2A7BD4; } html.modo-oscuro .plat-enlace{ color:#7FB8F5; } @media (prefers-reduced-motion: reduce){ #view-plataforma > [data-plat-tab], .plat-anillo-lleno{ animation:none; } .plat-actualizar svg, .plat-anillo-lleno{ transition:none; } } /* Tus recordatorios, la página de estado y el correo a un grupo (panel, 2026-11) */ .plat-rec-form{ display:grid; gap:8px; margin:6px 0 12px; } .plat-rec-form input[type=text], .plat-rec-form select{ width:100%; box-sizing:border-box; } .plat-rec-dia{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .plat-rec-dia input[type=date]{ max-width:180px; } .plat-rec-fila{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; padding:8px 0 8px 10px; border-top:1px solid var(--line); border-left:3px solid transparent; font-size:13px; } .plat-rec-fila.hoy{ border-left-color:#1A56A6; } .plat-rec-fila.vencido{ border-left-color:#D97706; } .plat-rec-fila.hecho{ color:var(--ink-soft); } .plat-rec-fila.hecho .plat-rec-texto{ text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--ink-soft) 60%, transparent); } .plat-rec-texto{ flex:1 1 240px; min-width:0; overflow-wrap:anywhere; } .plat-rec-cuando{ display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; } .plat-rec-fila.vencido .plat-rec-cuando{ color:#B45309; font-weight:600; } .plat-rec-fila.hoy .plat-rec-cuando{ color:#1A56A6; font-weight:600; } .plat-rec-botones{ display:flex; gap:6px; align-items:center; flex:none; } .plat-rec-botones .btn{ padding:4px 10px; font-size:12px; } .plat-rec-hechos{ margin-top:8px; font-size:12.5px; } .plat-rec-hechos summary{ cursor:pointer; color:var(--ink-soft); padding:4px 0; } .ficha-recordatorios{ margin:6px 0 14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--verde) 3%, var(--card)); } .est-general{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:16px; font-weight:700; padding:10px 14px; border-radius:10px; margin-bottom:10px; } .est-general span{ font-size:12.5px; font-weight:500; color:var(--ink-soft); } .est-general.ok{ background:var(--exito-tenue); color:var(--exito); } .est-general.lento{ background:#FEF3C7; color:#92400E; } .est-general.caido{ background:#FEE2E2; color:#B91C1C; } .est-partes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; margin-bottom:10px; } .est-parte{ display:flex; gap:10px; align-items:flex-start; font-size:13px; } .est-parte small{ display:block; color:var(--ink-soft); font-size:12px; } .est-punto{ width:10px; height:10px; border-radius:50%; margin-top:4px; flex:none; background:#9CA3AF; } .est-punto.ok{ background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18); } .est-punto.lento{ background:#F59E0B; box-shadow:0 0 0 3px rgba(245,158,11,.2); } .est-punto.caido{ background:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.18); } .est-barras{ display:flex; gap:2px; height:26px; align-items:stretch; } .est-barras span{ flex:1; border-radius:2px; background:#22C55E; opacity:.85; } .est-barras span.lento{ background:#F59E0B; } .est-barras span.caido{ background:#DC2626; } .est-barras span.sin-datos{ background:color-mix(in srgb, var(--ink) 12%, transparent); } .est-barras-pie{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin:3px 0 4px; } .est-aviso{ border:1px solid var(--line); border-left:3px solid #1A56A6; border-radius:10px; padding:10px 12px; margin:8px 0; font-size:13px; } .est-aviso.lento{ border-left-color:#F59E0B; } .est-aviso.caido{ border-left-color:#DC2626; } .est-aviso-cabeza{ display:flex; justify-content:space-between; gap:8px; align-items:center; } .est-act{ margin-top:4px; padding-left:8px; border-left:2px solid var(--line); } .est-act small{ color:var(--ink-soft); } .est-aviso-acciones{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; } .est-aviso-acciones input{ flex:1 1 200px; min-width:0; } .est-aviso-acciones .btn{ padding:4px 10px; font-size:12px; } .est-form, .est-pasados{ margin-top:10px; font-size:13px; } .est-form summary, .est-pasados summary{ cursor:pointer; font-weight:600; color:var(--verde); padding:4px 0; } .est-form[open]{ display:grid; gap:8px; } .est-form input, .est-form textarea, .est-form select{ width:100%; box-sizing:border-box; font:inherit; } .est-form-fila{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; } .anu-form{ display:grid; gap:6px; font-size:13px; } .anu-form label{ font-size:12px; font-weight:600; color:var(--ink-soft); margin-top:4px; } .anu-form input, .anu-form select, .anu-form textarea{ width:100%; box-sizing:border-box; font:inherit; } .anu-form textarea{ resize:vertical; line-height:1.5; } .anu-botones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .anu-destinos{ display:grid; gap:4px; max-height:220px; overflow:auto; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:12.5px; } .anu-destinos label{ display:flex; gap:8px; align-items:center; font-weight:400; color:var(--ink); margin:0; } html.modo-oscuro .est-general.lento{ background:rgba(245,158,11,.15); color:#FCD34D; } html.modo-oscuro .est-general.caido{ background:rgba(220,38,38,.18); color:#FCA5A5; } html.modo-oscuro .plat-rec-fila.hoy .plat-rec-cuando{ color:#7FB8F5; } html.modo-oscuro .plat-rec-fila.vencido .plat-rec-cuando{ color:#FBBF24; } /* Panel, lote 2 (2026-11): uso, subir de plan, recomendaciones, por qué se van, proyección, espacio, respaldo y equipo */ .l2-lista{ display:grid; gap:6px; margin:6px 0 4px; } .l2-fila{ display:grid; grid-template-columns:minmax(110px, 38%) 1fr auto; gap:10px; align-items:center; font-size:13px; } .l2-nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .l2-num{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); white-space:nowrap; } .l2-barra{ display:block; height:8px; border-radius:99px; background:color-mix(in srgb, var(--ink) 9%, transparent); overflow:hidden; } .l2-barra > span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#4FA3F7,#1A56A6); } .l2-barra.ambar > span{ background:linear-gradient(90deg,#FBBF24,#D97706); } .l2-barra.rojo > span{ background:linear-gradient(90deg,#F87171,#DC2626); } .l2-numeros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:2px 0 10px; } .l2-numeros > div{ border:1px solid var(--line); border-radius:10px; padding:8px 10px; } .l2-numeros b{ display:block; font-size:17px; font-variant-numeric:tabular-nums; } .l2-numeros span{ display:block; font-size:11.5px; color:var(--ink-soft); line-height:1.35; } .l2-detalles{ margin-top:8px; font-size:13px; } .l2-detalles summary{ cursor:pointer; color:var(--ink-soft); padding:4px 0; } .l2-proy{ display:flex; gap:8px; align-items:flex-end; height:150px; padding:8px 0 0; } .l2-proy-col{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; min-width:0; } .l2-proy-col b{ font-size:11px; font-family:var(--mono); color:var(--ink-soft); white-space:nowrap; } .l2-proy-col > span{ width:100%; max-width:46px; min-height:2px; border-radius:6px 6px 0 0; background:#4FA3F7; position:relative; display:flex; align-items:flex-end; overflow:hidden; } .l2-proy-col > span i{ display:block; width:100%; background:#1A56A6; } .l2-proy-col.hoy > span{ background:#D4912F; } .l2-proy-col small{ font-size:11px; color:var(--ink-soft); white-space:nowrap; } .l2-cohortes{ border-collapse:collapse; font-size:12.5px; min-width:420px; width:100%; } .l2-cohortes th{ text-align:left; font-size:11px; color:var(--ink-soft); font-weight:600; padding:4px 6px; } .l2-cohortes td{ padding:5px 6px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; } .l2-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; font-size:13px; } .l2-form input{ width:110px; } .l2-pasos{ margin:6px 0; padding-left:20px; font-size:13px; line-height:1.6; } .l2-pasos code{ display:inline-block; font-size:11.5px; background:color-mix(in srgb, var(--ink) 7%, transparent); padding:1px 6px; border-radius:5px; margin:2px 2px 0 0; } .l2-interruptor{ display:inline-flex; gap:8px; align-items:center; font-size:13px; font-weight:500; cursor:pointer; } .l2-chips{ display:flex; flex-wrap:wrap; gap:6px; } .l2-chip{ border:1px solid var(--line); border-radius:99px; padding:3px 10px; font-size:12.5px; background:var(--card); } .l2-chip small{ color:var(--ink-soft); font-family:var(--mono); } .l2-enlace{ display:flex; flex-wrap:wrap; gap:8px; } .l2-enlace input{ flex:1 1 220px; min-width:0; font-family:var(--mono); font-size:13px; } .venc-motivo{ text-align:left; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 14px; font-size:13px; display:grid; gap:8px; } .venc-motivo-opciones{ display:flex; flex-wrap:wrap; gap:6px; } .venc-motivo textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:13px; resize:vertical; } /* El ayudante de JeFact: solo lo de atender clientes */ body.panel-ayudante #view-plataforma > [data-plat-tab]:not([data-ayudante]){ display:none !important; } body.panel-ayudante .plat-pestanas [data-tab="dinero"], body.panel-ayudante .plat-pestanas [data-tab="sistema"]{ display:none !important; } /* Lo de la DGII que solo ve el dueño, aparte de lo que ven los clientes */ .est-dgii{ margin-top:16px; padding-top:4px; border-top:1px dashed var(--line); } .est-dgii .est-aviso{ margin:8px 0; } /* «Cambiar» dentro de los números de la ficha (precio especial) */ .ficha-cambiar{ background:none; border:none; padding:0; color:var(--teal-600, #1A56A6); font:inherit; text-decoration:underline; cursor:pointer; } .dgii-diag{ margin:10px 0 8px; padding:10px 12px; border-radius:10px; background:var(--paper); border:1px solid var(--line); font-size:12.5px; line-height:1.45; } .dgii-diag b{ display:block; font-size:12px; margin-bottom:2px; } .dgii-pasos{ margin-top:6px; color:var(--ink-soft); font-size:12px; } .dgii-paso.bien{ color:#15803D; } .dgii-paso.mal{ color:#B91C1C; font-weight:600; } html.modo-oscuro .dgii-paso.bien{ color:#86EFAC; } html.modo-oscuro .dgii-paso.mal{ color:#FCA5A5; } /* La lista de artículos (más arriba), quieta con «reducir movimiento» */ @media (prefers-reduced-motion: reduce){ .lista-articulos{ animation:none; } } /* La aplicación instalada (html.es-app, lo pone index.html): sin la página de inicio ni «Volver al inicio»: directo a la entrada */ html.es-app #landing-page{ display:none !important; } html.es-app .entrada-volver{ display:none !important; } /* El cobro del punto de venta con «Mixto» (cinco formas) y sus tres casillas */ #pos-cobro .pos-formas[aria-label="Forma de pago"]{ grid-template-columns:repeat(5,minmax(0,1fr)); } .pos-c-mixto-filas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .pos-c-mixto-filas input{ font-family:var(--mono); font-size:18px; } @media (max-width:560px){ #pos-cobro .pos-formas[aria-label="Forma de pago"]{ grid-template-columns:repeat(3,minmax(0,1fr)); } .pos-c-mixto-filas{ grid-template-columns:1fr; } }