:root{ --acc2:#8fb52a;
  /* Paleta aclarada y más cercana al verde corporativo Klingele */
  --bg:#233121;
  --card:#1d291b;
  --card-2:#273424;
  --input:#182215;
  --txt:#eef4e7;
  --muted:#c2ceb6;

  /* Acentos oliva/lima corporativos */
  --acc:#8aa92b;
  --acc-2:#9cc23a;          /* hover */
  --acc-line: rgba(143,181,42,0.52);
  --acc-bg: rgba(143,181,42,0.14);
  --olive:#8aa92b;

  --line:rgba(143,181,42,0.24);
  --danger-line: rgba(190,78,78,0.62);
  --danger-bg: rgba(190,78,78,0.12);
  --success-line: rgba(74,182,104,0.62);
  --success-bg: rgba(74,182,104,0.13);
}

*{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; }
body{ margin:0; background:#e8ede3; color:var(--txt); font-size:14px; overflow-x:hidden; }

/* Global responsive safety nets (avoid content overflowing cards on mobile) */
img, video, svg, canvas{ max-width:100%; height:auto; }
pre, code{ overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; }
.card, .container{ overflow-wrap:anywhere; word-break:break-word; }
.card *, .container *, .topbar *, .nav *, .actions *{ min-width:0; }

/* Kiosk (Terminal) mode: keep the whole screen in KEI green (no light margins) */
body.kiosk{ background: var(--bg); }

/* Tipografía general (más compacta) */
h1{ font-size:22px; margin:0 0 10px; }
h2{ font-size:18px; margin:0 0 10px; }
h3{ font-size:16px; margin:0 0 8px; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ color:var(--acc-2); }

.container{ max-width:1500px; margin:18px auto; padding:16px 14px; background:var(--bg); border:1px solid var(--line); border-radius:18px; }

.topbar{
  position:sticky; top:0;
  /* Un poco más claro y con matiz oliva */
  background:rgba(27,38,24,0.94);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--acc-line);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
}
.brand{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.brand a{ color:var(--txt); font-weight:800; letter-spacing:0.5px; }
.nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.user{ color:var(--muted); }

.btn{
  padding:8px 12px;
  border:1px solid var(--acc-line);
  border-radius:12px;
  color:var(--txt);
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{ background:var(--acc-bg); border-color:rgba(156,194,58,0.88); }
.btn.primary{ background:var(--acc-bg); }
.btn.primary:hover{ background:rgba(143,181,42,0.20); }

.btn.danger{ border-color:var(--danger-line); }
.btn.danger:hover{ background:var(--danger-bg); border-color:rgba(170,60,60,0.85); }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
}

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:1000px){ .grid3{ grid-template-columns:1fr 1fr; } }
@media (max-width:900px){ .grid,.grid2,.grid3{ grid-template-columns:1fr; } }

/* ===== KEI 3.0 · Lab filters: uniform responsive bar ===== */
.lab-filter-bar{
  display:grid;
  grid-template-columns:minmax(130px,.9fr) minmax(190px,1.1fr) minmax(260px,2fr) minmax(135px,.8fr) minmax(135px,.8fr) minmax(120px,.7fr) minmax(115px,.65fr);
  gap:10px;
  align-items:end;
}
.lab-filter-bar .filter-field{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.lab-filter-bar label{
  margin:0 0 6px;
  min-height:20px;
  line-height:20px;
}
.lab-filter-bar input:not([type="checkbox"]):not([type="radio"]),
.lab-filter-bar select{
  min-height:46px;
}
.lab-filter-bar .filter-actions{
  display:flex;
  align-items:flex-end;
  min-width:0;
}
.lab-filter-bar .filter-actions .btn{
  min-height:46px;
  width:100%;
  justify-content:center;
}
@media (max-width:1300px){
  .lab-filter-bar{ grid-template-columns:repeat(4, minmax(160px,1fr)); }
  .lab-filter-bar .filter-field-search{ grid-column:span 2; }
}
@media (max-width:900px){
  .lab-filter-bar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .lab-filter-bar .filter-field-search{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .lab-filter-bar{ grid-template-columns:1fr; }
  .lab-filter-bar .filter-field-search{ grid-column:auto; }
}


label{ display:block; margin:10px 0 6px; color:var(--muted); font-size:14px; }

/* Inputs (except check/radio) */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--input);
  color:var(--txt);
}

/* Checkbox / Radio alignment + clarity */
input[type="checkbox"], input[type="radio"]{
  width:18px;
  height:18px;
  padding:0;
  margin:0;
  accent-color: var(--acc2);
}
label > input[type="checkbox"], label > input[type="radio"]{
  display:inline-block;
  margin-right:10px;
  vertical-align:-3px; /* aligns with first line of text */
}
label > input[type="checkbox"]:focus-visible,
label > input[type="radio"]:focus-visible{
  outline:2px solid rgba(143,181,42,0.58);
  outline-offset:2px;
}

table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th{ color:var(--muted); font-weight:600; font-size:13px; }

/* Responsive tables: wrap tables in <div class="table-wrap"> to enable horizontal scroll on small screens
   without breaking the layout (useful for KPI/TV tables and incident lists). */
.table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
/* Override global table{width:100%} inside the scroll container so the table can grow naturally */
.table-wrap > table{
  width:max-content;
  min-width:100%;
  overflow-wrap:normal;
  word-break:normal;
}

