/* PetDesk Design System — camada única e compartilhada (carregada depois de responsive.css).
   Fonte de verdade de tokens, componentes e estados para os temas CLARO e ESCURO.
   Hierarquia de superfícies:  canvas (--bg-primary) → seção (--bg-sunken) → card (--bg-card) → conteúdo (--bg-input) → ação (botões). */

/* ───────────── Tokens ───────────── */
:root {
  --ds-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;
  --ctl-h: 34px;          /* altura padrão de botões/inputs (desktop) */
  --ctl-h-sm: 28px;
  --ctl-h-lg: 44px;
  --sidebar-w: 232px;
  --header-h: 52px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 32%, transparent);
}
/* Escuro (padrão) */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg-primary: #0D0F18; --bg-secondary: #141720; --bg-sunken: #10131C; --bg-card: #1C2030; --bg-card-hover: #242A40; --bg-input: #141825;
  --bg-overlay: rgba(6, 8, 16, .66);
  --brand-500: #7C6EFA; --brand-600: #6B5CF0; --brand-400: #A79DFC; --brand-subtle: #262255; --text-brand: #B3AAFD; --text-on-brand: #0D0F18;
  --success: #34D27B; --success-subtle: #0B2E1B; --warning: #F5B942; --warning-subtle: #2F2209; --danger: #FF8A8A; --danger-subtle: #321012; --border-danger: #F05252;
  --info: #62B6F5; --info-subtle: #0E2638;
  --text-primary: #F1F5F9; --text-secondary: #B2BDD0; --text-muted: #8B98B0; --text-inverse: #0D0F18;
  --border-default: #2E3553; --border-strong: #5E688F; --border-hover: #7C86B8;
  --toggle-off: #59628A; --toggle-on: #7C6EFA;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35); --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 6px 18px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}
/* Claro: cada nível de superfície é visivelmente diferente do vizinho */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #E4E9F1;      /* canvas */
  --bg-secondary: #F7F8FB;    /* sidebar / barras */
  --bg-sunken: #EDF0F6;       /* seções, cabeçalhos de tabela */
  --bg-card: #FFFFFF;
  --bg-card-hover: #EEF1F8;
  --bg-input: #F3F5F9;
  --bg-overlay: rgba(15, 23, 42, .5);
  --brand-500: #5A48D8; --brand-600: #4B39C4; --brand-400: #5A48D8; --brand-subtle: #E8E4FF; --text-brand: #4B39C4; --text-on-brand: #FFFFFF;
  --success: #0E7A3D; --success-subtle: #D9F2E3; --warning: #8A5200; --warning-subtle: #FBE9C6; --danger: #B42318; --danger-subtle: #FADBD8; --border-danger: #D92D20;
  --info: #1A5FA5; --info-subtle: #D9E9F8;
  --text-primary: #131A2B; --text-secondary: #414C67; --text-muted: #5B6681; --text-inverse: #FFFFFF;
  --border-default: #BAC4D5; --border-strong: #7E8AA1; --border-hover: #5E6B86;
  --toggle-off: #7A869C; --toggle-on: #5A48D8;
  --shadow-card: 0 1px 2px rgba(19, 26, 43, .10), 0 1px 1px rgba(19, 26, 43, .05); --shadow-pop: 0 12px 32px rgba(19, 26, 43, .22);
  --shadow-sm: 0 1px 2px rgba(19, 26, 43, .10); --shadow-md: 0 6px 18px rgba(19, 26, 43, .12); --shadow-lg: 0 18px 48px rgba(19, 26, 43, .2);
}

/* ───────────── Base ───────────── */
html, body, .frame { background: var(--bg-primary); color: var(--text-primary); }
body { font-family: var(--ds-font); font-size: 14px; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
a { color: var(--text-brand); }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }
.t-h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--text-primary); }
.t-h2 { font-size: 16px; font-weight: 650; letter-spacing: -.005em; color: var(--text-primary); }
.t-h3 { font-size: 14px; font-weight: 650; color: var(--text-primary); }
.t-display { letter-spacing: -.02em; }
.t-caption { font-size: 12px; }
.t-label { font-size: 13px; font-weight: 550; }
.t-body-md { font-size: 13px; }
.c-secondary { color: var(--text-secondary); } .c-muted { color: var(--text-muted); }
.c-danger { color: var(--danger); } .c-warning { color: var(--warning); } .c-success { color: var(--success); }
#page-main .t-h1 { font-size: 20px; }
#page-main .t-h2 { font-size: 16px; }

/* Conteúdo da página: mais compacto, mantendo respiro */
#page-main > div:not([id^="modal"]):not(.modal-overlay):not([hidden])[style*="padding"] { padding: 18px 24px !important; gap: 14px !important; }
#page-main > :not([id^="modal"]) { max-width: 1680px; }

/* ───────────── Botões ───────────── */
.btn, #page-main .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 0; height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-md);
  font: 600 13px/1 var(--ds-font); letter-spacing: 0; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transform: none;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover { text-decoration: none; }
.btn-md, #page-main .btn-md { height: var(--ctl-h); padding: 0 14px; font-size: 13px; }
.btn-sm, #page-main .btn-sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); gap: 5px; }
.btn-lg, #page-main .btn-lg { height: var(--ctl-h-lg); padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn-primary, #page-main .btn-primary { background: var(--brand-500); color: var(--text-on-brand); border-color: var(--brand-600); box-shadow: var(--shadow-sm); }
.btn-primary:hover, #page-main .btn-primary:hover { background: var(--brand-600); color: var(--text-on-brand); box-shadow: var(--shadow-sm); transform: none; }
.btn-secondary, #page-main .btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover, #page-main .btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: var(--text-primary); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--border-danger); }
:root:not([data-theme="light"]) .btn-danger { color: #1A0505; }
.btn-danger:hover { filter: brightness(.94); }
.btn-danger-outline { background: var(--bg-card); color: var(--danger); border: 1px solid var(--danger); }
.btn-danger-outline:hover { background: var(--danger-subtle); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
:root:not([data-theme="light"]) .btn-success { color: #04210F; }
.btn-success:hover { filter: brightness(.94); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.btn-icon, #page-main .btn-icon {
  display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h); height: var(--ctl-h); min-height: 0; padding: 0;
  border-radius: var(--r-md); background: transparent; color: var(--text-secondary); border: 1px solid transparent; cursor: pointer; box-shadow: none;
}
.btn-icon:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.btn-icon.bordered, #page-main .btn-icon.bordered { border-color: var(--border-strong); background: var(--bg-card); }
.btn:active:not(:disabled), .btn-icon:active:not(:disabled) { filter: brightness(.92); }
.btn:focus-visible, .btn-icon:focus-visible { outline: 0; box-shadow: var(--ring); }
.btn:disabled, .btn[disabled], .btn-icon:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--text-on-brand); border-right-color: transparent; border-radius: 50%; animation: ds-spin .7s linear infinite; }
.btn-secondary.is-loading::after { border-color: var(--text-primary); border-right-color: transparent; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
/* Ações rápidas (Check-in / Check-out) — maiores só onde a ação exige destaque */
.btn-action { height: 40px; padding: 0 18px; font-size: 14px; font-weight: 700; border-radius: 10px; }

/* ───────────── Inputs ───────────── */
.input, #page-main .input {
  height: var(--ctl-h); min-height: 0; padding: 0 10px; gap: 8px; display: flex; align-items: center;
  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text-primary);
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.input:hover { border-color: var(--border-hover); }
.input:focus-within, #page-main .input:focus-within { border-color: var(--brand-500); box-shadow: var(--ring); background: var(--bg-card); }
.input.is-error, .input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-subtle); }
.input input, .input select { background: transparent; border: 0; outline: 0; box-shadow: none; color: var(--text-primary); font: 13px var(--ds-font); width: 100%; height: 100%; padding: 0; }
.input input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
.input:has(input:disabled), .input.is-disabled { opacity: .6; background: var(--bg-sunken); cursor: not-allowed; }
.select, select.select, #page-main select {
  height: var(--ctl-h); min-height: 0; padding: 0 10px; background-color: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); font: 13px var(--ds-font);
}
#page-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), #page-main textarea {
  background-color: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--r-md); font: 13px var(--ds-font);
}
#page-main .input input, #page-main .input select { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#page-main input:not([type="checkbox"]):not([type="radio"]):not(.input input):focus, #page-main select:focus, #page-main textarea:focus { border-color: var(--brand-500); box-shadow: var(--ring); outline: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-500); width: 16px; height: 16px; }
.field { gap: 4px; }
.field > .t-caption, .field > span.t-caption, label > .t-caption { color: var(--text-secondary); font-weight: 600; font-size: 12px; }
.field-error { color: var(--danger); font-size: 12px; font-weight: 550; }

