/* Premium polish scoped to the customer experience. */
body[data-role="cliente"]{background:radial-gradient(circle at 12% 3%,rgba(0,167,181,.09),transparent 24rem),radial-gradient(circle at 92% 24%,rgba(220,41,47,.055),transparent 22rem),var(--bg)}
body[data-role="cliente"] .app-header{background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom-color:color-mix(in srgb,var(--brand) 10%,var(--line));box-shadow:0 8px 30px rgba(0,44,85,.045);backdrop-filter:blur(18px) saturate(1.25)}
body[data-role="cliente"] .nav-link,body[data-role="cliente"] .icon-button{transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
body[data-role="cliente"] .nav-link:hover,body[data-role="cliente"] .icon-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,44,85,.09)}
body[data-role="cliente"] .view{animation:clientViewIn .48s cubic-bezier(.2,.75,.3,1) both}
body[data-role="cliente"] .dashboard-hero{isolation:isolate;min-height:350px;border:1px solid rgba(255,255,255,.13);box-shadow:0 28px 70px rgba(0,28,42,.28)}
body[data-role="cliente"] .dashboard-hero:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(120deg,transparent 48%,rgba(49,232,226,.1));pointer-events:none}
body[data-role="cliente"] .dashboard-hero h1{max-width:680px;text-wrap:balance;text-shadow:0 3px 24px rgba(0,0,0,.22)}
body[data-role="cliente"] .dashboard-hero p{font-size:16px}
body[data-role="cliente"] .dashboard-actions .button{min-height:54px;border-radius:16px;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
body[data-role="cliente"] .dashboard-actions .button-primary{box-shadow:0 14px 30px rgba(220,41,47,.35)}
body[data-role="cliente"] .dashboard-actions .button-ghost{background:rgba(246,251,253,.94);color:#07314a;box-shadow:0 12px 28px rgba(0,0,0,.13)}
body[data-role="cliente"] .dashboard-actions .button:hover{transform:translateY(-3px)}
body[data-role="cliente"] .dashboard-hero+.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body[data-role="cliente"] .metric{min-height:166px;border-radius:26px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--brand-soft) 34%,var(--surface)));box-shadow:0 16px 38px rgba(0,44,85,.075)}
body[data-role="cliente"] .metric:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.48),transparent 42%);pointer-events:none}
body[data-role="cliente"] .metric:after{width:104px;height:104px;right:-42px;bottom:-56px;background:color-mix(in srgb,var(--brand) 12%,transparent)}
body[data-role="cliente"] .metric-top svg{width:23px;height:23px;padding:10px;box-sizing:content-box;border-radius:14px;background:var(--brand-soft);color:var(--brand);transition:transform .25s ease}
body[data-role="cliente"] .metric:hover .metric-top svg{transform:rotate(-7deg) scale(1.08)}
body[data-role="cliente"] .metric strong{font-size:38px;letter-spacing:-.05em;color:var(--ink)}
body[data-role="cliente"] .panel{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 72%,var(--surface)));box-shadow:0 16px 42px rgba(0,44,85,.065)}
body[data-role="cliente"] .panel>.empty-state{border-color:color-mix(in srgb,var(--brand) 22%,var(--line));background:radial-gradient(circle at 50% 20%,var(--brand-soft),transparent 52%),var(--bg)}
body[data-role="cliente"] .quick-action{position:relative;overflow:hidden;border:1px solid transparent;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
body[data-role="cliente"] .quick-action:after{content:"";position:absolute;width:60px;height:60px;right:-30px;bottom:-30px;border-radius:50%;background:var(--brand-soft);transition:transform .25s ease}
body[data-role="cliente"] .quick-action:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 22%,var(--line));box-shadow:0 13px 26px rgba(0,44,85,.1)}
body[data-role="cliente"] .quick-action:hover:after{transform:scale(1.35)}
body[data-role="cliente"] .view>.view-heading:after{content:"";position:absolute;width:180px;height:180px;right:-48px;top:-88px;border-radius:50%;border:34px solid rgba(255,255,255,.075);pointer-events:none}
body[data-role="cliente"] .view>.view-heading>*{position:relative;z-index:1}
body[data-role="cliente"] .booking-layout>.panel,body[data-role="cliente"] .detail-grid>.panel,body[data-role="cliente"] .rating-card,body[data-role="cliente"] .auth-card{box-shadow:0 18px 48px rgba(0,44,85,.08)}
body[data-role="cliente"] .leaflet-map{border:5px solid var(--surface);box-shadow:0 18px 45px rgba(0,44,85,.14)}
body[data-role="cliente"] .trip-row,body[data-role="cliente"] .history-card,body[data-role="cliente"] .notification-card{position:relative;overflow:hidden;border-radius:22px}
body[data-role="cliente"] .trip-row:before,body[data-role="cliente"] .history-card:before,body[data-role="cliente"] .notification-card:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(var(--brand),var(--signal));opacity:.7}
body[data-role="cliente"] .filter-row{width:max-content;max-width:100%;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px)}
body[data-role="cliente"] .field input,body[data-role="cliente"] .field select,body[data-role="cliente"] .field textarea{border-radius:15px;background:color-mix(in srgb,var(--surface-2) 78%,var(--surface));min-height:52px}
body[data-role="cliente"] .button-primary,body[data-role="cliente"] .button-secondary{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
body[data-role="cliente"] .button-primary:hover,body[data-role="cliente"] .button-secondary:hover{transform:translateY(-2px);filter:saturate(1.08)}
body[data-role="cliente"] .empty-state svg{padding:11px;box-sizing:content-box;border-radius:16px;background:var(--brand-soft)}
@keyframes clientViewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:768px){body[data-role="cliente"] .app-header{box-shadow:0 5px 20px rgba(0,44,85,.05)}body[data-role="cliente"] .dashboard-hero{min-height:300px;padding:27px 18px;background-position:64% center}body[data-role="cliente"] .dashboard-hero h1{font-size:34px}body[data-role="cliente"] .dashboard-actions{gap:8px}body[data-role="cliente"] .dashboard-actions .button{width:100%;min-height:48px}body[data-role="cliente"] .dashboard-hero+.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body[data-role="cliente"] .metric{min-height:146px;padding:16px;border-radius:21px}body[data-role="cliente"] .metric:nth-child(3):last-child{grid-column:1/2}body[data-role="cliente"] .metric-top{gap:6px}body[data-role="cliente"] .metric-top svg{width:18px;height:18px;padding:7px;border-radius:11px}body[data-role="cliente"] .metric strong{font-size:31px}body[data-role="cliente"] .panel{padding:20px;border-radius:23px}body[data-role="cliente"] .view>.view-heading{min-height:175px}body[data-role="cliente"] .filter-row{width:100%;overflow:auto}body[data-role="cliente"] .trip-row,body[data-role="cliente"] .history-card,body[data-role="cliente"] .notification-card{border-radius:19px}body[data-role="cliente"] .app-footer-nav{background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 -10px 30px rgba(0,44,85,.08);backdrop-filter:blur(18px) saturate(1.2)}body[data-role="cliente"] .app-footer-nav a,body[data-role="cliente"] .app-footer-nav button{transition:color .2s ease,transform .2s ease}body[data-role="cliente"] .app-footer-nav .active{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){body[data-role="cliente"] .view{animation:none}body[data-role="cliente"] .dashboard-actions .button,body[data-role="cliente"] .quick-action,body[data-role="cliente"] .metric-top svg{transition:none}}