/**
 * SIAM — estilos del módulo 07 (tiempo real, informe personalizado, efemérides)
 */

.siam-report-banner {
  background: var(--siam-color-primary, #005691);
  color: var(--siam-color-text-inverse, #ffffff);
  padding: var(--siam-space-4, 1rem) var(--siam-space-5, 1.5rem);
  border-radius: var(--siam-radius, 4px);
  margin-bottom: var(--siam-space-4, 1rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--siam-space-3, 0.75rem);
}

.siam-report-banner__title {
  margin: 0;
  color: var(--siam-color-text-inverse, #ffffff);
  font-size: var(--siam-font-size-xl, 1.5rem);
  letter-spacing: 0.02em;
}

.siam-report-banner__meta {
  font-size: var(--siam-font-size-sm, 0.875rem);
  opacity: 0.9;
}

.siam-report-table {
  display: flex;
  flex-direction: column;
  gap: var(--siam-space-3, 0.75rem);
  width: 100%;
}

.siam-report-table__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--siam-space-2, 0.5rem);
  padding-bottom: var(--siam-space-2, 0.5rem);
}

.siam-report-table__title {
  margin: 0;
  font-size: var(--siam-font-size-lg, 1.25rem);
  color: var(--siam-color-primary, #005691);
  font-weight: var(--siam-font-weight-semibold, 600);
}

.siam-report-table__units {
  margin: 0;
  font-size: var(--siam-font-size-xs, 0.75rem);
  color: var(--siam-color-text-muted, #5a6570);
  font-style: italic;
}

.siam-report-table__scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--siam-color-surface, #ffffff);
  border: 1px solid var(--siam-color-border, #d0d5dd);
  border-radius: var(--siam-radius, 4px);
}

.siam-report-table__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--siam-font-size-sm, 0.875rem);
}

.siam-report-table__th {
  background: var(--siam-color-primary, #005691);
  color: var(--siam-color-text-inverse, #ffffff);
  font-weight: var(--siam-font-weight-semibold, 600);
  text-align: left;
  padding: 0;
  white-space: nowrap;
}

.siam-report-table__th--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
}

.siam-report-table__sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: transparent;
  color: inherit;
  font: inherit;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--siam-space-2, 0.5rem);
}

.siam-report-table__sort-btn:hover {
  background: var(--siam-color-primary-dark, #003d68);
}

.siam-report-table__cell--center { text-align: center; }
.siam-report-table__cell--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.siam-report-table__status {
  padding: var(--siam-space-5, 1.5rem);
  border-radius: var(--siam-radius, 4px);
  text-align: center;
  font-size: var(--siam-font-size-sm, 0.875rem);
  background: var(--siam-color-surface, #ffffff);
  border: 1px dashed var(--siam-color-border, #d0d5dd);
  color: var(--siam-color-text-muted, #5a6570);
}

.siam-report-table__status--loading {
  background: #f0f7fb;
  border-color: #b8d4e8;
  color: var(--siam-color-primary, #005691);
}

.siam-report-table__status--error {
  background: #fdf2f2;
  border-color: #f5c2c7;
  color: var(--siam-color-error, #c62828);
}

.siam-report-table__status--empty { background: #fafafa; }

.siam-otros {
  display: flex;
  flex-direction: column;
  gap: var(--siam-space-4, 1rem);
}

.siam-otros__intro .siam-muted {
  margin: 0;
  max-width: 48rem;
}

.siam-otros__meta {
  margin: 0;
  font-size: var(--siam-font-size-sm, 0.875rem);
  color: var(--siam-color-text-muted, #5a6570);
}

.siam-otros__panel {
  background: var(--siam-color-surface, #ffffff);
  border: 1px solid var(--siam-color-border-light, #e8eaf0);
  border-radius: var(--siam-radius, 4px);
  padding: var(--siam-space-4, 1rem);
}

.siam-otros__stations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--siam-space-2, 0.5rem);
  max-height: 14rem;
  overflow: auto;
  padding: var(--siam-space-2, 0.5rem);
  border: 1px solid var(--siam-color-border, #d0d5dd);
  border-radius: var(--siam-radius, 4px);
  background: #fafbfc;
}

.siam-otros__stations .siam-form__check,
.siam-otros__variables .siam-form__check {
  margin: 0;
  font-size: var(--siam-font-size-sm, 0.875rem);
}

.siam-otros__variables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--siam-space-2, 0.5rem);
}

.siam-otros__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--siam-space-2, 0.5rem);
  margin-bottom: var(--siam-space-3, 0.75rem);
}

.siam-otros__count {
  font-size: var(--siam-font-size-sm, 0.875rem);
  color: var(--siam-color-text-muted, #5a6570);
}

.siam-otros__status-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
  background: var(--siam-color-success, #2e7d32);
}

@media (max-width: 600px) {
  .siam-otros__stations,
  .siam-otros__variables { grid-template-columns: 1fr; }
  .siam-otros .siam-form__actions .siam-btn { width: 100%; }
  .siam-report-banner { padding: var(--siam-space-3, 0.75rem); }
  .siam-report-banner__title { font-size: var(--siam-font-size-lg, 1.25rem); }
}

@media (max-width: 320px) {
  .siam-otros__panel { padding: var(--siam-space-3, 0.75rem); }
}

.siam-otros [hidden] {
  display: none !important;
}