body{font-family:Arial,sans-serif;margin:0;background:#f5f7fa;color:#1f2937}.container{width:calc(100% - 48px);max-width:1320px;margin:0 auto;padding:16px}.topbar{background:#0f172a;color:#fff}.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{font-size:20px}.menu{display:flex;flex-wrap:wrap;gap:8px}.menu-link{color:#cbd5e1;text-decoration:none;padding:8px 10px;border-radius:6px}.menu-link.active,.menu-link:hover{background:#1e293b;color:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px}table{width:100%;border-collapse:collapse;background:#fff;display:block;overflow:auto}th,td{padding:8px;border-bottom:1px solid #e5e7eb;text-align:left}form{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}input,select,button{padding:8px;border:1px solid #cbd5e1;border-radius:6px}button{background:#0f766e;color:#fff;cursor:pointer}.ok{color:#15803d}.warning{color:#b45309}.danger{color:#b91c1c}.critical{color:#7f1d1d;font-weight:700}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.payments-table{min-width:1200px;display:table}.payments-table input,.payments-table select{max-width:180px}.payments-table input[name="paid_amount"]{width:90px;max-width:90px}.payments-table input[name="paid_date"]{width:145px;max-width:145px}.payments-table select[name="bank_id"]{width:120px;max-width:120px}.payments-table input[name="notes"]{width:160px;max-width:160px}.payments-table td:last-child,.payments-table th:last-child{white-space:nowrap}

.login-wrapper{max-width:420px;padding-top:64px}.login-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px}.login-form{display:flex;flex-direction:column;gap:8px}.user-box{display:flex;align-items:center;gap:10px;color:#e2e8f0;font-size:14px}

.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.dashboard-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:12px}.status-ok{color:#15803d}.status-warning{color:#b45309}.status-danger{color:#b91c1c}.mini-table{width:100%;border-collapse:collapse}.mini-table th,.mini-table td{padding:8px;border-bottom:1px solid #e5e7eb;text-align:left}.alert-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-bottom:18px;
}

.dashboard-card{
  background:#fff;
  border:1px solid #dde3ea;
  border-radius:10px;
  padding:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  margin-bottom:0;
}