/* Grids de formulário adaptativos: 2–4 campos por linha no desktop */
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-items: end; }
.form-grid .span-2 { grid-column: span 2; } .form-grid .span-all { grid-column: 1 / -1; }
.form-grid.cols-2 { --cols: 2; } .form-grid.cols-4 { --cols: 4; }
@media (max-width: 1100px) { .form-grid, .form-grid.cols-4 { --cols: 2; } }
@media (max-width: 640px) { .form-grid, .form-grid.cols-2, .form-grid.cols-4 { --cols: 1; } .form-grid .span-2 { grid-column: auto; } }

/* ───────────── Cards ───────────── */
.card, #page-main .card, #page-main .kpi {
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  transform: none; transition: border-color .12s, box-shadow .12s;
}
#page-main .kpi { padding: 12px 14px; gap: 6px; }
#page-main .kpi:hover { transform: none; box-shadow: var(--shadow-md); }
.card-secondary { background: var(--bg-sunken); box-shadow: none; }
.card-info { background: var(--info-subtle); border-color: color-mix(in srgb, var(--info) 35%, var(--border-default)); box-shadow: none; }
.section { background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--r-lg); padding: 14px; }
hr, .divider { border: 0; height: 1px; background: var(--border-default); }

/* ───────────── Tabelas ───────────── */
.table, #page-main .table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: visible; border-radius: 0; }
.table th, #page-main .table th {
  height: 34px; padding: 0 12px; background: var(--bg-sunken); color: var(--text-secondary); font: 650 11px/1 var(--ds-font);
  letter-spacing: .05em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.table td, #page-main .table td { height: 46px; padding: 6px 12px; border-bottom: 1px solid var(--border-default); font-size: 13px; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td, #page-main .table tbody tr:hover td { background: var(--bg-card-hover); }
.table tbody tr.is-selected td, .table tbody tr[aria-selected="true"] td { background: var(--brand-subtle); box-shadow: inset 0 0 0 0 transparent; }
.table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--brand-500); }
.table .row-danger td, #page-main .table .row-danger td { background: var(--danger-subtle); box-shadow: none; }
.table .row-danger td:first-child { box-shadow: inset 3px 0 0 var(--border-danger); }
.table .row-warning td, #page-main .table .row-warning td { background: var(--warning-subtle); }
.table th:first-child { border-top-left-radius: var(--r-lg); } .table th:last-child { border-top-right-radius: var(--r-lg); }
.card > .table:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
.table .actions { text-align: right; white-space: nowrap; width: 1%; }
.table-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.group-head td { height: 26px !important; padding: 0 12px !important; font-size: 11px; font-weight: 650; letter-spacing: .05em; color: var(--text-secondary); background: var(--bg-sunken) !important; }

/* ───────────── Badges / Chips ───────────── */
.chip, .badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font: 600 11px/1 var(--ds-font); white-space: nowrap; width: fit-content; border: 1px solid transparent;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip-success, .badge-success { background: var(--success-subtle); color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.chip-danger, .badge-danger { background: var(--danger-subtle); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); font-weight: 700; }
.chip-warning, .badge-warning { background: var(--warning-subtle); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.chip-brand, .badge-info { background: var(--brand-subtle); color: var(--text-brand); border-color: color-mix(in srgb, var(--brand-500) 35%, transparent); }
.chip-neutral, .badge-neutral { background: var(--bg-sunken); color: var(--text-secondary); border-color: var(--border-default); }
.chip-muted, .badge-muted { background: var(--bg-sunken); color: var(--text-muted); border-color: var(--border-default); }
#page-main .badge:not([class*="badge-"]) { background: var(--bg-sunken) !important; }

/* ───────────── Toggles: sempre ON / OFF legíveis ───────────── */
.toggle {
  position: relative; flex: none; width: 50px; height: 24px; border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s; box-sizing: border-box;
}
.toggle.on { background: var(--toggle-on); border-color: var(--brand-600); }
.toggle.off { background: var(--toggle-off); border-color: var(--border-strong); }
:root:not([data-theme="light"]) .toggle.off { background: var(--toggle-off); }
.toggle::after { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font: 800 9px/1 var(--ds-font); letter-spacing: .04em; color: #fff; pointer-events: none; }
:root:not([data-theme="light"]) .toggle.on::after { color: #0D0F18; }
.toggle.on::after { content: "ON"; left: 8px; }
.toggle.off::after { content: "OFF"; right: 7px; }
.toggle .toggle-thumb, .toggle-thumb { position: absolute; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: left .15s; }
.toggle.on .toggle-thumb { left: 28px; } .toggle.off .toggle-thumb { left: 2px; }
.toggle:focus-visible { outline: 0; box-shadow: var(--ring); }
.toggle[aria-disabled="true"], .toggle.is-disabled { opacity: .5; cursor: not-allowed; }
/* Toggle do tema (barra lateral) */
.sidebar-toggle-row { gap: 10px; }

/* ───────────── Tabs ───────────── */
.tabs, #page-main [role="tablist"] { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; height: auto; }
.tab, #page-main .tab {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; min-height: 0; padding: 0 14px; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; background: transparent; color: var(--text-secondary); font: 600 13px/1 var(--ds-font); cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; white-space: nowrap;
}
.tab:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.tab.active, .tab[aria-selected="true"], #page-main .tab.active { color: var(--text-brand); border-bottom-color: var(--brand-500); background: transparent; }
.tab .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bg-sunken); border: 1px solid var(--border-default); color: var(--text-secondary); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.tab.active .count { background: var(--brand-subtle); border-color: transparent; color: var(--text-brand); }

/* ───────────── Menu "Mais ▾" (dropdown contextual) ───────────── */
.menu { position: relative; display: inline-flex; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 500; min-width: 190px; padding: 4px; display: none; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.menu.is-open > .menu-list { display: flex; }
.menu.drop-up > .menu-list { top: auto; bottom: calc(100% + 4px); }
.menu.align-left > .menu-list { right: auto; left: 0; }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-primary); font: 550 13px/1.2 var(--ds-font); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--bg-card-hover); outline: 0; text-decoration: none; }
.menu-item svg { flex: none; color: var(--text-secondary); }
.menu-item.danger { color: var(--danger); } .menu-item.danger svg { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-subtle); }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--border-default); }

/* ───────────── Modais ───────────── */
/* Estrutura do modal vale para todas as páginas (antes cada página trazia a sua e Pets ficou sem).
   Fica acima da barra superior fixa (z-index 850), que não pode aparecer em destaque sobre o fundo escurecido. */
.modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.modal-overlay, #page-main > [id^="modal"] { background: var(--bg-overlay); z-index: 9100; }
.modal { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.modal > form { display: flex; flex-direction: column; min-height: 0; }
.modal-header { display: flex; align-items: center; justify-content: space-between; flex: none; }
.modal-body { display: flex; overflow-y: auto; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; flex: none; }
/* Campo obrigatório: asterisco no rótulo. */
.field:has(input:required, select:required, textarea:required) > .t-caption:first-child::after { content: " *"; color: var(--danger); font-weight: 700; }
.modal, #page-main [role="dialog"] { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: min(640px, calc(100vw - 24px)); }
.modal-sm { width: min(420px, calc(100vw - 24px)); }
.modal-header { height: 52px; padding: 0 18px; border-bottom: 1px solid var(--border-default); }
.modal-body { padding: 16px 18px; gap: 16px; }
.modal-footer { height: 58px; padding: 0 18px; gap: 8px; border-top: 1px solid var(--border-default); background: var(--bg-sunken); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.petdesk-dialog { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); --bg-input: var(--bg-input); }
.petdesk-dialog::backdrop { background: var(--bg-overlay); }
.petdesk-dialog header { background: var(--bg-card); border-bottom: 1px solid var(--border-default); padding: 12px 16px; }
.petdesk-dialog h2 { font-size: 16px; }
.petdesk-dialog input, .petdesk-dialog select, .petdesk-dialog textarea { padding: 0 10px; height: var(--ctl-h); font-size: 13px; border-color: var(--border-strong); background: var(--bg-input); }
.petdesk-dialog textarea { height: auto; padding: 8px 10px; }
.petdesk-dialog .btn { min-height: 0; white-space: nowrap; }
.dialog-close { width: 32px; height: 32px; font-size: 22px; color: var(--text-secondary); border-radius: var(--r-md); }
.dialog-close:hover { background: var(--bg-card-hover); }
.confirm-box { width: min(440px, calc(100vw - 24px)); background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--text-primary); }
.confirm-box h2 { margin: 0; font-size: 16px; }
.confirm-box p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.confirm-box ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.confirm-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--danger-subtle); color: var(--danger); flex: none; }

/* Avatar */
.avatar { background: var(--brand-subtle); color: var(--text-brand); font-weight: 650; border: 1px solid color-mix(in srgb, var(--brand-500) 25%, transparent); }

