/* ============================================================
   declaracion.css  —  UConta · Módulo Declaración Mensual
   Boostrap 5 + Telerik Fluent theme compatible
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --dcl-primary:        #0d6efd;
  --dcl-primary-light:  #e8f0fe;
  --dcl-primary-hover:  #0b5ed7;
  --dcl-success:        #22c55e;
  --dcl-success-bg:     #f0fdf4;
  --dcl-danger:         #ef4444;
  --dcl-danger-bg:      #fef2f2;
  --dcl-warning:        #a855f7;        /* Contador badge: violet */
  --dcl-gray-50:        #f9fafb;
  --dcl-gray-100:       #f3f4f6;
  --dcl-gray-200:       #e5e7eb;
  --dcl-gray-500:       #6b7280;
  --dcl-gray-700:       #374151;
  --dcl-gray-900:       #111827;
  --dcl-radius:         0.5rem;
  --dcl-radius-lg:      0.75rem;
  --dcl-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --dcl-shadow-md:      0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.05);
}

/* ── Botones ────────────────────────────────────────────────── */
.dcl-btn-primary {
  background-color: var(--dcl-primary);
  border-color:     var(--dcl-primary);
  color:            #fff;
  font-weight:      500;
  padding:          .5rem 1.25rem;
  border-radius:    var(--dcl-radius);
  border:           1px solid transparent;
  transition:       background .15s, box-shadow .15s;
}
.dcl-btn-primary:hover {
  background-color: var(--dcl-primary-hover);
  box-shadow:       0 0 0 3px rgba(13,110,253,.25);
}

.dcl-btn-secondary {
  background-color: #fff;
  border:           1.5px solid var(--dcl-gray-200);
  color:            var(--dcl-gray-700);
  font-weight:      500;
  padding:          .5rem 1.25rem;
  border-radius:    var(--dcl-radius);
  display:          flex;
  align-items:      center;
  gap:              .4rem;
  transition:       border-color .15s, box-shadow .15s;
}
.dcl-btn-secondary:hover {
  border-color: var(--dcl-gray-500);
  box-shadow:   var(--dcl-shadow);
}

.dcl-btn-outline {
  background-color: #fff;
  border:           1.5px solid var(--dcl-gray-200);
  color:            var(--dcl-gray-700);
  padding:          .45rem 1rem;
  border-radius:    var(--dcl-radius);
  display:          inline-flex;
  align-items:      center;
  gap:              .4rem;
  font-size:        .875rem;
  transition:       border-color .15s;
}
.dcl-btn-outline:hover { border-color: var(--dcl-primary); color: var(--dcl-primary); }

