/* Fuente: Poppins (si tu servidor no la sirve, agregá el a Google Fonts en el ) */ /* ----- General ----- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); body { font-family: 'Poppins', sans-serif; background: linear-gradient(180deg, #f9fafb, #e0e7ff); margin: 0; padding: 1.2rem; display: flex; flex-direction: column; min-height: 100vh; } /* ----- Main Card ----- */ main { flex: 1; background: #ffffff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); max-width: 500px; margin: auto; text-align: center; } /* ----- Titles and Text ----- */ h1 { font-size: 1.6rem; color: #111827; margin-bottom: 0.8rem; } /* Lista A: contenedor, buscador y scroll */ .lista-a-wrapper { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; text-align: left; } .lista-a-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .lista-a-controls input[type="search"] { flex: 1 1 220px; padding: 8px 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-size: 0.95rem; } .lista-a-controls .filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .lista-a-filters select, .lista-a-filters label { font-size: 0.9rem; color: #374151; } /* caja scrollable */ .lista-a-box { border: 1px solid #e6e9f2; background: #ffffff; border-radius: 10px; max-height: 300px; /* ajustar si querés más/menos */ overflow: auto; padding: 8px; box-shadow: 0 6px 18px rgba(10,10,30,0.03); } /* filas */ .lista-a-row { display:flex; justify-content:space-between; align-items:center; padding:8px; border-bottom:1px solid #f1f5f9; gap:8px; } .lista-a-row:last-child { border-bottom: none; } .lista-a-row .left { display:flex; gap:10px; align-items:center; min-width:0; } .lista-a-row .number { font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; } .badge { font-size:0.78rem; padding:4px 8px; border-radius:999px; } .badge.used-1 { background:#ecfeff; color:#065f46; border:1px solid #bbf7d0; } .badge.used-0 { background:#fff7ed; color:#92400e; border:1px solid #fed7aa; } .badge.trans-1 { background:#ecfdf5; color:#065f46; border:1px solid #bbf7d0; } .badge.trans-0 { background:#fff1f2; color:#9f1239; border:1px solid #fecaca; } .btn-small { padding:6px 8px; font-size:0.88rem; border-radius:8px; border:1px solid transparent; background:#2563eb; color:#fff; cursor:pointer; } .btn-small.ghost { background:#fff; color:#2563eb; border:1px solid #dbeafe; } .btn-small:disabled { opacity:0.6; cursor:not-allowed; } /* hint cuando no hay resultados */ .lista-empty { padding:18px; color:#6b7280; text-align:center; } .promo { background: #f3f4f6; border-left: 5px solid #2563eb; padding: 0.8rem; border-radius: 8px; font-size: 1rem; margin-bottom: 1.2rem; text-align: left; } .promo strong { font-weight: 700; } .highlight { color: #16a34a; font-weight: 700; } /* ----- Progress Bar ----- */ .progress-card { background: #f9fafb; border-radius: 12px; padding: 1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 1rem; text-align: left; } .progress-card p { margin: 0.3rem 0; color: #374151; font-weight: 500; } .progress-container { background: #e5e7eb; border-radius: 10px; overflow: hidden; height: 16px; margin-top: 0.4rem; position: relative; } #progress-bar { background: linear-gradient(90deg, #3b82f6, #2563eb); width: 0%; height: 100%; border-radius: 10px; transition: width 0.4s ease-in-out; } #progress-bar.complete { background: linear-gradient(90deg, #16a34a, #22c55e); } .counter { font-weight: 600; margin-top: 0.4rem; color: #111827; } /* ----- Card Content ----- */ .card { background: #f9fafb; border-radius: 12px; padding: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-bottom: 12px; text-align: left; } .card p { font-size: 0.95rem; color: #374151; margin-bottom: 0.8rem; } /* ----- Button ----- */ button { background: #2563eb; color: #fff; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; padding: 0.8rem 1.2rem; cursor: pointer; transition: background 0.2s, transform 0.1s; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; } button:hover:not(:disabled) { background: #1e40af; transform: scale(1.02); } button:disabled { opacity: 0.7; cursor: not-allowed; } /* ----- Loader Animation ----- */ .loader { display: none; /* JS togglará display */ border: 3px solid #ffffff60; border-top: 3px solid #fff; border-radius: 50%; width: 18px; height: 18px; animation: spin 0.8s linear infinite; margin-left: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ----- Status Message ----- */ #status { margin-top: 0.8rem; font-weight: 600; color: #111827; min-height: 1.2em; } /* ----- Transferred list styling ----- */ #userTransferredList { margin: 0; padding-left: 1rem; color: #065f46; font-weight: 600; } #userTransferredList li { margin: 0.35rem 0; color: #064e3b; } /* ----- Footer ----- */ footer { text-align: center; font-size: 0.85rem; color: #6b7280; margin-top: 1.5rem; } /* ----- Mobile Responsive ----- */ @media (max-width: 480px) { main { padding: 1rem; border-radius: 12px; } h1 { font-size: 1.4rem; } .promo { font-size: 0.95rem; } }