/* ===== Componente aislado "ds-" (no colisiona con WP) ===== */

.ds-schedule {
  --ds-bg: #ffffff;
  --ds-surface: #ffffff;
  --ds-border: #e6e8eb;
  --ds-text: #1f2328;
  --ds-muted: #6b7280;
  --ds-accent: #e9f7ef;
  --ds-open: #157f3d;
  --ds-closed: #b30021;
  --ds-shadow: 0 6px 18px rgba(0,0,0,.07);
  box-sizing: border-box;
  padding: 16px;
}

.ds-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

.ds-card-header {
  padding: 16px 18px 8px;
}

.ds-title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ds-text);
  font-weight: 700;
}

.ds-tz {
  color: var(--ds-muted);
}

.ds-table-wrap {
  overflow-x: auto;        /* Scroll horizontal seguro en móviles muy pequeños */
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 360px;
}

.ds-table th,
.ds-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--ds-border);
  text-align: left;
  color: var(--ds-text);
}

.ds-table thead th {
  background: #f3f4f6;
  border-top: none;
  font-weight: 700;
}

.ds-table tbody tr.ds-today {
  background: var(--ds-accent);
  font-weight: 600;
}

.ds-col-status,
.ds-status-cell {
  text-align: right;
  white-space: nowrap;
}

.ds-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.ds-badge.ds-open {
  background: rgba(21,127,61,.12);
  color: var(--ds-open);
  border: 1px solid rgba(21,127,61,.25);
}

.ds-badge.ds-closed {
  background: rgba(179,0,33,.10);
  color: var(--ds-closed);
  border: 1px solid rgba(179,0,33,.25);
}

.ds-note {
  margin: 10px 18px 16px;
  color: var(--ds-muted);
  font-size: .9rem;
}

/* ===== Responsivo ===== */
@media (max-width: 520px) {
  .ds-card { border-radius: 10px; }
  .ds-title { font-size: 1rem; }
  .ds-table th, .ds-table td { padding: 10px 12px; }
}

/* Modo oscuro respetuoso (si tu tema lo usa) */
@media (prefers-color-scheme: dark) {
  .ds-schedule {
    --ds-bg: #0b0d10;
    --ds-surface: #111318;
    --ds-border: #262a31;
    --ds-text: #e9eef5;
    --ds-muted: #9aa3af;
    --ds-accent: #0f261b;
    --ds-shadow: none;
  }
  .ds-table thead th { background: #171a20; }
}



/* --- Evita saltos de línea en TODAS las celdas --- */
.ds-table th,
.ds-table td {
  white-space: nowrap;     /*  ⬅️  cada fila queda en una sola línea */
}

/* --- Permite que la tabla crezca al ancho de su contenido --- */
.ds-table {
  width: max-content;      /* se expande si el contenido lo requiere */
  min-width: 100%;         /* pero nunca menos que el ancho del card */
}

/* --- Ya tienes scroll horizontal en móviles --- */
.ds-table-wrap {
  overflow-x: auto;        /* mantiene la accesibilidad en pantallas pequeñas */
}

/* --- Opcional: que la columna de estado no robe espacio --- */
.ds-col-status,
.ds-status-cell {
  width: 1%;
  text-align: right;
}