/* Tema Wash Factory — cores da marca e painel lateral. */

/* Letra Poppins (a do site), alojada na plataforma. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../vendor/poppins/poppins-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --wf-turquesa: #27b5be;          /* turquesa do site washfactory.pt */
  --wf-turquesa-rgb: 39, 181, 190;
  --wf-primaria: #17858b;          /* botões e links: o mesmo turquesa, mais fundo, para ler bem */
  --wf-primaria-escura: #126f74;
  --wf-escuro: #0f3a3f;            /* painel lateral */
  --wf-fundo: #f2f8f8;
  --lateral: 250px;

  --bs-primary: var(--wf-primaria);
  --bs-primary-rgb: 23, 133, 139;
  --bs-link-color: var(--wf-primaria);
  --bs-link-color-rgb: 23, 133, 139;
  --bs-link-hover-color: var(--wf-primaria-escura);
  --bs-link-hover-color-rgb: 18, 111, 116;
  --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-focus-ring-color: rgba(var(--wf-turquesa-rgb), .35);
}

body { background: var(--wf-fundo); padding-bottom: 4.5rem; }
h1, h2, .h4, .h5 { font-weight: 600; letter-spacing: -.01em; }
.card { border: 0; border-radius: .75rem; box-shadow: 0 1px 3px rgba(15, 58, 63, .08); }
.card-header:first-child { border-radius: .75rem .75rem 0 0; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; white-space: nowrap; }
.table td, .table th { vertical-align: middle; }