.dcl-btn-outline-secondary {
  background-color: #fff;
  border:           1.5px solid var(--dcl-gray-400, #9ca3af);
  color:            var(--dcl-gray-700);
  padding:          .5rem 1.25rem;
  border-radius:    var(--dcl-radius);
  font-weight:      500;
  transition:       border-color .15s;
}
.dcl-btn-outline-secondary:hover { border-color: var(--dcl-gray-700); }

.dcl-btn-outline-xs {
  background:   #fff;
  border:       1.5px solid var(--dcl-gray-200);
  color:        var(--dcl-gray-700);
  padding:      .2rem .6rem;
  border-radius: calc(var(--dcl-radius) - .15rem);
  font-size:    .75rem;
  display:      inline-flex;
  align-items:  center;
  gap:          .3rem;
  transition:   border-color .15s;
}
.dcl-btn-outline-xs:hover { border-color: var(--dcl-primary); color: var(--dcl-primary); }

/* ── Lucide icon shim ────────────────────────────────────────── */
/* Los íconos se cargan vía CDN como Web Components.
   Usamos la clase dcl-icon como envoltorio de tamaño. */
.dcl-icon {
  display:       inline-flex;
  width:         1em;
  height:        1em;
  vertical-align: middle;
  flex-shrink:   0;
}
/* Cada variante usa el nombre del ícono como pseudo-contenido para
   que el JS de Lucide lo procese. Alternativa: usar <i data-lucide="..."> */
.dcl-icon--check::before          { content: attr(data-lucide); }
.dcl-icon--arrow-right::before    { content: attr(data-lucide); }
.dcl-icon--undo::before           { content: attr(data-lucide); }
.dcl-icon--eye::before            { content: attr(data-lucide); }
.dcl-icon--info::before           { content: attr(data-lucide); }
.dcl-icon--globe::before          { content: attr(data-lucide); }
.dcl-icon--download-cloud::before { content: attr(data-lucide); }
.dcl-icon--search::before         { content: attr(data-lucide); }
.dcl-icon--chevron-left::before   { content: attr(data-lucide); }
.dcl-icon--chevron-right::before  { content: attr(data-lucide); }
.dcl-icon--chevron-down::before   { content: attr(data-lucide); }
.dcl-icon--check-circle::before   { content: attr(data-lucide); }
.dcl-icon--message-circle::before { content: attr(data-lucide); }
.dcl-icon--download::before       { content: attr(data-lucide); }

/* ── Importes ────────────────────────────────────────────────── */
.dcl-amount {
  font-weight: 700;
  color:       var(--dcl-gray-900);
}
.dcl-badge-gray {
  background:    var(--dcl-gray-100);
  color:         var(--dcl-gray-700);
  font-size:     .75rem;
  padding:       .15rem .5rem;
  border-radius: 999px;
  font-weight:   500;
}

/* ═══════════════════════════════════════════════════════════════
   WELCOME WIZARD
   ═══════════════════════════════════════════════════════════════ */
.dcl-welcome {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         2rem 1rem;
  background:      var(--dcl-gray-50);
}

.dcl-welcome__card {
  background:    #fff;
  border-radius: var(--dcl-radius-lg);
  box-shadow:    var(--dcl-shadow-md);
  width:         100%;
  max-width:     680px;
  padding:       2.5rem 2.5rem 2rem;
}

.dcl-welcome__title {
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--dcl-gray-900);
  margin-bottom: .5rem;
}
.dcl-welcome__subtitle {
  color:       var(--dcl-gray-500);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.dcl-welcome__progress-bar {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       .8125rem;
  font-weight:     600;
  color:           var(--dcl-gray-700);
  margin-bottom:   .35rem;
}

.dcl-welcome__progress {
  height:        4px;
  border-radius: 999px;
  background:    var(--dcl-gray-100);
  margin-bottom: 1.75rem;
}
.dcl-welcome__progress .progress-bar {
  background:    var(--dcl-primary);
  border-radius: 999px;
  transition:    width .3s ease;
}

.dcl-welcome__step {
  display: flex;
  gap:     1.25rem;
  align-items: flex-start;
}

.dcl-welcome__step-badge {
  flex-shrink:   0;
  width:         2.25rem;
  height:        2.25rem;
  border-radius: 50%;
  background:    var(--dcl-primary);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     .9375rem;
  margin-top:    .15rem;
}

.dcl-welcome__step-title {
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--dcl-gray-900);
  margin-bottom: .4rem;
}
.dcl-welcome__step-desc {
  color:       var(--dcl-gray-500);
  line-height: 1.6;
  margin-bottom: .75rem;
}

.dcl-welcome__notes {
  background:    var(--dcl-primary-light);
  border-left:   3px solid var(--dcl-primary);
  border-radius: 0 var(--dcl-radius) var(--dcl-radius) 0;
  padding:       .75rem 1rem;
  font-size:     .875rem;
}
.dcl-welcome__notes-title {
  font-weight:   600;
  color:         var(--dcl-primary);
  margin-bottom: .4rem;
  display:       flex;
  align-items:   center;
  gap:           .4rem;
}
.dcl-welcome__notes ul {
  margin:   0;
  padding-left: 1.25rem;
  color:    var(--dcl-gray-700);
}
.dcl-welcome__notes ul li { margin-bottom: .2rem; }

.dcl-welcome__footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      2rem;
  padding-top:     1.25rem;
  border-top:      1px solid var(--dcl-gray-100);
}

/* ═══════════════════════════════════════════════════════════════
   MAIN PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.dcl-loader {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         4rem;
}

.dcl-page {
  max-width:  860px;
  margin:     0 auto;
  padding:    2rem 1rem;
}

.dcl-page__content {
  margin-top: 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   STEPPER
   ═══════════════════════════════════════════════════════════════ */
.dcl-stepper-wrap {
  background:    #fff;
  border-radius: var(--dcl-radius-lg);
  box-shadow:    var(--dcl-shadow);
  padding:       1.25rem 1.5rem;
}

.dcl-stepper-mes {
  font-size:     .875rem;
  color:         var(--dcl-gray-500);
  margin-bottom: 1rem;
}
.dcl-stepper-mes strong { color: var(--dcl-gray-900); }

.dcl-stepper {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  position:        relative;
}

.dcl-stepper__item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  flex:            1;
  position:        relative;
}

