*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;

background:#F6F8FC;

min-height:100vh;

color:#1E0C42;

overflow-x:hidden;

}

.br-background{

position:fixed;

top:-250px;

right:-250px;

width:650px;

height:650px;

border-radius:50%;

background:linear-gradient(135deg,#1E0C42,#6D42D8);

opacity:.06;

z-index:-1;

}

.br-wrapper{

max-width:560px;

margin:auto;

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

padding:25px;

}

.br-logo{

text-align:center;

margin-bottom:35px;

}

.br-logo img{

width:220px;

}

.br-card{

background:#fff;

border-radius:28px;

padding:42px;

border:1px solid #ECEEF5;

box-shadow:

0 25px 60px rgba(30,12,66,.08);

}

.br-top{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:25px;

}

.br-step{

font-size:12px;

font-weight:700;

letter-spacing:1px;

color:#6D42D8;

margin-bottom:8px;

}

h1{

font-size:34px;

font-weight:800;

line-height:1.15;

}

.br-percent{

font-size:15px;

font-weight:700;

color:#7A7A92;

}

.br-progress{

height:10px;

background:#ECEEF5;

border-radius:40px;

overflow:hidden;

margin-bottom:25px;

}

.br-progress-fill{

width:20%;

height:100%;

background:linear-gradient(90deg,#1E0C42,#6D42D8);

}

.br-chip{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

background:#F2EEFD;

border-radius:30px;

font-size:14px;

font-weight:600;

color:#5B37C7;

margin-bottom:25px;

}

.br-description{

font-size:16px;

line-height:1.8;

color:#667085;

text-align:justify;

text-justify:inter-word;

margin-bottom:28px;

}

.br-alert{

background:#FFF8E8;

border:1px solid #FFD783;

border-radius:18px;

padding:22px;

margin-bottom:30px;

}

.br-alert-title{

font-weight:700;

display:flex;

align-items:center;

gap:10px;

color:#9A6300;

margin-bottom:15px;

}

.br-alert ul{

padding-left:18px;

}

.br-alert li{

margin-bottom:10px;

color:#5F5A45;

line-height:1.6;

}

.br-btn{

width:100%;

height:58px;

border:none;

border-radius:16px;

background:linear-gradient(135deg,#1E0C42,#4D2AB7);

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

transition:.30s;

box-shadow:0 15px 30px rgba(30,12,66,.20);

}

.br-btn:hover{

transform:translateY(-2px);

box-shadow:0 25px 45px rgba(30,12,66,.28);

}

.br-footer{

text-align:center;

margin-top:25px;

font-size:13px;

color:#8B8EA6;

}

@media(max-width:576px){

.br-wrapper{

padding:16px;

}

.br-card{

padding:28px;

border-radius:22px;

}

.br-logo img{

width:180px;

}

h1{

font-size:28px;

}

.br-description{

font-size:15px;

}

}



.br-search{

position:relative;

margin-bottom:25px;

}

.br-search i{

position:absolute;

left:20px;

top:50%;

transform:translateY(-50%);

font-size:20px;

color:#8A8FA3;

}

.br-search input{

width:100%;

height:64px;

padding:0 20px 0 58px;

border:2px solid #E4E8F2;

border-radius:18px;

background:#FAFBFD;

font-size:16px;

font-family:'Inter',sans-serif;

transition:.25s;

outline:none;

}

.br-search input:hover{

border-color:#CFC8F8;

}

.br-search input:focus{

background:#fff;

border-color:#5B37C7;

box-shadow:0 0 0 5px rgba(91,55,199,.12);

}

.br-error{

margin-bottom:25px;

padding:16px;

border-radius:14px;

background:#FFF2F2;

border:1px solid #F5C2C7;

color:#B42318;

font-size:15px;

display:flex;

align-items:center;

gap:10px;

font-weight:500;

}


.br-warning{

background:#FFF8E8;

border:1px solid #FFD783;

border-radius:18px;

padding:20px;

margin-bottom:25px;

transition:.4s;

}

.br-warning-title{

font-weight:700;

margin-bottom:10px;

color:#8A5A00;

display:flex;

align-items:center;

gap:10px;

}

.br-warning p{

margin-bottom:18px;

color:#6C5A2B;

line-height:1.6;

}

.br-btn-secondary{

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

height:52px;

font-size:15px;

}



.br-success{

background:#ECFDF3;

border:1px solid #ABEFC6;

padding:20px;

border-radius:18px;

margin-bottom:25px;

animation:fade .3s;

}

.br-success-title{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:#067647;

margin-bottom:10px;

}

.br-warning{

background:#FFF8E8;

border:1px solid #FFD783;

padding:20px;

border-radius:18px;

margin-bottom:25px;

animation:fade .3s;

}

.br-warning-title{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:#9A6300;

margin-bottom:10px;

}

.br-btn:disabled{

opacity:.5;

cursor:not-allowed;

box-shadow:none;

}



.br-section{

margin-top:10px;

margin-bottom:25px;

}

.br-section h3{

font-size:20px;

font-weight:700;

color:#1E0C42;

margin-bottom:25px;

}

.br-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-bottom:35px;

}

.br-full{

grid-column:1 / -1;

}

.br-field{

display:flex;

flex-direction:column;

}

.br-field label{

font-size:14px;

font-weight:600;

color:#4B5563;

margin-bottom:8px;

}

.br-input{

display:block;

width:100%;

height:56px;

padding:0 16px;

border:2px solid #E6EAF2;

border-radius:14px;

background:#FAFBFD;

font-family:'Inter',sans-serif;

font-size:15px;

color:#1E0C42;

outline:none;

appearance:none;

-webkit-appearance:none;

box-sizing:border-box;

transition:.25s;

}

.br-input:focus{

outline:none;

border-color:#5B37C7;

background:#fff;

box-shadow:0 0 0 5px rgba(91,55,199,.10);

}

.br-input[readonly]{

background:#F5F7FA;

color:#6B7280;

cursor:not-allowed;

}

@media(max-width:768px){

.br-grid{

grid-template-columns:1fr;

}

}



.br-schedule{

display:flex;

flex-direction:column;

gap:20px;

margin-bottom:35px;

}

.br-day{

background:#F8F9FD;

border:1px solid #E8EBF5;

border-radius:18px;

padding:22px;

}

.br-day-title{

font-size:17px;

font-weight:700;

margin-bottom:18px;

color:#1E0C42;

}

.br-hours{

display:grid;

grid-template-columns:1fr auto 1fr;

gap:15px;

align-items:center;

}

.br-hours span{

font-weight:700;

color:#6B7280;

text-align:center;

}

.br-switch{

margin-bottom:18px;

}

.br-switch label{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

cursor:pointer;

}

.br-switch input{

width:18px;

height:18px;

}

@media(max-width:576px){

.br-hours{

grid-template-columns:1fr;

}

.br-hours span{

display:none;

}

}




.br-gps-card{

background:#F8F9FD;

border:1px solid #E7EAF5;

border-radius:22px;

padding:35px;

text-align:center;

margin-top:15px;

}

.br-gps-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:#F2EEFD;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.br-gps-icon i{

font-size:42px;

color:#5B37C7;

}

.br-gps-card h3{

font-size:24px;

font-weight:700;

margin-bottom:15px;

color:#1E0C42;

}

.br-gps-card p{

color:#6B7280;

line-height:1.8;

margin-bottom:30px;

}

#gpsResultado{

margin-top:30px;

}


