/*
Theme Name: Pikki
Theme URI: https://pikki.pt
Author: Consulta Digital
Version: 1.0
Text Domain: pikki
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =====================================================
   ROOT
===================================================== */

:root{

    --cor-primaria:#2563EB;
    --cor-primaria-hover:#1D4ED8;

    --cor-sucesso:#10B981;
    --cor-aviso:#F59E0B;
    --cor-erro:#EF4444;

    --cor-texto:#0F172A;
    --cor-texto-secundario:#64748B;

    --cor-card:#FFFFFF;

    --cor-borda:#E2E8F0;

    --radius:24px;

    --shadow-sm:0 4px 12px rgba(15,23,42,.05);
    --shadow-md:0 8px 25px rgba(15,23,42,.08);
    --shadow-lg:0 20px 40px rgba(15,23,42,.12);
}

/* =====================================================
   RESET
===================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#F8FAFC;

    color:#0F172A;

    min-height:100vh;

    line-height:1.5;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

/* =====================================================
   PAGE
===================================================== */

.pikki-page{

    width:min(1400px,95%);

    margin:auto;

    padding:30px 0 60px;
}

/* =====================================================
   HEADER
===================================================== */

.pikki-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    flex-wrap:wrap;
}

.pikki-header h1{

    font-size:42px;

    font-weight:800;

    color:#0F172A;

    letter-spacing:-1px;
}

.pikki-header p{

    color:#64748B;

    font-size:16px;
}

/* =====================================================
   CARDS
===================================================== */

.pikki-card{

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:24px;

    box-shadow:var(--shadow-md);

    overflow:hidden;
}

/* =====================================================
   TABLES
===================================================== */

.pikki-table{

    width:100%;

    border-collapse:collapse;
}

.pikki-table thead{

    background:rgba(255,255,255,.04);
}

.pikki-table th{

    text-align:center;

    padding:18px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#94A3B8;

    vertical-align:middle;
}

.pikki-table td{

    text-align:center;

    padding:18px 16px;

    font-size:14px;

    vertical-align:middle;

    border:none;
}

.pikki-table tbody tr{

    transition:.25s ease;
}

.pikki-table tbody tr:hover{

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

    transform:translateY(-2px);

    box-shadow:
    0 10px 30px rgba(15,23,42,.05);
}

.empresa-row{

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

    backdrop-filter:blur(20px);

    border-bottom:
    1px solid #E2E8F0;
}

.empresa-row:first-child{

    border-top:
    1px solid #E2E8F0;
}

.empresa-card{

    display:flex;

    align-items:center;

    gap:16px;
}

.empresa-nome{

    font-size:26px;

    font-weight:700;

    color:#0F172A;
}

.empresa-responsavel{

    font-size:14px;

    color:#64748B;

    margin-top:4px;
}

.logo-placeholder{

    width:54px;

    height:54px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    background:
    linear-gradient(
        135deg,
        #DBEAFE,
        #BFDBFE
    );

    color:#1D4ED8;
}

.empresa-section-title{

    margin:48px 0 24px;

    padding-bottom:12px;

    border-bottom:1px solid #E2E8F0;

    font-size:18px;

    font-weight:700;

    color:#0F172A;

    letter-spacing:.3px;

}

/* =====================================================
   BUTTONS
===================================================== */

.btn{

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

    height:46px;

    padding:0 24px;

    border:none;

    border-radius:25px;

    cursor:pointer;

    font-size:14px;
    font-weight:500;

    letter-spacing:.2px;

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

    text-decoration:none;

    position:relative;
}

/* =========================
   BOTÃO PRINCIPAL
========================= */

.btn-primary{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #1F2937,
        #334155
    );

    box-shadow:
        0 18px 40px rgba(15,23,42,.18),
        0 8px 20px rgba(15,23,42,.12);
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 25px 50px rgba(15,23,42,.25),
        0 12px 30px rgba(15,23,42,.18);
}

/* =========================
   BOTÃO SECUNDÁRIO
========================= */

.btn-secondary{

    color:#334155;

    background:#FFFFFF;

    border:1px solid #DCE3EC;

    box-shadow:
        0 10px 25px rgba(15,23,42,.06);
}

.btn-secondary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 35px rgba(15,23,42,.10);
}

/* =========================
   SUCESSO
========================= */

.btn-success{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #556B2F,
        #6B8E23
    );

    box-shadow:
        0 18px 40px rgba(85,107,47,.18);
}

.btn-success:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 35px rgba(85,107,47,.25);

}

/* =========================
   WARNING
========================= */

.btn-warning{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #C47B2A,
        #E0A458
    );
}

/* =========================
   DANGER
========================= */

.btn-danger{

    color:#FFFFFF;

    background:
    linear-gradient(
        135deg,
        #DC2626,
        #EF4444
    );
}

.btn-danger:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 35px rgba(220,38,38,.25);

}

/* =====================================================
   BADGES
===================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}

.badge-success{

    background:rgba(34,197,94,.15);

    color:#15803D;
}

.badge-warning{

    background:rgba(245,158,11,.15);

    color:#B45309;
}

.badge-danger{

    background:rgba(239,68,68,.15);

    color:#B91C1C;
}

.badge-secondary{

    background:rgba(148,163,184,.15);

    color:#475569;
}

.badge-info{

    background:rgba(59,130,246,.15);

    color:#1D4ED8;
}

.badge-concluido{

    background:rgba(5,150,105,.18);

    color:#065F46;

}

.servico-empresa{

    margin-top:6px;

    font-size:14px;

    font-weight:600;

    color:#64748B;

}



/* =====================================================
   FORMS
===================================================== */

.form-row{

    margin-bottom:18px;
}

.form-row label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#334155;
}

.form-row input,
.form-row select,
.form-row textarea{

    width:100%;

    padding:14px 16px;

    border-radius:14px;

    border:1px solid #CBD5E1;

    background:#FFFFFF;

    color:#0F172A;

    font-size:14px;
}

