/* The professional agenda fills the outlet; only its data area scrolls. */
@media screen {
  .p2-shell-sidebar-only > .p2-main:has(.ag-vgrid-shell) {
    height: 100dvh;
    min-height: 0;
    max-width: none;
    /* The shared shell consumes this value, including its compact breakpoint. */
    --p2-content-padding: 8px;
    display: flex;
    flex-direction: column;
  }
  .p2-route-view:has(.ag-vgrid-shell),
  .ag-legacy:has(.ag-vgrid-shell),
  .ag-card:has(.ag-vgrid-shell) > .ag-mode-body,
  #ag-print-mapa:has(.ag-vgrid-shell) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
  }
  .ag-card:has(.ag-vgrid-shell) > .ag-modes,
  .ag-card:has(.ag-vgrid-shell) > .ag-compact-controls,
  .ag-mode-body:has(.ag-vgrid-shell) > .ag-info {
    flex-shrink: 0;
  }
  .ag-mode-body:has(.ag-vgrid-shell) > :not(#ag-print-mapa):not(.ag-info) {
    flex-shrink: 0;
    max-height: 25dvh;
    overflow: auto;
  }
}
/* Professional Agenda: canonical layout and approved visual palette. */
.ag-vgrid-shell {
  overflow: auto;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  border: 1px solid #e5eaf0;
  border-radius: 12px;
  background: #fff;
  isolation: isolate;
}

.ag-vgrid-shell:focus-visible {
  outline: 2px solid #6d183a;
  outline-offset: 2px;
}

.ag-vgrid {
  width: max-content;
  min-width: 100%;
}

.ag-vgrid-head {
  display: grid;
  grid-template-columns: 200px max-content 85px 65px;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f7f9fc;
  border-bottom: 1px solid #dbe5ea;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}

.ag-vrow {
  display: grid;
  grid-template-columns: 200px max-content 85px 65px;
  align-items: stretch;
  border-bottom: 1px solid #e3eaee;
  border-color: #edf0f5;
}

.ag-vgrid-head>span {
  padding: 12px;
}

.ag-vgrid-head>span:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #f7f9fc;
  border-right: 1px solid #e9edf3;
}

.ag-vprofessional {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 1px solid #e9edf3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
}

.ag-vrow:last-child {
  border-bottom: 0;
}

.ag-vavatar {
  display: none;
}

.ag-vprofessional strong {
  display: block;
  color: #000;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  text-shadow: none;
}

.ag-vprofessional small {
  display: block;
  margin-top: 4px;
  color: #000;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
}

.ag-vslots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 142px;
  gap: 6px;
  padding: 6px;
  overflow: visible;
}

.ag-vhours {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 142px;
  gap: 6px;
  padding: 6px;
  overflow: visible;
  align-items: center;
  text-align: center;
}

.ag-vslot-group {
  position: relative;
  min-width: 0;
  display: flex;
}

.ag-vslot-empty {
  min-height: 70px;
}

.ag-voff-duty {
  min-width: 0;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a2aab2;
  font-size: 16px;
}


.ag-vslot {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  border: 1px solid #cdd9df;
  border-radius: 9px;
  padding: 7px 9px;
  background: #eef2f5;
  color: #000;
  text-align: left;
  display: grid;
  gap: 6px;
  cursor: pointer;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: 400;
  text-shadow: none;
  border-width: 1px;
  border-left-width: 3px;
  box-shadow: none;
  transition: box-shadow .15s;
}

.ag-vslot-time {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  text-shadow: none;
  letter-spacing: .02em;
}

.ag-vslot-patients {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
}

.ag-vslot strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
  letter-spacing: -.15px;
  color: #000;
}

.ag-vslot small {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
  color: inherit;
  padding-right: 24px;
}

.ag-vslot.free {
  background: #ccebd9;
  border-color: #93c9ab;
  color: #000;
  border-left-color: #a5cdb8;
}

.ag-vslot.ag-unavailable {
  background: #dce1e6;
  border-color: #cfd6da;
  color: #000;
  cursor: not-allowed;
}

.ag-vslot-add {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 23px;
  height: 23px;
  min-height: 23px;
  padding: 0;
  border: 1px solid #dbe4e7;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-size: 16px;
  cursor: pointer;
}

.ag-vslot-add:hover {
  background: #dff1e7;
}

.ag-vslot-add:focus-visible {
  outline: 2px solid #6d183a;
  outline-offset: 1px;
}

.ag-vslot:focus-visible {
  outline: 2px solid #6d183a;
  outline-offset: 1px;
}

.ag-vroom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border-left: 1px solid #edf1f3;
  background: white;
  text-align: center;
  border-color: #edf0f5;
}

.ag-vcount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border-left: 1px solid #edf1f3;
  background: white;
  text-align: center;
  border-color: #edf0f5;
}

.ag-vroom span {
  font-size: 14px;
  color: #000;
}