/*==========================
  NOTIFICACIONES BANRED
==========================*/

#toastBanred{

position:fixed;

top:25px;

right:25px;

width:360px;

z-index:9999;

display:flex;

flex-direction:column;

gap:12px;

}

.br-toast{

display:flex;

align-items:flex-start;

gap:15px;

padding:18px;

border-radius:18px;

background:#fff;

box-shadow:0 20px 45px rgba(30,12,66,.15);

border-left:6px solid;

animation:toastIn .30s ease;

}

.br-toast i{

font-size:24px;

margin-top:2px;

}

.br-toast-title{

font-weight:700;

margin-bottom:5px;

font-size:15px;

}

.br-toast-text{

font-size:14px;

line-height:1.5;

color:#667085;

}

.br-success-toast{

border-color:#12B76A;

}

.br-success-toast i{

color:#12B76A;

}

.br-warning-toast{

border-color:#F79009;

}

.br-warning-toast i{

color:#F79009;

}

.br-error-toast{

border-color:#F04438;

}

.br-error-toast i{

color:#F04438;

}

.br-info-toast{

border-color:#4F46E5;

}

.br-info-toast i{

color:#4F46E5;

}

@keyframes toastIn{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@media(max-width:576px){

#toastBanred{

left:15px;

right:15px;

width:auto;

top:15px;

}

}





#estadoGPS{

margin-bottom:25px;

padding:18px;

border-radius:16px;

background:#F8F9FD;

border:1px solid #E7EAF5;

font-size:15px;

line-height:1.7;

}




.br-gps-result{

margin-top:25px;

padding:25px;

border-radius:20px;

background:#fff;

border:1px solid #E7EAF5;

box-shadow:0 10px 30px rgba(30,12,66,.08);

animation:fade .35s;

}

.br-gps-ok{

width:70px;

height:70px;

border-radius:50%;

background:#ECFDF3;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

margin-bottom:20px;

}

.br-gps-ok i{

font-size:36px;

color:#12B76A;

}

.br-gps-result h3{

text-align:center;

font-size:24px;

font-weight:700;

margin-bottom:10px;

color:#1E0C42;

}

.br-gps-result p{

text-align:center;

color:#667085;

margin-bottom:25px;

}

.br-gps-grid{

display:grid;

grid-template-columns:1fr;

gap:15px;

margin-bottom:25px;

}

.br-gps-item{

background:#F8FAFC;

padding:15px;

border-radius:14px;

border:1px solid #E5E7EB;

}

.br-gps-item strong{

display:block;

font-size:13px;

color:#667085;

margin-bottom:5px;

}

.br-gps-item span{

font-size:16px;

font-weight:700;

color:#1E0C42;

}

#mapa{

width:100%;

height:320px;

border-radius:18px;