.dcl-stepper__circle {
  width:         2rem;
  height:        2rem;
  border-radius: 50%;
  border:        2px solid var(--dcl-gray-200);
  background:    #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  z-index:       1;
  transition:    all .2s;
  font-size:     .75rem;
}

.dcl-stepper__item--done .dcl-stepper__circle {
  background:    var(--dcl-primary);
  border-color:  var(--dcl-primary);
  color:         #fff;
}
.dcl-stepper__item--active .dcl-stepper__circle {
  border-color:  var(--dcl-primary);
  border-width:  2.5px;
}
.dcl-stepper__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--dcl-primary);
}

.dcl-stepper__line {
  position:  absolute;
  top:       1rem;
  height:    2px;
  width:     calc(50% - 1rem);
  background: var(--dcl-gray-200);
  transition: background .2s;
}
.dcl-stepper__line--left  { right: 50%; transform: translateX(-50%); left: 0; }
.dcl-stepper__line--right { left: 50%; transform: translateX(50%); right: 0; }
.dcl-stepper__line--done  { background: var(--dcl-primary); }

.dcl-stepper__label {
  margin-top:  .5rem;
  font-size:   .75rem;
  color:       var(--dcl-gray-500);
  text-align:  center;
  white-space: nowrap;
}
.dcl-stepper__item--active .dcl-stepper__label { color: var(--dcl-primary); font-weight: 600; }
.dcl-stepper__item--done   .dcl-stepper__label { color: var(--dcl-gray-700); }

/* ═══════════════════════════════════════════════════════════════
   STEP SHELL (común a todos los pasos)
   ═══════════════════════════════════════════════════════════════ */
.dcl-step {
  background:    #fff;
  border-radius: var(--dcl-radius-lg);
  box-shadow:    var(--dcl-shadow);
  overflow:      hidden;
}

.dcl-step__question {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--dcl-gray-900);
  margin-bottom: .75rem;
}

.dcl-step__body    { padding: 2rem 2rem 1rem; }
.dcl-step__footer  {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         1.25rem 2rem;
  border-top:      1px solid var(--dcl-gray-100);
  background:      var(--dcl-gray-50);
}

/* ═══════════════════════════════════════════════════════════════
   INGRESOS STEP
   ═══════════════════════════════════════════════════════════════ */
.dcl-ingresos-highlight {
  display:       flex;
  gap:           1rem;
  background:    var(--dcl-primary-light);
  border:        1px solid rgba(13,110,253,.2);
  border-radius: var(--dcl-radius);
  padding:       1.25rem 1.25rem;
  align-items:   flex-start;
}
.dcl-ingresos-highlight__icon {
  flex-shrink: 0;
  font-size:   1.5rem;
  color:       var(--dcl-primary);
  margin-top:  .1rem;
}

.dcl-detalle-table {
  border:        1px solid var(--dcl-gray-200);
  border-radius: var(--dcl-radius);
  overflow:      hidden;
}
.dcl-detalle-table table { margin-bottom: 0; }

.dcl-alert {
  display:       flex;
  gap:           .75rem;
  align-items:   flex-start;
  border-radius: var(--dcl-radius);
  padding:       1rem 1.25rem;
}
.dcl-alert--success {
  background: var(--dcl-success-bg);
  border:     1px solid rgba(34,197,94,.25);
  color:      #166534;
}
.dcl-alert--success .dcl-icon { color: var(--dcl-success); font-size: 1.25rem; flex-shrink:0; }

.dcl-info-box {
  background:    var(--dcl-gray-50);
  border:        1px solid var(--dcl-gray-200);
  border-radius: var(--dcl-radius);
  padding:       1rem 1.25rem;
  font-size:     .875rem;
}
.dcl-info-box__title {
  font-weight:   600;
  color:         var(--dcl-gray-700);
  margin-bottom: .4rem;
  display:       flex;
  align-items:   center;
  gap:           .4rem;
}
.dcl-info-box ul   { margin: 0; padding-left: 1.25rem; color: var(--dcl-gray-500); }
.dcl-info-box li   { margin-bottom: .15rem; }

/* ═══════════════════════════════════════════════════════════════
   GASTOS LISTA STEP
   ═══════════════════════════════════════════════════════════════ */
