.schedule-page {
  min-inline-size: 0;
}

.schedule-detail {
  color: #5f6368;
  font-size: .8125rem;
}

.schedule-sr-only {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.overview-heading,
.overview-panel-heading,
.agenda-toolbar__heading,
.agenda-toolbar__navigation {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .875rem;
  justify-content: space-between;
}

.agenda-toolbar__navigation {
  justify-content: flex-start;
}

.agenda-block-action {
  margin-inline-start: auto;
}

.agenda-toolbar__heading > div {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.overview-kpis,
.schedule-counters {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.overview-kpi {
  align-content: start;
  gap: .25rem;
  padding: 1rem;
}

.overview-kpi dt,
.schedule-counters dt {
  color: #3c4043;
  font-size: .8125rem;
  font-weight: 650;
}

.overview-kpi dd[data-dashboard-metric],
.schedule-counters dd {
  font-size: 1.4375rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1.25;
}

.overview-kpi__detail {
  color: #5f6368;
  display: grid;
  font-size: .75rem;
  gap: .125rem;
}

.overview-kpi__detail strong {
  color: #3c4043;
}

.overview-panels {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.overview-card {
  align-content: start;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.overview-activity {
  display: grid;
  gap: .375rem;
}

.overview-activity__entry {
  border: 1px solid #e3e7eb;
  border-radius: .375rem;
  display: grid;
  font-size: .875rem;
  gap: .125rem;
  overflow-wrap: anywhere;
  padding: .5rem .625rem;
}

.overview-activity__entry--unread {
  background: #e8f0fe;
  border-color: #c6dafc;
}

.overview-patients {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.overview-patient {
  background: #f8f9fa;
  border: 1px solid #e3e7eb;
  border-radius: .5rem;
  display: grid;
  font-size: .875rem;
  gap: .125rem;
  overflow-wrap: anywhere;
  padding: .625rem .75rem;
}

.overview-appointments {
  border-collapse: collapse;
  inline-size: 100%;
  table-layout: fixed;
  text-align: start;
}

.overview-appointments thead th,
.overview-appointments tbody :is(th, td) {
  border-block-end: 1px solid #e3e7eb;
  font-size: .8125rem;
  padding: .5rem .25rem;
  text-align: start;
  vertical-align: top;
}

.overview-appointments thead th {
  color: #5f6368;
  font-size: .75rem;
  font-weight: 650;
}

.overview-appointments th:first-child {
  inline-size: 28%;
}

.overview-appointments th:last-child {
  inline-size: 13%;
}

.overview-appointments .btn {
  --btn-padding: .25rem;
  color: #174ea6;
}

.schedule-state {
  background: #e6f4ea;
  border-radius: .375rem;
  color: #137333;
  display: inline-block;
  font-size: .75rem;
  font-weight: 650;
  padding: .125rem .375rem;
}

.schedule-state--cancelled {
  background: #fce8e6;
  color: #c5221f;
}

.schedule-counters {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.schedule-counters div {
  background: #f1f3f4;
  border-radius: .375rem;
  overflow-wrap: anywhere;
  padding: .5rem .625rem;
}

.schedule-table-scroll {
  inline-size: 100%;
  overflow-x: auto;
}

.schedule-table {
  background: white;
  border: 1px solid #dadce0;
  border-collapse: collapse;
  inline-size: 100%;
  table-layout: fixed;
}

.schedule-table--week {
  min-inline-size: 50rem;
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #e3e7eb;
  text-align: start;
  vertical-align: top;
}

.schedule-table th {
  background: #f1f3f4;
  color: #3c4043;
  font-size: .8125rem;
  font-weight: 650;
  padding: .375rem;
}

.schedule-table:not(.schedule-table--month) th:first-child {
  inline-size: 4.75rem;
}

.schedule-table thead .schedule-detail {
  display: block;
}

.schedule-cell {
  padding: .3125rem .375rem;
}

.schedule-cell--unavailable,
.schedule-month-blank {
  background: #f8f9fa;
}

.schedule-cell--candidate,
.agenda-candidate {
  background: #e8f0fe;
  border-color: #c6dafc;
}

.schedule-table th.schedule-week-selected {
  background: #e8f0fe;
}

.schedule-week-date {
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.schedule-week-date[aria-current="date"] {
  color: #174ea6;
}

.schedule-entry-list {
  display: grid;
  gap: .25rem;
}

.schedule-entry {
  background: var(--entry-background);
  border: 1px solid var(--entry-border);
  border-inline-start-width: .1875rem;
  border-radius: .375rem;
  color: var(--entry-text);
  display: grid;
  font-size: .75rem;
  gap: .0625rem;
  overflow-wrap: anywhere;
  padding: .3125rem .4375rem;
}

a.schedule-entry:hover,
.schedule-text-action:hover,
.schedule-free:hover {
  text-decoration: underline;
}

.schedule-entry--socio {
  --entry-background: #e6f4ea;
  --entry-border: #34a853;
  --entry-text: #137333;
}

.schedule-entry--nosocio {
  --entry-background: #feefe3;
  --entry-border: #f9ab00;
  --entry-text: #794200;
}

.schedule-entry--seccion {
  --entry-background: #f3e8fd;
  --entry-border: #a142f4;
  --entry-text: #7627bb;
}

.schedule-entry--cancelled {
  --entry-background: #fce8e6;
  --entry-border: #d93025;
  --entry-text: #c5221f;
}

.schedule-entry--blocked {
  --entry-background: #e8eaed;
  --entry-border: #5f6368;
  --entry-text: #3c4043;
}

.schedule-text-action,
.schedule-free {
  color: #174ea6;
  justify-self: start;
}

.workspace .schedule-free {
  --btn-font-size: .8125rem;
  --btn-padding: .125rem .3125rem;
}

.schedule-text-action {
  text-decoration: underline;
  text-underline-offset: .125em;
}

.schedule-conflict {
  color: #a82217;
  font-weight: 650;
}

.schedule-table--month th {
  text-align: center;
}

.schedule-month-date {
  display: grid;
  gap: .125rem;
  font-size: .6875rem;
  min-block-size: 4.5rem;
  overflow-wrap: anywhere;
  padding: .3125rem;
}

.schedule-month-date time {
  font-size: .875rem;
  font-weight: 700;
}

.schedule-month-date:hover,
.schedule-month-date--selected {
  background: #e8f0fe;
}

.schedule-month-date--selected {
  box-shadow: inset 0 0 0 2px #1a73e8;
}

.schedule-today {
  color: #174ea6;
  font-weight: 650;
}

:is(.schedule-entry, .schedule-week-date, .schedule-month-date, .schedule-text-action):focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
}

@media (width <= 1100px) {
  .overview-panels { grid-template-columns: minmax(0, 1fr); }
}

@media (width <= 900px) {
  .overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 560px) {
  .schedule-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-block-action { margin-inline-start: 0; }
  .schedule-month-date { padding: .25rem .1875rem; }
}

@media (width <= 390px) {
  .overview-kpis { grid-template-columns: minmax(0, 1fr); }

  .overview-appointments thead th,
  .overview-appointments tbody :is(th, td) {
    font-size: .75rem;
  }
}