@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Sora:wght@400;500;600;700&display=swap";:root{--verde: #0f3d2e;--verde-claro: #1a5c45;--verde-suave: #e4efe9;--crema: #f6f4ef;--tarjeta: #ffffff;--dorado: #d9a441;--dorado-suave: #f4e6c8;--tinta: #1c1c1a;--tinta-suave: #5c5a52;--borde: #e3ded2;--rojo: #b3261e;--rojo-suave: #fbe9e7;--verde-exito: #2e7d32;--exito-suave: #e6f4ea;--ambar: #b26a00;--ambar-suave: #fdf1dc;--fuente-display: "Fraunces", Georgia, serif;--fuente-cuerpo: "Sora", "Segoe UI", system-ui, sans-serif;--radio: 14px;--sombra: 0 1px 3px rgba(28, 28, 26, .08), 0 6px 24px rgba(28, 28, 26, .05);--sombra-fuerte: 0 4px 12px rgba(28, 28, 26, .12)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--fuente-cuerpo);color:var(--tinta);background:var(--crema);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{min-height:100vh}h1,h2,h3{font-family:var(--fuente-display);font-weight:700;letter-spacing:-.01em;margin:0;color:var(--verde)}button{font-family:var(--fuente-cuerpo);cursor:pointer}input,select,textarea{font-family:var(--fuente-cuerpo)}.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:var(--verde);color:#fff;padding:28px 20px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh}.marca{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding:0 8px}.marca-logo{width:40px;height:40px;border-radius:10px;background:var(--dorado);display:grid;place-items:center;color:var(--verde);font-weight:800;font-size:18px;flex-shrink:0}.marca h1{font-size:20px;color:#fff;line-height:1.05}.marca small{display:block;color:#fff9;font-size:11px;font-weight:400;letter-spacing:.04em}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:none;background:transparent;color:#ffffffc7;font-size:14px;font-weight:500;text-align:left;transition:background .15s ease,color .15s ease}.nav-item:hover{background:#ffffff14;color:#fff}.nav-item.activo{background:#ffffff24;color:#fff;font-weight:600}.nav-icono{width:20px;height:20px;flex-shrink:0}.sidebar-pie{margin-top:auto;padding:14px;background:#0000002e;border-radius:12px;font-size:12px;color:#ffffffb3;line-height:1.5}.contenido{padding:32px 40px;max-width:1080px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:16px}.topbar h2{font-size:30px}.estado-conexion{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px}.estado-conexion.online{background:var(--exito-suave);color:var(--verde-exito)}.estado-conexion.offline{background:var(--ambar-suave);color:var(--ambar)}.punto{width:8px;height:8px;border-radius:50%;background:currentColor}.punto.offline{animation:parpadeo 1.4s infinite}@keyframes parpadeo{0%,to{opacity:1}50%{opacity:.3}}.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:24px;box-shadow:var(--sombra)}.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.metrica{display:flex;flex-direction:column;gap:8px}.metrica .etiqueta{font-size:13px;color:var(--tinta-suave);font-weight:500}.metrica .valor{font-family:var(--fuente-display);font-size:34px;font-weight:800;color:var(--verde);line-height:1}.metrica .nota{font-size:12px;color:var(--tinta-suave)}.boton{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;border:none;font-weight:600;font-size:14px;transition:transform .1s ease,box-shadow .15s ease,background .15s ease}.boton:active{transform:translateY(1px)}.boton-primario{background:var(--verde);color:#fff}.boton-primario:hover{background:var(--verde-claro);box-shadow:var(--sombra-fuerte)}.boton-secundario{background:transparent;color:var(--verde);border:1.5px solid var(--verde)}.boton-secundario:hover{background:var(--verde-suave)}.boton-dorado{background:var(--dorado);color:var(--verde)}.boton-dorado:hover{box-shadow:var(--sombra-fuerte)}.boton:disabled{opacity:.5;cursor:not-allowed}.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.campo label{font-size:13px;font-weight:600;color:var(--tinta)}.campo .ayuda{font-size:12px;color:var(--tinta-suave)}.campo input,.campo select,.campo textarea{padding:11px 14px;border:1.5px solid var(--borde);border-radius:10px;font-size:14px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-suave)}.campo input.error,.campo select.error{border-color:var(--rojo)}.mensaje-error{font-size:12px;color:var(--rojo);font-weight:500}.mensaje-exito{font-size:12px;color:var(--verde-exito);font-weight:500}.item-fila{display:grid;grid-template-columns:2.5fr .8fr 1fr 1fr .4fr;gap:10px;align-items:center;margin-bottom:10px}.item-fila input{padding:10px 12px;border:1.5px solid var(--borde);border-radius:9px;font-size:14px;width:100%}.item-fila input:focus{outline:none;border-color:var(--verde)}.quitar-item{border:none;background:var(--rojo-suave);color:var(--rojo);width:34px;height:34px;border-radius:8px;font-weight:700;font-size:16px}.totales{margin-top:16px;padding-top:16px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:6px;align-items:flex-end}.total-fila{display:flex;justify-content:space-between;width:260px;font-size:14px;color:var(--tinta-suave)}.total-fila.grande{font-size:20px;font-weight:700;color:var(--verde);font-family:var(--fuente-display)}.lista{display:flex;flex-direction:column;gap:10px}.fila-factura{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px}.fila-factura .principal{display:flex;flex-direction:column;gap:3px}.fila-factura .cliente{font-weight:600;font-size:15px}.fila-factura .ncf{font-size:12px;color:var(--tinta-suave);font-family:monospace}.badge{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;letter-spacing:.02em;text-transform:uppercase}.badge.pendiente{background:var(--ambar-suave);color:var(--ambar)}.badge.enviada{background:var(--exito-suave);color:var(--verde-exito)}.badge.error{background:var(--rojo-suave);color:var(--rojo)}.vacio{text-align:center;padding:48px 24px;color:var(--tinta-suave)}.vacio .icono-grande{font-size:40px;margin-bottom:12px}.aviso-offline{background:var(--ambar-suave);color:var(--ambar);border:1px solid #e8c98a;border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:14px;display:flex;align-items:center;gap:10px}.aviso-offline strong{font-weight:700}.modal-fondo{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;z-index:100;padding:16px}.modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:440px;box-shadow:var(--sombra-fuerte)}.planes-hero{text-align:center;padding:8px 0 4px}.planes-titulo{font-size:34px;margin-bottom:8px}.planes-sub{font-size:14px;color:var(--tinta-suave);margin:0;line-height:1.5}.planes-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}.plan-tarjeta{position:relative;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:24px 20px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:14px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.plan-tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-fuerte)}.plan-tarjeta.destacado{border:2px solid var(--dorado);background:linear-gradient(180deg,#fffdf7 0%,var(--tarjeta) 60%)}.plan-tarjeta.seleccionado{border-color:var(--verde)}.plan-etiqueta{position:absolute;top:-11px;left:50%;transform:translate(-50%);background:var(--dorado);color:var(--verde);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap}.plan-nombre{font-size:20px;margin:0}.plan-descripcion{font-size:13px;color:var(--tinta-suave);margin:0;line-height:1.5;min-height:40px}.plan-precio{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--borde)}.plan-precio-monto{font-family:var(--fuente-display);font-size:34px;font-weight:800;color:var(--verde);line-height:1}.plan-precio-nota{font-size:12px;color:var(--tinta-suave)}.plan-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}.plan-lista li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.4;color:var(--tinta)}.plan-lista li svg{width:16px;height:16px;color:var(--verde-exito);flex-shrink:0;margin-top:1px}.plan-cta{width:100%;justify-content:center;text-decoration:none}.plan-cta-activo{background:var(--verde-suave);color:var(--verde);cursor:default}.pagos-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pago-tarjeta{display:flex;flex-direction:column;gap:10px}.pago-nombre{font-size:16px;margin:0}.pago-descripcion{font-size:13px;color:var(--tinta);margin:0}.pago-detalle{font-size:12px;color:var(--tinta-suave);margin:0;flex:1}.pago-pendiente{font-size:12px;color:var(--ambar);font-weight:600;padding:8px 12px;border:1px dashed #e8c98a;border-radius:8px;text-align:center}.plan-mini{display:flex;align-items:center;gap:8px;width:100%;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:600;padding:8px 12px;border-radius:9px;margin-bottom:12px;text-align:left}.plan-mini:hover{background:#ffffff2e}.plan-mini-dot{width:8px;height:8px;border-radius:50%;background:var(--dorado);flex-shrink:0}.plan-mini-flecha{margin-left:auto;opacity:.7}@media (max-width: 1080px){.planes-rejilla{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.planes-rejilla,.pagos-rejilla{grid-template-columns:1fr}.planes-titulo{font-size:26px}}@media (max-width: 768px){.app{grid-template-columns:1fr}.sidebar{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;padding:10px 12px;z-index:50;gap:4px;border-top:1px solid rgba(255,255,255,.1)}.marca,.sidebar-pie{display:none}.nav-item{flex-direction:column;gap:4px;font-size:10px;padding:8px 10px;flex:1;justify-content:center;text-align:center}.nav-icono{width:22px;height:22px}.contenido{padding:20px 16px 96px}.topbar h2{font-size:24px}.item-fila{grid-template-columns:1fr}.item-fila input{width:100%}}