.form-row input::placeholder,
.form-row textarea::placeholder{

    color:#64748B;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{

    outline:none;

    border-color:var(--cor-primaria);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.form-row textarea{

    resize:vertical;

    min-height:90px;
}

/* =====================================================
   MODALS
===================================================== */

.modal{

    display:none;

    align-items:center;

    justify-content:center;

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.75);

    backdrop-filter:blur(8px);

    z-index:99999;

    overflow:auto;

    padding:30px;
}

.modal-content{

    width:100%;
    max-width:1000px;

    max-height:85vh;

overflow:hidden;

background:#FFFFFF;

border-radius:32px;

padding:40px 40px 30px;

    box-shadow:
        0 30px 80px rgba(15,23,42,.18);

    position:relative;

    margin:auto;

    scrollbar-width:thin;
}

.modal-content h2{

    margin-bottom:25px;

    font-size:28px;

    font-weight:700;
}

.modal{

    display:none;

    position:fixed;

    inset:0;

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

    padding:40px;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(8px);

    z-index:9999;
}

.modal-content form{

    max-height:calc(85vh - 120px);

    overflow-y:auto;

    padding-right:12px;
}

.modal-content form::-webkit-scrollbar{

    width:8px;
}

.modal-content form::-webkit-scrollbar-track{

    background:transparent;
}

.modal-content form::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:20px;
}

/* =====================================================
   MODAL EDITAR SERVIÇO
===================================================== */

#modalEditarServico .modal-content{

    width:min(1200px,95vw);

    max-width:1200px;
}

#modalEditarServico form{

    display:flex;

    flex-direction:column;

    gap:30px;
}

#modalEditarServico .form-grid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:20px;
}

#modalEditarServico .form-group{

    display:flex;

    flex-direction:column;

    gap:8px;
}

#modalEditarServico .form-group-full{

    grid-column:1 / -1;
}

#modalEditarServico label{

    font-size:14px;

    font-weight:600;

    color:#334155;
}

#modalEditarServico input,
#modalEditarServico select,
#modalEditarServico textarea{

    width:100%;

    min-height:48px;

    padding:12px 14px;

    border:1px solid #CBD5E1;

    border-radius:12px;

    background:#FFF;

    font-size:14px;
}

#modalEditarServico textarea{

    min-height:140px;

    resize:vertical;
}

#modalEditarServico .gps-selector{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}

#modalEditarServico .gps-info{

    display:flex;

    gap:30px;

    color:#64748B;

    font-size:14px;
}

#modalEditarServico .gps-preview{

    width:100%;

    height:220px;

    border:1px dashed #CBD5E1;

    border-radius:20px;

    background:#F8FAFC;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#94A3B8;

    margin-top:15px;
}

#modalEditarServico .modal-footer{

    display:flex;

    justify-content:flex-end;

    padding-top:25px;

    border-top:1px solid #E2E8F0;
}

@media(max-width:1024px){

    #modalEditarServico .form-grid{

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

}

@media(max-width:768px){

    #modalEditarServico .form-grid{

        grid-template-columns:1fr;
    }

}
/* =====================================================
   ACTIONS
===================================================== */

.acoes{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

/* =====================================================
   EQUIPA SELECTOR
===================================================== */

.equipa-selector{

    grid-column:1 / -1;

    width:100%;

    display:grid;

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

    gap:16px;
}

.equipa-item{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 24px;

    min-height:110px;

    border:1px solid #E2E8F0;

    border-radius:20px;

    background:#F8FAFC;

    transition:.25s ease;

    cursor:pointer;
}

.equipa-item:hover{

    border-color:#CBD5E1;

    transform:translateY(-1px);
}

.equipa-nome{

    font-size:16px;

    font-weight:700;

    color:#0F172A;
}

.equipa-meta{

    margin-top:4px;

    font-size:13px;

    color:#64748B;
}

.equipa-switch{

    position:relative;
}

.equipa-switch input{

    display:none;
}

.equipa-switch span{

    display:block;

    width:52px;

    height:30px;

    border-radius:999px;

    background:#CBD5E1;

    position:relative;

    transition:.25s;
}

.equipa-switch span:before{

    content:'';

    position:absolute;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#FFF;

    left:3px;

    top:3px;

    transition:.25s;
}

.equipa-switch input:checked + span{

    background:#2563EB;
}

.equipa-switch input:checked + span:before{

    left:25px;
}

/* =====================================================
   DISPOSITIVOS
===================================================== */

.dispositivos-selector{

    display:grid;

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

    gap:16px;

    width:100%;
}

.dispositivo-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 24px;

    min-height:110px;

    border:1px solid #E2E8F0;

    border-radius:20px;

    background:#F8FAFC;

    transition:.25s ease;

    cursor:pointer;
}

.dispositivo-item:hover{

    border-color:#CBD5E1;

    transform:translateY(-1px);
}

.form-group-full{

    grid-column:1 / -1;

}

.equipa-acoes{

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid #E2E8F0;
}

.equipa-info{

    display:flex;

    flex-direction:column;

    gap:6px;
}

.equipa-nome{

    font-size:18px;

    font-weight:700;
}

.equipa-meta{

    font-size:14px;

    color:#64748B;
}

/* =====================================================
   AVATARS / LOGOS
===================================================== */

.avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;
}

.logo-empresa{

    width:50px;

    height:50px;

    object-fit:contain;

    background:#fff;

    border-radius:12px;

    padding:5px;

    border:1px solid #E2E8F0;
}

/* =====================================================
   ESTADOS
===================================================== */

.estado-ativo{

    color:#10B981;

    font-weight:700;
}

.estado-inativo{

    color:#EF4444;

    font-weight:700;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .pikki-page{

        width:95%;

        padding:15px 0 40px;
    }

    .pikki-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .pikki-header h1{

        font-size:28px;
    }

    .btn{

        width:100%;
    }

    .acoes{

        flex-direction:column;
    }

    .acoes .btn{

        width:100%;
    }

    .modal{

        padding:10px;
    }

    .modal-content{

        padding:20px;

        border-radius:18px;
    }

    .pikki-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;
    }

    .pikki-filtros form{

    flex-direction:column;

    align-items:stretch;
}