/* ===== H&S Access Panel: improve column widths + Metacontratas colors ===== */
.access-panel .table-wrap > table{ width:100%; min-width:1200px; }
.access-panel table{ table-layout:auto; }
.access-panel th.col-tipo{ width:95px; }
.access-panel th.col-empresa{ width:210px; }
.access-panel th.col-mc{ width:96px; }
.access-panel th.col-destino{ width:210px; }
.access-panel th.col-estado{ width:175px; }
.access-panel th.col-tiempo{ width:95px; }
.access-panel th.col-tarjeta{ width:90px; }
.access-panel th.col-acciones{ width:155px; }

/* Persona was breaking letter-by-letter due to global overflow-wrap:anywhere; override here. */
.access-panel th.col-persona, .access-panel td.col-persona{
  min-width:260px;
  overflow-wrap:normal;
  word-break:normal;
  white-space:nowrap;
}
@media (max-width: 900px){
  .access-panel th.col-persona, .access-panel td.col-persona{ white-space:normal; min-width:220px; }
}

/* Metacontratas badge button */
.btn.mcBtn{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.2px;
}
.btn.mcBtn .mcSym{ font-weight:900; }

/* MC status colors (aligned with typical MetaContratas semantics) */
.btn.mcBtn.mc-ok{ border-color:var(--success-line); background:var(--success-bg); }
.btn.mcBtn.mc-bad{ border-color:var(--danger-line); background:var(--danger-bg); }
.btn.mcBtn.mc-warn{ border-color:rgba(200,140,40,0.70); background:rgba(200,140,40,0.12); }
.btn.mcBtn.mc-info{ border-color:rgba(80,140,220,0.70); background:rgba(80,140,220,0.10); }

/* TV (/tv.php): prefer horizontal scroll instead of wrapping cells on mobile */
@media (max-width: 900px){
  .tv .table-wrap > table td,
  .tv .table-wrap > table th{ white-space:nowrap; }
}

.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.badge{
  display:inline-block;
  padding:3px 10px;
  border:1px solid var(--acc-line);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
}

.badge.ok{ border-color:var(--success-line); background:var(--success-bg); color:var(--txt); }
.badge.warn{ border-color:rgba(200,140,40,0.60); background:rgba(200,140,40,0.10); color:var(--txt); }
.badge.danger{ border-color:var(--danger-line); background:var(--danger-bg); color:var(--txt); }
.badge.secondary{ opacity:0.95; }

.notice{
  padding:10px;
  border:1px solid var(--acc-line);
  background:var(--acc-bg);
  border-radius:12px;
  color:var(--muted);
}
.notice.danger{ border-color:var(--danger-line); background:var(--danger-bg); color:var(--txt); }
.notice.success{ border-color:var(--success-line); background:var(--success-bg); color:var(--txt); }

.muted{ color:var(--muted); }

.big{ font-size:14px; font-weight:700; }

.kpi-input{
  display:grid;
  grid-template-columns: 1fr 180px 1fr;
  gap:10px;
  align-items:end;
}
@media (max-width:900px){ .kpi-input{ grid-template-columns:1fr; } }

/* TV (panel) */
.tv{ max-width:1500px; }
.tv h1{ font-size:22px; margin:0 0 10px; }
.tv .spark{ display:flex; gap:6px; flex-wrap:wrap; }
.tv .spark span{ padding:4px 8px; border:1px solid var(--line); border-radius:10px; font-size:12px; color:var(--muted); }

/* TV pantalla pública (sin interacción, densa) */
.tv-screen{ max-width:1800px; }
.tv-screen .header-row{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.tv-screen h1{ font-size:22px; margin:0; }
.tv-screen .meta{ color:var(--muted); font-size:13px; }
.tv-screen table{ table-layout:fixed; }
.tv-screen th, .tv-screen td{ padding:8px; font-size:13px; }
.tv-screen .col-dept{ width:13%; }
.tv-screen .col-kpi{ width:29%; }
.tv-screen .col-last{ width:16%; }
.tv-screen .col-spark{ width:28%; }
.tv-screen .col-avg{ width:14%; }
.tv-screen .kpi-name{ font-weight:800; color:var(--txt); }
.tv-screen .kpi-code{ font-size:11px; color:var(--muted); }

/* ===== TV Public (compact by sections) ===== */
.tv-fullscreen .container.tv-screen{
  max-width:none;
  width:100vw;
  height:100vh;
  margin:0;
  border-radius:0;
}

/* Layout: datos arriba, cabecera al final */
.tv-fullscreen .tv-screen{
  display:flex;
  flex-direction:column;
  height:100vh;
}
.tv-fullscreen .tv-screen .tv-body{
  flex:1 1 auto;
  overflow:auto;
  padding-bottom:10px;
}

.tv-screen .tv-head{ margin:10px 0 0; }

/* TV fullscreen: maximize available space */
.tv-fullscreen .container.tv-screen{
  max-width:none;
  margin:0;
  padding:6px 8px;
  border:0;
  border-radius:0;
  background:transparent;
}
.tv-fullscreen .tv-screen .tv-body{ padding-bottom:4px; }
.tv-fullscreen .tv-screen .tv-head{ margin:6px 0 0; }
.tv-fullscreen .tv-screen .tv-section{ padding:8px; margin:8px 0; }
.tv-head.is-hidden, .tv-dots.is-hidden{ display:none !important; }


/* KPI objectives (Gerencia) - subtle highlight */
.kpi-target-bad{ background: rgba(170,60,60,0.18); border:1px solid rgba(170,60,60,0.70); }
.kpi-target-warn{ background: rgba(210,150,40,0.18); border:1px solid rgba(210,150,40,0.62); }
.kpi-target-good{ background: rgba(60,170,100,0.18); border:1px solid rgba(60,170,100,0.72); }

.tv-screen .tv-section{ padding:10px; margin:10px 0; }
.tv-screen h2{ margin:0 0 8px 0; font-size:16px; }

/* Fullscreen prompt (cuando el navegador bloquea auto-fullscreen) */
.tv-fs-prompt{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  z-index:9999;
}
.tv-fs-prompt.is-open{ display:flex; }
.tv-fs-card{
  width:min(520px, 92vw);
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--bg);
}
.tv-fs-card h3{ margin:0 0 8px 0; }
.tv-fs-card p{ margin:0 0 14px 0; color:var(--muted); }
.tv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:start;
}
@media (max-width: 1100px){
  .tv-grid{ grid-template-columns: 1fr; }
}

