:root{--bg:#edf3f1;--ink:#0c2b33;--aqua:#79d9d8;--muted:#667d80}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,sans-serif}header{background:#081f27;color:white;padding:17px max(3%,24px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}a{color:inherit;text-decoration:none}header nav{display:flex;gap:17px;align-items:center;flex-wrap:wrap;font-size:13px}header nav a:hover{color:var(--aqua)}header form{display:inline}.logo{font-size:23px;font-weight:850;letter-spacing:-1px}.logo span{color:var(--aqua)}.logo small{display:block;font-size:8px;letter-spacing:1.5px}main{max-width:1120px;margin:48px auto;padding:0 22px;min-height:68vh}h1{font-size:clamp(26px,4vw,44px);line-height:1.2;letter-spacing:-.04em;margin-bottom:10px}h2{font-size:23px}p{color:var(--muted)}section.panel,.auth,.card{background:#fff;padding:28px;border:1px solid #d9e6e3;border-radius:12px;margin:22px 0}label{display:block;font-weight:650;font-size:13px;margin:16px 0}input,textarea,select{display:block;width:100%;border:1px solid #bfcfcd;border-radius:7px;padding:12px 13px;color:#17353c;background:#fff;margin-top:7px;font:inherit}textarea{min-height:92px;resize:vertical}input[type=checkbox]{display:inline;width:auto}button,.button{display:inline-block;background:#0a343c;color:#fff;border:0;border-radius:7px;padding:12px 20px;font-weight:700;cursor:pointer;font:inherit}button:hover,.button:hover{background:#16626b}.secondary{background:#34545b;font-size:12px;padding:8px 12px}.hint{font-size:12px;color:#637b80}.preview{width:220px;height:115px;max-width:100%;object-fit:cover;border-radius:7px;display:block;margin:10px 0}fieldset{border:0;padding:0;margin:0}.notice{border:1px solid #7cb8aa;background:#e4f7f2;padding:12px 18px;border-radius:7px;color:#164a44}.error{color:#b43333}.auth{max-width:520px;margin:5vh auto}.row{display:grid;grid-template-columns:1fr 1fr;gap:22px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}footer{text-align:center;color:#81969b;font-size:12px;padding:30px}@media(max-width:680px){.row{grid-template-columns:1fr}header nav{gap:11px}section.panel,.card{padding:18px}}

/* LARGURA DO PAINEL ADMINISTRATIVO */
main {
    max-width: 1400px;
}

/* CARDS EM DUAS COLUNAS */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

/* AJUSTES DOS CARDS */
.cards-grid .card {
    margin: 0;
    min-width: 0;
    height: 100%;
}

/* CAMPOS */
.cards-grid input,
.cards-grid textarea,
.cards-grid select {
    width: 100%;
}

/* FOTOGRAFIAS */
.cards-grid .preview {
    max-width: 100%;
    object-fit: cover;
}

/* RESPONSIVIDADE */
@media (max-width: 900px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    main {
        padding: 0 16px;
    }
}

/* ==========================================
   LAGOPRO ADMIN — NOVO REGISTO
   BOTÃO FLUTUANTE + PAINEL LATERAL
========================================== */

/* Área principal */
main {
    max-width: 1400px;
}

/* Cartões em duas colunas */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.cards-grid .card {
    margin: 0;
    min-width: 0;
}

/* ==========================================
   BOTÃO FLUTUANTE
========================================== */

.floating-add {
    position: fixed;
    right: 30px;
    bottom: 30px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 62px;
    height: 62px;

    padding: 0;
    border: 1px solid rgba(121, 217, 216, .35);
    border-radius: 50%;

    background: #0a343c;
    color: #79d9d8;

    font-size: 36px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
    z-index: 1000;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .18),
        0 0 0 5px rgba(10, 52, 60, .06);

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.floating-add:hover {
    background: #16626b;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.floating-add:active {
    transform: scale(.95);
}

.floating-add:focus-visible {
    outline: 3px solid #79d9d8;
    outline-offset: 4px;
}

/* ==========================================
   PAINEL LATERAL
========================================== */

.record-dialog {
    position: fixed;
    inset: 0 0 0 auto;

    width: min(540px, 100%);
    height: 100dvh;
    max-height: 100dvh;
    max-width: 100%;

    margin: 0;
    padding: 0;

    border: none;
    border-radius: 18px 0 0 18px;

    background: #edf3f1;
    color: #0c2b33;

    overflow-y: auto;

    box-shadow: -15px 0 50px rgba(0, 0, 0, .2);
}

.record-dialog:not([open]) {
    display: none;
}

.record-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: slideInPanel .3s ease both;
}