.pikki-filtros input,
.pikki-filtros select{

    width:100%;

    min-width:unset;
}

}

.modal-close{

    position:absolute;

    top:20px;

    right:20px;

    width:40px;

    height:40px;

    border:none;

    border-radius:999px;

    background:#F1F5F9;

    color:#334155;

    font-size:22px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;
}


.modal-section-title{

    margin-top:25px;

    margin-bottom:15px;

    font-size:18px;

    font-weight:700;

    color:#0F172A;
}


.logo-preview{

    width:140px;

    height:140px;

    border-radius:20px;

    border:2px dashed #CBD5E1;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F8FAFC;

    overflow:hidden;
}

@media(max-width:1024px){

    .empresa-info-grid,
    .responsavel-grid{

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

}

@media(max-width:768px){

    .empresa-topo{

        grid-template-columns:1fr;
    }

    .empresa-info-grid,
    .responsavel-grid,
    .morada-grid{

        grid-template-columns:1fr;
    }

    .logo-preview{

        width:120px;

        height:120px;
    }

}

/* =====================================================
   EMPRESAS
===================================================== */

.empresa-topo{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:24px;

    margin-bottom:25px;
}

.empresa-info-grid{

    display:grid;

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

    gap:12px;
}

.responsavel-grid{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;
}

.morada-grid{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;
}

.empresa-logo-coluna{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.modal-section-title{

    margin-top:10px;

    margin-bottom:10px;

    font-size:15px;

    font-weight:700;

    color:#0F172A;

    border-bottom:1px solid #E2E8F0;

    padding-bottom:8px;
}

.form-row{

    margin-bottom:10px;
}

.form-row label{

    margin-bottom:5px;

    font-size:12px;

    font-weight:600;

    color:#334155;
}

.form-row input,
.form-row select,
.form-row textarea{

    padding:10px 12px;

    font-size:14px;
}

.form-grid{

    display:grid;

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

    gap:20px;
}

.form-grid-full{

    grid-column:1 / -1;
}

.col-1{
    grid-column:span 1;
}

.col-2{

    grid-column:span 2;
}

.col-3{

    grid-column:span 3;
}

.linha-inativa{

    font-style:italic;

    opacity:.65;

}

.margin-stepper{

    display:flex;
    align-items:center;
    border:1px solid #dbe3ef;
    border-radius:14px;
    overflow:hidden;
    height:56px;
    background:#fff;

}

.margin-stepper button{

    width:54px;
    height:100%;

    border:none;

    background:#f8fafc;

    cursor:pointer;

    font-size:24px;

    font-weight:600;

    transition:.2s;

}

.margin-stepper button:hover{

    background:#eef4ff;

}

.margin-stepper input{

    flex:1;

    border:none;

    text-align:center;

    font-size:20px;

    font-weight:700;

    background:white;

}

.margin-stepper input:focus{

    outline:none;

}

/* =====================================================
   PIKKI - CONFIGURAÇÃO COMERCIAL
===================================================== */

.pikki-comercial-layout{

    display:grid;

    grid-template-columns:minmax(420px,1fr) 360px;

    gap:24px;

    margin-top:24px;

    margin-bottom:24px;

    align-items:start;

}

/* -------------------------------------------------- */

.pikki-plano-card,
.pikki-proposta-card{

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:18px;

    padding:24px;

    height:100%;

    transition:.20s;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

}

/* -------------------------------------------------- */

.pikki-card-title{

    margin:0 0 20px;

    font-size:20px;

    font-weight:700;

    color:#0F172A;

}

/* -------------------------------------------------- */

.pikki-plano-table{

    width:100%;

    border-collapse:collapse;

}

.pikki-plano-table tr{

    border-bottom:1px solid #EEF2F7;

}

.pikki-plano-table tr:last-child{

    border-bottom:none;

}

.pikki-plano-table td{

    padding:12px 0;

    font-size:14px;

}

.pikki-plano-table td:last-child{

    text-align:right;

    font-weight:700;

    color:#0F172A;

}

/* -------------------------------------------------- */

.pikki-proposta-total{

    font-size:46px;

    font-weight:800;

    color:#2563EB;

    line-height:1;

    margin:10px 0 18px;

    letter-spacing:-1px;

}

/* -------------------------------------------------- */

.pikki-divider{

    border:none;

    border-top:1px solid #E5E7EB;

    margin:20px 0;

}

/* -------------------------------------------------- */

.pikki-resumo-linha{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    font-size:15px;

}

.pikki-resumo-linha strong{

    font-size:16px;

}

/* =====================================================
   MARGENS
===================================================== */

.pikki-margens{

    display:grid;

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

    gap:24px;

    border-top:1px solid #E2E8F0;

    padding-top:24px;

}

.margin-control label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#475569;

}

/* -------------------------------------------------- */

.margin-stepper{

    display:flex;

    align-items:center;

    overflow:hidden;

    border:1px solid #CBD5E1;

    border-radius:16px;

    background:#fff;

    height:58px;

    box-shadow:
        0 4px 12px rgba(15,23,42,.03);

}

.margin-stepper button{

    width:56px;

    height:100%;

    border:none;

    background:#F8FAFC;

    cursor:pointer;

    font-size:24px;

    font-weight:700;

    transition:.20s;

}

.margin-stepper button:hover{

    background:#E2E8F0;

}

.margin-stepper input{

    flex:1;

    border:none;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#2563EB;

    background:#fff;

}

.margin-stepper input:focus{

    outline:none;

}

/* =====================================================
   BLOCO COMERCIAL
===================================================== */

.pikki-comercial{

    margin-top:16px;

    padding:26px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:18px;

}

/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:1100px){

    .pikki-comercial-layout{

        grid-template-columns:1fr;

    }

}

/* =====================================================
   FILTROS
===================================================== */

.pikki-filtros{

    margin-bottom:24px;
}

.pikki-filtros form{

    display:flex;

    gap:12px;

    align-items:center;

    flex-wrap:wrap;

    padding:18px;

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:20px;

    box-shadow:
        0 4px 12px rgba(15,23,42,.04);
}