.ag-vroom button {
  border: 0;
  background: transparent;
  color: #000;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

.ag-vcount strong {
  font-size: 15px;
  color: #000;
}

.ag-vcount small {
  font-size: 14px;
  color: #000;
}

.ag-vslot.ag-status-regular {
  background: #cee2fa;
  border-color: #92b7df;
  color: #000;
  border-left-color: #7d9fc9;
}

.ag-vslot.ag-status-attention {
  background: #ffe49a;
  border-color: #d6ad46;
  color: #000;
  border-left-color: #dab867;
}

.ag-vslot.ag-status-error {
  background: #facbd2;
  border-color: #d78a98;
  color: #000;
  border-left-color: #d58c9b;
}

.ag-vslots>.ag-vslot-group.ag-health-hidden {
  display: flex;
  visibility: hidden;
}

.ag-vrow.ag-health-row-hidden {
  display: none!important;
}

.ag-card:has(.ag-compact-controls) {
  display: flex;
  flex-direction: column;
  /* Reset the alignment and gap from the legacy two-column filter layout. */
  align-items: stretch;
  gap: 0;
  flex: 1 1 0;
  min-height: 0;
  padding: 8px;
  border: 1px solid #e2e7ee;
  border-radius: 16px;
  box-shadow: 0 6px 22px #23324605;
  background: white;
}

.ag-card:has(.ag-compact-controls) .ag-modes {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0 0 2px;
  overflow-x: auto;
  border-bottom: 1px solid #e9edf2;
  overflow: auto;
}

.ag-card:has(.ag-compact-controls) .ag-modes button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 0;
  font-size: 14px;
  white-space: nowrap;
  background: transparent;
  color: #000;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  box-shadow: none;
}

.ag-card:has(.ag-compact-controls) .ag-compact-controls {
  position: relative;
  top: auto;
  z-index: 5;
  display: grid;
  grid-template-columns: 110px minmax(210px,1fr) 155px 200px auto;
  align-items: end;
  gap: 8px;
  margin: 0 0 2px;
  padding: 6px 8px;
  background: #edf2f6;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.ag-card .ag-compact-controls>label {
  display: grid;
  grid-template-columns: 1fr!important;
  gap: 4px!important;
  min-width: 0;
  min-height: 0;
  grid-column: auto;
  margin: 0!important;
  padding: 0!important;
  border: 0;
  background: transparent!important;
}

.ag-card .ag-compact-controls label>span,
.ag-card .ag-compact-controls .ag-search-wrap>label,
.ag-card .ag-compact-controls .ag-filter-label {
  font-size: 12px!important;
  line-height: 1.3;
  color: #000;
  letter-spacing: .06em;
  margin: 0;
  font-weight: 600;
}

.ag-card .ag-compact-controls .ag-search-wrap {
  display: grid;
  gap: 4px;
  grid-column: auto;
  min-width: 0;
  margin: 0;
}

.ag-card .ag-compact-controls select,
.ag-card .ag-compact-controls .ag-search-wrap>input {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px!important;
  border-radius: 9px;
  font-size: 14px!important;
  background: #fff!important;
  border: 1px solid #7b8fa2!important;
  box-shadow: none!important;
  color: #172d40;
}

.ag-card .ag-compact-controls select {
  padding: 6px 9px;
  appearance: auto;
  -webkit-appearance: auto;
}

.ag-card .ag-compact-controls .ag-search-wrap>input {
  padding-left: 36px;
}

.ag-search-icon {
  position: absolute;
  left: 12px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  color: #526b7f;
  pointer-events: none;
}

.ag-card .ag-compact-controls .ag-health-toolbar {
  display: contents;
}

.ag-card .ag-compact-controls .ag-health-toolbar label {
  min-width: 0;
  gap: 4px;
}

.ag-card .ag-compact-controls>.ag-mini {
  height: 36px;
  min-height: 36px;
  padding: 6px 9px;
}