/* ───────────── Barra lateral agrupada ───────────── */
.sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); padding: 14px 10px 10px; background: var(--bg-secondary); border-right: 1px solid var(--border-default); box-shadow: none; border-radius: 0; }
.sidebar-brand { min-height: 40px; padding: 0 8px; gap: 10px; }
.sidebar-brand svg { width: 24px; height: 24px; filter: none; }
.sidebar-brand .t-h2 { font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.sidebar-empresa-chip { margin: 8px 2px 0; padding: 6px 8px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-card); }
.sidebar-empresa-chip span { color: var(--text-secondary); font-size: 12px; max-width: 150px; }
.sidebar-nav { margin-top: 12px; gap: 1px; overflow-y: auto; }
.nav-group { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 26px; padding: 0 10px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font: 700 10px/1 var(--ds-font); letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm);
}
.nav-group-toggle:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.nav-group-toggle svg { transition: transform .15s; }
.nav-group.is-collapsed > .nav-group-toggle svg { transform: rotate(-90deg); }
.nav-group.is-collapsed > .nav-item:not(.active) { display: none; }
.nav-item { height: 34px; margin: 0; padding: 0 10px; gap: 10px; border: 0; border-radius: var(--r-md); color: var(--text-secondary); transform: none; box-shadow: none; }
.nav-item .t-label { font-size: 13px; font-weight: 600; }
.nav-item:hover { background: var(--bg-card-hover); color: var(--text-primary); transform: none; text-decoration: none; }
.nav-item.active { background: var(--brand-subtle); box-shadow: inset 3px 0 0 var(--brand-500); }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:not(.active) > span { color: var(--text-secondary) !important; }
.nav-item.active > span { color: var(--text-brand) !important; font-weight: 700; }
.nav-item:not(.active) > svg { stroke: var(--text-secondary) !important; }
.nav-item.active > svg { stroke: var(--text-brand) !important; }
.sidebar-toggle-row { padding: 10px 10px !important; border-top: 1px solid var(--border-default); }
.sidebar-user-row { padding: 8px 10px 0 !important; }

/* Cabeçalho global compacto */
.petdesk-global-header { left: calc((100vw - min(100vw, 1800px)) / 2 + var(--sidebar-w)); right: calc((100vw - min(100vw, 1800px)) / 2); height: var(--header-h); padding: 0 24px; gap: 12px; background: var(--bg-primary); border-bottom: 0; backdrop-filter: none; }
.petdesk-global-date { font-size: 13px; color: var(--text-secondary); font-weight: 550; }
.petdesk-global-user { padding: 3px 10px 3px 4px; border: 1px solid var(--border-default); border-radius: var(--r-full); background: var(--bg-card); box-shadow: none; }
.petdesk-global-user .avatar { width: 28px; height: 28px; font-size: 11px; }
.petdesk-global-header .btn-icon { width: 32px; height: 32px; color: var(--text-secondary); border: 1px solid var(--border-default); background: var(--bg-card); box-shadow: none; }
#page-main > :first-child:not([id^="modal"]) { margin-top: var(--header-h); }

/* ───────────── Responsivo adaptativo ───────────── */
/* Tablet: barra lateral reduzida (só ícones) */
@media (min-width: 861px) and (max-width: 1180px) {
  :root { --sidebar-w: 64px; }
  .sidebar { padding: 12px 8px; align-items: stretch; }
  .sidebar-brand { justify-content: center; padding: 0; }
  .sidebar-brand .t-h2, .sidebar-empresa-chip, .nav-item > span, .sidebar-toggle-row > .t-caption, .sidebar-user-row > span, .sidebar-user-row > a, .nav-group-toggle span, .sidebar-user-row .t-label { display: none !important; }
  .nav-item { justify-content: center; padding: 0; height: 40px; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-group-toggle { justify-content: center; height: 10px; padding: 0; }
  .nav-group-toggle svg { display: none; }
  .nav-group.is-collapsed > .nav-item:not(.active) { display: flex; }
  .sidebar-toggle-row { justify-content: center; }
  .sidebar-toggle-row .toggle { transform: scale(.85); }
  #page-main > div:not([id^="modal"]):not(.modal-overlay):not([hidden])[style*="padding"] { padding: 14px 18px !important; }
}
/* Toque (tablet/recepção): alvos confortáveis sem virar botões gigantes */
@media (pointer: coarse) {
  .btn, #page-main .btn { min-height: 40px; }
  .btn-sm, #page-main .btn-sm { min-height: 36px; }
  .btn-icon, #page-main .btn-icon { min-width: 40px; min-height: 40px; }
  .menu-item { min-height: 40px; }
  .tab, #page-main .tab { height: 42px; }
  .nav-item { height: 42px; }
  .input, #page-main .input, .select, #page-main select { min-height: 40px; }
  .toggle { width: 54px; height: 28px; } .toggle .toggle-thumb { width: 22px; height: 22px; } .toggle.on .toggle-thumb { left: 29px; }
}
@media (max-width: 860px) {
  :root { --header-h: 44px; }
  .sidebar { width: min(300px, 86vw); min-width: 0; border-radius: 0; }
  .petdesk-global-header { left: 0; right: 0; top: 56px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--border-default); }
  #page-main > :first-child:not([id^="modal"]) { margin-top: 44px; } /* o body já reserva a barra superior (56px) */
  #page-main > div:not([id^="modal"]):not(.modal-overlay):not([hidden])[style*="padding"] { padding: 14px 12px !important; gap: 12px !important; }
  .mobile-topbar { background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); box-shadow: none; backdrop-filter: none; }
  .btn, #page-main .btn, .btn-icon { min-height: 42px; }
  .btn-sm, #page-main .btn-sm { min-height: 38px; }
  .nav-item { height: 44px; }
}

/* Tabelas viram cartões no mobile (já tratado em responsive.css); garante contraste dos cartões */
@media (max-width: 860px) {
  #page-main .table tr { background: var(--bg-card); border-color: var(--border-default); box-shadow: var(--shadow-card); }
}
@media print { .sidebar, .petdesk-global-header, .mobile-topbar { display: none !important; } }