.pikki-filtros input{

    flex:1;

    min-width:320px;

    height:48px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;

    transition:.2s;
}

.pikki-filtros select{

    min-width:220px;

    height:48px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;

    cursor:pointer;

    transition:.2s;
}

.pikki-filtros input:focus,
.pikki-filtros select:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}

.pikki-filtros .btn{

    height:48px;

    min-width:140px;

    border-radius:14px;
}

/* =====================================================
   CLIENTE IDENTIFICADO
===================================================== */

.cliente-card{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:20px;
}

.cliente-card-header{

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;

    margin-bottom:10px;
}

.cliente-card-body{

    display:flex;

    flex-direction:column;

    gap:6px;
}

#cliente_nome{

    font-size:18px;

    font-weight:700;

    color:#0F172A;
}

.cliente-box{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:24px;

    padding:20px;

    margin-bottom:20px;
}

.cliente-box-title{

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;

    margin-bottom:15px;
}

.cliente-box-grid{

    display:grid;

    grid-template-columns:1fr 160px;

    gap:16px;

    align-items:end;
}

.col-4{

    grid-column:span 4;
}

/* =====================================================
   LOGIN PIKKI
===================================================== */

.page-template-template-login{

    background:#F8FAFC;

}

.page-template-template-login header,
.page-template-template-login footer{

    display:none;

}

.login-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #F8FAFC 0%,
            #EEF4FF 100%
        );

    background-image:

        radial-gradient(
            circle at 20% 80%,
            rgba(37,99,235,.08) 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 10%,
            rgba(20,184,166,.08) 0%,
            transparent 35%
        ),

        linear-gradient(
            rgba(148,163,184,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(148,163,184,.06) 1px,
            transparent 1px
        );

    background-size:
        cover,
        cover,
        40px 40px,
        40px 40px;

}

.login-orb{

    position:absolute;

    border-radius:999px;

    filter:blur(90px);

    opacity:.45;

}

.orb-1{

    width:420px;

    height:420px;

    background:#14B8A6;

    top:-120px;

    right:-120px;

}

.orb-2{

    width:350px;

    height:350px;

    background:#2563EB;

    bottom:-120px;

    left:-120px;

}

.login-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:560px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.80);

    border-radius:32px;

    padding:36px;

    box-shadow:
    0 80px 120px rgba(15,23,42,.10),
    0 40px 60px rgba(15,23,42,.08),
    0 20px 30px rgba(15,23,42,.06),
    0 10px 15px rgba(15,23,42,.04);

    transform:translateY(-12px);

}

.login-card::after{

    content:'';

    position:absolute;

    left:50%;

    bottom:-35px;

    transform:translateX(-50%);

    width:75%;

    height:40px;

    border-radius:50%;

    background:rgba(15,23,42,.10);

    filter:blur(25px);

    z-index:-1;

}

.login-logo{

    text-align:center;

    margin-bottom:18px;

}

.login-logo img{

    width:100%;

    max-width:220px;

    height:auto;

}

.login-card h1{

    text-align:center;

    font-size:34px;

    font-weight:800;

    color:#0F172A;

    margin:0 0 8px;

}

.login-subtitle{

    text-align:center;

    color:#64748B;

    font-size:15px;

    margin-bottom:32px;

}

.login-erro{

    background:#FEF2F2;

    color:#DC2626;

    border-radius:14px;

    padding:14px;

    margin-bottom:20px;

}

.form-row{

    margin-bottom:18px;

}

.form-row label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#334155;

}

.form-row input{

    width:100%;

    height:58px;

    border:1px solid #CBD5E1;

    border-radius:16px;

    padding:0 18px;

    background:#FFF;

    font-size:15px;

    transition:.2s;

}

.form-row input:focus{

    outline:none;

    border-color:#14B8A6;

    box-shadow:
        0 0 0 4px rgba(20,184,166,.15);

}

.btn-login{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:#FFF;

    background:
        linear-gradient(
            135deg,
            #0F172A,
            #334155
        );

    transition:.2s;

}

.btn-login:hover{

    transform:translateY(-2px);

}

.login-footer-brand{

    margin-top:24px;

    text-align:center;

    font-size:13px;

    font-weight:500;

    color:#64748B;

}

@media(max-width:768px){

    .login-card{

        padding:28px;

        border-radius:24px;

    }

    .login-logo img{

        max-width:220px;

    }

    .login-card h1{

        font-size:28px;

    }

}

/* =====================================================
   APP HEADER
===================================================== */

.app-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:#FFFFFF;

    border-bottom:1px solid #E2E8F0;

    backdrop-filter:blur(12px);

}

.app-header-inner{

    max-width:1400px;

    margin:0 auto;

    padding:14px 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}

.app-logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.app-logo img{

    height:42px;

    width:auto;

    display:block;

}

.app-logout{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:12px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    text-decoration:none;

    color:#0F172A;

    font-size:14px;

    font-weight:600;

    transition:.2s;

}

.app-logout:hover{

    background:#EEF2FF;

    border-color:#CBD5E1;

}

@media(max-width:768px){

    .app-header-inner{

        padding:12px 16px;

    }

    .app-logo img{

        height:36px;

    }

    .app-logout{

        padding:10px 12px;

    }

    .app-logout span{

        display:none;

    }

}

/* =====================================================
   APP FOOTER
===================================================== */

.app-footer{

    margin-top:40px;

    border-top:1px solid #E2E8F0;

    background:#FFFFFF;

}

.app-footer-inner{

    max-width:1400px;

    margin:0 auto;

    padding:24px 20px;

    text-align:center;

}

.app-footer-brand{

    font-size:15px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:4px;

}

.app-footer-powered{

    font-size:13px;

    color:#64748B;

    margin-bottom:4px;

}

.app-footer-copy{

    font-size:12px;

    color:#94A3B8;

}

/* =====================================================
   DASHBOARD
===================================================== */

.dashboard-welcome{

    margin-bottom:12px;

    color:#64748B;

    font-size:14px;

    font-weight:500;
}