.dashboard-card h2,
.dashboard-card h3{margin-top:0}
.dashboard-card strong{font-weight:700}
.status-ok{color:#047857;font-weight:700}
.status-warning{color:#b45309;font-weight:700}
.status-danger{color:#b91c1c;font-weight:700}
.alert-list{margin:0;padding-left:18px}
.alert-list li{margin-bottom:6px}
.mini-table{width:100%;border-collapse:collapse}
.mini-table th,.mini-table td{padding:8px;border-bottom:1px solid #e5e7eb;text-align:left}
.danger-box{border-color:#fecaca;background:#fff7f7}
.warning-box{border-color:#fed7aa;background:#fffaf0}
.ok-box{border-color:#bbf7d0;background:#f0fdf4}
.dashboard-grid-top,.dashboard-grid-bottom{align-items:stretch}
.dashboard-hero{
  background:#fff;
  border:1px solid #dde3ea;
  border-radius:12px;
  padding:18px;
  margin-bottom:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.dashboard-hero h2{
  margin:0 0 8px;
}

.dashboard-hero-message{
  font-size:1.2rem;
  font-weight:700;
  margin:0 0 12px;
}

.dashboard-hero-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  color:#334155;
}

.dashboard-hero-danger{
  border-color:#fecaca;
  background:#fff7f7;
}

.dashboard-hero-warning{
  border-color:#fed7aa;
  background:#fffaf0;
}

.dashboard-hero-ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.dashboard-main-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-bottom:18px;
}

.dashboard-section{
  margin-top:22px;
}

.dashboard-section h2{
  margin-bottom:12px;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

.metric-card{
  background:#fff;
  border:1px solid #dde3ea;
  border-radius:10px;
  padding:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.metric-card strong{
  display:block;
  font-size:1.15rem;
  margin:6px 0;
}

.alert-clean-list,
.action-list{
  list-style:none;
  padding:0;
  margin:0;
}

.alert-clean-list li,
.action-list li{
  padding:10px 0;
  border-bottom:1px solid #e5e7eb;
  line-height:1.35;
}

.alert-clean-list li:last-child,
.action-list li:last-child{
  border-bottom:0;
}

.dashboard-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.dashboard-links a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:8px;
  background:#fff;
  border:1px solid #dde3ea;
  text-decoration:none;
  color:#0f172a;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.dashboard-links a:hover{
  background:#f8fafc;
}
.inline-create-row td{background:#f8fafc}.inline-create-form,.payroll-payment-form{align-items:flex-end;gap:8px}.inline-create-form label,.payroll-payment-form label{display:flex;flex-direction:column;font-size:12px;color:#475569}.inline-create-form input{min-width:130px}.payroll-table{min-width:1180px;display:table}.payroll-table td{vertical-align:top}.payroll-payment-form{max-width:360px}.payroll-payment-form input,.payroll-payment-form select{max-width:150px}.payment-history{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}.payment-history li{display:flex;align-items:center;gap:8px}.payment-history form{margin:0}.payment-history button{padding:5px 8px}.muted{color:#64748b}
.nuga-table{min-width:1180px;display:table}.nuga-table td{vertical-align:top}.nuga-week-row td{background:#fff}.nuga-invoices-row td{background:#f8fafc;padding:12px 16px}.nuga-invoices-panel{display:flex;flex-direction:column;gap:10px}.nuga-invoices-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}.nuga-invoices-table{display:table;background:#fff}.nuga-invoices-table input[type="date"]{width:145px}.nuga-inline-form{display:inline-flex;align-items:center;gap:6px;margin:0}.nuga-add-invoice-form{align-items:flex-end;margin:4px 0 0}.nuga-add-invoice-form label{display:flex;flex-direction:column;font-size:12px;color:#475569}.nuga-add-invoice-form input{min-width:130px}.nuga-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.danger-button{background:#b91c1c}

.nuga-add-card,
.nuga-week-card,
.nuga-paid-history{
  background:#fff;
  border:1px solid #dde3ea;
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.nuga-add-card h2{
  margin-top:0;
}

.nuga-week-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:12px;
  margin-bottom:12px;
}

.nuga-week-header h3{
  margin:0 0 6px 0;
}

.nuga-week-header p{
  margin:0;
}

.nuga-week-amounts{
  text-align:right;
  min-width:220px;
}

.nuga-week-amounts span{
  display:block;
  margin-top:4px;
}

.nuga-section{
  margin-top:14px;
}

.nuga-section h4{
  margin:0 0 10px 0;
}

.nuga-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  margin-bottom:12px;
}

.nuga-summary-item{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px;
}

.nuga-summary-item strong,
.nuga-summary-item span{
  display:block;
}

.nuga-summary-item span{
  margin-top:4px;
}

.nuga-inline-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:end;
}

.nuga-inline-form label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:600;
}

.nuga-inline-form input[type="checkbox"]{
  width:auto;
}

.nuga-invoices-table{
  width:100%;
  border-collapse:collapse;
}

.nuga-invoices-table th,
.nuga-invoices-table td{
  padding:8px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
}

.nuga-paid-history summary{
  cursor:pointer;
  font-weight:700;
}

.nuga-paid-history table{
  display:table;
  margin-top:12px;
}

.nuga-week-danger{
  border-color:#fecaca;
}

.recurring-card,
.recurring-top-card{
  background:#fff;
  border:1px solid #dde3ea;
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.recurring-card-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:12px;
  margin-bottom:12px;
}

.recurring-card-header h3{
  margin:0 0 6px 0;
}

.recurring-card-header p{
  margin:0;
}

.recurring-meta{
  color:#475569;
  font-size:.95rem;
}

.recurring-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  margin-bottom:14px;
}

.recurring-summary-item{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px;
}

.recurring-summary-item strong,
.recurring-summary-item span{
  display:block;
}

.recurring-summary-item span{
  margin-top:4px;
}

.recurring-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e5e7eb;
}

.recurring-section h4{
  margin:0 0 10px 0;
}

.recurring-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  align-items:end;
}

.recurring-form-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:600;
}

.recurring-form-grid input,
.recurring-form-grid select,
.recurring-form-grid textarea{
  width:100%;
  box-sizing:border-box;
}

.recurring-form-grid .recurring-checkbox-label{
  flex-direction:row;
  gap:8px;
  align-items:center;
  align-self:center;
}

.recurring-form-grid .recurring-checkbox-label input{
  width:auto;
}

.recurring-wide{
  grid-column:1 / -1;
}

.recurring-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.recurring-status-active{
  color:#047857;
  font-weight:700;
}

.recurring-status-inactive{
  color:#b91c1c;
  font-weight:700;
}

.official-card{
  background:#fff;
  border:1px solid #dde3ea;
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.official-card h2,
.official-card h3{
  margin-top:0;
}

.official-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
  align-items:end;
}

.official-form-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:600;
}

.official-form-grid input,
.official-form-grid select,
.official-form-grid textarea{
  width:100%;
  box-sizing:border-box;
}

.official-wide{
  grid-column:1 / -1;
}

.official-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.officials-table{
  min-width:1420px;
  display:table;
}

.officials-table td{
  vertical-align:top;
}

.officials-table input,
.officials-table select{
  max-width:170px;
}

.officials-table input[name="notes"]{
  min-width:180px;
}

.officials-table input[name="final_amount"]{
  display:block;
  margin-top:6px;
  max-width:110px;
}

.official-status-devuelto td{
  background:#fff1f2;
  border-bottom-color:#fecdd3;
}

.official-status-pendiente-pago td{
  background:#fff7ed;
  border-bottom-color:#fed7aa;
}

.official-status-proximo td,
.official-status-previsto td,
.official-status-pagado-recargo td{
  background:#fffbeb;
  border-bottom-color:#fde68a;
}

.official-status-pagado td{
  background:#f0fdf4;
  border-bottom-color:#bbf7d0;
}

.income-forecast-card{
  border-color:#bae6fd;
  background:#f0f9ff;
}

.income-forecast-table{
  min-width:760px;
  display:table;
}

.income-forecast-table td{
  vertical-align:top;
}

.income-forecast-form{
  display:contents;
}

.income-forecast-table input[name="expected_amount"]{
  max-width:130px;
}

.income-forecast-table textarea{
  min-width:220px;
  width:100%;
  box-sizing:border-box;
}

.income-checkbox-label{
  display:flex;
  align-items:center;
  gap:6px;
}

@media (max-width:700px){
  .dashboard-grid{grid-template-columns:1fr}
}


@media (min-width:1400px){
  .container,
  main{max-width:1440px}
}

@media (max-width:768px){
  .container,
  main{width:calc(100% - 24px);max-width:none}

  .dashboard-main-grid,
  .metric-grid{
    grid-template-columns:1fr;
  }

  .nuga-week-header{
    flex-direction:column;
  }

  .nuga-week-amounts{
    text-align:left;
    min-width:0;
  }

  .recurring-card-header{
    flex-direction:column;
  }
}

details.recurring-card,
details.nuga-week-card,
details.payment-card{
  padding:0;
  overflow:hidden;
}

.recurring-card-summary,
.nuga-week-summary,
.payment-card-summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:16px;
}

