/* =========================================================
   MultiWeb Visual V3 - Client / SaaS
   ========================================================= */

:root{
  --mw-editor-ink:#0f172a;
  --mw-editor-muted:#64748b;
  --mw-editor-card:rgba(255,255,255,.90);
  --mw-editor-border:rgba(15,23,42,.08);
  --mw-editor-shadow:0 18px 50px rgba(15,23,42,.09);
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 7% 8%,rgba(37,99,235,.11),transparent 24%),
    radial-gradient(circle at 92% 16%,rgba(6,182,212,.09),transparent 23%),
    linear-gradient(180deg,#f8fafc,#eef2ff)!important;
  color:var(--mw-editor-ink)!important;
  -webkit-font-smoothing:antialiased;
}

main,
.container,
.content,
.dashboard,
.page,
.panel,
.wrapper{
  width:min(100% - 28px,1180px)!important;
  margin-inline:auto!important;
}

h1{
  font-size:clamp(26px,4vw,38px)!important;
  letter-spacing:-.035em!important;
}

h2{
  font-size:clamp(20px,3vw,27px)!important;
  letter-spacing:-.025em!important;
}

h3{
  letter-spacing:-.02em!important;
}

header,
.topbar,
.navbar,
.dashboard-header{
  background:rgba(255,255,255,.84)!important;
  border:1px solid var(--mw-editor-border)!important;
  border-radius:22px!important;
  box-shadow:0 12px 34px rgba(15,23,42,.07)!important;
  backdrop-filter:blur(14px);
}

/* Secciones */

section,
.section,
.card,
.panel-card,
.form-section,
.editor-section{
  background:var(--mw-editor-card)!important;
  border:1px solid var(--mw-editor-border)!important;
  border-radius:22px!important;
  box-shadow:var(--mw-editor-shadow)!important;
  backdrop-filter:blur(10px);
}

section,
.section,
.form-section,
.editor-section{
  padding:20px!important;
}

/* Campos */

label{
  display:block!important;
  margin:0 0 7px!important;
  font-weight:800!important;
  color:#1e293b!important;
}

input,
textarea,
select{
  width:100%!important;
  min-height:48px!important;
  border:1px solid rgba(15,23,42,.10)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#0f172a!important;
  padding:12px 14px!important;
  outline:none!important;
  box-sizing:border-box;
  transition:
    border-color .18s ease,
    box-shadow .18s ease!important;
}

textarea{
  min-height:120px!important;
  resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(37,99,235,.48)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
}

input[type="file"]{
  padding:10px!important;
  background:#f8fafc!important;
}

/* Botones */

button,
a[role="button"],
input[type="submit"],
input[type="button"],
.btn,
.button{
  border:0!important;
  border-radius:14px!important;
  min-height:46px;
  padding:11px 16px!important;
  font-weight:850!important;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease!important;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}

button:hover,
a[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 28px rgba(15,23,42,.12);
}

/* Guardar */

button[type="submit"],
input[type="submit"],
.save-btn,
[class*="save"]{
  background:linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  )!important;
  color:#fff!important;
}

/* Formularios */

form{
  display:grid;
  gap:16px;
}

/* Productos */

.product-row,
.item-row,
[class*="product-item"],
[class*="product-row"],
[class*="item-row"]{
  border-radius:18px!important;
}

/* Tablas */

table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  overflow:hidden;
  border:1px solid var(--mw-editor-border)!important;
  border-radius:18px!important;
  background:#fff!important;
}

th{
  background:#f8fafc!important;
  font-size:12px!important;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b!important;
}

th,
td{
  padding:12px 14px!important;
  border-bottom:1px solid rgba(15,23,42,.06)!important;
}

tr:last-child td{
  border-bottom:0!important;
}

/* Badges */

.badge,
.status,
.tag,
[class*="badge"],
[class*="status"],
[class*="tag"]{
  border-radius:999px!important;
  font-weight:800!important;
}

/* Mobile */

@media (max-width:760px){

  main,
  .container,
  .content,
  .dashboard,
  .page,
  .panel,
  .wrapper{
    width:min(100% - 16px,1180px)!important;
  }

  section,
  .section,
  .form-section,
  .editor-section{
    padding:15px!important;
    border-radius:18px!important;
  }

  button[type="submit"],
  input[type="submit"],
  .save-btn,
  [class*="save"]{
    position:sticky;
    bottom:12px;
    z-index:50;
    box-shadow:0 16px 32px rgba(37,99,235,.24)!important;
  }

  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}