html {
scroll-behavior: smooth;
}

/* =========================
WRAPPER GENERAL
========================= */

.bluetour-diagnostico-wrapper{

max-width:1200px;
margin:0 auto;
padding:20px;

}

/* =========================
TÍTULOS
========================= */

.bluetour-section{
margin-top:50px;
}

.bluetour-section h3{

margin-bottom:18px;
font-size:clamp(20px,2vw,26px);
font-weight:600;

}

/* =========================
BOTONES
========================= */

.bluetour-buttons{

display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:25px;

}

.bluetour-btn{

appearance:none;
border:0;
border-radius:20px;
padding:12px 18px;
font-size:14px;
font-weight:500;
color:#fff;
background:linear-gradient(90deg,#eda91b 0%,#304f73 100%);
cursor:pointer;
transition:opacity .2s;

}

.bluetour-btn:hover{
opacity:0.9;
}

/* =========================
TARJETA RESUMEN DESTINO
========================= */

.bt-diagnostico-card{

background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
padding:22px;
margin-bottom:35px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);

}

.bt-diagnostico-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:20px;

}

.bt-diagnostico-metric strong{

display:block;
font-size:12px;
color:#6b7280;
margin-bottom:4px;

}

.bt-diagnostico-metric span{

font-size:18px;
font-weight:600;
color:#1f2937;

}

.bt-diagnostico-tse{

font-size:24px;
font-weight:700;
color:#1E5BD7;

}

/* =========================
RADAR TSE
========================= */

.bt-radar-wrapper{

width:100%;
max-width:650px;
margin:0 auto;

}

.bt-radar-wrapper canvas{

width:100%!important;
height:auto!important;

}

/* =========================
INDICES CON BARRAS
========================= */

.bt-indices-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:35px;
align-items:start;

}

.bt-indice-bar{

margin-bottom:18px;

}

.bt-indice-bar-label{

font-weight:600;
margin-bottom:6px;

}

.bt-bar-bg{

height:10px;
background:#e5e7eb;
border-radius:6px;
overflow:hidden;

}

.bt-bar-fill{

height:100%;
background:#2c7fb8;
transition:width .4s ease;

}

/* =========================
GRÁFICO IFR
========================= */

.bt-ifr-chart{

width:100%;
max-width:900px;
margin-top:25px;

}

.bt-ifr-chart canvas{

width:100%!important;
height:auto!important;

}

/* =========================
RADIOGRAFÍA DESTINO
========================= */

.bt-radiografia{

margin-top:60px;

}

.bt-radiografia-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

background:#f3f4f6;

padding:25px;

border-radius:8px;

}

.bt-radiografia-grid h4{

text-align:center;
margin-bottom:10px;

}

.bt-radiografia-grid canvas{

width:100%!important;
height:auto!important;

}

/* =========================
DAFO
========================= */

.bt-dafo{

margin-top:70px;

}

.bt-dafo-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}

.bt-dafo-box{

background:#f6f6f6;
padding:20px;
border-radius:8px;
border:1px solid #e5e7eb;
min-height:150px;

}

.bt-dafo-box h4{

margin-top:0;
margin-bottom:10px;
font-size:18px;

}

.bt-dafo-box ul{

margin:0;
padding-left:18px;

}

.bt-dafo-box li{

margin-bottom:6px;
font-size:14px;

}

/* =========================
TABLAS RESPONSIVE
========================= */

.bluetour-diagnostico-wrapper table{

width:100%;
border-collapse:collapse;

}

.bluetour-diagnostico-wrapper th,
.bluetour-diagnostico-wrapper td{

padding:10px;
border-bottom:1px solid #e5e7eb;

}

.bluetour-diagnostico-wrapper th{

text-align:left;
font-weight:600;

}

/* =========================
TABLET
========================= */

@media (max-width:1024px){

.bt-indices-grid{
grid-template-columns:1fr;
}

.bt-dafo-grid{
grid-template-columns:1fr;
}

}

