*{
box-sizing:border-box;
}


body{

margin:0;

padding:20px;

background:#07111f;

color:white;

font-family:
Arial,
Helvetica,
sans-serif;

}



h1{

font-size:32px;

}



h2{

margin-top:0;

}



input{

background:#14243a;

border:1px solid #344966;

color:white;

padding:12px;

border-radius:10px;

}



button{

cursor:pointer;

}



.card{

background:#101d31;

border:1px solid #263b59;

border-radius:18px;

padding:20px;

margin-bottom:20px;

box-shadow:
0 8px 20px rgba(0,0,0,.25);

}



.dashboard{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(150px,1fr));

gap:15px;

}



.stat{

text-align:center;

}



.stat strong{

display:block;

font-size:35px;

color:#55a8ff;

}



.stat span{

color:#aaa;

}



.day-card{

background:#14243a;

border-radius:15px;

margin:15px 0;

overflow:hidden;

border:1px solid #304969;

}



.day-header{

padding:18px;

font-size:18px;

font-weight:bold;

cursor:pointer;

}



.day-header:hover{

background:#1b3354;

}



.day-body{

display:none;

padding:15px;

border-top:1px solid #304969;

}



.flight{

padding:12px;

border-bottom:1px solid #304969;

}



.crew-button{

margin-top:15px;

background:#2684ff;

color:white;

border:0;

padding:12px 18px;

border-radius:10px;

font-weight:bold;

}



.lista{

line-height:1.8;

}



@media(max-width:600px){

body{

padding:10px;

}


h1{

font-size:26px;

}


}


.day-card{
background:#101c31;
border:1px solid #29415f;
border-radius:15px;
margin:15px 0;
overflow:hidden;
}


.day-title{
padding:18px;
cursor:pointer;
font-size:18px;
font-weight:bold;
}


.day-content{
display:none;
padding:15px;
}


.flight{
padding:10px;
border-bottom:1px solid #29415f;
}


.stat{
text-align:center;
}




.crew-box{

margin-top:20px;

padding:15px;

background:#182942;

border-radius:12px;

border:1px solid #31517a;

}


.crew-member{

padding:10px;

border-bottom:1px solid #31517a;

}




/* ==========================
   MOBILE APP STYLE
========================== */


*{
box-sizing:border-box;
}



body{

margin:0;

padding:10px;

font-family:
Arial,
sans-serif;

background:#07111f;

color:white;

}



/* TITULO */

h1{

font-size:28px;

margin:10px 0;

}



h2{

font-size:22px;

}



/* AREA PESQUISA */


.search-box{

display:flex;

gap:8px;

width:100%;

}



input{

width:100%;

height:45px;

font-size:18px;

border-radius:12px;

padding:10px;

background:#17263d;

color:white;

border:1px solid #345;


}



button{

height:45px;

padding:0 18px;

border-radius:12px;

font-size:16px;

font-weight:bold;

}



/* DASHBOARD */


.dashboard{

display:grid;

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

gap:10px;

margin-top:15px;

}



.card{

background:#111e35;

border:1px solid #263d5c;

border-radius:16px;

padding:15px;

margin-bottom:15px;

}



.stat h2{

font-size:30px;

text-align:center;

margin:5px;

}


.stat p{

text-align:center;

}



/* HISTORICO */


.day-card{

margin-bottom:10px;

}



.day-title{

font-size:17px;

padding:15px;

}



.flight{

font-size:16px;

padding:12px;

}



/* ROTAS */

.card br{

line-height:2;

}



/* MOBILE */


@media(max-width:600px){



body{

padding:8px;

}



h1{

font-size:24px;

}



.dashboard{

grid-template-columns:1fr;

}



button{

width:100%;

margin-top:8px;

}



.search-box{

flex-direction:column;

}



.card{

padding:12px;

border-radius:14px;

}



.stat h2{

font-size:34px;

}



.day-title{

font-size:18px;

}



.flight{

font-size:15px;

}



}





/* ==========================
   MOBILE APP STYLE
========================== */


*{
box-sizing:border-box;
}



body{

margin:0;

padding:10px;

font-family:
Arial,
sans-serif;

background:#07111f;

color:white;

}



/* TITULO */

h1{

font-size:28px;

margin:10px 0;

}



h2{

font-size:22px;

}



/* AREA PESQUISA */


.search-box{

display:flex;

gap:8px;

width:100%;

}



input{

width:100%;

height:45px;

font-size:18px;

border-radius:12px;

padding:10px;

background:#17263d;

color:white;

border:1px solid #345;


}



button{

height:45px;

padding:0 18px;

border-radius:12px;

font-size:16px;

font-weight:bold;

}



/* DASHBOARD */


.dashboard{

display:grid;

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

gap:10px;

margin-top:15px;

}



.card{

background:#111e35;

border:1px solid #263d5c;

border-radius:16px;

padding:15px;

margin-bottom:15px;

}



.stat h2{

font-size:30px;

text-align:center;

margin:5px;

}