.dashboard-welcome strong{

    color:#0F172A;

    font-weight:700;
}

.dashboard-pendencias{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;
}

.dashboard-alerta{

    padding:14px 18px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;
}

.dashboard-alerta.warning{

    background:#FEF3C7;

    color:#92400E;
}

.dashboard-alerta.danger{

    background:#FEE2E2;

    color:#991B1B;
}

.linha-servico{

    cursor:pointer;

    transition:.2s ease;
}

.linha-servico:hover{

    background:#F8FAFC;
}

.dashboard-card-footer{

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid #E2E8F0;

    text-align:right;
}

.dashboard-link{

    color:#2563EB;

    font-size:14px;

    font-weight:600;

    text-decoration:none;
}

.dashboard-link:hover{

    text-decoration:underline;
}

.dashboard-alertas-operacao{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:20px 0 25px;
}

.alerta-operacao{

    display:inline-flex;

    align-items:center;

    padding:10px 16px;

    border-radius:999px;

    background:#ECFDF5;

    color:#047857;

    text-decoration:none;

    font-size:14px;

    font-weight:600;
}

.alerta-operacao:hover{

    transform:translateY(-1px);
}

.alerta-warning{

    background:#FEF3C7;

    color:#92400E;
}


/* =====================================================
   KPI
===================================================== */

.dashboard-kpis{

    display:grid;

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

    gap:20px;

    margin-top:30px;

    margin-bottom:30px;
}

.kpi-card{

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:20px;

    min-height:130px;

    box-shadow:
        0 8px 25px rgba(15,23,42,.04);

    transition:.25s ease;
}

.kpi-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 25px 55px rgba(15,23,42,.10);
}


.kpi-label{

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#64748B;

    margin-bottom:14px;
}

.kpi-value{

    font-size:44px;

    font-weight:800;

    line-height:1;

    color:#0F172A;
}

/* =====================================================
   KPI SERVIÇOS
===================================================== */

.servicos-kpis{

    display:grid;

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

    gap:16px;

    margin-bottom:24px;
}

.servicos-kpis .kpi-card{

    min-height:100px;

    padding:16px;

    text-decoration:none;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    border:1px solid #E2E8F0;

    transition:.25s ease;
}

.servicos-kpis .kpi-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);
}

/* ==========================
   CORES DOS ESTADOS
========================== */

.servicos-kpis .kpi-em-curso{

    box-shadow:
        inset 0 0 0 1px #22C55E,
        0 8px 25px rgba(15,23,42,.04);
}

.servicos-kpis .kpi-planeado{

    box-shadow:
        inset 0 0 0 1px #3B82F6,
        0 8px 25px rgba(15,23,42,.04);
}

.servicos-kpis .kpi-interrompido{

    box-shadow:
        inset 0 0 0 1px #F59E0B,
        0 8px 25px rgba(15,23,42,.04);
}

.servicos-kpis .kpi-rascunho{

    box-shadow:
        inset 0 0 0 1px #94A3B8,
        0 8px 25px rgba(15,23,42,.04);
}

.servicos-kpis .kpi-concluido{

    box-shadow:
        inset 0 0 0 1px #065F46,
        0 8px 25px rgba(15,23,42,.04);
}

.servicos-kpis .kpi-cancelado{

    box-shadow:
        inset 0 0 0 1px #DC2626,
        0 8px 25px rgba(15,23,42,.04);
}

/* ==========================
   KPI ATIVO
========================== */

.servicos-kpis .kpi-card.ativo{

    transform:translateY(-2px);

    filter:brightness(.98);

}

.servicos-kpis .kpi-em-curso.ativo{

    background:#DCFCE7;
}

.servicos-kpis .kpi-planeado.ativo{

    background:#DBEAFE;
}

.servicos-kpis .kpi-interrompido.ativo{

    background:#FED7AA;
}

.servicos-kpis .kpi-rascunho.ativo{

    background:#E2E8F0;
}

.servicos-kpis .kpi-concluido.ativo{

    background:#BBF7D0;
}

.servicos-kpis .kpi-cancelado.ativo{

    background:#FECACA;
}

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

@media(max-width:1100px){

    .servicos-kpis{

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

}

@media(max-width:768px){

    .servicos-kpis{

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

}

/* =====================================================
   ATALHOS
===================================================== */

.dashboard-acoes{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;
}

.dashboard-atalho{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    min-height:115px;

    padding:22px;

    text-decoration:none;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FAFC
        );

    border:1px solid #E2E8F0;

    color:#0F172A;

    overflow:hidden;

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

.dashboard-atalho:hover{

    transform:translateY(-5px);

    border-color:#CBD5E1;

    box-shadow:
        0 25px 55px rgba(15,23,42,.10);
}

.dashboard-atalho::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #0F172A,
            #334155
        );

    opacity:0;

    transition:.25s ease;
}

.dashboard-atalho:hover::before{

    opacity:1;
}

/* =====================================================
   ICONE
===================================================== */

.dashboard-atalho-icon{

    width:62px;

    height:62px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #0F172A,
            #1E293B
        );

    color:#FFFFFF;

    font-size:24px;

    box-shadow:
        0 18px 35px rgba(15,23,42,.25);
}

.dashboard-atalho-texto{

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.dashboard-atalho strong{

    display:block;

    font-size:20px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:6px;

    color:#0F172A;
}

.dashboard-atalho span{

    display:block;

    font-size:14px;

    line-height:1.45;

    color:#64748B;
}

/* =====================================================
   BLOCOS INFERIORES
===================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:22px;
}

.dashboard-grid .pikki-card{

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8FAFC
        );

    border:1px solid #E2E8F0;

    border-radius:32px;

    padding:30px;

    box-shadow:
        0 20px 45px rgba(15,23,42,.05);
}

.dashboard-grid h3{

    margin-bottom:25px;

    font-size:18px;

    font-weight:700;

    color:#0F172A;
}

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

@media(max-width:1300px){

    .dashboard-acoes{

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

@media(max-width:1100px){

    .dashboard-kpis{

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

    .dashboard-grid{

        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .dashboard-kpis{

        grid-template-columns:1fr;
    }

    .dashboard-acoes{

        grid-template-columns:1fr;
    }

    .kpi-value{

        font-size:42px;
    }

    .dashboard-atalho{

        min-height:95px;

        padding:18px;
    }

    .dashboard-atalho-icon{

        width:54px;
        height:54px;

        font-size:20px;
    }

    .dashboard-atalho strong{

        font-size:17px;
    }
}

/* =====================================================
   NAVEGAÇÃO DASHBOARD
===================================================== */

.dashboard-nav{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,180px));

    justify-content:center;

    gap:12px;

    margin-bottom:20px;
}