/* =========================
MÓVIL
========================= */

@media (max-width:768px){

.bluetour-diagnostico-wrapper{
padding:15px;
}

.bt-diagnostico-grid{

grid-template-columns:repeat(2,1fr);

}

.bt-diagnostico-tse{
grid-column:span 2;
}

.bluetour-buttons{
flex-direction:column;
}

.bluetour-btn{
width:100%;
text-align:center;
}

.bt-radiografia-grid{
grid-template-columns:1fr;
}

}

/* =========================
MÓVIL PEQUEÑO
========================= */

@media (max-width:480px){

.bt-diagnostico-grid{

grid-template-columns:1fr;

}

.bt-diagnostico-tse{
grid-column:auto;
}

}

.bt-result-table td{
padding:10px 12px;
border-bottom:1px solid #e5e7eb;
}


/* ================================
TARJETA ESTADO SISTEMA TURÍSTICO
================================ */

.bt-tse-card{
max-width:900px;
padding:22px;
border-radius:12px;
margin:20px 0 35px 0;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
display:flex;
flex-direction:column;
gap:6px;
}

.bt-tse-title{
font-size:14px;
letter-spacing:.05em;
text-transform:uppercase;
opacity:.8;
}

.bt-tse-value{
font-size:32px;
font-weight:700;
}

.bt-tse-score{
font-size:14px;
opacity:.8;
}

/* COLORES */

.bt-tse-alto{
background:#e8f6ec;
border-left:6px solid #1a7f37;
}

.bt-tse-medio{
background:#fff8e1;
border-left:6px solid #e3a008;
}

.bt-tse-bajo{
background:#fdeaea;
border-left:6px solid #d93025;
}

.bt-destino-header{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:30px;

margin-bottom:40px;

background:white;

padding:30px;

border-radius:10px;

border:1px solid #E8EEF6;

}

.bt-destino-meta{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:18px;
margin:20px 0;
}

.bt-destino-descripcion{

font-size:15px;

color:#4A5568;

}
/* =========================
GALERÍA DESTINO
========================= */

.bt-destino-galeria{

display:grid !important;

grid-template-columns:repeat(auto-fill,minmax(140px,1fr));

gap:12px;

margin-top:15px;

}

.bt-destino-galeria a{

display:block;

width:100%;

height:120px;

overflow:hidden;

border-radius:6px;

}

.bt-destino-galeria img{

width:100% !important;

height:100% !important;

object-fit:cover;

display:block;

cursor:pointer;

transition:transform .2s ease;

}

.bt-destino-galeria img:hover{

transform:scale(1.06);

}

/* =========================
LIGHTBOX
========================= */

.bt-lightbox-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.8);

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

}

.bt-lightbox-overlay img{

max-width:90%;

max-height:90%;

border-radius:8px;

}

.bt-analisis-recursos{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

margin-top:25px;

}

.bt-indicador{

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:10px;

padding:25px;

box-shadow:0 4px 10px rgba(0,0,0,0.05);

}

.bt-descripcion{

font-size:14px;

color:#555;

margin-bottom:12px;

}

.bt-valor{

display:inline-block;

padding:6px 14px;

border-radius:20px;

font-weight:700;

}

/* =========================
TABLA RECURSOS
========================= */

.bt-result-table{

width:100%;
border-collapse:collapse;
margin-top:20px;
background:white;
border-radius:8px;
overflow:hidden;

}

.bt-result-table thead{

background:#f3f4f6;

}

.bt-result-table th{

text-align:left;
font-weight:600;
padding:12px 14px;
font-size:14px;

}

.bt-result-table td{

padding:12px 14px;
border-top:1px solid #e5e7eb;
font-size:14px;

}

/* columna valores */

.bt-result-table td:nth-child(2),
.bt-result-table td:nth-child(3){

text-align:center;

}

/* =========================
BADGES SEMÁFORO
========================= */