.tv-mini{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.tv-mini td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
}
.tv-mini tr:last-child td{ border-bottom:none; }
.tv-mini .kpi-name{ font-weight:700; }
.tv-mini .kpi-val{ text-align:right; font-variant-numeric: tabular-nums; }

.tv-matrix{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.tv-matrix th, .tv-matrix td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
}
.tv-matrix th{
  color:var(--muted);
  font-weight:700;
}
.tv-matrix th:not(:first-child){ text-align:right; }
.tv-matrix tr:last-child td{ border-bottom:none; }
.tv-matrix td:first-child{ font-weight:700; }
.tv-matrix .kpi-val{ text-align:right; font-variant-numeric: tabular-nums; }

/* extra compact: reduce global card spacing inside TV */
.tv-screen .card{ margin:10px 0; }


/* Olive table headers */
thead th{ background: rgba(143,181,42,0.14); }

/* Safety list readability (multi-line rows) */
table.safety-list td, table.safety-list th{ padding:10px; }

/* Make main+sub rows feel like one item */
table.safety-list tr.mainrow td{
  background: transparent;
  border-bottom:0;
}
table.safety-list tr.subrow td{
  padding-top:0;
  padding-bottom:14px;
  background: transparent;
  border-top:0;
  position:relative;
}

/* Clickable safety blocks */
table.safety-list tr.safety-click{ cursor:pointer; }
table.safety-list tr.safety-click:hover td{
  background: rgba(255,255,255,0.03);
}

/* Left accent that spans both lines */
table.safety-list tr.mainrow td:first-child{
  border-left:4px solid rgba(143,181,42,0.34);
}
table.safety-list tr.subrow td{
  border-left:4px solid rgba(143,181,42,0.34);
}

/* Continuation cue: vertical connector + indent */
table.safety-list tr.subrow td:before{
  content:'';
  position:absolute;
  left:18px;
  top:0;
  bottom:0;
  width:2px;
  background: rgba(143,181,42,0.18);
}

.subrow-wrap{ display:flex; flex-direction:column; gap:8px; padding-left:28px; }
.subrow-desc{ color:var(--txt); }
.subrow-desc:before{ content:'↳ '; color:var(--muted); }
.subrow-meta{ display:flex; flex-wrap:wrap; gap:18px; color:var(--muted); font-size:13px; }


/* Mostrar KPIs (tv.php) - 5 días en columnas */
.tv-kpi-table th.num, .tv-kpi-table td.num{ text-align:right; font-variant-numeric: tabular-nums; }
.tv-kpi-table th.col-day, .tv-kpi-table td.col-day{ border-left:1px solid var(--line); }
.tv-kpi-table th.col-month, .tv-kpi-table td.col-month{ border-left:1px solid var(--line); }

/* Resaltar "ayer" (último laborable) */
.tv-kpi-table th.is-yesterday,
.tv-kpi-table td.is-yesterday{
  background: rgba(143,181,42,0.20);
}
.tv-kpi-table th.is-yesterday{ font-weight:800; }


/* Modal (dialog) */
dialog.modal{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  color:var(--txt);
  padding:14px;
  width:min(560px, 92vw);
}
dialog::backdrop{
  background:rgba(0,0,0,0.65);
}

/* Date/time picker icons (make calendar/clock visible on dark UI) */
input[type="date"],
input[type="time"],
input[type="datetime-local"]{
  /* Helps browsers pick appropriate native control colors */
  color-scheme: dark;
}


input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-clear-button{
  /* Force clear icon to read as white across browsers */
  filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0,0,0,.55)) !important;
  opacity: 1;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  /* Force calendar/clock icon to be white, no matter native theme */
  filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0,0,0,.55)) !important;
  -webkit-filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0,0,0,.55)) !important;
  opacity: 1;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
  opacity: 1;
}


/* Inline badges next to titles (index cards) */
.badge.inline{
  margin-left:8px;
  position:relative;
  top:-1px;
}

/* ===== TV Public: Histórico + Carousel ===== */
.tv-hist{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.tv-hist th, .tv-hist td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
}
.tv-hist th{ color:var(--muted); font-weight:700; }
.tv-hist th:not(:first-child), .tv-hist td:not(:first-child){ text-align:right; }
.tv-hist tr:last-child td{ border-bottom:none; }

