/* LuckHaus F61 · Visual Modernization
   Capa final y deliberadamente acotada: moderniza tablas, listados y superficies
   sin alterar lógica ni reemplazar la identidad de marca configurable. */

body.f61-modern-ui{
  --f61-primary:var(--brand-primary,#6d28d9);
  --f61-secondary:var(--brand-secondary,#a855f7);
  --f61-ink:#2f2835;
  --f61-muted:#736a79;
  --f61-line:#e8e1ed;
  --f61-line-soft:#f1ecf4;
  --f61-surface:#fff;
  --f61-soft:#f8f5fb;
  --f61-radius:18px;
  --f61-shadow:0 10px 30px rgba(52,35,67,.055);
  background:
    radial-gradient(circle at 86% -8%,color-mix(in srgb,var(--f61-primary) 8%,transparent),transparent 30rem),
    #f8f7fa;
}

body.f61-modern-ui .page-wrap{padding-bottom:48px!important}
body.f61-modern-ui .page-heading{
  padding:4px 0 2px!important;
  margin-bottom:20px!important;
}
body.f61-modern-ui .page-heading h1{
  font-size:clamp(25px,2.15vw,34px)!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
body.f61-modern-ui .page-heading p{
  color:var(--f61-muted)!important;
  font-size:12.5px!important;
}
body.f61-modern-ui .eyebrow{
  color:var(--f61-primary)!important;
  font-size:9.5px!important;
  letter-spacing:.14em!important;
}

/* Superficies */
body.f61-modern-ui :where(.card,.table-card,.panel-card,.workspace-panel,.settings-panel,.settings-card,.list-search-card){
  border-color:var(--f61-line)!important;
  border-radius:var(--f61-radius)!important;
  background:var(--f61-surface)!important;
  box-shadow:var(--f61-shadow)!important;
}
body.f61-modern-ui .card:hover{
  border-color:color-mix(in srgb,var(--f61-primary) 18%,var(--f61-line))!important;
  box-shadow:0 14px 34px rgba(52,35,67,.075)!important;
}

/* Botones */
body.f61-modern-ui .btn{
  border-radius:11px!important;
  font-weight:760!important;
  letter-spacing:-.005em;
}
body.f61-modern-ui .btn.primary{
  border-color:var(--f61-primary)!important;
  background:linear-gradient(135deg,var(--f61-primary),var(--f61-secondary))!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--f61-primary) 20%,transparent)!important;
}
body.f61-modern-ui .btn.secondary{
  border-color:color-mix(in srgb,var(--f61-primary) 22%,#ddd)!important;
  background:color-mix(in srgb,var(--f61-primary) 7%,#fff)!important;
  color:var(--f61-primary)!important;
}
body.f61-modern-ui .btn.ghost{
  border-color:var(--f61-line)!important;
  background:#fff!important;
  color:#5b5260!important;
}
body.f61-modern-ui .btn.ghost:hover{
  border-color:color-mix(in srgb,var(--f61-primary) 28%,var(--f61-line))!important;
  background:color-mix(in srgb,var(--f61-primary) 4%,#fff)!important;
  color:var(--f61-primary)!important;
}

/* Filtros / búsqueda */
body.f61-modern-ui .sales-filter-pills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 12px;
}
body.f61-modern-ui .sales-filter-pills a{
  min-height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border:1px solid var(--f61-line);
  border-radius:999px;
  background:#fff;
  color:#6c6372;
  font-size:11px;
  font-weight:750;
  transition:.16s ease;
}
body.f61-modern-ui .sales-filter-pills a:hover{
  border-color:color-mix(in srgb,var(--f61-primary) 28%,var(--f61-line));
  color:var(--f61-primary);
}
body.f61-modern-ui .sales-filter-pills a.active{
  border-color:color-mix(in srgb,var(--f61-primary) 26%,transparent);
  background:color-mix(in srgb,var(--f61-primary) 9%,#fff);
  color:var(--f61-primary);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f61-primary) 6%,transparent);
}
body.f61-modern-ui .list-search-card{
  display:flex!important;
  align-items:end!important;
  gap:10px!important;
  padding:13px!important;
  margin-bottom:14px!important;
}
body.f61-modern-ui .list-search-card label{flex:1 1 260px;min-width:0}
body.f61-modern-ui .list-search-card input{margin-top:6px!important}

/* Sistema de tablas F61 */
body.f61-modern-ui .table-card{
  min-width:0!important;
  overflow:hidden!important;
}
body.f61-modern-ui .responsive-table{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--f61-primary) 30%,#d9d1de) transparent;
}
body.f61-modern-ui .responsive-table::-webkit-scrollbar{height:9px;width:9px}
body.f61-modern-ui .responsive-table::-webkit-scrollbar-thumb{
  border:2px solid #fff;
  border-radius:999px;
  background:color-mix(in srgb,var(--f61-primary) 28%,#d7d0dc);
}
body.f61-modern-ui table.f61-table{
  width:100%!important;
  min-width:880px!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  table-layout:auto;
  font-size:12px!important;
}
body.f61-modern-ui table.f61-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:11px 14px!important;
  border-bottom:1px solid var(--f61-line)!important;
  background:linear-gradient(180deg,#fcfbfd,#f8f5fa)!important;
  color:#746a79!important;
  font-size:9.5px!important;
  font-weight:850!important;
  line-height:1.25!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap;
}
body.f61-modern-ui table.f61-table tbody td{
  padding:14px!important;
  border-bottom:1px solid var(--f61-line-soft)!important;
  background:#fff!important;
  color:#4c4451!important;
  vertical-align:middle!important;
  line-height:1.45!important;
}
body.f61-modern-ui table.f61-table tbody tr:nth-child(even) td{
  background:#fdfcfe!important;
}
body.f61-modern-ui table.f61-table tbody tr:hover td{
  background:color-mix(in srgb,var(--f61-primary) 3.5%,#fff)!important;
}
body.f61-modern-ui table.f61-table tbody tr:last-child td{border-bottom:0!important}
body.f61-modern-ui table.f61-table td>strong:first-child{
  color:var(--f61-ink);
  font-size:12.5px;
  font-weight:800;
}
body.f61-modern-ui table.f61-table td>small{
  display:block;
  margin-top:3px;
  color:#8a818f!important;
  font-size:10px!important;
  line-height:1.35;
}
body.f61-modern-ui table.f61-table td:first-child{min-width:190px}
body.f61-modern-ui table.f61-table td:last-child{min-width:190px}

body.f61-modern-ui .number-mini{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:31px;
  min-height:29px;
  margin:2px 3px 2px 0!important;
  padding:4px 7px!important;
  border:1px solid color-mix(in srgb,var(--f61-primary) 17%,var(--f61-line))!important;
  border-radius:9px!important;
  background:color-mix(in srgb,var(--f61-primary) 5%,#fff)!important;
  color:#5c348e!important;
  font-size:10.5px!important;
  font-weight:800!important;
}
body.f61-modern-ui .status{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:9.5px!important;
  font-weight:850!important;
  letter-spacing:.02em;
}
body.f61-modern-ui .row-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}
body.f61-modern-ui .row-actions .btn{
  flex:0 1 auto;
  min-height:31px!important;
  padding:6px 9px!important;
  border-radius:9px!important;
  font-size:10px!important;
  white-space:nowrap;
}

/* Tablas simuladas / reportes */
body.f61-modern-ui .report-table{
  overflow:hidden!important;
  border:1px solid var(--f61-line)!important;
  border-radius:14px!important;
  background:#fff!important;
}
body.f61-modern-ui .report-table-head,
body.f61-modern-ui .report-table-row{
  min-width:0!important;
  padding:10px 12px!important;
  column-gap:12px!important;
}
body.f61-modern-ui .report-table-head{
  background:linear-gradient(180deg,#fcfbfd,#f8f5fa)!important;
  color:#786f7d!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
body.f61-modern-ui .report-table-row{
  border-top:1px solid var(--f61-line-soft)!important;
  background:#fff!important;
  color:#504755!important;
  font-size:11.5px!important;
}
body.f61-modern-ui .report-table-row:nth-child(odd){background:#fdfcfe!important}
body.f61-modern-ui .report-table-row:hover{
  background:color-mix(in srgb,var(--f61-primary) 3.5%,#fff)!important;
}

body.f61-modern-ui .audit-list{
  display:grid!important;
  gap:8px!important;
}
body.f61-modern-ui .audit-list article{
  min-width:0;
  padding:12px 14px!important;
  border:1px solid var(--f61-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 2px 8px rgba(52,35,67,.025);
}
body.f61-modern-ui .audit-list article:hover{
  border-color:color-mix(in srgb,var(--f61-primary) 18%,var(--f61-line))!important;
  background:color-mix(in srgb,var(--f61-primary) 2.5%,#fff)!important;
}

/* Paginación */
body.f61-modern-ui .pagination-bar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:14px!important;
  padding:11px 13px!important;
  border:1px solid var(--f61-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--f61-muted)!important;
  box-shadow:0 5px 16px rgba(52,35,67,.035)!important;
}
body.f61-modern-ui .pagination-bar>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
body.f61-modern-ui .pagination-bar b{color:#514858;font-size:10.5px}

/* Responsive: las tablas reales dejan de ser una sábana horizontal y pasan a tarjetas. */
@media(max-width:760px){
  body.f61-modern-ui .page-wrap{padding-left:13px!important;padding-right:13px!important}
  body.f61-modern-ui .list-search-card{align-items:stretch!important;flex-direction:column!important}
  body.f61-modern-ui .list-search-card .btn{width:100%}

  body.f61-modern-ui .responsive-table{overflow:visible!important;background:transparent}
  body.f61-modern-ui table.f61-table,
  body.f61-modern-ui table.f61-table tbody{
    display:block!important;
    min-width:0!important;
    width:100%!important;
  }
  body.f61-modern-ui table.f61-table thead{display:none!important}
  body.f61-modern-ui table.f61-table tbody{
    display:grid!important;
    gap:11px!important;
    padding:11px!important;
    background:#f8f6fa;
  }
  body.f61-modern-ui table.f61-table tbody tr{
    display:block!important;
    overflow:hidden;
    border:1px solid var(--f61-line)!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(52,35,67,.04);
  }
  body.f61-modern-ui table.f61-table tbody td{
    display:grid!important;
    grid-template-columns:minmax(92px,110px) minmax(0,1fr);
    align-items:start!important;
    gap:12px!important;
    min-width:0!important;
    width:100%!important;
    padding:11px 12px!important;
    border-bottom:1px solid var(--f61-line-soft)!important;
    background:#fff!important;
    text-align:left!important;
    overflow-wrap:anywhere;
  }
  body.f61-modern-ui table.f61-table tbody td::before{
    content:attr(data-label);
    color:#817687;
    font-size:8.5px;
    font-weight:850;
    letter-spacing:.07em;
    line-height:1.35;
    text-transform:uppercase;
  }
  body.f61-modern-ui table.f61-table tbody td:last-child{border-bottom:0!important}
  body.f61-modern-ui table.f61-table .row-actions{justify-content:flex-start!important}
  body.f61-modern-ui table.f61-table .row-actions .btn{flex:1 1 82px;white-space:normal}
  body.f61-modern-ui .pagination-bar{align-items:stretch!important;flex-direction:column!important}
  body.f61-modern-ui .pagination-bar>div{justify-content:space-between}
}

@media(max-width:480px){
  body.f61-modern-ui .sales-filter-pills{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.f61-modern-ui .sales-filter-pills a{width:100%}
  body.f61-modern-ui table.f61-table tbody{padding:8px!important}
  body.f61-modern-ui table.f61-table tbody td{
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  body.f61-modern-ui table.f61-table tbody td::before{margin-bottom:1px}
  body.f61-modern-ui .pagination-bar>div{display:grid;grid-template-columns:1fr 1fr}
  body.f61-modern-ui .pagination-bar>div b{grid-column:1/-1;text-align:center;order:-1}
}