overflow:hidden;

margin-bottom:25px;

}




.br-gps-progress{

padding:35px;

background:#fff;

border-radius:22px;

box-shadow:0 15px 35px rgba(30,12,66,.08);

text-align:center;

margin-top:20px;

}

.br-gps-loader{

width:80px;

height:80px;

border-radius:50%;

margin:auto;

margin-bottom:20px;

border:6px solid #ECEEF5;

border-top:6px solid #5B37C7;

animation:spin 1s linear infinite;

}

.br-gps-status{

display:flex;

justify-content:space-between;

padding:15px 0;

border-bottom:1px solid #ECEEF5;

font-size:15px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.br-summary{

display:flex;

flex-direction:column;

gap:16px;

margin-bottom:35px;

}

.br-summary-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 20px;

border:1px solid #E8EBF3;

border-radius:16px;

background:#FAFBFD;

}

.br-summary-item span{

font-size:14px;

color:#667085;

}

.br-summary-item strong{

font-size:15px;

font-weight:700;

color:#1E0C42;

text-align:right;

max-width:55%;

word-break:break-word;

}




/* ===== Pantalla final ===== */

.br-finish{

text-align:center;

padding:20px 5px;

}

.br-finish-icon{

width:110px;

height:110px;

margin:0 auto 25px;

border-radius:50%;

background:#ECFDF3;

display:flex;

align-items:center;

justify-content:center;

font-size:58px;

color:#16a34a;

animation:popSuccess .5s ease;

}

@keyframes popSuccess{

0%{

transform:scale(.3);

opacity:0;

}

70%{

transform:scale(1.1);

}

100%{

transform:scale(1);

opacity:1;

}

}

.br-finish h2{

font-size:34px;

font-weight:800;

margin-bottom:18px;

color:#1E0C42;

}

.br-finish-text{

font-size:17px;

line-height:1.8;

color:#667085;

margin-bottom:35px;

}

.br-finish-info{

background:#F8FAFC;

border:1px solid #E6EAF2;

border-radius:20px;

padding:10px 0;

margin-bottom:30px;

}

.br-finish-item{

display:flex;

justify-content:space-between;

padding:16px 22px;

border-bottom:1px solid #ECEEF5;

}

.br-finish-item:last-child{

border-bottom:none;

}

.br-finish-item span{

color:#667085;

font-size:14px;

}

.br-finish-item strong{

font-size:16px;

color:#1E0C42;

}

.br-finish-note{

display:flex;

gap:15px;

align-items:flex-start;

background:#ECFDF3;

border:1px solid #ABEFC6;

padding:20px;

border-radius:18px;

margin-bottom:35px;

text-align:left;

}

.br-finish-note i{

font-size:26px;

color:#16a34a;

margin-top:3px;

}


/*==========================
  Pantalla Final
==========================*/

.br-finish{

text-align:center;

padding:10px 0;

}

.br-finish-icon{

width:110px;

height:110px;

margin:0 auto 28px;

border-radius:50%;

background:linear-gradient(135deg,#16a34a,#22c55e);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:58px;

box-shadow:0 18px 35px rgba(22,163,74,.25);

animation:popSuccess .45s ease;

}

@keyframes popSuccess{

0%{

transform:scale(.3);

opacity:0;

}

70%{

transform:scale(1.08);

}

100%{

transform:scale(1);

opacity:1;

}

}

.br-finish h2{

font-size:34px;

font-weight:800;

margin-bottom:15px;

color:#1E0C42;

}

.br-finish-text{

font-size:16px;

line-height:1.8;

color:#667085;

margin-bottom:30px;

}

.br-finish-code{

background:linear-gradient(135deg,#1E0C42,#4526A7);

border-radius:18px;

padding:24px;

margin-bottom:30px;

color:#fff;

}

.br-finish-code small{

display:block;

opacity:.75;

font-size:14px;

margin-bottom:8px;

}

.br-finish-code strong{

font-size:26px;

font-weight:800;

letter-spacing:2px;

}

.br-finish-info{

border:1px solid #E6EAF2;

border-radius:18px;

overflow:hidden;

margin-bottom:30px;

background:#fff;

}

.br-finish-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 22px;

border-bottom:1px solid #ECEEF5;

}

.br-finish-item:last-child{

border-bottom:none;

}

.br-finish-item span{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

color:#667085;

}

.br-finish-item span i{

color:#5B37C7;

font-size:18px;

}

.br-finish-item strong{

font-size:15px;

font-weight:700;

color:#1E0C42;

}

.br-finish-note{

display:flex;

gap:15px;

align-items:flex-start;

padding:20px;

border-radius:18px;

background:#ECFDF3;

border:1px solid #ABEFC6;

margin-bottom:30px;

text-align:left;

}

.br-finish-note i{

font-size:26px;

color:#16a34a;

margin-top:2px;

flex-shrink:0;

}

.br-finish-note strong{

color:#166534;

}

@media(max-width:576px){

.br-finish h2{

font-size:28px;

}

.br-finish-code strong{

font-size:21px;

letter-spacing:1px;

}

.br-finish-item{

padding:16px;

}

}