/* ───────────── Layout de página (cabeçalho, ferramentas, colunas adaptativas) ───────────── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.page-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.row-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.show-lg { display: none; }
@media (min-width: 861px) and (max-width: 1280px) { .hide-lg { display: none !important; } .show-lg { display: block; } }
@media (min-width: 861px) and (max-width: 1000px) { .hide-md { display: none !important; } }
@media (max-width: 860px) {
  .page-tools { width: 100%; } .page-tools .input { flex: 1 1 100%; width: 100% !important; }
  #page-main .table tr.row-danger { background: var(--danger-subtle); }
  #page-main .table tr.row-warning { background: var(--warning-subtle); }
  #page-main .table .row-danger td, #page-main .table .row-warning td { background: transparent; }
}
.tutores-table .actions { width: 1%; }
.meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; color: var(--text-secondary); font-size: 13px; }
.meta-row .meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.meta-row .meta svg { color: var(--text-muted); flex: none; }

/* ───────────── Perfil de entidade (tutor / pet): cabeçalho compacto + abas ───────────── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.breadcrumb a { color: var(--text-brand); font-weight: 600; }
.entity-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 16px; flex-wrap: wrap; }
.entity-id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 360px; }
.entity-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tab-pane { min-width: 0; }
.tab-pane[hidden] { display: none !important; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pet-tile { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pet-tile-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pet-tile-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; padding: 16px; }
.info-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.info-item .label { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.info-item .value { font-size: 14px; font-weight: 550; color: var(--text-primary); overflow-wrap: anywhere; }
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border-default); background: var(--bg-sunken); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.empty-state { padding: 28px 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-default); }
/* Painel "App do Pet" dentro da aba: sem cabeçalho duplicado e com controles compactos */
#tab-app .daycare-panel { margin: 0; padding: 0; border: 0; }
#tab-app .daycare-heading { display: none; }
#page-content > .daycare-shortcut { display: none; }
/* Botões e cartões do painel da creche seguem o tamanho padrão do design system */
#app-do-pet button, .daycare-dialog button { min-height: 0; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); }
#app-do-pet button:hover:not(:disabled), .daycare-dialog button:hover:not(:disabled) { background: var(--bg-card-hover); }
#app-do-pet button.primary, .daycare-dialog button.primary, #app-do-pet .daycare-tabs button[aria-pressed=true] { background: var(--brand-500); color: var(--text-on-brand); border-color: var(--brand-600); }
#app-do-pet .integration-card { padding: 14px; border-color: var(--border-default); box-shadow: var(--shadow-card); }
#app-do-pet article.integration-card { background: var(--bg-sunken); box-shadow: none; }
#app-do-pet .daycare-tabs { margin: 0 0 10px; gap: 4px; }
#app-do-pet h2 { font-size: 15px; } #app-do-pet h3 { font-size: 14px; }
#app-do-pet p { font-size: 13px; }
#app-do-pet .integration-tag { background: var(--brand-subtle); color: var(--text-brand); font-weight: 600; }
.daycare-dialog { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-default); }
@media (pointer: coarse) { #app-do-pet button, .daycare-dialog button { height: 40px; } }
.show-md-only { display: none; }
@media (max-width: 1000px) and (min-width: 861px) { .show-md-only { display: block; } }

/* ───────────── Operação diária · Easy Mode ───────────── */
.svc-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.svc-chips-label { margin-right: 2px; font-weight: 600; }
.svc-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--bg-card); color: var(--text-primary); font: 600 12px var(--ds-font); cursor: pointer; box-shadow: var(--shadow-sm); }
.svc-chip:hover { background: var(--brand-subtle); border-color: var(--brand-500); }
.svc-chip svg { color: var(--text-brand); }
.svc-chip .count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--bg-sunken); border: 1px solid var(--border-default); color: var(--text-secondary); font-size: 11px; }
.svc-chip .plus { color: var(--text-brand); font-weight: 800; }
.ops-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.ops-title { display: flex; align-items: baseline; gap: 10px; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--r-md); }
.segmented button { height: 28px; min-height: 0; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font: 650 12px var(--ds-font); cursor: pointer; }
.segmented button:hover { color: var(--text-primary); }
.segmented button[aria-pressed="true"] { background: var(--bg-card); color: var(--text-brand); box-shadow: var(--shadow-sm); }
.ops-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 14px 12px; }
.ops-stat { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--r-md); min-width: 0; }
.ops-stat strong { font-size: 20px; font-weight: 750; line-height: 1; color: var(--text-primary); }
.ops-stat span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.ops-stat.is-alert { background: var(--danger-subtle); border-color: var(--danger); }
.ops-stat.is-alert strong { color: var(--danger); }
.ops-stat.is-active strong { color: var(--text-brand); }
.ops-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; padding: 0 14px 14px; align-items: start; }
.ops-board[hidden], #ops-list[hidden] { display: none !important; }
.ops-col { background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--r-lg); min-width: 0; }
.ops-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }
.ops-col-head h3 { margin: 0; font-size: 13px; font-weight: 700; }
.ops-col-head .count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--brand-subtle); color: var(--text-brand); font-size: 12px; font-weight: 700; }
.ops-col-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.ops-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.ops-card.is-late { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--border-danger); }
.ops-card-top { display: flex; align-items: center; gap: 10px; }
.ops-card-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ops-card-name strong { font-size: 15px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-card-name span { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-card-meta { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.ops-card-actions .attendance-controls { flex-wrap: wrap; }
.ops-card-actions .checkin-btn, .ops-card-actions .checkout-btn { flex: 1 1 130px; height: 44px; font-size: 15px; }
/* Ações de presença: principal em destaque, resto em "Mais" */
.attendance-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; width: auto; }
.checkin-btn, .checkout-btn, .attendance-pending { height: 34px; min-height: 0; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md); font: 700 13px/1 var(--ds-font); white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-sm); touch-action: manipulation; }
.checkin-btn { background: var(--success); color: #fff; border-color: color-mix(in srgb, var(--success) 70%, #000); }
.checkout-btn { background: #F0A818; color: #2A1A00; border-color: #C98A08; }
:root:not([data-theme="light"]) .checkin-btn { color: #04210F; }
.checkin-btn:hover, .checkout-btn:hover { filter: brightness(.93); }
.attendance-pending { background: var(--brand-subtle); color: var(--text-brand); cursor: wait; }
.attendance-time { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.attendance-time input { width: 96px; height: 30px; min-height: 0; padding: 0 6px; font-size: 13px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-primary); }
.attendance-note { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 860px) {
  .ops-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-board { grid-template-columns: minmax(0, 1fr); }
  .checkin-btn, .checkout-btn { min-height: 44px; }
  #agendamentos-hoje .attendance-controls > button { min-height: 44px; }
}
@media (pointer: coarse) { .checkin-btn, .checkout-btn { min-height: 40px; } .ops-card-actions .checkin-btn, .ops-card-actions .checkout-btn { min-height: 48px; } }

/* ───────────── Dashboard: blocos, tiles e prioridade visual ───────────── */
.dash-block { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--r-lg); min-width: 0; }
#page-main .dashboard-section { background: var(--bg-sunken); }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.stat-grid.cols-2 { --cols: 2; } .stat-grid.cols-3 { --cols: 3; } .stat-grid.cols-6 { --cols: 6; }
.stat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.stat.kpi-click, .stat[data-wired] { cursor: pointer; }
.stat.kpi-click:hover { border-color: var(--brand-500); box-shadow: var(--shadow-md); }
.stat .kpi-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-value { font-size: 20px; font-weight: 750; line-height: 1.1; letter-spacing: -.01em; color: var(--text-primary); }
.stat-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); line-height: 1.3; }
.stat-sub { font-weight: 500; color: var(--text-muted); }
.stat-primary { border-color: color-mix(in srgb, var(--brand-500) 45%, var(--border-default)); background: var(--brand-subtle); }
.stat-primary .stat-value { color: var(--text-brand); font-size: 24px; }
.stat .c-danger { color: var(--danger); }
@media (max-width: 1280px) { .stat-grid.cols-6 { --cols: 3; } }
@media (max-width: 1000px) { .dash-cols { grid-template-columns: minmax(0, 1fr); } .stat-grid.cols-3 { --cols: 2; } }
@media (max-width: 860px) { .stat-grid.cols-6 { --cols: 2; } .stat-grid.cols-2 { --cols: 2; } .stat-value { font-size: 18px; } }
@media (max-width: 380px) { .stat-grid, .stat-grid.cols-2, .stat-grid.cols-3, .stat-grid.cols-6 { --cols: 1; } }

