/* VetChip UI 7.2 — open-test polish.
   High-impact, low-risk visual refinement for the shared webapp shell.
   Backend contracts, IDs and module behavior remain untouched. */

/* ---------- App frame ---------- */
body.vc-authenticated-shell{
  padding:20px;
  background:var(--vc-color-canvas);
}
body.vc-authenticated-shell>.vc-public-return{display:none}
body.vc-authenticated-shell>.vc-network-status[data-vc-network-state="ok"]{display:none}
body.vc-authenticated-shell>.container{
  width:min(1480px,100%);
  max-width:none;
  margin:0 auto;
  padding:0;
  border-radius:var(--vc-radius-xl);
  background:transparent;
  box-shadow:none;
}
body.vc-authenticated-shell #appContent{margin:0}
.vc-app #vxLayout{
  grid-template-columns:264px minmax(0,1fr);
  min-height:calc(100dvh - 40px);
  border:1px solid var(--vc-color-border);
  border-radius:20px;
  box-shadow:var(--vc-shadow-md);
}
.vc-app #vxSidebar{min-height:calc(100dvh - 40px)}
.vc-app #vxWorkspace{padding:0 32px 40px}
.vc-app #vxWorkspace .vc-account-toolbar{
  margin:0 -32px 26px;
  padding-left:32px;
  padding-right:32px;
  min-height:62px;
}
.vc-app #vxWorkspace #userWelcome{
  background:transparent;
  padding:0;
  border-radius:0;
  color:var(--vc-color-text-muted);
  font-size:13px;
  font-weight:650;
}
.vc-app #vxWorkspace #btnAvisos{
  min-width:116px;
  justify-content:center;
  box-shadow:none!important;
}
.vc-app #contadorAvisos{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  margin-left:5px;
  border-radius:999px;
  background:var(--vc-color-brand-soft);
  color:var(--vc-color-brand-soft-text);
  font-size:11px;
  font-weight:800;
}

/* ---------- Typography and information hierarchy ---------- */
.vc-app #vxWorkspace :where(h1,h2,h3,h4){text-wrap:balance}
.vc-app #vxWorkspace .section-header{
  margin:4px 0 18px;
  padding:0;
  border:0;
  color:var(--vc-color-brand)!important;
  font-size:21px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
}
.vc-app #vxWorkspace .section-header::after{
  content:"";
  display:block;
  width:38px;
  height:3px;
  margin-top:9px;
  border-radius:99px;
  background:var(--vc-color-action);
}
.vc-app #vxWorkspace :where(p,.field-hint,.vc-tutor-muted){line-height:1.55}
.vc-app #vxWorkspace :where(.field-hint,small,.vc-tutor-muted){color:var(--vc-color-text-muted)}

/* Professional chrome stays neutral across vet, ferrageador and groomer.
   Profession color is limited to small accents/cards owned by the professional module. */
body.vc-professional-account #vxWorkspace{background:var(--vc-color-surface)!important;padding-top:0!important}
body.vc-professional-account .vc-prof-page{max-width:none!important}
body.vc-professional-account .vc-account-toolbar{max-width:none!important}
body.vc-professional-account .vc-prof-dashboard-hero,
body.vc-professional-account .vc-prof-clients-hero,
body.vc-professional-account .vc-prof-attendance-hero,
body.vc-professional-account .vc-prof-stock-hero,
body.vc-professional-account .vc-prof-panel{box-shadow:none!important}