@media(max-width:768px){

    .dashboard-nav{

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

    }

}

.dashboard-nav-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:58px;

    padding:0 18px;

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:16px;

    text-decoration:none;

    color:#0F172A;

    font-size:14px;

    font-weight:600;

    transition:.25s ease;
}

.dashboard-nav-item:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(15,23,42,.08);
}

.dashboard-nav-item i{

    font-size:14px;
}

.dashboard-nav-item:nth-child(1){

    border-color:#60A5FA;
    background:#DCEEFF;
}

.dashboard-nav-item:nth-child(2){

    border-color:#4ADE80;
    background:#DCFCE7;
}

.dashboard-nav-item:nth-child(3){

    border-color:#C084FC;
    background:#F3E8FF;
}

.dashboard-nav-item:nth-child(4){

    border-color:#FB923C;
    background:#FFEDD5;
}

.dashboard-nav-item:nth-child(5){

    border-color:#22D3EE;
    background:#CFFAFE;
}

.dashboard-nav-item:nth-child(6){

    border-color:#A78BFA;

    background:#EDE9FE;
}



.utilizador-avatar{

    width:56px;
    height:56px;

    border-radius:14px;

    object-fit:cover;

    object-position:center;

    border:1px solid #E2E8F0;

    display:block;

    margin:0 auto;

    box-shadow:
        0 4px 12px rgba(15,23,42,.08);
}

.utilizador-nome{

    font-size:16px;

    font-weight:500;

    color:#0F172A;
}

.estado-operacional{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.estado-subtitulo{
    font-size:12px;
    color:#64748B;
    line-height:1.2;
}

.acoes .btn-warning{

    background:#F59E0B;

    border-color:#F59E0B;

    color:#FFFFFF;
}

.acoes .btn-warning:hover{

    background:#D97706;

    border-color:#D97706;

    color:#FFFFFF;
}

.acoes .btn-danger{

    background:#EF4444;

    border-color:#EF4444;

    color:#FFFFFF;
}

.acoes .btn-danger:hover{

    background:#DC2626;

    border-color:#DC2626;

    color:#FFFFFF;
}

.perfil-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}

.perfil-gestor{

    background:#EFF6FF;

    color:#2563EB;
}

.perfil-supervisor{

    background:#FEF3C7;

    color:#B45309;
}

.perfil-colaborador{

    background:#ECFDF5;

    color:#059669;
}

.perfil-comercial{

    background:#F3E8FF;

    color:#7C3AED;
}

/* =====================================================
   AÇÕES COLABORADOR
===================================================== */

.acoes-colaborador{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;
}

.acao-icon{

    width:40px;

    height:40px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.25s ease;

    font-size:14px;
}

.acao-icon:hover{

    transform:translateY(-2px);
}

.acao-icon.editar{

    background:#EFF6FF;

    color:#2563EB;
}

.acao-icon.desativar{

    background:#FEF3C7;

    color:#D97706;
}

.acao-icon.apagar{

    background:#FEE2E2;

    color:#DC2626;
}

.acao-icon.pesquisar{

    background:#F3F4F6;

    color:#475569;
}

.cliente-contacto{

    display:flex;

    flex-direction:column;

    gap:4px;
}

.cliente-contacto small{

    color:#64748B;

    font-size:12px;
}

.cliente-servicos-card{

    padding:32px;

}

.cliente-servicos-card h3{

    margin:0 0 24px;

    padding-left:8px;
}

.cliente-info-grid{

    display:grid;

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

    gap:24px;
}

.cliente-info-item{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.cliente-info-item span{

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#94A3B8;
}

.cliente-info-item strong{

    font-size:18px;

    color:#0F172A;

    font-weight:600;
}

@media(max-width:768px){

    .cliente-info-grid{

        grid-template-columns:1fr;
    }

}

.cliente-resumo-card{

    padding:32px 36px;

    margin-bottom:32px;
}

.cliente-resumo-card h2{

    margin:0 0 18px;

    font-size:28px;

    color:#0F172A;
}

.cliente-resumo-linha{

    margin-bottom:10px;

    color:#475569;
}

.cliente-resumo-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;
}

.cliente-resumo-coluna{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.cliente-resumo-coluna h2{

    margin:0 0 10px;

    font-size:42px;

    color:#0F172A;
}

.cliente-resumo-linha{

    color:#475569;

    line-height:1.6;
}


/* =====================================================
   FICHA SERVIÇO V2
===================================================== */

.servico-topo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #E2E8F0;
}

.servico-topo h2{

    margin:0 0 2px;

    font-size:28px;

    font-weight:700;

    color:#0F172A;
}

.servico-topo p{

    margin:0;

    color:#64748B;

    font-size:14px;
}

.servico-resumo-grid{

    display:grid;

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

    gap:20px;
}

.servico-resumo-coluna{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:18px;
}

.servico-resumo-coluna::before{

    display:block;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:#94A3B8;

    margin-bottom:10px;
}

.servico-resumo-coluna:nth-child(1)::before{

    content:"Operação";
}

.servico-resumo-coluna:nth-child(2)::before{

    content:"Planeamento";
}

.servico-resumo-coluna:nth-child(3)::before{

    content:"Localização";
}

.servico-resumo-linha{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    padding:8px 0;

    border-bottom:1px solid #EDF2F7;
}