.stat p{

text-align:center;

}



/* HISTORICO */


.day-card{

margin-bottom:10px;

}



.day-title{

font-size:17px;

padding:15px;

}



.flight{

font-size:16px;

padding:12px;

}



/* ROTAS */

.card br{

line-height:2;

}



/* MOBILE */


@media(max-width:600px){



body{

padding:8px;

}



h1{

font-size:24px;

}



.dashboard{

grid-template-columns:1fr;

}



button{

width:100%;

margin-top:8px;

}



.search-box{

flex-direction:column;

}



.card{

padding:12px;

border-radius:14px;

}



.stat h2{

font-size:34px;

}



.day-title{

font-size:18px;

}



.flight{

font-size:15px;

}



}





.icloud-btn{

width:100%;

height:48px;

margin:10px 0;

border-radius:14px;

background:#1b6cff;

color:white;

font-size:17px;

font-weight:bold;

border:none;

cursor:pointer;

}



.icloud-btn:hover{

opacity:.85;

}




.day-box{

margin-top:15px;

border:1px solid #34405c;

border-radius:15px;

overflow:hidden;

}


.day-title{

padding:18px;

background:#18243b;

font-size:20px;

cursor:pointer;

font-weight:bold;

}



.day-content{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

background:#0d1526;

}



.flight{

padding:20px;

border-top:1px solid #34405c;

font-size:18px;

}


.flight ul{

margin-top:10px;

}




.day{

margin-top:25px;

padding:15px;

border:1px solid #34405c;

border-radius:15px;

}


.flight{

margin-top:15px;

padding:20px;

background:#111c31;

border-radius:15px;

}


.flight button{

padding:10px 20px;

border-radius:10px;

cursor:pointer;

font-size:16px;

}



.crew-box{


max-height:0;

overflow:hidden;

transition:max-height .4s ease;


background:#0b1426;


margin-top:15px;

border-radius:12px;


}



.crew-box ul{

padding:20px;

}




.flight-card {

    margin-top:20px;

    padding:15px;

    background:#111c31;

    border-radius:15px;

    border:1px solid #34405c;

}



.flight-line {


    display:flex;

    gap:20px;

    align-items:center;

    flex-wrap:wrap;

    font-size:20px;

    font-weight:bold;

    padding:12px;


}



.crew-button {


    margin-top:15px;

    padding:10px 20px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;


}



.crew-list {


    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;


}



.crew-list.open {


    max-height:500px;


}



.crew-list ul {


    padding:20px;

    margin:0;


}



.crew-list li {


    font-size:18px;

    margin:5px;


}



.crew-list{

max-height:0;
overflow:hidden;
transition:max-height .4s ease;

}


.crew-list.open{

max-height:500px;

}




.day-group{

margin-top:25px;

padding:20px;

background:#101a2d;

border-radius:15px;

border:1px solid #34405c;

}



.day-group h2{

margin-top:0;

padding-bottom:15px;

border-bottom:1px solid #34405c;

}



.flight-card{

padding:15px;

margin-top:15px;

background:#18243b;

border-radius:12px;

}



.flight-line{

font-size:22px;

font-weight:bold;

display:flex;

gap:15px;

align-items:center;

flex-wrap:wrap;

}



.crew-button{

margin-top:15px;

padding:10px 20px;

border-radius:10px;

cursor:pointer;

}



.crew-list{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}



.crew-list.open{

max-height:500px;

}



.crew-list li{

font-size:18px;

margin:5px;

}




/* ============================================================
   Adições — sincronização offline (não sobrescreve nada acima)
   ============================================================ */

.offline-badge{
  display:inline-block;
  font-size:12px;
  background:#3a2a10;
  color:#f0a94e;
  border:1px solid #6b4a1a;
  border-radius:999px;
  padding:2px 8px;
  margin-left:6px;
}

.status-line{
  font-size:13px;
  margin:2px 0;
  color:#c7d4e3;
}

.sync-btn{
  margin-top:8px;
  background:#1f4c73;
  color:#eaf2fa;
  border:1px solid #3e8fe0;
  border-radius:10px;
  padding:8px 14px;
  font-size:13px;
}

.sync-btn:disabled{
  opacity:.6;
}

.sync-toast{
  margin-top:6px;
  font-size:12px;
  color:#eaf2fa;
  background:#14243a;
  border:1px solid #344966;
  border-radius:8px;
  padding:4px 8px;
  display:inline-block;
}

#listaLocal .flight-card button{
  margin-right:8px;
  margin-top:8px;
  background:#14243a;
  color:white;
  border:1px solid #344966;
  border-radius:8px;
  padding:6px 12px;
}

/* ---- classes que faltavam (layout base) ---- */

.container{
  max-width:480px;
  margin:0 auto;
  padding:20px;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:16px 0;
}

.menu-button{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  text-decoration:none;
  background:#14243a;
  color:white;
  border:1px solid #344966;
  border-radius:14px;
  padding:14px;
  font-size:17px;
  font-weight:bold;
}