/* ---------- Cards and dashboard ---------- */
.vc-app :where(.dash-card,.dash-panel,.form-card,.approval-card,.passport-card,.info-grid){
  border-color:var(--vc-color-border)!important;
  border-radius:var(--vc-radius-md)!important;
  box-shadow:none!important;
}
.vc-app .dashboard-grid{gap:12px;margin-bottom:18px}
.vc-app .dash-card{
  min-height:94px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px 18px;
  background:var(--vc-color-surface)!important;
}
.vc-app .dash-card .label{
  color:var(--vc-color-text-muted)!important;
  font-size:11px!important;
  letter-spacing:.055em!important;
}
.vc-app .dash-card .value{
  color:var(--vc-color-brand)!important;
  font-size:27px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.vc-app .dash-layout{gap:16px}
.vc-app .dash-panel{padding:20px;background:var(--vc-color-surface)!important}
.vc-app .dash-panel h3{font-size:15px!important;font-weight:800!important}
.vc-app .quick-actions{gap:9px}
.vc-app .quick-actions button{
  min-height:48px;
  justify-content:flex-start;
  padding:11px 13px!important;
  text-align:left;
}
.vc-app .form-card{background:var(--vc-color-surface)!important;padding:20px!important}
.vc-app .approval-card{background:var(--vc-color-surface)!important}

/* ---------- Open-test review 7.2.2 ---------- */
/* Preserve the approved teal KPI fill and lock readable text contrast. */
body.vc-professional-account .vc-prof-kpi{
  background:var(--vc-color-action)!important;
  color:var(--vc-color-on-action)!important;
  border-color:var(--vc-color-action)!important;
}
body.vc-professional-account .vc-prof-kpi :is(span,strong,small){
  color:var(--vc-color-on-action)!important;
}
body.vc-professional-account .vc-prof-kpi :is(span,small){opacity:.86}
body.vc-professional-account .vc-prof-kpi:hover:not(:disabled){
  background:var(--vc-color-action-hover)!important;
  border-color:var(--vc-color-action-hover)!important;
}

/* Account actions in the sidebar: Help stays visually quiet; logout gets the softer warning treatment. */
.vc-app #vxSidebar #vxNavHelp{
  border-color:transparent!important;
  box-shadow:none!important;
}
.vc-app #vxSidebar #vxNavHelp:not(:hover):not(.active):not([aria-current="page"]){
  background:transparent!important;
}
.vc-app #vxSidebar #btnLogout.vx-logout{
  background:var(--vc-color-danger-soft)!important;
  color:var(--vc-color-danger)!important;
  border-color:var(--vc-color-danger-border)!important;
  box-shadow:none!important;
}
.vc-app #vxSidebar #btnLogout.vx-logout:hover{
  background:#ffe4e6!important;
  color:var(--vc-color-danger)!important;
  border-color:var(--vc-color-danger-border)!important;
}

/* ---------- Forms ---------- */
.vc-app #vxWorkspace label{
  display:block;
  margin:0 0 7px;
  color:var(--vc-color-text);
  font-size:13px;
  line-height:1.35;
  font-weight:720;
}
.vc-app #vxWorkspace :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  min-height:46px;
  padding:11px 13px;
  border:1px solid var(--vc-color-border)!important;
  border-radius:10px!important;
  background:var(--vc-color-surface)!important;
  color:var(--vc-color-text)!important;
  box-shadow:none!important;
  transition:border-color var(--vc-motion-fast),box-shadow var(--vc-motion-fast),background var(--vc-motion-fast);
}
.vc-app #vxWorkspace :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):hover:not(:disabled){
  border-color:var(--vc-color-border-strong)!important;
}
.vc-app #vxWorkspace :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus{
  border-color:var(--vc-color-action)!important;
  box-shadow:var(--vc-focus-ring)!important;
  outline:0;
}
.vc-app #vxWorkspace :where(input,textarea)::placeholder{color:var(--vc-color-text-placeholder);opacity:1}
.vc-app #vxWorkspace :where(input,select,textarea):disabled{
  background:var(--vc-color-surface-muted)!important;
  color:var(--vc-color-text-muted)!important;
}
.vc-app #vxWorkspace input[type="checkbox"],
.vc-app #vxWorkspace input[type="radio"]{
  width:18px;
  height:18px;
  min-height:18px;
  margin:0 7px 0 0;
  vertical-align:-3px;
  accent-color:var(--vc-color-action);
}
.vc-app .search-box{
  align-items:center;
  gap:10px;
  padding:12px;
  margin-bottom:18px;
  border:1px solid var(--vc-color-border);
  border-radius:var(--vc-radius-md);
  background:var(--vc-color-surface-muted);
}
.vc-app .search-box input{margin:0!important}
.vc-app .search-box button{flex:0 0 auto;min-width:112px}