.recurring-card-summary::-webkit-details-marker,
.nuga-week-summary::-webkit-details-marker,
.payment-card-summary::-webkit-details-marker{
  display:none;
}

.recurring-card-summary::after,
.nuga-week-summary::after,
.payment-card-summary::after{
  content:'\25BE';
  font-size:1.1rem;
  line-height:1;
  transition:transform .15s ease;
  margin-left:8px;
  color:#475569;
}

.recurring-card[open] .recurring-card-summary::after,
.nuga-week-card[open] .nuga-week-summary::after,
.payment-card[open] .payment-card-summary::after{
  transform:rotate(180deg);
}

.recurring-card-body,
.nuga-week-body,
.payment-card-body{
  padding:0 16px 16px 16px;
  border-top:1px solid #e5e7eb;
}

.recurring-card-body .recurring-section:first-child,
.nuga-week-body .nuga-section:first-child{
  border-top:0;
  margin-top:14px;
  padding-top:0;
}

.card-summary-main,
.nuga-summary-main,
.payment-summary-main{
  flex:1 1 220px;
}

.card-summary-main strong,
.nuga-summary-main strong,
.payment-summary-main strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:4px;
}

.card-summary-main span,
.nuga-summary-main span,
.payment-summary-main span{
  display:block;
  color:#475569;
  font-size:.95rem;
  line-height:1.35;
}

