:root{--primary-color:#22c55e;--primary-dark:#16a34a;--primary-light:#dcfce7;--accent-color:#f97316;--text-dark:#1f2937;--text-light:#6b7280;--bg-light:#f9fafb;--bg-white:#fff;--border-color:#e5e7eb;--error-color:#ef4444;--success-color:#10b981;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--border-radius-sm:.375rem;--border-radius-md:.5rem;--border-radius-lg:.75rem;--border-radius-xl:1rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{font-family:var(--font-family);background-color:var(--bg-light);color:var(--text-dark);line-height:1.6}#app{background-color:var(--bg-light);min-height:100vh}h1{margin-bottom:var(--spacing-md);font-size:1.875rem;font-weight:700}h2{margin-bottom:var(--spacing-md);font-size:1.5rem;font-weight:600}h3{margin-bottom:var(--spacing-sm);font-size:1.125rem;font-weight:600}p{margin-bottom:var(--spacing-md)}.btn{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius-lg);cursor:pointer;text-align:center;width:100%;font-size:1rem;font-weight:500;font-family:var(--font-family);margin-bottom:var(--spacing-md);border:none;text-decoration:none;transition:all .2s;display:inline-block}.btn:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-dark)}.btn-secondary{background-color:var(--bg-white);color:var(--text-dark);border:2px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background-color:var(--bg-light);border-color:var(--primary-color)}.btn-status{padding:var(--spacing-sm) var(--spacing-md);width:auto;margin-right:var(--spacing-sm);background-color:var(--bg-light);border:2px solid var(--border-color)}.btn-status.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.btn-small{padding:var(--spacing-sm) var(--spacing-md);width:auto;margin-right:var(--spacing-sm);margin-bottom:0;font-size:.875rem}.btn-danger{background-color:var(--error-color);color:#fff}.btn-back{color:var(--primary-color);cursor:pointer;margin-bottom:var(--spacing-md);background:0 0;border:none;padding:0;font-size:1rem;font-weight:600}.btn-back:hover{color:var(--primary-dark)}.home-screen{padding:var(--spacing-lg);max-width:600px;margin:0 auto}.app-header{text-align:center;margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl) 0;background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);color:#fff;border-radius:var(--border-radius-xl);margin-left:-var(--spacing-lg);margin-right:-var(--spacing-lg);margin-top:-var(--spacing-lg);padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.app-header h1{margin-bottom:var(--spacing-sm);color:#fff}.tagline{color:#ffffffe6;margin-bottom:0;font-size:.95rem}.availability-section{margin-bottom:var(--spacing-2xl)}.availability-section h2{margin-bottom:var(--spacing-lg)}.barbers-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);grid-template-columns:1fr 1fr;display:grid}.barber-card{background:var(--bg-white);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);text-align:center}.barber-card h3{margin-bottom:var(--spacing-md)}.barber-status{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-md);font-size:.9rem;font-weight:600;display:inline-block}.barber-status.disponible{background-color:var(--primary-light);color:var(--primary-dark)}.barber-status.ocupado{color:#92400e;background-color:#fef08a}.barber-status.ausente{color:var(--error-color);background-color:#fee2e2}.appointment-count{color:var(--text-light);margin-bottom:0;font-size:.875rem}.actions-section{margin-bottom:var(--spacing-xl)}.home-footer{padding:var(--spacing-lg) 0 var(--spacing-sm);text-align:center}.admin-access-link{color:var(--text-light);font-size:.9rem;font-weight:600;text-decoration:none}.admin-access-link:hover{color:var(--primary-dark);text-decoration:underline}.screen{padding:var(--spacing-lg);max-width:600px;min-height:100vh;margin:0 auto}.screen-header{margin-bottom:var(--spacing-xl)}.screen-header h1{margin-bottom:var(--spacing-md)}.selected-service,.date-display{color:var(--text-light);font-size:.9rem}.services-list{gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);grid-template-columns:1fr;display:grid}.service-card{background:var(--bg-white);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);border:2px solid #0000;transition:all .2s}.service-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md)}.service-card h3{margin-bottom:var(--spacing-md);color:var(--text-dark)}.service-card.special{border-color:var(--accent-color);background-color:#f973160d}.duration{color:var(--text-light);margin-bottom:var(--spacing-sm);font-size:.9rem}.price{color:var(--primary-color);margin-bottom:var(--spacing-md);font-size:1.375rem;font-weight:700}.description{color:var(--text-dark);margin-bottom:var(--spacing-md);font-size:.95rem}.items{margin-bottom:var(--spacing-md);font-size:.9rem;list-style:none}.items li{padding:var(--spacing-sm) 0;color:var(--text-light)}.note{background-color:var(--primary-light);padding:var(--spacing-md);border-left:3px solid var(--primary-color);border-radius:var(--border-radius-sm);color:var(--primary-dark);margin-bottom:var(--spacing-lg);font-size:.9rem}.barber-options{gap:var(--spacing-lg);grid-template-columns:1fr;display:grid}.option-card{background:var(--bg-white);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);border:2px solid var(--border-color);cursor:pointer;transition:all .2s}.option-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md);transform:translateY(-2px)}.option-card h3{margin-bottom:var(--spacing-sm);color:var(--primary-color)}.option-card p{color:var(--text-light);margin-bottom:0;font-size:.9rem}.dates-list{gap:var(--spacing-md);grid-template-columns:1fr;display:grid}.date-card{background:var(--bg-white);padding:var(--spacing-lg);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);cursor:pointer;text-align:left;transition:all .2s}.date-card:hover:not(.closed):not(:disabled){border-color:var(--primary-color);box-shadow:var(--shadow-md)}.date-card.today{border-color:var(--primary-color);background-color:var(--primary-light)}.date-card.closed{opacity:.5;cursor:not-allowed;background-color:var(--bg-light)}.date-info{justify-content:space-between;align-items:center;display:flex}.date-status{padding:var(--spacing-xs) var(--spacing-md);background-color:var(--primary-light);color:var(--primary-dark);border-radius:var(--border-radius-sm);font-size:.85rem;font-weight:600}.date-card.closed .date-status{color:var(--error-color);background-color:#fee2e2}.times-list{gap:var(--spacing-md);grid-template-columns:1fr;display:grid}.time-card{background:var(--bg-white);padding:var(--spacing-lg);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);text-align:left;cursor:pointer;width:100%;transition:all .2s}.time-card:hover{border-color:var(--primary-color);background-color:var(--primary-light);box-shadow:var(--shadow-md)}.time-card strong{color:var(--primary-color);margin-bottom:var(--spacing-sm);font-size:1.125rem;display:block}.barber-name{color:var(--text-light);font-size:.9rem}.no-slots{background:var(--bg-white);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);text-align:center}.no-slots p{color:var(--text-light);margin-bottom:var(--spacing-lg)}.booking-summary{background:var(--primary-light);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-xl);border-left:4px solid var(--primary-color)}.summary-item{padding:var(--spacing-sm) 0;border-bottom:1px solid #16a34a33;justify-content:space-between;align-items:center;display:flex}.summary-item:last-child{border-bottom:none}.summary-item .label{color:var(--text-light);font-size:.9rem}.summary-item strong{color:var(--text-dark)}.customer-form{background:var(--bg-white);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm)}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{margin-bottom:var(--spacing-sm);color:var(--text-dark);font-weight:600;display:block}.form-group input,.form-group textarea,.form-group select{width:100%;padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-md);font-size:1rem;font-family:var(--font-family);transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #22c55e1a}.form-group textarea{resize:vertical}.remember-details{margin-bottom:var(--spacing-lg);color:var(--text-dark)}.remember-details label{align-items:flex-start;gap:var(--spacing-sm);font-weight:600;display:flex}.remember-details input{margin-top:.2rem}.remember-details p{margin-top:var(--spacing-xs);color:var(--text-light);font-size:.875rem}.form-row{gap:var(--spacing-lg);grid-template-columns:1fr 1fr;display:grid}.form-row .form-group{margin-bottom:0}.confirmation-content{max-width:600px;padding:var(--spacing-lg);text-align:center;margin:0 auto}.success-badge{background-color:var(--primary-color);color:#fff;width:80px;height:80px;margin:0 auto var(--spacing-xl);box-shadow:var(--shadow-lg);border-radius:50%;justify-content:center;align-items:center;font-size:2.5rem;display:flex}.confirmation-details{background:var(--bg-white);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl);text-align:left}.confirmation-details h2{text-align:center;margin-bottom:var(--spacing-lg);color:var(--primary-color)}.detail-row{padding:var(--spacing-md) 0;border-bottom:1px solid var(--border-color);justify-content:space-between;display:flex}.detail-row:last-child{border-bottom:none}.detail-row span{color:var(--text-light)}.detail-row strong{color:var(--text-dark)}.confirmation-actions{gap:var(--spacing-md);flex-direction:column;display:flex}.confirmation-actions .btn{margin-bottom:0}.services-detail{gap:var(--spacing-lg);grid-template-columns:1fr;display:grid}.service-detail-card{background:var(--bg-white);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm)}.service-detail-card.special{border:2px solid var(--accent-color);background-color:#f973160d}.detail-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);grid-template-columns:1fr 1fr;display:grid}.detail-grid>div{text-align:center}.detail-grid .label{color:var(--text-light);margin-bottom:var(--spacing-sm);font-size:.85rem;display:block}.detail-grid strong{color:var(--primary-color);font-size:1.25rem;display:block}.items-list{background-color:var(--primary-light);padding:var(--spacing-md);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-md)}.items-list strong{margin-bottom:var(--spacing-sm);color:var(--text-dark);display:block}.items-list ul{list-style:none}.items-list li{padding:var(--spacing-xs) 0;color:var(--text-dark);font-size:.9rem}.service-note{color:#92400e;padding:var(--spacing-md);border-radius:var(--border-radius-md);background-color:#fef08a;border-left:3px solid #ca8a04;margin-bottom:0;font-size:.9rem}.appointments-list h3{margin-bottom:var(--spacing-lg)}.appointment-item{background:var(--bg-white);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);border-left:4px solid var(--primary-color);margin-bottom:var(--spacing-md);gap:var(--spacing-lg);display:flex}.appt-time{color:var(--primary-color);min-width:80px;font-size:1.125rem;font-weight:700}.appt-info{flex:1}.appt-info strong{margin-bottom:var(--spacing-sm);display:block}.appt-info p{margin-bottom:var(--spacing-xs);color:var(--text-light);font-size:.9rem}.customer{color:var(--text-dark);font-weight:500}.no-appointments{background:var(--bg-white);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);text-align:center;color:var(--text-light)}.admin-screen{padding:var(--spacing-lg);max-width:800px;margin:0 auto}.admin-section{background:var(--bg-white);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-sm)}.admin-section h2{margin-bottom:var(--spacing-lg)}.admin-date-section h2{margin-bottom:var(--spacing-sm)}.admin-selected-date{color:var(--primary-dark);margin-bottom:var(--spacing-lg);font-size:1.125rem;font-weight:700}.admin-date-controls{gap:var(--spacing-lg);grid-template-columns:minmax(220px,1fr) auto;align-items:end;display:grid}.admin-date-controls .form-group{margin-bottom:0}.quick-date-buttons{gap:var(--spacing-sm);display:flex}.quick-date-buttons .btn{width:auto;min-width:110px;margin-bottom:0}.quick-date-buttons .btn.active{border-color:var(--primary-color);color:var(--primary-dark);background-color:var(--primary-light)}.admin-section-heading h2{margin-bottom:var(--spacing-xs)}.admin-section-heading p{color:var(--text-light);margin-bottom:var(--spacing-lg);font-size:.9rem}.admin-selected-appointments-section{border-top:4px solid var(--primary-color);scroll-margin-top:var(--spacing-lg)}.admin-selected-appointments-section:focus{outline:3px solid var(--primary-light);outline-offset:3px}.agenda-date-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.agenda-date-card{background:var(--bg-light);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);cursor:pointer;gap:var(--spacing-xs);padding:var(--spacing-md);text-align:left;flex-direction:column;width:100%;transition:all .2s;display:flex}.agenda-date-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md);transform:translateY(-2px)}.agenda-date-card.selected{background-color:var(--primary-light);border-color:var(--primary-color)}.agenda-date-title{color:var(--text-dark);font-weight:700}.agenda-date-count{color:var(--primary-dark);font-size:.95rem;font-weight:700}.agenda-date-action{color:var(--text-light);font-size:.85rem;font-weight:600}.barber-controls{gap:var(--spacing-xl);grid-template-columns:1fr 1fr;display:grid}.barber-control h3{margin-bottom:var(--spacing-md)}.status-buttons{gap:var(--spacing-sm);flex-direction:column;display:flex}.admin-appointments{gap:var(--spacing-lg);grid-template-columns:1fr;display:grid}.admin-appointment-item{border:1px solid var(--border-color);border-radius:var(--border-radius-lg);overflow:hidden}.appt-header{background-color:var(--primary-light);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;display:flex}.appt-header strong{color:var(--primary-color)}.appt-header span{color:var(--text-light);font-size:.9rem}.appt-body{padding:var(--spacing-lg)}.appt-body p{margin-bottom:var(--spacing-sm);font-size:.9rem}.appt-body strong{color:var(--text-dark);font-weight:600}.appt-status{padding:.15rem var(--spacing-sm);border-radius:var(--border-radius-sm);font-weight:700;display:inline-block}.appt-status.confirmed{background-color:var(--primary-light);color:var(--primary-dark)}.appt-status.completed{color:#0369a1;background-color:#e0f2fe}.appt-actions{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--bg-light);border-top:1px solid var(--border-color);gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.admin-form{background:var(--bg-light);padding:var(--spacing-lg);border-radius:var(--border-radius-lg)}.admin-edit-form{padding:var(--spacing-lg);background-color:var(--bg-light);border-top:1px solid var(--border-color)}.edit-actions{gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.edit-actions .btn{margin-bottom:0}.admin-pin-screen{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.admin-pin-content{text-align:center;background:var(--bg-white);width:100%;max-width:320px;padding:var(--spacing-2xl);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md)}.pin-instruction{color:var(--text-light);margin-bottom:var(--spacing-lg);font-size:.95rem}.pin-form{margin-bottom:var(--spacing-lg)}.pin-input{letter-spacing:.5rem;text-align:center;width:100%;padding:var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-lg);font-family:monospace;font-size:2rem;font-weight:600}.pin-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light);outline:none}@media (width<=640px){:root{--spacing-lg:1rem;--spacing-xl:1.5rem}h1{font-size:1.5rem}.app-header{padding:var(--spacing-lg)}.barbers-grid,.form-row,.barber-controls,.admin-date-controls{grid-template-columns:1fr}.quick-date-buttons{grid-template-columns:1fr 1fr;display:grid}.quick-date-buttons .btn{width:100%;min-width:0}.detail-grid{grid-template-columns:1fr}.status-buttons{flex-direction:row}.btn{padding:1rem;font-size:1rem}}@media (width<=480px){body{font-size:16px}.screen,.home-screen{padding:var(--spacing-md)}h1{font-size:1.375rem}.btn{padding:.875rem var(--spacing-md);font-size:.95rem}.appointment-item{flex-direction:column}.appt-time{min-width:auto}.appt-header{align-items:flex-start;gap:var(--spacing-xs);flex-direction:column}.agenda-date-grid{grid-template-columns:1fr}.appt-actions,.edit-actions{flex-direction:column}.appt-actions .btn,.edit-actions .btn{width:100%;margin-right:0}}