/* ---------- Consistent action hierarchy ---------- */
.vc-app button.vc-ui-action{
  min-height:var(--vc-control-min-height)!important;
  border-radius:9px!important;
  font-weight:720!important;
  line-height:1.2;
  box-shadow:none!important;
  transition:background var(--vc-motion-fast),border-color var(--vc-motion-fast),box-shadow var(--vc-motion-fast),transform var(--vc-motion-fast)!important;
}
.vc-app button.vc-ui-primary{
  background:var(--vc-color-action)!important;
  color:var(--vc-color-on-action)!important;
  border:1px solid var(--vc-color-action)!important;
}
.vc-app button.vc-ui-primary:hover:not(:disabled){
  background:var(--vc-color-action-hover)!important;
  border-color:var(--vc-color-action-hover)!important;
}
.vc-app button.vc-ui-secondary{
  background:var(--vc-color-surface)!important;
  color:var(--vc-color-brand)!important;
  border:1px solid var(--vc-color-border)!important;
}
.vc-app button.vc-ui-secondary:hover:not(:disabled){
  background:var(--vc-color-surface-muted)!important;
  border-color:var(--vc-color-border-strong)!important;
}
.vc-app button.vc-ui-danger{
  background:var(--vc-color-danger)!important;
  color:#fff!important;
  border:1px solid var(--vc-color-danger)!important;
}
.vc-app button.vc-ui-danger:hover:not(:disabled){filter:brightness(.92)}
.vc-app button.vc-ui-action:active:not(:disabled){transform:translateY(1px)}
.vc-app button.vc-ui-action:focus-visible{outline:0!important;box-shadow:var(--vc-focus-ring)!important}

/* Existing semantic/selection controls must remain controls, not CTAs. */
.vc-app :where(.profile-tab-btn,.tab-btn){
  box-shadow:none!important;
}
.vc-app .profile-tabs{
  gap:4px;
  padding-bottom:0;
  border-bottom:1px solid var(--vc-color-border);
}
.vc-app .profile-tab-btn{
  background:transparent!important;
  color:var(--vc-color-text-muted)!important;
  border:0!important;
  border-bottom:3px solid transparent!important;
  border-radius:8px 8px 0 0!important;
}
.vc-app .profile-tab-btn:hover:not(.active){background:var(--vc-color-surface-muted)!important;color:var(--vc-color-brand)!important}
.vc-app .profile-tab-btn.active{
  background:transparent!important;
  color:var(--vc-color-brand)!important;
  border-bottom-color:var(--vc-color-action)!important;
}

/* ---------- Tables, lists and feedback ---------- */
.vc-app #vxWorkspace table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--vc-color-border);border-radius:12px;overflow:hidden;background:var(--vc-color-surface)}
.vc-app #vxWorkspace th{padding:11px 12px;background:var(--vc-color-surface-muted);color:var(--vc-color-brand);font-size:12px;text-align:left}
.vc-app #vxWorkspace td{padding:11px 12px;border-top:1px solid var(--vc-color-border);color:var(--vc-color-text);font-size:13px;vertical-align:top}
.vc-app #vxWorkspace tbody tr:hover{background:var(--vc-color-row-hover)}
.vc-app :where(.error,.success,.alert){border-radius:10px!important;line-height:1.5}
.vc-app .error{border:1px solid var(--vc-color-danger-border)}
.vc-app .success{border:1px solid var(--vc-color-success-border)}