.ag-extra-filters {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ag-filter-disclosure {
  min-width: 0;
}

.ag-filter-disclosure>summary {
  position: relative;
  list-style: none;
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 28px 0 9px;
  border: 1px solid #7b8fa2;
  border-radius: 9px;
  background: #fff;
  color: #172d40;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ag-filter-disclosure>summary::-webkit-details-marker {
  display: none;
}

.ag-filter-disclosure>summary::after {
  content: '▾';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.ag-filter-disclosure[open]>summary::after {
  content: '▴';
}

.ag-filter-summary {
  min-width: 0;
  font: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-extra-filter-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 330px;
  max-width: calc(100vw - 48px);
  padding: 14px;
  border: 1px solid #dbe5ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px #12394d22;
}

.ag-card .ag-extra-filter-panel .ag-check {
  display: flex;
  min-height: 32px;
  margin: 0;
  padding: 0;
}

.ag-card .ag-extra-filter-panel .ag-units {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0 0;
  margin: 8px 0 0;
  border: 0;
  border-top: 1px solid #e3eaee;
}

.ag-card:has(.ag-compact-controls) .ag-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 0 7px;
  color: #000;
  font-size: 14px;
}

.ag-card:has(.ag-compact-controls) .ag-health-legend {
  color: #000;
  font-size: 14px;
  gap: 9px;
}

@media(max-width:1200px) {
.ag-card:has(.ag-compact-controls) .ag-compact-controls {
  grid-template-columns: 110px minmax(180px,1fr) 140px;
}

.ag-card .ag-compact-controls>.ag-mini {
  justify-self: start;
}

}

@media(max-width:650px) {
.ag-card:has(.ag-compact-controls) {
  padding: 10px;
}

.ag-card:has(.ag-compact-controls) .ag-compact-controls {
  grid-template-columns: 1fr 1fr;
}

.ag-card .ag-compact-controls .ag-search-wrap {
  grid-column: 1/-1;
  grid-row: 1;
}

.ag-extra-filter-panel {
  right: 0;
  left: auto;
}

.ag-vgrid-head {
  grid-template-columns: 150px max-content 90px 70px;
}

.ag-vrow {
  grid-template-columns: 150px max-content 90px 70px;
}

.ag-vavatar {
  display: none;
}

.ag-vprofessional strong {
  font-size: 15px;
}

}

@media print {
.ag-compact-controls {
  display: none!important;
}

.ag-extra-filters {
  display: none!important;
}

.ag-vslot-add {
  display: none;
}

.ag-vgrid-shell {
  overflow: visible;
  max-height: none;
}
}

body:has(.ag-compact-controls) {
  background: #f3f5f8;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
}

.ag-legacy .p2-section-head {
  margin-bottom: 22px;
}

.ag-legacy .p2-title {
  font-size: 28px;
  letter-spacing: -.8px;
  color: #000;
}

.ag-card:has(.ag-compact-controls) .ag-modes button.on {
  color: #000;
  border-bottom: 3px solid #7b2850;
  font-weight: 700;
}

.ag-card .ag-compact-controls :is(select, .ag-search-wrap>input, .ag-filter-disclosure>summary):hover {
  border-color: #526b7f!important;
}

.ag-card .ag-compact-controls :is(select, .ag-search-wrap>input, .ag-filter-disclosure>summary):focus {
  border-color: #7b2850!important;
  outline: 2px solid #7b2850;
  outline-offset: 2px;
}

.ag-info .ag-health-legend {
  margin-left: auto;
  font-weight: 500;
}

.ag-vslot:hover {
  filter: none;
  box-shadow: 0 4px 10px #23324612;
  transform: none;
}

.ag-vslot.free strong {
  color: #000;
  font-weight: 500;
}

@media(min-width:900px) {
.ag-card:has(.ag-compact-controls) .ag-compact-controls {
  grid-template-columns: 100px minmax(210px,1fr) 140px 200px auto;
  gap: 8px;
}

.ag-card .ag-compact-controls>.ag-mini {
  justify-self: stretch;
}
}

@media(max-width:700px) {
.ag-card:has(.ag-compact-controls) {
  padding: 12px;
}

.ag-vgrid-head {
  grid-template-columns: 165px max-content 75px 60px;
}

.ag-vrow {
  grid-template-columns: 165px max-content 75px 60px;
}

.ag-card:has(.ag-compact-controls) .ag-modes {
  gap: 18px;
}

}

.ag-card .ag-compact-controls .ag-search-wrap>input::placeholder {
  color: #526174;
  opacity: 1;
}



/* Online retains the same guide-status palette as the other appointments. */
.ag-slot-online{display:inline-flex;align-items:center;margin-left:5px;font-size:10px;font-weight:600;white-space:nowrap;color:#000}
.ag-card .ag-modes .ag-new-online{margin-left:auto;border:1px solid #b9cbd8;border-radius:8px;padding:7px 12px;color:#000;background:#fff}
.ag-booking-modality,.ag-modality{display:flex;gap:7px;align-items:center;margin:8px 0 12px;color:#000}
.ag-booking-modality select,.ag-modality select{padding:8px;border:1px solid #bacbdc;border-radius:8px;background:#fff;color:#000;font:inherit}
.ag-online-picker{width:min(480px,calc(100vw - 32px));border:0;border-radius:16px;padding:24px;color:#000;background:#fff;font:14px Arial,sans-serif;box-shadow:0 18px 60px #142e4933}
.ag-online-picker::backdrop{background:#13253c66}
.ag-online-picker h3{margin:0 0 20px;font-size:20px}
.ag-online-picker label{display:grid;gap:7px;margin:14px 0;font-weight:600}
.ag-online-picker select{width:100%;padding:11px;border:1px solid #b9cbd8;border-radius:8px;background:#fff;color:#000;font:inherit}
.ag-online-picker footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.ag-online-picker button{padding:10px 16px;border:1px solid #b9cbd8;border-radius:8px;background:#fff;color:#000;font:inherit;cursor:pointer}
.ag-online-picker button[type=submit]{background:#7a1648;border-color:#7a1648;color:#fff}

/* Existing appointments retain a neutral occupied state at operation start. */
.ag-vslot.ag-status-neutral,.ag-cell.occupied.ag-status-neutral,.ag-chip.busy.ag-status-neutral{background:#fff;border-color:#cbd5df;color:#000}