/* ============================================================
   CONSULTAR FACTURAS — full page styles
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.cf-page {
  /*max-width: 1080px;*/
  margin:    0 auto;
  padding:   var(--space-6) var(--space-4) var(--space-7);
}

/* ── Page header (icon + title + subtitle) ────────────────── */
.cf-page-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  margin-bottom: var(--space-5);
}

.cf-header-icon {
  width:           52px;
  height:          52px;
  border-radius:   var(--radius-lg);
  background:      var(--color-accent);
  color:           var(--color-accent-text);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  flex-shrink:     0;
  box-shadow:      0 4px 14px rgba(63, 81, 181, 0.28);
}

.cf-header-sub {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-secondary);
  margin-top:    var(--space-1);
  margin-bottom: 0;
}

/* ── Guest: search form card ──────────────────────────────── */
.cf-search-card {
  padding:       var(--space-5);
  margin-bottom: var(--space-4);
}

.cf-fields-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
  margin-bottom:         var(--space-4);
}

.cf-captcha-row {
  display:         flex;
  justify-content: center;
  padding-top:     var(--space-2);
  margin-bottom:   var(--space-4);
}

.cf-form-actions {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--space-3);
  padding-top:     var(--space-4);
  border-top:      1px solid var(--color-border);
}

/* ── Auth: toolbar (title + search + button) ──────────────── */
.cf-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  margin-bottom:   var(--space-4);
  flex-wrap:       wrap;
}

.cf-toolbar-right {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.cf-search-input {
  width:     280px;
  min-width: 0;
}

/* Auth: "Búsqueda específica" header row */
.cf-search-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  margin-bottom:   var(--space-4);
  flex-wrap:       wrap;
}

/* ── Auth: table card ─────────────────────────────────────── */
.cf-table-card {
  overflow:      hidden;
  margin-bottom: var(--space-4);
}

.cf-table-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-3);
  padding:         var(--space-3) var(--space-4);
  border-top:      1px solid var(--color-border);
  background:      var(--color-background);
  flex-wrap:       wrap;
}

.cf-pagination-info {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}

/* ── Status badges ────────────────────────────────────────── */
.badge-estado {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  padding:      5px 12px;
  border-radius: 999px;
  font-weight:  var(--font-weight-bold);
  font-size:    var(--font-size-sm);
  border:       1px solid transparent;
  white-space:  nowrap;
}

.badge-estado-large {
  padding:   7px 16px;
  font-size: var(--font-size-base);
}

.badge-estado-large i {
  border-radius: 50%;
  padding:       4px;
  font-size:     var(--font-size-sm);
}

.badge-estado-icon-filled { color: #fff; }

.badge-estado-enviada {
  background-color: var(--color-background);
  color:            #616161;
  border-color:     var(--color-border);
}
.badge-estado-enviada .badge-estado-icon-filled { background-color: #616161; }

.badge-estado-validada,
.badge-estado-pagada {
  background-color: #e8f5e9;
  color:            #2e7d32;
  border-color:     #c8e6c9;
}
.badge-estado-validada .badge-estado-icon-filled,
.badge-estado-pagada  .badge-estado-icon-filled { background-color: #2e7d32; }

.badge-estado-rechazada {
  background-color: #fde8e8;
  color:            #c62828;
  border-color:     #ffcdd2;
}
.badge-estado-rechazada .badge-estado-icon-filled { background-color: #c62828; }

.badge-estado-proceso {
  background-color: #fff8e1;
  color:            #e65100;
  border-color:     #ffecb3;
}
.badge-estado-proceso .badge-estado-icon-filled { background-color: #e65100; }

.badge-estado-contabilizada {
  background-color: #e3f2fd;
  color:            #1565c0;
  border-color:     #bbdefb;
}
.badge-estado-contabilizada .badge-estado-icon-filled { background-color: #1565c0; }

.badge-estado-desconocida {
  background-color: var(--color-background);
  color:            var(--color-text-secondary);
  border-color:     var(--color-border);
}

/* ── Result card ──────────────────────────────────────────── */
.cf-result-card {
  margin-bottom: var(--space-5);
  overflow:      hidden;
}

.cf-result-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         var(--space-4) var(--space-5);
  background:      var(--color-background);
  border-bottom:   1px solid var(--color-border);
}

.cf-result-title {
  margin:      0;
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
}

/* ── Data grid (invoice details) ──────────────────────────── */
.data-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
}

.data-cell {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-4);
  padding:     var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.data-cell:nth-child(odd) { border-right: 1px solid var(--color-border); }
.data-cell.no-border-bottom { border-bottom: 0; }

.data-split-row {
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-3);
}

.data-label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:  var(--space-1);
}

.data-value {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text-primary);
}

.data-icon {
  font-size:  1.5rem;
  color:      var(--color-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.result-subtext { font-size: var(--font-size-xs); }

/* ── Amounts table ────────────────────────────────────────── */
.amounts-table {
  width:           calc(100% - var(--space-10, 40px));
  margin:          var(--space-5) auto;
  border-collapse: collapse;
  border:          1px solid var(--color-border);
  overflow:        hidden;
  border-radius:   var(--radius-md);
}

.amounts-table th,
.amounts-table td {
  text-align: center;
  border:     1px solid var(--color-border);
}

.amounts-table th {
  padding:        var(--space-3);
  background:     var(--color-background);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.amounts-table td {
  padding:     var(--space-4);
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
}

.amounts-table .highlight-header {
  background: var(--color-accent-light);
  color:      var(--color-accent);
}

.amounts-table .highlight-cell {
  background: rgba(63, 81, 181, 0.06);
  color:      var(--color-accent);
}

/* ── Result footer actions ────────────────────────────────── */
.cf-result-actions {
  display:         flex;
  justify-content: center;
  padding:         var(--space-4);
  border-top:      1px solid var(--color-border);
}

.cf-action-group {
  display:  flex;
  gap:      var(--space-3);
  flex-wrap: wrap;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cf-fields-grid {
    grid-template-columns: 1fr;
  }

  .data-grid {
    grid-template-columns: 1fr;
  }

  .data-cell,
  .data-cell:nth-child(odd) {
    border-right: 0;
  }

  .cf-result-header {
    flex-direction:  column;
    align-items:     flex-start;
  }

  .cf-toolbar {
    flex-direction: column;
    align-items:    stretch;
  }

  .cf-toolbar-right {
    flex-direction: column;
    align-items:    stretch;
  }

  .cf-search-input {
    width: 100%;
  }

  .cf-search-header {
    flex-direction: column;
    align-items:    flex-start;
  }

  .amounts-table {
    width: 100%;
  }

  .cf-form-actions {
    flex-direction:  column;
    align-items:     stretch;
  }

  .cf-form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}