.menu-button:active{
  opacity:.85;
}

.profile{
  background:#101d31;
  border:1px solid #263b59;
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
}

#syncStatus{
  background:#101d31;
  border:1px solid #263b59;
  border-radius:14px;
  padding:12px 14px;
  margin:4px 0;
}


.day-group{

margin-top:20px;

padding:20px;

background:#101a2d;

border-radius:15px;

border:1px solid #34405c;

}



.day-title{

font-size:22px;

font-weight:bold;

padding:15px;

background:#18243b;

border-radius:12px;

}



.crew-box{

margin-top:15px;

padding:15px;

background:#0b1426;

border-radius:12px;

}



.crew-box li{

font-size:18px;

margin:5px;

}




.day-title{

font-size:18px;

font-weight:bold;

line-height:1.3;

}



.route{

font-size:16px;

font-weight:600;

white-space:normal;

color:#ffffff;

}



.crew-box{

margin-top:15px;

padding:10px;

background:#0d1729;

border-radius:10px;

}



.crew-box h3{

font-size:18px;

margin:5px 0;

}



.crew-box li{

font-size:16px;

margin:3px;

}





.day-title{

font-size:18px;
font-weight:bold;

}



.route{

display:block;

font-size:14px;

font-weight:600;

margin-top:8px;

line-height:1.3;

}



.crew-box{

margin-top:15px;

padding:12px;

background:#0d1729;

border-radius:10px;

}



.crew-box li{

font-size:16px;

margin:4px;

}





.day-card{

margin:20px 0;

padding:15px;

background:#101a2d;

border-radius:15px;

}



.day-header{

cursor:pointer;

font-size:20px;

font-weight:bold;

padding:15px;

background:#18243b;

border-radius:12px;

}



.route{

font-size:15px;

font-weight:600;

}



.crew-hidden{

max-height:0;

overflow:hidden;

transition:.4s;

}



.crew-open{

max-height:500px;

padding-top:15px;

}



.crew-hidden li{

font-size:17px;

margin:5px;

}




.day-header{

cursor:pointer;
padding:12px;
font-size:18px;
font-weight:bold;

}


.route{

font-size:14px;

font-weight:500;

}



.crew-list{

max-height:0;

overflow:hidden;

transition:.3s;

}



.crew-list.open{

max-height:400px;

padding:10px;

}




.day-group{

margin-top:20px;

padding:15px;

background:#101a2d;

border-radius:12px;

}



.day-header{

font-size:18px;

font-weight:bold;

}



.route{

display:block;

font-size:14px;

margin-top:8px;

}



.crew-list{

max-height:0;

overflow:hidden;

transition:.3s;

}



.crew-list.open{

max-height:500px;

padding-top:10px;

}





.day-card{

margin-top:15px;

}


.day-header{

cursor:pointer;

padding:12px;

font-size:18px;

font-weight:bold;

background:#18243b;

border-radius:12px;

}



.day-content{

max-height:0;

overflow:hidden;

transition:.4s;

}



.day-content.open{

max-height:3000px;

padding-top:15px;

}



.flight{

padding:10px 0;

font-size:16px;

}



.crew{

background:#101a2d;

padding:12px;

border-radius:10px;

margin-top:10px;

}



.crew-change{

background:#382020;

padding:12px;

border-radius:10px;

margin-top:10px;

}




/* ============================= */
/* CREW TRACKER GLASS UI */
/* ============================= */


body{

background:
linear-gradient(
135deg,
#050b18,
#101c35,
#07101f
);

color:#ffffff;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

min-height:100vh;

}



/* Container principal */

.container{

max-width:900px;

margin:auto;

padding:20px;

}



/* Titulo */

h1{

font-size:36px;

font-weight:800;

letter-spacing:-1px;

}



/* Cards */

.day-card,
.search-box,
.menu,
#resultado > div{

background:
rgba(255,255,255,0.08);

border:1px solid
rgba(255,255,255,0.15);

backdrop-filter:
blur(18px);

-webkit-backdrop-filter:
blur(18px);


border-radius:24px;

box-shadow:

0 20px 50px
rgba(0,0,0,.35);


padding:20px;

margin-bottom:20px;

}



/* Header da data */

.day-header{

background:

linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.05)
);


border-radius:18px;

padding:18px;

cursor:pointer;

transition:.3s;


}


.day-header:hover{

transform:
translateY(-3px);

background:
rgba(255,255,255,.20);

}



/* Rotas */


.route{

font-size:16px;

color:#dbeafe;

margin-top:10px;

display:block;

font-weight:600;

}



/* Botões */


button,
.crew-button,
.menu-button{


background:

linear-gradient(
135deg,
#4f7cff,
#2563eb
);


color:white;

border:none;

border-radius:16px;

padding:14px 22px;

font-size:16px;

font-weight:700;

cursor:pointer;


box-shadow:

0 10px 25px
rgba(37,99,235,.35);


transition:.25s;

}