.card-summary-meta,
.nuga-summary-meta,
.payment-summary-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;
  min-width:420px;
  flex:1 1 520px;
}

.nuga-summary-meta{
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
}

.summary-pill,
.payment-summary-pill{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:8px;
  font-size:.92rem;
}

.summary-pill strong,
.payment-summary-pill strong{
  display:block;
  font-size:.8rem;
  color:#475569;
  margin-bottom:2px;
}

@media(max-width:900px){
  .recurring-card-summary,
  .nuga-week-summary,
  .payment-card-summary{
    flex-direction:column;
  }

  .card-summary-meta,
  .nuga-summary-meta,
  .payment-summary-meta{
    min-width:0;
    width:100%;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }
}

@media(max-width:600px){
  .card-summary-meta,
  .nuga-summary-meta,
  .payment-summary-meta{
    grid-template-columns:1fr;
  }
}

.payment-create-card,
.payment-card{
  background:#fff;
  border:1px solid #dde3ea;
  border-radius:10px;
  margin-bottom:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
}

.payment-create-card{
  padding:16px;
  margin-bottom:18px;
}

.payment-create-card h2,
.payment-card-body h3{
  margin-top:0;
}

.payments-card-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.payment-filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}

.payment-filter-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#334155;
  text-decoration:none;
  font-weight:700;
}

.payment-filter-tab.active,
.payment-filter-tab:hover{
  background:#0f766e;
  border-color:#0f766e;
  color:#fff;
}

.payment-empty-state{
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  color:#64748b;
  padding:18px;
  text-align:center;
}

.payment-card{
  margin-bottom:0;
}

.payment-summary-meta{
  min-width:520px;
}

.payment-readonly-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  margin:14px 0 12px;
}

.payment-readonly-grid div{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:8px;
}

.payment-readonly-grid strong,
.payment-readonly-grid span{
  display:block;
}

.payment-readonly-grid strong{
  font-size:.8rem;
  color:#475569;
  margin-bottom:2px;
}

.payment-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  align-items:end;
  flex:1 1 680px;
  margin:0;
}

.payment-form-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:600;
}

.payment-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
  margin-top:12px;
}

.payment-delete-form{
  margin:0;
  align-items:end;
}

.payment-danger{
  border-color:#fecaca;
}

.payment-warning,
.payment-status-parcial{
  border-color:#fed7aa;
}

.payment-status-pagado{
  border-color:#bbf7d0;
}

.payment-danger{
  border-color:#fecaca;
}

.payment-critical{
  box-shadow:inset 3px 0 0 #b91c1c,0 1px 2px rgba(15,23,42,.04);
}

.payment-critical-label{
  color:#b91c1c;
  font-weight:700;
}

@media(max-width:900px){
  .payment-summary-meta{
    min-width:0;
    width:100%;
  }
}

.payment-source-badge,
.payment-adjustment-badge{
  display:inline-flex!important;
  width:max-content;
  margin-top:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.78rem!important;
  font-weight:700;
}

.payment-source-badge{
  background:#e0f2fe;
  color:#0369a1!important;
}

.payment-adjustment-badge{
  background:#fef3c7;
  color:#92400e!important;
}

.payment-edit-panel{
  margin:14px 0;
  border:1px solid #dbeafe;
  border-radius:10px;
  background:#eff6ff;
  overflow:hidden;
}

.payment-edit-panel summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  color:#1d4ed8;
  font-weight:800;
}

.payment-edit-panel summary::-webkit-details-marker{
  display:none;
}

.payment-edit-panel[open] summary{
  border-bottom:1px solid #bfdbfe;
}

.payment-edit-form{
  padding:12px;
}

.payment-origin-notice{
  margin:12px 12px 0;
  padding:10px 12px;
  border:1px solid #bae6fd;
  border-radius:8px;
  background:#f0f9ff;
  color:#075985;
}