/* =============================================================
   Sendex Facturación — Frontend CSS
   ============================================================= */

.sxfac-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #333;
  max-width: 700px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

/* -------- Card base -------- */
.sxfac-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  padding: 28px 28px 20px;
  margin-bottom: 20px;
}

.sxfac-card--search {
  text-align: center;
}

.sxfac-card--billing {
  padding: 22px 20px 18px;
}

/* -------- Pantalla billing (2 columnas) -------- */
.sxfac-billing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}

@media (max-width: 540px) {
  .sxfac-billing-cards { grid-template-columns: 1fr; }
  .sxfac-wrap { padding: 10px; }
}

/* -------- Títulos -------- */
.sxfac-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a2b4a;
  margin: 0 0 10px;
  line-height: 1.3;
}

.sxfac-title--blue { color: #1a2b4a; }

.sxfac-subtitle {
  font-size: 13px;
  color: #00b4cc;
  margin: 0 0 18px;
  font-weight: 500;
}

.sxfac-billing-title {
  font-size: 16px;
  font-weight: 700;
  color: #00b4cc;
  margin: 0 0 14px;
  text-align: center;
}

/* -------- Búsqueda inicial -------- */
.sxfac-label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
  text-align: left;
}

.sxfac-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.sxfac-manual-link {
  font-size: 12px;
  color: #777;
  margin: 0;
}

.sxfac-manual-link__anchor {
  color: #00b4cc;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.sxfac-manual-link__anchor:hover { text-decoration: underline; }
.sxfac-manual-link__icon { line-height: 1; }

/* -------- Inputs -------- */
.sxfac-input {
  width: 100%;
  background: #f0f4f8;
  border: 1.5px solid #e0e8f0;
  border-radius: 22px;
  padding: 9px 16px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  transition: border-color .2s, background .2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.sxfac-input:not([disabled]):not([readonly]):focus {
  border-color: #00b4cc;
  background: #fff;
}

.sxfac-input[disabled],
.sxfac-input[readonly] {
  cursor: default;
  color: #555;
}

.sxfac-input:not([disabled]):not([readonly]) {
  background: #fff;
  border-color: #c8d8ea;
}

.sxfac-select-wrap {
  position: relative;
}

.sxfac-select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.2171 34.8996C27.8786 34.8996 34.9001 27.8781 34.9001 19.2166C34.9001 10.5552 27.8786 3.53369 19.2171 3.53369C10.5557 3.53369 3.53418 10.5552 3.53418 19.2166C3.53418 27.8781 10.5557 34.8996 19.2171 34.8996Z' stroke='%2300AAFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.076 16.7931C12.4703 16.3906 13.1096 16.3906 13.5039 16.7931L18.848 22.2485L24.192 16.7931C24.5863 16.3906 25.2256 16.3906 25.6199 16.7931C26.0142 17.1956 26.0142 17.8482 25.6199 18.2507L19.5619 24.435C19.1676 24.8375 18.5283 24.8375 18.134 24.435L12.076 18.2507C11.6817 17.8482 11.6817 17.1956 12.076 16.7931Z' fill='%2300ADEE'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.sxfac-select { padding-right: 36px; }

/* -------- Botones -------- */
.sxfac-btn {
  display: inline-block;
  padding: 9px 28px;
  border-radius: 22px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, background .2s;
  text-decoration: none;
  white-space: nowrap;
}

.sxfac-btn:disabled { opacity: .55; cursor: not-allowed; }

.sxfac-btn--primary {
  background: #e85d10;
  color: #fff;
  transition: background .2s ease, opacity .2s ease;
}
.sxfac-btn--primary:hover:not(:disabled):not(.sxfac-btn--inactive) { opacity: .88; }

.sxfac-btn--inactive {
  background: #b0bec5 !important;
  cursor: not-allowed;
  pointer-events: none;
}

.sxfac-btn--secondary {
  background: #b0bec5;
  color: #fff;
}
.sxfac-btn--secondary:hover:not(:disabled) { background: #90a4ae; }

.sxfac-btn--outline {
  background: #fff;
  color: #e85d10;
  border: 2px solid #e85d10;
  padding: 7px 22px;
}
.sxfac-btn--outline:hover:not(:disabled) { background: #fff3ee; }

/* -------- Grids de campos -------- */
.sxfac-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.sxfac-grid--2 { grid-template-columns: 1fr 1fr; }
.sxfac-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 540px) {
  .sxfac-grid--2,
  .sxfac-grid--3 { grid-template-columns: 1fr; }
}

.sxfac-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.sxfac-field-wrap label {
  font-size: 12px;
  color: #555;
  font-weight: 500;
}

.sxfac-field-wrap label em {
  font-style: normal;
  font-size: 11px;
  color: #888;
}

/* -------- Secciones acordeón -------- */
.sxfac-section {
  border-bottom: 1px solid #e0e8f0;
  margin-bottom: 4px;
}

.sxfac-section-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  text-align: left;
}

.sxfac-section-label {
  font-size: 14px;
  color: #00b4cc;
  font-weight: 500;
}

.sxfac-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sxfac-section-icon svg {
  display: block;
}

.sxfac-fields {
  padding: 10px 0 16px;
}

/* -------- Checkbox privacidad -------- */
.sxfac-privacidad {
  margin: 10px 0 14px;
  font-size: 13px;
}

.sxfac-check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  color: #444;
}

.sxfac-check-label input { margin-top: 2px; flex-shrink: 0; }
.sxfac-check-label a { color: #00b4cc; }

/* -------- Footer card -------- */
.sxfac-card-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

.sxfac-version {
  font-size: 11px;
  color: #aaa;
  align-self: flex-end;
}

/* -------- Acciones de generar factura -------- */
.sxfac-gen-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.sxfac-link-descarga {
  color: #00b4cc;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sxfac-link-descarga:hover { text-decoration: underline; }

/* -------- Notices -------- */
.sxfac-notice {
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  margin: 8px 0;
  width: 100%;
  box-sizing: border-box;
}

.sxfac-notice--error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.sxfac-notice--success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

/* -------- Loading spinner -------- */
.sxfac-btn.sxfac-loading {
  position: relative;
  color: transparent;
}

.sxfac-btn.sxfac-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sxfac-spin .7s linear infinite;
}

@keyframes sxfac-spin { to { transform: rotate(360deg); } }

/* -------- Lista de guías pendientes -------- */
.sxfac-gen-lista {
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.sxfac-gen-lista-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f7ff;
  border: 1px solid #c8e0f4;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.sxfac-gen-lista-col {
  flex: 1;
  font-weight: 500;
  color: #1a2b4a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sxfac-gen-lista-del {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #b91c1c;
  font-size: 18px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background .15s;
}
.sxfac-gen-lista-del:hover { background: #fee2e2; }

/* -------- Spinner standalone (generar factura) -------- */
.sxfac-gen-spinner {
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.sxfac-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(0, 180, 204, .25);
  border-top-color: #00b4cc;
  border-radius: 50%;
  animation: sxfac-spin .7s linear infinite;
  flex-shrink: 0;
}

.sxfac-spinner-text {
  font-size: 13px;
  color: #555;
  font-weight: 500;
}