/* ==========================================================
   ELGHIS · DASHBOARD APPOINTMENTS · 11C-C
   ========================================================== */

#elghis-dashboard-appointments-shell {
  --ea-primary: var(--et-primary, #082b46);
  --ea-accent: var(--et-accent, #14969d);
  --ea-soft: var(--et-soft, #e5f4f3);
  --ea-border: var(--et-border, #d9e4e8);
  --ea-text: var(--et-text, #08243c);
  --ea-muted: var(--et-muted, #698092);
  --ea-surface: #ffffff;
  --ea-subtle: #f7fafb;

  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(280px, .85fr);
  gap: 18px;

  width: 100%;
  margin-top: 18px;

  align-items: start;
}


#elghis-dashboard-appointments-main {
  min-width: 0;
}


#elghis-dashboard-appointments-side {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 14px;
}


/* ==========================================================
   TARJETA AGENDA DERECHA
   ========================================================== */

.elghis-appt-action-card {
  padding: 18px;

  border: 1px solid var(--ea-border);
  border-radius: 18px;

  background: var(--ea-surface);

  box-shadow:
    0 8px 26px
    rgba(8, 36, 60, .05);
}


.elghis-appt-action-card h3 {
  margin: 0;

  color: var(--ea-text);

  font-size: 16px;
  line-height: 1.25;

  letter-spacing: -.02em;
}


.elghis-appt-action-card p {
  margin: 5px 0 14px;

  color: var(--ea-muted);

  font-size: 11px;
  line-height: 1.45;
}


#elghis-appt-calendar-action {
  width: 100%;
}


#elghis-appt-calendar-action
#calendar-link {
  width: 100% !important;
  min-height: 39px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  margin: 0 !important;
  padding: 0 14px !important;

  border-radius: 11px !important;

  text-decoration: none;
  text-align: center;

  font-size: 12px !important;
  font-weight: 800 !important;
}


/* ==========================================================
   COMPARTIR LINK EN COLUMNA DERECHA
   ========================================================== */

#elghis-dashboard-appointments-side
#elghis-share-link-card {
  width: 100% !important;

  box-sizing: border-box;

  margin: 0 !important;
}


#elghis-dashboard-appointments-side
.elghis-share-link-card {
  border-radius: 18px !important;
}


#elghis-dashboard-appointments-side
.elghis-share-link-value {
  font-size: 10px !important;
}


#elghis-dashboard-appointments-side
.elghis-share-btn {
  min-height: 32px !important;

  padding: 0 9px !important;

  font-size: 10px !important;
}


/* ==========================================================
   VISTA DE CITAS
   ========================================================== */

.elghis-appt-root {
  width: 100%;
  min-width: 0;
}


.elghis-appt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 10px;
}


.elghis-appt-week-nav,
.elghis-appt-view-switch {
  display: flex;
  align-items: center;

  gap: 4px;

  padding: 3px;

  border: 1px solid var(--ea-border);
  border-radius: 10px;

  background: #fff;
}


.elghis-appt-week-label {
  min-width: 106px;

  padding: 0 5px;

  color: var(--ea-text);

  font-size: 10px;
  font-weight: 800;

  text-align: center;
}


.elghis-appt-nav-button,
.elghis-appt-view-button {
  height: 30px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  color: var(--ea-muted);

  font: inherit;
  font-size: 10px;
  font-weight: 800;

  cursor: pointer;
}


.elghis-appt-nav-button {
  width: 30px;
  padding: 0;
}


.elghis-appt-view-button {
  padding: 0 10px;
}


.elghis-appt-view-button.is-active {
  background: var(--ea-primary);
  color: #fff;
}


.elghis-appt-nav-button:disabled {
  opacity: .28;
  cursor: default;
}


/* ==========================================================
   GRID GENERAL
   ========================================================== */

.elghis-appt-scroll {
  width: 100%;

  overflow-x: auto;

  padding-bottom: 3px;

  scrollbar-width: thin;
}


.elghis-appt-grid {
  display: grid;

  grid-template-columns:
    63px
    repeat(
      var(--ea-days),
      minmax(91px, 1fr)
    );

  gap: 3px 4px;

  min-width:
    calc(
      63px +
      var(--ea-days) * 91px
    );
}


/* ==========================================================
   ENCABEZADO DE DÍAS
   ========================================================== */

.elghis-appt-corner {
  height: 38px;
}


.elghis-appt-day {
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 0 6px;

  box-sizing: border-box;

  border: 1px solid var(--ea-border);
  border-radius: 9px;

  background: var(--ea-subtle);

  color: var(--ea-text);
}


.elghis-appt-day strong {
  font-size: 11px;
  font-weight: 850;
}


.elghis-appt-day span {
  color: var(--ea-muted);

  font-size: 9px;
  font-weight: 750;
}