button:hover{

transform:
translateY(-3px);

}



/* Input */


input{


background:
rgba(255,255,255,.10);


border:

1px solid
rgba(255,255,255,.20);


color:white;

border-radius:16px;

padding:15px;

font-size:18px;


backdrop-filter:
blur(10px);


}



/* Crew */


.crew{


background:

rgba(0,0,0,.25);


border-radius:18px;

padding:18px;


border:

1px solid
rgba(255,255,255,.12);


}



.crew li{


padding:5px;

font-size:17px;

}



/* Troca de crew */


.crew-change{


background:

rgba(255,80,80,.15);


border:

1px solid
rgba(255,100,100,.3);


border-radius:18px;

padding:18px;


}



/* Animação abrir crew */


.day-content{

transition:
max-height .5s ease,
opacity .3s;


}


/* Mobile */


@media(max-width:600px){


h1{

font-size:28px;

}


.container{

padding:12px;

}


.route{

font-size:14px;

}


}




/* ============================= */
/* CREW TRACKER GLASS UI */
/* ============================= */


body{

background:
linear-gradient(
135deg,
#050b18,
#101c35,
#07101f
);

color:#ffffff;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

min-height:100vh;

}



/* Container principal */

.container{

max-width:900px;

margin:auto;

padding:20px;

}



/* Titulo */

h1{

font-size:36px;

font-weight:800;

letter-spacing:-1px;

}



/* Cards */

.day-card,
.search-box,
.menu,
#resultado > div{

background:
rgba(255,255,255,0.08);

border:1px solid
rgba(255,255,255,0.15);

backdrop-filter:
blur(18px);

-webkit-backdrop-filter:
blur(18px);


border-radius:24px;

box-shadow:

0 20px 50px
rgba(0,0,0,.35);


padding:20px;

margin-bottom:20px;

}



/* Header da data */

.day-header{

background:

linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.05)
);


border-radius:18px;

padding:18px;

cursor:pointer;

transition:.3s;


}


.day-header:hover{

transform:
translateY(-3px);

background:
rgba(255,255,255,.20);

}



/* Rotas */


.route{

font-size:16px;

color:#dbeafe;

margin-top:10px;

display:block;

font-weight:600;

}



/* Botões */


button,
.crew-button,
.menu-button{


background:

linear-gradient(
135deg,
#4f7cff,
#2563eb
);


color:white;

border:none;

border-radius:16px;

padding:14px 22px;

font-size:16px;

font-weight:700;

cursor:pointer;


box-shadow:

0 10px 25px
rgba(37,99,235,.35);


transition:.25s;

}



button:hover{

transform:
translateY(-3px);

}



/* Input */


input{


background:
rgba(255,255,255,.10);


border:

1px solid
rgba(255,255,255,.20);


color:white;

border-radius:16px;

padding:15px;

font-size:18px;


backdrop-filter:
blur(10px);


}



/* Crew */


.crew{


background:

rgba(0,0,0,.25);


border-radius:18px;

padding:18px;


border:

1px solid
rgba(255,255,255,.12);


}



.crew li{


padding:5px;

font-size:17px;

}



/* Troca de crew */


.crew-change{


background:

rgba(255,80,80,.15);


border:

1px solid
rgba(255,100,100,.3);


border-radius:18px;

padding:18px;


}



/* Animação abrir crew */


.day-content{

transition:
max-height .5s ease,
opacity .3s;


}


/* Mobile */


@media(max-width:600px){


h1{

font-size:28px;

}


.container{

padding:12px;

}


.route{

font-size:14px;

}


}




/* ============================= */
/* CREW TRACKER - RYANAIR STYLE */
/* ============================= */


body{

background:
linear-gradient(
135deg,
#071D49,
#003B7A,
#001B44
);

color:#ffffff;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

}



/* Container */

.container{

max-width:900px;

margin:auto;

padding:20px;

}



/* Titulo */

h1{

color:#F7D117;

font-weight:900;

letter-spacing:-1px;

}



/* Cards vidro azul */

.day-card,
.menu,
.search-box,
#resultado > div{


background:

rgba(255,255,255,0.12);


border:

1px solid rgba(247,209,23,.35);


backdrop-filter:

blur(18px);


-webkit-backdrop-filter:

blur(18px);


border-radius:20px;


box-shadow:

0 15px 40px rgba(0,0,0,.35);


}



/* Data */

.day-header{


background:

linear-gradient(
135deg,
#003B7A,
#071D49
);


border:

1px solid #F7D117;


color:white;


border-radius:16px;


}



.day-header:hover{


background:#F7D117;


color:#071D49;


}



/* Rotas */


.route{


color:#F7D117;


font-weight:700;


font-size:15px;


}



/* Botões Ryanair */


button,
.menu-button{


background:

linear-gradient(
135deg,
#F7D117,
#FFC400
);


color:#071D49;


font-weight:900;


border:none;


border-radius:14px;


padding:14px 22px;


box-shadow:

0 8px 20px rgba(247,209,23,.35);


}



