/*
  NEXUS — Module Skin v10 (Light / Executive)
  ------------------------------------------------
  Styles legacy pages loaded in iframes (embed=1) and standalone.
  Goal: light tones + high legibility; DO NOT break logic.
*/

:root{
  /* Reuse shell variables when loaded standalone. If not present, keep safe defaults. */
  --nx-text: var(--nx-text, #0b1220);
  --nx-text2: var(--nx-text2, #334155);
  --nx-muted: var(--nx-muted, #64748b);
  --nx-border2: var(--nx-border2, rgba(15,23,42,.10));
  --nx-surface: var(--nx-surface, rgba(255,255,255,.88));
  --nx-primary: var(--nx-primary, #2563eb);
  --nx-accent: var(--nx-accent, #7c3aed);
  --nx-shadow: var(--nx-shadow, 0 18px 55px rgba(2,6,23,.12));
  --nx-shadow2: var(--nx-shadow2, 0 10px 26px rgba(2,6,23,.10));
  --nx-shadowCtl: 0 8px 18px rgba(2,6,23,.10);
  --nx-shadowCtl2: 0 12px 28px rgba(2,6,23,.12);
}

/* Embedded pages should inherit the shell background */
body.embed{ background: transparent !important; color: var(--nx-text) !important; }
body.embed::before, body.embed::after{ display:none !important; }

/* Base typography */
h1,h2,h3{ margin:0; letter-spacing:-.02em; }
p{ color: var(--nx-text2); }

/* Generic page wrapper used by most modules */
.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 18px 28px;
}

/* Header area (used in cierre/cortes/calculos etc.) */
.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.title h1{ font-size:40px; font-weight:900; }
.pill{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--nx-border2);
  background: rgba(255,255,255,.82);
  color: var(--nx-text2);
  font-weight:700;
  margin-left:10px;
}
.muted{ color: var(--nx-muted) !important; font-weight:600; }

/* Card blocks */
.card, .box, .panel, .section{
  background: var(--nx-surface);
  border: 1px solid var(--nx-border2);
  border-radius: 18px;
  box-shadow: var(--nx-shadow);
  padding: 16px;
}

/* Forms */
label{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(15,23,42,.70);
  margin: 10px 0 6px;
}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--nx-border2);
  background: rgba(255,255,255,.96);
  color: var(--nx-text);
  outline:none;
  box-shadow: var(--nx-shadowCtl);
}
input:hover,select:hover,textarea:hover{ box-shadow: var(--nx-shadowCtl2); border-color: rgba(37,99,235,.18); }

select, option, optgroup{ color: var(--nx-text); background:#fff; }
input::placeholder, textarea::placeholder{ color: rgba(100,116,139,.85); }
input:focus,select:focus,textarea:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14), var(--nx-shadowCtl2);
}


/* Buttons (legacy modules often use .btn, .btn-primary, etc.) */
button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--nx-border2);
  background:#fff;
  color:var(--nx-text);
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  box-shadow: var(--nx-shadowCtl);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

button:hover, .btn:hover{ transform: translateY(-1px); box-shadow: var(--nx-shadowCtl2); border-color: rgba(37,99,235,.18); }
.btn-primary, .primary, button.primary{
  border-color:transparent;
  background: linear-gradient(90deg, var(--nx-primary), var(--nx-accent));
  color:#fff;
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
}
.btn-primary:hover, .primary:hover{ box-shadow: 0 18px 40px rgba(37,99,235,.20); }
.btn-danger, .danger{
  background:#fff;
  border-color: rgba(239,68,68,.25);
  color:#991b1b;
}

/* Tables (do NOT style image-render tables) */
body:not(.nx-images) table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--nx-border2);
  background: rgba(255,255,255,.92);
}
body:not(.nx-images) thead th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: rgba(100,116,139,.95);
  text-align:left;
  padding:12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
body:not(.nx-images) tbody td{
  padding:12px;
  border-bottom:1px solid rgba(15,23,42,.06);
  color: var(--nx-text2);
}
body:not(.nx-images) tbody tr:hover td{ background: rgba(37,99,235,.04); }

/* ------- Images module: keep layout preview colors intact ------- */
body.nx-images{
  color: var(--nx-text) !important;
}
body.nx-images .imgTitle{ color: var(--nx-text) !important; font-weight:900; }

/* UI containers in images */
body.nx-images .canvasWrap{
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: var(--nx-shadow2) !important;
  border-radius: 18px !important;
}
body.nx-images .drawerL{
  background: rgba(255,255,255,.90) !important;
  border-right: 1px solid rgba(15,23,42,.08) !important;
}
body.nx-images .drawerL .head{
  background: rgba(255,255,255,.90) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
body.nx-images .drawerL .head .sub{ color: rgba(100,116,139,.95) !important; }
body.nx-images .drawerL .close{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.85) !important;
}
body.nx-images .drawerL .close:hover{ background: rgba(37,99,235,.06) !important; }
body.nx-images .colorBlock{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
body.nx-images .hexHint{ color: rgba(100,116,139,.95) !important; }

/* IMPORTANT: Do NOT override preview/table colors inside images renderer */
body.nx-images .tableWrap table,
body.nx-images .canvas table{
  background: transparent !important;
  border: 0 !important;
}


/* Details / Summary (used heavily in Imágenes panel) */
details{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 10px 12px;
}
details + details{ margin-top: 10px; }
summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
  color: var(--nx-text);
}
summary::-webkit-details-marker{ display:none; }
details[open] summary{ margin-bottom: 10px; }
details:hover{ box-shadow: var(--nx-shadow2); }

body.nx-images details{
  background: rgba(255,255,255,.90);
}
body.nx-images summary .muted{
  color: rgba(100,116,139,.95) !important;
  font-weight:700 !important;
}

button:disabled, .btn:disabled, .btn.disabled{
  pointer-events:none;
  opacity:1;
  background: rgba(255,255,255,.86);
  color: rgba(15,23,42,.45);
  border-color: rgba(15,23,42,.12);
  box-shadow: var(--nx-shadowCtl);
}


/* ============================================================
   UI v11 — Thin Black Outline for legacy modules (keep shadows)
   Also ensure controls remain readable.
   ============================================================ */

:root{
  --nx-outline: rgba(2,6,23,.28);
  --nx-outline2: rgba(2,6,23,.20);
}

/* Controls */
input, select, textarea{
  border-color: var(--nx-outline2) !important;
}

/* Buttons */
button, .btn{
  border-color: var(--nx-outline2) !important;
  color: var(--nx-text) !important;
}

/* Cards / panels */
.card, .box, .panel, .section, details{
  border-color: var(--nx-outline2) !important;
}

/* Keep images renderer intact (do not override its internal colors) */
body.nx-images .tableWrap table,
body.nx-images .canvas table{
  border: 0 !important;
}