.record-dialog::backdrop {
    background: rgba(3, 22, 28, .68);
    backdrop-filter: blur(5px);
}

/* Cabeçalho do painel */
.record-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 26px 30px;

    background: #081f27;
    color: white;
}

.dialog-eyebrow {
    display: block;
    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #79d9d8;
}

.record-dialog-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: white;
}

/* Botão fechar */
.dialog-close {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;

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

    font-size: 26px;
    cursor: pointer;
}

.dialog-close:hover {
    background: rgba(255, 255, 255, .18);
}

/* Conteúdo do painel */
.record-dialog-body {
    padding: 26px;
    flex: 1;
}

.record-dialog .new-record-card {
    display: block;
    margin: 0;
    padding: 24px;
}

.record-dialog .record-content {
    display: block;
}

/* Imagem no painel lateral */
.record-dialog .record-image {
    margin-top: 16px;
}

.record-dialog .record-image .preview {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 9px;
}

/* Campos */
.record-dialog input,
.record-dialog textarea,
.record-dialog select {
    width: 100%;
}

.record-dialog textarea {
    min-height: 100px;
    resize: vertical;
}

/* Botões do formulário */
.record-dialog .record-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #d9e6e3;
}

/* Animação de abertura */
@keyframes slideInPanel {
    from {
        opacity: .6;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================
   RESPONSIVIDADE
========================================== */

@media (max-width: 900px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .floating-add {
        right: 20px;
        bottom: 20px;
        width: 54px;
        height: 54px;
        font-size: 32px;
    }

    .record-dialog {
        width: 100%;
        border-radius: 0;
    }

    .record-dialog-header {
        padding: 22px 18px;
    }

    .record-dialog-header h2 {
        font-size: 22px;
    }

    .record-dialog-body {
        padding: 16px;
    }

    .record-dialog .new-record-card {
        padding: 18px;
    }
}

/* Respeita preferência por menos animações */
@media (prefers-reduced-motion: reduce) {
    .record-dialog[open] {
        animation: none;
    }

    .floating-add {
        transition: none;
    }
}
/* LAGOPRO — cartões de edição compactos (acrescentar ao fim de admin.css) */
.record-content.has-image {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.record-content.no-image { display: block; }
.record-fields, .record-side { min-width: 0; }
.record-fields { display: flex; flex-direction: column; gap: 10px; }
.record-fields .record-field { display: block; margin: 0; min-width: 0; }
.fields-inline {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(72px, 1fr);
    gap: 10px;
    align-items: end;
}
.record-fields input, .record-fields textarea {
    width: 100%;
    margin-top: 5px;
    padding: 9px 10px;
    font-size: 13px;
}
.record-fields textarea { min-height: 78px; resize: vertical; }
.record-fields .field-title textarea { min-height: 56px; }
.record-side { display: flex; flex-direction: column; gap: 10px; }
.record-image, .record-image label { min-width: 0; margin: 0; }
.record-image .preview {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 145px;
    object-fit: cover;
    border-radius: 8px;
    margin: 7px 0;
}
.record-image input[type="file"] { width: 100%; min-width: 0; padding: 7px 5px; font-size: 11px; }
.record-image .hint { display: block; margin-top: 3px; font-size: 11px; }
.record-side .record-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
}
.record-actions button { min-width: 0; padding: 10px 7px; font-size: 12px; }
.record-content.no-image + .record-actions { margin-top: 14px; }
/* Formulário da janela lateral: dar espaço para os campos */
.record-dialog .record-content.has-image { grid-template-columns: 1fr; gap: 14px; }
.record-dialog .record-image { margin-top: 0; }
.record-dialog .record-actions { padding: 0; margin: 0; border: 0; }
/* Se o cartão ficar estreito, empilhar somente o seu interior */
@media (max-width: 1200px) {
    .cards-grid .record-content.has-image { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .fields-inline { grid-template-columns: minmax(0, 2fr) minmax(72px, 1fr); }
}

/* ==========================================
   LAGOPRO ADMIN
   CONTEÚDOS DO WEBSITE — LAYOUT COMPACTO
========================================== */

/* Secções em duas colunas */
.content-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

/* Cartões */
.content-sections .content-panel {
    min-width: 0;
    margin: 0;
    padding: 24px;
}

/* Cabeçalho dos cartões */
.content-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e0e9e7;
}

.content-panel-heading h2 {
    margin: 2px 0 0;
    font-size: 23px;
}

.content-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: #658c90;
    letter-spacing: 1.2px;
}

.content-field-count {
    white-space: nowrap;
    color: #69878b;
    font-size: 12px;
}

/* Campos à esquerda e fotografias à direita */
.site-section-layout.with-photos {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.site-section-layout.without-photos {
    display: block;
}

.site-section-fields,
.site-section-images {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Campos do formulário */
.site-field {
    display: block;
    margin: 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 650;
}

.site-field > span:first-child {
    display: block;
    margin-bottom: 5px;
}

.site-field input[type="text"],
.site-field textarea,
.rich-editor {
    width: 100%;
    margin: 0;
    padding: 10px 11px;
    border: 1px solid #bfcfcd;
    border-radius: 7px;
    background: #fff;
    color: #17353c;
    font: 400 13px/1.5 system-ui, sans-serif;
    text-align: left;
}

/* Áreas de texto */
.site-field textarea {
    min-height: 82px;
    resize: vertical;
    white-space: pre-wrap;
}

/* Ferramentas de formatação */
.rich-tools {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 0 0 5px;
}

.format-tool {
    min-width: 31px;
    padding: 4px 7px;
    background: #e8f1f0;
    color: #0c2b33;
    border: 1px solid #cfdfdc;
    font-size: 12px;
}

.rich-help {
    font-size: 10px;
    color: #779094;
    font-weight: 400;
    margin-left: 5px;
}

/* Editor visual */
.rich-editor {
    display: block;
    min-height: 82px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    outline-offset: 2px;
}

.rich-editor:focus {
    outline: 2px solid #79d9d8;
}

/* Fotografias */
.site-image-preview {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin: 4px 0 9px;
}

.site-image-field input[type="file"] {
    width: 100%;
    font-size: 11px;
    padding: 8px;
    margin: 0;
}

.site-image-field small {
    display: block;
    margin-top: 6px;
    color: #697e83;
    font-weight: 400;
    line-height: 1.45;
}

/* Botão Guardar por secção */
.content-panel-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #e0e9e7;
}

.content-panel-actions button {
    font-size: 13px;
    padding: 10px 16px;
}

/* ==========================================
   RESPONSIVIDADE
========================================== */

/* Ecrãs médios */
@media (max-width: 1250px) {
    .content-sections {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 680px) {
    .content-sections .content-panel {
        padding: 18px;
    }

    .site-section-layout.with-photos {
        grid-template-columns: 1fr;
    }

    .site-image-preview {
        height: 180px;
    }
}
/* MENU SUPERIOR FIXO — LAGOPRO ADMIN */

body > header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;

    background: #081f27;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Evita que âncoras fiquem escondidas pelo menu */
html {
    scroll-padding-top: 90px;
}
/* BOTÃO VOLTAR AO WEBSITE — LOGIN */

.back-to-site {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 7px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition: 0.25s ease;
}

.back-to-site:hover {
    background: rgba(121, 217, 216, 0.12);
    border-color: #79d9d8;
    color: #79d9d8;
}

@media (max-width: 600px) {
    .back-to-site {
        padding: 9px 12px;
        font-size: 12px;
    }
}