.elghis-appt-day.is-today {
  border-color:
    color-mix(
      in srgb,
      var(--ea-accent) 48%,
      var(--ea-border)
    );

  background:
    color-mix(
      in srgb,
      var(--ea-soft) 65%,
      white
    );
}


/* ==========================================================
   HORAS · 07:00 A 21:00
   ========================================================== */

.elghis-appt-hour {
  min-height: 27px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  box-sizing: border-box;

  padding-right: 5px;

  color: var(--ea-muted);

  font-size: 9px;
  font-weight: 750;

  white-space: nowrap;
}


.elghis-appt-cell {
  min-height: 27px;

  display: flex;
  align-items: center;

  gap: 2px;

  overflow: hidden;

  box-sizing: border-box;

  padding: 2px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--ea-border) 76%,
      transparent
    );

  border-radius: 7px;

  background:
    color-mix(
      in srgb,
      var(--ea-subtle) 70%,
      white
    );
}


.elghis-appt-cell.has-booking {
  border-color: var(--ea-border);
  background: #fff;
}


/* ==========================================================
   CITA · SOLO NOMBRE
   ========================================================== */

.elghis-appt-name {
  min-width: 0;
  flex: 1 1 0;

  overflow: hidden;

  padding: 4px 5px;

  border: 1px solid var(--appt-border);
  border-radius: 6px;

  background: var(--appt-bg);

  color: var(--appt-text);

  font-size: 9px;
  font-weight: 800;

  line-height: 1.15;

  white-space: nowrap;
  text-overflow: ellipsis;

  text-align: center;
}


/* ==========================================================
   VACÍO
   ========================================================== */

.elghis-appt-empty {
  min-height: 105px;

  display: grid;
  place-items: center;

  padding: 18px;

  border: 1px dashed var(--ea-border);
  border-radius: 15px;

  background: var(--ea-subtle);

  color: var(--ea-muted);

  font-size: 12px;

  text-align: center;
}


.elghis-appt-summary-hidden {
  display: none !important;
}


/* ==========================================================
   NORMALIZAR CONTENEDOR ORIGINAL
   ========================================================== */

#elghis-dashboard-appointments-main
.bookings-list {
  width: 100% !important;

  margin: 0 !important;
}


#elghis-dashboard-appointments-main
section[aria-labelledby="bookings-title"] {
  width: 100%;

  box-sizing: border-box;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

  #elghis-dashboard-appointments-shell {
    grid-template-columns:
      minmax(0, 1fr) 280px;
  }

}


@media (max-width: 860px) {

  #elghis-dashboard-appointments-shell {
    grid-template-columns: 1fr;
  }

  #elghis-dashboard-appointments-side {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 620px) {

  #elghis-dashboard-appointments-side {
    display: flex;
  }

  .elghis-appt-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .elghis-appt-week-nav,
  .elghis-appt-view-switch {
    justify-content: center;
  }

}


/* ==========================================================
   ELGHIS_APPOINTMENTS_WIDTH_FIX_11CD
   Semana completa + aprovechamiento real del ancho
   ========================================================== */

#elghis-dashboard-appointments-shell {
  width: 100% !important;
  max-width: none !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, 440px) !important;

  gap: 20px !important;
}


#elghis-dashboard-appointments-main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}


#elghis-dashboard-appointments-main
section[aria-labelledby="bookings-title"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


#elghis-dashboard-appointments-main
.bookings-list {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}


#elghis-dashboard-appointments-main
.elghis-appt-root {
  width: 100% !important;
  max-width: none !important;
}


#elghis-dashboard-appointments-main
.elghis-appt-scroll {
  width: 100% !important;
  max-width: none !important;

  overflow-x: hidden;
}


#elghis-dashboard-appointments-main
.elghis-appt-grid {
  width: 100% !important;
  min-width: 0 !important;

  grid-template-columns:
    62px
    repeat(
      7,
      minmax(0, 1fr)
    ) !important;
}


/* Un poco más compactas para que
   entren los siete días cómodamente */

#elghis-dashboard-appointments-main
.elghis-appt-day {
  min-width: 0;

  padding-left: 4px;
  padding-right: 4px;
}


#elghis-dashboard-appointments-main
.elghis-appt-cell {
  min-width: 0;
}


#elghis-dashboard-appointments-main
.elghis-appt-name {
  max-width: 100%;

  padding-left: 3px;
  padding-right: 3px;

  font-size: 8.5px;
}


/* Pantallas medianas:
   permitimos scroll únicamente
   cuando realmente haga falta */

@media (max-width: 1050px) {

  #elghis-dashboard-appointments-shell {
    grid-template-columns:
      minmax(0, 1fr)
      320px !important;
  }

  #elghis-dashboard-appointments-main
  .elghis-appt-scroll {
    overflow-x: auto;
  }

  #elghis-dashboard-appointments-main
  .elghis-appt-grid {
    min-width: 760px !important;
  }
}


@media (max-width: 860px) {

  #elghis-dashboard-appointments-shell {
    grid-template-columns:
      1fr !important;
  }

}



