/* MiniPymes UX 2026 - capa visual compatible con el HTML ASP existente */
:root {
  --mp-primary: #5b3cc4;
  --mp-primary-dark: #452aa3;
  --mp-primary-soft: #eee9ff;
  --mp-accent: #1f9d77;
  --mp-danger: #d9485f;
  --mp-warning: #d99a22;
  --mp-bg: #f5f7fb;
  --mp-surface: #ffffff;
  --mp-text: #202536;
  --mp-muted: #687086;
  --mp-border: #dfe3ec;
  --mp-shadow: 0 10px 30px rgba(31, 37, 54, .09);
  --mp-radius: 12px;
  --mp-radius-sm: 8px;
  --mp-header-h: 72px;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%; margin: 0; padding: 0 0 36px;
  color: var(--mp-text); background: var(--mp-bg);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: var(--mp-primary); text-decoration: none; transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
a:hover { color: var(--mp-primary-dark); }
img { max-width: 100%; height: auto; }
header {
  position: sticky; top: 0; z-index: 1000; min-height: var(--mp-header-h);
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--mp-border);
  box-shadow: 0 4px 16px rgba(31,37,54,.06); backdrop-filter: blur(12px);
}
header .contenedor { width: min(1420px, calc(100% - 32px)); min-height: var(--mp-header-h); margin: 0 auto; display: flex; align-items: center; gap: 24px; }
header h1 { margin: 0; line-height: 0; flex: 0 0 auto; }
header h1 a { display: inline-flex; align-items: center; }
header h1 img { max-height: 48px; width: auto; }
#menu-bar { position: absolute; opacity: 0; pointer-events: none; }
header .icon-menu { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--mp-radius-sm); align-items: center; justify-content: center; background: var(--mp-primary-soft); color: var(--mp-primary); cursor: pointer; }
header .menu { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
header .menu > a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px; border-radius: 9px; color: #3d4354; font-weight: 600; white-space: nowrap; }
header .menu > a:hover, header .menu > a:focus-visible { color: var(--mp-primary); background: var(--mp-primary-soft); outline: none; }
header .menu > a:last-child { color: var(--mp-danger); background: #fff0f2; }
main, section, .main, .contenido { max-width: 1420px; margin-left: auto; margin-right: auto; }
body > form, body > div:not(header):not(script), body > table { max-width: 1420px; }
form { margin-left: auto; margin-right: auto; }
input, select, textarea, button { font: inherit; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], input[type="url"], select, textarea, #MyInput {
  min-height: 42px; max-width: 100%; padding: 9px 12px; color: var(--mp-text); background: var(--mp-surface);
  border: 1px solid #cfd5e2; border-radius: var(--mp-radius-sm); outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus, #MyInput:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 3px rgba(91,60,196,.14); }
input::placeholder, textarea::placeholder { color: #949bad; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mp-primary); vertical-align: middle; }
label, #MyLabel, #MyLabelInLine { color: #4d5568; font-weight: 650; }
button, input[type="button"], input[type="submit"], input[type="reset"], #BotonBlue, #BotonGreen, #BotonRed, #BotonYellow, #BotonGuardar {
  min-height: 42px; padding: 9px 16px; border: 0; border-radius: var(--mp-radius-sm); cursor: pointer;
  font-weight: 700; color: #fff; background: var(--mp-primary); box-shadow: 0 5px 14px rgba(91,60,196,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, #BotonBlue:hover, #BotonGuardar:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(91,60,196,.24); filter: brightness(.98); }
button:disabled, input:disabled { opacity: .56; cursor: not-allowed; transform: none; box-shadow: none; }
#BotonGreen { background: var(--mp-accent); box-shadow: 0 5px 14px rgba(31,157,119,.18); }
#BotonRed { background: var(--mp-danger); box-shadow: 0 5px 14px rgba(217,72,95,.18); }
#BotonYellow { color: #3a2b00; background: #f2bf4c; box-shadow: 0 5px 14px rgba(217,154,34,.18); }
#Deshacer { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; margin: 0 8px 0 0; border-radius: var(--mp-radius-sm); color: var(--mp-primary); background: var(--mp-primary-soft); }
#Nuevo { transition: transform .16s ease, color .16s ease; }
a:hover #Nuevo { transform: translateY(-2px); }
#MyDivRecuadroBlack, #MyDivRecuadroBlue, #MyDivRecuadroWhite, #MyDivRecuadro {
  border: 1px solid var(--mp-border) !important; border-radius: var(--mp-radius) !important; background: var(--mp-surface) !important;
  box-shadow: var(--mp-shadow); overflow: hidden;
}
#MyDivRecuadroInLineGray, #MyDivRecuadroInLineRed, #MyDivRecuadroInLineBlack, #MyDivRecuadroInLineWhite {
  display: inline-flex; align-items: center; justify-content: center; min-width: 74px; min-height: 54px; margin: 4px;
  padding: 8px 11px; border: 1px solid var(--mp-border) !important; border-radius: 10px !important; vertical-align: middle;
  background: var(--mp-surface) !important; box-shadow: 0 4px 12px rgba(31,37,54,.06);
}
#MyDivRecuadroInLineGray:hover, #MyDivRecuadroInLineBlack:hover, #MyDivRecuadroInLineWhite:hover { border-color: #c9bdf4 !important; box-shadow: 0 8px 18px rgba(91,60,196,.12); transform: translateY(-1px); }
#MyDivRecuadroInLineRed { border-color: #f1c7ce !important; background: #fff6f7 !important; }
#MyDivRecuadroInLineGray a, #MyDivRecuadroInLineRed a, #MyDivRecuadroInLineBlack a, #MyDivRecuadroInLineWhite a { display: inline-flex; align-items: center; justify-content: center; width: 100%; color: #40475a; font-weight: 700; }
#MyDivRecuadroInLineRed a { color: var(--mp-danger); }
.menuContainer, .menuContainerCopy, .menuContainerCtrlNavegador {
  width: min(1420px, calc(100% - 32px)); margin: 18px auto 12px; padding: 10px 12px;
  border: 1px solid var(--mp-border); border-radius: var(--mp-radius); background: var(--mp-surface); box-shadow: 0 6px 20px rgba(31,37,54,.06);
}
#scroll, .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; border-radius: var(--mp-radius); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--mp-text); background: var(--mp-surface); }
th { position: sticky; top: var(--mp-header-h); z-index: 5; padding: 12px 10px; color: #fff; background: #40316f; font-size: 13px; letter-spacing: .01em; text-align: left; white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid #edf0f5; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #faf9ff; }
hr { border: 0; border-top: 1px solid var(--mp-border); margin: 22px 0; }
.red { display: inline-flex; min-width: 21px; height: 21px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: var(--mp-danger); font-size: 12px; }
fieldset { border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 18px; background: var(--mp-surface); }
legend { padding: 0 8px; color: var(--mp-primary); font-weight: 800; }
.mp-ux-loading { cursor: progress; }
.mp-ux-loading::after { content: ""; position: fixed; inset: 0; z-index: 9999; background: rgba(245,247,251,.58); backdrop-filter: blur(2px); pointer-events: all; }
@media (max-width: 980px) {
  :root { --mp-header-h: 64px; }
  header .contenedor { width: calc(100% - 22px); min-height: var(--mp-header-h); }
  header h1 img { max-height: 42px; }
  header .icon-menu { display: inline-flex; }
  header .menu { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: none; margin: 0; padding: 10px 12px 14px; background: #fff; border-bottom: 1px solid var(--mp-border); box-shadow: 0 14px 24px rgba(31,37,54,.10); }
  #menu-bar:checked ~ .menu { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  header .menu > a { justify-content: center; min-height: 44px; background: #f8f7fc; }
  .menuContainer, .menuContainerCopy, .menuContainerCtrlNavegador { width: calc(100% - 20px); margin-top: 12px; }
  th { top: var(--mp-header-h); }
}
@media (max-width: 640px) {
  body { font-size: 14px; padding-bottom: 22px; }
  #menu-bar:checked ~ .menu { grid-template-columns: 1fr; }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], input[type="url"], select, textarea, #MyInput { width: 100% !important; min-width: 0 !important; }
  button, input[type="button"], input[type="submit"], input[type="reset"], #BotonBlue, #BotonGreen, #BotonRed, #BotonYellow, #BotonGuardar { min-height: 44px; }
  #MyDivRecuadroInLineGray, #MyDivRecuadroInLineRed, #MyDivRecuadroInLineBlack, #MyDivRecuadroInLineWhite { min-width: 60px; min-height: 50px; margin: 3px; }
  fieldset { padding: 13px; }
  td, th { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.mp-ux-submitting { opacity: .72; cursor: progress !important; }