.secure-access{min-height:100vh;display:grid;place-items:center;padding:28px;background:#edf1e4}.access-card{background:#fff;padding:34px;width:min(480px,100%);border:1px solid #dce4d3;border-radius:20px}.access-card>img{display:block;border-radius:12px;margin:22px 0}.access-back{font-size:13px;text-decoration:none}.access-card h1{margin:12px 0;font-size:30px}.access-card p{font-size:14px}.access-card input{margin-bottom:15px}.access-card form>button{width:100%}.access-switch{margin:18px 0 0;background:none;color:#24594b;padding:0;text-decoration:underline}.secure-panel main{margin:0;max-width:none;padding:24px 28px}.secure-header{display:flex;align-items:center;justify-content:space-between;gap:20px;background:white;border-bottom:1px solid #dce4d3;padding:18px 28px}.secure-header a{font-size:21px;font-weight:700;text-decoration:none}.secure-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.secure-tabs button{background:#e6edda;color:#24594b}.secure-tabs button.active{background:#24594b;color:white}.secure-panel .record-list{display:grid;gap:14px}.secure-panel .record-row{background:white;border:1px solid #dce4d3;border-radius:14px;padding:20px}.secure-panel .record-row h2{margin:0 0 8px}.secure-panel .record-row p{margin:8px 0}.secure-panel .notice{max-width:none}.secure-modal{position:fixed;inset:0;background:#173c3280;z-index:100;display:grid;place-items:center;padding:20px}.secure-modal>section{max-width:740px;width:100%;max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:25px}.secure-modal h2{margin-top:0}.secure-modal .check-label{display:flex;align-items:start;gap:10px;line-height:1.6;margin:12px 0}.secure-modal input[type=checkbox]{width:18px;flex:0 0 18px}.calendar-compact{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:20px 0}.calendar-compact>button{min-height:90px;background:#fff;border:1px solid #dce4d3;color:#24594b;text-align:left;padding:10px}.calendar-compact>button.active{border:2px solid #24594b;background:#eaf0df}.calendar-compact small{display:block;margin-top:7px;font-size:10px;line-height:1.5}.calendar-compact>span{text-align:center;font-size:12px;color:#6f7b68}.secure-panel .birth-contact{display:flex;justify-content:space-between;gap:18px}.secure-panel .stats{margin:20px 0}.secure-panel .error{color:#9b4032}.record-row .actions{justify-content:flex-start}@media(max-width:650px){.secure-header{padding:16px 20px}.secure-panel main{padding:18px}.access-card{padding:25px}.secure-modal{padding:12px}.secure-modal>section{padding:20px}.calendar-compact>button{min-height:80px;padding:6px 3px}.calendar-compact small{font-size:9px}.secure-panel .birth-contact{flex-direction:column}}
.access-card form>.password-toggle{width:auto;background:none;color:#24594b;padding:0;margin:0 0 12px;text-decoration:underline}
.pet-checklist{border:1px solid #dce4d3;border-radius:10px;padding:8px 16px}.pet-checklist legend{font-weight:700}.secure-modal>section{overflow-y:auto}
.pet-search{display:block;max-width:420px;margin:16px 0}.pet-list-name,.pet-profile-photo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pet-list-name img,.pet-profile-photo img{object-fit:cover;border-radius:12px}.pet-profile-photo label{flex:1;min-width:180px}
.autosave-fields{border:0;padding:0;margin:0;min-width:0}
.pet-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin-top:18px}.pet-media-grid img,.pet-media-grid video{display:block;width:100%;max-height:320px;object-fit:contain;border-radius:10px;background:#f1f4ed}.pet-media form>button{margin-top:12px}
.media-pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px}.media-picker{position:relative;display:flex;align-items:center;gap:8px;padding:12px;border:1px solid #cbd9c3;border-radius:10px;background:#f1f5ec;cursor:pointer}.media-picker span{font-size:20px}.media-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}.media-picker:focus-within{outline:2px solid #24594b}.pet-media-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),290px))}.media-frame{position:relative;width:100%;height:190px;padding:0;overflow:hidden;background:#edf2e9;color:#24594b;border:1px solid #dce4d3}.media-frame img{width:100%;height:100%;object-fit:contain}.media-play{font-size:38px}.media-frame-action{position:absolute;bottom:8px;right:8px;padding:5px 9px;border-radius:6px;background:#214e42;color:white;font-size:12px}.profile-frame{padding:3px;background:#e9efe3;border:1px solid #cbd9c3;border-radius:12px}.profile-frame img{display:block}.media-viewer{border:0;padding:0;border-radius:14px;max-width:min(92vw,900px);max-height:92dvh;background:#fff}.media-viewer::backdrop{background:#102d26d9}.media-viewer section{padding:14px}.media-viewer header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}.media-viewer h3{margin:0}.media-viewer img,.media-viewer video{display:block;max-width:100%;max-height:75dvh;margin:auto;object-fit:contain}
@media(max-width:700px){
 .login-page{display:grid;grid-template-columns:minmax(0,1fr)}
 .login-access-header{position:static;grid-row:1;width:100%;box-sizing:border-box;padding:10px 16px;flex-wrap:wrap;justify-content:space-between}
 .login-entry{grid-row:2;width:100%;max-width:none;box-sizing:border-box;padding:18px 16px 24px;min-width:0}
 .login-story{grid-row:3;padding:20px 16px}
 .login-story h1{font-size:clamp(30px,8vw,42px)}
 .login-entry h2,.access-card h1{font-size:26px}
 .login-entry input,.secure-access input,.secure-panel input,.secure-panel select,.secure-panel textarea{font-size:16px;max-width:100%;min-width:0}
 .login-entry button,.login-entry .tutor-access,.login-access-header button,.secure-access button,.secure-panel button,.media-picker{min-height:44px}
 .secure-access{box-sizing:border-box;padding:16px;align-items:start}
 .access-card{box-sizing:border-box;width:100%;padding:20px}
 .secure-panel main{padding:14px;min-width:0}
 .secure-header{padding:10px 14px;gap:8px}
 .secure-header a{font-size:17px}
 .secure-panel .intro,.secure-panel .toolbar{display:flex;flex-wrap:wrap;gap:10px}
 .secure-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:2px 2px 7px;margin:14px 0;scrollbar-width:thin}
 .secure-tabs button{flex:0 0 auto;white-space:nowrap}
 .secure-panel .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .secure-panel .record-row{padding:14px;overflow-wrap:anywhere}
 .calendar-compact{gap:3px}
 .calendar-compact>button{padding:5px 2px;min-height:56px;overflow:hidden}
 .calendar-compact small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .secure-modal{padding:8px}
 .secure-modal>section{box-sizing:border-box;max-width:100%;max-height:94dvh;padding:15px}
 .secure-modal .fields,.secure-panel .pet-media .fields{grid-template-columns:minmax(0,1fr)}
 .secure-modal .actions{display:flex;flex-wrap:wrap;gap:8px}
 .secure-modal .actions button{flex:1 1 125px}
 .pet-media-grid{grid-template-columns:minmax(0,1fr)}
 .media-viewer{width:calc(100vw - 20px);max-width:none}
}
dialog.media-viewer{width:max-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 20px);margin:auto;padding:0;background:transparent;color:#fff;box-shadow:none}
dialog.media-viewer::backdrop{background:rgba(8,18,15,.94)}
dialog.media-viewer>section{max-width:100%;padding:0;background:transparent}
dialog.media-viewer header{padding:0 0 10px;margin:0;color:white}
dialog.media-viewer header button{min-height:44px;background:#24594b;color:white}
dialog.media-viewer img,dialog.media-viewer video{display:block;width:min(900px,calc(100vw - 24px));height:min(76dvh,780px);max-width:100%;max-height:76dvh;object-fit:contain;background:transparent}
.media-picker.camera-record{color:#24594b;font:inherit;text-align:left}.media-capture-preview{width:100%;max-height:260px;background:#102d26;border-radius:10px}
.pet-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pet-card-photo{margin-bottom:12px}
.pet-media-grid .media-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:transparent}
.pet-media-grid .media-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#214e42e6;color:#fff;font-size:21px}
.media-more{margin-top:14px}
@media(max-width:520px){.pet-cards{grid-template-columns:minmax(0,1fr)}}
.pet-identity{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.pet-identity img{width:36px;height:36px;object-fit:cover;border-radius:8px;border:1px solid #cbd9c3}.pet-vaccines{margin-top:22px;padding-top:16px;border-top:1px solid #dce4d3}.pet-vaccines h3{margin-top:0}.pet-vaccines ul{padding-left:20px}
.pet-media-grid .media-frame,.pet-card-photo{aspect-ratio:4/3;height:auto;border-radius:14px;background:#214e42}.media-frame img,.pet-media-grid .media-frame video{width:100%;height:100%;max-height:none;object-fit:cover}.media-frame .media-frame-action{inset:auto 0 0;padding:15px 13px 10px;border-radius:0;background:linear-gradient(transparent,rgba(9,25,20,.92));text-align:left;color:#fff}.pet-identity img,.profile-frame img{object-fit:cover;border-radius:9px}
.secure-tabs.tutor-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:640px;overflow:visible}.tutor-shortcuts button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:86px;padding:10px;border-radius:14px;white-space:normal;text-align:center;font-weight:700}.tutor-shortcut-icon{font-size:28px;line-height:1.15}.tutor-shortcuts button:focus-visible{outline:2px solid #24594b;outline-offset:2px}
@media(min-width:850px){.secure-tabs.tutor-shortcuts{grid-template-columns:repeat(6,minmax(0,1fr));max-width:1050px}}
.tutor-media-alert{position:fixed;right:16px;bottom:16px;z-index:50;box-sizing:border-box;width:min(390px,calc(100% - 32px));padding:18px;border:1px solid #cbd9c3;border-radius:14px;background:#f1f5ec;box-shadow:0 10px 30px #142c2140}.tutor-media-alert p{margin:8px 0 12px}.tutor-media-alert .actions{display:flex;flex-wrap:wrap;gap:8px}
.media-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:14px 0}.media-filters label{min-width:130px}.media-filters input,.media-filters select{margin:4px 0 0}
.secure-header .panel-brand{display:inline-flex;align-items:center}.panel-brand img{display:block;width:54px;height:54px;object-fit:contain;border-radius:10px}@media(min-width:850px){.secure-tabs.staff-shortcuts{grid-template-columns:repeat(9,minmax(0,1fr));max-width:1450px}}
.secure-panel .tutor-media-alert{inset:auto 16px 16px auto;height:auto;max-height:calc(100dvh - 32px);overflow:auto;margin:0}
.secure-panel main,.secure-access .access-card{color:#1b342b}.secure-panel main p,.secure-panel main label,.secure-panel main .small,.secure-access .access-card p,.secure-access .access-card label{color:#34483f}.secure-panel main .error,.secure-access .access-card .error{color:#8e3025}.secure-panel main .success{color:#1c6047}.pet-card-details{margin:8px 0 14px;display:grid;gap:8px}.pet-card-details dt{font-size:12px;font-weight:700;color:#294337}.pet-card-details dd{margin:2px 0 0;line-height:1.45;color:#263e33}.pet-notes{white-space:pre-line}.pet-card-vaccine{display:grid;gap:4px;background:#eff4e9;padding:10px;border-radius:8px;margin:0 0 10px;color:#294337;font-size:13px;line-height:1.4}

/* Shared navigation for the team and tutor panels. */
.panel-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}
.panel-layout > .secure-header {
  grid-column: 1 / -1;
}
.panel-layout > main {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.panel-layout > .panel-navigation {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: .35rem;
  margin: 0;
  padding: 1rem;
  background: #204b40;
  border-radius: 0 0 1rem 0;
}
.panel-layout .panel-navigation button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: .7rem;
  min-height: 44px;
  padding: .55rem .75rem;
  background: transparent;
  color: #fff;
}
.panel-layout .panel-navigation button:hover,
.panel-layout .panel-navigation button.active {
  background: #e9efdb;
  color: #15382f;
}
.panel-layout .panel-navigation .tutor-shortcut-icon {
  width: 1.5rem;
  flex: 0 0 auto;
  text-align: center;
}
.panel-layout:not(:has(> .panel-navigation)) > main {
  grid-column: 1 / -1;
}
@media (max-width: 740px) {
  .panel-layout {
    display: block;
  }
  .panel-layout > .panel-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 0;
    padding: .65rem;
  }
}

.panel-layout > .panel-navigation {
  background: #fff;
  border: 1px solid #e0e6d7;
  border-width: 0 1px 0 0;
  border-radius: 0;
  align-self: stretch;
}
.panel-layout .panel-navigation button {
  color: #25473d;
}
.panel-layout .sidebar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #204b40;
  text-decoration: none;
  font-weight: 750;
  margin: .25rem .5rem .85rem;
}
.panel-layout .sidebar-brand img { border-radius: .65rem; }
.agenda-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
  gap: 1rem;
  align-items: start;
}
.agenda-day {
  border: 1px solid #e0e6d7;
  background: #fff;
  border-radius: .85rem;
  padding: 1rem;
  min-width: 0;
}
.agenda-day > h2 { margin-top: 0; }
@media (max-width: 1100px) { .agenda-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 740px) {
  .panel-layout .sidebar-brand { display: none; }
  .panel-layout > .panel-navigation { border-width: 0 0 1px; }
}

.pet-section { margin-block: 1rem; }
.pet-section > :is(h2,h3) { margin-top: 0; }
.pet-detail { margin-block: .75rem; }
.pet-detail summary { color: #204b40; font-weight: 650; cursor: pointer; padding-block: .45rem; }

.booking-prices { min-width: 0; }
.booking-price-table { overflow-x: auto; }
.booking-price-table table { width: 100%; border-collapse: collapse; }
.booking-price-table :is(th,td) { text-align: left; padding: .55rem; border-bottom: 1px solid #dde5d7; }
.booking-price-table label { display: flex; align-items: center; gap: .5rem; }
.booking-price-table input { width: auto; }

.secure-panel label, .secure-access label {
  color: #283e35;
  font-weight: 650;
}
.br-date { display: block; position: relative; min-width: 0; }
.br-date > input { width: 100%; box-sizing: border-box; }
.br-date > span {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: calc(100% - 3.15rem);
  display: flex;
  align-items: center;
  padding-inline-start: .7rem;
  border-radius: .45rem;
  background: #fff;
  color: #26382e;
  font-weight: 500;
  pointer-events: none;
}
.br-date:focus-within > span { display: none; }

@media (max-width: 740px) {
  .panel-layout { display: grid; grid-template-columns: clamp(5.2rem, 23vw, 8rem) minmax(0, 1fr); }
  .panel-layout > .panel-navigation {
    display: flex;
    flex-direction: column;
    padding: .4rem;
    border-width: 0 1px 0 0;
  }
  .panel-layout .panel-navigation button {
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    padding: .35rem .12rem;
    text-align: center;
    font-size: .71rem;
    overflow-wrap: anywhere;
  }
  .panel-layout > main { padding-inline: .65rem; }
  .panel-layout .calendar-compact { overflow-x: auto; }
  .panel-layout .toolbar > label { min-width: 0; max-width: 100%; }
}

.br-date:not(:focus-within) > input { color: transparent; }
.br-date:not(:focus-within) > input::-webkit-datetime-edit { opacity: 0; }
.br-date > span { inset: 2px 2.25rem 2px .75rem; width: auto; padding: 0; background: transparent; }
.br-date > input { min-width: 0; }
.panel-layout .panel-navigation button { color: #204b40; font-weight: 700; }
.panel-navigation .tutor-shortcut-icon { display: grid; place-items: center; }
.secure-panel :is(h1,h2,h3,h4) { color: #204b40; font-weight: 750; }
.secure-panel .pet-profile-photo { align-items: center; flex-wrap: wrap; gap: .7rem; }
.secure-panel .pet-profile-photo button { margin: 0; }
@media (max-width: 740px) {
  .secure-panel .intro, .secure-panel .media-filters { flex-wrap: wrap; }
  .secure-panel .media-filters > label { min-width: 0; max-width: 100%; }
}

/* Keep action labels intact in narrow cards and dialogs. */
.secure-panel :is(button, .whatsapp-link) {
  overflow-wrap: normal;
  word-break: normal;
}
.secure-panel .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.secure-panel .actions > :is(button, .whatsapp-link) {
  flex: 0 0 auto;
  min-height: 42px;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}
.secure-panel .actions > .whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 740px) {
  .secure-panel .record-row .actions > :is(button, .whatsapp-link),
  .secure-panel .secure-modal .actions > :is(button, .whatsapp-link) {
    flex: 0 0 100%;
    width: 100%;
    min-height: 44px;
  }
  .secure-panel .panel-navigation button { overflow-wrap: normal; }
}

.secure-panel .profile-list-card{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.secure-panel .profile-list-card h2{overflow-wrap:anywhere}
.profile-list-card .profile-list-placeholder{display:grid;place-items:center;aspect-ratio:4/3;margin-bottom:12px;border-radius:12px;background:#eef2e8;color:#40594d}
.profile-list-card > .actions{margin-top:auto;padding-top:12px;align-items:center;flex-wrap:wrap}
.profile-list-card > .actions button{white-space:nowrap}

.secure-panel .profile-list-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:8px;align-items:start}
.secure-panel .profile-list-card > h2{grid-row:2;margin:0}
.profile-list-card > .pet-detail{grid-row:3;margin:0}
.profile-list-card > .actions{grid-row:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;align-self:start;margin:0;padding:0;gap:8px}
.profile-tutor-card > .actions{grid-template-rows:auto minmax(42px,auto)}
.profile-tutor-card > .actions > .whatsapp-link{grid-column:1/-1;grid-row:2;text-align:center}

.secure-panel .cep-field{display:flex;align-items:flex-end;gap:8px}
.secure-panel .cep-field label{width:min(100%,220px);min-width:0}
.secure-panel .cep-field button{flex:none;min-height:40px;padding:8px 12px;white-space:nowrap}
.secure-panel .cep-field button,.secure-panel .media-picker{display:inline-flex;align-items:center;gap:7px}
.secure-panel .cep-field svg,.secure-panel .media-picker svg,.secure-panel button:has(>svg:first-child) > svg{width:16px;height:16px;flex:none;vertical-align:middle}

.secure-panel .cep-field{display:grid;grid-template-columns:minmax(0,180px) max-content;align-items:end}
.secure-panel .cep-field label{width:100%;margin:0}
.secure-panel .cep-field button{width:auto;height:39px;min-height:39px;margin:0;font-size:13px}
.secure-panel .pet-profile-photo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.secure-panel .pet-profile-photo .media-pickers{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:auto;flex:0 1 auto}
.secure-panel .pet-profile-photo .media-pickers > :is(label,button){display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto;min-width:0;min-height:34px;margin:0;padding:5px 7px;font-size:12px;white-space:nowrap}
.secure-panel .pet-profile-photo .media-pickers svg{width:13px;height:13px}

.secure-panel .profile-message-card > p{grid-row:3;margin:0;overflow-wrap:anywhere}
.secure-panel .profile-message-card > :is(.profile-message-action,.profile-message-unavailable){grid-row:4;margin:0;align-self:stretch}
.secure-panel .profile-message-card > .profile-message-action{width:100%;padding:10px 12px;min-height:44px;text-wrap:balance}

.secure-panel .profile-message-card{grid-template-columns:minmax(0,1fr)}.profile-message-card > *{grid-column:1}.profile-message-card > :is(.pet-card-photo,.profile-list-placeholder){grid-row:1}
.vaccine-table-wrap{overflow:auto;margin:12px 0 18px}
.vaccine-table{width:100%;border-collapse:collapse;text-align:left}
.vaccine-table :is(th,td){padding:8px;border-bottom:1px solid #dce4d3;vertical-align:middle}
.vaccine-table thead{background:#eef2e8}
.vaccine-actions{display:flex;gap:6px}
.secure-panel .vaccine-actions button{width:auto;min-height:36px;padding:6px 10px;white-space:nowrap}