/* ───────────── Módulo financeiro (finance.css é carregado depois; `body` eleva a especificidade) ───────────── */
:root[data-theme="light"] body .finance-app, :root[data-theme="light"] body .finance-dialog, :root[data-theme="light"] body .payment-page {
  --fin-bg: var(--bg-card); --fin-line: var(--border-default); --fin-text: var(--text-primary); --bg-input: #F3F5F9;
}
body .finance-app button, body .finance-dialog button, body .finance-button, body .payment-page button {
  min-height: 0; height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary);
}
body .finance-app button:hover:not(:disabled), body .finance-dialog button:hover:not(:disabled), body .finance-button:hover { background: var(--bg-card-hover); }
body .finance-app .primary, body .finance-dialog .primary, body .payment-page .primary { background: var(--brand-500); border-color: var(--brand-600); color: var(--text-on-brand); }
body .finance-app .primary:hover:not(:disabled), body .finance-dialog .primary:hover:not(:disabled) { background: var(--brand-600); }
body .finance-tabs button { height: 34px; background: transparent; border-color: transparent; }
body .finance-tabs button[aria-selected="true"] { background: var(--brand-subtle); color: var(--text-brand); border-color: transparent; }
body .finance-app input, body .finance-app select, body .finance-dialog input, body .finance-dialog select { height: var(--ctl-h); min-height: 0; padding: 0 10px; font-size: 13px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text-primary); }
body .finance-dialog textarea { font-size: 13px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text-primary); }
body .finance-app { padding: 18px 24px; gap: 14px; }
body .finance-app .finance-heading h1 { font-size: 20px; margin: 2px 0 4px; }
body .finance-stats { gap: 10px; }
body .finance-stat { padding: 12px 14px; border-radius: var(--r-md); box-shadow: var(--shadow-card); }
body .finance-stat strong { font-size: 20px; margin: 4px 0 2px; }
body .finance-app .tab-embedded, body #tab-financeiro .finance-app { padding: 0; }
@media (max-width: 860px) { body .finance-app button, body .finance-dialog button { height: 42px; } body .finance-app { padding: 14px 12px; } }
@media (pointer: coarse) { body .finance-app button, body .finance-dialog button { min-height: 40px; } }
body .finance-app .filter-bar select { width: auto; min-width: 160px; }
.daycare-shortcut { display: none !important; }
.daycare-collapse { padding: 0; }
.daycare-collapse > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 650; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.daycare-collapse > summary::-webkit-details-marker { display: none; }
.daycare-collapse > summary::after { content: "+"; color: var(--text-muted); font-size: 18px; }
.daycare-collapse[open] > summary::after { content: "−"; }
.daycare-collapse > .daycare-panel { margin: 0; padding: 0 14px 14px; border: 0; }
/* Diálogos de edição (tutor/pet): mais largos e com 3 colunas quando há espaço */
.petdesk-dialog { width: min(720px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
.petdesk-dialog .tutor-edit-form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.petdesk-dialog .dialog-content { padding: 0 16px 16px; }
@media (max-width: 720px) { .petdesk-dialog .tutor-edit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .petdesk-dialog .tutor-edit-form { grid-template-columns: minmax(0, 1fr); } }
.petdesk-dialog label { font-size: 12px; font-weight: 600; color: var(--text-secondary); gap: 4px; }
.petdesk-dialog .tutor-edit-form footer { justify-content: flex-end; }
:root[data-theme="light"] body .petdesk-dialog { --bg-input: #F3F5F9; }

/* Painel do dia centrado no pet: vários serviços, cada um com entrada/saída própria */
.ops-svc { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--r-md); }
.ops-svc.is-late { border-color: var(--danger); }
.ops-svc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ops-svc-real { line-height: 1.3; }
.ops-timeline { padding-top: 6px; border-top: 1px dashed var(--border-default); line-height: 1.4; }

.ops-card.is-unplanned{border-color:var(--border-danger);box-shadow:inset 3px 0 0 var(--border-danger)}
.ops-unplanned-note{margin:0;line-height:1.4}
.daycare-unplanned{background:var(--warning-subtle);color:var(--warning);border-color:var(--warning)}

/* Aba Plano & Férias do pet */
.plan-section { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.plan-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plan-note { margin: 0; padding: 8px 12px; font-size: 12px; color: var(--text-secondary); background: var(--bg-sunken); border-radius: var(--r-md); border: 1px solid var(--border-default); }
.plan-empty { margin: 0; padding: 18px; text-align: center; color: var(--text-secondary); border: 1px dashed var(--border-default); border-radius: var(--r-md); font-size: 13px; }
.plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.plan-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--r-md); }
.plan-tile span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.plan-tile strong { font-size: 20px; line-height: 1.2; } .plan-tile strong span { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.plan-tile small { font-size: 11px; color: var(--text-secondary); }
.pp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.pp-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--r-lg); }
.pp-card.is-ativo { border-left: 4px solid var(--success); } .pp-card.is-vencendo { border-left: 4px solid var(--warning); } .pp-card.is-pausado, .pp-card.is-encerrado { opacity: .8; border-left: 4px solid var(--text-muted); } .pp-card.is-vencido { border-left: 4px solid var(--danger); }
.pp-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pp-card h3 { margin: 0; font-size: 16px; }
.plan-line { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.plan-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-recs li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; background: var(--bg-sunken); border-radius: var(--r-md); }
.plan-rec-name small { margin-left: 6px; color: var(--text-muted); }
.plan-days { display: inline-flex; gap: 3px; } .plan-days i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 5px; border-radius: 6px; color: var(--text-muted); border: 1px solid var(--border-default); }
.plan-days i.on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.plan-usage { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.plan-bar { height: 8px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-default); } .plan-bar i { display: block; height: 100%; background: var(--brand-500); border-radius: 999px; } .plan-bar.warn i { background: var(--warning); } .plan-bar.over i { background: var(--danger); }
.pp-card footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.pp-card .danger { color: var(--danger); }
.plan-table-wrap { overflow-x: auto; } .plan-table td, .plan-table th { white-space: nowrap; } .plan-table td:nth-child(4) { white-space: normal; }
.plan-occ-actions { display: flex; gap: 6px; justify-content: flex-end; }
.plan-past summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 0; }
.plan-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.plan-form label, .plan-dialog label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); min-width: 120px; flex: 1; }
.plan-form label.grow { flex: 2; min-width: 180px; }
.plan-form input, .plan-form select, .plan-dialog input:not([type=checkbox]), .plan-dialog select, .plan-limit input { height: 38px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-primary); color: var(--text-primary); font: inherit; width: 100%; }
.plan-form .btn, .plan-limit .btn { height: 38px; flex: 0 0 auto; }
.plan-limit { display: flex; gap: 8px; align-items: flex-end; } .plan-limit label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); } .plan-limit input { width: 90px; }
.plan-ferias-list { display: grid; gap: 4px; }
.plan-ferias-row { display: grid; grid-template-columns: 1.3fr 1.5fr 1.2fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.plan-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-history li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: 12.5px; } .plan-history li div { display: grid; gap: 2px; } .plan-history small { color: var(--text-muted); } .plan-history span { color: var(--text-secondary); }
/* diálogo de edição */
.plan-dialog { width: min(560px, calc(100vw - 16px)); max-height: 92dvh; padding: 0; border: 1px solid var(--border-default); border-radius: 16px; background: var(--bg-card); color: var(--text-primary); }
.plan-dialog.is-wide { width: min(820px, calc(100vw - 16px)); } .plan-dialog::backdrop { background: rgba(13, 15, 24, .6); }
.plan-dialog form { display: flex; flex-direction: column; max-height: 92dvh; }
.plan-dialog header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-default); } .plan-dialog h2 { margin: 0; font-size: 18px; }
.plan-x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-secondary); width: 36px; height: 36px; }
.plan-dialog-body { padding: 16px 20px; overflow: auto; display: grid; gap: 14px; }
.plan-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-default); }
.plan-status { margin: 0; padding: 0 20px 8px; min-height: 18px; font-size: 12.5px; color: var(--danger); }
.plan-picks { display: grid; gap: 6px; } .plan-picks h4 { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.plan-pick { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--r-md); cursor: pointer; font-size: 14px !important; color: var(--text-primary) !important; } .plan-pick:has(input:checked) { border-color: var(--brand-500); background: var(--brand-subtle); }
.plan-pick span { display: grid; gap: 2px; } .plan-pick small { color: var(--text-secondary); font-size: 12px; }
.plan-config { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border-default); border-radius: var(--r-lg); margin: 0; min-width: 0; } .plan-config legend { font-weight: 700; padding: 0 6px; }
.plan-period { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-rec-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 12px; background: var(--bg-sunken); border-radius: var(--r-md); } .plan-rec-edit > strong, .plan-rec-edit > .plan-days-field, .plan-rec-edit > .plan-check { grid-column: 1 / -1; }
.plan-days-field { display: grid; gap: 6px; font-size: 12px; color: var(--text-secondary); } .plan-daychips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .plan-count { color: var(--text-muted); margin-left: 6px; }
.plan-daychips .dia-chip { min-width: 46px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-primary); color: var(--text-secondary); font-weight: 600; cursor: pointer; } .plan-daychips .dia-chip.on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.plan-billing { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; border-top: 1px solid var(--border-default); padding-top: 12px; } .plan-billing h4 { grid-column: 1 / -1; margin: 0; } .plan-billing .plan-check { grid-column: 1 / -1; }
.plan-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 13px !important; color: var(--text-primary) !important; }
@media (max-width: 720px) { .pp-cards { grid-template-columns: minmax(0, 1fr); } .plan-ferias-row { grid-template-columns: 1fr auto; } .plan-ferias-row span:nth-child(2), .plan-ferias-row span:nth-child(3) { grid-column: 1; } .plan-history li { grid-template-columns: 1fr; } .plan-dialog, .plan-dialog.is-wide { width: 100vw; max-height: 100dvh; border-radius: 0; } }

/* Detalhe/edição de agendamento */
.appointment-note{margin:0;font-size:12.5px;color:var(--text-secondary)}
.appointment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.appointment-edit-form{display:grid;gap:12px}.appointment-edit-form label,.appointment-detail label{display:grid;gap:4px;font-size:12px}
.appointment-detail{display:grid;gap:14px}.appointment-detail h3{margin:0 0 4px;font-size:14px}.appointment-detail p{margin:0;font-size:13px}
.appointment-warning{color:var(--warning)}
.appointment-timeline{list-style:none;margin:0;padding:0;display:grid;gap:8px}.appointment-timeline li{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:12.5px}.appointment-timeline li div{display:grid;gap:2px}.appointment-timeline small{color:var(--text-muted)}.appointment-timeline span{color:var(--text-secondary)}

/* ── Alertas de "tutor a caminho" (toast global, banner de som) ── */
.arrival-alerts{position:fixed;top:64px;right:12px;z-index:9998;display:grid;gap:10px;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 76px);overflow:auto}
.arrival-alerts[hidden]{display:none}
.arrival-toast{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-strong);border-left:4px solid var(--brand-500);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:14px 16px;display:grid;gap:8px;animation:arrival-in .22s ease-out}
.arrival-toast.is-priority{border-left-color:var(--warning);background:var(--warning-subtle)}
.arrival-toast-head{display:flex;align-items:center;gap:8px;font-size:14px}
.arrival-toast-dot{width:10px;height:10px;border-radius:50%;background:var(--brand-500);flex:none;animation:arrival-pulse 1.6s ease-in-out infinite}
.arrival-toast.is-priority .arrival-toast-dot{background:var(--warning)}
.arrival-toast p{margin:0;font-size:13px;color:var(--text-secondary)}
.arrival-toast .arrival-toast-note{color:var(--text-primary);font-weight:600}
.arrival-toast-actions{display:flex;gap:8px;flex-wrap:wrap}
.arrival-toast-actions .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.arrival-sound-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 8px;padding:4px 10px;background:var(--bg-sunken);border:1px solid var(--border-default);border-radius:var(--r-md);font-size:12px;color:var(--text-secondary)}.arrival-sound-banner .btn{min-height:32px;padding:0 10px;font-size:12px}
.arrival-sound-actions{display:flex;gap:8px;flex-wrap:wrap}
.arrival-sound-actions .btn{min-height:32px}
.daycare-inline-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);min-height:44px}
@keyframes arrival-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes arrival-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 0%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.arrival-toast,.arrival-toast-dot{animation:none}}
@media (max-width:640px){.arrival-alerts{top:auto;bottom:12px;right:12px;left:12px;width:auto}}