button:hover{


transform:

translateY(-3px);


background:#ffffff;


}



/* Input */


input{


background:

rgba(255,255,255,.15);


border:

1px solid #F7D117;


color:white;


border-radius:14px;


}



/* Crew */


.crew{


background:

rgba(7,29,73,.85);


border:

1px solid rgba(247,209,23,.4);


border-radius:16px;


padding:15px;


}



.crew li{


color:white;


}



/* Mudança de crew */


.crew-change{


background:

rgba(220,40,40,.25);


border:

1px solid #ff7777;


border-radius:16px;


}



/* Botão mostrar crew */


.crew-button{


background:

#F7D117;


color:#071D49;


}



/* Mobile */

@media(max-width:600px){


h1{

font-size:28px;

}


.route{

font-size:13px;

}


}




.day-card{

margin-top:15px;

}


.day-header{

cursor:pointer;

padding:12px;

font-size:18px;

font-weight:bold;

background:#18243b;

border-radius:12px;

}



.day-content{

max-height:0;

overflow:hidden;

transition:.4s;

}



.day-content.open{

max-height:3000px;

padding-top:15px;

}



.flight{

padding:10px 0;

font-size:16px;

}



.crew{

background:#101a2d;

padding:12px;

border-radius:10px;

margin-top:10px;

}



.crew-change{

background:#382020;

padding:12px;

border-radius:10px;

margin-top:10px;

}




.day-header{

cursor:pointer;

padding:15px;

font-size:20px;

font-weight:bold;

background:#071D49;

border-radius:15px;

}


.day-content{

max-height:0;

overflow:hidden;

transition:.4s;

}


.day-content.open{

max-height:3000px;

padding-top:15px;

}


.flight-card{

padding:15px;

margin-bottom:8px;

background:rgba(0,0,0,.25);

border-radius:12px;

}


.crew{

margin-top:15px;

padding:15px;

border-left:4px solid #F7D117;

background:rgba(255,255,255,.08);

border-radius:10px;

}


.crew-change{

margin-top:15px;

padding:15px;

background:rgba(255,50,50,.15);

border-radius:12px;

}




/* ============================= */
/* CREW TRACKER DARK BLUE + BABY GREEN */
/* ============================= */


body{

background:
linear-gradient(
135deg,
#06152f,
#0b2348,
#041020
);

color:#ffffff;

}



/* Cards */

.day-group,
.day-card,
.profile,
.flight-card,
.search-box,
.menu{


background:

rgba(255,255,255,0.08);


border:

1px solid rgba(255,255,255,.12);


backdrop-filter:

blur(18px);


-webkit-backdrop-filter:

blur(18px);


border-radius:20px;


box-shadow:

0 15px 40px rgba(0,0,0,.35);


}



/* Data */

.day-header{


background:

rgba(15,45,90,.75);


border:

1px solid rgba(255,255,255,.15);


color:white;


border-radius:16px;


}



/* Hover data */

.day-header:hover{

background:

rgba(40,90,150,.8);

}



/* Botões */

button,
.menu-button{


background:

linear-gradient(
135deg,
#b8f2d0,
#8ee6b3
);


color:#06203d;


font-weight:800;


border:none;


border-radius:14px;


padding:13px 22px;


box-shadow:

0 8px 20px rgba(142,230,179,.35);


transition:.25s;


}



button:hover,
.menu-button:hover{


transform:translateY(-3px);


background:#d7ffe8;


}



/* Campo pesquisa */


input{


background:

rgba(255,255,255,.10);


border:

1px solid rgba(255,255,255,.25);


color:white;


border-radius:14px;


}



/* Crew */


.crew{


background:

rgba(4,20,45,.75);


border:

1px solid rgba(184,242,208,.25);


border-radius:16px;


}



/* Troca crew */

.crew-change{


background:

rgba(255,80,80,.15);


border:

1px solid rgba(255,120,120,.35);


border-radius:16px;


}



/* Status offline */

.offline-badge{


background:#b8f2d0;


color:#06203d;


padding:5px 10px;


border-radius:20px;


font-weight:bold;


}





/* REMOVE RYANAIR YELLOW - FINAL THEME */


button,
.menu-button,
.crew-button,
.icloud-btn,
#updateBtn{


background:

linear-gradient(
135deg,
#b8f2d0,
#8ee6b3
)!important;


color:#06203d!important;


border:none!important;


}



button:hover,
.menu-button:hover,
.crew-button:hover{


background:#d7ffe8!important;

}



/* remover amarelo dos títulos */

h1,
h2,
h3{


color:white!important;

}



/* remover bordas amarelas */

.day-header,
input,
.crew,
.search-box{


border-color:

rgba(184,242,208,.25)!important;

}



/* substituir qualquer amarelo restante */

*{

--yellow:#b8f2d0;

}




/* ============================================================
   Autocomplete de número de voo (adicionar/editar) — usa a
   mesma paleta glass + verde bebê já definida acima
   ============================================================ */

