/* Layout renovado para credenciales */
.credentials-page {
  display: block;
  min-height: 100vh;
}

.cred-page-shell {
  width: min(1380px, calc(100vw - 32px));
  margin: 28px auto;
  display: grid;
  gap: 20px;
}

.cred-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.cred-page-header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  color: #f8fbff;
}

.cred-page-header .muted {
  margin: 8px 0 0;
  color: rgba(232, 241, 255, .86);
  max-width: 760px;
}

.cred-eyebrow {
  margin: 0 0 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: rgba(180, 214, 255, .92);
}

.cred-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cred-flex-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr);
  align-items: start;
  gap: 18px;
}

.cred-panel {
  background: linear-gradient(150deg, rgba(14, 38, 78, .78), rgba(30, 78, 146, .62));
  border: 1px solid rgba(156, 197, 255, .35);
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(10, 30, 66, .26);
  backdrop-filter: blur(6px);
}

.user-list-large {
  min-width: 0;
  padding: 18px;
}

.cred-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.cred-panel-header h2 {
  margin: 0;
  color: #f4f8ff;
  font-size: 1.22rem;
}

.cred-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 187, 255, .42);
  background: rgba(12, 30, 62, .38);
  color: #d3e6ff;
  font-size: 12px;
  font-weight: 600;
}

.user-list-large .table-wrapper {
  max-height: min(68vh, 760px);
  border: 1px solid rgba(148, 187, 255, .35);
  border-radius: 14px;
  background: rgba(9, 24, 49, .45);
}

.user-list-large .data-table {
  font-size: 14px;
  min-width: 700px;
}

.user-list-large .data-table th {
  background: linear-gradient(135deg, rgba(40, 87, 160, .95), rgba(67, 126, 211, .9));
  color: #f8fbff;
  border-bottom-color: rgba(157, 195, 255, .42);
}

.user-list-large .data-table td {
  color: #e2edff;
  border-bottom-color: rgba(156, 197, 255, .18);
}