/* ── Operação diária: faixa de alerta, correção de serviço e entrega ── */
.ops-banner{margin:0 0 12px;padding:10px 14px;border:1px solid var(--border-danger);background:var(--danger-subtle);color:var(--text-primary);border-radius:var(--r-md);font-size:13px}
.ops-fix{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;background:var(--warning-subtle);border-radius:var(--r-md)}
.ops-fix .btn,.ops-deliver .btn{min-height:36px}
.ops-deliver{margin-top:8px}
.ops-dialog{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--bg-card);color:var(--text-primary);padding:20px;width:min(420px,calc(100vw - 32px));box-shadow:var(--shadow-pop)}
.ops-dialog::backdrop{background:var(--bg-overlay)}
.ops-dialog form{display:grid;gap:12px}.ops-dialog h3{margin:0}.ops-dialog label{display:grid;gap:4px;font-size:13px}
.ops-dialog select,.ops-dialog input{height:40px;padding:0 10px;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--r-md)}
.ops-dialog footer{display:flex;justify-content:flex-end;gap:8px}

/* ── Aba Plano & Férias: correções de alinhamento e transbordo ── */
#plans-root{min-width:0;max-width:100%}
#plans-root .plan-section{min-width:0}
#plans-root .btn{width:auto;max-width:100%}
#plans-root .plan-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;align-items:end}
#plans-root .plan-form label{min-width:0}
#plans-root .plan-form label.grow{grid-column:span 2}
#plans-root .plan-form input,#plans-root .plan-form select{height:40px;box-sizing:border-box;width:100%;min-width:0}
#plans-root .plan-form .btn{grid-column:1/-1;justify-self:start;height:40px;padding:0 20px}
#plans-root .plan-limit{flex-wrap:wrap;max-width:100%}
#plans-root .plan-limit input{height:40px;box-sizing:border-box;width:96px}
#plans-root .plan-limit .btn{height:40px;padding:0 16px}
#plans-root .plan-head>.btn{flex:0 0 auto}
@media (max-width:640px){#plans-root .plan-form label.grow{grid-column:auto}}

/* Páginas só aparecem depois de montadas */
.page-gated{position:relative;min-height:60vh}
.page-gated>*{visibility:hidden}
.page-gated::after{content:'';position:absolute;top:96px;left:50%;width:28px;height:28px;margin-left:-14px;border-radius:50%;border:3px solid var(--border-strong);border-top-color:var(--brand-500);animation:page-gate-spin .7s linear infinite}
@keyframes page-gate-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.page-gated::after{animation:none}}

/* ── Ocorrências e relatórios (página Relatórios e ficha do pet) ── */
.inc-panel{display:grid;gap:14px}
.inc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.inc-head h2{margin:0;font-size:18px}.inc-head p{margin:2px 0 0;font-size:13px;color:var(--text-secondary)}
.inc-buttons{display:flex;gap:8px;flex-wrap:wrap}
.inc-panel button,.inc-dialog button{min-height:40px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-card);color:var(--text-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.inc-panel button:hover,.inc-dialog button:hover{background:var(--bg-card-hover)}
.inc-panel button.inc-primary,.inc-dialog button.inc-primary{background:var(--brand-500);border-color:var(--brand-500);color:var(--text-on,#fff)}
.inc-dialog button.inc-danger{border-color:var(--border-danger);color:var(--danger)}
.inc-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border-default);overflow-x:auto}
.inc-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;min-height:40px}
.inc-tabs button.is-on{border-bottom-color:var(--brand-500);color:var(--text-brand)}
.inc-tabs button span{margin-left:6px;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--bg-sunken);color:var(--text-secondary)}
.inc-list{display:grid;gap:8px}
.inc-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--r-lg);background:var(--bg-card)}
.inc-row.is-deleted{opacity:.8;border-style:dashed}
.inc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inc-sev{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--bg-sunken);color:var(--text-secondary)}
.inc-sev.is-media{background:var(--warning-subtle);color:var(--warning)}.inc-sev.is-alta,.inc-sev.is-critica{background:var(--danger-subtle);color:var(--danger)}
.inc-state{font-size:11px;color:var(--text-muted)}
.inc-desc{margin:4px 0;font-size:13px;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inc-meta{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}
.inc-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.inc-empty{padding:26px 12px;text-align:center;border:1px dashed var(--border-strong);border-radius:var(--r-lg);color:var(--text-secondary)}
.inc-dialog{border:1px solid var(--border-strong);border-radius:var(--r-xl);background:var(--bg-card);color:var(--text-primary);padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);box-shadow:var(--shadow-pop)}
.inc-dialog.is-wide{width:min(720px,calc(100vw - 24px))}
.inc-dialog::backdrop{background:var(--bg-overlay)}
.inc-dialog form{display:flex;flex-direction:column;max-height:calc(100vh - 24px)}
.inc-dialog header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-default)}.inc-dialog h3{margin:0;font-size:16px}.inc-dialog h4{margin:16px 0 6px}
.inc-x{border:0!important;background:transparent!important;font-size:22px;min-height:36px;width:36px;padding:0!important}
.inc-body{padding:16px 18px;overflow:auto;display:grid;gap:12px}
.inc-body label{display:grid;gap:4px;font-size:12px;color:var(--text-secondary)}
.inc-body input:not([type=checkbox]):not([type=hidden]),.inc-body select,.inc-body textarea{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-input);color:var(--text-primary);font:inherit;font-size:14px}
.inc-body input:not([type=checkbox]),.inc-body select{min-height:40px}
.inc-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inc-check{display:flex!important;align-items:center;gap:8px}
.inc-pre{white-space:pre-wrap;font:inherit;font-size:14px;line-height:1.55;background:var(--bg-sunken);border-radius:var(--r-md);padding:14px;margin:0}
.inc-meta-line,.inc-muted{font-size:12px;color:var(--text-muted);margin:0}
.inc-history{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13px}.inc-history em{display:block;color:var(--text-muted)}.inc-history ul{margin:4px 0 0;padding-left:16px}
.inc-history del{color:var(--danger)}.inc-history ins{text-decoration:none;color:var(--success)}
.inc-to{margin:0;font-size:13px}.inc-bad{color:var(--danger)}
.inc-status{margin:0;padding:0 18px;min-height:18px;font-size:12px;color:var(--text-secondary)}.inc-status[data-bad="1"]{color:var(--danger)}
.inc-dialog footer{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--border-default)}
@media (max-width:640px){.inc-row{grid-template-columns:1fr}.inc-actions{justify-content:flex-start}.inc-two{grid-template-columns:1fr}}
.ready-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}.ready-list{display:grid;gap:8px;border:0;padding:0;margin:8px 0}.ready-list label{display:flex;align-items:center;gap:8px;min-height:36px}

/* Celular: o aviso do tutor ocupa a tela, grande e simples (somente a notificação) */
@media (max-width:640px){
 .arrival-alerts{inset:0;top:0;bottom:0;left:0;right:0;width:auto;max-height:none;align-content:center;padding:16px;background:rgba(10,12,20,.72);overflow:auto}
 .arrival-alerts[hidden]{display:none}
 .arrival-toast{padding:20px 18px;gap:12px}
 .arrival-toast-head{font-size:18px}.arrival-toast p{font-size:16px}
 .arrival-toast-actions{display:grid;grid-template-columns:1fr}
 .arrival-toast-actions .btn{min-height:56px;font-size:17px}
}

.ops-redband{margin:-12px -12px 10px;padding:6px 12px;background:var(--border-danger);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;border-radius:var(--r-md) var(--r-md) 0 0}
.ops-unplanned-pet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--border-default)}
.ops-unplanned-btns{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.ops-unplanned-others{margin:6px 0 0}
.ops-noshow{margin:12px 14px 14px;border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:8px 12px}
.ops-noshow summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--text-secondary)}
.ops-noshow-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;font-size:13px}
.undo-noshow-btn{min-height:36px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-card);color:var(--text-primary);font-weight:600;cursor:pointer}

/* Vacinas padrão (Configurações) e linha de pet sem agenda */
.vp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.vp-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--r-lg);background:var(--bg-card)}
.vp-head{display:flex;align-items:center;gap:8px}.vp-head strong{font-size:14px}.vp-sp{font-size:11px;color:var(--text-muted)}
.vp-brands{display:flex;flex-wrap:wrap;gap:6px}
.vp-chip{font-size:11px;padding:2px 9px;border-radius:999px;background:var(--bg-sunken);color:var(--text-secondary);border:1px solid var(--border-default)}
.vp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto}
.vp-actions{display:flex;gap:6px}
.vp-actions .btn{width:auto;min-height:36px;padding:0 14px}
.ops-redband--inline{margin:8px -12px 4px;border-radius:0}

/* Operação diária: navegação entre dias e pendências */
.ops-pending{margin:0 14px 12px;border:1px solid var(--warning);background:var(--warning-subtle);border-radius:var(--r-lg)}
.ops-pending>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;cursor:pointer;list-style:none}
.ops-pending>summary::-webkit-details-marker{display:none}
.ops-pending-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--border-default);background:var(--bg-card)}
.ops-pending-row:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.ops-pending-info{display:grid;gap:2px;font-size:13px}.ops-pending-info span,.ops-pending-info small{color:var(--text-secondary)}
.ops-pending-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ops-pending-actions .btn{width:auto;min-height:36px;padding:0 14px}
.ops-pending-actions{justify-content:flex-end}