.servico-resumo-linha:last-child{

    border-bottom:none;
}

.servico-resumo-linha strong{

    min-width:130px;

    color:#334155;

    font-weight:600;
}

@media(max-width:1200px){

    .servico-resumo-grid{

        grid-template-columns:1fr;
    }

}

.servico-cliente{

    margin:0 0 4px;

    font-size:24px;

    font-weight:700;

    color:#0F172A;
}

.servico-nome{

    margin:0;

    font-size:14px;

    color:#64748B;
}

.servico-codigo{

    margin-top:4px;

    font-size:13px;

    font-weight:600;

    color:#64748B;

}

.servico-observacoes{

    margin-top:20px;

    padding:24px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    color:#475569;

    line-height:1.8;

    min-height:120px;
}

.servico-observacoes-card{

    padding:32px;

}

.servico-observacoes-card h3{

    margin:0 0 20px;

    font-size:28px;

    font-weight:700;

    color:#0F172A;
}

.servico-observacoes{

    margin-top:0;

    min-height:120px;
}

.gps-selector{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}

.gps-info{

    display:flex;

    gap:25px;

    font-size:14px;

    color:#64748B;
}

.gps-preview{

    margin-top:25px;

    height:220px;

    border:1px dashed #CBD5E1;

    border-radius:20px;

    background:#F8FAFC;

    display:flex;

    align-items:center;

    justify-content:center;
}

.gps-preview-placeholder{

    color:#94A3B8;

    font-size:15px;
}

.form-group-full{

    grid-column:1/-1;
}

.situacao-atual-grid{

    display:flex;

    gap:16px;

    overflow-x:auto;

    padding:0 24px 24px;

    scrollbar-width:thin;

}

.situacao-card{

    flex:0 0 180px;

    background:#FFF;

    border:1px solid #E2E8F0;

    border-radius:14px;

    padding:16px;

    text-align:center;

    transition:.2s;

    cursor:pointer;

}

.situacao-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 24px rgba(
            15,
            23,
            42,
            .08
        );

}

.situacao-nome{

    font-size:15px;

    font-weight:700;

    color:#0F172A;

}

.situacao-estado{

    margin-top:16px;

    display:flex;

    justify-content:center;

}

.situacao-horas{

    margin-top:12px;

    font-size:22px;

    font-weight:800;

    color:#0F172A;

}

.secao-titulo{

    padding:24px 24px 0;

    margin:0 0 24px;

}

.situacao-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 24px 0;

}

.situacao-header .secao-titulo{

    padding:0;

    margin:0;

}

.situacao-filtro input{

    height:42px;

    border:1px solid #CBD5E1;

    border-radius:12px;

    padding:0 14px;

    background:#FFF;

}

.linha-picagem{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #E2E8F0;

}

.linha-picagem strong{

    text-transform:capitalize;

}

.linha-picagem span{

    font-weight:700;

}

.alertas-lista{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:0 24px 24px;

}

.alerta-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 18px;

    border:1px solid #FECACA;

    background:#FEF2F2;

    border-radius:12px;

}

.alerta-nome{

    font-weight:700;

    color:#991B1B;

}

.alerta-info{

    color:#7F1D1D;

}

.alerta-data{

    font-weight:600;

}

.sem-alertas{

    padding:0 24px 24px;

    color:#64748B;

}

.alerta-distancia{

    font-size:13px;

    color:#7F1D1D;

    opacity:.85;

}

.equipa-resumo{

    display:flex;
    flex-direction:column;
    gap:8px;

    font-size:15px;
    font-weight:700;

    margin-top:12px;

}

/* =====================================================
   MODAL SERVIÇO
===================================================== */

#modalServico .modal-content{

    max-width:1200px;

    width:95%;

    padding:40px;
}

/* =====================================================
   SECÇÕES
===================================================== */

#modalServico .servico-modal-seccao{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:24px;

    margin-bottom:20px;
}

#modalServico .servico-modal-titulo{

    margin:0 0 20px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;
}

/* =====================================================
   GRID
===================================================== */

#modalServico .form-grid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:20px;
}

#modalServico .form-group{

    display:flex;

    flex-direction:column;
}

#modalServico .form-group-full{

    grid-column:1 / -1;
}

/* =====================================================
   LABELS
===================================================== */

#modalServico label{

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#475569;
}

/* =====================================================
   INPUTS
===================================================== */

#modalServico input,
#modalServico select{

    height:50px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;

    color:#0F172A;

    transition:.2s ease;
}

#modalServico textarea{

    width:100%;

    min-height:160px;

    padding:18px;

    border:1px solid #CBD5E1;

    border-radius:16px;

    background:#FFFFFF;

    resize:vertical;

    font-size:14px;

    line-height:1.6;

    color:#0F172A;

    transition:.2s ease;
}

#modalServico input:focus,
#modalServico select:focus,
#modalServico textarea:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}

#modalServico input[readonly]{

    background:#F1F5F9;

    color:#475569;

    font-weight:600;

    cursor:default;
}

/* =====================================================
   GPS
===================================================== */

#modalServico .gps-selector{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    flex-wrap:wrap;

    margin-bottom:20px;
}

#modalServico .gps-info{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    color:#64748B;

    font-size:14px;
}

#modalServico .gps-info strong{

    color:#0F172A;

    font-weight:700;
}

#modalServico .gps-preview{

    height:240px;

    border:2px dashed #CBD5E1;

    border-radius:20px;

    background:#FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;
}

#modalServico .gps-preview-placeholder{

    color:#94A3B8;

    font-size:15px;
}

/* =====================================================
   FOOTER
===================================================== */

#modalServico .modal-footer{

    display:flex;

    justify-content:flex-end;

    margin-top:25px;

    padding-top:25px;

    border-top:1px solid #E2E8F0;
}

/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:1200px){

    #modalServico .form-grid{

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

}

@media(max-width:768px){

    #modalServico .form-grid{

        grid-template-columns:1fr;
    }

    #modalServico .gps-selector{

        align-items:flex-start;

        flex-direction:column;
    }

    #modalServico .modal-content{

        padding:25px;
    }

}