.suggestion-box{
  display:none;
  margin-top:6px;
  margin-bottom:10px;
  max-height:260px;
  overflow-y:auto;
  border-radius:16px;
}

.suggestion-box.open{
  display:block;
}

.suggestion-item{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius:14px;
  padding:10px 14px;
  margin-bottom:8px;
  cursor:pointer;
  transition:.15s;
}

.suggestion-item:hover,
.suggestion-item:active{
  background: rgba(184,242,208,.18);
  border-color: rgba(184,242,208,.4);
}

.suggestion-flight{
  font-weight:800;
  color:#ffffff;
}

.suggestion-route{
  color:#d7ffe8;
  font-size:14px;
}

.suggestion-date{
  color:rgba(255,255,255,.7);
  font-size:13px;
}

.suggestion-loading,
.suggestion-empty{
  padding:10px 14px;
  color:rgba(255,255,255,.7);
  font-size:14px;
}

.suggestion-offline-tag{
  display:inline-block;
  background:#b8f2d0;
  color:#06203d;
  font-weight:bold;
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:8px;
}

.clear-btn{
  background: rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.25) !important;
  font-weight:600 !important;
  padding:8px 14px !important;
  border-radius:12px !important;
  font-size:13px !important;
  margin-bottom:10px;
}

.sync-tag{
  font-size:12px;
  margin-top:4px;
  margin-bottom:6px;
  opacity:.9;
}


/* ============================================================
   CREW TRACKER PRO — tema premium (Fase 1)
   Aditivo — não remove nada das classes antigas acima.
   ============================================================ */

:root{
  --pro-bg-1:#020817;
  --pro-bg-2:#06152f;
  --pro-bg-3:#0b2348;
  --pro-neon:#00ff88;
  --pro-neon-2:#39ff88;
  --pro-glass: rgba(255,255,255,0.06);
  --pro-glass-border: rgba(255,255,255,0.10);
  --pro-text-dim: rgba(255,255,255,.65);
}

body.pro{
  margin:0;
  padding-bottom:86px; /* espaço pra barra inferior fixa */
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(0,255,136,.06), transparent 60%),
    linear-gradient(160deg, var(--pro-bg-1), var(--pro-bg-2) 45%, var(--pro-bg-3));
  min-height:100vh;
  color:#ffffff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.pro-container{
  max-width:480px;
  margin:0 auto;
  padding:16px 16px 24px;
}

/* Top bar */

.pro-topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background: rgba(2,8,23,.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--pro-glass-border);
}

.pro-topbar-title{
  font-weight:800;
  font-size:16px;
  letter-spacing:.02em;
}

.pro-back{
  color:#fff;
  text-decoration:none;
  font-size:22px;
  width:28px;
}

.pro-online-dot{
  font-size:14px;
}

/* Greeting */

.pro-greeting h1{
  font-size:26px;
  margin:14px 0 2px;
}

.pro-greeting p{
  color:var(--pro-text-dim);
  margin:0 0 16px;
  font-size:14px;
}

/* Profile card */

.profile-card-pro{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius:20px;
  padding:16px;
  margin-bottom:16px;
  box-shadow: 0 15px 40px rgba(0,0,0,.35);
}

.profile-avatar-pro{
  width:46px;
  height:46px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--pro-neon), #00c46f);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}

.profile-info-pro{ flex:1; min-width:0; }

.profile-name-pro{
  font-weight:800;
  font-size:16px;
}

.profile-role-pro{
  color:var(--pro-text-dim);
  font-size:13px;
}

.profile-arrow-pro{
  font-size:22px;
  color:var(--pro-text-dim);
}

/* Stats row */

.stats-row-pro{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:20px;
}

.stat-tile-pro{
  text-align:center;
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius:16px;
  padding:14px 6px;
}

.stat-value-pro{
  font-size:22px;
  font-weight:800;
  color: var(--pro-neon);
}