.bt-badge{

display:inline-block;
padding:4px 12px;
border-radius:16px;
font-weight:600;
font-size:13px;

}

/* niveles */

.bt-clas-muy-alta{

background:#166534;
color:white;

}

.bt-clas-alta{

background:#bbf7d0;
color:#065f46;

}

.bt-clas-media{

background:#fde68a;
color:#92400e;

}

.bt-clas-baja{

background:#fecaca;
color:#991b1b;

}

.bt-clas-muy-baja{

background:#7f1d1d;
color:white;

}

/* potencial */

.bt-clas-muy-alto{

background:#166534;
color:white;

}

.bt-clas-alto{

background:#bbf7d0;
color:#065f46;

}

.bt-clas-medio{

background:#fde68a;
color:#92400e;

}

.bt-clas-bajo{

background:#fecaca;
color:#991b1b;

}

.bt-clas-muy-bajo{

background:#7f1d1d;
color:white;

}

.bt-indices-destino{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
margin-top:20px;

}

.bt-indice-card{

background:#ffffff;
border:1px solid #e5e7eb;
border-radius:10px;
padding:22px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);

}

.bt-indice-card h4{

margin-bottom:10px;

}

.bt-descripcion{

color:#555;
font-size:14px;
margin-bottom:12px;

}

.bt-indice-interpretacion{

margin-top:10px;
font-size:15px;

}
.bt-diagnostico-nav{

position:sticky;
top:20px;

display:flex;
flex-wrap:wrap;
gap:10px;

background:#ffffff;
border:1px solid #e5e7eb;
border-radius:10px;

padding:12px 16px;
margin-bottom:30px;

box-shadow:0 4px 10px rgba(0,0,0,0.05);

z-index:20;

}

.bt-diagnostico-nav a{

text-decoration:none;
font-weight:500;
color:#2c7fb8;

padding:6px 10px;
border-radius:6px;

}

.bt-diagnostico-nav a:hover{

background:#f1f5f9;

}

.bt-sens-alta{
background:#f8d7da;
color:#a61b1b;
}

.bt-sens-media{
background:#f6e08d;
color:#9a6700;
}

.bt-sens-baja{
background:#b7ebc6;
color:#146c43;
}

/* =========================
SECCIONES DEL INFORME
========================= */
.bt-section{

    margin-top:70px;

    position:relative;

    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:12px;

    padding:40px 45px 40px 60px;
    margin-bottom:60px;

    box-shadow:0 6px 18px rgba(0,0,0,0.06);

}

.bt-section::before{

    content:"";
    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:6px;
    border-radius:6px 0 0 6px;

}

.bt-section-blue::before{
    background:#2c7fb8;
}

.bt-section-green::before{
    background:#59a14f;
}

.bt-section-orange::before{
    background:#f28e2b;
}

.bt-section-red::before{
    background:#e15759;
}

/* TITULO SECCIÓN */

.bt-section-title{

font-size:32px;
font-weight:700;
margin-bottom:10px;
color:#1f2937;

display:flex;
align-items:center;
gap:10px;

}

/* SUBTITULO / DESCRIPCIÓN */

.bt-section-description{

font-size:15px;
color:#6b7280;
max-width:850px;
margin-bottom:25px;

}



.bt-section{

    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:12px;

    padding:40px 45px;
    margin-bottom:60px;

    box-shadow:0 6px 18px rgba(0,0,0,0.06);

    position:relative;

}



.bt-section-description{

    color:#6b7280;
    font-size:16px;
    line-height:1.6;

    max-width:900px;
    margin-bottom:35px;

}

.bt-section{
    border-left:6px solid #e5e7eb;
}

.bt-section-blue{ border-left-color:#2c7fb8; }
.bt-section-green{ border-left-color:#59a14f; }
.bt-section-orange{ border-left-color:#f28e2b; }
.bt-section-red{ border-left-color:#e15759; }