/* =====================================================
   MODAIS UTILIZADORES V2
===================================================== */

#modalNovo .modal-content,
#modalEditar .modal-content{

    max-width:1200px;
    width:95%;
    padding:40px;
}

#modalNovo form,
#modalEditar form{

    display:flex;
    flex-direction:column;
    gap:24px;
}

#modalNovo .utilizador-modal-seccao,
#modalEditar .utilizador-modal-seccao{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:24px;
}

#modalNovo .utilizador-modal-titulo,
#modalEditar .utilizador-modal-titulo{

    margin:0 0 20px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748B;
}

#modalNovo .form-grid,
#modalEditar .form-grid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:20px;
}

#modalNovo .form-group,
#modalEditar .form-group{

    display:flex;

    flex-direction:column;
}

#modalNovo label,
#modalEditar label{

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#475569;
}

#modalNovo input,
#modalNovo select,
#modalEditar input,
#modalEditar select{

    height:50px;

    padding:0 16px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    font-size:14px;
}

#modalNovo textarea,
#modalEditar textarea{

    width:100%;

    min-height:160px;

    padding:18px;

    border:1px solid #CBD5E1;

    border-radius:16px;

    background:#FFFFFF;

    resize:vertical;

    font-size:14px;

    line-height:1.6;
}

#modalNovo input:focus,
#modalNovo select:focus,
#modalNovo textarea:focus,
#modalEditar input:focus,
#modalEditar select:focus,
#modalEditar textarea:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);
}

#modalNovo .modal-footer,
#modalEditar .modal-footer{

    display:flex;

    justify-content:flex-end;

    padding-top:20px;

    border-top:1px solid #E2E8F0;
}

#modalEditar #editar_nome{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#0F172A;
}

#modalEditar #editar_subtitulo{

    margin-top:6px;

    color:#64748B;

    font-size:14px;
}

#preview_foto_perfil img,
#preview_foto_referencia img{

    width:140px;

    border-radius:16px;

    border:1px solid #E2E8F0;

    margin-bottom:12px;
}

@media(max-width:1200px){

    #modalNovo .form-grid,
    #modalEditar .form-grid{

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

}

@media(max-width:768px){

    #modalNovo .form-grid,
    #modalEditar .form-grid{

        grid-template-columns:1fr;
    }

    #modalNovo .modal-content,
    #modalEditar .modal-content{

        padding:25px;
    }

}

.utilizador-empresa{

    margin-top:4px;

    font-size:12px;

    color:#64748B;

    font-weight:500;

}
/* =====================================================
   PICAGENS
===================================================== */

.picagem-page{

    max-width:700px;

    margin:40px auto;

    padding:20px;

}

.picagem-header{

    text-align:center;

    margin-bottom:30px;

}

.picagem-header h1{

    font-size:32px;

    margin-bottom:10px;

}

.picagem-header p{

    color:#64748B;

}

.picagem-lista{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.picagem-colaborador{

    background:#FFFFFF;

    border:1px solid #CBD5E1;

    border-radius:18px;

    min-height:82px;

    padding:18px;

    box-shadow:
        0 4px 12px rgba(
            15,
            23,
            42,
            .05
        );

}

.picagem-colaborador strong{

    display:block;

    font-size:17px;

    font-weight:700;

    color:#0F172A;

}

.picagem-colaborador span{

    display:block;

    margin-top:4px;

    color:#64748B;

    font-size:13px;

}

#modal-pin .modal-content{

    max-width:420px;

    text-align:center;

}

#pin-nome{

    margin-bottom:20px;

}

#pin-picagem{

    width:100%;

    height:64px;

    border:1px solid #CBD5E1;

    border-radius:16px;

    font-size:28px;

    text-align:center;

    letter-spacing:10px;

    font-weight:600;

}

#pin-picagem:focus{

    outline:none;

    border-color:#334155;

}

.pin-teclado{

    display:grid;

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

    gap:12px;

    margin-top:20px;

}

.pin-teclado button{

    height:72px;

    border:none;

    border-radius:16px;

    font-size:28px;

    font-weight:600;

    cursor:pointer;

    background:#F8FAFC;

    box-shadow:
        0 8px 20px rgba(15,23,42,.08);

}

.pin-teclado button:hover{

    transform:translateY(-2px);

}

#camera-area video{

    width:100%;

    min-height:420px;

    object-fit:cover;

    border-radius:16px;

}

.picagem-excecional-box{

    margin-top:24px;

    text-align:center;

}

.picagem-excecional-box p{

    margin:0 0 12px;

    font-size:14px;

    color:#64748B;

}

.btn-picagem-excecional{

    width:100%;

    height:56px;

    border:1px dashed #CBD5E1;

    border-radius:14px;

    background:#F8FAFC;

    color:#475569;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.btn-picagem-excecional:hover{

    background:#FFFFFF;

    border-color:#94A3B8;

}

.pikki-input{

    width:100%;

    height:56px;

    padding:0 18px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    color:#0F172A;

    font-size:16px;

    font-weight:500;

    outline:none;

    transition:all .2s ease;

    box-sizing:border-box;

}

.pikki-input:focus{

    border-color:#334155;

    box-shadow:
        0 0 0 4px rgba(
            51,
            65,
            85,
            .10
        );

}

.picagem-brand{

    text-align:center;

    margin-bottom:24px;

}

.picagem-brand img{

    height:56px;

    width:auto;

}

.picagem-footer{

    margin-top:40px;

    text-align:center;

}

.picagem-footer .app-footer-brand{

    font-size:18px;

    font-weight:700;

    color:#0F172A;

}

.picagem-footer .app-footer-powered{

    margin-top:4px;

    font-size:13px;

    color:#64748B;

}

.picagem-footer .app-footer-copy{

    margin-top:8px;

    font-size:12px;

    color:#94A3B8;

}

.picagem-servico-info{

    margin-top:8px;

    font-size:13px;

    color:#64748B;

    line-height:1.5;

}

.picagem-servico-info div{

    margin-top:2px;

}