.stat-label-pro{
  font-size:11.5px;
  color:var(--pro-text-dim);
  margin-top:2px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Section headers */

.section-header-pro{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:18px 2px 8px;
  font-weight:700;
  font-size:14.5px;
  color:#fff;
}

.ver-todos-pro{
  color: var(--pro-neon);
  font-size:12.5px;
  text-decoration:none;
  font-weight:600;
}

/* Últimos voos */

.flight-summary-card{
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius:16px;
  padding:12px 14px;
  margin-bottom:8px;
}

.flight-summary-date{
  font-size:12px;
  color:var(--pro-text-dim);
  margin-bottom:2px;
}

.flight-summary-numbers{
  font-weight:800;
  font-size:15px;
}

.flight-summary-route{
  font-size:13px;
  color:var(--pro-text-dim);
  margin-top:2px;
}

/* Rotas mais voadas — barras */

.barra-item-pro{
  margin-bottom:10px;
}

.barra-label-pro{
  font-size:13px;
  margin-bottom:4px;
  color:#fff;
}

.barra-trilho-pro{
  background: rgba(255,255,255,.08);
  border-radius:8px;
  height:8px;
  overflow:hidden;
}

.barra-preenchida-pro{
  height:100%;
  background: linear-gradient(90deg, var(--pro-neon), var(--pro-neon-2));
  border-radius:8px;
}

.barra-valor-pro{
  font-size:11.5px;
  color:var(--pro-text-dim);
  margin-top:2px;
  text-align:right;
}

/* Mais voou junto — lista simples */

.simples-item-pro{
  display:flex;
  justify-content:space-between;
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  border-radius:14px;
  padding:10px 14px;
  margin-bottom:6px;
  font-size:14px;
}

.simples-valor-pro{
  color: var(--pro-neon);
  font-weight:700;
}

.simples-grupo-pro{
  margin-bottom:8px;
}

.simples-grupo-pro .simples-item-pro{
  margin-bottom:0;
}

.simples-item-clicavel-pro{
  cursor:pointer;
  user-select:none;
}

.simples-seta-pro{
  display:inline-block;
  color: var(--pro-neon);
  font-size:11px;
  width:12px;
}

.simples-sublista-pro{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 2px;
}

.simples-sublista-pro.aberto{
  padding-top:6px;
}

.simples-sublista-pro .flight-summary-card{
  margin:0 0 6px;
}

.pro-loading, .pro-empty{
  color:var(--pro-text-dim);
  font-size:13.5px;
  padding:8px 2px;
}

.pro-error{
  background: rgba(255,80,80,.12);
  border:1px solid rgba(255,120,120,.35);
  border-radius:14px;
  padding:12px 14px;
  font-size:13.5px;
  margin-top:12px;
}

/* Offline screen */

.offline-hero-pro{
  text-align:center;
  padding:20px 0 6px;
}

.offline-cloud-pro{
  font-size:42px;
}

.offline-status-pro{
  font-weight:700;
  color: var(--pro-neon);
  margin-top:6px;
}

.offline-card-pro{
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius:20px;
  padding:22px 16px;
  text-align:center;
  margin:14px 0 6px;
}

.offline-numero-pro{
  font-size:40px;
  font-weight:800;
  color:#fff;
}

.offline-numero-label-pro{
  color:var(--pro-text-dim);
  font-size:13px;
  margin-bottom:10px;
}

.offline-ultima-sync-pro{
  font-size:12.5px;
  color:var(--pro-text-dim);
  margin-bottom:14px;
}

.btn-atualizar-pro{
  width:100%;
}

.dados-armazenados-pro{
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  border-radius:16px;
  padding:4px 16px;
}

.dado-linha-pro{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.dado-linha-pro:last-child{ border-bottom:none; }

.fila-sync-pro .fila-item-pro{
  background: rgba(255,200,80,.08);
  border:1px solid rgba(255,200,80,.25);
  border-radius:12px;
  padding:10px 14px;
  margin-bottom:6px;
  font-size:13px;
}

/* Bottom nav */

.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:20;
  display:flex;
  background: rgba(2,8,23,.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top:1px solid var(--pro-glass-border);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
}

.nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  text-decoration:none;
  color:var(--pro-text-dim);
  font-size:19px;
}

.nav-item span{
  font-size:10.5px;
  font-weight:600;
}

.nav-item.active{
  color: var(--pro-neon);
}

/* ============================================================
   CALENDÁRIO (Fase 2)
   ============================================================ */

.cal-nav-pro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 2px 14px;
}

