@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#ebf0f4;--text-primary:#10192d;--text-secondary:#65758b;--text-muted:#97a3b4;--primary:#5f42f0;--primary-hover:#3f1ded;--primary-light:#ebe7fd;--success:#22c35d;--success-light:#e9fbf0;--danger:#eb4763;--danger-light:#fce8eb;--warning:#f59f0a;--warning-light:#fef3e2;--border-color:#e1e7ef;--shadow-sm:0 1px 3px 0 #0000000d, 0 1px 2px 0 #00000008;--shadow-md:0 4px 6px -1px #00000014, 0 2px 4px -1px #0000000a;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -2px #0000000a;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--sans-font:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;font-family:var(--sans-font);color:var(--text-primary);background-color:var(--bg-primary);box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-size:16px;line-height:1.5;transition:background-color .3s,color .3s}[data-theme=dark]{--bg-primary:#0e1525;--bg-secondary:#172036;--bg-tertiary:#1e273e;--text-primary:#f8fafc;--text-secondary:#b3bdcc;--text-muted:#6b7c94;--primary:#826afb;--primary-hover:#9783fc;--primary-light:#251f47;--success:#1dc95c;--success-light:#0f3d20;--danger:#f65570;--danger-light:#49121c;--warning:#f6a823;--warning-light:#3d2c0f;--border-color:#273149;--shadow-sm:0 1px 3px 0 #0000004d;--shadow-md:0 4px 6px -1px #0006;--shadow-lg:0 10px 15px -3px #0006}*,:before,:after{box-sizing:inherit}body{flex-direction:column;min-height:100vh;margin:0;padding:0;display:flex}#root{background-color:var(--bg-secondary);border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);width:100%;max-width:640px;min-height:100vh;box-shadow:var(--shadow-lg);flex-direction:column;flex:1;margin:0 auto;display:flex;position:relative}h1,h2,h3,h4,h5,h6{color:var(--text-primary);letter-spacing:-.025em;margin:0;font-weight:700}.app-header{z-index:100;-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);background-color:#fffc;justify-content:space-between;align-items:center;padding:16px 20px;transition:background-color .3s;display:flex;position:sticky;top:0}[data-theme=dark] .app-header{background-color:#172036cc}.app-title-container{align-items:center;gap:10px;display:flex}.app-logo{color:var(--primary)}.app-title{background:linear-gradient(135deg, var(--primary), var(--success));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.15rem;font-weight:700}.header-actions{gap:10px;display:flex}.app-content{flex-direction:column;flex:1;gap:20px;padding:20px 20px 100px;display:flex;overflow-y:auto}.icon-btn{border:1px solid var(--border-color);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.icon-btn:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.btn{border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 20px;font-family:inherit;font-size:.95rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.btn-primary:active{transform:translateY(1px)}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--border-color);color:var(--text-primary)}.input-group{flex-direction:column;gap:6px;width:100%;display:flex}.input-label{color:var(--text-secondary);font-size:.85rem;font-weight:600}.input-control{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-secondary);color:var(--text-primary);width:100%;padding:12px 16px;font-family:inherit;font-size:.95rem;transition:all .2s}.input-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}.card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex-direction:column;gap:16px;padding:20px;transition:all .2s;display:flex}.card-title{align-items:center;gap:8px;font-size:1.1rem;display:flex}.filter-tabs{border-bottom:2px solid var(--border-color);margin-bottom:8px;display:flex}.filter-tab{text-align:center;color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex:1;padding:12px 6px;font-size:.85rem;font-weight:600;transition:color .2s;position:relative}.filter-tab.active{color:var(--primary)}.filter-tab.active:after{content:"";background-color:var(--primary);height:2px;position:absolute;bottom:-2px;left:0;right:0}.filter-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px;display:grid}.filter-chip{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-secondary);color:var(--text-primary);text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:70px;padding:14px;font-size:.9rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.filter-chip:hover{border-color:var(--primary);background-color:var(--primary-light);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.filter-chip.selected{border-color:var(--primary);background-color:var(--primary-light);color:var(--primary);box-shadow:0 0 0 2px var(--primary);font-weight:700}.filter-badge{background-color:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-full);padding:2px 8px;font-size:.7rem}.filter-chip.selected .filter-badge{background-color:var(--primary);color:#fff}.list-container{flex-direction:column;gap:12px;display:flex}.contact-row-card{border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;justify-content:space-between;align-items:center;padding:16px;transition:all .2s;display:flex}.contact-row-card:hover{background-color:var(--bg-tertiary);border-color:var(--text-muted)}.contact-avatar{border-radius:var(--radius-full);background-color:var(--primary-light);width:42px;height:42px;color:var(--primary);justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;display:flex}.contact-overview{align-items:center;gap:12px;display:flex}.detail-card{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-secondary);box-shadow:var(--shadow-md);overflow:hidden}.detail-header{border-bottom:1px solid var(--border-color);background-color:var(--bg-tertiary);align-items:center;gap:16px;padding:20px;display:flex}.detail-body{flex-direction:column;gap:20px;padding:20px;display:flex}.role-section{border-radius:var(--radius-sm);background-color:var(--bg-primary);border-left:3px solid var(--primary);flex-direction:column;gap:10px;padding:12px;display:flex}.role-section.father{border-left-color:var(--success)}.role-section.mother{border-left-color:var(--warning)}.role-title{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em;justify-content:space-between;font-size:.8rem;font-weight:700;display:flex}.role-name{font-size:1.05rem;font-weight:600}.role-no{color:var(--text-secondary);margin-bottom:6px;font-family:inherit;font-size:.9rem}.phone-actions{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.action-link-btn{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:8px;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.action-call{background-color:var(--primary-light);color:var(--primary)}.action-call:hover{background-color:var(--primary);color:#fff}.action-sms{background-color:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)}.action-sms:hover{background-color:var(--text-secondary);color:#fff}.action-wa{background-color:var(--success-light);color:var(--success)}.action-wa:hover{background-color:var(--success);color:#fff}.fab{border-radius:var(--radius-full);background-color:var(--primary);color:#fff;cursor:pointer;z-index:99;border:none;justify-content:center;align-items:center;width:56px;height:56px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;bottom:24px;right:24px;box-shadow:0 4px 10px #0003}.fab:hover{background-color:var(--primary-hover);transform:scale(1.08)rotate(90deg)}.overlay-screen{background-color:var(--bg-secondary);z-index:150;flex-direction:column;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;display:flex;position:absolute;inset:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.overlay-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.overlay-content{flex-direction:column;flex:1;gap:20px;padding:20px;display:flex;overflow-y:auto}.status-banner{border-radius:var(--radius-md);align-items:center;gap:10px;padding:12px 16px;font-size:.9rem;font-weight:500;display:flex}.status-success{background-color:var(--success-light);color:var(--success)}.status-danger{background-color:var(--danger-light);color:var(--danger)}.status-warning{background-color:var(--warning-light);color:var(--warning)}.mapping-table{flex-direction:column;gap:10px;margin-top:10px;display:flex}.mapping-row{background-color:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border-color);grid-template-columns:1.2fr 1fr;align-items:center;gap:12px;padding:10px;display:grid}.search-container{width:100%;position:relative}.search-icon{color:var(--text-muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search-input{padding-left:42px}.section-label{text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;margin-top:10px;font-size:.85rem;font-weight:700}