/* ═══════════════════════════════════════════
   RDC Avisos – Front CSS
   Sistema de diseño: Ruta del Cacao
═══════════════════════════════════════════ */


.rdca-front {
  font-family: var(--font);
  color: var(--navy);
  margin: 0 auto
}

input.rdca-search-input {
  background: transparent !important;
  border: none;
  font-size: 15px;
}

/* ── CABECERA ── */
.rdca-header {
  margin-bottom: 24px
}

.rdca-stag {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px
}

.rdca-stag::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--red);
  display: block
}

.rdca-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin: 0
}

/* ── TOOLBAR ── */
.rdca-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap
}

.rdca-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gl);
  border: 1.5px solid var(--gm);
  border-radius: 8px;
  padding: 9px 14px;
  flex: 1;
  min-width: 200px
}

.rdca-search-bar svg {
  color: var(--gt);
  flex-shrink: 0
}

.rdca-search-input {
  border: none;
  background: transparent;
  font-family: var(--font);
  color: var(--navy);
  outline: none;
  flex: 1;
  min-width: 0
}

.rdca-search-input::placeholder {
  color: var(--gt)
}

.rdca-ano-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.rdca-ano-btn {
  all: unset;
  padding: 7px 14px;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--gm);
  color: var(--gt);
  transition: all .15s
}

.rdca-ano-btn:hover {
  border-color: var(--navy);
  color: var(--navy)
}

.rdca-ano-btn--active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.rdca-ano-btn--active:hover {
  color: #ffffff;
}

/* ── TABLA ── */
.rdca-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--gm);
  box-shadow: 0 4px 20px rgba(27, 28, 76, .07)
}

.rdca-table-front {
  width: 100%;
  border-collapse: collapse;
}

.rdca-table-front thead tr {
  background: var(--navy)
}

.rdca-table-front thead th {
  padding: 13px 16px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  border: none;
  vertical-align: middle;
  text-align: center;
}

.rdca-table-front thead th:last-child {
  text-align: center
}

/* Filas alternas */
.rdca-row {
  border-bottom: 1px solid var(--gm);
  transition: background .15s
}

.rdca-row:last-child {
  border-bottom: none
}

.rdca-row:nth-child(even) {
  background: var(--gl)
}

.rdca-row:hover {
  background: rgba(234, 183, 31, .06)
}

.rdca-row.rdca-hidden {
  display: none
}

/* Celdas */
.rdca-td-fecha {
  padding: 14px 16px;
  vertical-align: top;
  font-weight: 700;
  color: var(--navy);
  /*white-space: nowrap;*/
}

.rdca-td-aviso {
  padding: 14px 16px;
  vertical-align: top;
  color: var(--gt);
}

.rdca-td-aviso .rdca-codigo {
  color: var(--navy);
  font-weight: 800;
  display: inline-block;
  margin-right: 4px
}

.rdca-td-anexo {
  padding: 14px 16px;
  vertical-align: top;
  text-align: center
}

.rdca-no-anexo {
  color: var(--gm)
}

/* Botón anexo */
.rdca-anexo-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--navy);
  color: #fff;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  /*white-space: nowrap;*/
  transition: background .2s;
  font-size: 14px;
  justify-content: center;
  min-width: 160px;
}

.rdca-anexo-btn:hover {
  background: var(--red);
  color: #fff
}

.rdca-anexo-btn svg {
  flex-shrink: 0
}

/* Empty */
.rdca-empty-row td {
  padding: 32px;
  text-align: center;
  color: var(--gt);
}

/* ── PAGINACIÓN ── */
.rdca-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap
}

.rdca-pg-btn {
  all: unset;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--gm);
  color: var(--navy);
  transition: all .2s
}

.rdca-pg-btn:hover:not([disabled]) {
  background: var(--gl);
  border-color: var(--navy)
}

.rdca-pg-btn[disabled] {
  opacity: .35;
  cursor: default
}

.rdca-pg-nums {
  display: flex;
  gap: 4px;
  flex-wrap: wrap
}

.rdca-pg-num {
  all: unset;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--gm);
  color: var(--gt);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s
}

.rdca-pg-num:hover {
  border-color: var(--navy);
  color: var(--navy)
}

.rdca-pg-num--active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.rdca-pg-num--active:hover {
  color: #fff;
}

.rdca-pg-info {
  color: var(--gt);
  margin-left: 8px
}

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
  .rdca-toolbar {
    flex-direction: column;
    align-items: stretch
  }

  .rdca-search-bar {
    min-width: unset
  }

  .rdca-pagination {
    justify-content: center
  }

  /* Tabla → cards */
  .rdca-table-wrap {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    overflow: visible
  }

  .rdca-table-front {
    display: block
  }

  .rdca-table-front thead {
    display: none
  }

  .rdca-table-front tbody {
    display: flex;
    flex-direction: column;
    gap: 14px
  }

  .rdca-row {
    display: block;
    background: #fff;
    border: 1px solid var(--gm);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(27, 28, 76, .07);
    border-bottom: none;
  }

  .rdca-row:nth-child(even) {
    background: #fff
  }

  .rdca-row.rdca-hidden {
    display: none
  }

  .rdca-td-fecha {
    display: block;
    white-space: normal;
    padding: 0;
    border: none
  }

  .rdca-row td.rdca-td-fecha:first-child {
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    padding: 10px 14px;
    width: 100%;
  }

  .rdca-row td.rdca-td-fecha:first-child::before {
    content: '📅 Publicación: ';
    color: var(--yellow);
  }

  .rdca-row td.rdca-td-fecha:nth-child(2) {
    background: rgba(27, 28, 76, .05);
    color: var(--navy);
    font-weight: 700;
    padding: 7px 14px;
    border-bottom: 1px solid var(--gm);
  }

  .rdca-row td.rdca-td-fecha:nth-child(2)::before {
    content: '📌 Desfijación: ';
    color: var(--gt);
  }

  .rdca-td-aviso {
    display: block;
    padding: 14px 14px 10px;
    border: none;
    text-align: left
  }

  .rdca-td-aviso .rdca-codigo {
    display: inline-block;
    margin-bottom: 6px
  }

  .rdca-td-anexo {
    display: block;
    padding: 0 14px 14px;
    text-align: left;
    border: none
  }

  .rdca-anexo-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px
  }
}

@media(max-width:420px) {
  .rdca-pg-nums .rdca-pg-num:not(.rdca-pg-num--active) {
    display: none
  }

  .rdca-pg-info {
    display: none
  }
}

/* ── MÚLTIPLES ANEXOS ── */
.rdca-anexos-multi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  font-size: 14px;
}

/* Segundo botón en adelante — más compacto */
.rdca-anexo-extra {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--gl);
  border: 1px solid var(--gm);
  border-radius: 5px;
  font-family: var(--font);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s;
  /*white-space: nowrap;*/
  text-align: center;
  justify-content: center;
  min-width: 160px;
}

.rdca-anexo-extra:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.rdca-anexo-extra svg {
  flex-shrink: 0;
}

/* En móvil los botones extra van full width */
@media(max-width:980px) {
  .rdca-anexos-multi {
    align-items: flex-start;
    width: 100%;
  }

  .rdca-anexo-extra {
    width: 100%;
  }
}