/* Faixa de navegação entre dias (Ontem · Hoje · Amanhã) */
.day-strip{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border-default);border-radius:var(--r-lg)}
.day-strip button,.day-strip__pick{font:inherit;color:var(--text-primary);cursor:pointer}
.day-strip__side{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-md);background:transparent;text-align:left}
.day-strip__side--next{justify-content:flex-end;text-align:right}
.day-strip__side:hover{background:var(--bg-card);border-color:var(--border-default)}
.day-strip__arrow{font-size:26px;line-height:1;color:var(--text-brand);font-weight:700}
.day-strip__text{display:grid;gap:1px}
.day-strip small{font-size:12px;color:var(--text-secondary);line-height:1.1}
.day-strip b{font-size:15px;line-height:1.2}
.day-strip__center{display:flex;align-items:center;gap:8px}
.day-strip__today{display:grid;gap:1px;justify-items:center;min-width:130px;min-height:48px;padding:4px 18px;border:2px solid var(--text-primary);border-radius:var(--r-md);background:var(--bg-card)}
.day-strip__today b{font-size:17px}
.day-strip.is-other-day .day-strip__today{border-color:var(--warning);background:var(--warning-subtle)}
.day-strip__pick{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-card);overflow:hidden}
.day-strip__pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
@media (max-width:640px){
 .day-strip{grid-template-columns:48px 1fr 48px;gap:6px;padding:8px}
 .day-strip__side{padding:0;justify-content:center;min-width:48px}
 .day-strip__side .day-strip__text{display:none}
 .day-strip__center{justify-content:center;min-width:0}
 .day-strip__today{min-width:0;flex:1;padding:4px 10px}
 .day-strip__today b{font-size:16px}
}
#agendamentos-hoje>.day-strip{border-width:0 0 1px 0;border-radius:var(--r-lg) var(--r-lg) 0 0}
.day-strip{display:flex;justify-content:center;gap:22px;flex-wrap:nowrap}
.day-strip__side{flex:0 1 190px;min-width:0}
.day-strip__side--next{justify-content:flex-end}
@media (max-width:640px){.day-strip{display:grid;grid-template-columns:48px 1fr 48px;gap:6px}.day-strip__side{flex:none}}

/* Avisos: filtros, seleção em massa */
.nt-panel{display:grid;gap:12px}
.nt-chips{display:flex;gap:8px;flex-wrap:wrap}
.nt-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-card);color:var(--text-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.nt-chip span{font-size:11px;padding:1px 8px;border-radius:999px;background:var(--bg-sunken);color:var(--text-secondary)}
.nt-chip.is-on{background:var(--brand-500);border-color:var(--brand-500);color:#fff}.nt-chip.is-on span{background:rgba(255,255,255,.22);color:#fff}
.nt-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.nt-field{display:grid;gap:4px;font-size:12px;color:var(--text-secondary)}
.nt-field select,.nt-field input{height:40px;padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-input);color:var(--text-primary);font:inherit;font-size:14px;width:100%;box-sizing:border-box}
.nt-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border-default);border-radius:var(--r-md)}
.nt-bulk button{min-height:38px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-card);color:var(--text-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.nt-bulk button:disabled{opacity:.45;cursor:not-allowed}
.nt-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-height:38px;margin-right:6px}
.nt-check input,.nt-pick input{width:20px;height:20px;accent-color:var(--brand-500)}
.nt-count,.nt-message{margin:0;font-size:12px;color:var(--text-secondary)}
.nt-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
.nt-item.is-selected{outline:2px solid var(--brand-500);outline-offset:-2px;background:color-mix(in srgb,var(--brand-500) 8%,var(--bg-card))}
.nt-pick{display:grid;place-items:center;min-width:32px;min-height:32px;padding-top:2px;cursor:pointer}
@media (max-width:640px){.nt-item{grid-template-columns:auto 1fr}.nt-item .daycare-read-button{grid-column:1/-1}.nt-bulk{position:sticky;bottom:8px}}
.daycare-panel .nt-chip.is-on,.nt-chips .nt-chip.is-on{background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.daycare-panel .nt-chip.is-on span{background:rgba(255,255,255,.25);color:#fff}

.day-strip__pick{cursor:pointer}
.day-strip__pick input{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none}
.nt-days .nt-datepick{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-card);font-size:13px;font-weight:600}
.nt-days .nt-datepick input{border:0;background:transparent;color:inherit;font:inherit;height:36px}
.nt-days .nt-datepick.is-on{border-color:var(--brand-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-500) 25%,transparent)}
.nt-day{margin:10px 0 2px;font-size:14px}.nt-day small{font-weight:400;color:var(--text-muted);text-transform:none;margin-left:6px}
.nt-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nt-danger,.nt-bulk .nt-danger,.daycare-read-button.nt-danger{border-color:var(--border-danger)!important;color:var(--danger)!important}
@media (max-width:640px){.nt-actions{grid-column:1/-1;justify-content:flex-start}}

/* Operação diária: tudo numa linha, mais espaço útil */
.ops-summary{display:flex;flex-wrap:nowrap;gap:8px;padding:0 14px 10px;overflow-x:auto}
.ops-summary .ops-stat{flex:1 1 0;min-width:max-content;padding:7px 12px}
@media (max-width:760px){.ops-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.ops-summary .ops-stat{min-width:0}}
.ops-board>.ops-banner{grid-column:1/-1;margin:0}
.ops-board{gap:10px;padding:0 14px 12px}
.ops-card.is-unplanned{background:color-mix(in srgb,var(--warning-subtle) 55%,var(--bg-card))}
#agendamentos-hoje .ops-head{padding:10px 14px}
#agendamentos-hoje>.day-strip{padding:8px 12px}
.day-strip__today{min-height:44px}.day-strip__side{min-height:44px}.day-strip__pick{width:44px;height:44px}
.daycare-today-line{margin:2px 0 6px;font-size:13px;color:var(--text-secondary)}
.daycare-arrival-actions{display:flex;flex-wrap:wrap;gap:8px}
.daycare-arrival-actions button{min-height:38px}
.qs-dialog{width:min(560px,calc(100vw - 24px))}
.qs-dialog form{display:grid;gap:14px}
.qs-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.qs-head h3{margin:0}.qs-head p{margin:2px 0 0;color:var(--text-secondary);font-size:14px}
.qs-x{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--text-secondary);width:40px;height:40px}
.qs-services{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.qs-services legend{font-size:13px;font-weight:700;margin-bottom:6px}
.qs-service{position:relative;display:block;cursor:pointer}.qs-service input{position:absolute;opacity:0;inset:0}
.qs-service span{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-input)}
.qs-service small{color:var(--text-secondary)}
.qs-service input:checked+span{border-color:var(--brand-500);background:color-mix(in srgb,var(--brand-500) 10%,var(--bg-card));box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-500) 30%,transparent)}
.qs-service input:focus-visible+span{outline:2px solid var(--brand-500);outline-offset:2px}
.qs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.qs-check{display:flex!important;align-items:center;gap:10px;min-height:40px;font-weight:600}.qs-check input{width:20px;height:20px;accent-color:var(--brand-500)}
.qs-total{margin:0;font-weight:700}.qs-status{margin:0;min-height:16px;font-size:12px;color:var(--danger)}
.qs-grid label{display:grid;gap:4px;font-size:12px;color:var(--text-secondary);min-width:0}
.qs-grid input{width:100%;box-sizing:border-box;min-width:0}
@media (min-width:1100px){.ops-board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ops-summary .ops-stat{padding:6px 8px;gap:6px}.ops-summary .ops-stat span{font-size:11px;overflow-wrap:anywhere;line-height:1.15}}

/* ═════ Operação diária e Calendário — visual enxuto, pensado para o celular ═════ */
.ops-coltabs{display:none}
.ops-head{padding:8px 14px}.ops-title h2{font-size:16px}
#agendamentos-hoje>.day-strip{padding:6px 12px;gap:12px;border-bottom:1px solid var(--border-default);background:transparent}
.day-strip__today{min-width:120px;min-height:42px;padding:2px 16px;border-width:1.5px}.day-strip__today b{font-size:16px}
.day-strip__side,.day-strip__pick{min-height:42px}.day-strip__pick{width:42px;height:42px}
.ops-summary{gap:6px;padding:0 14px 8px;display:flex;flex-wrap:wrap}
.ops-summary .ops-stat{flex:0 0 auto;min-width:0;padding:4px 12px;border-radius:999px;background:var(--bg-card);gap:6px}
.ops-summary .ops-stat strong{font-size:16px}.ops-summary .ops-stat span{font-size:12px}
.ops-pending{margin:0 14px 8px}.ops-pending>summary{padding:8px 12px;gap:8px}.ops-pending>summary .t-caption{display:none}
.ops-card{padding:9px 10px;gap:6px;box-shadow:none}
.ops-card-top{gap:8px}.ops-card-name strong{font-size:14px}
.ops-card-meta .chip{font-size:11px;padding:2px 8px}
.ops-svc{padding:7px 9px;gap:5px}
.ops-card-actions .checkin-btn,.ops-card-actions .checkout-btn{height:46px;font-size:15px;flex:1 1 120px}
.ops-card-actions .attendance-controls{flex-wrap:wrap;gap:6px;width:100%}
.ops-card-actions .attendance-controls .btn,.ops-card-actions .attendance-controls [data-menu-trigger]{min-height:46px}
.ops-card-actions .attendance-time{flex:1 1 100%}