/* ---------- Dialogs ---------- */
.vc-app dialog{
  width:min(720px,calc(100vw - 28px));
  max-height:min(86dvh,900px);
  padding:0;
  border:0;
  border-radius:18px;
  background:var(--vc-color-surface);
  color:var(--vc-color-text);
  box-shadow:var(--vc-shadow-lg);
}
.vc-app dialog::backdrop{background:var(--vc-color-backdrop)}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  body.vc-authenticated-shell{padding:0}
  body.vc-authenticated-shell>.container{width:100%;border-radius:0}
  .vc-app #vxLayout{min-height:100dvh;border:0;border-radius:0;box-shadow:none}
  .vc-app #vxSidebar{min-height:100dvh}
  .vc-app #vxWorkspace{padding:0 18px 28px}
  .vc-app #vxWorkspace .vc-account-toolbar{margin:0 -18px 20px;padding-left:18px;padding-right:18px}
  .vc-app .profile-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
  .vc-app .profile-tabs::-webkit-scrollbar{display:none}
  .vc-app .profile-tab-btn{flex:0 0 auto;white-space:nowrap}
  .vc-app #vxWorkspace table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:700px){
  .vc-app #vxWorkspace :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){font-size:16px!important}
  .vc-app .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vc-app .dash-card{min-height:84px;padding:14px}
  .vc-app .dash-card .value{font-size:24px}
  .vc-app .dash-panel{padding:16px}
  .vc-app .search-box{align-items:stretch;flex-direction:column}
  .vc-app .search-box button{width:100%}
  .vc-app :where(.approval-actions,.passport-actions,.vc-prof-actions,.vc-tutor-card-actions,.vx-actions){gap:8px}
}
@media(max-width:480px){
  .vc-app #vxWorkspace{padding:0 14px 24px}
  .vc-app #vxWorkspace .vc-account-toolbar{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .vc-app #vxWorkspace .section-header{font-size:19px}
  .vc-app .dashboard-grid{gap:8px!important}
  .vc-app .quick-actions{grid-template-columns:1fr!important}
  .vc-app :where(.approval-actions,.passport-actions,.vc-prof-actions,.vc-tutor-card-actions,.vx-actions)>button:not(.vc-mini){flex:1 1 100%;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .vc-app button.vc-ui-action{transition:none!important}
  .vc-app button.vc-ui-action:active:not(:disabled){transform:none}
}


/* ---------- Pre-launch stability 7.2.3 ---------- */
/* Professional KPI buttons must keep the approved teal surface even if a legacy rule or transient state targets buttons. */
body.vc-professional-account button.vc-prof-kpi,
body.vc-professional-account button.vc-prof-kpi:disabled,
body.vc-professional-account button.vc-prof-kpi[aria-disabled="true"]{
  background:var(--vc-color-action)!important;
  color:var(--vc-color-on-action)!important;
  border-color:var(--vc-color-action)!important;
  opacity:1!important;
}
body.vc-professional-account button.vc-prof-kpi :is(span,strong,small){color:var(--vc-color-on-action)!important}
body.vc-professional-account button.vc-prof-kpi :is(span,small){opacity:.88}
body.vc-professional-account button.vc-prof-kpi:hover:not(:disabled){
  background:var(--vc-color-action-hover)!important;
  border-color:var(--vc-color-action-hover)!important;
}

/* Notifications: compact surface. The click-away layer stays invisible and must never visually cover the application. */
.vc-app #centralAvisos.vc-notice-drawer{
  background:var(--vc-color-surface)!important;
  color:var(--vc-color-text)!important;
  border:1px solid var(--vc-color-border)!important;
  box-shadow:var(--vc-shadow-lg)!important;
}
.vc-app #centralAvisos.vc-notice-drawer :where(h1,h2,h3,strong){color:var(--vc-color-brand)}
.vc-app #centralAvisos.vc-notice-drawer :where(p,span,small){color:var(--vc-color-text-muted)}
.vc-app #vxNoticeBackdrop,
.vc-app #vxNoticeBackdrop:hover,
.vc-app #vxNoticeBackdrop:active,
.vc-app #vxNoticeBackdrop:focus{
  background:transparent!important;
  color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
@media (min-width:901px){
  .vc-app #centralAvisos.vc-notice-drawer{
    top:76px!important;
    right:24px!important;
    bottom:auto!important;
    left:auto!important;
    width:min(420px,calc(100vw - 48px))!important;
    height:auto!important;
    max-height:min(680px,calc(100dvh - 100px))!important;
    padding:20px!important;
    border-radius:18px!important;
    transform:translateY(-10px) scale(.985)!important;
    transform-origin:top right;
  }
  .vc-app #centralAvisos.vc-notice-drawer.vx-panel-visible{
    transform:translateY(0) scale(1)!important;
  }
}
@media (max-width:900px){
  .vc-app #centralAvisos.vc-notice-drawer{
    top:auto!important;
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    left:12px!important;
    width:auto!important;
    height:auto!important;
    max-height:min(72dvh,640px)!important;
    padding:18px!important;
    border-radius:18px!important;
    transform:translateY(24px)!important;
  }
  .vc-app #centralAvisos.vc-notice-drawer.vx-panel-visible{
    transform:translateY(0)!important;
  }
}

/* ---------- KPI visibility hard-fix 7.2.5 ----------
   Do not depend on vc-professional-account here: the dashboard can render before that
   body state settles. Literal colors intentionally prevent legacy token/cascade drift. */
.vc-app button.vc-prof-kpi,
.vc-app button.vc-prof-kpi:disabled,
.vc-app button.vc-prof-kpi[aria-disabled="true"]{
  background:#0f766e!important;
  color:#fff!important;
  border-color:#0f766e!important;
  opacity:1!important;
}
.vc-app button.vc-prof-kpi span,
.vc-app button.vc-prof-kpi strong,
.vc-app button.vc-prof-kpi small{color:#fff!important}
.vc-app button.vc-prof-kpi span,
.vc-app button.vc-prof-kpi small{opacity:.88}
.vc-app button.vc-prof-kpi:hover:not(:disabled){
  background:#115e59!important;
  color:#fff!important;
  border-color:#115e59!important;
}