.dcl-gastos-group__header {
  font-size:   .8125rem;
  font-weight: 600;
  color:       var(--dcl-gray-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding:     .6rem 1rem;
  background:  var(--dcl-gray-100);
  border:      1px solid var(--dcl-gray-200);
  border-radius: var(--dcl-radius) var(--dcl-radius) 0 0;
}

.dcl-gasto-card {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       1rem 1.25rem;
  border:        1px solid var(--dcl-gray-200);
  border-top:    none;
  background:    #fff;
  transition:    background .1s;
}
.dcl-gasto-card:last-child { border-radius: 0 0 var(--dcl-radius) var(--dcl-radius); }
.dcl-gasto-card:hover      { background: var(--dcl-gray-50); }

.dcl-gasto-card__avatar {
  flex-shrink:   0;
  width:         2.25rem;
  height:        2.25rem;
  border-radius: 50%;
  background:    var(--dcl-primary);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     .9375rem;
  text-transform: uppercase;
}

.dcl-gasto-card__info {
  display:       flex;
  flex-direction: column;
  min-width:     0;
  flex:          1;
}
.dcl-gasto-card__proveedor { font-weight: 600; color: var(--dcl-gray-900); }

.dcl-gasto-card__importe {
  display:       flex;
  flex-direction: column;
  align-items:   flex-end;
  flex-shrink:   0;
}
.dcl-gasto-card__monto { font-weight: 700; color: var(--dcl-gray-900); }

.dcl-gasto-card__badge-col {
  flex-shrink: 0;
  min-width:   130px;
  display:     flex;
  justify-content: flex-end;
}

/* Badges */
.dcl-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  font-size:     .75rem;
  font-weight:   600;
  padding:       .3rem .75rem;
  border-radius: 999px;
  border:        none;
  cursor:        default;
}
.dcl-badge--deducible {
  background: var(--dcl-success);
  color:      #fff;
}
.dcl-badge--no-deducible {
  background: transparent;
  border:     1.5px solid var(--dcl-gray-400, #9ca3af);
  color:      var(--dcl-gray-700);
}
.dcl-badge--contador {
  background: var(--dcl-warning);
  color:      #fff;
  cursor:     pointer;
  transition: opacity .15s;
}
.dcl-badge--contador:hover { opacity: .85; }

.dcl-gasto-comentario {
  display:       flex;
  gap:           .6rem;
  align-items:   flex-start;
  background:    #faf5ff;
  border:        1px solid #e9d5ff;
  border-top:    none;
  padding:       .75rem 1.25rem .75rem 4rem;
  font-size:     .875rem;
  color:         #581c87;
}

/* Paginación footer */
.dcl-gastos-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      1.25rem;
  flex-wrap:       wrap;
  gap:             .75rem;
}
.dcl-gastos-paginacion {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         .25rem;
}
.dcl-gastos-total {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
}
.dcl-gastos-total .dcl-amount { font-size: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════
   IMPUESTOS STEP
   ═══════════════════════════════════════════════════════════════ */
.dcl-impuesto-card {
  border:        2px solid var(--dcl-gray-200);
  border-radius: var(--dcl-radius);
  padding:       1.25rem 1.5rem;
  display:       flex;
  flex-direction: column;
  gap:           .4rem;
}
.dcl-impuesto-card__label {
  font-size:   .875rem;
  font-weight: 600;
  color:       var(--dcl-gray-500);
}
.dcl-impuesto-card__amount {
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--dcl-primary);
}

.dcl-impuesto-detalle {
  border:        1px solid var(--dcl-gray-200);
  border-radius: var(--dcl-radius);
  overflow:      hidden;
}
.dcl-impuesto-detalle .table { margin-bottom: 0; }
.dcl-impuesto-detalle td { font-size: .875rem; color: var(--dcl-gray-700); padding: .5rem 1rem; }
.dcl-impuesto-detalle td:first-child { color: var(--dcl-primary); }

.dcl-impuesto-detalle__row--total td {
  font-weight: 700;
  color:       var(--dcl-gray-900) !important;
}
.dcl-impuesto-detalle__row--grand td {
  font-size:   1rem;
  font-weight: 800;
  color:       var(--dcl-gray-900) !important;
}
.dcl-impuesto-detalle__row--grand td:last-child { color: var(--dcl-primary) !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {
  .dcl-welcome__card  { padding: 1.5rem 1.25rem; }
  .dcl-step__body     { padding: 1.25rem 1rem .75rem; }
  .dcl-step__footer   { padding: 1rem; flex-direction: column; gap: .75rem; align-items: stretch; }
  .dcl-step__footer > * { width: 100%; justify-content: center; }
  .dcl-gasto-card     { flex-wrap: wrap; }
  .dcl-stepper__label { font-size: .625rem; }
}