/* Base visual: cores, tipografia e normalização. */
:root {
  font-family: Inter, Arial, sans-serif;
  color: #17254b;
  background: #f4f6fb;
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
[hidden] {
  display: none !important;
}
/* Cabeçalho e navegação principal. */
.topbar {
  background: #fff;
  border-bottom: 1px solid #e2e7f2;
  padding: 12px max(20px, calc((100vw - 1200px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.12rem;
  font-weight: 800;
  color: #1e317a;
}
.brand img {
  width: 104px;
  height: auto;
}
.brand b {
  font-weight: 500;
  color: #f33c46;
}
.topbar nav {
  display: flex;
  gap: 5px;
  background: #f0f3f9;
  padding: 5px;
  border-radius: 12px;
}
.topbar nav button,
.tab {
  border: 0;
  background: transparent;
  color: #43506d;
  border-radius: 9px;
  padding: 11px 16px;
  font-weight: 700;
}
.topbar nav button.active,
.tab.active {
  background: #263887;
  color: white;
}
.shell {
  max-width: 1240px;
  margin: auto;
  padding: 30px 20px 70px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.page-heading h1 {
  margin: 7px 0;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  letter-spacing: -0.04em;
}
.page-heading p {
  margin: 0;
  color: #62708b;
}
.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  font-weight: 850;
  color: #e63c48;
}
.eyebrow.light {
  color: #ffdb59;
}
.badge {
  white-space: nowrap;
  padding: 10px 13px;
  border-radius: 40px;
  background: #e9eefc;
  color: #253c91;
  font-size: 0.84rem;
  font-weight: 700;
}
.badge.warning {
  color: #8d5410;
  background: #fff0c7;
}
.today-panel {
  background: #253985;
  color: white;
  border-radius: 20px;
  padding: 27px 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  box-shadow: 0 14px 30px #2539851d;
}
.today-panel h2 {
  font-size: 1.65rem;
  margin: 8px 0;
}
.today-panel p {
  margin: 0;
  color: #dce4ff;
}
.button {
  border: 0;
  border-radius: 10px;
  padding: 12px 17px;
  font-weight: 800;
  min-height: 46px;
}
.button.white {
  background: white;
  color: #253985;
}
.button.primary {
  background: #253985;
  color: white;
}
.button.outline {
  background: white;
  color: #253985;
  border: 1px solid #96a3cf;
}
/* Consulta: calendário, cartões e programação. */
.content-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(360px, 1.05fr);
  gap: 20px;
}
.card {
  background: white;
  border: 1px solid #e1e6f0;
  border-radius: 18px;
  box-shadow: 0 7px 24px #23335a0a;
}
.calendar-card,
.details-card,
.admin-card {
  padding: 25px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}
.section-heading h2 {
  margin: 6px 0 0;
  font-size: 1.35rem;
}
.month-controls {
  display: flex;
  gap: 8px;
}
.month-controls button {
  border: 1px solid #dce2ef;
  border-radius: 9px;
  background: white;
  width: 38px;
  height: 38px;
  font-size: 1.5rem;
  color: #253985;
}
.weekdays,
.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  text-align: center;
}
.weekdays {
  font-size: 0.78rem;
  font-weight: 800;
  color: #69748a;
  margin: 19px 0 9px;
}
.calendar button {
  height: 57px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  color: #26314c;
  position: relative;
  font-weight: 700;
}
.calendar button:hover {
  background: #edf1fb;
}
.calendar button.selected {
  background: #263985;
  color: white;
}
.calendar button.today:not(.selected) {
  border-color: #263985;
}
.calendar button.outside {
  color: #abb3c1;
}
.calendar button .markers {
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.dot.blue {
  background: #314db2;
}
.dot.red {
  background: #f0444f;
}
.selected .dot.blue {
  background: #fff;
}
.legend {
  display: flex;
  gap: 18px;
  color: #6a7488;
  font-size: 0.8rem;
  margin-top: 18px;
}
.legend .dot {
  margin-right: 4px;
}
.room-block {
  border: 1px solid #e5e9f2;
  border-radius: 13px;
  overflow: hidden;
  margin: 13px 0;
}
.room-header {
  background: #f0f3fa;
  padding: 11px 14px;
  font-weight: 800;
  color: #263985;
}
.slot {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 9px;
  padding: 13px 14px;
  border-top: 1px solid #eef0f5;
  align-items: start;
}
.slot-time {
  font-size: 0.83rem;
  color: #596780;
  font-weight: 750;
}
.slot strong {
  display: block;
}
.slot small {
  display: block;
  color: #6b7586;
  margin-top: 3px;
  font-size: 0.83rem;
}
.note {
  background: #fff4df;
  border-left: 4px solid #f7ba34;
  border-radius: 8px;
  padding: 13px;
  margin-top: 16px;
  color: #544424;
}
.meal {
  background: #f6f8fc;
  border-radius: 10px;
  padding: 12px 14px;
  color: #485674;
  font-size: 0.88rem;
  line-height: 1.65;
}
.empty {
  padding: 20px;
  background: #f8f9fc;
  border-radius: 12px;
  color: #748099;
}
/* Administração: abas, formulários e listas. */
.admin-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
}
.admin-nav {
  padding: 10px;
  height: max-content;
  display: grid;
  gap: 5px;
}
.tab {
  text-align: left;
}
.admin-main {
  min-width: 0;
}
.admin-card h3 {
  margin: 25px 0 12px;
}
.admin-card input,
.admin-card textarea,
.admin-card select {
  border: 1px solid #cdd5e4;
  border-radius: 9px;
  padding: 11px;
  width: 100%;
  background: #fff;
  color: #1d2946;
  min-height: 44px;
}
.admin-card input[type="date"] {
  max-width: 190px;
}
.muted {
  color: #69758a;
  line-height: 1.5;
}
.field {
  display: grid;
  gap: 7px;
  font-size: 0.87rem;
  font-weight: 750;
  color: #4c5873;
}
.edit-room {
  border: 1px solid #dfe5f0;
  border-radius: 13px;
  margin: 18px 0;
  overflow: hidden;
}
.edit-room h3 {
  margin: 0;
  background: #eef2fb;
  padding: 13px 16px;
  color: #263985;
}
.edit-slot {
  display: grid;
  grid-template-columns: 80px repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  border-top: 1px solid #e8ecf4;
}
.edit-slot .slot-label {
  font-weight: 750;
  color: #394767;
  align-self: center;
}
.edit-slot .field:nth-child(4) {
  grid-column: 2/4;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.status {
  min-height: 20px;
  color: #237355;
  font-weight: 700;
}
.person-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e8ecf4;
  padding: 12px 0;
}
.person-row strong {
  display: block;
}
.person-row small {
  color: #6b7587;
}
.person-row button {
  border: 1px solid #e3b1b5;
  color: #ba2938;
  background: #fff;
  border-radius: 8px;
  padding: 9px;
}
.person-row.inactive {
  opacity: 0.55;
}
.person-form {
  border-top: 1px solid #e5e9f2;
  margin-top: 22px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0;
}
.time-row {
  display: grid;
  grid-template-columns: 160px repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}
.time-row strong {
  align-self: center;
}
.message-preview {
  white-space: pre-line;
  background: #e9f6ee;
  border-radius: 12px;
  padding: 17px;
  margin: 17px 0;
  line-height: 1.5;
  color: #193d2c;
}
/* Janelas de prévia e troca de senha. */
dialog {
  border: 0;
  border-radius: 17px;
  max-width: 480px;
  width: calc(100% - 30px);
  box-shadow: 0 25px 80px #151b3d66;
}
dialog::backdrop {
  background: #1018389c;
}
.dialog-content {
  padding: 16px;
}
.dialog-content h2 {
  margin: 10px 0;
}
.dialog-content p {
  line-height: 1.5;
  color: #59647a;
}
footer {
  text-align: center;
  padding: 20px;
  color: #78839b;
  font-size: 0.82rem;
}
/* Ajustes responsivos para tablets e celulares. */
@media (max-width: 820px) {
  .content-grid,
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-nav {
    display: flex;
    overflow: auto;
  }
  .tab {
    white-space: nowrap;
  }
  .page-heading {
    align-items: start;
  }
  .badge {
    display: none;
  }
}
@media (max-width: 600px) {
  .topbar {
    padding: 10px 14px;
    flex-wrap: wrap;
  }
  .brand img {
    width: 83px;
  }
  .brand {
    font-size: 1rem;
  }
  .topbar nav {
    width: 100%;
  }
  .topbar nav button {
    flex: 1;
  }
  .shell {
    padding: 23px 13px 45px;
  }
  .today-panel {
    padding: 22px;
    align-items: start;
    flex-direction: column;
  }
  .calendar-card,
  .details-card,
  .admin-card {
    padding: 18px;
  }
  .calendar button {
    height: 50px;
  }
  .edit-slot {
    grid-template-columns: 1fr 1fr;
  }
  .edit-slot .slot-label {
    grid-column: 1/3;
  }
  .edit-slot .field:nth-child(4) {
    grid-column: 1/3;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .time-row {
    grid-template-columns: 1fr 1fr;
  }
  .time-row strong {
    grid-column: 1/3;
  }
}
.login-card {
  max-width: 480px;
  margin: 35px auto;
  padding: 30px;
}
.login-card > img {
  width: 150px;
  max-width: 100%;
}
.login-card h1 {
  font-size: 1.8rem;
  margin: 9px 0;
}
.login-card > p {
  color: #64708a;
  line-height: 1.5;
}
.login-card form {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}
.login-card #login-error {
  color: #bd2737;
  margin: 0;
}
.check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.9rem;
  color: #52617b;
}
.check input {
  width: 18px;
  height: 18px;
}
.demo-access {
  margin-top: 22px;
  padding: 13px;
  background: #fff4df;
  border-radius: 10px;
  color: #604d20;
  font-size: 0.85rem;
  line-height: 1.5;
}
.row-actions {
  display: flex;
  gap: 5px;
}
.row-actions button {
  white-space: nowrap;
}
.admin-nav .master-only[hidden],
.person-form.master-only[hidden] {
  display: none !important;
}
@media (max-width: 600px) {
  .login-card {
    margin: 0;
    padding: 22px;
  }
  .row-actions {
    flex-direction: column;
  }
}
.welcome {
  margin: 0 0 20px;
  padding: 13px 18px;
  border-radius: 11px;
  background: #e8eefc;
  color: #24387f;
  font-weight: 750;
}
.password-wrap {
  display: flex;
  position: relative;
}
.password-wrap input {
  padding-right: 52px !important;
}
.password-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 40px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #33467d;
  font-size: 1.2rem;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  background: #edf1fb;
}
/* Melhor contraste das superfícies claras e seleção legível. */
.room-header,
.edit-room h3 {
  background: #dfe7fa;
}
.meal {
  background: #dfe8f9;
  color: #273b70;
  padding: 17px 18px;
  line-height: 1.5;
}
.meal > strong {
  font-size: 1rem;
}
.meal-period {
  display: grid;
  gap: 2px;
  margin-top: 10px;
}
.meal-period b {
  color: #263985;
}
.details-card,
.admin-card {
  background: #f8faff;
}
.edit-slot .field:last-child {
  grid-column: 2/4;
}
.edit-slot select {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .edit-slot .field:last-child {
    grid-column: 1/3;
  }
  .edit-slot select {
    width: 100%;
  }
}
#panel-people {
  background: #eaf1fd;
}
#panel-people .person-form {
  background: #dfe9fa;
  padding: 18px;
  border-radius: 13px;
  border: 1px solid #cfdcf4;
}
#panel-people .person-row {
  border-bottom-color: #cfdbef;
}
#panel-people .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
#panel-people .row-actions button {
  color: #263985;
  border-color: #a7b6dd;
}
#panel-people .row-actions [data-delete-person] {
  color: #b72c3c;
  border-color: #e3b1b5;
}
#account-list .person-row small {
  display: block;
  margin-top: 4px;
}
footer {
  display: grid;
  gap: 7px;
  padding: 25px 14px;
  color: #435579;
}
.footer-title {
  font-size: 1rem;
  font-weight: 700;
}
.footer-rights {
  font-size: 1.18rem;
  font-weight: 800;
  color: #263985;
}
.password-help {
  font-size: 0.87rem;
  color: #65738c;
  font-weight: 500;
}
.dialog-content .field {
  margin: 13px 0;
}
.dialog-content .field input {
  border: 1px solid #cdd5e4;
  border-radius: 9px;
  padding: 11px;
  width: 100%;
  background: #fff;
  color: #1d2946;
  min-height: 44px;
}
.dialog-content #password-status {
  color: #bb2938;
  font-weight: 700;
  min-height: 20px;
  margin: 10px 0;
}
@media (max-width: 600px) {
  .topbar nav {
    flex-wrap: wrap;
  }
  .topbar nav button {
    flex: 1 1 calc(50% - 5px);
  }
  .footer-rights {
    font-size: 1rem;
  }
}

/* Confirmações temporárias: piscam e desaparecem após seis segundos via JavaScript. */
.day-meals-section {
  margin: 18px 0;
  padding: 16px;
  border-radius: 12px;
  background: #e7edfa;
}
.day-meals-section .check {
  font-weight: 750;
}
#save-status.flash-status,
#person-status.flash-status,
#times-status.flash-status,
#account-status.flash-status,
#profile-status.flash-status {
  display: inline-block;
  background: #e2f7e9;
  color: #176238;
  border: 1px solid #a7dec0;
  border-radius: 9px;
  padding: 10px 13px;
  animation: confirmation-pulse 0.75s ease-in-out 8;
}
@keyframes confirmation-pulse {
  50% {
    background: #bdf0ce;
    box-shadow: 0 0 0 4px #bdf0ce66;
  }
}
/* Rodapé em duas linhas, conforme a referência enviada. */
footer {
  gap: 0;
  padding: 12px 12px 16px;
}
.footer-title {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  font-weight: 800;
  color: #263985;
  line-height: 1.2;
}
.footer-rights {
  font-size: clamp(0.65rem, 0.8vw, 0.75rem);
  font-weight: 800;
  color: #263985;
  line-height: 1.25;
}