/* Fontes carregadas via HTML link no header para performance */

:root {
    --primary: #1b4332;
    --secondary: #2d6a4f;
    --accent: #b7e4c7;
    --text: #1a1a1a;
    --text-light: #474747;
    --bg: #f1f8e9;
    --white: #ffffff;
    --shadow: 0 6px 16px rgba(0,0,0,0.12);
    --radius: 12px;
}

body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.4; margin: 0; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* Hero Section Search */
.hero-search { 
    background: var(--primary); 
    padding: 40px 0; 
    margin-bottom: 40px;
    color: var(--white);
}

/* Search Form */
.search-form {
    display: flex;
    gap: 10px;
    background: var(--accent);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-search {
    background: var(--secondary);
    color: white;
    border: none;
    padding: 0 30px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    min-height: 48px;
    transition: background 0.3s;
}

.btn-search:hover { background: var(--primary); }

@media (max-width: 768px) {
    .search-form {
        flex-direction: column;
    }
    .btn-search {
        padding: 12px;
    }
}

/* Grid ajustado para lista de cards horizontais */
.hotel-grid { display: flex; flex-direction: column; gap: 30px; }

.hotel-card { 
    background: var(--white); 
    border-radius: var(--radius); 
    overflow: hidden; 
    box-shadow: var(--shadow); 
    border: 1px solid #e7e7e7; 
    display: flex; 
    flex-direction: column;
    transition: border-color 0.3s ease;
}
.hotel-card.premium { border: 2px solid var(--accent); }
.hotel-card:hover { border-color: var(--secondary); }

.hotel-card-main { display: flex; flex-wrap: wrap; }

.hotel-column-left { flex: 1; min-width: 320px; display: flex; flex-direction: column; background: #fafafa; }

/* Skeleton Screen Animation */
@keyframes skeleton-pulse {
    0% { background-color: #eee; }
    50% { background-color: #ddd; }
    100% { background-color: #eee; }
}

.skeleton { animation: skeleton-pulse 1.5s infinite ease-in-out !important; }

.hotel-card-photo { width: 100%; height: 360px; background: #eee; padding: 15px; box-sizing: border-box; overflow: hidden; border-radius: 8px; }
.hotel-card-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: transform 0.3s ease-in-out; }
.hotel-card-photo img:hover { transform: scale(1.05); }

.hotel-card-photo a { text-decoration: none !important; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }

/* Estilo para quando a imagem falha */
.img-placeholder {
    display: none; width: 100%; height: 100%; 
    background: #f4f4f4; color: #ccc; flex-direction: column; 
    text-decoration: none; align-items: center; justify-content: center; 
    border-radius: 8px;
}
.img-placeholder i { font-size: 3rem; margin-bottom: 10px; }

.hotel-card-info { flex: 1.5; padding: 15px; min-width: 300px; display: flex; flex-direction: column; height: 360px; overflow-y: auto; box-sizing: border-box; }
.hotel-card-info h3 { margin: 0 0 10px 0; color: var(--text); font-size: 1.4rem; font-weight: 700; }

/* Responsividade para Celulares */
@media (max-width: 768px) {
    .hotel-column-left, .hotel-card-info {
        min-width: 100%;
        height: auto;
    }
    .hotel-card-photo {
        height: 250px;
    }
    .hotel-card-info { overflow-y: visible; order: 1; padding: 20px; }
    .hotel-column-left { order: 2; }
}

.comodidades { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.comodidade-item { background: #F1F8E9; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; color: var(--text-light); border: 1px solid #d4dfc7; display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.12); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.comodidade-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); border-color: var(--secondary); cursor: default; }

.hotel-card-gallery { display: flex; gap: 10px; padding: 15px 20px; background: #fafafa; border-top: 1px solid #eee; overflow-x: auto; width: 100%; box-sizing: border-box; }
.thumb-img { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: transform 0.3s ease-in-out, border-color 0.2s; }
.thumb-img:hover { border-color: var(--secondary); transform: scale(1.05); }

.btn-detalhes { 
    display: block;
    background: var(--secondary); 
    color: var(--white); 
    padding: 10px 20px; 
    text-decoration: none; 
    border-radius: 6px; 
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.3s;
    text-align: center;
    width: fit-content;
}
.btn-detalhes:hover { background: var(--primary); }

/* Admin Gallery Sortable */
.admin-gallery { display: flex; flex-wrap: wrap; gap: 15px; margin: 15px 0; padding: 10px; background: #eee; border-radius: 8px; }
.gallery-item { position: relative; width: 120px; height: 100px; cursor: move; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.2s; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item:first-child { border-color: #f1c40f; }
.gallery-item:first-child::after { content: 'CAPA'; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(241, 196, 15, 0.9); color: #000; font-size: 10px; font-weight: bold; text-align: center; }
.gallery-item .remove-btn { position: absolute; top: -8px; right: -8px; background: #e74c3c; color: #fff; width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; font-size: 12px; font-weight: bold; line-height: 22px; text-align: center; }
.gallery-item.over { border-style: dashed; border-color: #3498db; transform: scale(1.05); }

.upload-placeholder { width: 120px; height: 100px; border: 2px dashed #bbb; display: flex; align-items: center; justify-content: center; color: #888; cursor: pointer; border-radius: 4px; font-size: 24px; background: #fdfdfd; }
.upload-placeholder:hover { background: #f5f5f5; border-color: #3498db; color: #3498db; }

.btn { background: #27ae60; color: white; padding: 5px 10px; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 14px; }

/* Estilos para Filtros de Acesso Admin */
.btn-mini {
    background: #e0e0e0;
    color: #333;
    padding: 4px 8px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 11px;
    transition: background 0.2s;
}
.btn-mini:hover { background: #ccc; }

/* Admin Tables */
table { width: 100%; border-collapse: collapse; margin-top: 0px; }
th, td { padding: 3px 5px; border: 1px solid #bdc3c7; text-align: left; font-size: 0.9rem; }
th { background: #cbd5e1; }

/* Estilo Desktop App para Tabelas com Scroll */
.table-app-wrapper {
    height: 450px; /* Altura fixa estilo aplicativo */
    overflow-y: auto;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    background: #fff;
    position: relative;
}

.table-app-fixed {
    width: 100%;
    border-collapse: separate; /* Necessário para sticky header funcionar perfeitamente com bordas */
    border-spacing: 0;
    border-left: 1px solid #bdc3c7;
}

.table-app-fixed th, 
.table-app-fixed td {
    border: none;
    border-right: 1px solid #bdc3c7;
    border-bottom: 1px solid #bdc3c7;
}

.table-app-fixed thead th {
    position: sticky;
    top: 0;
    background: #2980b9;
    color: #ffffff;
    z-index: 10;
    /* Sela apenas a fresta do topo sem alterar o tamanho da célula ou das bordas físicas */
    box-shadow: inset 0 1px 0 #2980b9;
}

/* Estilo para os cards de gráficos de acesso */
.chart-card {
    background: #ffffff;
    padding: 20px;
    padding-top: 0px; /* Mantém o padding-top específico para o título do gráfico */
    border-radius: 8px;
    box-shadow: var(--shadow);
    flex: 1;
    min-width: 300px;
    border: 1px solid #bdc3c7;
}