.user-list-large .data-table tr:nth-child(even) {
  background: rgba(13, 34, 67, .46);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.status-pill.is-active {
  background: rgba(22, 163, 74, .22);
  border: 1px solid rgba(110, 231, 183, .45);
  color: #b8f7d1;
}

.status-pill.is-inactive {
  background: rgba(239, 68, 68, .18);
  border: 1px solid rgba(252, 165, 165, .45);
  color: #ffd7d7;
}
.ml-modal {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.ml-modal.open {
  display:flex;
}

.ml-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(10,21,46,.72);
  backdrop-filter:blur(4px);
}

.ml-modal-dialog {
  position:relative;
  background:linear-gradient(135deg, rgba(17,36,72,.96), rgba(28,76,146,.94));
  border-radius:20px;
  border:1px solid rgba(120,170,235,.45);
  box-shadow:0 28px 54px rgba(6,18,44,.45);
  padding:24px 28px;
  width:min(520px, 92vw);
  color:#f8fbff;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.ml-modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.ml-modal-header h2 {
  margin:0;
  font-size:22px;
  font-weight:650;
}

.ml-modal-close {
  background:none;
  border:none;
  color:#f8fbff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  transition:background .2s ease;
}

.ml-modal-close:hover,
.ml-modal-close:focus {
  background:rgba(148,187,255,.22);
}

.ml-modal-body {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.ml-modal-text {
  margin:0;
  color:rgba(228,238,255,.86);
  font-size:15px;
}

.ml-modal-account-list {
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:240px;
  overflow:auto;
  padding-right:6px;
}

.ml-modal-account-option {
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(148,187,255,.2);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.ml-modal-account-option:hover,
.ml-modal-account-option:focus-within {
  background:rgba(148,187,255,.16);
  border-color:rgba(148,187,255,.45);
}

.ml-modal-account-option input[type="radio"] {
  margin-top:4px;
  accent-color:#2f6ff2;
}

.ml-modal-account-name {
  font-weight:600;
  font-size:15px;
  display:block;
  color:#f9fbff;
}

.ml-modal-account-alias {
  font-size:13px;
  color:rgba(199,222,255,.75);
  display:block;
}

.ml-modal-footer {
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

.ml-modal-footer .btn {
  min-width:160px;
}

.ml-modal-footer .btn:disabled {
  opacity:.6;
  cursor:not-allowed;
}

.cred-form-card {
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 20px;
}

.cred-form-card h2 {
  margin: 0;
  font-size: 1.28rem;
  color: #f8fbff;
}

.credentials-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hidden-autofill-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Paleta azul corporativa */
:root{
  --brand:#0A2E66; /* azul principal */
  --brand-2:#1E73BE; /* azul secundario */
  --bg:#0b1220; /* fondo topbar y sidebar oscuro */
  --bg-2:#0f172a; /* contenido */
  --card:#111827; /* tarjetas */
  --muted:#94a3b8; /* texto suave */
  --text:#e2e8f0; /* texto principal */
  --ok:#16a34a; --warn:#eab308; --err:#ef4444;
  --button-start:#5aaefd;
  --button-end:#2563eb;
  --button-border:#1f4fd6;
  --button-shadow:0 10px 22px rgba(37,99,235,.28);
  --tile-gradient:linear-gradient(135deg, rgba(10,46,102,.82), rgba(30,115,190,.78));
  --tile-gradient-hover:linear-gradient(135deg, rgba(30,115,190,.9), rgba(72,149,235,.92));
  --tile-border:rgba(148,194,255,.32);
  --tile-shadow:0 16px 28px rgba(12,38,82,.25);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,#0a2e66,#1e73be);
  min-height:100%;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(118,192,255,.28), transparent 55%),
             radial-gradient(circle at 80% 10%, rgba(37,99,235,.24), transparent 45%),
             radial-gradient(circle at 50% 85%, rgba(14,48,102,.32), transparent 50%);
  pointer-events:none;
  z-index:-2;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(2,13,35,.35);
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:-1;
}

/* Auth */
body.auth{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg, rgba(10,46,102,.9), rgba(30,115,190,.85))}
.auth-card{background:#ffffff0d;border:1px solid #ffffff1a;padding:28px;border-radius:14px;backdrop-filter:blur(6px);width:min(360px,92vw)}
.auth-card h1{margin:0 0 6px}
.auth-card .muted{color:#e5e7ebcc;margin:0 0 12px;font-size:14px}
.auth-card form{display:grid;gap:10px;margin-top:8px}
/* Base sizing for form controls */
.auth-card input,
.auth-card select,
.auth-card textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #cbd5e1}
/* Inputs and textareas: white background with dark text */
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"],
.auth-card textarea{background:#fff;color:#0f172a}
/* Placeholder color for better contrast */
.auth-card input::placeholder{color:#64748b}
/* Keep selects white for better readability when open */
.auth-card select{background:#fff;color:#0f172a;border:1px solid #cbd5e1}
.auth-card select:focus,
.auth-card select:active{background:#fff;color:#0f172a;outline:none}
.auth-card select option{background:#fff;color:#0f172a}
.auth-card label{font-weight:600;margin-top:4px}
.auth-card .btn,
.auth-card a.btn,
.auth-card button.btn {
  margin-top:6px;
  width:100%;
  padding:12px 18px; /* match .btn */
  min-height:56px; /* match .btn */
  font-size:18px; /* match .btn */
  box-sizing:border-box;
  display:block; /* ensure same rendering for <a> and <button> */
  line-height:1.2;
  text-align:center;
}
.hint{font-size:12px;color:#e5e7ebaa;margin-top:10px}

body.auth.credentials-page {
  display: block;
  min-height: 100vh;
  padding: 8px 0 22px;
}

.credentials-page .cred-form-card {
  width: 100%;
  max-width: none;
}

.credentials-page .cred-form-card .muted {
  margin-top: 8px;
  color: rgba(226, 237, 255, .82);
}

.credentials-page .editing-banner {
  background: rgba(10, 28, 58, .7);
  border-color: rgba(140, 184, 255, .45);
}

.credentials-page .flash {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 187, 255, .35);
  margin-bottom: 8px;
  font-size: 14px;
  color: #e5f0ff;
  background: rgba(11, 30, 58, .58);
}

.credentials-page .flash.success {
  border-color: rgba(34, 197, 94, .45);
  background: rgba(20, 83, 45, .45);
}

.credentials-page .flash.error {
  border-color: rgba(248, 113, 113, .5);
  background: rgba(127, 29, 29, .45);
}

@media (max-width: 1080px) {
  .cred-flex-layout {
    grid-template-columns: 1fr;
  }

  .credentials-page .cred-form-card {
    order: -1;
  }

  .credentials-page .credentials-form-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cred-page-shell {
    width: calc(100vw - 18px);
    margin: 14px auto;
    gap: 14px;
  }

  .user-list-large,
  .credentials-page .cred-form-card {
    padding: 14px;
  }

  .cred-page-header {
    align-items: flex-start;
  }
}

.auth-card .user-list{margin-top:26px;padding-top:18px;border-top:1px solid #ffffff1f}
.editing-banner{display:flex;justify-content:space-between;align-items:center;background:#0b1220a6;border:1px solid #1d3a6b;padding:8px 12px;border-radius:10px;margin-bottom:12px;font-size:14px}
.editing-banner .link{color:#9cc7ff;text-decoration:none;font-weight:600}
.editing-banner .link:hover{text-decoration:underline}
.credentials-form{display:grid;gap:10px;margin-top:8px}
.user-list{margin-top:18px}
.table-wrapper{overflow:auto;border:1px solid #1f2937;border-radius:12px}
.data-table{width:100%;border-collapse:collapse;min-width:480px}
.data-table th,.data-table td{padding:10px 12px;border-bottom:1px solid #1f2937;color:#cbd5e1;text-align:left}
.data-table th{background:#0b1220;font-weight:600}
.data-table th.sortable{
  cursor:pointer;
  user-select:none;
  position:relative;
  padding-right:28px;
}
.data-table th.sortable::after{
  content:'⇅';
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:rgba(226,232,240,.6);
  transition:color .2s ease;
}
.data-table th.sortable[data-sort="asc"]::after{
  content:'▲';
  color:#f8fafc;
}
.data-table th.sortable[data-sort="desc"]::after{
  content:'▼';
  color:#f8fafc;
}
.data-table tr:nth-child(even){background:#111b30}
.data-table .actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:220px}
.data-table .actions form{margin:0}
.data-table .actions .btn{width:auto;min-height:0;padding:8px 12px;font-size:14px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  min-height:48px;
  font-size:16px;
  font-weight:600;
  border-radius:12px;
  border:2px solid var(--button-border);
  background:linear-gradient(135deg,var(--button-start),var(--button-end));
  color:#f8fbff;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(31,79,214,.22);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  cursor:pointer;
}
.btn:hover,
.btn:focus{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(37,99,235,.32);
  background:linear-gradient(135deg,#76c0ff,#2f6ff2);
  color:#fdfcff;
}

.btn-sm{width:auto;min-height:0;padding:8px 12px;font-size:14px;border-radius:10px}
.btn-secondary{background:linear-gradient(135deg,var(--button-start),var(--button-end));color:#f8fbff;border:2px solid var(--button-border);box-shadow:0 6px 0 rgba(37,99,235,.18)}
.btn-secondary:disabled{opacity:.5;cursor:not-allowed}
.btn-tertiary{background:linear-gradient(135deg,var(--button-start),var(--button-end));color:#f8fbff;border:2px solid var(--button-border)}
.btn-tertiary:hover,.btn-tertiary:focus{background:linear-gradient(135deg,#76c0ff,#2f6ff2);color:#fdfcff}
.btn-danger{background:#ef4444;border:2px solid #b91c1c;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,0.1)}
.btn-danger:disabled{opacity:.5;cursor:not-allowed}
.auth-card .user-list h2{margin:0 0 12px;font-size:20px;font-weight:600;color:#f8fafc}
.auth-card .table-wrapper{max-height:240px;overflow:auto;border:1px solid #ffffff1a;border-radius:12px}
.auth-card .data-table{width:100%;border-collapse:collapse;font-size:14px;color:#e2e8f0}
.auth-card .data-table th,
.auth-card .data-table td{padding:10px 12px;border-bottom:1px solid #ffffff12;text-align:left;white-space:nowrap}
.auth-card .data-table th{background:rgba(15,23,42,.65);position:sticky;top:0;backdrop-filter:blur(4px)}
.auth-card .data-table tr:last-child td{border-bottom:none}
.auth-card .data-table td:last-child{text-align:center}

/* Layout */
.topbar{position:sticky;top:0;min-height:56px;background:var(--bg);display:flex;align-items:center;gap:12px;padding:8px 24px;border-bottom:1px solid #283247}
.topbar .brand{font-weight:700}
.topbar .icon{background:none;border:1px solid #283247;color:#cbd5e1;border-radius:8px;padding:6px 10px;cursor:pointer}
.topbar .user{margin-left:auto;display:flex;align-items:center;gap:10px}

.topbar .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 26px;
  min-height:46px;
  font-size:15px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(8,15,33,.28);
  font-weight:600;
  letter-spacing:.1px;
}

.topbar .btn.btn-outline{
  background:linear-gradient(135deg,#0A2E66,#1E73BE);
  border:1px solid rgba(255,255,255,.25);
  color:#f8fbff;
}

.topbar .btn.btn-outline:hover,
.topbar .btn.btn-outline:focus{
  background:linear-gradient(135deg,#1E73BE,#43a3ff);
  transform:translateY(-2px);
}

.topbar .btn.btn-danger{
  padding:10px 24px;
  min-height:46px;
  background:#e11d48;
  border:1px solid #b91c1c;
  color:#fff;
  box-shadow:0 4px 10px rgba(225,29,72,.28);
}

.topbar .btn.btn-danger:hover,
.topbar .btn.btn-danger:focus{
  background:#be123c;
}

.sidebar{position:fixed;top:56px;left:0;bottom:0;width:220px;background:var(--bg);border-right:1px solid #283247;overflow:auto}
.sidebar nav{display:flex;flex-direction:column}
.sidebar a{color:#cbd5e1;padding:12px 14px;text-decoration:none;border-left:3px solid transparent}
.sidebar a:hover{background:#0f172a}
.sidebar a.active{border-left-color:var(--brand-2);background:#0f172a}

.content{margin-left:220px;padding:18px}
.section{margin-bottom:18px}

.cards{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid #1f2937;border-radius:12px;padding:14px}
.card h3{margin:0 0 6px}

/* --- POS Pantallas: estilos más amigables (scoped) --- */
.pos-ui .card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(148,194,255,.35);
  border-radius:16px;
  padding:16px 18px;
}
.pos-ui label{font-weight:600;color:#e6edf7;margin-right:8px}
.pos-ui input[type="text"],
.pos-ui input[type="number"],
.pos-ui select,
.pos-ui textarea{
  background:#fff;
  color:#0f172a;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:12px 14px;
  font-size:16px;
  min-height:44px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}
.pos-ui input[type="text"]::placeholder,
.pos-ui textarea::placeholder{color:#64748b}
.pos-ui select{background:#fff;color:#0f172a}
.pos-ui .form-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pos-ui .actions{display:flex;gap:10px;align-items:center}

form input[name="csrf_token"],form input[name="csrf_token"]+input[type="hidden"][name="csrf_token"]{display:none!important;position:absolute!important;opacity:0!important;width:0!important;height:0!important;pointer-events:none!important}
.ml-resumen-section{display:flex;flex-direction:column;gap:20px;background:rgba(240,248,255,.9);border:1px solid rgba(148,180,220,.45);border-radius:18px;padding:24px;box-shadow:0 18px 36px rgba(15,40,90,.18)}
.ml-resumen-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ml-resumen-header h1{margin:0;color:#0f172a;font-size:28px;font-weight:700}
.ml-resumen-subtitle{margin:6px 0 0;color:rgba(51,65,85,.75);font-size:15px}
.ml-resumen-alias{margin-left:6px;color:rgba(71,85,105,.82)}
.ml-resumen-actions{display:flex;gap:12px}
.ml-resumen-stats{display:flex;flex-wrap:wrap;gap:16px;background:rgba(219,233,255,.7);border:1px solid rgba(148,187,255,.35);border-radius:14px;padding:14px 18px;font-size:15px;color:#1e293b}
.ml-resumen-table-wrapper{border:1px solid rgba(148,187,255,.35);border-radius:16px;overflow:auto;background:#f3f6fc}
.ml-resumen-table{width:100%;border-collapse:collapse;min-width:920px}
.ml-resumen-table th,.ml-resumen-table td{padding:14px 16px;border-bottom:1px solid rgba(148,163,184,.4);text-align:left;color:#1e293b;vertical-align:top;background:#fdfdfd}
.ml-resumen-table th{background:#e2ecff;font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:#0f172a}
.ml-resumen-name{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:6px}
.ml-resumen-description{font-size:13px;color:#475569}
.ml-resumen-warning{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:10px;background:rgba(254,228,205,.65);color:#b45309;font-size:13px}
.ml-resumen-warning::before{content:"⚠"}
.ml-resumen-ok{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;background:rgba(187,247,208,.7);color:#166534;font-weight:600;font-size:13px}
.ml-resumen-row-missing{background:rgba(254,243,199,.65)}
.ml-resumen-row-missing td{border-bottom-color:rgba(250,204,21,.45)}
.ml-resumen-missing{margin:0;padding-left:18px;color:#b45309;font-size:13px}
.ml-resumen-category{font-weight:600;color:#0f766e}
.ml-resumen-category-id{font-size:12px;color:#2563eb;margin-top:2px;word-break:break-all}
.ml-resumen-category-source{margin-top:4px;font-size:12px;color:#475569}
.ml-resumen-note{font-size:14px;color:#1e293b;padding:12px 16px;border-radius:12px;background:#e8f0ff;border:1px solid rgba(148,187,255,.35)}
.ml-resumen-tag{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:999px;background:rgba(191,219,254,.9);color:#1d4ed8;font-size:12px;font-weight:600}
.ml-resumen-tag-inline{background:rgba(16,185,129,.18);color:#6ee7b7}
.ml-atributos-row>td{padding:0;background:#f8fbff;border-bottom:1px solid rgba(148,163,184,.4)}
.ml-atributos-form{display:flex;flex-direction:column;gap:18px;padding:20px;border-top:1px solid rgba(148,187,255,.25)}
.ml-atributos-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ml-atributos-header h3{margin:0;font-size:18px;color:#1f2937}
.ml-atributos-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;background:rgba(210,230,255,.55);border:1px solid rgba(148,187,255,.45);border-radius:14px;padding:12px 14px}
.ml-dato-editable--titulo{grid-column:1/-1}
.ml-atributos-summary .label{display:block;font-size:12px;color:#1e3a8a;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.ml-atributos-summary strong{color:#0f172a;font-size:15px}
.ml-dato-editable{display:flex;flex-direction:column;gap:6px}
.ml-dato-input{padding:10px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.5);background:linear-gradient(135deg,rgba(248,252,255,.96),rgba(229,239,255,.94));color:#0f172a;font-size:13px;box-shadow:0 6px 16px rgba(15,23,42,.08);transition:border .2s ease,box-shadow .2s ease,background .2s ease}
.ml-dato-input:focus,.ml-dato-input:hover{outline:none;border-color:rgba(64,134,235,.7);background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(232,240,255,.95));box-shadow:0 12px 24px rgba(26,71,153,.18)}
.ml-dato-input[type=number]::-webkit-outer-spin-button,.ml-dato-input[type=number]::-webkit-inner-spin-button{margin:0}
.ml-dato-input[type=number]{appearance:textfield;-moz-appearance:textfield}
.ml-dato-note{font-size:11px;color:#64748b}
.ml-categoria-section{margin-top:18px;padding:16px;border-radius:18px;background:rgba(238,245,255,.9);border:1px solid rgba(148,187,255,.4);display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 24px rgba(15,40,90,.08)}
.ml-categoria-section>.label{font-size:12px;color:#1e3a8a;text-transform:uppercase;letter-spacing:.04em}
.ml-categoria-editor{position:relative;display:flex;flex-direction:column;gap:12px;background:rgba(248,251,255,.92);border:1px solid rgba(148,187,255,.45);border-radius:16px;padding:14px 16px;box-shadow:0 12px 24px rgba(15,40,90,.08)}
.ml-categoria-current{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:#0f172a;font-size:14px}
.ml-categoria-selected{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.ml-categoria-selected-name{font-size:15px;font-weight:600;color:#0f172a;line-height:1.35}
.ml-categoria-selected-id{font-size:12px;color:#2563eb}
.ml-categoria-search{display:flex;flex-direction:column;gap:8px}
.ml-categoria-search-controls{display:flex;gap:10px;align-items:center}
.ml-categoria-search-input{flex:1 1 auto;min-width:200px;padding:10px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.5);background:#ffffff;color:#0f172a;font-size:13px;box-shadow:0 4px 10px rgba(15,23,42,.08)}
.ml-categoria-search-input:focus{outline:none;border-color:rgba(79,129,235,.7);box-shadow:0 10px 18px rgba(79,129,235,.18)}
.ml-categoria-search-clear{border:1px solid rgba(148,163,184,.45);background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,244,255,.95));color:#0f172a;font-size:12px;font-weight:600;padding:9px 14px;border-radius:999px;cursor:pointer;transition:transform .2s ease,border .2s ease,box-shadow .2s ease}
.ml-categoria-search-clear:hover,.ml-categoria-search-clear:focus{outline:none;transform:translateY(-1px);border-color:rgba(79,129,235,.7);box-shadow:0 10px 18px rgba(79,129,235,.18)}
.ml-categoria-search-results{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;padding-right:4px}
.ml-categoria-search-message{padding:10px 12px;border-radius:12px;border:1px dashed rgba(148,187,255,.45);font-size:12px;color:#475569;background:rgba(241,247,255,.92)}
.ml-categoria-search-message.is-hint{color:#2563eb;border-style:dotted}
.ml-categoria-search-message.is-loading{color:#1e3a8a;font-weight:600}
.ml-categoria-search-message.is-error{color:#dc2626;border-color:rgba(252,165,165,.6)}
.ml-categoria-search-message.is-success{color:#047857;border-color:rgba(134,239,172,.6)}
.ml-categoria-search-message.is-empty{color:#64748b;font-style:italic}
.ml-categoria-selected-domain,.ml-categoria-selected-path{font-size:12px;color:#475569}
.ml-categoria-clear{width:36px;height:36px;border-radius:999px;border:1px solid rgba(148,163,184,.45);background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(236,244,255,.94));box-shadow:0 6px 14px rgba(15,23,42,.08);display:inline-flex;align-items:center;justify-content:center;color:#1e293b;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border .2s ease;flex-shrink:0}
.ml-categoria-clear::before{content:"×";font-size:18px;line-height:1}
.ml-categoria-clear:focus,.ml-categoria-clear:hover{outline:none;border-color:rgba(251,113,133,.6);box-shadow:0 10px 18px rgba(220,38,38,.16);transform:translateY(-1px)}
.ml-categoria-browser{display:flex;flex-direction:column;gap:10px;border-top:1px dashed rgba(148,187,255,.45);padding-top:12px}
.ml-categoria-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px}
.ml-categoria-crumb{padding:6px 12px;border-radius:999px;border:1px solid rgba(148,187,255,.5);background:linear-gradient(135deg,rgba(244,248,255,.96),rgba(229,238,255,.94));font-size:12px;color:#1e3a8a;cursor:pointer;transition:transform .2s ease,border .2s ease,box-shadow .2s ease}
.ml-categoria-crumb.is-active{background:linear-gradient(135deg,rgba(222,235,255,.98),rgba(203,221,255,.95));border-color:rgba(79,129,235,.65);color:#0f172a;box-shadow:0 6px 16px rgba(59,99,179,.16)}
.ml-categoria-crumb:focus,.ml-categoria-crumb:hover{outline:none;transform:translateY(-1px);border-color:rgba(79,129,235,.7);box-shadow:0 10px 18px rgba(79,129,235,.18)}
.ml-categoria-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding-right:4px}
.ml-categoria-list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(238,246,255,.95));color:#0f172a;font-size:13px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border .15s ease}
.ml-categoria-list-item:hover,.ml-categoria-list-item:focus{outline:none;border-color:rgba(79,129,235,.6);box-shadow:0 10px 20px rgba(59,99,179,.14);transform:translateY(-1px)}
.ml-categoria-list-item.is-active{border-color:rgba(79,129,235,.85);box-shadow:0 12px 24px rgba(59,99,179,.2)}
.ml-categoria-list-item.has-children .ml-categoria-list-item-arrow{color:#2563eb}
.ml-categoria-list-item-name{flex:1 1 auto;font-weight:500;line-height:1.4}
.ml-categoria-list-item-meta{font-size:11px;color:#2563eb;margin-right:auto;padding-left:6px}
.ml-categoria-list-item-arrow{font-size:18px;font-weight:600;color:#94a3b8}
.ml-categoria-list-loading,.ml-categoria-list-message{padding:14px;text-align:center;font-size:13px;color:#475569;background:rgba(241,247,255,.92);border:1px dashed rgba(148,187,255,.5);border-radius:12px}
.ml-categoria-list-message.empty{color:#1e3a8a;border-style:dotted}
.ml-categoria-suggestion{display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background .15s ease,transform .15s ease}
.ml-categoria-suggestion:hover,.ml-categoria-suggestion:focus{background:rgba(226,240,255,.9);transform:translateY(-1px);outline:none}
.ml-categoria-suggestion-name{font-weight:600;color:#0f172a}
.ml-categoria-suggestion-id{font-size:12px;color:#2563eb}
.ml-categoria-suggestion-domain{font-size:12px;color:#475569}
.ml-categoria-suggestion-path{font-size:12px;color:#0f172a;opacity:.8}
.ml-categoria-suggestion-empty{color:#64748b;font-style:italic}
.ml-categoria-suggestion-loading{color:#2563eb}
.ml-categoria-suggestion-error{color:#dc2626}
.ml-categoria-help{margin:0;font-size:12px;color:#475569}
.ml-atributos-list{display:flex;flex-direction:column;gap:12px}
.ml-atributo-item{background:#fdfdff;border:1px solid rgba(148,187,255,.4);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ml-atributo-item--missing{border-color:rgba(250,204,21,.6);box-shadow:0 0 0 1px rgba(250,204,21,.35)}
.ml-atributo-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.ml-atributo-nombre{font-size:15px;font-weight:600;color:#1f2937}
.ml-atributo-id{display:inline-flex;margin-top:4px;padding:2px 6px;border-radius:6px;background:rgba(191,219,254,.9);color:#1d4ed8;font-size:11px}
.ml-atributo-flags{display:flex;flex-wrap:wrap;gap:8px}
.ml-atributo-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:rgba(219,233,255,.9);color:#1d4ed8;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.ml-atributo-badge.required{background:rgba(254,240,138,.9);color:#854d0e}
.ml-atributo-inputs{display:flex;flex-wrap:wrap;gap:10px}
.ml-atributo-select{min-width:220px;padding:10px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.6);background:#ffffff;color:#0f172a;font-size:13px;box-shadow:0 4px 10px rgba(15,23,42,.08)}
.ml-atributo-text{flex:1 1 240px;padding:10px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.5);background:#ffffff;color:#0f172a;font-size:13px;box-shadow:0 4px 10px rgba(15,23,42,.08)}
.ml-atributo-help{margin:0;font-size:12px;color:#475569}
.ml-atributos-vacio{font-size:13px;color:#475569}
.ml-atributos-domain{display:block;margin-top:6px;font-size:12px;color:#1e3a8a}
.ml-atributos-actions{display:flex;justify-content:flex-end}
.ml-atributos-actions .btn{min-width:160px}

.table-wrap{overflow:auto;border:1px solid #1f2937;border-radius:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #1f2937;color:#cbd5e1}
.table th{background:#0b1220;position:sticky;top:0}

/* Fondo azul claro para filas de tabla en productos */
.table tbody tr{background:rgba(30, 115, 190, 0.15) !important;transition:background 0.15s}
.table tbody tr:hover{background:rgba(255,255,255,0.10) !important}

.ml-account-col{text-align:center;vertical-align:middle;white-space:nowrap}

/* Vista Cargar a ML */
.cargar-ml-section{
  margin-top:16px;
  padding:28px 30px;
  border-radius:24px;
  background:linear-gradient(150deg, rgba(29,65,122,.9), rgba(51,102,173,.85));
  border:1px solid rgba(168,205,255,.4);
  box-shadow:0 18px 34px rgba(14,35,82,.28);
}

.cargar-ml-section h1{
  margin:0;
  font-size:28px;
  font-weight:650;
  line-height:1.25;
  color:#f8fbff;
}

.cargar-ml-header{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}

.cargar-ml-header-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.cargar-ml-header-row-top{
  justify-content:flex-start;
}

.cargar-ml-header-row-search{
  justify-content:flex-start;
}

.cargar-ml-header-row-bottom{
  justify-content:flex-start;
}

.cargar-ml-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.cargar-ml-actions-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}

.cargar-ml-stock-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.cargar-ml-stock-label{
  color:#cbd5e1;
  font-size:13px;
}

.ml-search-input{
  min-width:360px;
  width:min(420px, 60vw);
  padding:9px 14px;
  background:linear-gradient(135deg, rgba(237,245,255,.92), rgba(210,231,255,.86));
  border:1px solid rgba(118,160,230,.55);
  border-radius:12px;
  color:#0f172a;
  font-size:15px;
  box-shadow:0 12px 24px rgba(10,35,82,.24);
  transition:border .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.ml-search-input:focus,
.ml-search-input:hover{
  outline:none;
  border-color:rgba(64,134,235,.7);
  box-shadow:0 18px 34px rgba(26,71,153,.28);
  background:linear-gradient(135deg, rgba(248,252,255,.98), rgba(226,240,255,.94));
  color:#0b1220;
}

.ml-search-input::placeholder{color:rgba(71,85,105,.68)}

/* Hacer visible que la 'X' (clear) del search es clickeable */
.ml-search-input::-webkit-search-cancel-button{cursor:pointer}
.ml-search-input::-ms-clear{cursor:pointer}

.cargar-ml-actions-row #btnPublicar{
  margin-left:auto;
}

.ml-table-wrapper{
  background:linear-gradient(135deg, rgba(15,32,64,.82), rgba(17,45,92,.78));
  border:1px solid rgba(139,182,244,.4);
  box-shadow:0 24px 44px rgba(9,24,58,.26);
  overflow:hidden;
  border-radius:20px;
}

.cargar-ml-section .data-table{min-width:620px}

.cargar-ml-section .data-table th{
  background:linear-gradient(135deg, rgba(52,110,194,.92), rgba(88,158,238,.84));
  color:#fefefe;
  border-bottom:1px solid rgba(188,218,255,.45);
  font-size:14px;
  letter-spacing:.015em;
  font-weight:550;
}

.cargar-ml-section .data-table td{
  color:#1f3355;
  border-bottom:1px solid rgba(116,153,210,.18);
  background:linear-gradient(90deg, rgba(222,237,255,.94), rgba(198,222,255,.9));
  padding:10px 14px;
}

.cargar-ml-section .data-table tr:nth-child(even) td{
  background:linear-gradient(90deg, rgba(240,246,255,.96), rgba(210,231,255,.9));
}

.cargar-ml-section .data-table tr:hover td{
  background:linear-gradient(90deg, rgba(178,215,255,.55), rgba(148,195,255,.5));
  border-color:rgba(120,168,235,.4);
}

.cargar-ml-section .data-table tr.selected td {
  background:linear-gradient(90deg, #ffe9b3 0%, #ffe9b3 100%) !important;
  /* Amarillo claro, bien visible sobre el fondo azul */
  border-color:#fbbf24 !important;
  box-shadow:0 0 0 2px #fbbf24 inset;
}

.cargar-ml-section .data-table thead .ml-filter-row th {
  background:linear-gradient(90deg, rgba(203,225,255,.92), rgba(183,211,255,.9)) !important;
  border-top:1px solid rgba(116,153,210,.45);
  border-bottom:1px solid rgba(116,153,210,.35);
  padding:12px 14px;
  color:#1f3355;
  font-weight:500;
}

.cargar-ml-section .data-table thead .ml-filter-row .ml-filter-cell-left {
  text-align:left;
}

.cargar-ml-section .data-table thead .ml-filter-row button {
  min-width:120px;
}

.ml-product-name{
  font-weight:560;
  font-size:15px;
  color:#0f1f3a;
}

.ml-product-description{
  margin-top:2px;
  font-size:12px;
  color:rgba(62,84,118,.78);
}

.sku-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Fira Code', 'Roboto Mono', monospace;
  font-size:12px;
  padding:4px 10px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(214,231,255,.96), rgba(186,212,255,.9));
  color:#1a2842;
  border:1px solid rgba(118,168,235,.38);
  letter-spacing:.03em;
  text-transform:uppercase;
}

.ml-account-col{
  font-size:16px;
}

.ml-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  box-shadow:0 3px 8px rgba(14,35,82,.08);
  border:1px solid transparent;
}

.ml-status-ok{
  color:#0f5132;
  background:linear-gradient(135deg,#dffbe9,#c4f2d8);
  border-color:rgba(34,197,94,.45);
  box-shadow:0 3px 8px rgba(16,185,129,.18);
}

.ml-status-missing{
  color:#7f1d1d;
  background:linear-gradient(135deg,#fee2e2,#fecaca);
  border-color:rgba(248,113,113,.45);
  box-shadow:0 3px 8px rgba(248,113,113,.18);
}

/* Buttons */
.tile{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--tile-gradient);
  border:1px solid var(--tile-border);
  border-radius:16px;
  padding:24px;
  height:140px;
  color:#f3f8ff;
  text-decoration:none;
  font-weight:600;
  box-shadow:var(--tile-shadow);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  user-select:none;
  -webkit-user-select:none;
  font-size:18px;
  cursor:pointer;
}

.tile.primary{background:var(--tile-gradient)}

.tile:hover,
.tile:focus{
  transform:translateY(-4px);
  box-shadow:0 22px 36px rgba(16,48,102,.32);
  background:var(--tile-gradient-hover);
  color:#ffffff;
}

.tile:active{
  transform:scale(.98);
  box-shadow:0 12px 24px rgba(16,48,102,.35);
}
.btn-primary,
.btn-outline{
  background:linear-gradient(135deg,var(--button-start),var(--button-end));
  color:#f8fbff;
  border:2px solid var(--button-border);
  box-shadow:0 6px 0 rgba(37,99,235,.18);
  -webkit-font-smoothing:antialiased;
}

.btn-outline{font-weight:700}

.btn-outline:hover,
.btn-outline:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-tertiary:hover,
.btn-tertiary:focus{
  background:linear-gradient(135deg,#76c0ff,#2f6ff2);
  color:#fdfcff;
  border-color:#2e6ef4;
}

.btn-danger:hover,
.btn-danger:focus{
  background:#f87171;
  color:#fff;
  border-color:#b91c1c;
  box-shadow:0 12px 20px rgba(239,68,68,.35);
}

/* Ensure all clickable controls show hand cursor */
button, input[type="submit"], .tile{cursor:pointer}

/* Responsive */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .content{margin-left:0}
  .sidebar{transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:translateX(0)}
  
  /* Prevenir overflow horizontal en todo el sitio */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  .section, .content, .cargar-ml-section, .ml-table-wrapper, .data-table, .data-table tbody, .data-table tr, .data-table td {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .section, .content, .cargar-ml-section {
    overflow-x: hidden !important;
  }
  
  .cargar-ml-section {
    padding: 16px 12px !important;
  }
  
  /* Cargar ML - Mobile */
  .cargar-ml-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .cargar-ml-header-row{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cargar-ml-header-row-top{
    display:flex !important;
  }

  .cargar-ml-header-row-bottom{
    justify-content:flex-start !important;
  }
  
  .cargar-ml-actions {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  
  .ml-search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block;
    margin: 0 !important;
  }

  .cargar-ml-actions-row,
  .cargar-ml-stock-row,
  .cargar-ml-actions-row > *,
  .cargar-ml-stock-row > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  .cargar-ml-actions > div {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    margin: 0 !important;
  }
  
  .cargar-ml-actions .btn {
    margin: 0 !important;
    flex: 1;
    min-width: 0;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  
  /* Tabla responsive - ELIMINAR scroll horizontal */
  .ml-table-wrapper {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Convertir tabla en tarjetas verticales */
  .data-table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    font-size: 12px !important;
  }
  
  .cargar-ml-section .data-table {
    min-width: 0 !important;
  }
  
  .data-table thead {
    display: none; /* Ocultar encabezados en móvil */
  }
  
  .data-table tbody {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  
  .data-table tr {
    display: block;
    margin-bottom: 16px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible;
    box-sizing: border-box !important;
  }
  
  .data-table td {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 8px 0 !important;
    border: none;
    text-align: left !important;
    font-size: 13px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
    hyphens: auto !important;
  }
  
  .data-table td div,
  .data-table td p {
    max-width: 100% !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .data-table td span {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  
  /* Separador visual entre celdas */
  .data-table td + td {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px !important;
  }
  
  /* NO mostrar etiquetas para Producto y SKU (ya tienen contenido auto-descriptivo) */
  .data-table td:nth-child(1):before,
  .data-table td:nth-child(2):before {
    content: none;
  }
  
  /* SÍ mostrar etiquetas para cuentas ML (a partir de la 3ra columna) */
  .data-table td.ml-account-col {
    white-space: normal !important;
    text-align: left !important;
  }
  
  .data-table td.ml-account-col:before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .data-table th,
  .data-table td {
    font-size: 12px !important;
  }
  
  .ml-product-name {
    font-size: 14px !important;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  
  .ml-product-description {
    font-size: 11px !important;
    max-width: 100% !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4;
    white-space: normal !important;
    display: block !important;
  }
  
  .sku-pill {
    font-size: 10px !important;
    padding: 3px 8px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    display: inline-block !important;
  }
  
  .ml-status {
    font-size: 16px !important;
  }
  
  /* Modal responsive */
  .ml-modal-dialog {
    width: 95% !important;
    max-width: 95% !important;
    margin: 20px auto !important;
  }
  
  .ml-modal-header h2 {
    font-size: 18px !important;
  }
  
  .ml-modal-account-option {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px !important;
  }
  
  .ml-modal-account-name {
    font-size: 14px !important;
  }
  
  .ml-modal-account-alias {
    font-size: 12px !important;
  }
  
  .ml-modal-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .ml-modal-footer .btn {
    width: 100% !important;
  }
  
  /* Filtros responsive */
  .ml-filter-row th {
    padding: 6px 4px !important;
  }
  
  .btn-filtrar-sin,
  .btn-filtrar-todos {
    font-size: 10px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
  }

  /* ----- Página Resumen (Revisión antes de publicar) ----- */
  .ml-resumen-section {
    padding: 16px 12px !important;
    overflow-x: hidden !important;
  }
  
  .ml-resumen-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 100%;
  }

  .ml-resumen-header > div:first-child h1 {
    font-size: 18px;
    margin: 0 0 6px 0;
    word-wrap: break-word;
  }

  .ml-resumen-subtitle {
    font-size: 13px;
  }

  .ml-resumen-alias {
    display: block;
    margin-top: 2px;
    font-size: 11px;
  }

  .ml-resumen-actions {
    width: 100%;
  }

  .ml-resumen-actions .btn {
    width: 100%;
    font-size: 14px;
    padding: 10px 16px;
  }

  /* Tabla de formularios */
  .ml-resumen-table-wrapper {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto;
    max-width: 100% !important;
    width: 100% !important;
  }

  .ml-resumen-table {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    display: block;
  }

  .ml-resumen-table tbody {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .ml-atributos-row {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 16px;
    box-sizing: border-box;
  }

  .ml-atributos-row td {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  /* Formulario del producto */
  .ml-atributos-form {
    padding: 12px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }

  .ml-atributos-header {
    padding: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 8px;
    margin-bottom: 16px;
    max-width: 100%;
    word-wrap: break-word;
  }

  .ml-atributos-header h3 {
    font-size: 15px;
    margin: 0 0 6px 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .ml-atributos-header a {
    font-size: 12px;
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* Grid de datos editables */
  .ml-atributos-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .ml-dato-editable {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ml-dato-editable--titulo {
    margin-bottom: 8px;
  }

  .label {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
  }

  .ml-dato-input {
    width: 100%;
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
  }

  .ml-dato-note {
    font-size: 11px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
  }

  .ml-title-counter {
    font-size: 11px;
    color: #475569;
    margin-top: 2px;
  }

  /* Fila de sincronización (checkboxes + inventario) */
  .ml-sync-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .ml-sync-left {
    width: 100%;
    flex: 1 1 auto !important;
  }

  .ml-sync-cbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ml-sync-cbs label {
    font-size: 14px;
    padding: 8px;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
  }

  .ml-sync-right {
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-left: 0 !important;
  }

  .ml-sync-right select {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Descripción del producto */
  .ml-product-description {
    margin: 16px 0 !important;
  }

  .ml-product-description textarea {
    min-height: 120px !important;
    font-size: 13px;
    line-height: 1.5;
  }

  /* Imágenes */
  .ml-imagenes-section {
    margin: 16px 0 !important;
  }

  .ml-imagenes-controls {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .ml-imagenes-add-input {
    width: 100% !important;
    flex: none !important;
    font-size: 13px;
  }

  .ml-imagenes-add-btn,
  .ml-imagenes-upload-btn {
    width: 100%;
    font-size: 14px;
    padding: 10px 12px;
  }

  .ml-imagenes-count {
    font-size: 13px !important;
    text-align: center;
  }

  .ml-imagenes-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .ml-img-item img {
    height: 80px !important;
  }

  .ml-img-remove {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 18px !important;
  }

  .ml-imagenes-empty {
    font-size: 13px !important;
    padding: 16px 8px;
  }

  /* Categoría */
  .ml-categoria-section {
    margin: 16px 0;
  }

  .ml-categoria-editor {
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
  }

  .ml-categoria-current {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
  }

  .ml-categoria-selected {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ml-categoria-selected-name {
    font-size: 14px;
    word-break: break-word;
  }

  .ml-categoria-selected-id,
  .ml-categoria-selected-domain {
    font-size: 11px;
  }

  .ml-categoria-selected-path {
    font-size: 11px;
    word-break: break-word;
  }

  .ml-categoria-current > div:last-child {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .ml-categoria-apply-all,
  .ml-categoria-clear {
    width: 100%;
    font-size: 14px;
    padding: 10px 12px;
  }

  .ml-categoria-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }

  .ml-categoria-crumb {
    font-size: 12px;
    padding: 6px 10px;
  }

  .ml-categoria-list {
    max-height: 280px;
    overflow-y: auto;
  }

  .ml-categoria-list-item {
    font-size: 13px;
    padding: 12px;
    min-height: 48px;
  }

  .ml-categoria-list-item-name {
    font-size: 13px;
    line-height: 1.3;
  }

  .ml-categoria-list-item-meta {
    font-size: 10px;
  }

  .ml-categoria-list-item-arrow {
    font-size: 18px;
  }

  .ml-categoria-help {
    font-size: 12px;
    margin: 8px 0 0 0;
  }

  /* Atributos ML */
  .ml-atributos-list {
    margin: 16px 0;
  }

  .ml-atributo-item {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 8px;
  }

  .ml-atributo-head {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .ml-atributo-nombre,
  .ml-atributo-id {
    font-size: 13px;
  }

  .ml-atributo-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .ml-atributo-badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  .ml-atributo-inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ml-atributo-select,
  .ml-atributo-text {
    width: 100%;
    font-size: 14px;
    padding: 10px 12px;
  }

  .ml-atributo-help {
    font-size: 11px;
    margin: 4px 0 0 0;
  }

  .ml-atributos-vacio {
    font-size: 13px;
    padding: 16px 12px;
  }

  /* Acciones del formulario */
  .ml-atributos-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid #e2e8f0;
  }

  .ml-atributos-actions .ml-dato-editable {
    margin-bottom: 12px;
  }

  .ml-acciones-botones {
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .ml-acciones-botones .btn {
    width: 100%;
    font-size: 15px;
    padding: 12px 16px;
    min-height: 48px;
  }

  /* Modal de aplicar categoría */
  .ml-modal-dialog {
    width: 95% !important;
    max-width: 95% !important;
    margin: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  .ml-modal-header {
    padding: 16px;
  }

  .ml-modal-header h3 {
    font-size: 16px;
  }

  .ml-modal-close {
    width: 32px;
    height: 32px;
    font-size: 24px;
  }

  .ml-modal-body {
    padding: 16px;
    font-size: 13px;
  }

  .ml-apply-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .ml-apply-actions .btn {
    width: 100%;
    font-size: 14px;
  }

  .ml-apply-list {
    max-height: 240px !important;
    padding: 12px !important;
  }

  .ml-apply-list label {
    font-size: 13px;
    padding: 8px 4px;
  }

  .ml-modal-footer {
    padding: 16px;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .ml-modal-footer .btn {
    width: 100%;
    font-size: 15px;
    padding: 12px 16px;
  }

  /* Nota final */
  .ml-resumen-note {
    font-size: 13px;
    padding: 16px 12px;
    margin: 20px 0;
    line-height: 1.5;
  }
}