/* ========================
   Saborati · Nómina Admin
   Mismo patrón que tablero-saborati
   ======================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #1a5276;
  --primary-dark: #154360;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #2c3e50;
  --muted: #7f8c8d;
  --border: #e1e4e8;
  --warn: #f39c12;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

.admin-topbar {
  background: var(--primary);
  color: #fff;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-topbar .logo {
  font-weight: 600;
  font-size: 1.05rem;
}

.admin-container {
  max-width: 1200px;
  margin: 28px auto;
  padding: 0 20px;
}

.card {
  background: var(--card);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.card h1 { margin-bottom: 14px; color: var(--primary); }
.card p { margin-bottom: 12px; }
.card .warn {
  background: #fff4e0;
  border-left: 4px solid var(--warn);
  padding: 14px 18px;
  border-radius: 6px;
  color: #8a5a00;
}
.card a { color: var(--primary); }
.muted { color: var(--muted); }

/* ── Topbar derecha: usuario + salir ── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-user {
  font-size: 0.9rem;
  opacity: 0.92;
}
.link-logout {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 5px 12px;
  border-radius: 6px;
}
.link-logout:hover { background: rgba(255,255,255,0.12); }

/* ── Login del admin ── */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  padding: 20px;
}
.login-card {
  background: var(--card);
  border-radius: 10px;
  padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.login-card h1 {
  color: var(--primary);
  margin-bottom: 6px;
  font-size: 1.4rem;
}
.login-card .muted { margin-bottom: 22px; }
.login-input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text);
}
.login-input:focus {
  outline: none;
  border-color: var(--primary);
}
.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.login-btn:hover { background: var(--primary-dark); }
.login-error {
  margin-top: 14px;
  background: #fdecea;
  color: #b03a2e;
  border-left: 4px solid #e74c3c;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: left;
}
.hint { margin-top: 18px; font-size: 0.85rem; }
.hint a { color: var(--muted); text-decoration: none; }
.hint a:hover { color: var(--primary); }

