/*
 * ============================================================
 * Página Compendios de consultas — Figma 22889:75474
 * /auditoria/normativa/consultas-y-compendios-publicados/compendios
 * ============================================================
 */

/* ===== Hero Section (py-64px, white bg) ===== */
.compendios-hero {
  width: 100%;
  background: #ffffff;
  padding: 64px 0;
}

.compendios-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===== Breadcrumb ===== */
.compendios-breadcrumb,
.consultas-compendios-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.compendios-breadcrumb a,
.consultas-compendios-breadcrumb a,
.compendios-breadcrumb__item,
.consultas-compendios-breadcrumb__item {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}

.compendios-breadcrumb a:hover,
.consultas-compendios-breadcrumb a:hover,
.compendios-breadcrumb__item:hover,
.consultas-compendios-breadcrumb__item:hover {
  text-decoration: underline !important;
  opacity: 0.9;
}

.compendios-breadcrumb__item--current,
.consultas-compendios-breadcrumb__item--current {
  font-weight: 400;
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.compendios-breadcrumb span,
.consultas-compendios-breadcrumb span,
.compendios-breadcrumb__sep,
.consultas-compendios-breadcrumb__sep {
  display: flex;
  align-items: center;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.compendios-breadcrumb__sep svg,
.consultas-compendios-breadcrumb__sep svg {
  width: 15px;
  height: 15px;
}

/* ===== Title ===== */
.compendios-title {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  color: #0a0a0a;
  margin: 0;
}

/* ===== Body / Accordion Area ===== */
.compendios-body {
  display: flex;
  flex-direction: column;
}

/* ===== Alert ===== */
.compendios-alert-wrapper {
  padding-bottom: 20px;
}

.compendios-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 16px;
  padding: 32px;
}

.compendios-alert__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  padding-top: 2px;
}

.compendios-alert__text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #171717;
  margin: 0;
  width: 100%;
}

.compendios-alert__text p {
  margin: 0;
}

/* ===== Accordion Item ===== */
.compendios-item {
  width: 100%;
}

.compendios-item--open {
  padding-bottom: 20px;
}

.compendios-item--closed {
  border-bottom: 1px solid #e5e5e5;
}

/* Reset details/summary */
.compendios-item details {
  width: 100%;
}

.compendios-item summary {
  list-style: none;
}

.compendios-item summary::-webkit-details-marker {
  display: none;
}

/* ===== Accordion Trigger ===== */
.compendios-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  cursor: pointer;
  user-select: none;
}

.compendios-trigger__title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #0a0a0a;
}

.compendios-trigger__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #525252;
  transition: transform 0.25s ease;
}

/* Open state: chevron up */
details[open] > .compendios-trigger .compendios-trigger__chevron {
  transform: rotate(180deg);
}

/* ===== Accordion Panel (content) ===== */
.compendios-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  overflow: hidden;
}

/* ===== Table Layout (flex-based to match Figma) ===== */
.compendios-table-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Table Head row */
.compendios-table-head {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #e5e5e5;
}

/* Table Data row */
.compendios-table-row {
  display: flex;
  align-items: center;
  height: 52px;
}

/* Table cells */
.compendios-table-cell {
  padding: 0 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Column widths matching Figma: Compendio flex-1, Año 228px, Descarga 194px */
.compendios-table-cell--compendio {
  flex: 1 1 auto;
  min-width: 85px;
}

.compendios-table-cell--ano {
  width: 228px;
  flex-shrink: 0;
  min-width: 85px;
}

.compendios-table-cell--descarga {
  width: 194px;
  flex-shrink: 0;
  justify-content: flex-end;
  min-width: 85px;
}

/* Header cells */
.compendios-table-head .compendios-table-cell {
  font-weight: 500;
  color: #525252;
}

/* Data cells */
.compendios-table-row .compendios-table-cell {
  font-weight: 400;
  color: #0a0a0a;
}

/* Compendio text — medium weight, truncated */
.compendios-table-cell__text {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: #0a0a0a;
}

/* ===== Download Button ===== */
.compendios-btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 6px 12px;
  max-width: 100%;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #0a0a0a;
  text-decoration: none;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.compendios-btn-download:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #0a0a0a;
}

.compendios-btn-download svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.compendios-btn-download--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.compendios-btn-download--disabled:hover {
  background-color: #ffffff;
  border-color: #e5e5e5;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .compendios-hero__inner {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .compendios-hero {
    padding: 40px 0;
  }

  .compendios-hero__inner {
    padding: 0 16px;
  }

  .compendios-title {
    font-size: 28px;
    line-height: 32px;
  }

  .compendios-alert {
    padding: 20px;
  }

  .compendios-panel {
    padding: 20px;
  }

  .compendios-table-cell--ano,
  .compendios-table-cell--descarga {
    width: auto;
    flex-shrink: 1;
  }

  .compendios-table-cell {
    padding: 0 12px;
    font-size: 13px;
  }
}

/* ===== Action Buttons in Hero (AUD_040) ===== */
.compendios-btn-edit,
.compendios-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.compendios-btn-edit {
  background-color: #b91c1c !important;
  color: #fafafa !important;
}

.compendios-btn-edit:hover {
  background-color: #991b1b !important;
}

.compendios-btn-add {
  background-color: #1e3a8a !important;
  color: #fafafa !important;
}

.compendios-btn-add:hover {
  background-color: #1e40af !important;
}