/* cartões de agendamento do Calendário */
.ag-row{display:grid;gap:8px;padding:10px;margin:0 0 8px;border:1px solid var(--border-default);border-radius:12px;background:var(--bg-card)}
.ag-row.is-late{border-color:var(--border-danger);background:var(--danger-subtle);box-shadow:inset 3px 0 0 var(--border-danger)}
.ag-top{display:flex;align-items:center;gap:10px}
.ag-who{display:flex;flex-direction:column;min-width:0;flex:1}.ag-who strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ag-who span{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-time{font:600 12px/1 var(--ds-font-mono,monospace);color:var(--text-secondary);white-space:nowrap}
.ag-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ag-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-actions .attendance-controls{flex:1 1 auto}
.ag-actions .checkin-btn,.ag-actions .checkout-btn{height:44px;flex:1 1 110px}
.ag-icons{display:flex;gap:2px;margin-left:auto}.ag-icons .btn-icon{width:42px;height:42px;border:1px solid var(--border-default);border-radius:10px}
.ag-actions .attendance-time{flex:1 1 100%}

/* ── celular: Operação diária ── */
@media (max-width:900px){
 #page-main .page{padding:12px 12px 96px!important;gap:10px!important}
 .page-head .t-h1{font-size:22px}
 .page-head .page-tools .btn{height:42px;padding:0 14px}
 .svc-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:2px 12px;scrollbar-width:none}
 .svc-chips::-webkit-scrollbar{display:none}
 .svc-chips-label{display:none}.svc-chip{flex:0 0 auto;height:38px;padding:0 12px}
 .daycare-panel[data-page="servicos"] .daycare-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px 6px;padding:0 12px;scrollbar-width:none}
 .daycare-panel[data-page="servicos"] .daycare-tabs button{flex:0 0 auto;min-height:42px;padding:6px 14px;font-size:14px}
 #agendamentos-hoje{border-radius:14px;overflow:hidden}
 #agendamentos-hoje>.day-strip{grid-template-columns:44px 1fr 44px;display:grid;padding:6px 8px;gap:6px}
 .day-strip__side{padding:0;justify-content:center;min-width:44px}.day-strip__side .day-strip__text{display:none}
 .day-strip__center{justify-content:center;gap:6px;min-width:0}.day-strip__today{flex:1;min-width:0;max-width:240px}
 .ops-head{padding:6px 12px;gap:8px}.ops-head .segmented{margin-left:auto}
 .ops-summary{flex-wrap:nowrap;overflow-x:auto;padding:0 12px 8px;scrollbar-width:none}.ops-summary::-webkit-scrollbar{display:none}
 .ops-summary .ops-stat{min-width:max-content}
 .ops-pending{margin:0 12px 8px}
 .ops-coltabs{display:flex;gap:6px;padding:0 12px 8px;overflow-x:auto;scrollbar-width:none}
 .ops-coltabs button{flex:1 1 0;min-height:44px;padding:0 10px;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg-card);color:var(--text-primary);font:600 14px var(--ds-font);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;cursor:pointer}
 .ops-coltabs button span{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--bg-sunken);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
 .ops-coltabs button.is-on{background:var(--brand-500);border-color:var(--brand-500);color:#fff}.ops-coltabs button.is-on span{background:rgba(255,255,255,.25)}
 .ops-board{display:block;padding:0 12px 12px}
 .ops-board>.ops-banner{margin:0 0 8px}
 .ops-board[data-active="chegando"] .ops-col:not([data-col="chegando"]),.ops-board[data-active="creche"] .ops-col:not([data-col="creche"]),.ops-board[data-active="saiu"] .ops-col:not([data-col="saiu"]){display:none}
 .ops-col{border:0;background:transparent}.ops-col-head{display:none}.ops-col-body{padding:0;gap:8px}
 .ops-card{border-radius:14px}
 .ops-noshow{margin:8px 12px 12px}
 /* avisos */
 .nt-section{padding:12px!important}
}
/* ── avisos: cabeçalho enxuto, filtros recolhidos ── */
.nt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}.nt-head h2{margin:0;font-size:18px}
.nt-head-actions{display:flex;align-items:center;gap:8px}.nt-head-actions button{min-height:40px}
.nt-settings{border:1px solid var(--border-default);border-radius:12px;background:var(--bg-card);margin-bottom:10px}
.nt-settings>summary,.nt-filters-box>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;cursor:pointer;list-style:none;font-size:14px;font-weight:600}
.nt-settings>summary::-webkit-details-marker,.nt-filters-box>summary::-webkit-details-marker{display:none}
.nt-settings>summary::after,.nt-filters-box>summary::after{content:'▾';margin-left:auto;color:var(--text-muted);transition:transform .15s}
.nt-settings[open]>summary::after,.nt-filters-box[open]>summary::after{transform:rotate(180deg)}
.nt-settings>summary small{color:var(--text-muted);font-weight:400}
.nt-settings-body{display:grid;gap:8px;padding:0 10px 10px}
.nt-top{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.nt-seg{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}.nt-seg::-webkit-scrollbar{display:none}
.nt-seg .nt-chip{flex:0 0 auto;min-height:40px}
.nt-filters-box{flex:0 0 auto;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg-card);min-width:140px}
.nt-filters-box[open]{flex:1 1 100%}
.nt-filters-box>summary b{min-width:20px;height:20px;border-radius:10px;background:var(--brand-500);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.nt-filters-box>summary em{font-style:normal;font-weight:400;color:var(--text-secondary);font-size:12px}
.nt-filters-body{display:grid;gap:10px;padding:0 12px 12px}
.nt-reset{justify-self:start;min-height:38px;padding:0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg-card);cursor:pointer;font:600 13px var(--ds-font)}
.nt-bulk{padding:6px 10px;gap:6px;min-height:46px;margin-top:8px}
.nt-bulk.has-selection{position:sticky;bottom:8px;z-index:20;background:var(--bg-card);box-shadow:var(--shadow-pop);border-color:var(--brand-500)}
.nt-bulk-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.nt-bulk-actions button{min-height:40px;padding:0 12px}
.daycare-notice-list{margin-top:8px}
@media (max-width:900px){
 #svc-cards.svc-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;grid-template-columns:none}
 #svc-cards .svc-chip{flex:0 0 auto;width:auto}
 #ops-coltabs{flex-wrap:nowrap!important}
 #ops-coltabs button{flex:1 1 auto;padding:0 8px;font-size:13px;min-width:0}
 .ops-summary .ops-stat{white-space:nowrap}
}
@media (max-width:900px){
 .page-head{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
 .page-head .t-h1{font-size:20px;margin:0}
 .page-head .page-tools{margin:0}.page-head .page-tools .btn{height:40px;padding:0 14px;font-size:14px;white-space:nowrap}
 .ops-head{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}
 .ops-head .ops-title{min-width:0;flex-wrap:wrap;gap:0 8px}
 .ops-head .segmented{flex:0 0 auto;width:auto;margin:0}.ops-head .segmented button{padding:0 12px;min-height:38px;font-size:13px}
 .ops-title .t-caption{display:block;width:100%}
 .nt-seg{flex-wrap:nowrap}.nt-seg .nt-chip{padding:0 12px;min-height:40px;font-size:13px}
 .nt-top{gap:6px}.nt-filters-box{flex:0 0 auto}
 .daycare-notice.nt-item{display:grid!important;grid-template-columns:34px 1fr;gap:6px 8px;padding:12px 12px 12px 8px}
 .nt-item .nt-pick{grid-column:1;grid-row:1;align-self:start}
 .nt-item .daycare-notice-main{grid-column:2;grid-row:1;min-width:0}
 .nt-item .nt-actions{grid-column:1/-1;display:flex;gap:8px}
 .nt-item .nt-actions button{flex:1;min-height:44px}
 .daycare-notice.nt-item h3{font-size:15px;margin:2px 0}
}
.nt-seg[role="tablist"]{flex-wrap:nowrap!important;overflow-x:auto}
.nt-seg .nt-chip{white-space:nowrap}
@media (max-width:900px){.nt-seg .nt-chip{padding:0 10px}.nt-seg .nt-chip span{margin-left:4px}}
.ag-actions .attendance-time{flex:1 1 calc(50% - 8px);min-width:130px}
.ag-actions .attendance-time input{width:100%}

.ops-coltabs[hidden]{display:none!important}