.tv-matrix-hist{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.tv-matrix-hist th, .tv-matrix-hist td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
}
.tv-matrix-hist th{ color:var(--muted); font-weight:700; }
.tv-matrix-hist th:not(:first-child), .tv-matrix-hist td:not(:first-child){ text-align:right; }
.tv-matrix-hist td:first-child, .tv-matrix-hist td:nth-child(2){ text-align:left; }

.tv-matrix-hist tr.machine-inner td{ border-bottom:none; }
.tv-matrix-hist tr.machine-end td{ border-bottom:1px solid var(--line); }
.tv-matrix-hist tr:last-child td{ border-bottom:none; }

.tv-hist th.is-yesterday,
.tv-matrix-hist th.is-yesterday{
  background: rgba(180, 169, 120, 0.18);
}
/* Highlight "último laborable" without hiding objective colors */
.tv-hist td.is-yesterday:not(.kpi-target-good):not(.kpi-target-warn):not(.kpi-target-bad),
.tv-matrix-hist td.is-yesterday:not(.kpi-target-good):not(.kpi-target-warn):not(.kpi-target-bad){
  background: rgba(180, 169, 120, 0.18);
}
.tv-hist td.is-yesterday.kpi-target-good,
.tv-hist td.is-yesterday.kpi-target-warn,
.tv-hist td.is-yesterday.kpi-target-bad,
.tv-matrix-hist td.is-yesterday.kpi-target-good,
.tv-matrix-hist td.is-yesterday.kpi-target-warn,
.tv-matrix-hist td.is-yesterday.kpi-target-bad{
  box-shadow: inset 0 0 0 1px rgba(180, 169, 120, 0.55);
}
.tv-hist th.is-yesterday,
.tv-matrix-hist th.is-yesterday{
  font-weight:800;
}

.tv-carousel{ position:relative; }
.tv-slide{ display:none; }
.tv-slide.is-active{ display:block; }

.tv-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}
.tv-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: transparent;
  cursor:pointer;
}
.tv-dot.is-active{
  background: var(--olive);
  border-color: var(--olive);
}

.tv-extra{ margin-top:8px; }
.tv-extra-card{ padding:12px 14px; }
.tv-extra-card .tv-extra-title{ margin-top:0; }
.tv-extra-title{ font-weight:800; margin:8px 0 6px 0; }
.tv-list{ margin:0; padding-left:18px; }
.tv-list li{ margin:4px 0; color: var(--txt); }


/* ===== Admin: Error Log Console ===== */
.log-toolbar{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.log-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.log-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
}
.log-console{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  line-height:1.35;
  height:65vh;
  resize:vertical;
  white-space:pre;
}

/* ===== Mobile tweaks (portal general) ===== */
@media (max-width: 768px){
  .container{ max-width:100%; margin:10px 8px; padding:12px 10px; border-radius:16px; }

  .topbar{ flex-direction:column; align-items:flex-start; gap:8px; }
  .brand{ width:100%; }
  .nav{ width:100%; gap:8px; }
  .nav a, .nav .btn{ padding:7px 10px; font-size:13px; }
  .user{ font-size:13px; }

  /* Tables: allow horizontal scroll instead of breaking layout */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  th, td{ white-space:nowrap; }

  /* Keep TV tables as designed */
  .tv table, .tv-screen table{ display:table; overflow:visible; }
  .tv th, .tv td, .tv-screen th, .tv-screen td{ white-space:normal; }
}