.cal-nav-btn-pro{
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  color:#fff;
  width:36px;
  height:36px;
  border-radius:12px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.cal-mes-ano-pro{
  font-weight:800;
  font-size:16px;
  color:#fff;
  text-transform:capitalize;
}

.cal-weekdays-pro{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  margin-bottom:6px;
}

.cal-weekday-pro{
  text-align:center;
  font-size:11px;
  color:var(--pro-text-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.cal-grid-pro{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-bottom:8px;
}

.cal-day-pro{
  position:relative;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: var(--pro-glass);
  border:1px solid transparent;
  font-size:13px;
  color:#fff;
  cursor:pointer;
}

.cal-day-vazio-pro{
  background:transparent;
  cursor:default;
}

.cal-day-num-pro{
  position:relative;
  z-index:1;
}

.cal-day-dot-pro{
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background: var(--pro-neon);
}

.cal-day-pro.tem-voo-pro{
  border-color: var(--pro-glass-border);
  font-weight:700;
}

.cal-day-pro.hoje-pro{
  border-color: var(--pro-neon);
}

.cal-day-pro.selecionado-pro{
  background: linear-gradient(135deg, var(--pro-neon), #00c46f);
  color:#02150c;
  font-weight:800;
}

.cal-day-pro.selecionado-pro .cal-day-dot-pro{
  background:#02150c;
}

.flight-summary-link-pro{
  display:block;
  text-decoration:none;
  color:inherit;
}

.flight-summary-crew-pro{
  font-size:12.5px;
  color:var(--pro-text-dim);
  margin-top:4px;
}

/* ============================================================
   DETALHES DO VOO
   ============================================================ */

.voo-hero-pro{
  text-align:center;
  padding:18px 0 6px;
}

.voo-hero-flight-pro{
  font-size:26px;
  font-weight:800;
  color:#fff;
}

.voo-hero-date-pro{
  font-size:13.5px;
  color:var(--pro-text-dim);
  margin-top:4px;
}

.voo-rota-pro{
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  border-radius:16px;
  padding:16px;
  text-align:center;
  font-size:17px;
  font-weight:700;
  color:#fff;
}

.voo-crew-lista-pro .simples-item-pro{
  justify-content:flex-start;
}

.voo-crew-eu-pro{
  border-color: var(--pro-neon) !important;
}

.voo-acoes-pro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
}

.voo-btn-editar-pro{
  flex:1;
  text-align:center;
  text-decoration:none;
  background: linear-gradient(135deg, var(--pro-neon), #00c46f);
  color:#02150c;
  font-weight:800;
  padding:13px;
  border-radius:14px;
  font-size:14.5px;
}

.voo-status-badge-pro{
  font-size:12.5px;
  color:var(--pro-text-dim);
  white-space:nowrap;
}

/* ============================================================
   BUSCA — agrupamento por dia (recolhível) + troca de crew
   ============================================================ */

.busca-perfil-pro{
  margin:6px 2px 16px;
}

.busca-perfil-nome-pro{
  font-size:20px;
  font-weight:800;
  color:#fff;
}

.busca-perfil-total-pro{
  font-size:13px;
  color:var(--pro-text-dim);
  margin-top:2px;
}

.day-group-pro{
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  border-radius:16px;
  margin-bottom:10px;
  overflow:hidden;
}

.day-group-header-pro{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  color:#fff;
  padding:13px 14px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}

.day-group-seta-pro{
  color: var(--pro-neon);
  font-size:11px;
  width:12px;
}

.day-group-data-pro{
  flex:1;
}

.day-group-badge-pro{
  font-size:11px;
  font-weight:600;
  color:var(--pro-text-dim);
  background: rgba(255,255,255,.08);
  border-radius:20px;
  padding:3px 9px;
}

.day-group-body-pro{
  border-top:1px solid var(--pro-glass-border);
  padding:6px 10px 10px;
}

.flight-item-pro{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.flight-item-pro:last-child{
  border-bottom:none;
}

.flight-item-linha-pro{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.flight-item-numero-pro{
  font-weight:800;
  font-size:14.5px;
  color:#fff;
}

.flight-item-rota-pro{
  font-size:13px;
  color:var(--pro-text-dim);
}

.flight-item-crew-pro{
  font-size:12.5px;
  color:var(--pro-text-dim);
  margin-top:3px;
}

.troca-crew-pro{
  background: rgba(255,190,60,.08);
  border:1px solid rgba(255,190,60,.3);
  border-radius:16px;
  padding:14px;
  margin-bottom:10px;
}

.troca-crew-voo-pro{
  font-weight:800;
  font-size:14px;
  color:#fff;
}

.troca-crew-rota-pro{
  font-weight:400;
  color:var(--pro-text-dim);
  font-size:12.5px;
}

.troca-crew-datas-pro{
  font-size:12px;
  color:var(--pro-text-dim);
  margin:2px 0 10px;
}

.troca-crew-colunas-pro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.troca-crew-coluna-pro{
  font-size:13px;
  color:#fff;
}

.troca-crew-coluna-titulo-pro{
  font-size:11px;
  color:var(--pro-text-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}

.troca-crew-saiu-pro .troca-crew-coluna-titulo-pro{
  color:#ff8080;
}

.troca-crew-entrou-pro .troca-crew-coluna-titulo-pro{
  color: var(--pro-neon);
}

.troca-crew-vazio-pro{
  color:var(--pro-text-dim);
}

/* ============================================================
   ADICIONAR/EDITAR VOO — campos N1-N4, novo (😲) e favorito (⭐)
   ============================================================ */

.crew-campos-pro{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.crew-campo-pro{
  display:flex;
  align-items:center;
  gap:8px;
}

.crew-campo-rotulo-pro{
  flex:0 0 auto;
  width:30px;
  text-align:center;
  font-size:11.5px;
  font-weight:800;
  color: var(--pro-neon);
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  border-radius:8px;
  padding:6px 0;
}

.crew-campo-input-pro{
  flex:1;
  min-width:0;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}

.crew-campo-novo-pro{
  flex:0 0 auto;
  font-size:18px;
}

.crew-campo-fav-pro{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:12px;
  background: var(--pro-glass);
  border:1px solid var(--pro-glass-border);
  color:var(--pro-text-dim);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.crew-campo-fav-pro.favorito-ativo-pro{
  color:#ffd23f;
  border-color:#ffd23f;
  background: rgba(255,210,63,.12);
}