/*
  horari_public.css
  -----------------
  Compact, consistent styles for the reusable horario partial.
  Scoped under `.hp-root` to avoid leaking styles into the page.
*/


.hp-root {
  /* Visual tokens */
  --hp-chip-bg: rgba(255, 255, 255, 0.04);
  --hp-chip-fg: rgba(255, 255, 255, 0.6);
  --hp-chip-border: rgba(255, 255, 255, 0.12);
  --hp-today-bg: #ffffff;
  --hp-today-color: var(--color-forest, #04202C);
  --hp-day-today-color: #ffffff;
  /* Unified closed color tokens (bg subtle, color for borders/text) */
  --hp-closed-color: #dc3545;
  --hp-closed-bg: rgba(220, 53, 69, 0.06);

  /* Component sizing tokens */
  --hp-icon-size: 1.25em;
  --hp-header-gap: 0.65em;
  --hp-dia-width: 90px;
  --hp-dia-min-width: 72px;
  --hp-dia-max-width: 90px;
  --hp-chip-min-width: 90px;
  --hp-chip-max-width: 120px;
  --hp-chip-width: var(--hp-chip-min-width);
  --hp-chip-green: #78b28a;
  /* explicit status colors (use clear bootstrap-like hues) */
  --hp-status-open: #198754;
  --hp-status-closed: var(--hp-closed-color);
  /* Horizontal offset inside the accordion to separate content from the edge */
  --hp-content-offset: 25px; /* subtle right shift for day rows */
  /* Small left shift for the status chip to align with address/days (negative moves left) */
  --hp-status-shift: -5px;
  /* vertical gap between schedule rows */
  --hp-row-gap: .125rem; /* reduced to tighten spacing between days */
}

/* Don't force lateral gutter from the component; let page headers provide the correct offset */
.hp-root { padding-left: 0; padding-right: 0; }

/* (Shared header-row styles intentionally kept in styles.css) */

/* Header / meta for horario component (kept in component CSS) */
.hp-root .hp-header-row {
  display: flex;
  align-items: center;
  gap: var(--hp-header-gap);
  min-height: 0.95em; /* very compact */
  padding-block: 0; /* remove vertical padding completely */
  font-size: 1rem;
  font-weight: 600;
  color: var(--hp-chip-fg);
  margin-bottom: 0;
  /* horizontal offset provided by .hp-root */
  padding-left: 0;
}

/* ensure icons/labels inside the component header keep expected sizing */
.hp-root .hp-header-row .hp-icon { font-size: var(--hp-icon-size); margin-right: .35rem; }
.hp-root .hp-header-row .hp-label { display: inline-flex; align-items: center; gap: .45rem; }

.hp-root .hp-offset { margin-left: 0 !important; }

.hp-root .hp-info-block {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* remove extra gap between address and horari */
}

/* Avoid forced full-width from utility classes (e.g. `w-100`) in host pages */
.hp-root .accordion-button.w-100 { width: auto !important; display: flex; }

.hp-root .hp-muted { color: var(--hp-chip-fg); }
.hp-root .hp-header-row small.text-muted { color: var(--hp-chip-fg) !important; opacity: 1; }
.hp-root .accordion-button { color: var(--hp-chip-fg) !important; }
.hp-root .accordion-button .hp-label,
.hp-root .accordion-button .hp-status,
.hp-root .accordion-button .hp-info { color: inherit !important; }
.hp-root .hp-info { font-size: .92rem; font-weight: 500; color: var(--hp-chip-fg); }
.hp-root .hp-btn { display: flex; align-items: center; gap: .65em; box-shadow: none; border-radius: 1rem; padding-inline: 0; }
/* Remove extra left padding on the accordion button so the clock icon aligns with the site gutter */
.hp-root .accordion-button.hp-btn { padding-left: 0 !important; }
.hp-root .hp-icon { font-size: var(--hp-icon-size); }
.hp-root .hp-label { display: inline-flex; align-items: center; gap: .45rem; }

/* Ensure status and the small close-info are vertically centered together */
.hp-root .hp-label .hp-status,
.hp-root .hp-label .hp-close-info,
.hp-root .hp-label small.hp-close-info {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Make the `hp-status` visually a chip like the schedule chips */
.hp-root .hp-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--hp-chip-min-width) - 6px);
  height: 1.6em;
  padding: 0 .6rem;
  border-radius: 9999px; /* fully pill-shaped */
  font-weight: 500;
  font-size: .9rem; /* match address / close-info */
  margin-left: var(--hp-status-shift);
  color: #fff !important;
  background-color: var(--hp-status-open);
  border: 1px solid var(--hp-status-open);
}
.hp-root .hp-status.closed { background-color: var(--hp-status-closed) !important; border-color: var(--hp-status-closed) !important; }
.hp-root .hp-status.open { background-color: var(--hp-status-open) !important; border-color: var(--hp-status-open) !important; }
.hp-root .hp-close-info { margin-left: .6rem; color: var(--hp-chip-fg); }

