:root{--primary: #4F46E5;--primary-hover: #4338CA;--secondary: #0EA5E9;--accent: #F43F5E;--background: #F8FAFC;--surface: #FFFFFF;--text-main: #0F172A;--text-muted: #64748B;--border: #E2E8F0;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--transition: all .3s cubic-bezier(.4, 0, .2, 1);--radius: 12px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--background);color:var(--text-main);line-height:1.4;min-height:100vh;padding:.5rem 1rem}#app{max-width:1200px;margin:0 auto}.content-wrapper{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:10px 20px}.container{width:100%;max-width:650px;margin:0 auto}.main-header{text-align:center;margin-bottom:1.25rem}.main-header h1{font-family:Outfit,sans-serif;font-weight:700;font-size:1.75rem;color:var(--primary-color);margin-bottom:.25rem;letter-spacing:-.5px}.main-header p{color:var(--text-secondary);font-size:.95rem}.main-single-view{width:100%;display:flex;justify-content:center}.form-section{width:100%;background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.main-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}@media (max-width: 1024px){.main-container{grid-template-columns:1fr}}.form-section{background:var(--surface);padding:1.25rem;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-md);animation:fadeInLeft .6s ease-out}.ticket-form-stack{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}input,select{padding:.75rem 1rem;border-radius:calc(var(--radius) / 2);border:2px solid var(--border);font-family:inherit;font-size:1rem;transition:var(--transition);outline:none;background:#f1f5f9}input:focus,select:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 4px #4f46e51a}#input-trainName,#input-from,#input-to,#input-quota,.field-name,.field-coach,.field-seat{text-transform:uppercase}.passenger-section h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.passenger-section h3:before{content:"";width:4px;height:20px;background:var(--primary);border-radius:2px}#passenger-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.passenger-item{display:grid;grid-template-columns:32px repeat(6,1fr) 32px;gap:.5rem;align-items:center;background:#fff;padding:.75rem;border-radius:var(--radius);border:1px solid var(--border);transition:var(--transition);box-shadow:var(--shadow-sm)}.passenger-item:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.field-index{grid-column:1;grid-row:1 / span 2;font-weight:700;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:.85rem;background:#eef2ff;width:24px;height:24px;border-radius:50%;align-self:start;margin-top:6px}.field-name{grid-column:2 / span 4;grid-row:1}.field-age{grid-column:6 / span 1;grid-row:1}.field-gender{grid-column:7 / span 1;grid-row:1}.field-catering{grid-column:2 / span 3;grid-row:3;text-transform:uppercase}.field-coach{grid-column:2 / span 2;grid-row:4}.field-seat{grid-column:4 / span 2;grid-row:4}.field-berth{grid-column:6 / span 2;grid-row:4}.remove-passenger{grid-column:8;grid-row:1 / span 2;justify-self:center;align-self:center;background:#fee2e2;color:#ef4444;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .2s}.passenger-item input,.passenger-item select{width:100%;padding:.5rem .75rem;font-size:.85rem;background:#f8fafc;border:1px solid #E2E8F0;border-radius:6px}.passenger-item input:focus,.passenger-item select:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.preview-section{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-lg);overflow:visible!important;position:sticky;top:2rem;animation:fadeInRight .6s ease-out}.preview-controls{padding:1rem;background:#1e293b;display:flex;gap:1rem;justify-content:center}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;padding:.875rem 1.75rem;border-radius:calc(var(--radius) / 2);border:none;font-weight:600;font-size:1rem;cursor:pointer;transition:var(--transition);box-shadow:0 4px 6px -1px #4f46e566}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #4f46e580;filter:brightness(1.1)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#f1f5f9;color:var(--text-main);padding:.625rem 1.25rem;border-radius:calc(var(--radius) / 2);border:1px solid var(--border);font-weight:500;cursor:pointer;transition:var(--transition)}.btn-secondary:hover{background:var(--border);transform:scale(1.02)}.remove-passenger{background:#fee2e2;color:#ef4444;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:all .2s}.remove-passenger:hover{background:#ef4444;color:#fff}.section-hint{font-size:.8rem;color:var(--text-secondary);margin-bottom:12px;font-style:italic}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.preview-section{width:100%;animation:fadeIn .4s ease-out}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;margin-bottom:2rem;border:1px solid rgba(255,255,255,.4);box-shadow:0 4px 6px #0000000d}.ticket-preview-box{background:#fff;padding:2rem;border-radius:0!important;box-shadow:0 10px 25px #0000001a;display:flex;justify-content:center;overflow:visible!important}#ticket-preview-container{width:100%;max-width:800px}.ticket-wrapper{background:#fff;width:100%;border-radius:0!important;border:none!important;padding:0!important;margin:0 auto!important}@media print{@page{margin:0!important;size:auto}.no-print{display:none!important}html,body{width:100%!important;height:auto!important;margin:0!important;padding:7mm!important;overflow:visible!important;background:#fff!important}body,.content-wrapper,.container,.main-flow-container{padding:0!important;margin:0!important;background:#fff!important;box-shadow:none!important;width:100%!important;max-width:none!important}.preview-section{display:block!important;width:100%!important}.ticket-preview-box{padding:0!important;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;width:100%!important}.ticket-wrapper{margin:0!important;padding:0!important;border:none!important}#ticket-preview-container{width:100%!important;max-width:none!important}#printTable{width:100%!important;margin:0!important;border:2pt solid #000!important;border-collapse:collapse!important;border-spacing:0!important;border-radius:0!important;box-shadow:none!important;table-layout:auto!important}#printTable td,#printTable tr{border-color:#000!important;border-radius:0!important}.app-background{display:none}}.main-grid{display:grid;grid-template-columns:1fr;gap:2rem;transition:all .4s cubic-bezier(.4,0,.2,1);align-items:start}@media (max-width: 1023px){.main-grid.show-form #ticket-preview-section,.main-grid.show-preview #ticket-form-section{display:none}}@media (min-width: 1024px){.container{max-width:1300px;padding:40px}.main-grid{grid-template-columns:450px 1fr;gap:3rem}#ticket-form-section,#ticket-preview-section{display:block!important}#ticket-preview-section{position:sticky;top:40px}}.fade-in{animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.flex-1{flex:1}.btn-danger{background:#fee2e2;color:#ef4444;padding:.875rem 1.25rem;border-radius:calc(var(--radius) / 2);border:1px solid #fecaca;font-weight:600;cursor:pointer;transition:var(--transition)}.btn-danger:hover{background:#ef4444;color:#fff;transform:translateY(-2px);box-shadow:0 4px 6px -1px #ef444466}.required{color:#e53935;margin-left:2px}.error-border{border:2px solid #e53935!important;background-color:#fff8f8!important}.error-border:focus{outline:none;box-shadow:0 0 0 2px #e5393533}.hidden{display:none!important}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.w-full{width:100%}.flex{display:flex}.gap-4{gap:1rem}@media (max-width: 640px){.form-row{grid-template-columns:1fr;gap:.5rem}.form-section{padding:1rem}.main-header h1{font-size:1.5rem}.passenger-item{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:.5rem;padding:2.5rem .75rem .75rem;position:relative;box-shadow:0 1px 3px #0000001a}.field-index{position:absolute;top:.75rem;left:.75rem;width:auto;height:auto;background:transparent;margin:0;grid-column:auto;grid-row:auto;font-size:.9rem;color:var(--primary)}.remove-passenger{position:absolute;top:.5rem;right:.5rem;grid-column:auto;grid-row:auto;background:transparent;color:#ef4444;width:32px;height:32px}.remove-passenger:hover{background:#fee2e2;color:#ef4444}.field-name{grid-column:1 / -1;grid-row:1;width:100%}.field-age{grid-column:1 / span 2;grid-row:2}.field-gender{grid-column:3 / span 2;grid-row:2}.field-catering{grid-column:1 / span 2;grid-row:3}.field-coach{grid-column:1 / span 1;grid-row:4;padding:.75rem .5rem}.field-seat{grid-column:2 / span 1;grid-row:4;padding:.75rem .5rem}.field-berth{grid-column:3 / span 2;grid-row:4}input,select{font-size:16px;width:100%;max-width:100%}.form-actions{flex-direction:column}.btn-primary,.btn-danger{width:100%}}