@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root { --bg-main: #F4F6F9; --bg-card: #ffffff; --text-primary: #333333; --text-secondary: #666666; --input-bg: #ffffff; --input-border: #eeeeee; --shadow-color: rgba(0,0,0,0.1); --brand-blue: #003366; --brand-gold: #F4B400; --brand-green: #0F9D58; --brand-danger: #e74c3c; }
body.dark-mode { --bg-main: #0a192f; --bg-card: #112240; --text-primary: #e6f1ff; --text-secondary: #8892b0; --input-bg: #1d3557; --input-border: #233554; --shadow-color: rgba(0,0,0,0.3); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; background-color: var(--bg-main); display: flex; justify-content: center; min-height: 100vh; color: var(--text-primary); transition: all 0.3s ease; }
.app-container { width: 100%; max-width: 450px; min-height: 100vh; position: relative; overflow-x: hidden; background-color: var(--bg-main); }
.theme-toggle-btn { position: absolute; top: 20px; right: 25px; background: transparent; border: none; color: var(--text-primary); font-size: 24px; cursor: pointer; z-index: 100; }
.card-container { background-color: var(--bg-card); padding: 40px 30px; border-radius: 30px; box-shadow: 0 10px 40px var(--shadow-color); border: 1px solid var(--input-border); margin: 20px; }
.logo-text { font-size: 32px; font-weight: 700; color: var(--brand-blue); margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 8px; } body.dark-mode .logo-text { color: var(--text-primary); } .logo-text i { color: var(--brand-gold); }
.input-icon-wrap { position: relative; width: 100%; } .input-icon-wrap i { position: absolute; left: 15px; top: 18px; color: #aaa; }
.custom-input { width: 100%; padding: 16px 20px 16px 45px; border: 2px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); border-radius: 12px; font-size: 16px; font-family: 'Poppins', sans-serif; outline: none; transition: all 0.3s; margin-bottom: 15px; } .custom-input:focus { border-color: var(--brand-blue); }
.btn-main { width: 100%; padding: 16px; background: var(--brand-green); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 0 #0a7d44; transition: all 0.1s; } .btn-main:active { transform: translateY(4px); box-shadow: none; }
.btn-secondary { background: var(--text-secondary); box-shadow: 0 4px 0 #444; margin-top: 10px; }
.btn-text { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; text-decoration: underline; font-size: 14px; margin-top: 10px; }
.screen { display: none; min-height: 100vh; flex-direction: column; }
#screen-client-login { display: flex; justify-content: center; text-align: center; }
.visual-header { margin-bottom: 20px; display: flex; justify-content: center; gap: 10px; } .piggy-float { font-size: 45px; color: #ffafcc; animation: float 3s infinite ease-in-out; }
.dash-header { background: var(--brand-blue); padding: 30px 20px 80px 20px; border-radius: 0 0 30px 30px; text-align: center; color: white; }
.glass-card { background: var(--bg-card); width: 85%; margin: -60px auto 0 auto; border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px var(--shadow-color); border: 1px solid var(--input-border); text-align: center; }
.piggy-icon { font-size: 60px; color: #ffafcc; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1)); margin-bottom: 15px; }
.monto-valor { font-size: 36px; font-weight: 700; color: var(--brand-blue); margin: 5px 0 20px 0; } body.dark-mode .monto-valor { color: var(--brand-gold); }
.info-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 10px; margin-top: 20px; align-items: center; } .divider { background: var(--input-border); height: 40px; }
.info-title { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; } .info-data { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.actions-container { padding: 25px; display: flex; flex-direction: column; gap: 15px; }
.total-pay-box { background: var(--bg-card); padding: 20px; border-radius: 15px; border: 1px solid var(--input-border); }
.total-dynamic { color: var(--brand-blue); transition: color 0.3s ease; } body.dark-mode .total-dynamic { color: var(--brand-gold); }
.btn-action { width: 100%; padding: 16px; border-radius: 12px; font-weight: 600; font-size: 16px; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.btn-renew { background: var(--input-border); color: var(--text-primary); }
.btn-pay { background: var(--brand-gold); color: var(--brand-blue); box-shadow: 0 4px 0 #c28e00; } .btn-pay:active { transform: translateY(4px); box-shadow: none; }
.fab-product { position: absolute; bottom: 20px; right: 20px; width: 55px; height: 55px; border-radius: 50%; background: var(--brand-green); color: white; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 22px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.2s; z-index: 90; } .fab-product:active { transform: scale(0.9); }
#screen-admin-login { justify-content: center; text-align: center; }
.admin-badge { background: var(--brand-blue); color: white; padding: 5px 15px; border-radius: 20px; font-size: 12px; display: inline-block; margin-bottom: 15px; }
.admin-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; }
.admin-option { background: var(--bg-card); padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 5px 15px var(--shadow-color); cursor: pointer; border: 1px solid var(--input-border); transition: transform 0.1s; } .admin-option:active { transform: scale(0.95); } .admin-option i { font-size: 30px; margin-bottom: 10px; color: var(--brand-blue); display: block; } body.dark-mode .admin-option i { color: var(--brand-gold); }
.small-input { padding: 12px 15px; margin-bottom: 10px; font-size: 14px; height: 45px; }
.form-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; display: block; text-transform: uppercase; margin-top: 10px; }
select.custom-input { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.8-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 12px auto; appearance: none; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); z-index: 9999; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; }
.modal-content { background: var(--bg-card); width: 90%; max-width: 380px !important; padding: 25px; border-radius: 20px; text-align: center; animation: slideUp 0.3s ease; border: 1px solid var(--input-border); display: flex; flex-direction: column; margin: 20px auto; }
.modal-full { max-width: 800px !important; min-height: 80vh; }
.option-card { background: var(--bg-main); border: 1px solid var(--input-border); padding: 15px; border-radius: 12px; margin-bottom: 15px; cursor: pointer; text-align: left; transition: all 0.2s; } .option-card:active { border-color: var(--brand-green); background: #e8f5e9; } .opt-header { font-size: 12px; font-weight: 700; color: var(--brand-blue); margin-bottom: 5px; } .opt-price { font-size: 20px; font-weight: 700; color: var(--text-primary); } .opt-date { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }
.bank-card.yape { background: #742284; color: white; padding: 15px; border-radius: 10px; margin-bottom: 15px; } .bank-card.plin { background: #00C9E0; color: white; padding: 15px; border-radius: 10px; margin-bottom: 15px; } .bank-info { margin-bottom: 15px; text-align: left; padding: 10px; background: var(--bg-main); border-radius: 10px; } .copy-row { display: flex; justify-content: space-between; align-items: center; } .btn-copy { background: transparent; border: none; color: var(--brand-blue); cursor: pointer; font-size: 16px; padding: 5px; transition: color 0.2s; } .btn-copy:active { color: var(--brand-green); } body.dark-mode .btn-copy { color: var(--brand-gold); }
.review-banner { background: #fff3cd; color: #856404; padding: 10px; text-align: center; font-size: 13px; font-weight: 600; margin: -40px 20px 20px 20px; border-radius: 10px; position: relative; z-index: 10; }
#loading { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg-card); z-index: 999; opacity: 0.95; justify-content: center; align-items: center; flex-direction: column; color: var(--text-primary); } .spinner { width: 40px; height: 40px; border: 4px solid var(--input-border); border-top: 4px solid var(--brand-blue); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; } body.dark-mode .spinner { border-top-color: var(--brand-gold); }
@keyframes spin { 100% { transform: rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.btn-icon { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; }
.btn-icon.edit { background-color: var(--brand-gold); } .btn-icon.delete { background-color: var(--brand-danger); }
#screen-client-list .table-wrapper, #screen-client-list .custom-table, #screen-client-list .custom-table tbody, #screen-client-list .custom-table tr, #screen-client-list .custom-table td, body.dark-mode #screen-client-list .table-wrapper, body.dark-mode #screen-client-list .custom-table, body.dark-mode #screen-client-list .custom-table tbody, body.dark-mode #screen-client-list .custom-table tr, body.dark-mode #screen-client-list .custom-table td { background-color: #ffffff !important; color: #000000 !important; border-color: #eeeeee !important; }
#screen-client-list .custom-input, body.dark-mode #screen-client-list .custom-input { background-color: #ffffff !important; color: #000000 !important; border: 2px solid #ccc !important; }
#screen-client-list .custom-table thead, #screen-client-list .custom-table thead th, body.dark-mode #screen-client-list .custom-table thead, body.dark-mode #screen-client-list .custom-table thead th { background-color: #003366 !important; color: #ffffff !important; }
.gallery-container { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; white-space: nowrap; max-width: 100%; }
.gallery-item { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 2px solid #eee; flex-shrink: 0; cursor: pointer; transition: transform 0.2s; position: relative; }
.gallery-item:hover { transform: scale(1.05); border-color: var(--brand-blue); }
.detail-gallery img { width: 100%; max-height: 250px; object-fit: contain; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; display: block; }
.img-wrapper { position: relative; margin-bottom: 15px; display: inline-block; width: 100%; }
.btn-mini-download { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }