/* Maquetas de producto: recreaciones en HTML de las pantallas reales.
   Clases prefijadas mk- para aislarlas del resto de la web. */
/* ==========================================================================
   TimeAlly Workforce · maquetas de producto para la web comercial
   Todo el CSS va prefijado .mk- para poder incrustarlo sin colisiones.
   Tokens tomados de apps/web/src/app/globals.css (tema claro).
   ========================================================================== */

.mk-shot, .mk-shot *, .mk-h2 { box-sizing: border-box; }

.mk-shot {
  /* --- tokens de marca --- */
  --mk-ink: 19 41 77;
  --mk-accent: 124 58 237;
  --mk-pink: 236 18 121;
  --mk-bg: #F8F9FB;
  --mk-surface: #FFFFFF;
  --mk-border: #E5E7EB;
  --mk-grad: linear-gradient(90deg, #EC1279 0%, #7C3AED 100%);
  --mk-grad-135: linear-gradient(135deg, #EC1279 0%, #7C3AED 100%);
  --mk-man: #1E7FC4;   /* turno Mañana */
  --mk-tar: #7C3AED;   /* turno Tarde  */
  --mk-ref: #EC1279;   /* turno Refuerzo */
  --mk-ok: #16A34A;
  --mk-warn: #D97706;
  --mk-bad: #DC2626;
  --mk-f-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mk-f-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mk-f-mono: "IBM Plex Mono", ui-monospace, monospace;

  position: relative;
  max-width: 1120px;
  margin: 0 auto 56px;
  border: 1px solid var(--mk-border);
  border-radius: 14px;
  background: var(--mk-surface);
  box-shadow: 0 10px 30px -12px rgb(19 41 77 / 0.28), 0 2px 8px -3px rgb(19 41 77 / 0.14);
  overflow: hidden;
  font-family: var(--mk-f-body);
  color: rgb(var(--mk-ink));
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* ---------- marco de aplicación ---------- */
.mk-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: #FCFCFD;
  border-bottom: 1px solid var(--mk-border);
}
.mk-dots { display: inline-flex; gap: 6px; flex: none; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E1E4EA; display: block; }
.mk-dots i:nth-child(1) { background: #F3C7D6; }
.mk-dots i:nth-child(2) { background: #E7D8FB; }
.mk-dots i:nth-child(3) { background: #DDE2EA; }
.mk-crumb {
  font-size: 11.5px; color: rgb(var(--mk-ink) / 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-crumb b { color: rgb(var(--mk-ink) / 0.3); font-weight: 400; margin: 0 5px; }
.mk-crumb em { font-style: normal; color: rgb(var(--mk-ink) / 0.85); font-weight: 500; }
.mk-chrome-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.mk-wm { font-family: var(--mk-f-head); font-weight: 700; font-size: 12px; letter-spacing: -0.01em; }
.mk-wm span:first-child { color: rgb(var(--mk-ink)); }
.mk-wm span:last-child {
  background: var(--mk-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-ava {
  width: 24px; height: 24px; border-radius: 50%; background: var(--mk-grad-135);
  color: #fff; font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.mk-body { background: var(--mk-bg); padding: 18px; }

/* ---------- piezas comunes ---------- */
.mk-card {
  background: var(--mk-surface); border: 1px solid var(--mk-border);
  border-radius: 12px; box-shadow: 0 4px 14px -8px rgb(19 41 77 / 0.35);
}
.mk-h { font-family: var(--mk-f-head); font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.mk-sub { font-size: 11.5px; color: rgb(var(--mk-ink) / 0.5); margin: 2px 0 0; }
.mk-mono { font-family: var(--mk-f-mono); font-variant-numeric: tabular-nums; }
.mk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 8px; padding: 7px 13px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--mk-border); background: var(--mk-surface); color: rgb(var(--mk-ink));
  white-space: nowrap; cursor: default;
}
.mk-btn-ink { background: rgb(var(--mk-ink)); border-color: rgb(var(--mk-ink)); color: #fff; font-weight: 600; }
/* Botón primario del producto: planificar con la IA. */
.mk-btn-ai {
  background: var(--mk-grad); border-color: transparent; color: #fff; font-weight: 600;
  padding: 9px 16px; font-size: 13px; border-radius: 9px;
  box-shadow: 0 6px 18px -6px rgb(124 58 237 / 0.85), 0 2px 5px -2px rgb(236 18 121 / 0.5);
}
.mk-btn-ai .mk-i { width: 15px; height: 15px; }
.mk-btn-sq { padding: 7px 9px; color: rgb(var(--mk-ink) / 0.6); }
.mk-i { width: 13px; height: 13px; flex: none; display: block; }
.mk-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.mk-p-ok { background: #DCFCE7; color: #15803D; }
.mk-p-warn { background: #FEF3C7; color: #92400E; }
.mk-p-bad { background: #FEE2E2; color: #B91C1C; }
.mk-p-acc { background: rgb(124 58 237 / 0.10); color: rgb(var(--mk-accent)); }
.mk-p-pink { background: rgb(236 18 121 / 0.10); color: #BE0F63; }
.mk-p-gray { background: #F1F3F7; color: rgb(var(--mk-ink) / 0.6); }
.mk-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mk-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk-grow { flex: 1 1 auto; min-width: 0; }

/* título auxiliar, se retira al integrar */
.mk-h2 {
  max-width: 1120px; margin: 0 auto 10px; font-family: "Space Grotesk", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #8A93A3;
}

/* ==========================================================================
   1 · CUADRANTE SEMANAL (GANTT)
   ========================================================================== */
#mk-gantt .mk-body { padding: 16px; }
.mk-gt-frame {
  border-radius: 12px; background: var(--mk-surface); border: 1px solid var(--mk-border);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #EC1279, #7C3AED) 1;
  box-shadow: 0 4px 16px -9px rgb(19 41 77 / 0.4);
  padding: 14px;
}
.mk-gt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.mk-gt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-left: auto; }
.mk-gt-title { font-size: 15px; }
.mk-nav { display: inline-flex; align-items: center; gap: 4px; }
.mk-nav-date { font-size: 12.5px; color: rgb(var(--mk-ink) / 0.8); padding: 0 4px; white-space: nowrap; }
.mk-seg { display: inline-flex; border: 1px solid var(--mk-border); border-radius: 8px; overflow: hidden; }
.mk-seg span { padding: 6px 11px; font-size: 12px; color: rgb(var(--mk-ink) / 0.6); }
.mk-seg span.mk-on { background: var(--mk-grad); color: #fff; font-weight: 600; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 11px; color: rgb(var(--mk-ink) / 0.6); }
.mk-lg { display: inline-flex; align-items: center; gap: 6px; }
.mk-lg i { width: 18px; height: 9px; border-radius: 3px; display: block; flex: none; }
.mk-lg-man i { background: var(--mk-man); }
.mk-lg-tar i { background: var(--mk-tar); }
.mk-lg-ref i { background: var(--mk-ref); }
.mk-lg-dra i { background: repeating-linear-gradient(90deg, #C9CFDA 0 4px, transparent 4px 7px); border: 1px dashed #B9C0CC; }
.mk-lg-abs i { background: rgb(124 58 237 / 0.14); border: 1px dashed rgb(124 58 237 / 0.5); }
.mk-lg-ai i { background: var(--mk-tar); outline: 1.5px solid rgb(124 58 237 / .85); outline-offset: 1.5px; }
.mk-lg-ai { color: rgb(var(--mk-accent)); font-weight: 600; }

.mk-gt-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -2px; padding: 0 2px; }
.mk-gt-grid { min-width: 900px; }
.mk-gt-row, .mk-gt-hrow {
  display: grid;
  grid-template-columns: 186px repeat(7, minmax(86px, 1fr)) 66px;
  align-items: stretch;
}
.mk-gt-hrow {
  border-bottom: 1px solid var(--mk-border);
  background: linear-gradient(180deg, rgb(124 58 237 / 0.06) 0%, transparent 100%);
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: rgb(var(--mk-ink) / 0.5);
}
.mk-gt-hrow > div { padding: 8px 4px 6px; text-align: center; }
.mk-gt-hrow > div:first-child { text-align: left; padding-left: 2px; }
.mk-gt-hrow > div:last-child { text-align: right; padding-right: 2px; }
.mk-gt-hrow .mk-wend { color: rgb(var(--mk-ink) / 0.32); }
.mk-today-pill {
  display: inline-block; border-radius: 999px; padding: 2px 8px;
  background: var(--mk-grad); color: #fff; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  box-shadow: 0 3px 9px -3px rgb(124 58 237 / 0.7);
}
.mk-gt-row { border-bottom: 1px solid var(--mk-border); transition: background-color .15s ease; }
.mk-gt-row:last-child { border-bottom: 0; }
.mk-gt-row:hover { background: rgb(124 58 237 / 0.04); }
.mk-who { display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 2px; min-width: 0; }
.mk-who .mk-ava2 {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--mk-grad-135); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px -3px rgb(124 58 237 / 0.6);
}
.mk-who p { margin: 0; min-width: 0; }
.mk-who .mk-n { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-who .mk-r { display: block; font-size: 10.5px; line-height: 1.3; color: rgb(var(--mk-ink) / 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cell { display: flex; align-items: center; padding: 6px 3px; position: relative; }
.mk-cell.mk-today { background: linear-gradient(180deg, rgb(236 18 121 / 0.09) 0%, rgb(124 58 237 / 0.05) 60%, transparent 100%); }
.mk-net { display: flex; align-items: center; justify-content: flex-end; padding-right: 2px; }
.mk-net span {
  font-family: var(--mk-f-mono); font-size: 10.5px; font-weight: 500;
  background: rgb(124 58 237 / 0.10); color: rgb(var(--mk-ink));
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}

.mk-bar {
  flex: 1 1 auto; min-width: 0; height: 21px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden;
  background-image: linear-gradient(135deg, rgb(255 255 255 / .28) 0%, rgb(255 255 255 / .06) 45%, rgb(0 0 0 / .16) 100%);
  box-shadow: 0 2px 5px -2px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .28);
  text-shadow: 0 1px 1px rgb(0 0 0 / .35);
  letter-spacing: -0.01em;
}
.mk-b-man { background-color: var(--mk-man); }
.mk-b-tar { background-color: var(--mk-tar); }
.mk-b-ref { background-color: var(--mk-ref); }
.mk-b-draft {
  background-image: none; color: rgb(var(--mk-ink) / 0.72); text-shadow: none;
  box-shadow: none; background-color: #fff;
  border: 1.5px dashed currentColor; opacity: .95;
}
.mk-b-draft.mk-b-man { color: var(--mk-man); background-color: rgb(30 127 196 / .07); }
.mk-b-draft.mk-b-tar { color: var(--mk-tar); background-color: rgb(124 58 237 / .07); }
.mk-b-draft.mk-b-ref { color: var(--mk-ref); background-color: rgb(236 18 121 / .07); }
/* Turno propuesto por la IA: anillo violeta de marca + chispa sobre la barra. */
.mk-b-ai { outline: 1.5px solid rgb(124 58 237 / .85); outline-offset: 1.5px; }
.mk-bar .mk-sp { width: 9px; height: 9px; flex: none; margin-right: 4px; }
.mk-bar .mk-sp path { fill: #fff; }

/* Globo de motivo anclado a un turno propuesto. */
.mk-gt-row.mk-hasnote { position: relative; z-index: 4; }
.mk-note-card {
  position: absolute; bottom: calc(100% + 10px); right: 58px; width: 236px; z-index: 20;
  background: #fff; border: 1px solid rgb(124 58 237 / .38); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 14px 30px -14px rgb(19 41 77 / .8);
  font-size: 11px; line-height: 1.5; color: rgb(var(--mk-ink) / .78); text-align: left;
  white-space: normal;
}
.mk-note-card::after {
  content: ""; position: absolute; bottom: -5px; right: 16px; width: 9px; height: 9px;
  background: #fff; border-right: 1px solid rgb(124 58 237 / .38); border-bottom: 1px solid rgb(124 58 237 / .38);
  transform: rotate(45deg);
}
.mk-note-card .mk-nt {
  display: flex; align-items: center; gap: 5px; margin: 0 0 4px;
  font-family: var(--mk-f-head); font-size: 11px; font-weight: 600; color: rgb(var(--mk-accent));
}
.mk-note-card .mk-nt .mk-i { width: 12px; height: 12px; }
.mk-note-card p { margin: 0; }
.mk-note-card b { font-weight: 600; color: rgb(var(--mk-ink)); }
.mk-note-card .mk-na { display: flex; gap: 6px; margin-top: 9px; }
.mk-note-card .mk-na .mk-btn { padding: 4px 10px; font-size: 10.5px; }

.mk-abs {
  flex: 1 1 auto; min-width: 0; height: 21px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  background-image: linear-gradient(90deg, rgb(236 18 121 / .14) 0%, rgb(124 58 237 / .18) 100%);
  border: 1px dashed rgb(124 58 237 / .45); color: rgb(var(--mk-accent));
}
.mk-free {
  flex: 1 1 auto; height: 21px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 500; color: rgb(var(--mk-ink) / 0.28);
  border: 1px dashed #E1E5EC;
}
.mk-gt-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--mk-border);
  font-size: 11.5px; color: rgb(var(--mk-ink) / 0.6);
}
.mk-gt-foot b { font-family: var(--mk-f-mono); font-weight: 600; color: rgb(var(--mk-ink)); font-size: 12px; }

/* ==========================================================================
   2 · FICHAJE DEL EMPLEADO
   ========================================================================== */
#mk-fichaje .mk-body { padding: 26px 18px 30px; display: flex; justify-content: center; }
.mk-cl-card { width: 100%; max-width: 520px; padding: 26px 26px 22px; text-align: center; }
.mk-cl-hi { font-size: 18px; }
.mk-cl-date { font-size: 12px; color: rgb(var(--mk-ink) / 0.5); margin-top: 3px; text-transform: capitalize; }
.mk-cl-time {
  font-family: var(--mk-f-mono); font-variant-numeric: tabular-nums;
  font-size: 58px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  margin: 18px 0 12px; color: rgb(var(--mk-ink));
}
.mk-cl-time small { font-size: 26px; font-weight: 400; color: rgb(var(--mk-ink) / 0.35); letter-spacing: -0.02em; }
.mk-cl-state {
  display: inline-flex; align-items: center; gap: 7px;
  background: #DCFCE7; color: #15803D; border-radius: 999px;
  padding: 5px 13px; font-size: 12px; font-weight: 600;
}
.mk-live { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; position: relative; flex: none; }
.mk-live::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgb(22 163 74 / .45); animation: mk-ping 2s ease-out infinite;
}
@keyframes mk-ping { 0% { transform: scale(.7); opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
.mk-cl-railwrap { margin: 20px 0 6px; }
.mk-cl-labels { display: flex; justify-content: space-between; font-size: 11px; color: rgb(var(--mk-ink) / 0.55); margin-bottom: 6px; }
.mk-cl-labels b { color: rgb(var(--mk-ink)); font-family: var(--mk-f-mono); font-weight: 600; }
.mk-rail { height: 9px; border-radius: 999px; background: #EEF0F5; overflow: hidden; }
.mk-fill { height: 100%; width: 0; border-radius: 999px; background: var(--mk-grad); transition: width 1.3s cubic-bezier(.22,.8,.3,1); }
.mk-cl-btns { display: flex; gap: 10px; margin-top: 20px; }
.mk-cl-btns > span { flex: 1 1 0; justify-content: center; padding: 13px 10px; font-size: 14px; border-radius: 10px; }
.mk-cl-out { background: rgb(var(--mk-ink)); border-color: rgb(var(--mk-ink)); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px rgb(19 41 77 / .8); }
.mk-cl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mk-border); }
.mk-cl-stats div { text-align: center; }
.mk-cl-stats .mk-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: rgb(var(--mk-ink) / 0.45); }
.mk-cl-stats .mk-v { font-family: var(--mk-f-mono); font-size: 15px; font-weight: 600; margin-top: 3px; }
.mk-cl-stats .mk-v.mk-acc { color: rgb(var(--mk-accent)); }

/* ==========================================================================
   3 · INFORME PARA LA INSPECCIÓN
   ========================================================================== */
#mk-inspeccion .mk-body { padding: 22px; }
.mk-doc { padding: 26px 28px; }
.mk-doc-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; padding-bottom: 16px; border-bottom: 2px solid rgb(var(--mk-ink)); }
.mk-doc-wm { font-family: var(--mk-f-head); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.mk-doc-wm .mk-g { background: var(--mk-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-doc-wm .mk-wf { display: block; font-size: 9px; font-weight: 600; letter-spacing: .3em; color: rgb(var(--mk-ink) / 0.45); margin-top: 5px; }
.mk-doc-kind { text-align: right; margin-left: auto; }
.mk-doc-kind .mk-t { font-family: var(--mk-f-head); font-size: 13px; font-weight: 600; }
.mk-doc-kind .mk-s { font-size: 10.5px; color: rgb(var(--mk-ink) / 0.5); margin-top: 2px; }
.mk-doc-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 0 16px; }
.mk-doc-meta .mk-k { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--mk-ink) / 0.45); }
.mk-doc-meta .mk-v { font-size: 12px; font-weight: 500; margin-top: 2px; }
.mk-doc-meta .mk-v.mk-mono { font-size: 11.5px; }
.mk-doc-tblwrap { overflow-x: auto; }
.mk-doc-tbl { min-width: 520px; }
.mk-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.mk-tbl thead th {
  background: rgb(var(--mk-ink)); color: #fff; text-align: left; font-weight: 600;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px;
}
.mk-tbl thead th:first-child { border-radius: 6px 0 0 6px; }
.mk-tbl thead th:last-child { border-radius: 0 6px 6px 0; }
.mk-tbl tbody td { padding: 7px 10px; border-bottom: 1px solid var(--mk-border); }
.mk-tbl tbody tr:nth-child(even) td { background: #FBFBFD; }
.mk-tbl .mk-num { font-family: var(--mk-f-mono); font-variant-numeric: tabular-nums; }
.mk-tbl .mk-muted { color: rgb(var(--mk-ink) / 0.35); }
.mk-tbl tfoot td { padding: 9px 10px; font-weight: 600; border-top: 2px solid rgb(var(--mk-ink) / 0.8); }
.mk-doc-foot { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--mk-border); }
.mk-sign { flex: 1 1 200px; min-width: 190px; }
.mk-sign .mk-k { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--mk-ink) / 0.45); }
.mk-sign .mk-line { height: 30px; border-bottom: 1px solid rgb(var(--mk-ink) / 0.35); margin-bottom: 5px; }
.mk-sign .mk-w { font-size: 11px; }
.mk-hash {
  flex: 1 1 260px; background: #F6F7FA; border: 1px solid var(--mk-border);
  border-radius: 8px; padding: 10px 12px;
}
.mk-hash .mk-k { display: flex; align-items: center; gap: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--mk-ink) / 0.5); }
.mk-hash .mk-v { font-family: var(--mk-f-mono); font-size: 10.5px; margin-top: 5px; word-break: break-all; color: rgb(var(--mk-ink) / 0.85); }
.mk-hash .mk-n { font-size: 10px; color: rgb(var(--mk-ink) / 0.45); margin-top: 6px; }

/* ==========================================================================
   4 · COPILOTO DE IA
   ========================================================================== */
#mk-copiloto .mk-body { padding: 0; display: flex; min-height: 480px; }
.mk-behind { flex: 1 1 auto; padding: 18px; min-width: 0; opacity: .55; }
.mk-sk { background: #fff; border: 1px solid var(--mk-border); border-radius: 10px; padding: 14px; }
.mk-sk + .mk-sk { margin-top: 12px; }
.mk-sk-t { height: 9px; width: 34%; border-radius: 4px; background: #E3E7EE; }
.mk-sk-r { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.mk-sk-r i { display: block; height: 7px; border-radius: 4px; background: #EDF0F4; }
.mk-sk-r i.a { width: 26px; height: 20px; border-radius: 50%; background: #E8EBF1; flex: none; }
.mk-sk-r i.b { flex: 1 1 auto; }
.mk-sk-r i.c { width: 52px; background: #E3E7EE; flex: none; }
.mk-drawer {
  width: 396px; flex: none; background: #fff; border-left: 1px solid var(--mk-border);
  display: flex; flex-direction: column; box-shadow: -10px 0 26px -18px rgb(19 41 77 / .6);
}
.mk-dw-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--mk-border); }
.mk-dw-head .mk-t { display: flex; align-items: center; gap: 6px; font-family: var(--mk-f-head); font-size: 13px; font-weight: 600; }
.mk-dw-head .mk-t .mk-i { width: 14px; height: 14px; color: rgb(var(--mk-accent)); }
.mk-dw-x { margin-left: auto; font-size: 11.5px; color: rgb(var(--mk-ink) / 0.45); }
.mk-dw-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--mk-border); }
.mk-dw-tabs span { border-radius: 7px; padding: 4px 11px; font-size: 11.5px; font-weight: 500; color: rgb(var(--mk-ink) / 0.55); }
.mk-dw-tabs span.mk-on { background: rgb(124 58 237 / .10); color: rgb(var(--mk-accent)); }
.mk-dw-body { flex: 1 1 auto; padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; }
.mk-msg-u {
  align-self: flex-end; max-width: 88%; background: rgb(var(--mk-ink)); color: #fff;
  border-radius: 10px 10px 3px 10px; padding: 8px 11px; font-size: 12.5px;
}
.mk-msg-a {
  background: var(--mk-bg); border: 1px solid var(--mk-border); border-radius: 10px 10px 10px 3px;
  padding: 11px 12px; font-size: 12.5px;
}
.mk-cand { display: flex; gap: 9px; padding: 7px 0; border-top: 1px solid var(--mk-border); }
.mk-cand:first-of-type { border-top: 0; padding-top: 9px; }
.mk-cand .mk-rank {
  width: 19px; height: 19px; border-radius: 50%; flex: none; margin-top: 1px;
  background: var(--mk-grad-135); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mk-cand .mk-n { font-size: 12.5px; font-weight: 600; }
.mk-cand .mk-n em { font-style: normal; font-weight: 400; color: rgb(var(--mk-ink) / 0.5); font-size: 11px; }
.mk-why { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 4px; }
.mk-why span {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fff; border: 1px solid var(--mk-border); border-radius: 999px;
  padding: 1px 6px; font-size: 9.5px; line-height: 1.5; color: rgb(var(--mk-ink) / 0.65);
}
.mk-why .mk-i { width: 9px; height: 9px; color: var(--mk-ok); }
.mk-plan { border: 1px solid rgb(124 58 237 / .4); border-radius: 9px; background: #fff; padding: 10px; margin-top: 10px; }
.mk-plan .mk-k { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--mk-ink) / 0.5); font-weight: 600; }
.mk-plan ol { margin: 6px 0 0; padding-left: 17px; font-size: 11.5px; color: rgb(var(--mk-ink) / 0.72); }
.mk-plan ol li + li { margin-top: 3px; }
.mk-plan .mk-acts { display: flex; gap: 7px; margin-top: 10px; }
.mk-plan .mk-acts .mk-btn { padding: 5px 12px; font-size: 11.5px; }
.mk-gen { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: rgb(var(--mk-ink) / 0.4); margin-top: 9px; }
.mk-dw-note { padding: 9px 14px; border-top: 1px solid var(--mk-border); font-size: 10.5px; color: rgb(var(--mk-ink) / 0.5); }
.mk-dw-form { display: flex; gap: 7px; padding: 0 12px 13px; }
.mk-dw-form .mk-inp {
  flex: 1 1 auto; border: 1px solid var(--mk-border); border-radius: 8px;
  padding: 8px 11px; font-size: 12px; color: rgb(var(--mk-ink) / 0.35);
  box-shadow: 0 3px 10px -6px rgb(19 41 77 / .5);
}

/* ==========================================================================
   5 · BOLSA DE HORAS
   ========================================================================== */
#mk-bolsa .mk-body { padding: 18px; }
.mk-bl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 218px; gap: 14px; align-items: start; }
.mk-bl-main { padding: 18px; }
.mk-bl-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--mk-border); }
.mk-bl-saldo { font-family: var(--mk-f-mono); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: rgb(var(--mk-accent)); }
.mk-bl-saldo small { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.mk-bl-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--mk-ink) / 0.45); margin-bottom: 5px; }
.mk-bl-tblwrap { overflow-x: auto; margin-top: 14px; }
.mk-bl-tbl { min-width: 620px; }
.mk-bl-tbl thead th { background: var(--mk-bg); color: rgb(var(--mk-ink) / 0.5); }
.mk-pos { color: #15803D; font-weight: 600; }
.mk-neg { color: #B91C1C; font-weight: 600; }
.mk-zero { color: rgb(var(--mk-ink) / 0.35); }
.mk-note { font-size: 11px; color: rgb(var(--mk-ink) / 0.6); }
.mk-mini { padding: 13px 14px; }
.mk-mini + .mk-mini { margin-top: 12px; }
.mk-mini .mk-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: rgb(var(--mk-ink) / 0.45); }
.mk-mini .mk-v { font-family: var(--mk-f-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.mk-mini .mk-s { font-size: 10.5px; color: rgb(var(--mk-ink) / 0.45); margin-top: 3px; }
.mk-mini-bar { height: 4px; border-radius: 999px; background: #EEF0F5; margin-top: 9px; overflow: hidden; }
.mk-mini-bar i { display: block; height: 100%; border-radius: 999px; }

/* ==========================================================================
   6 · COBERTURA POR FRANJAS
   ========================================================================== */
#mk-cobertura .mk-body { padding: 18px; }
.mk-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 10px;
  padding: 10px 13px; font-size: 12.5px; color: #991B1B; margin-bottom: 13px;
}
.mk-alert .mk-i { width: 16px; height: 16px; color: #DC2626; }
.mk-alert b { font-weight: 600; }
.mk-alert .mk-mono { font-weight: 600; }
.mk-alert .mk-btn { margin-left: auto; border-color: #FCA5A5; color: #991B1B; background: #fff; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 13px; }
.mk-kpi { padding: 11px 13px; }
.mk-kpi .mk-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: rgb(var(--mk-ink) / 0.45); }
.mk-kpi .mk-v { font-family: var(--mk-f-mono); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-top: 3px; }
.mk-kpi .mk-s { font-size: 10px; color: rgb(var(--mk-ink) / 0.45); margin-top: 2px; }
.mk-hm-card { padding: 15px; }
.mk-hm-scroll { overflow-x: auto; margin-top: 11px; }
.mk-hm { min-width: 560px; }
.mk-hm-row { display: grid; grid-template-columns: 74px repeat(7, minmax(0, 1fr)); gap: 4px; }
.mk-hm-row + .mk-hm-row { margin-top: 4px; }
.mk-hm-head { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--mk-ink) / 0.45); text-align: center; padding-bottom: 3px; }
.mk-hm-head.mk-wend { color: rgb(var(--mk-ink) / 0.3); }
.mk-hm-lbl { font-family: var(--mk-f-mono); font-size: 10.5px; color: rgb(var(--mk-ink) / 0.55); display: flex; align-items: center; }
.mk-hc {
  height: 27px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mk-f-mono); font-size: 10.5px; font-weight: 500;
}
.mk-hc-ok { background: #DCFCE7; color: #166534; }
.mk-hc-w { background: #FEF3C7; color: #92400E; }
.mk-hc-b { background: #FEE2E2; color: #B91C1C; box-shadow: inset 0 0 0 1px #FCA5A5; }
.mk-hc-n { background: #F4F5F8; color: rgb(var(--mk-ink) / 0.22); }
.mk-hc-b.mk-focus { box-shadow: inset 0 0 0 2px #DC2626; }
.mk-hm-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 10.5px; color: rgb(var(--mk-ink) / 0.55); }
.mk-hm-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; vertical-align: -1px; margin-right: 5px; }

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
/* El recorte se abre 4 px por fuera de la caja para no cortar el anillo de IA. */
.mk-bar, .mk-abs, .mk-free { clip-path: inset(-4px 100% -4px -4px); transition: clip-path .5s cubic-bezier(.2,.85,.3,1); }
.mk-in .mk-bar, .mk-in .mk-abs, .mk-in .mk-free { clip-path: inset(-4px -4px -4px -4px); }
.mk-anim-line { opacity: 0; transform: translateY(7px); transition: opacity .38s ease, transform .38s cubic-bezier(.2,.8,.3,1); }
.mk-in .mk-anim-line { opacity: 1; transform: none; }
.mk-hc { opacity: 0; transform: scale(.88); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1); }
.mk-in .mk-hc { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-bar, .mk-abs, .mk-free, .mk-anim-line, .mk-hc, .mk-fill {
    transition: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important;
  }
  .mk-live::after { animation: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .mk-shot { border-radius: 12px; font-size: 13px; }
  .mk-body { padding: 14px; }
  .mk-doc { padding: 18px 16px; }
  .mk-doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-bl-wrap { grid-template-columns: minmax(0, 1fr); }
  .mk-bl-wrap .mk-bl-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
  .mk-mini + .mk-mini { margin-top: 0; }
  .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mk-copiloto .mk-body { min-height: 0; }
  .mk-behind { display: none; }
  .mk-drawer { width: 100%; border-left: 0; box-shadow: none; }
  .mk-cl-time { font-size: 46px; }
  .mk-cl-time small { font-size: 21px; }
  #mk-fichaje .mk-body { padding: 18px 14px 22px; }
  .mk-cl-card { padding: 20px 18px 18px; }
}
@media (max-width: 560px) {
  .mk-bl-wrap .mk-bl-side { grid-template-columns: minmax(0, 1fr); }
  .mk-kpis { grid-template-columns: minmax(0, 1fr); }
  .mk-cl-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mk-cl-btns { flex-direction: column; }
  .mk-doc-meta { grid-template-columns: minmax(0, 1fr); }
  .mk-cl-time { font-size: 40px; }
}

/* ---- sólo para esta página de revisión (se retira al integrar) ---- */
body.mk-preview { margin: 0; padding: 40px 20px 80px; background: #EEF0F4; font-family: "Inter", sans-serif; }