/* ==========================================================
   ELGHIS_APPOINTMENTS_FINAL_FIX_11CG
   ========================================================== */


/* ----------------------------------------------------------
   La causa del espacio desperdiciado:
   dashboard-redesign mantiene una
   cuadrícula interna para resumen/lista.
   Dentro de este módulo debe ser 1 columna.
   ---------------------------------------------------------- */

#elghis-dashboard-appointments-main
.elghis-bookings-grid {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  grid-template-columns:
    none !important;
}


#elghis-dashboard-appointments-main
.bookings-section {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  min-width: 0 !important;
}


#elghis-dashboard-appointments-main
.bookings-list {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  min-width: 0 !important;

  grid-column:
    1 / -1 !important;
}


#elghis-dashboard-appointments-main
.elghis-appt-root {
  width: 100% !important;
  max-width: none !important;

  min-width: 0 !important;
}


/* ----------------------------------------------------------
   Shell general:
   izquierda flexible, derecha controlada.
   ---------------------------------------------------------- */

#elghis-dashboard-appointments-shell {
  grid-template-columns:
    minmax(0, 1fr)
    520px !important;

  gap: 20px !important;

  width: 100% !important;
  max-width: none !important;
}


#elghis-dashboard-appointments-main {
  width: 100% !important;
  max-width: none !important;

  min-width: 0 !important;
}


/* ==========================================================
   COMPACTA REAL
   ========================================================== */

.elghis-appt-compact-scroll {
  width: 100%;

  overflow-x: auto;

  padding-bottom: 3px;

  scrollbar-width: thin;
}


.elghis-appt-compact-grid {
  display: grid;

  grid-template-columns:
    repeat(
      7,
      minmax(105px, 1fr)
    );

  gap: 7px;

  width: 100%;

  min-width: 760px;
}


.elghis-appt-compact-day {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--ea-border);

  border-radius:
    12px;

  background: #fff;
}


.elghis-appt-compact-head {
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  box-sizing: border-box;

  padding: 0 7px;

  border-bottom:
    1px solid
    var(--ea-border);

  background:
    var(--ea-subtle);
}


.elghis-appt-compact-head strong {
  color:
    var(--ea-text);

  font-size:
    11px;

  font-weight:
    850;
}


.elghis-appt-compact-head span {
  color:
    var(--ea-muted);

  font-size:
    9px;

  font-weight:
    750;
}


.elghis-appt-compact-day.is-today
.elghis-appt-compact-head {
  background:
    color-mix(
      in srgb,
      var(--ea-soft) 70%,
      white
    );
}


.elghis-appt-compact-list {
  display: flex;
  flex-direction: column;

  gap: 6px;

  min-height: 58px;

  padding: 7px;
}


.elghis-appt-compact-booking {
  min-width: 0;

  padding: 7px 8px;

  border:
    1px solid
    var(--appt-border);

  border-radius:
    8px;

  background:
    var(--appt-bg);

  color:
    var(--appt-text);
}


.elghis-appt-compact-time {
  display: block;

  margin-bottom: 2px;

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.15;
}


.elghis-appt-compact-name {
  display: block;

  overflow: hidden;

  font-size:
    10px;

  font-weight:
    850;

  line-height:
    1.25;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.elghis-appt-compact-empty {
  padding: 10px 3px;

  color:
    var(--ea-muted);

  font-size:
    9px;

  text-align:
    center;
}


/* ==========================================================
   CALENDARIO · USAR TODO EL ANCHO
   ========================================================== */

#elghis-dashboard-appointments-main
.elghis-appt-scroll {
  width: 100% !important;

  overflow-x: hidden;
}


#elghis-dashboard-appointments-main
.elghis-appt-grid {
  width: 100% !important;

  min-width: 0 !important;

  grid-template-columns:
    67px
    repeat(
      7,
      minmax(0, 1fr)
    ) !important;
}


/* Filas algo más delgadas */

#elghis-dashboard-appointments-main
.elghis-appt-hour,
#elghis-dashboard-appointments-main
.elghis-appt-cell {
  min-height:
    26px !important;
}


#elghis-dashboard-appointments-main
.elghis-appt-name {
  font-size:
    9px !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1350px) {

  #elghis-dashboard-appointments-shell {
    grid-template-columns:
      minmax(0, 1fr)
      400px !important;
  }

}


@media (max-width: 1050px) {

  #elghis-dashboard-appointments-shell {
    grid-template-columns:
      1fr !important;
  }

  #elghis-dashboard-appointments-side {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  #elghis-dashboard-appointments-main
  .elghis-appt-scroll {
    overflow-x: auto;
  }

  #elghis-dashboard-appointments-main
  .elghis-appt-grid {
    min-width:
      760px !important;
  }

}


@media (max-width: 700px) {

  #elghis-dashboard-appointments-side {
    display: flex;
  }

}