/* Componentes Bootstrap com a cor da marca */
.btn-primary {
  --bs-btn-bg: var(--wf-primaria); --bs-btn-border-color: var(--wf-primaria);
  --bs-btn-hover-bg: var(--wf-primaria-escura); --bs-btn-hover-border-color: var(--wf-primaria-escura);
  --bs-btn-active-bg: var(--wf-escuro); --bs-btn-active-border-color: var(--wf-escuro);
  --bs-btn-disabled-bg: var(--wf-primaria); --bs-btn-disabled-border-color: var(--wf-primaria);
}
.btn-outline-primary {
  --bs-btn-color: var(--wf-primaria); --bs-btn-border-color: var(--wf-primaria);
  --bs-btn-hover-bg: var(--wf-primaria); --bs-btn-hover-border-color: var(--wf-primaria);
  --bs-btn-active-bg: var(--wf-primaria-escura); --bs-btn-active-border-color: var(--wf-primaria-escura);
}
.btn { border-radius: .55rem; }
.form-control:focus, .form-select:focus { border-color: var(--wf-turquesa); box-shadow: 0 0 0 .2rem rgba(var(--wf-turquesa-rgb), .3); }
.form-check-input:checked { background-color: var(--wf-primaria); border-color: var(--wf-primaria); }
.form-check-input:focus { border-color: var(--wf-turquesa); box-shadow: 0 0 0 .2rem rgba(var(--wf-turquesa-rgb), .3); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--wf-primaria); }
.nav-link { --bs-nav-link-color: var(--wf-primaria); --bs-nav-link-hover-color: var(--wf-primaria-escura); }
.pagination { --bs-pagination-color: var(--wf-primaria); --bs-pagination-active-bg: var(--wf-primaria); --bs-pagination-active-border-color: var(--wf-primaria); }
.list-group { --bs-list-group-active-bg: var(--wf-primaria); --bs-list-group-active-border-color: var(--wf-primaria); }
.progress { --bs-progress-bar-bg: var(--wf-turquesa); }
.text-bg-info { color: #063a3e !important; background-color: #a8ecef !important; }

/* Painel lateral: fixo no computador, gaveta (offcanvas) no telemóvel */
.lateral { background-color: var(--wf-escuro) !important; color: #c4dfe1; width: var(--lateral); }
.lateral .offcanvas-body { display: flex; flex-direction: column; padding: 0; }
.lateral .marca { display: block; padding: 1.1rem 1.1rem .7rem; }
.lateral .marca img { width: 150px; height: auto; }
.lateral .procura { padding: 0 .9rem .7rem; }
.lateral .procura input { background: rgba(255, 255, 255, .1); border: 0; color: #fff; }
.lateral .procura input::placeholder { color: #8fb9bd; }
.lateral .secao { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wf-turquesa); opacity: .8; padding: .9rem 1.1rem .25rem; }
.lateral .item { display: flex; align-items: center; gap: .65rem; padding: .5rem 1.1rem; color: #c4dfe1; text-decoration: none; border-left: 3px solid transparent; }
.lateral .item i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.lateral .item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lateral .item.ativo { background: rgba(var(--wf-turquesa-rgb), .16); color: #fff; border-left-color: var(--wf-turquesa); }
.lateral .item.ativo i { color: var(--wf-turquesa); }
.lateral .utilizador { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: .8rem 1.1rem; font-size: .85rem; }
.lateral .utilizador a, .lateral .utilizador button { color: #8fb9bd; font-size: .8rem; text-decoration: none; background: none; border: 0; padding: 0; }
.lateral .utilizador a:hover, .lateral .utilizador button:hover { color: #fff; }
.topo-movel { background: var(--wf-escuro); color: #fff; }
.topo-movel img { height: 26px; width: auto; }

/* Barra de atalhos no fundo do telemóvel */
.nav-baixo { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: #fff;
             border-top: 1px solid #d7e8e9; display: flex; }
.nav-baixo a { flex: 1; text-align: center; padding: .45rem 0 .35rem; font-size: .72rem;
               color: #5b7376; text-decoration: none; }
.nav-baixo a i { display: block; font-size: 1.25rem; }
.nav-baixo a.ativo { color: var(--wf-primaria); font-weight: 600; }
.nav-baixo .nova i { color: var(--wf-turquesa); }
.nav-baixo a.centro { position: relative; }
.nav-baixo a.centro .bola { display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem;
  margin: -1.6rem auto .1rem; border-radius: 50%; background: var(--wf-primaria); color: #fff;
  box-shadow: 0 .3rem .8rem rgba(0,0,0,.25); border: 3px solid #fff; }
.nav-baixo a.centro .bola i { font-size: 1.5rem; color: #fff; }
.nav-baixo a.centro.ativo .bola { background: var(--wf-turquesa); }

@media (min-width: 992px) {
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 1030; }
  .conteudo { margin-left: var(--lateral); }
  .nav-baixo { display: none !important; }
  body { padding-bottom: 0; }
}

/* Página de entrada */
.entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center;
           background: linear-gradient(160deg, #ffffff 0%, var(--wf-fundo) 55%, #dff5f6 100%); }
.entrada .card { border-top: 4px solid var(--wf-turquesa); }
.entrada img.logo { width: 220px; max-width: 70%; height: auto; }

/* Listas de opções (perfis, unidades, dias…): colunas que se adaptam ao ecrã. */
.lista-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem 1rem; }
.lista-opcoes .form-check { margin-bottom: 0; }

/* Alertas nos cartões de agenda: hora mudada (falta avisar o cliente) e conflito de horário. */
.alerta-hora { background: #fff4e5 !important; border-left: 6px solid #fd7e14 !important; }
.alerta-conflito { background: #fdecec !important; border-left: 6px solid #dc3545 !important; }
.alerta-hora.alerta-conflito { background: linear-gradient(90deg, #fdecec 50%, #fff4e5 50%) !important; }
.aviso-cartao { position: relative; z-index: 2; border-radius: .5rem; padding: .4rem .6rem; font-size: .85rem; margin-top: .4rem; }
.aviso-cartao.hora { background: #ffe5c2; color: #7a3e00; }
.aviso-cartao.conflito { background: #f8d0d3; color: #7a1020; }
/* Separadores do menu que abrem e fecham (menos ruído): a secção da página atual fica aberta. */
.lateral .secao { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.lateral .secao::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .7rem; transition: transform .15s; }
.lateral .secao.fechada::after { transform: rotate(-90deg); }
.lateral .abrir-tudo { display: block; margin: .5rem 1.1rem 0 auto; background: none; border: 0; padding: 0; font-size: .7rem; color: var(--wf-turquesa); opacity: .75; }
.lateral .abrir-tudo:hover { opacity: 1; text-decoration: underline; }
.lateral .secao:hover { opacity: 1; }
.lateral .grupo-secao.fechada { display: none; }
.lateral .secao .aviso-secao { display: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-danger); margin-left: auto; margin-right: .5rem; }
.lateral .secao.fechada .aviso-secao { display: inline-block; }
/* Ver fotografia dentro da aplicação */
.ver-foto { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .9); display: none; align-items: center; justify-content: center; }
.ver-foto.aberta { display: flex; }
.ver-foto img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: .4rem; }
.ver-foto button { position: absolute; background: rgba(255, 255, 255, .15); color: #fff; border: 0; border-radius: 50%; width: 3rem; height: 3rem; font-size: 1.3rem; }
.ver-foto .vf-fechar { top: 1rem; right: 1rem; }
.ver-foto .vf-ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.ver-foto .vf-seg { right: 1rem; top: 50%; transform: translateY(-50%); }
.ver-foto .vf-legenda { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #ddd; font-size: .9rem; }
/* Barra lateral deslizante (computador): recolhida só com os ícones; abre ao passar o rato; o pino fixa-a. */
.lateral .marca img.marca-mini { display: none; width: 30px; height: auto; }
.lateral .pino { background: none; border: 0; color: #8fb9bd; font-size: 1rem; padding: .25rem .4rem; border-radius: .4rem; }
.lateral .pino:hover, .lateral .pino.ativo { color: var(--wf-turquesa); background: rgba(255, 255, 255, .06); }
@media (min-width: 992px) {
  .lateral { transition: width .18s ease, box-shadow .18s ease; }
  body.menu-recolhido { --lateral-recolhida: 64px; }
  body.menu-recolhido .conteudo { margin-left: var(--lateral-recolhida); transition: margin-left .18s ease; }
  body.menu-recolhido .lateral { width: var(--lateral-recolhida); overflow-x: hidden; }
  body.menu-recolhido .lateral .item { white-space: nowrap; }
  body.menu-recolhido .lateral:hover, body.menu-recolhido .lateral:focus-within {
    width: var(--lateral); box-shadow: 6px 0 24px rgba(0, 0, 0, .25); }
  /* Recolhida e sem o rato em cima: só símbolo e ícones (as secções ficam todas visíveis). */
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .marca img:first-child,
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .procura,
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .pino,
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .secao,
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .utilizador { display: none !important; }
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .marca img.marca-mini { display: block; }
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .marca { padding: 1rem 0 .8rem 17px; }
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .grupo-secao.fechada { display: block; }
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .item { padding-left: 1.3rem; font-size: 0; position: relative; }
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .item i { font-size: 1.15rem; }
  body.menu-recolhido .lateral:not(:hover):not(:focus-within) .item .badge { position: absolute; left: 2.2rem; top: .2rem;
    font-size: .55rem; padding: .15rem .3rem; }
}