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

body {
  background: #F5F4F0;
  color: #1B1A17;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #B23A16; }
a:hover { color: #D9411A; }
input, select, button { font-family: inherit; }

.envoltura {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Encabezado */
.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.encabezado-titulo { display: flex; flex-direction: column; gap: 6px; }
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: #B23A16; letter-spacing: .04em;
}
.punto { width: 9px; height: 9px; border-radius: 50%; background: #F2542D; }
.encabezado h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.subtitulo { font-size: 14px; color: #6E6A63; }

.tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: #fff; border: 1px solid #E9E6E0; border-radius: 12px; padding: 4px;
}
.tab {
  height: 38px; padding: 0 14px; border: 0; border-radius: 9px;
  background: transparent; color: #3B3934; font-weight: 700; font-size: 14px; cursor: pointer;
}
.tab.activa { background: #1B1A17; color: #fff; }

/* Secciones */
.panel-tab { display: none; flex-direction: column; gap: 16px; }
.panel-tab.activa { display: flex; }

.tarjeta {
  background: #fff; border: 1px solid #E9E6E0; border-radius: 14px; padding: 16px 18px;
}
.proximamente { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.proximamente h2 { font-size: 18px; font-weight: 800; }
.proximamente p { font-size: 14px; color: #3B3934; line-height: 1.55; }

.chip {
  align-self: flex-start; padding: 3px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 800;
}
.chip-ambar { background: #FFF0D1; color: #8F5A00; }
.chip-verde { background: #DFF5E5; color: #17713A; }
.chip-rojo { background: #FDE3E0; color: #B3261E; }

/* Barra de sincronización */
.barra-sync {
  background: #1B1A17; color: #fff; border-radius: 14px; padding: 14px 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.barra-sync-izq { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.punto-estado {
  width: 10px; height: 10px; border-radius: 50%; background: #E8B500;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
.barra-sync-der { font-size: 13px; color: #D9D5CC; }

/* Controles */
.controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.control { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: #6E6A63; }
.control select, .control input {
  height: 38px; border: 1px solid #DDD9D1; border-radius: 9px; background: #fff;
  padding: 0 10px; font-size: 14px; color: #1B1A17;
}
.boton-hoy {
  height: 38px; padding: 0 16px; border: 0; border-radius: 9px;
  background: #F2542D; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
}
.boton-hoy:hover { background: #D9411A; }

/* Tiles resumen */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile {
  background: #fff; border: 1px solid #E9E6E0; border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.tile span:first-child { font-size: 12.5px; font-weight: 700; color: #6E6A63; }
.tile span:last-child { font-size: 26px; font-weight: 800; }

/* Tabla */
.tabla-contenedor { padding: 0; overflow: hidden; }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.tabla thead th {
  text-align: left; padding: 10px 16px; background: #FBFAF8; border-bottom: 1px solid #E9E6E0;
  font-size: 12px; font-weight: 800; color: #6E6A63;
}
.tabla tbody td { padding: 11px 16px; border-bottom: 1px solid #F0EDE7; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.nombre-trabajador { font-weight: 700; }
.pin-trabajador { font-size: 12px; color: #6E6A63; }
.vacio { text-align: center; color: #6E6A63; padding: 24px; }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 800;
}
.badge-verde { background: #DFF5E5; color: #17713A; }
.badge-ambar { background: #FFF0D1; color: #8F5A00; }
.badge-rojo { background: #FDE3E0; color: #B3261E; }
.badge-gris { background: #F1EFEA; color: #3B3934; }

.nota { font-size: 12.5px; color: #6E6A63; line-height: 1.5; }

@media (max-width: 640px) {
  .encabezado h1 { font-size: 24px; }
  .controles { flex-direction: column; align-items: stretch; }
}