/* ── Pestañas del admin ── */
.admin-tabs {
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  padding: 0 12px;
  overflow-x: auto;
}
.admin-tab {
  flex: 0 0 auto;
  padding: 14px 22px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.admin-tab:hover { color: var(--primary); }
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.admin-tab.disabled { color: #b8c0c6; cursor: not-allowed; }

/* ── Encabezado de página ── */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.page-head h1 { color: var(--primary); font-size: 1.5rem; }
.page-head-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head-actions { display: flex; align-items: center; gap: 10px; }

/* ── Botones ── */
.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  background: #eef1f4;
  color: var(--text);
}
.btn:hover { filter: brightness(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #fff; color: var(--primary); border-color: var(--border); }
.btn-secondary:hover { background: #f4f6f8; }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-danger-ghost { background: #fff; color: #b03a2e; border-color: #f1c0bb; }
.btn-danger-ghost:hover { background: #fdecea; }

/* ── Aviso de éxito ── */
.toast-ok {
  background: #e8f6ee;
  color: #1e7e45;
  border-left: 4px solid #27ae60;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 0.92rem;
}

/* ── Filtros ── */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.filtro-input, .filtro-select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.92rem;
  background: #fff;
  color: var(--text);
}
.filtro-input { flex: 1 1 220px; min-width: 200px; max-width: 320px; }
.filtro-input:focus, .filtro-select:focus { outline: none; border-color: var(--primary); }
.filtro-count { color: var(--muted); font-size: 0.85rem; margin-left: auto; }

/* ── Tabla ── */
.tabla-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.tabla-wrap.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla thead th {
  text-align: left;
  padding: 12px 14px;
  background: #f7f9fb;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}
.tabla tbody td { padding: 10px 14px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: #f9fbfc; }
.tabla tbody tr.row-link { cursor: pointer; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .td-nombre { font-weight: 600; color: var(--text); }
.col-foto { width: 80px; }
.col-acc { width: 1%; white-space: nowrap; }
.tabla-empty { padding: 28px; text-align: center; color: var(--muted); }

/* ── Avatares ── */
.avatar-sm {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar-ini { color: #fff; font-size: 1.4rem; font-weight: 700; }

/* ── Badges y estado ── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge-on { background: #e8f6ee; color: #1e7e45; }
.badge-off { background: #f0f1f2; color: #7f8c8d; }
.badge.tipo-var { background: #e8f1fb; color: #1f5b8f; }
.badge.tipo-fija { background: #e8f6ee; color: #1e7e45; }
.badge.tipo-ded { background: #fdecea; color: #b03a2e; }
.estado { font-size: 0.85rem; font-weight: 500; }
.estado-trabajando { color: #1e7e45; }
.estado-comiendo { color: #b9770e; }
.estado-fuera { color: #95a0a8; }
.acciones { display: flex; gap: 8px; align-items: center; }
.inline-form { display: inline; margin: 0; }

/* ── Formulario de empleado ── */
.form-error {
  background: #fdecea; color: #b03a2e; border-left: 4px solid #e74c3c;
  padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.92rem;
}
.foto-top { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; text-align: center; }
.form-section {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px 18px; margin-bottom: 16px;
}
.form-section legend { padding: 0 8px; color: var(--primary); font-weight: 600; font-size: 0.95rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.fg { display: flex; flex-direction: column; min-width: 0; }
.fg-2 { grid-column: 1 / -1; }
.fg label { font-size: 0.82rem; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.emp-form input, .emp-form select, .emp-form textarea {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.92rem; color: var(--text); background: #fff; width: 100%; font-family: inherit;
}
.emp-form input:focus, .emp-form select:focus, .emp-form textarea:focus { outline: none; border-color: var(--primary); }
.emp-form textarea { resize: vertical; }
.hint-field { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
.time-field { display: flex; align-items: center; gap: 6px; }
.time-field input { flex: 1 1 auto; min-width: 0; }
.clear-time {
  flex: 0 0 auto; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.clear-time:hover { background: #fdecea; color: #b03a2e; border-color: #f1c0bb; }
.form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* ── Foto (arriba del formulario, estilo foto de perfil) ── */
.foto-preview {
  width: 160px; height: 160px; border-radius: 50%;
  border: 1px dashed var(--border);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #f7f9fb;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-placeholder { color: var(--muted); font-size: 0.9rem; }
.btn-foto { cursor: pointer; }

/* ── Responsive ── */
@media (max-width: 820px) {
  .form-grid { grid-template-columns: 1fr; }
  .filtro-count { width: 100%; margin-left: 0; text-align: right; }
  .tabla-wrap { overflow-x: auto; }
  .tabla { min-width: 680px; }
}
@media (max-width: 560px) {
  .admin-topbar { padding: 12px 14px; }
  .admin-topbar .logo { font-size: 0.9rem; }
  .topbar-user { display: none; }
  .admin-container { padding: 0 12px; margin: 18px auto; }
  .page-head { flex-wrap: wrap; }
  .page-head h1 { font-size: 1.25rem; }
  .foto-preview { width: 140px; height: 140px; }
  .form-actions .btn { flex: 1; }
}

/* ── Movimientos ── */
.banner-warn {
  background: #fff4e0; border-left: 4px solid var(--warn); color: #8a5a00;
  padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.92rem;
}
.monto-neg { color: #b03a2e; }
.filtro-fecha { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.filtro-input-date {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.9rem; color: var(--text); background: #fff;
}
.paginacion { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.td-nota { color: var(--muted); font-size: 0.85rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock { opacity: 0.7; }

/* ── Nóminas ── */
.estatus-borrador { background: #f0f1f2; color: #7f8c8d; }
.estatus-cerrada { background: #e8f1fb; color: #1f5b8f; }
.estatus-pagada { background: #e8f6ee; color: #1e7e45; }
.resumen-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.resumen-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px;
}
.resumen-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.resumen-valor { font-size: 1.3rem; font-weight: 700; color: var(--primary); }
.acciones-nomina { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.seccion-titulo { color: var(--primary); font-size: 1.1rem; margin-bottom: 10px; }

/* Recibo desplegable (movimientos del recibo) */
.recibo-row { cursor: pointer; }
.recibo-row:hover { background: #f9fbfc; }
.chev { display: inline-block; transition: transform .15s; color: var(--muted); font-size: 0.8rem; margin-right: 4px; }
.recibo-row.abierto .chev { transform: rotate(90deg); }
.recibo-detalle > td { background: #f7f9fb; padding: 0 14px 12px 28px; }
.sub-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sub-tabla th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.sub-tabla td { padding: 6px 8px; border-top: 1px solid #e8edf1; }
.recibo-movs-cargando, .recibo-movs-vacio { padding: 10px 4px; color: var(--muted); font-size: 0.85rem; }
.recibo-acciones { padding: 10px 4px 2px; }

/* ── Menú de inicio (sobrio, iconos ejecutivos) ── */
.menu-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.menu-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.menu-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.menu-card-icon {
  width: 46px; height: 46px; border-radius: 10px; flex: 0 0 auto;
  background: #e8f1fb; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-card-icon svg { width: 22px; height: 22px; }
.menu-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-card-titulo { color: var(--primary); font-weight: 600; font-size: 1.05rem; }
.menu-card-desc { color: var(--muted); font-size: 0.85rem; }

/* ── Faltas y retardos (pantalla del recibo) ── */
.incid-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.incid-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; flex: 1 1 220px; }
.incid-card-lbl { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.incid-card-num { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.incid-card-num.malo { color: #b03a2e; }
.incid-card-num.bien { color: #1e7e45; }
.incid-card-det { font-size: 0.85rem; color: #b03a2e; line-height: 1.5; margin-top: 4px; }

/* ── Banda divisoria por nómina (lista de recibos) ── */
.grupo-nomina td { background: #eef2f6; border-top: 2px solid #cfd8e0; padding: 9px 14px; }
.grupo-nomina:hover td { background: #eef2f6; }
.grupo-sem { font-weight: 700; color: var(--primary); margin-right: 10px; }
.grupo-fechas { color: var(--muted); font-size: 0.82rem; margin-right: 10px; }
.cnt-malo { color: #b03a2e; font-weight: 700; }
.cnt-cero { color: #95a0a8; }

/* ── Registros de hoy (admin) ── */
.resumen-estados { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.badge.est-trabajando { background: #e8f6ee; color: #1e7e45; }
.badge.est-comiendo { background: #fdf3e3; color: #b9770e; }
.badge.est-fuera { background: #f0f1f2; color: #7f8c8d; }
.badge.badge-tarde { background: #fdf3e3; color: #b9770e; }
.reg-estatus { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }
.reg-row { display: flex; align-items: center; gap: 10px; }
.reg-nombre { font-weight: 600; }
.avatar-reg {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.85rem;
}

/* Tabla compacta (Registros): columnas pegadas a la izquierda, el sobrante
   al borde derecho; más chico en celular para ver más de un vistazo. */
.tabla-compacta td, .tabla-compacta th { padding: 8px 10px; }
.tabla-compacta td:not(:first-child), .tabla-compacta th:not(:first-child) { white-space: nowrap; }
.tabla-compacta td:last-child, .tabla-compacta th:last-child { width: 100%; }
@media (max-width: 560px) {
  .tabla-compacta { font-size: 0.85rem; }
  .tabla-compacta td, .tabla-compacta th { padding: 6px 8px; }
  .tabla-compacta .reg-row { gap: 8px; }
  .tabla-compacta .avatar-reg { width: 34px; height: 34px; font-size: 0.72rem; }
}

/* ── Etiqueta de concepto con color (catálogo de Conceptos) ── */
.badge.badge-color { color: #fff; border: none; }

/* ── Históricos: tabla densa para que quepan todas las columnas ── */
.tabla-hist { font-size: 0.8rem; }
.tabla-hist th, .tabla-hist td { padding: 6px 8px; }
.tabla-hist thead th { white-space: normal; line-height: 1.15; font-size: 0.68rem; }
.tabla-hist tbody td { white-space: nowrap; }
.tabla-hist .badge { padding: 2px 8px; font-size: 0.72rem; }
.tabla-hist .td-nota { max-width: 110px; white-space: nowrap; }
/* anula el "última columna al 100%" de .tabla-compacta: el candado va mínimo */
.tabla-hist td:last-child, .tabla-hist th:last-child { width: 1%; }

/* ── Recuadro de cálculo (no editable) en el form de movimiento ── */
.calc-box {
  background: #f4f7f9;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.calc-row span { color: var(--muted); font-size: 0.9rem; }
.calc-row strong { font-size: 1rem; }
.calc-row.calc-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.calc-row.calc-total strong { font-size: 1.25rem; color: var(--primary); }

/* ── Paleta de colores (editor de Conceptos) ── */
.color-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch-opt { cursor: pointer; }
.swatch-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch-pill {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  color: #fff; font-size: 0.82rem; font-weight: 600;
  border: 2px solid transparent; transition: transform 0.05s, box-shadow 0.15s;
}
.swatch-pill.swatch-none { background: #eef1f4; color: var(--muted); }
.swatch-opt input:checked + .swatch-pill {
  border-color: #1f2d3d; box-shadow: 0 0 0 2px #fff inset;
}
.swatch-opt input:focus-visible + .swatch-pill { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Detalle de un movimiento dentro del recibo (2º nivel de clic) ── */
.sub-tabla tr.mov-row { cursor: pointer; }
.sub-tabla tr.mov-row:hover { background: #eef3f7; }
.chev-sm { display: inline-block; color: var(--muted); font-size: 0.75rem; transition: transform 0.15s; }
.sub-tabla tr.mov-row.abierto .chev-sm { transform: rotate(90deg); }
.mov-detalle > td { background: #eef3f7; border-top: none; }
.mov-detalle-grid { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 4px 4px 8px 18px; }
.mov-detalle-grid > div { display: flex; flex-direction: column; }
.mov-detalle-grid .mov-detalle-nota { flex-basis: 100%; }
.mdl { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }
.mdv { font-size: 0.9rem; }

/* ── Totales de los registros filtrados (Históricos) ── */
.tot-filtro {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 0 0 12px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.9rem; color: var(--muted);
}
.tot-filtro strong { color: var(--text); }
.tot-filtro .tot-monto strong { color: var(--primary); }

/* Lápiz de edición dentro del detalle de movimiento (recibo desplegado) */
.mov-detalle-edit { margin-left: auto; align-self: center; }

/* Nota de cálculo automático junto a las acciones de la nómina */
.nota-autocalc { font-size: 0.85rem; align-self: center; }

/* ── Sub-pestañas dentro de la pestaña Conceptos ── */
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.subtab {
  background: none; border: none; cursor: pointer;
  padding: 10px 16px; font-size: 0.92rem; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--primary); border-bottom-color: var(--primary); }
.panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cat-add { display: flex; gap: 8px; margin-bottom: 14px; max-width: 480px; }
.cat-add input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; }
.cat-add input:focus { outline: none; border-color: var(--primary); }

/* ── PC vs móvil en Registros: en PC se ve TODO completo, sin scroll ──
   En pantallas grandes la pestaña Registros usa más ancho y la tabla densa
   cabe entera: las columnas de texto (Colaborador, Concepto, Nota) bajan de
   renglón en lugar de cortarse o exigir scroll horizontal. Las columnas
   cortas (horas, montos, fechas) se quedan en una sola línea.
   En móvil/tablet se conserva el scroll horizontal de antes. */
@media (min-width: 1024px) {
  .admin-container.pg-movimientos { max-width: 1700px; }
  .pg-movimientos .tabla-hist tbody td:nth-child(2),
  .pg-movimientos .tabla-hist tbody td:nth-child(4),
  .pg-movimientos .tabla-hist tbody td.td-nota { white-space: normal; }
  .pg-movimientos .tabla-hist .badge { white-space: normal; }
  .pg-movimientos .tabla-hist .td-nota { max-width: 280px; }
}

/* "+" para agregar un movimiento desde el recibo (solo nóminas en Borrador) */
.add-mov {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 10px;
  border: 1px solid var(--primary); border-radius: 50%;
  color: var(--primary); background: #fff;
  font-weight: 700; font-size: 0.95rem; line-height: 1; text-decoration: none;
  vertical-align: middle;
}
.add-mov:hover { background: var(--primary); color: #fff; }

/* Sección "Estatus del colaborador" (ficha, abajo del form) */
.seccion-estatus { margin-top: 18px; }
.seccion-estatus-titulo { font-size: 1rem; color: var(--primary); margin-bottom: 10px; }
.estatus-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.estatus-row .muted { flex: 1 1 280px; font-size: 0.88rem; }

/* Horas extra */
.mini-extra { font-size: 0.72rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.resumen-extra { color: #b15c42; }
.hrs-extra { font-size: 0.75rem; color: #b15c42; }

/* Desglose horas normales/extra en el recibo desplegado de la nómina */
.mov-des { padding: 8px 4px 10px; font-size: 0.88rem; color: var(--muted); }
.mov-des strong { color: var(--text); }
.mov-des .des-extra { color: #b15c42; }
.resumen-sub { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

/* Contadores en vivo de la pestaña Hoy */
.cel-comida.vivo, .cel-horas.vivo { color: var(--primary); font-weight: 600; white-space: nowrap; }
.dot-vivo {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #1e7e45; margin-right: 6px; vertical-align: middle;
  animation: parpadeo 1.2s ease-in-out infinite;
}
.cel-comida .dot-vivo { background: #b9770e; }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Botón Duplicar en Registros */
.td-acciones { white-space: nowrap; }
.btn-dup {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); background: #fff; text-decoration: none;
  font-size: 0.95rem; line-height: 1; margin-right: 4px;
}
.btn-dup:hover { color: var(--primary); border-color: var(--primary); }