/* Slightly reduce the small font to match visual weight */
.hp-root .hp-label small.hp-close-info { font-size: .9rem; }

/* Grid */
.hp-root .hp-grid { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--hp-row-gap); padding-left: var(--hp-content-offset); }
.hp-root .hp-grid > li {
  display: flex;
  align-items: center;
  gap: .25em;
  min-height: 1em; /* tighten row height further */
  padding-block: 0;
  flex-wrap: wrap;
}

/* Ensure visible vertical spacing between rows; fallback to margin in case grid row-gap is ignored */
.hp-root .hp-grid > li { margin-bottom: var(--hp-row-gap); }
.hp-root .hp-grid > li:last-child { margin-bottom: 0; }

/* First column (day label) keeps a stable width; remaining space used by chips */
.hp-root .hp-day-label { flex: 0 0 minmax(var(--hp-dia-min-width), var(--hp-dia-width)); }
.hp-root .hp-day-label {
  font-size: .92em;
  min-width: var(--hp-dia-min-width);
  max-width: var(--hp-dia-max-width);
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  color: var(--hp-chip-fg);
  font-weight: 400 !important; /* remove bold for weekday labels */
}

/* Chip / badge */
.hp-root .hp-chip,
.hp-root .badge.hp-chip {
  /* enforce consistent width for all chips (responsive between min and max) */
  width: clamp(var(--hp-chip-min-width), 12ch, var(--hp-chip-max-width));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 1.6em;
  padding: 0 .5em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--hp-chip-fg);
  background-color: var(--hp-chip-bg);
  border: 1px solid var(--hp-chip-border);
  border-radius: .5rem;
  font-weight: 400 !important;
}

.hp-root .hp-chip + .hp-chip { margin-left: .5em; }

/* States */
.hp-root .hp-chip.today,
.hp-root .badge.hp-chip.today {
  background-color: var(--hp-today-bg);
  color: var(--hp-today-color);
  font-weight: 700;
  border-color: var(--hp-today-bg);
}

.hp-root .hp-chip.closed,
.hp-root .badge.hp-chip.closed,
.hp-root .hp-chip.closed.today,
.hp-root .badge.hp-chip.closed.today {
  /* Always solid red with white text for closed chips */
  background-color: var(--hp-closed-color) !important;
  color: #fff !important;
  border-color: var(--hp-closed-color) !important;
}

.hp-root .hp-day-label.today { color: var(--hp-day-today-color); font-weight: 700; }


.hp-root .hp-status.open { font-weight: 500; }
.hp-root .hp-status.closed { font-weight: 500; }

/* Force white text for the status chip (higher specificity to override inherited rules) */
.hp-root .hp-status.open,
.hp-root .hp-status.closed,
.hp-root .accordion-button .hp-status.open,
.hp-root .accordion-button .hp-status.closed {
  color: #fff !important;
}

/* Minimal fallback for Bootstrap utilities */
.hp-root .badge.hp-chip { background-color: var(--hp-chip-bg); color: var(--hp-chip-fg); border-color: var(--hp-chip-border); }

/* Enforce non-today/non-closed chips to use component colors (override .bg-light) */
.hp-root .hp-chip:not(.today):not(.closed),
.hp-root .badge.hp-chip:not(.today):not(.closed) {
  background-color: var(--hp-chip-bg) !important;
  color: var(--hp-chip-fg) !important;
  border-color: var(--hp-chip-border) !important;
}

/* Accordion chevron handling */
.hp-root .accordion-button::after { display: none; }
.hp-root .accordion-button .bi-chevron-down { transition: transform .18s ease; }
.hp-root .accordion-button:not(.collapsed) .bi-chevron-down { transform: rotate(180deg); }
/* End of public styles */

/* Disclaimer styling to ensure good contrast on dark backgrounds */
.hp-root .hp-disclaimer {
  background: #FFF1B8 !important; /* Fondo solicitado */
  color: #5C4400 !important; /* Texto solicitado */
  padding: 0.4rem 0.6rem;
  border-radius: 16px !important;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  text-shadow: none;
  border: 1px solid #FFC53D; /* Borde solicitado */
}

.hp-root .hp-disclaimer a { color: #5C4400; text-decoration: underline; }