.app{flex-direction:column;min-height:100vh;display:flex}.banner{background:url(/banner-bg.png) 50%/cover no-repeat;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:120px;display:flex;position:relative;overflow:hidden}.banner-overlay{background:#c8c8d28c;position:absolute;inset:0}.banner-logo{z-index:1;object-fit:contain;mix-blend-mode:screen;height:70px;position:relative}.buscar-container{background:var(--bg);flex:1;justify-content:center;align-items:center;padding:40px 20px;display:flex}.buscar-card{background:var(--bg-card);box-shadow:var(--shadow-lg);border-top:4px solid var(--orange);border-radius:10px;width:100%;max-width:440px;padding:48px 40px}.buscar-header{text-align:center;margin-bottom:32px}.buscar-header h1{color:var(--navy);margin-bottom:8px;font-size:24px}.buscar-header p{color:var(--text-light);font-size:14px}.buscar-hint{text-align:center;color:var(--text-light);border-top:1px solid var(--border);margin-top:24px;padding-top:16px;font-size:12px}.buscar-separador{color:var(--text-light);align-items:center;gap:12px;margin:20px 0;font-size:13px;display:flex}.buscar-separador:before,.buscar-separador:after{content:"";background:var(--border);flex:1;height:1px}.btn-familia{color:#fff;background:#8e44ad;font-size:14px}.btn-familia:hover:not(:disabled){background:#7d3c98}.form-group{margin-bottom:20px}.form-group label{color:var(--navy);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.elegir-container{flex:1;justify-content:center;padding:40px 20px;display:flex}.elegir-panel{width:100%;max-width:600px}.elegir-header{margin-bottom:8px}.elegir-header h2{color:var(--navy);margin-bottom:4px;font-size:22px}.elegir-desc{color:var(--text-light);margin-bottom:24px;font-size:14px}.acciones-grid{flex-direction:column;gap:16px;display:flex}.accion-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow);border-radius:10px;align-items:center;gap:20px;padding:24px;transition:border-color .2s,box-shadow .2s,transform .15s;display:flex}.accion-card:hover{border-color:var(--orange);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.accion-icono{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:24px;font-weight:800;display:flex}.accion-pagar{background:var(--navy)}.accion-suscribir{background:var(--orange)}.accion-familia{background:#8e44ad}.accion-card-familia{border-style:dashed;border-color:#8e44ad}.accion-card-familia:hover{border-style:solid;border-color:#8e44ad}.pago-familia-container{flex:1;justify-content:center;padding:40px 20px;display:flex}.pago-familia-panel{width:100%;max-width:500px}.pago-familia-panel h2{color:var(--navy);margin-bottom:4px;font-size:22px}.medio-titulo{color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-size:14px}.accion-info{flex:1}.accion-titulo{color:var(--navy);margin-bottom:4px;font-size:16px;font-weight:700}.accion-desc{color:var(--text-light);font-size:13px;line-height:1.4}.cuotas-container{flex:1;justify-content:center;padding:40px 20px;display:flex}.cuotas-panel{width:100%;max-width:720px}.cuotas-header{margin-bottom:24px}.cuotas-header h2{color:var(--navy);margin-bottom:4px;font-size:22px}.cliente-info{color:var(--text-light);font-size:14px}.plan-tabs{background:var(--navy);border-radius:10px 10px 0 0;flex-wrap:wrap;gap:0;padding:6px 6px 0;display:flex}.plan-tab{color:#fff9;cursor:pointer;background:0 0;border:none;border-radius:6px 6px 0 0;align-items:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:500;transition:background .15s,color .15s;display:flex}.plan-tab:hover{color:#ffffffe6;background:#ffffff1a}.plan-tab.active{background:var(--bg-card);color:var(--navy);font-weight:700}.plan-tab.suscrito{color:var(--green)}.plan-tab.suscrito.active{background:var(--bg-card);color:#27ae60}.tab-check{font-size:12px}.tab-badge{background:var(--orange);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700}.cuotas-toolbar{background:var(--bg-card);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.checkbox-label{cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:17px;height:17px;accent-color:var(--orange)}.seleccion-info{color:var(--orange);font-size:13px;font-weight:600}.cuotas-lista{border-left:1px solid var(--border);border-right:1px solid var(--border)}.cuota-item{background:var(--bg-card);border-bottom:1px solid var(--border);cursor:pointer;align-items:center;gap:14px;padding:14px 16px;transition:background-color .15s;display:flex}.cuota-item:hover{background:#fafafa}.cuota-item.selected{background:var(--orange-light);border-left:3px solid var(--orange)}.cuota-item.vencida{border-left:3px solid var(--red)}.cuota-item.vencida.selected{border-left:3px solid var(--orange)}.cuota-item.disabled{opacity:.4;cursor:not-allowed}.cuota-item.disabled:hover{background:var(--bg-card)}.cuota-check{flex-shrink:0}.cuota-check input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--orange)}.cuota-detalle{flex:1;min-width:0}.cuota-titulo{color:var(--text-heading);margin-bottom:2px;font-size:14px;font-weight:500}.cuota-meta{color:var(--text-light);align-items:center;gap:4px;font-size:12px;display:flex}.cuota-monto{color:var(--navy);white-space:nowrap;font-size:16px;font-weight:700}.cuotas-footer{background:var(--bg-card);border:1px solid var(--border);border-radius:0 0 10px 10px;justify-content:space-between;align-items:center;gap:16px;padding:20px;display:flex}.total-pagar{flex-direction:column;gap:2px;display:flex}.total-pagar span{color:var(--text-light);font-size:12px}.total-pagar strong{color:var(--navy);font-size:24px}.btn-pagar{padding:14px 32px;font-size:15px}.medio-pago-container{flex:1;justify-content:center;padding:40px 20px;display:flex}.medio-pago-panel{width:100%;max-width:500px}.medio-pago-panel h2{color:var(--navy);margin-bottom:4px;font-size:22px}.resumen-pago{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;margin:24px 0;padding:20px}.resumen-pago h3{text-transform:uppercase;letter-spacing:.8px;color:var(--text-light);margin-bottom:12px;font-size:12px}.resumen-detalle{justify-content:space-between;padding:8px 0;font-size:14px;display:flex}.resumen-total{border-top:2px solid var(--border);margin-top:8px;padding-top:12px;font-size:18px}.medios-lista{flex-direction:column;gap:12px;display:flex}.medio-card{background:var(--bg-card);border:2px solid var(--border);cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow);border-radius:10px;align-items:center;gap:16px;padding:20px;transition:border-color .2s,box-shadow .2s;display:flex}.medio-card:hover:not(:disabled){border-color:var(--orange);box-shadow:var(--shadow-lg)}.medio-card:disabled{opacity:.5;cursor:not-allowed}.medio-logo{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:800;display:flex}.kushki-logo{background:#00b140}.servipag-logo{background:#e63946}.medio-info{flex:1}.medio-nombre{color:var(--navy);font-size:15px;font-weight:700}.medio-desc{color:var(--text-light);margin-top:2px;font-size:13px}.medio-arrow{color:var(--text-light);font-size:20px}.confirmacion-container{flex:1;justify-content:center;align-items:center;padding:40px 20px;display:flex}.confirmacion-panel{background:var(--bg-card);width:100%;max-width:460px;box-shadow:var(--shadow-lg);text-align:center;border-top:4px solid var(--green);border-radius:10px;padding:48px 40px}.confirmacion-icono{background:var(--green-light);color:#27ae60;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 20px;font-size:32px;display:flex}.confirmacion-panel h2{color:var(--navy);margin-bottom:8px}.confirmacion-mensaje{color:var(--text-light);margin-bottom:32px;font-size:14px}.confirmacion-detalles{background:var(--bg);border-radius:var(--radius);text-align:left;margin-bottom:24px;padding:20px}.detalle-row{justify-content:space-between;padding:8px 0;font-size:14px;display:flex}.detalle-row+.detalle-row{border-top:1px solid var(--border)}.redireccion-info{color:var(--text);background:var(--yellow-light);border-radius:var(--radius);border-left:3px solid var(--yellow);margin-bottom:24px;padding:12px;font-size:13px}.suscripcion-container{flex:1;justify-content:center;padding:40px 20px;display:flex}.suscripcion-panel{width:100%;max-width:600px}.suscripcion-panel h2{color:var(--navy);margin-bottom:24px;font-size:22px}.plan-detalle{background:var(--bg-card);border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;padding:24px}.campo-readonly{margin-bottom:14px}.campo-readonly label{color:var(--text-light);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;font-size:11px;font-weight:600;display:block}.campo-valor{color:var(--navy);border-bottom:1px solid var(--border);padding:8px 0;font-size:15px;font-weight:600}.separador{background:var(--border);height:1px;margin:24px 0}.btn-suscribir{background:var(--orange);color:#fff;cursor:pointer;border:none;border-radius:30px;width:100%;max-width:260px;margin:28px auto 0;padding:14px 32px;font-size:15px;font-weight:700;transition:background .2s,transform .1s;display:block}.btn-suscribir:hover:not(:disabled){background:var(--orange-hover)}.btn-suscribir:active:not(:disabled){transform:scale(.98)}.btn-suscribir:disabled{opacity:.5;cursor:not-allowed}.suscrito-badge{text-align:center;background:var(--green-light);color:#27ae60;border-radius:var(--radius);margin-top:24px;padding:16px;font-size:14px;font-weight:600}.empty-state{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-light);padding:60px 20px;font-size:15px}@media (width<=640px){.buscar-card,.confirmacion-panel{padding:32px 24px}.cuotas-footer{text-align:center;flex-direction:column}.btn-pagar{width:100%}.total-pagar{align-items:center}.cuota-item{gap:10px;padding:12px}.cuota-monto{font-size:14px}.accion-card{gap:14px;padding:20px 16px}.accion-icono{width:44px;height:44px;font-size:20px}.plan-tabs{padding:4px 4px 0}.plan-tab{padding:8px 12px;font-size:12px}.banner{height:80px}.banner-logo{height:50px}}:root{--navy:#1a2332;--navy-light:#2a3a4e;--orange:#e8870e;--orange-hover:#d07a0a;--orange-light:#fef3e2;--green:#2ecc71;--green-light:#d4efdf;--red:#e74c3c;--red-light:#fce4e4;--yellow:#f39c12;--yellow-light:#fef9e7;--bg:#f5f6f8;--bg-card:#fff;--text:#4a4a4a;--text-light:#888;--text-heading:#1a2332;--border:#e0e0e0;--shadow:0 2px 8px #00000014;--shadow-lg:0 8px 24px #0000001f;--radius:6px;color:var(--text);background:var(--bg);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body,#root{min-height:100vh}h1,h2,h3{color:var(--text-heading);font-weight:600}input,select,textarea,button{font-family:inherit;font-size:inherit}input,select,textarea{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);width:100%;color:var(--text);padding:11px 14px;transition:border-color .2s}input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-light);outline:none}input:disabled,select:disabled{color:#999;background:#f5f5f5}.btn{border-radius:var(--radius);cursor:pointer;border:none;justify-content:center;align-items:center;gap:6px;padding:11px 24px;font-weight:600;transition:background-color .2s,opacity .2s,transform .1s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--orange);color:#fff}.btn-primary:hover:not(:disabled){background:var(--orange-hover)}.btn-full{width:100%}.btn-back{color:var(--navy);background:0 0;margin-bottom:16px;padding:8px 0;font-size:14px}.btn-back:hover{text-decoration:underline}.alert{border-radius:var(--radius);margin-bottom:16px;padding:12px 16px;font-size:14px}.alert-error{background:var(--red-light);color:var(--red);border:1px solid var(--red)}.alert-success{background:var(--green-light);color:#27ae60;border:1px solid #27ae60}.loading{color:var(--text-light);justify-content:center;align-items:center;padding:32px;display:flex}.badge{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}.badge-vencida{background:var(--red-light);color:var(--red)}.required{color:var(--red)}.field-error input,.field-error select,.field-error textarea{border-color:var(--red);background:var(--red-light)}.field-error label{color:var(--red)}