/* ===== TV Public: Converting hours stacked bars ===== */
.tv-section-hours .tv-hours-table{ margin-bottom:10px; }
.tv-hour-bars{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.tv-hour-bars-head{
  font-weight:700;
  color:var(--txt);
  opacity:.95;
  margin-bottom:2px;
}
.tv-hour-row{
  display:grid;
  grid-template-columns:minmax(118px, 180px) 1fr;
  gap:8px;
  align-items:center;
}
.tv-hour-row.is-total{
  padding-bottom:4px;
  margin-bottom:2px;
  border-bottom:1px solid var(--line);
}
.tv-hour-label{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--txt);
}
.tv-hour-label span{
  display:block;
  font-weight:600;
  color:var(--muted);
  font-size:.86em;
  margin-top:1px;
}
.tv-hour-track{
  height:28px;
  display:flex;
  overflow:hidden;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.tv-hour-seg{
  height:100%;
  min-width:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:400;
  font-size:.74em;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-sizing:border-box;
}
.tv-hour-seg span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 4px;
}
.tv-hour-seg.seg-marcha{ background:#265b31; }
.tv-hour-seg.seg-montaje{ background:#77722a; }
.tv-hour-seg.seg-paros{ background:#8a6424; }
.tv-hour-seg.seg-resto{ background:#8b2f2a; }
.tv-hour-legend{
  margin-top:2px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.9em;
}
.tv-hour-legend span{
  width:11px;
  height:11px;
  border-radius:3px;
  display:inline-block;
  margin-right:-6px;
}
.tv-hour-legend .seg-marcha{ background:#265b31; }
.tv-hour-legend .seg-montaje{ background:#77722a; }
.tv-hour-legend .seg-paros{ background:#8a6424; }
.tv-hour-legend .seg-resto{ background:#8b2f2a; }
@media (max-width: 900px){
  .tv-hour-row{ grid-template-columns:1fr; gap:4px; }
}

/* ===== TV Public: Converting hours compact board r201 ===== */
.tv-section-hours .tv-hour-date{
  margin:2px 0 7px;
  color:var(--muted);
  font-size:.92em;
}
.tv-hours-board{
  width:100%;
  border-collapse:collapse;
  margin-top:4px;
  table-layout:fixed;
}
.tv-hours-board .col-machine{ width:175px; }
.tv-hours-board .col-hour{ width:112px; }
.tv-hours-board .col-bar{ width:auto; }
.tv-hours-board th,
.tv-hours-board td{
  padding:5px 7px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:middle;
}
.tv-hours-board th{
  color:var(--muted);
  font-weight:700;
  text-align:left;
}
.tv-hours-board th:nth-child(2),
.tv-hours-board th:nth-child(3),
.tv-hours-board th:nth-child(4),
.tv-hours-board td:nth-child(2),
.tv-hours-board td:nth-child(3),
.tv-hours-board td:nth-child(4){
  text-align:right;
  white-space:nowrap;
}
.tv-hours-board th:nth-child(5),
.tv-hours-board td:nth-child(5){
  min-width:360px;
}
.tv-hours-board tr.is-total td{
  font-weight:800;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.035);
}
.tv-hour-inline-track{
  height:26px;
  display:flex;
  overflow:hidden;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  min-width:360px;
  width:100%;
}
.tv-hour-inline-track.empty{
  background:rgba(255,255,255,.03);
}
.tv-hours-compact{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  font-size:.88em;
}
.tv-hours-compact th,
.tv-hours-compact td{
  padding:3px 6px;
  border-top:1px solid rgba(255,255,255,.06);
}
.tv-hours-compact th{
  color:var(--muted);
  font-weight:700;
}
.tv-hours-compact .tv-hours-pair{
  white-space:nowrap;
  font-size:.86em;
}
@media (max-width: 900px){
  .tv-hours-board{ table-layout:auto; }
  .tv-hours-board .col-machine,
  .tv-hours-board .col-hour,
  .tv-hours-board .col-bar{ width:auto; }
  .tv-hour-inline-track{ min-width:180px; }
}


/* KEI 3.0 r003 language selector */
.locale-switch{ display:inline-flex; align-items:center; margin:0; }
.locale-switch select{ width:auto; min-width:64px; padding:6px 28px 6px 10px; border-radius:999px; font-size:12px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== KEI r051 · Topbar mobile anti-vertical-wrap =====
   Prevents the tenant/brand/menu text from breaking one letter per line on narrow screens. */
.topbar,
.topbar *{
  overflow-wrap:normal;
  word-break:normal;
}
.topbar .brand a,
.topbar .brand .badge,
.topbar .brand-title,
.topbar .brand-title *,
.topbar .nav a,
.topbar .nav .btn,
.topbar .user,
.topbar .locale-switch select{
  white-space:nowrap;
}
.topbar .brand .badge{
  max-width:42vw;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:768px){
  .topbar{
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:8px 10px;
  }
  .brand{
    width:auto;
    max-width:72vw;
    flex:1 1 auto;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  .brand a{ flex:0 0 auto; }
  .brand .badge{
    max-width:calc(72vw - 44px);
  }
  .nav{
    width:auto;
    max-width:100%;
    margin-left:auto;
    flex:0 1 auto;
    flex-wrap:nowrap;
    justify-content:flex-end;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}
@media (max-width:520px){
  .brand{ max-width:68vw; }
  .brand .badge{ max-width:calc(68vw - 42px); }
  .nav{ gap:6px; }
  .nav a, .nav .btn{ padding:7px 9px; }
}

/* ===== KEI r052 · Corporate/mobile topbar hardening =====
   Fixes narrow/mobile layouts where corporate logo/nav or long text could force vertical wrapping. */
body.kei-corporate-home .topbar,
body.kei-corporate-login .topbar,
body.kei-corporate-tasks .topbar{
  overflow:visible;
}
body.kei-corporate-home .brand-logo,
body.kei-corporate-login .brand-logo,
body.kei-corporate-tasks .brand-logo{
  flex:0 0 auto;
  max-width:100%;
  overflow:hidden;
}
body.kei-corporate-home .brand-logo img,
body.kei-corporate-login .brand-logo img,
body.kei-corporate-tasks .brand-logo img{
  max-width:100%;
  object-fit:contain;
}
body.kei-corporate-home .home-eyebrow,
body.kei-corporate-login .login-eyebrow,
body.kei-corporate-tasks .tasks-eyebrow{
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}
@media (max-width:1100px){
  body.kei-corporate-home .topbar,
  body.kei-corporate-login .topbar,
  body.kei-corporate-tasks .topbar{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    justify-content:start;
    min-height:0;
    height:auto;
    gap:8px;
    padding:10px 12px;
  }
  body.kei-corporate-home .brand,
  body.kei-corporate-login .brand,
  body.kei-corporate-tasks .brand{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
    overflow:hidden;
  }
  body.kei-corporate-home .brand-title,
  body.kei-corporate-login .brand-title,
  body.kei-corporate-tasks .brand-title{
    display:none;
  }
  body.kei-corporate-home .brand-logo img,
  body.kei-corporate-login .brand-logo img,
  body.kei-corporate-tasks .brand-logo img{
    height:34px;
    max-width:min(210px, 62vw);
  }
  body.kei-corporate-home .nav,
  body.kei-corporate-login .nav,
  body.kei-corporate-tasks .nav{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 4px;
    margin:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  body.kei-corporate-home .nav a,
  body.kei-corporate-home .nav .btn,
  body.kei-corporate-login .nav a,
  body.kei-corporate-login .nav .btn,
  body.kei-corporate-tasks .nav a,
  body.kei-corporate-tasks .nav .btn{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:13px;
  }
  body.kei-corporate-home .locale-switch,
  body.kei-corporate-tasks .locale-switch{
    flex:0 0 auto;
  }
}
@media (max-width:560px){
  body.kei-corporate-home .brand-logo img,
  body.kei-corporate-login .brand-logo img,
  body.kei-corporate-tasks .brand-logo img{
    height:30px;
    max-width:min(170px, 56vw);
  }
  body.kei-corporate-home .nav,
  body.kei-corporate-login .nav,
  body.kei-corporate-tasks .nav{
    gap:8px;
  }
  body.kei-corporate-home .nav .user,
  body.kei-corporate-tasks .nav .user{
    display:none;
  }
  body.kei-corporate-home .locale-switch select,
  body.kei-corporate-tasks .locale-switch select{
    min-width:56px;
    padding:6px 22px 6px 9px;
  }
}

/* ===== KEI r053 · Corporate topbar final hardening =====
   Opaque sticky header, mobile wrapping without hidden logout, and shared corporate KPI pages. */
body.kei-corporate-home .topbar,
body.kei-corporate-login .topbar,
body.kei-corporate-tasks .topbar,
body.kei-corporate-kpis .topbar{
  z-index:1000;
  background:#ffffff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid #dce6d4;
  box-shadow:0 8px 24px rgba(0,63,53,.08);
}
body.kei-corporate-home .nav,
body.kei-corporate-login .nav,
body.kei-corporate-tasks .nav,
body.kei-corporate-kpis .nav{
  overflow:visible;
}
body.kei-corporate-home .brand-logo,
body.kei-corporate-login .brand-logo,
body.kei-corporate-tasks .brand-logo,
body.kei-corporate-kpis .brand-logo{
  min-width:0;
}
body.kei-corporate-home .brand-logo img,
body.kei-corporate-login .brand-logo img,
body.kei-corporate-tasks .brand-logo img,
body.kei-corporate-kpis .brand-logo img{
  object-fit:contain;
  object-position:left center;
}
@media (max-width:1100px){
  body.kei-corporate-home .topbar,
  body.kei-corporate-login .topbar,
  body.kei-corporate-tasks .topbar,
  body.kei-corporate-kpis .topbar{
    position:sticky;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px 12px;
    min-height:0;
    height:auto;
  }
  body.kei-corporate-home .brand,
  body.kei-corporate-login .brand,
  body.kei-corporate-tasks .brand,
  body.kei-corporate-kpis .brand{
    width:100%;
    max-width:100%;
    flex:0 0 auto;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    overflow:hidden;
  }
  body.kei-corporate-home .brand-title,
  body.kei-corporate-login .brand-title,
  body.kei-corporate-tasks .brand-title,
  body.kei-corporate-kpis .brand-title{
    display:none !important;
  }
  body.kei-corporate-home .brand-logo img,
  body.kei-corporate-login .brand-logo img,
  body.kei-corporate-tasks .brand-logo img,
  body.kei-corporate-kpis .brand-logo img{
    height:34px;
    width:auto;
    max-width:190px;
  }
  body.kei-corporate-home .nav,
  body.kei-corporate-login .nav,
  body.kei-corporate-tasks .nav,
  body.kei-corporate-kpis .nav{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin:0;
    overflow:visible;
  }
  body.kei-corporate-home .nav a,
  body.kei-corporate-home .nav .btn,
  body.kei-corporate-login .nav a,
  body.kei-corporate-login .nav .btn,
  body.kei-corporate-tasks .nav a,
  body.kei-corporate-tasks .nav .btn,
  body.kei-corporate-kpis .nav a,
  body.kei-corporate-kpis .nav .btn{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:13px;
    min-height:36px;
  }
  body.kei-corporate-home .locale-switch,
  body.kei-corporate-tasks .locale-switch,
  body.kei-corporate-kpis .locale-switch{
    flex:0 0 auto;
  }
  body.kei-corporate-home .topbar form[action$="logout.php"],
  body.kei-corporate-tasks .topbar form[action$="logout.php"],
  body.kei-corporate-kpis .topbar form[action$="logout.php"]{
    margin-left:auto !important;
  }
}
@media (max-width:560px){
  body.kei-corporate-home .brand-logo img,
  body.kei-corporate-login .brand-logo img,
  body.kei-corporate-tasks .brand-logo img,
  body.kei-corporate-kpis .brand-logo img{
    height:30px;
    max-width:150px;
  }
  body.kei-corporate-home .nav .user,
  body.kei-corporate-tasks .nav .user,
  body.kei-corporate-kpis .nav .user{
    display:none;
  }
  body.kei-corporate-home .nav,
  body.kei-corporate-tasks .nav,
  body.kei-corporate-kpis .nav{
    gap:6px;
  }
  body.kei-corporate-home .nav a,
  body.kei-corporate-home .nav .btn,
  body.kei-corporate-tasks .nav a,
  body.kei-corporate-tasks .nav .btn,
  body.kei-corporate-kpis .nav a,
  body.kei-corporate-kpis .nav .btn{
    padding:7px 9px;
  }
}

/* ===== KEI r054 · Corporate topbar production fix =====
   Keep corporate logo/nav controlled on desktop and mobile. Prevent oversized logo
   on migrated KPI/task pages and keep the bar opaque while content scrolls below. */
body.kei-corporate-home .topbar,
body.kei-corporate-login .topbar,
body.kei-corporate-tasks .topbar,
body.kei-corporate-kpis .topbar{
  position:sticky;
  top:0;
  z-index:2000;
  min-height:72px;
  height:auto;
  padding:10px 28px;
  background:#fff !important;
  border-bottom:1px solid #dce6d4;
  box-shadow:0 8px 24px rgba(0,63,53,.08);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible;
}
body.kei-corporate-home .brand,
body.kei-corporate-login .brand,
body.kei-corporate-tasks .brand,
body.kei-corporate-kpis .brand{
  flex:1 1 auto;
  min-width:0;
  max-width:min(430px, 44vw);
  flex-wrap:nowrap;
  overflow:hidden;
}
body.kei-corporate-home .brand-logo,
body.kei-corporate-login .brand-logo,
body.kei-corporate-tasks .brand-logo,
body.kei-corporate-kpis .brand-logo{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  max-width:260px;
  overflow:hidden;
}
body.kei-corporate-home .brand-logo img,
body.kei-corporate-login .brand-logo img,
body.kei-corporate-tasks .brand-logo img,
body.kei-corporate-kpis .brand-logo img{
  display:block;
  width:auto !important;
  height:46px !important;
  max-width:240px !important;
  object-fit:contain;
  object-position:left center;
}
body.kei-corporate-home .brand-title,
body.kei-corporate-login .brand-title,
body.kei-corporate-tasks .brand-title,
body.kei-corporate-kpis .brand-title{
  min-width:0;
  overflow:hidden;
}
body.kei-corporate-home .brand-title small,
body.kei-corporate-login .brand-title small,
body.kei-corporate-tasks .brand-title small,
body.kei-corporate-kpis .brand-title small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.kei-corporate-home .nav,
body.kei-corporate-login .nav,
body.kei-corporate-tasks .nav,
body.kei-corporate-kpis .nav{
  flex:0 0 auto;
  min-width:0;
  max-width:calc(100vw - 470px);
  margin-left:auto;
  overflow:visible;
}
@media (max-width:1100px){
  body.kei-corporate-home .topbar,
  body.kei-corporate-login .topbar,
  body.kei-corporate-tasks .topbar,
  body.kei-corporate-kpis .topbar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:9px 12px;
  }
  body.kei-corporate-home .brand,
  body.kei-corporate-login .brand,
  body.kei-corporate-tasks .brand,
  body.kei-corporate-kpis .brand{
    width:100%;
    max-width:100%;
  }
  body.kei-corporate-home .brand-logo img,
  body.kei-corporate-login .brand-logo img,
  body.kei-corporate-tasks .brand-logo img,
  body.kei-corporate-kpis .brand-logo img{
    height:34px !important;
    max-width:min(190px, 58vw) !important;
  }
  body.kei-corporate-home .nav,
  body.kei-corporate-login .nav,
  body.kei-corporate-tasks .nav,
  body.kei-corporate-kpis .nav{
    width:100%;
    max-width:100%;
    margin-left:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:6px 8px;
    overflow:visible;
  }
  body.kei-corporate-home .topbar form[action$="logout.php"],
  body.kei-corporate-tasks .topbar form[action$="logout.php"],
  body.kei-corporate-kpis .topbar form[action$="logout.php"]{
    margin-left:0 !important;
  }
}
@media (max-width:560px){
  body.kei-corporate-home .brand-logo img,
  body.kei-corporate-login .brand-logo img,
  body.kei-corporate-tasks .brand-logo img,
  body.kei-corporate-kpis .brand-logo img{
    height:30px !important;
    max-width:145px !important;
  }
  body.kei-corporate-home .nav a,
  body.kei-corporate-home .nav .btn,
  body.kei-corporate-tasks .nav a,
  body.kei-corporate-tasks .nav .btn,
  body.kei-corporate-kpis .nav a,
  body.kei-corporate-kpis .nav .btn{
    padding:7px 9px;
    min-height:34px;
    font-size:12px;
  }
}

/* ===== KEI r055 · Corporate header as shared portal header =====
   Applies the same clean header used on the home page to every normal page that
   includes partials/header.php. Pages without that partial remain unchanged. */
body.kei-corporate .topbar{
  position:sticky;
  top:0;
  z-index:2200;
  min-height:72px;
  height:auto;
  padding:12px 32px;
  background:#fff !important;
  color:#003f35;
  border-bottom:1px solid #dce6d4;
  box-shadow:0 8px 24px rgba(0,63,53,.08);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  overflow:visible;
}
body.kei-corporate .topbar,
body.kei-corporate .topbar *{
  overflow-wrap:normal;
  word-break:normal;
}
body.kei-corporate .brand{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1 1 auto;
  min-width:0;
  max-width:560px;
  flex-wrap:nowrap;
  overflow:hidden;
}
body.kei-corporate .brand-logo{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  max-width:290px;
  min-width:0;
  overflow:hidden;
}
body.kei-corporate .brand-logo img{
  display:block;
  width:auto !important;
  height:50px !important;
  max-width:280px !important;
  object-fit:contain;
  object-position:left center;
}
body.kei-corporate .brand-wordmark{
  color:#006b54;
  font-weight:900;
  font-size:24px;
  letter-spacing:.08em;
}
body.kei-corporate .brand-title{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding-left:12px;
  border-left:1px solid #dce6d4;
  color:#003f35;
  line-height:1.15;
  white-space:nowrap;
}
body.kei-corporate .brand-title strong{
  color:#003f35;
  font-weight:850;
  font-size:15px;
}
body.kei-corporate .brand-title small{
  color:#607064;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.kei-corporate .nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex:0 1 auto;
  min-width:0;
  max-width:calc(100vw - 620px);
  margin-left:auto;
  flex-wrap:wrap;
  overflow:visible;
}
body.kei-corporate .nav a:not(.btn){
  color:#003f35;
  font-weight:750;
  white-space:nowrap;
}
body.kei-corporate .nav a:not(.btn):hover{ color:#006b54; }
body.kei-corporate .locale-switch select{
  background:#fff;
  color:#003f35;
  border-color:#dce6d4;
  border-radius:999px;
  min-width:72px;
  height:42px;
}
body.kei-corporate .nav .user{
  color:#607064;
  font-weight:650;
  white-space:nowrap;
}
body.kei-corporate .nav .btn,
body.kei-corporate .topbar form .btn{
  min-height:42px;
  padding:10px 16px;
  border-radius:0;
  border:1px solid #006b54;
  background:#006b54;
  color:#fff;
  font-weight:850;
  white-space:nowrap;
}
body.kei-corporate .nav .btn:hover,
body.kei-corporate .topbar form .btn:hover{
  background:#00836a;
  border-color:#00836a;
  color:#fff;
}
body.kei-corporate .topbar .badge.inline{
  background:#a8c900;
  border-color:#a8c900;
  color:#003f35;
}
@media (max-width:1180px){
  body.kei-corporate .topbar{
    align-items:flex-start;
    flex-direction:column;
    padding:10px 14px;
    gap:10px;
  }
  body.kei-corporate .brand{
    width:100%;
    max-width:100%;
  }
  body.kei-corporate .brand-logo img{
    height:40px !important;
    max-width:min(230px, 62vw) !important;
  }
  body.kei-corporate .brand-title{ display:none; }
  body.kei-corporate .nav{
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    gap:8px 10px;
    margin-left:0;
    flex-wrap:wrap;
  }
  body.kei-corporate .topbar form[action$="logout.php"]{
    margin-left:auto !important;
  }
}
@media (max-width:560px){
  body.kei-corporate .topbar{ padding:9px 10px; }
  body.kei-corporate .brand-logo img{
    height:34px !important;
    max-width:min(190px, 70vw) !important;
  }
  body.kei-corporate .nav{ gap:6px; }
  body.kei-corporate .nav a:not(.btn){ font-size:13px; }
  body.kei-corporate .locale-switch select{ min-width:58px; height:36px; padding:6px 22px 6px 9px; }
  body.kei-corporate .nav .user{ display:none; }
  body.kei-corporate .nav .btn,
  body.kei-corporate .topbar form .btn{ min-height:36px; padding:8px 11px; font-size:13px; }
}

/* KEI r056 · common corporate header compact tuning */
body.kei-corporate .topbar{
  min-height:72px;
  padding:10px 32px;
}
body.kei-corporate .brand{ gap:12px; max-width:520px; }
body.kei-corporate .brand-logo{ max-width:245px; }
body.kei-corporate .brand-logo img{
  height:42px !important;
  max-width:240px !important;
}
body.kei-corporate .brand-title{ padding-left:11px; }
body.kei-corporate .brand-title strong{ font-size:14px; }
body.kei-corporate .brand-title small{ font-size:11.5px; }
@media (max-width:1180px){
  body.kei-corporate .topbar{ padding:9px 14px; }
  body.kei-corporate .brand-logo img{ height:36px !important; max-width:min(215px, 62vw) !important; }
}
@media (max-width:560px){
  body.kei-corporate .brand-logo img{ height:32px !important; max-width:min(175px, 58vw) !important; }
}

/* KEI r070 · modal global para subidas/procesos de archivos */
.kei-upload-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0, 63, 53, .55);
  backdrop-filter: blur(3px);
}
.kei-upload-overlay.is-visible{display:flex;}
.kei-upload-overlay__box{
  width:min(520px, 94vw);
  border:1px solid #dce6d4;
  border-radius:24px;
  background:#fff;
  color:#003f35;
  box-shadow:0 22px 80px rgba(0,0,0,.22);
  padding:30px 28px;
  text-align:center;
}
.kei-upload-overlay__spinner{
  width:54px;
  height:54px;
  margin:0 auto 16px auto;
  border-radius:50%;
  border:6px solid #dce6d4;
  border-top-color:#006b54;
  animation:keiUploadSpin .8s linear infinite;
}
.kei-upload-overlay__box strong{font-size:22px;display:block;margin-bottom:8px;}
.kei-upload-overlay__box p{margin:0;color:#607064;line-height:1.45;}
html.kei-upload-busy, html.kei-upload-busy body{cursor:progress;}
@keyframes keiUploadSpin{to{transform:rotate(360deg)}}