/* ============================================================
   Libro de Reclamaciones — capa de diseño Fakturaya (2026-08-07)
   Se aplica sobre el componente Vue .complaint-public-form
   Marca: #ec3f0a (naranja Fakturaya)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --fx-brand: #ec3f0a;
  --fx-brand-dark: #c93305;
  --fx-ink: #1e293b;
  --fx-muted: #64748b;
  --fx-line: #e2e8f0;
}

body {
  background: #f4f5f8 !important;
  font-family: 'Poppins', 'Nunito Sans', sans-serif !important;
  color: var(--fx-ink);
}

/* banda de marca superior */
body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 210px;
  background: linear-gradient(120deg, #d63305 0%, #ec3f0a 55%, #f96b1f 100%);
  z-index: -1;
}

.public-content { padding-top: 34px; }

.complaint-public-form {
  max-width: 980px;
  margin: 0 auto;
}

/* ---- cabecera de la empresa: tarjeta hero ---- */
.complaint-public-form .company-header {
  border: none !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35) !important;
  margin-bottom: 22px;
}

.complaint-public-form .company-header h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--fx-ink);
  margin-bottom: 2px;
}

.complaint-public-form .company-header p,
.complaint-public-form .company-header .el-card__body > div {
  color: var(--fx-muted);
  font-size: 14px;
}

/* sello superior "LIBRO DE RECLAMACIONES" en la cabecera */
.complaint-public-form .company-header .el-card__body {
  position: relative;
  padding: 26px 28px 22px;
  text-align: center;
}

.complaint-public-form .company-header .el-card__body::before {
  content: 'LIBRO DE RECLAMACIONES';
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--fx-brand);
  background: rgba(236, 63, 10, .08);
  border: 1px solid rgba(236, 63, 10, .25);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* ---- pestañas ---- */
.complaint-public-form .el-tabs--card > .el-tabs__header {
  border: none;
  margin-bottom: 0;
}

.complaint-public-form .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
  gap: 8px;
  display: flex;
}

.complaint-public-form .el-tabs--card > .el-tabs__header .el-tabs__item {
  border: 1px solid var(--fx-line) !important;
  border-radius: 12px 12px 0 0;
  background: #eef1f5;
  color: var(--fx-muted);
  font-weight: 500;
  transition: all .2s;
}

.complaint-public-form .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background: #fff;
  color: var(--fx-brand);
  border-bottom-color: #fff !important;
  font-weight: 600;
}

/* ---- tarjetas de contenido ---- */
.complaint-public-form .el-card.is-always-shadow {
  border: none;
  border-radius: 0 14px 14px 14px;
  box-shadow: 0 14px 34px -20px rgba(15, 23, 42, .25);
}

/* título principal */
.complaint-public-form .card-title {
  color: var(--fx-ink) !important;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 24px;
}

.complaint-public-form .card-title i,
.complaint-public-form .card-title .bi {
  color: var(--fx-brand) !important;
}

/* secciones numeradas */
.complaint-public-form .section-title {
  color: var(--fx-ink) !important;
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(236, 63, 10, .18);
  margin-bottom: 18px;
}

.complaint-public-form .section-title i,
.complaint-public-form .section-title .bi {
  color: var(--fx-brand) !important;
}

/* ---- inputs ---- */
.complaint-public-form .el-input__inner,
.complaint-public-form .el-textarea__inner {
  border-radius: 10px;
  border-color: #dbe1ea;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}

.complaint-public-form .el-input__inner:focus,
.complaint-public-form .el-textarea__inner:focus {
  border-color: var(--fx-brand);
  box-shadow: 0 0 0 3px rgba(236, 63, 10, .12);
}

.complaint-public-form label,
.complaint-public-form .el-form-item__label {
  font-weight: 500;
  color: #334155;
}

/* radios y checkboxes en naranja */
.complaint-public-form .el-radio__input.is-checked .el-radio__inner,
.complaint-public-form .el-checkbox__input.is-checked .el-checkbox__inner {
  background: var(--fx-brand);
  border-color: var(--fx-brand);
}

.complaint-public-form .el-radio__input.is-checked + .el-radio__label,
.complaint-public-form .el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--fx-brand);
}

.complaint-public-form .el-radio__inner:hover,
.complaint-public-form .el-checkbox__inner:hover {
  border-color: var(--fx-brand);
}

/* ---- botones ---- */
.complaint-public-form .el-button--primary,
.el-dialog .el-button--primary {
  background: var(--fx-brand) !important;
  border-color: var(--fx-brand) !important;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: all .2s;
}

.complaint-public-form .el-button--primary:hover,
.complaint-public-form .el-button--primary:focus,
.el-dialog .el-button--primary:hover,
.el-dialog .el-button--primary:focus {
  background: var(--fx-brand-dark) !important;
  border-color: var(--fx-brand-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(236, 63, 10, .6);
}

.complaint-public-form .el-button--large {
  padding: 14px 34px;
  font-size: 15px;
}

/* ---- caja de progreso ---- */
.complaint-public-form [class*='progress'],
.complaint-public-form .el-progress-bar__inner {
  border-color: rgba(236, 63, 10, .2);
}

.complaint-public-form .el-progress-bar__inner {
  background: linear-gradient(90deg, var(--fx-brand), #f97316) !important;
}

/* enlaces y acentos azules del componente → naranja */
.complaint-public-form a,
.complaint-public-form .text-primary {
  color: var(--fx-brand) !important;
}

/* diálogo de confirmación */
.el-dialog {
  border-radius: 14px;
  overflow: hidden;
}

.el-dialog__header {
  border-bottom: 1px solid var(--fx-line);
}

/* footer público */
.public-footer {
  background: transparent !important;
  color: var(--fx-muted) !important;
  font-size: 13px;
}

.public-footer a { color: var(--fx-muted) !important; }

/* responsive */
@media (max-width: 640px) {
  .complaint-public-form .company-header h1 { font-size: 20px; }
  .public-content { padding-top: 18px; }
  body::before { height: 160px; }
}

/* ---- caja de progreso del formulario ---- */
.complaint-public-form .form-progress {
  background: #fff7f3 !important;
  border: 1px solid rgba(236, 63, 10, .22) !important;
  border-radius: 12px !important;
}

.complaint-public-form .progress-label { color: var(--fx-ink) !important; }

.complaint-public-form .progress-percentage { color: var(--fx-brand) !important; font-weight: 700; }

.complaint-public-form .progress-bar {
  background: rgba(236, 63, 10, .12) !important;
  border-radius: 999px;
  overflow: hidden;
}

.complaint-public-form .progress-fill {
  background: linear-gradient(90deg, var(--fx-brand), #f97316) !important;
}

.complaint-public-form .progress-hint { color: var(--fx-muted) !important; }

/* menos aire entre el formulario y el pie "todos los derechos..." */
.public-content { padding-bottom: 10px; }

.public-footer {
  margin-top: 0 !important;
  padding: 10px 0 16px !important;
}

.public-content { padding-bottom: 0 !important; }
.complaint-public-form { margin-bottom: 0 !important; }
.complaint-public-form .el-tabs { margin-bottom: 0 !important; }
.public-footer p { margin: 0; }